/* ═══════════════════════════════════════════════════════════════════
   Cambright Agent Portal Pro — 中介专业端
   1:1 implementation of the approved desktop prototype.
   Palette: navy #1E2A4A · brand #3B5BDB · ink #1A1D26 · bg #F4F5F7
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --apro-navy: #12244a;
  --apro-navy-deep: #0b1a38;
  --apro-navy-soft: #1a315f;
  --apro-navy-hi: #294473;
  --apro-brand: #2856d8;
  --apro-ink: #162033;
  --apro-ink2: #536075;
  --apro-ink3: #8490a3;
  --apro-bg: #f6f8fb;
  --apro-line: #dfe4ec;
  --apro-line-soft: #edf0f5;
  --apro-green: #0e9f6e;
  --apro-amber: #d9930d;
  --apro-red: #c0392b;
  --apro-purple: #6c4ff5;
  --apro-gold: #b08a4a;
  --apro-r: 12px;
  --apro-r-sm: 9px;
  --apro-shadow: 0 1px 2px rgba(16, 24, 40, 0.035);
  --apro-shadow-md: 0 8px 22px rgba(16, 35, 74, 0.08);
  --apro-font: "Inter", "Plus Jakarta Sans", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --apro-font-display: "Plus Jakarta Sans", "Inter", -apple-system, "PingFang SC", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--apro-font);
  background: var(--apro-bg);
  color: var(--apro-ink);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.6;
}

html, body { width: 100%; height: 100%; overflow: hidden; }
#agent-portal-pro-root { width: 100%; height: 100%; }

.apro-app a { color: var(--apro-brand); text-decoration: none; }
.apro-app a:hover { color: var(--apro-navy); text-decoration: underline; }
.apro-app input, .apro-app select, .apro-app button, .apro-app textarea { font-family: inherit; }

.apro-app ::-webkit-scrollbar { width: 9px; height: 9px; }
.apro-app ::-webkit-scrollbar-thumb { background: #d7dbe5; border-radius: 9px; }
.apro-app ::-webkit-scrollbar-track { background: transparent; }

@keyframes aproFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes aproToast { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── boot splash ── */
.apro-boot { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--apro-bg); }
.apro-boot-card { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.apro-boot-logo {
  width: 64px; height: 64px; border-radius: 50%; object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(18, 36, 74, 0.14));
}
.apro-boot-line { width: 150px; height: 8px; border-radius: 6px; background: #e6e8ee; overflow: hidden; position: relative; }
.apro-boot-line::after {
  content: ""; position: absolute; inset: 0; border-radius: 6px;
  background: linear-gradient(90deg, transparent, #d3d8e4, transparent);
  animation: aproShimmer 1.1s infinite linear;
}
.apro-boot-line-short { width: 96px; }
@keyframes aproShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.apro-boot-error { color: var(--apro-ink2); font-size: 12.5px; max-width: 420px; text-align: center; line-height: 1.6; }
.apro-boot-error b { display: block; font-size: 14px; color: var(--apro-ink); margin-bottom: 4px; }
.apro-page-state {
  min-height: 360px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; color: var(--apro-ink); text-align: center;
}
.apro-page-state span { max-width: 560px; color: var(--apro-ink2); }
.apro-page-state--error b { color: var(--apro-red); }
.apro-twofa-card { width: min(420px, calc(100vw - 32px)); gap: 14px; }
.apro-twofa-card .apro-boot-error { display: flex; flex-direction: column; gap: 6px; }

/* ═══════════════ Shell ═══════════════ */
.apro-app { display: flex; width: 100%; height: 100%; min-height: 0; overflow: hidden; background: var(--apro-bg); }

/* ── sidebar ── */
.apro-sb {
  flex-shrink: 0; width: 224px; background: var(--apro-navy-deep);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  transition: width 0.18s ease;
}
.apro-app.is-collapsed .apro-sb { width: 68px; }
.apro-sb-brand { display: flex; align-items: center; gap: 12px; min-height: 74px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.apro-sb-logo {
  width: 46px; height: 46px; border-radius: 50%; object-fit: contain; flex-shrink: 0;
}
.apro-sb-brand-name { min-width: 0; }
.apro-sb-brand-name b { font-size: 14px; color: #fff; display: block; line-height: 1.25; font-weight: 800; letter-spacing: 0.065em; }
.apro-sb-brand-name small { font-size: 9.5px; color: #8ea0c2; letter-spacing: 0.05em; }

.apro-sb-nav { flex: 1; overflow-y: auto; padding: 14px 0 8px; }
.apro-nav-item {
  display: flex; align-items: center; gap: 12px; margin: 2px 10px; padding: 9px 12px;
  border-radius: var(--apro-r-sm); font-size: 13px; cursor: pointer; transition: 0.13s;
  position: relative; color: #c2cad9; font-weight: 400; border: 0; background: transparent;
  width: calc(100% - 20px); text-align: left;
}
.apro-nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.apro-nav-item.is-active { background: #294677; color: #fff; font-weight: 700; }
.apro-nav-icon { width: 18px; height: 18px; display: grid; place-items: center; opacity: 0.92; flex-shrink: 0; }
.apro-icon { width: 1em; height: 1em; display: inline-block; flex: 0 0 auto; }
.apro-nav-icon .apro-icon { width: 17px; height: 17px; }
.apro-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apro-nav-badge {
  margin-left: auto; font-size: 9.5px; font-weight: 800; padding: 1px 7px; border-radius: 9px;
  background: rgba(217, 147, 13, 0.3); color: #f0c674;
}
.apro-app.is-collapsed .apro-nav-badge { position: absolute; top: 3px; right: 6px; margin-left: 0; padding: 1px 5px; }

.apro-sb-foot { padding: 12px 12px 14px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.apro-advisor {
  width: 100%; text-align: left; border-radius: var(--apro-r); background: #152a54; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1); padding: 11px 12px; margin-bottom: 10px; cursor: pointer;
}
.apro-advisor-label { display: block; font-size: 9.5px; color: #8ea0c2; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.apro-advisor-row { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.apro-advisor-ava {
  width: 32px; height: 32px; border-radius: 50%; background: #c9d6f0; color: var(--apro-navy);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.apro-advisor-info { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.apro-advisor-name { font-size: 12.5px; color: #fff; font-weight: 700; }
.apro-advisor-meta { font-size: 10px; color: #8ea0c2; }
.apro-advisor-row > .apro-icon { width: 14px; height: 14px; color: #8ea0c2; }
.apro-sb-foot-btns { display: flex; gap: 6px; }
.apro-sb-foot-btn {
  flex: 1; height: 30px; border-radius: var(--apro-r-sm); border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06); color: #c2cad9; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.apro-sb-foot-btn .apro-icon { width: 15px; height: 15px; vertical-align: middle; }
.apro-sb-foot-btn.is-reversed .apro-icon { transform: rotate(180deg); }
.apro-sb-foot-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.apro-app.is-collapsed .apro-sb-foot-btns { flex-direction: column; }
.apro-app.is-collapsed .apro-sb-brand-name,
.apro-app.is-collapsed .apro-nav-label,
.apro-app.is-collapsed .apro-advisor { display: none; }
.apro-app.is-collapsed .apro-sb-brand { justify-content: center; padding-left: 0; padding-right: 0; }
.apro-app.is-collapsed .apro-nav-item { justify-content: center; }

/* ── main column / topbar ── */
.apro-main-col { flex: 1; min-width: 0; min-height: 0; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.apro-topbar {
  height: 72px; flex-shrink: 0; background: rgba(255, 255, 255, 0.98); border-bottom: 1px solid var(--apro-line);
  display: flex; align-items: center; gap: 22px; padding: 0 26px; position: sticky; top: 0; z-index: 40;
}
.apro-topbar-titles { flex: 0 1 auto; min-width: 150px; overflow: hidden; }
.apro-topbar-title { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apro-topbar-sub { font-size: 11.5px; color: var(--apro-ink3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apro-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.apro-search {
  display: flex; align-items: center; gap: 8px; height: 36px; width: 250px; min-width: 130px; flex-shrink: 1;
  border: 1px solid var(--apro-line); border-radius: var(--apro-r-sm); padding: 0 12px; background: #fcfcfd;
}
.apro-search-icon { font-size: 12px; color: var(--apro-ink3); }
.apro-search-icon .apro-icon { width: 16px; height: 16px; display: block; }
.apro-search input { border: 0; outline: none; background: transparent; font-size: 12.5px; width: 100%; color: var(--apro-ink); }
.apro-topbar-cta {
  height: 36px; padding: 0 15px; border-radius: var(--apro-r-sm); border: 1px solid transparent;
  background: var(--apro-navy); color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.apro-topbar-cta .apro-icon { width: 15px; height: 15px; }
.apro-topbar-cta:hover { background: #253358; }
.apro-lang-btn {
  height: 36px; padding: 0 11px; border-radius: var(--apro-r-sm); border: 1px solid var(--apro-line);
  background: #fff; color: var(--apro-ink2); font-size: 12px; font-weight: 700; cursor: pointer;
}
.apro-bell-btn {
  position: relative; width: 36px; height: 36px; border-radius: var(--apro-r-sm);
  border: 1px solid var(--apro-line); background: #fff; color: var(--apro-ink2); font-size: 14px; cursor: pointer;
}
.apro-bell-btn .apro-icon { width: 17px; height: 17px; vertical-align: middle; }
.apro-bell-dot { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--apro-red); }
.apro-topbar-sep { width: 1px; height: 26px; background: var(--apro-line); }
.apro-user-chip { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 6px 4px 4px; border-radius: 9px; }
.apro-user-chip:hover { background: var(--apro-bg); }
.apro-user-ava {
  width: 36px; height: 36px; border-radius: 50%; background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--apro-line);
}
.apro-user-ava img { width: 100%; height: 100%; object-fit: contain; }
.apro-user-lines { line-height: 1.25; min-width: 0; max-width: 260px; }
.apro-user-name { font-size: 12.5px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apro-user-tier { font-size: 10px; color: var(--apro-gold); font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apro-user-caret { color: var(--apro-ink3); display: grid; place-items: center; }
.apro-user-caret .apro-icon { width: 12px; height: 12px; transform: rotate(90deg); }

.apro-content { flex: 1; min-height: 0; overflow-y: scroll; scrollbar-gutter: stable; padding: 20px 26px 56px; }
.apro-content-inner { width: 100%; }
.apro-screen { animation: aproFade 0.22s ease; }

/* ═══════════════ Atoms ═══════════════ */
.apro-card { background: #fff; border: 1px solid var(--apro-line); border-radius: var(--apro-r); box-shadow: var(--apro-shadow); }
.apro-card-clip { overflow: hidden; }
.apro-card-head { padding: 15px 18px; border-bottom: 1px solid var(--apro-line-soft); display: flex; align-items: center; }
.apro-card-head-sm { padding: 14px 18px; }
.apro-card-title { font-size: 14px; font-weight: 800; }
.apro-card-sub { font-size: 11px; color: var(--apro-ink3); margin-top: 1px; }
.apro-card-link { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--apro-brand); cursor: pointer; }
.apro-card-link:hover { text-decoration: underline; }

.apro-pill { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; display: inline-block; }
.apro-pill--green { background: #e6f6f0; color: #0e9f6e; }
.apro-pill--amber { background: #fbf3e2; color: #8a5d00; }
.apro-pill--red { background: #fbebe9; color: #c0392b; }
.apro-pill--brand { background: #eef2ff; color: #3b5bdb; }
.apro-pill--purple { background: #eeeafe; color: #6c4ff5; }
.apro-pill--gray { background: #f0f1f4; color: #5b616e; }
.apro-pill--gold { background: #f6efe0; color: #8a6a2a; }

.apro-tone--green { color: var(--apro-green); }
.apro-tone--amber { color: #8a5d00; }
.apro-tone--red { color: var(--apro-red); }
.apro-tone--brand { color: var(--apro-brand); }
.apro-tone--purple { color: var(--apro-purple); }
.apro-tone--gold { color: var(--apro-gold); }
.apro-tone--gray { color: var(--apro-ink3); }
.apro-tone--ink { color: var(--apro-ink); }
.apro-tone--navy { color: var(--apro-navy); }

.apro-accent { height: 2px; border-radius: 2px; width: 28px; }
.apro-accent--green { background: var(--apro-green); }
.apro-accent--amber { background: var(--apro-amber); }
.apro-accent--navy { background: var(--apro-navy); }
.apro-accent--brand { background: var(--apro-brand); }
.apro-accent--purple { background: var(--apro-purple); }
.apro-accent--gold { background: var(--apro-gold); }
.apro-accent--red { background: var(--apro-red); }

.apro-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.apro-dot--green { background: var(--apro-green); }
.apro-dot--amber { background: var(--apro-amber); }
.apro-dot--red { background: var(--apro-red); }
.apro-dot--brand { background: var(--apro-brand); }
.apro-dot--purple { background: var(--apro-purple); }
.apro-dot--gray { background: var(--apro-ink3); }

.apro-btn {
  height: 36px; padding: 0 15px; border-radius: var(--apro-r-sm); border: 1px solid var(--apro-line);
  background: #fff; color: var(--apro-ink); font-size: 12.5px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
}
.apro-btn .apro-icon { width: 14px; height: 14px; }
.apro-btn:hover { border-color: #cdd2da; background: #fcfcfd; }
.apro-btn--primary { background: var(--apro-navy); color: #fff; border-color: transparent; font-weight: 800; }
.apro-btn--primary:hover { background: #253358; border-color: transparent; }
.apro-btn--danger { background: var(--apro-red); color: #fff; border-color: transparent; font-weight: 800; }
.apro-btn--danger:hover { background: #a93226; border-color: transparent; }
.apro-btn--sm { height: 30px; padding: 0 12px; border-radius: 7px; font-size: 11.5px; }
.apro-btn--xs { height: 32px; padding: 0 13px; border-radius: 7px; font-size: 12px; }
.apro-btn--mid { height: 34px; padding: 0 13px; font-size: 11.5px; color: var(--apro-ink2); }
.apro-btn--mid-dark { height: 34px; padding: 0 14px; font-size: 11.5px; background: var(--apro-navy); color: #fff; border-color: transparent; }
.apro-btn--mid-dark:hover { background: #253358; border-color: transparent; }
.apro-btn--hero { height: 38px; padding: 0 16px; border: 0; background: #fff; color: var(--apro-navy); font-size: 12.5px; font-weight: 800; border-radius: var(--apro-r-sm); cursor: pointer; }
.apro-btn--hero-ghost {
  height: 38px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.08);
  color: #fff; font-size: 12.5px; font-weight: 700; border-radius: var(--apro-r-sm); cursor: pointer;
}
.apro-btn--hero-ghost:hover, .apro-btn--head-ghost:hover { background: rgba(255, 255, 255, 0.15); }
.apro-btn--head-ghost {
  height: 36px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.08);
  color: #fff; font-size: 12.5px; font-weight: 700; border-radius: var(--apro-r-sm); cursor: pointer;
}
.apro-btn--head-solid { height: 36px; padding: 0 15px; border: 0; background: #fff; color: var(--apro-navy); font-size: 12.5px; font-weight: 800; border-radius: var(--apro-r-sm); cursor: pointer; }

.apro-icon-btn {
  width: 30px; height: 30px; border-radius: var(--apro-r-sm); border: 1px solid var(--apro-line);
  background: #fff; cursor: pointer; font-size: 12px; color: var(--apro-ink2);
  display: inline-flex; align-items: center; justify-content: center;
}
.apro-icon-btn .apro-icon { width: 14px; height: 14px; }
.apro-icon-btn:hover { border-color: #cdd2da; background: #fcfcfd; }
.apro-icon-btn--sm { width: 28px; height: 28px; border-radius: 7px; font-size: 11px; }
.apro-icon-btn--xs { width: 26px; height: 26px; border-radius: 7px; font-size: 11px; color: var(--apro-ink3); }

.apro-ava {
  width: 30px; height: 30px; border-radius: 50%; background: #eef2ff; color: var(--apro-brand);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0;
}

.apro-sec-label {
  font-size: 10.5px; font-weight: 800; color: var(--apro-ink3); text-transform: uppercase;
  letter-spacing: 0.06em; display: flex; align-items: center; gap: 7px;
}
.apro-sec-label-rule { flex: 1; height: 1px; background: var(--apro-line-soft); }

.apro-note { font-size: 11.5px; line-height: 1.55; border-radius: 9px; padding: 10px 13px; }
.apro-note--brand { background: #eef2ff; color: #2942a8; }
.apro-note--amber { background: #fbf3e2; color: #8a5d00; }
.apro-note--green { background: #e6f6f0; color: #0a6e4d; }

.apro-chip {
  font-size: 11.5px; padding: 6px 12px; border-radius: var(--apro-r-sm); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: 0.12s;
  border: 1px solid var(--apro-line); background: #fff; color: var(--apro-ink2); font-weight: 600;
}
.apro-chip:hover { border-color: #cdd2da; }
.apro-chip.is-active { border-color: var(--apro-navy); color: var(--apro-navy); font-weight: 700; }
.apro-chip--fill.is-active { background: var(--apro-navy); color: #fff; }
.apro-chip-count { font-size: 10px; font-weight: 700; color: var(--apro-ink3); }

.apro-filterbar {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--apro-line);
  border-radius: var(--apro-r); background: #fff; box-shadow: var(--apro-shadow); flex-wrap: wrap;
}
.apro-filterbar-sep { width: 1px; height: 20px; background: var(--apro-line); }
.apro-filterbar-right { margin-left: auto; display: flex; gap: 8px; }
.apro-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.apro-search--bar { height: 34px; }
.apro-search--w200 { width: 200px; }

.apro-select {
  height: 34px; border: 1px solid var(--apro-line); border-radius: var(--apro-r-sm); background: #fff;
  font-size: 11.5px; font-weight: 600; color: var(--apro-ink2); padding: 0 10px; cursor: pointer; outline: none;
}
.apro-select--sm { height: 30px; border-radius: 7px; font-size: 11.5px; font-weight: 700; padding: 0 9px; }
.apro-select--pager { height: 28px; border-radius: 7px; font-size: 11.5px; font-weight: 700; padding: 0 6px; }

/* tables */
.apro-tbl { width: 100%; border-collapse: collapse; }
.apro-tbl th {
  text-align: left; font-size: 10.5px; color: var(--apro-ink3); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 10px 14px; border-bottom: 1px solid var(--apro-line); background: #fcfcfd; white-space: nowrap;
}
.apro-tbl td { padding: 11px 14px; border-bottom: 1px solid var(--apro-line-soft); font-size: 12.5px; }
.apro-tbl .is-right { text-align: right; }
.apro-tbl--lg th { padding: 11px 14px; }
.apro-tbl--lg td { padding: 12px 14px; }
.apro-tbl .apro-cell-first { padding-left: 18px; }
.apro-tbl .apro-cell-last { padding-right: 18px; }
.apro-tbl--rowlink tbody tr { cursor: pointer; transition: 0.1s; }
.apro-tbl--rowlink tbody tr:hover { background: #fafbfc; }
.apro-num { font-variant-numeric: tabular-nums; }
.apro-cell-strong { font-size: 12px; font-weight: 700; color: var(--apro-ink); }
.apro-cell-muted { color: var(--apro-ink2); }
.apro-cell-faint { font-size: 11.5px; color: var(--apro-ink3); }
.apro-cell-date { font-size: 12px; color: var(--apro-ink3); }
.apro-th-sort { color: #c6cbd4; margin-left: 4px; }
.apro-name-cell { display: flex; align-items: center; gap: 10px; }
.apro-name-main { font-size: 12.5px; font-weight: 700; color: var(--apro-ink); }
.apro-name-sub { font-size: 10.5px; color: var(--apro-ink3); }
.apro-row-actions { display: flex; gap: 6px; justify-content: flex-end; }

.apro-checkbox { width: 14px; height: 14px; accent-color: var(--apro-navy); cursor: pointer; }

/* pager */
.apro-pager { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-top: 1px solid var(--apro-line); background: #fff; flex-wrap: wrap; }
.apro-pager-info { font-size: 12px; color: var(--apro-ink3); font-weight: 600; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.apro-pager-info b { color: var(--apro-ink); font-weight: 800; }
.apro-pager-btns { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.apro-page-btn {
  min-width: 30px; height: 30px; padding: 0 9px; border: 1px solid var(--apro-line); background: #fff;
  border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--apro-ink2); cursor: pointer;
}
.apro-page-btn.is-active { border-color: var(--apro-navy); background: var(--apro-navy); color: #fff; }
.apro-page-btn.is-disabled { opacity: 0.4; cursor: not-allowed; }
.apro-page-gap { min-width: 18px; text-align: center; color: var(--apro-ink3); font-size: 12px; }

/* forms */
.apro-field-label { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--apro-ink2); margin-bottom: 7px; }
.apro-req { color: var(--apro-red); font-weight: 800; }
.apro-opt { font-size: 9.5px; font-weight: 700; color: var(--apro-ink3); background: #f0f1f4; padding: 1.5px 7px; border-radius: 20px; }
.apro-input {
  width: 100%; height: 40px; border: 1px solid var(--apro-line); border-radius: var(--apro-r-sm);
  background: #fff; font-size: 13.5px; color: var(--apro-ink); padding: 0 13px; outline: none; transition: 0.13s;
}
.apro-input:focus, .apro-form-select:focus { border-color: var(--apro-brand); box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.12); }
.apro-input::placeholder { color: #a8aeb9; }
.apro-form-select {
  width: 100%; height: 40px; border: 1px solid var(--apro-line); border-radius: var(--apro-r-sm);
  background: #fff; font-size: 13.5px; color: var(--apro-ink); padding: 0 34px 0 13px; outline: none;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239AA0AC' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.apro-field-hint { font-size: 11px; color: var(--apro-ink3); margin-top: 6px; }
.apro-phone { display: flex; }
.apro-phone-code {
  display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
  border: 1px solid var(--apro-line); border-right: none; border-radius: var(--apro-r-sm) 0 0 var(--apro-r-sm);
  background: #fcfcfd; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.apro-phone-caret { font-size: 9px; color: var(--apro-ink3); }
.apro-phone .apro-input { flex: 1; min-width: 0; border-radius: 0 var(--apro-r-sm) var(--apro-r-sm) 0; }

/* info tiles (icon + k/v rows) */
.apro-tile {
  display: flex; align-items: center; gap: 9px; background: var(--apro-bg);
  border: 1px solid var(--apro-line-soft); border-radius: 9px; padding: 9px 11px;
}
.apro-tile-icon {
  width: 27px; height: 27px; border-radius: 7px; background: #fff; border: 1px solid var(--apro-line);
  display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;
}
.apro-tile-body { min-width: 0; flex: 1; }
.apro-tile-k { font-size: 10px; color: var(--apro-ink3); font-weight: 700; }
.apro-tile-v { font-size: 12.5px; font-weight: 700; margin-top: 1px; }
.apro-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

/* ═══════════════ Dashboard ═══════════════ */
.apro-dashboard { display: flex; flex-direction: column; gap: 14px; }
.apro-partner-card {
  display: flex; align-items: center; gap: 24px; min-height: 146px; padding: 21px 24px;
  background: #fff; border: 1px solid var(--apro-line); border-radius: var(--apro-r); box-shadow: var(--apro-shadow);
}
.apro-partner-main { flex: 1; min-width: 0; }
.apro-partner-eyebrow { display: flex; align-items: center; gap: 7px; color: var(--apro-brand); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.apro-partner-eyebrow .apro-icon { width: 15px; height: 15px; }
.apro-partner-name { margin: 4px 0 13px; font-size: clamp(20px, 1.65vw, 28px); line-height: 1.2; font-weight: 800; letter-spacing: -.035em; font-family: var(--apro-font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apro-partner-facts { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 14px; max-width: 860px; }
.apro-partner-fact { display: flex; align-items: center; gap: 9px; min-width: 0; }
.apro-partner-fact-icon { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--apro-line-soft); border-radius: 8px; color: var(--apro-brand); background: #f8faff; flex: 0 0 auto; }
.apro-partner-fact-icon .apro-icon { width: 15px; height: 15px; }
.apro-partner-fact span:last-child { min-width: 0; }
.apro-partner-fact small { display: block; color: var(--apro-ink3); font-size: 9px; line-height: 1.2; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.apro-partner-fact b { display: block; margin-top: 3px; color: var(--apro-ink); font-size: 11.5px; line-height: 1.25; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apro-partner-fact .apro-tone--gold { color: var(--apro-gold); }
.apro-partner-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; max-width: 350px; }
.apro-partner-actions .apro-btn { height: 36px; padding: 0 13px; gap: 7px; font-size: 11.5px; white-space: nowrap; }
.apro-partner-actions .apro-icon { width: 14px; height: 14px; }
.apro-btn--secondary { background: #fff; color: var(--apro-navy); border-color: #cbd3df; font-weight: 750; }
.apro-btn--quiet { background: transparent; color: var(--apro-ink2); border-color: transparent; font-weight: 700; }
.apro-btn--quiet:hover { background: var(--apro-bg); border-color: var(--apro-line-soft); }

.apro-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; }
.apro-kpi {
  min-width: 0; min-height: 110px; text-align: left; background: #fff; color: var(--apro-ink); border: 1px solid var(--apro-line); border-radius: var(--apro-r); padding: 14px 15px;
  box-shadow: var(--apro-shadow); cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: 0.14s;
}
.apro-kpi:hover { box-shadow: var(--apro-shadow-md); transform: translateY(-1px); }
.apro-kpi-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.apro-kpi-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: var(--apro-navy); background: #eef2f8; flex: 0 0 auto; }
.apro-kpi-icon .apro-icon { width: 14px; height: 14px; }
.apro-kpi--green .apro-kpi-icon { background: #e7f7f1; color: var(--apro-green); }
.apro-kpi--amber .apro-kpi-icon { background: #fcf4e4; color: var(--apro-amber); }
.apro-kpi--brand .apro-kpi-icon { background: #edf2ff; color: var(--apro-brand); }
.apro-kpi--purple .apro-kpi-icon { background: #f1edff; color: var(--apro-purple); }
.apro-kpi--gold .apro-kpi-icon { background: #f8f2e8; color: var(--apro-gold); }
.apro-kpi-label { min-width: 0; font-size: 9.5px; line-height: 1.2; color: var(--apro-ink3); font-weight: 750; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apro-kpi-value { margin-top: 2px; font-size: clamp(18px, 1.45vw, 25px); font-weight: 800; letter-spacing: -0.7px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apro-kpi-note { font-size: 9.5px; color: var(--apro-ink3); }

.apro-dashboard-card { min-height: 0; overflow: hidden; }
.apro-dash-mid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 14px; margin: 0; }
.apro-funnel-body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 9px; }
.apro-funnel-row-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.apro-funnel-cn { font-size: 11.5px; font-weight: 750; min-width: 38px; }
.apro-funnel-en { font-size: 10px; color: var(--apro-ink3); letter-spacing: 0.04em; text-transform: uppercase; }
.apro-funnel-n { margin-left: auto; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.apro-funnel-rate { font-size: 10.5px; color: var(--apro-ink3); width: 44px; text-align: right; }
.apro-funnel-track { height: 7px; border-radius: 5px; background: #eff2f6; overflow: hidden; }
.apro-funnel-bar { height: 100%; border-radius: 5px; transition: width 0.4s ease; }
.apro-funnel-bar--brand { background: var(--apro-brand); }
.apro-funnel-bar--purple { background: var(--apro-purple); }
.apro-funnel-bar--gold { background: var(--apro-gold); }
.apro-funnel-bar--amber { background: var(--apro-amber); }
.apro-funnel-bar--green { background: var(--apro-green); }

.apro-legend { margin-left: auto; display: flex; gap: 12px; font-size: 10.5px; color: var(--apro-ink2); font-weight: 600; }
.apro-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.apro-legend-swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.apro-legend-swatch--navy { background: var(--apro-navy); }
.apro-legend-swatch--light { background: #c3d0f5; }
.apro-rate-badge, .apro-count-badge { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 2px 9px; border-radius: 999px; background: #e7f7f1; color: #087d57; font-size: 9.5px; font-weight: 800; white-space: nowrap; }
.apro-count-badge { min-width: 24px; padding: 2px 7px; background: #f2f4f8; color: var(--apro-ink2); }

.apro-trend-body { padding: 8px 16px 12px; }
.apro-line-chart { height: 196px; display: flex; flex-direction: column; }
.apro-line-chart svg { width: 100%; height: 166px; overflow: visible; }
.apro-chart-grid { fill: none; stroke: #e9edf3; stroke-width: .5; vector-effect: non-scaling-stroke; }
.apro-chart-line { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.apro-chart-line--paid { stroke: var(--apro-navy); }
.apro-chart-line--pending { stroke: #9cb1ec; }
.apro-line-chart .apro-trend-months { margin-top: 0; }
.apro-line-chart--wide { height: 196px; }
.apro-line-chart--wide svg { height: 166px; }
.apro-trend-chart { display: flex; align-items: flex-end; gap: 18px; height: 186px; padding-bottom: 10px; border-bottom: 1px solid var(--apro-line-soft); }
.apro-trend-chart--comm { height: 170px; gap: 16px; }
.apro-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; justify-content: flex-end; height: 100%; }
.apro-trend-total { font-size: 11px; font-weight: 800; color: var(--apro-ink); font-variant-numeric: tabular-nums; }
.apro-trend-bar { width: 100%; max-width: 46px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 5px 5px 0 0; overflow: hidden; }
.apro-trend-bar--wide { max-width: 52px; }
.apro-trend-pending { background: #c3d0f5; }
.apro-trend-paid { background: var(--apro-navy); flex: 1; }
.apro-trend-months { display: flex; gap: 18px; margin-top: 8px; }
.apro-trend-months--comm { gap: 16px; }
.apro-trend-month { flex: 1; text-align: center; font-size: 10.5px; color: var(--apro-ink3); font-weight: 600; }

.apro-dash-bottom { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(380px, 1.45fr) minmax(220px, .8fr); gap: 14px; margin: 0; align-items: stretch; }
.apro-dash-bottom > .apro-card { min-height: 250px; }
.apro-todo-list { padding: 6px 8px 10px; }
.apro-todo { width: 100%; border: 0; background: transparent; text-align: left; color: inherit; display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: var(--apro-r-sm); cursor: pointer; }
.apro-todo:hover { background: #fafbfc; }
.apro-todo-icon {
  width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0; margin-top: 1px;
}
.apro-todo-icon--amber { background: #fbf3e2; color: var(--apro-amber); }
.apro-todo-icon--red { background: #fbebe9; color: var(--apro-red); }
.apro-todo-icon--brand { background: #eef2ff; color: var(--apro-brand); }
.apro-todo-icon--purple { background: #eeeafe; color: var(--apro-purple); }
.apro-todo-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.apro-todo-text { font-size: 12px; font-weight: 650; color: var(--apro-ink); line-height: 1.4; }
.apro-todo-meta { font-size: 10px; color: var(--apro-ink3); margin-top: 1px; }
.apro-todo-caret { width: 13px; height: 13px; margin-top: 5px; color: var(--apro-ink3); }
.apro-payout-list { padding: 8px 10px 12px; }
.apro-payout { display: flex; align-items: center; gap: 10px; padding: 8px 8px; }
.apro-payout-icon { width: 29px; height: 29px; border-radius: 8px; display: grid; place-items: center; color: var(--apro-green); background: #e7f7f1; flex: 0 0 auto; }
.apro-payout-icon .apro-icon { width: 14px; height: 14px; }
.apro-payout-body { min-width: 0; flex: 1; }
.apro-payout-who { font-size: 12.5px; font-weight: 600; }
.apro-payout-meta { font-size: 10.5px; color: var(--apro-ink3); }
.apro-payout-amt { font-size: 13px; font-weight: 800; color: var(--apro-green); font-variant-numeric: tabular-nums; }
.apro-card-link { display: inline-flex; align-items: center; gap: 4px; }
.apro-card-link .apro-icon { width: 11px; height: 11px; }

/* ═══════════════ Course calculator ═══════════════ */
.apro-calc-screen { max-width: 1280px; margin: 0 auto; }
.apro-calc-hero { background: linear-gradient(120deg, var(--apro-navy-deep), #203966); color: #fff; border-radius: 16px; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; box-shadow: var(--apro-shadow-md); }
.apro-calc-hero span { color: #aebdde; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.apro-calc-hero h2 { font: 800 25px/1.25 var(--apro-font-display); margin-top: 4px; }
.apro-calc-hero p { color: #c8d2e7; font-size: 12px; margin-top: 4px; }
.apro-calc-hero-badge { min-width: 104px; padding: 13px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(255,255,255,.08); text-align: center; font-weight: 800; }
.apro-calc-promos { margin: 0 0 18px; padding: 16px 18px 14px; border: 1px solid #ead7a1; border-radius: 14px; background: linear-gradient(135deg, #fffcf4, #fff8e5); box-shadow: 0 4px 14px rgba(138,93,0,.06); }
.apro-calc-promos-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.apro-calc-promos-head > div { display: flex; align-items: baseline; gap: 9px; }
.apro-calc-promos-head span { color: #a87300; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.apro-calc-promos-head b { color: var(--apro-ink); font-size: 14px; }
.apro-calc-promos-head small { color: #94702a; font-size: 10px; font-weight: 700; }
.apro-calc-promo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.apro-calc-promo { min-width: 0; display: flex; gap: 11px; padding: 12px; border: 1px solid #f0dfb5; border-radius: 11px; background: rgba(255,255,255,.86); }
.apro-calc-promo.is-applicable { border-color: #9dd5c0; background: #f2fbf7; box-shadow: inset 3px 0 0 var(--apro-green); }
.apro-calc-promo-mark { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: #f6e8bd; color: #8a5d00; font-size: 13px; font-weight: 900; }
.apro-calc-promo.is-applicable .apro-calc-promo-mark { color: var(--apro-green); background: #dff4eb; }
.apro-calc-promo-body { min-width: 0; flex: 1; }
.apro-calc-promo-title { display: flex; align-items: flex-start; gap: 8px; }
.apro-calc-promo-title b { min-width: 0; flex: 1; font-size: 12.5px; line-height: 1.35; }
.apro-calc-promo-title span { flex: 0 0 auto; padding: 3px 7px; border-radius: 99px; background: #fbf1d8; color: #8a5d00; font-size: 8.5px; font-weight: 800; }
.apro-calc-promo-title span.is-match { background: #dff4eb; color: var(--apro-green); }
.apro-calc-promo p { margin-top: 4px; color: var(--apro-ink2); font-size: 10.5px; line-height: 1.5; }
.apro-calc-promo small { display: block; margin-top: 4px; color: var(--apro-ink3); font-size: 9px; line-height: 1.4; }
.apro-calc-promo-note { margin: 10px 2px 0; color: #866928; font-size: 9.5px; line-height: 1.5; }
.apro-calc-layout { display: grid; grid-template-columns: minmax(420px, .95fr) minmax(460px, 1.05fr); gap: 18px; align-items: start; }
.apro-calc-controls, .apro-calc-result { overflow: hidden; }
.apro-calc-card-title { min-height: 74px; padding: 16px 18px; border-bottom: 1px solid var(--apro-line-soft); display: flex; gap: 12px; align-items: center; }
.apro-calc-card-title > div { display: flex; flex-direction: column; }
.apro-calc-card-title b { font-size: 14px; }
.apro-calc-card-title small { color: var(--apro-ink3); font-size: 10.5px; margin-top: 2px; }
.apro-calc-step { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #edf2ff; color: var(--apro-brand); font-weight: 800; }
.apro-calc-live { margin-left: auto; padding: 4px 9px; border-radius: 99px; color: var(--apro-green); background: #eaf8f2; font-size: 10px; font-weight: 800; letter-spacing: 0; text-transform: none; }
.apro-calc-fields { padding: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.apro-calc-field label { display: block; font-size: 11.5px; font-weight: 750; color: var(--apro-ink2); margin-bottom: 6px; }
.apro-calc-check { align-self: end; min-height: 40px; display: flex; align-items: center; }
.apro-calc-check label { display: flex; align-items: center; gap: 9px; margin: 0; cursor: pointer; }
.apro-calc-check input { width: 18px; height: 18px; accent-color: var(--apro-brand); }
.apro-calc-source { border-top: 1px solid var(--apro-line-soft); padding: 12px 18px; background: #fbfcfe; color: var(--apro-ink3); font-size: 10.5px; }
.apro-calc-source b { color: var(--apro-ink2); }
.apro-calc-state { min-height: 310px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; color: var(--apro-ink2); }
.apro-calc-state--error b { color: var(--apro-red); }
.apro-spinner { width: 26px; height: 26px; border: 3px solid #e5e9f1; border-top-color: var(--apro-brand); border-radius: 50%; animation: aproSpin .8s linear infinite; }
@keyframes aproSpin { to { transform: rotate(360deg); } }
.apro-calc-plan-head { padding: 20px 22px; background: #fbfcff; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--apro-line-soft); }
.apro-calc-plan-head div { display: flex; flex-direction: column; }
.apro-calc-plan-head span { color: var(--apro-ink2); font-size: 11px; }
.apro-calc-plan-head div b { font-size: 14px; margin-top: 2px; }
.apro-calc-plan-head strong { font: 800 23px var(--apro-font-display); color: var(--apro-navy); }
.apro-calc-lines { padding: 14px 22px; }
.apro-calc-lines > div { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; border-bottom: 1px solid var(--apro-line-soft); color: var(--apro-ink2); font-size: 12px; }
.apro-calc-lines > div:last-child { border: 0; }
.apro-calc-lines b { color: var(--apro-ink); font-variant-numeric: tabular-nums; }
.apro-calc-total { margin: 0 22px 18px; border-radius: 11px; padding: 15px 17px; background: var(--apro-navy); color: #fff; display: flex; justify-content: space-between; align-items: center; }
.apro-calc-total span { display: flex; flex-direction: column; font-weight: 750; }
.apro-calc-total small { color: #aebdde; font-size: 9.5px; font-weight: 500; }
.apro-calc-total b { font: 800 21px var(--apro-font-display); }
.apro-calc-formula { margin: -4px 22px 18px; padding: 10px 12px; border-radius: 8px; background: #f7f8fb; color: var(--apro-ink3); font-size: 10.5px; line-height: 1.5; }
.apro-empty--compact { min-height: 152px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.apro-empty--compact .apro-icon { width: 24px; height: 24px; color: #bac3d2; }
.apro-table-scroll { overflow-x: auto; }

/* ═══════════════ Referral form ═══════════════ */
.apro-ref-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.apro-ref-main { display: flex; flex-direction: column; gap: 14px; }
.apro-form-card { padding: 18px 20px 20px; }
.apro-form-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 15px; }
.apro-form-head-en { font-size: 11px; font-weight: 800; color: var(--apro-brand); letter-spacing: 0.06em; text-transform: uppercase; font-style: italic; }
.apro-form-head-cn { font-size: 13.5px; font-weight: 800; color: var(--apro-ink); letter-spacing: -0.2px; }
.apro-form-head-tip { margin-left: auto; font-size: 11px; color: var(--apro-ink3); font-weight: 600; }
.apro-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px 18px; }
.apro-span-3 { grid-column: span 3; }
.apro-upload {
  border: 1.5px dashed var(--apro-line); border-radius: var(--apro-r-sm); padding: 26px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; background: #fcfcfd; transition: 0.13s;
}
.apro-upload:hover { border-color: var(--apro-brand); background: #fbfcff; }
.apro-upload-icon { font-size: 20px; }
.apro-upload-main { font-size: 12.5px; font-weight: 700; color: var(--apro-ink2); }
.apro-upload-sub { font-size: 11px; color: var(--apro-ink3); }
.apro-file-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.apro-file {
  display: flex; align-items: center; gap: 10px; background: var(--apro-bg);
  border: 1px solid var(--apro-line-soft); border-radius: 9px; padding: 9px 11px;
}
.apro-file-ext {
  width: 28px; height: 34px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 8.5px; font-weight: 800; flex-shrink: 0;
}
.apro-file-ext--red { background: var(--apro-red); }
.apro-file-ext--green { background: var(--apro-green); }
.apro-file-ext--brand { background: var(--apro-brand); }
.apro-file-ext--purple { background: var(--apro-purple); }
.apro-file-ext--gold { background: var(--apro-amber); }
.apro-file-body { min-width: 0; flex: 1; }
.apro-file-name { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apro-file-size { font-size: 10.5px; color: var(--apro-ink3); }
.apro-pdpa { display: flex; gap: 9px; align-items: flex-start; background: #fbf3e2; border-radius: 9px; padding: 11px 13px; margin-top: 14px; font-size: 11.5px; line-height: 1.55; color: #8a5d00; }

.apro-ref-side { position: sticky; top: 22px; display: flex; flex-direction: column; gap: 12px; }
.apro-summary-head { background: linear-gradient(135deg, #1e2a4a, #2c3a5e); color: #fff; padding: 14px 16px; }
.apro-summary-head-en { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #9fb0d6; font-weight: 800; }
.apro-summary-head-cn { font-size: 15px; font-weight: 800; margin-top: 3px; }
.apro-summary-body { padding: 14px 16px; }
.apro-summary-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--apro-line-soft); }
.apro-summary-k { font-size: 11.5px; color: var(--apro-ink3); font-weight: 600; }
.apro-summary-v { margin-left: auto; font-size: 12.5px; font-weight: 700; text-align: right; color: var(--apro-ink); }
.apro-summary-note { margin-top: 13px; }
.apro-checklist-card { padding: 14px 16px; }
.apro-checklist-title { margin-bottom: 10px; }
.apro-check { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.apro-check-icon {
  width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; flex-shrink: 0;
}
.apro-check-icon--green { background: #e6f6f0; color: var(--apro-green); }
.apro-check-icon--amber { background: #fbf3e2; color: #8a5d00; }
.apro-check-icon--gray { background: #f0f1f4; color: var(--apro-ink2); }
.apro-check-text { font-size: 12px; color: var(--apro-ink2); }

.apro-ref-footer {
  position: sticky; bottom: -60px; margin: 16px -28px -60px; background: #fff; border-top: 1px solid var(--apro-line);
  padding: 13px 28px; display: flex; align-items: center; gap: 12px; z-index: 20;
}
.apro-ref-footer-note { font-size: 11.5px; color: var(--apro-ink3); font-weight: 600; }
.apro-ref-footer-note b { color: var(--apro-ink2); }
.apro-ref-footer-btns { margin-left: auto; display: flex; gap: 10px; }

/* ═══════════════ Students ═══════════════ */
.apro-bulkbar {
  display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 16px;
  border-radius: var(--apro-r); background: #eef2ff; border: 1px solid #c3d0f5;
}
.apro-bulkbar-text { font-size: 12.5px; font-weight: 700; color: #2942a8; }
.apro-bulkbar-btns { margin-left: auto; display: flex; gap: 8px; }
.apro-bulk-btn {
  height: 30px; padding: 0 12px; border-radius: 7px; border: 1px solid #c3d0f5; background: #fff;
  color: var(--apro-brand); font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.apro-bulk-btn--muted { color: var(--apro-ink2); }
.apro-tablecard { margin-top: 12px; border: 1px solid var(--apro-line); border-radius: var(--apro-r); overflow: hidden; background: #fff; box-shadow: var(--apro-shadow); }
.apro-th-check { width: 40px; padding: 11px 0 11px 16px; }
.apro-td-check { padding: 12px 0 12px 16px; }

/* ═══════════════ Detail ═══════════════ */
.apro-crumbs { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.apro-crumb-link { font-size: 12px; color: var(--apro-ink3); font-weight: 600; cursor: pointer; }
.apro-crumb-link:hover { color: var(--apro-brand); }
.apro-crumb-sep { font-size: 11px; color: #c6cbd4; }
.apro-crumb-cur { font-size: 12px; color: var(--apro-ink2); font-weight: 700; }
.apro-stu-hero {
  border-radius: 12px; background: linear-gradient(135deg, #161f38, #1e2a4a 60%, #2c3a5e);
  color: #fff; padding: 20px 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.apro-stu-hero-ava {
  width: 58px; height: 58px; border-radius: 14px; background: rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 800; flex-shrink: 0;
}
.apro-stu-hero-main { min-width: 220px; }
.apro-stu-hero-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.apro-stu-hero-name { font-size: 21px; font-weight: 800; letter-spacing: -0.4px; }
.apro-stu-hero-en { font-size: 12px; color: #9fb0d6; font-weight: 600; }
.apro-stu-hero-pill { font-size: 10px; font-weight: 800; padding: 3px 10px; border-radius: 20px; background: rgba(14, 159, 110, 0.22); color: #7ee0b8; }
.apro-stu-hero-meta { font-size: 12px; color: #9fb0d6; margin-top: 5px; }
.apro-stu-hero-btns { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; }

.apro-detail-layout { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 14px; margin-top: 14px; align-items: start; }
.apro-detail-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 22px; }
.apro-detail-card { padding: 16px 17px; }
.apro-detail-card .apro-sec-label { margin-bottom: 11px; }
.apro-fact { display: flex; align-items: center; gap: 9px; border-radius: 9px; padding: 8px 10px; margin-bottom: 7px; background: var(--apro-bg); border: 1px solid var(--apro-line-soft); }
.apro-fact.is-alert { background: #fbf3e2; border-color: #ebd9a8; }
.apro-fact-icon {
  width: 27px; height: 27px; border-radius: 7px; background: #fff; border: 1px solid var(--apro-line-soft);
  display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;
}
.apro-fact.is-alert .apro-fact-icon { border-color: #ebd9a8; }
.apro-fact-body { min-width: 0; }
.apro-fact-k { font-size: 10px; color: var(--apro-ink3); font-weight: 700; }
.apro-fact-v { font-size: 12.5px; font-weight: 700; margin-top: 1px; color: var(--apro-ink); }
.apro-fact.is-alert .apro-fact-v { color: #8a5d00; }
.apro-owner-row { display: flex; align-items: center; gap: 10px; }
.apro-owner-badge {
  width: 32px; height: 32px; border-radius: var(--apro-r-sm); background: var(--apro-navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
}
.apro-owner-name { font-size: 12.5px; font-weight: 700; }
.apro-owner-meta { font-size: 10.5px; color: var(--apro-ink3); }
.apro-owner-note { margin-top: 12px; }

.apro-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--apro-line); padding: 0 8px; overflow-x: auto; }
.apro-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 13px 15px; font-size: 13px; cursor: pointer;
  white-space: nowrap; border-bottom: 2px solid transparent; color: var(--apro-ink2); font-weight: 600;
}
.apro-tab:hover { color: var(--apro-ink); }
.apro-tab.is-active { border-bottom-color: var(--apro-navy); color: var(--apro-navy); font-weight: 700; }
.apro-tab-body { padding: 18px 20px 22px; }

.apro-mini-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.apro-mini-kpi { background: var(--apro-bg); border: 1px solid var(--apro-line-soft); border-radius: 9px; padding: 12px 13px; }
.apro-mini-kpi-k { font-size: 10px; color: var(--apro-ink3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.apro-mini-kpi-v { font-size: 17px; font-weight: 800; margin-top: 4px; letter-spacing: -0.4px; }
.apro-mini-kpi-s { font-size: 10.5px; color: var(--apro-ink3); margin-top: 1px; }
.apro-detail-alert { margin-top: 14px; }
.apro-detail-sec { margin: 20px 0 11px; }
.apro-detail-sec--activity { margin: 22px 0 11px; }

.apro-steps { display: flex; padding: 6px 4px 2px; }
.apro-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.apro-step-bar { position: absolute; top: 15px; left: 50%; width: 100%; height: 2px; z-index: 1; background: var(--apro-line); }
.apro-step:last-child .apro-step-bar { display: none; }
.apro-step.is-done .apro-step-bar { background: var(--apro-green); }
.apro-step-num {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; z-index: 2; background: #f0f1f4; color: var(--apro-ink3);
}
.apro-step.is-done .apro-step-num { background: var(--apro-green); color: #fff; }
.apro-step.is-cur .apro-step-num { background: var(--apro-navy); color: #fff; box-shadow: 0 0 0 4px rgba(30, 42, 74, 0.14); }
.apro-step-label { font-size: 11.5px; margin-top: 8px; color: var(--apro-ink3); font-weight: 700; }
.apro-step.is-done .apro-step-label { color: var(--apro-ink2); }
.apro-step.is-cur .apro-step-label { color: var(--apro-navy); font-weight: 800; }
.apro-step-date { font-size: 10px; color: var(--apro-ink3); margin-top: 1px; }

.apro-activity { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--apro-line-soft); }
.apro-activity-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
.apro-activity-body { flex: 1; min-width: 0; }
.apro-activity-text { font-size: 12.5px; font-weight: 600; color: var(--apro-ink); }
.apro-activity-by { font-size: 10.5px; color: var(--apro-ink3); margin-top: 1px; }
.apro-activity-when { font-size: 11px; color: var(--apro-ink3); white-space: nowrap; }

.apro-pay-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.apro-pay-card { border-radius: 9px; padding: 13px 14px; background: var(--apro-bg); border: 1px solid var(--apro-line-soft); }
.apro-pay-card--green { background: #e6f6f0; border-color: #bce3d4; }
.apro-pay-card--amber { background: #fbf3e2; border-color: #ead9a8; }
.apro-pay-card-k { font-size: 10px; color: var(--apro-ink3); font-weight: 700; text-transform: uppercase; }
.apro-pay-card--green .apro-pay-card-k { color: var(--apro-green); }
.apro-pay-card--amber .apro-pay-card-k { color: #8a5d00; }
.apro-pay-card-v { font-size: 19px; font-weight: 800; margin-top: 3px; font-variant-numeric: tabular-nums; }
.apro-pay-card--green .apro-pay-card-v { color: var(--apro-green); }
.apro-pay-card--amber .apro-pay-card-v { color: #8a5d00; }
.apro-inner-tbl { border: 1px solid var(--apro-line); border-radius: var(--apro-r); overflow: hidden; }

.apro-visa-note { margin-bottom: 16px; }
.apro-visa-step { display: flex; gap: 14px; }
.apro-visa-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.apro-visa-icon {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}
.apro-visa-step.is-done .apro-visa-icon { background: #e6f6f0; color: var(--apro-green); }
.apro-visa-step.is-cur .apro-visa-icon { background: #fbf3e2; color: var(--apro-amber); }
.apro-visa-step.is-todo .apro-visa-icon { background: #f0f1f4; color: var(--apro-ink3); }
.apro-visa-line { flex: 1; width: 2px; background: var(--apro-line-soft); min-height: 26px; }
.apro-visa-step.is-done .apro-visa-line { background: #bce3d4; }
.apro-visa-step:last-child .apro-visa-line { display: none; }
.apro-visa-body { padding-bottom: 16px; flex: 1; }
.apro-visa-head { display: flex; align-items: baseline; gap: 9px; }
.apro-visa-title { font-size: 13px; font-weight: 700; color: var(--apro-ink); }
.apro-visa-step.is-todo .apro-visa-title { color: var(--apro-ink3); }
.apro-visa-date { font-size: 11px; color: var(--apro-ink3); margin-left: auto; }
.apro-visa-desc { font-size: 11.5px; color: var(--apro-ink3); margin-top: 2px; }

.apro-generic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.apro-generic-sec { margin-bottom: 12px; }

/* ═══════════════ Commission ═══════════════ */
.apro-comm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 13px; }
.apro-comm-kpi { background: #fff; border: 1px solid var(--apro-line); border-radius: var(--apro-r); padding: 16px 17px; box-shadow: var(--apro-shadow); }
.apro-comm-kpi .apro-accent { margin-bottom: 9px; }
.apro-comm-kpi-label { font-size: 10px; color: var(--apro-ink3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.apro-comm-kpi-value { font-size: 23px; font-weight: 800; letter-spacing: -0.7px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.apro-comm-kpi-note { font-size: 10.5px; color: var(--apro-ink3); margin-top: 2px; }
.apro-comm-mid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; margin-top: 14px; align-items: start; }
.apro-comm-side { display: flex; flex-direction: column; gap: 12px; }
.apro-bank-card { padding: 16px 17px; }
.apro-bank-row { display: flex; align-items: center; gap: 11px; margin-top: 12px; }
.apro-bank-logo {
  width: 38px; height: 38px; border-radius: 9px; background: var(--apro-navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
}
.apro-bank-name { font-size: 13px; font-weight: 800; }
.apro-bank-acct { font-size: 11px; color: var(--apro-ink3); font-variant-numeric: tabular-nums; }
.apro-bank-status { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
.apro-bank-hint { font-size: 11px; color: var(--apro-ink3); }
.apro-payout-btn { width: 100%; height: 38px; margin-top: 14px; border-radius: var(--apro-r-sm); border: 0; background: var(--apro-navy); color: #fff; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.apro-payout-btn:hover { background: #253358; }
.apro-payout-note { font-size: 11px; color: var(--apro-ink3); margin-top: 9px; line-height: 1.55; }
.apro-payout-note b { color: var(--apro-ink2); }
.apro-invoice-card { padding: 16px 17px; }
.apro-invoice-title { margin-bottom: 11px; }
.apro-invoice { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--apro-line-soft); }
.apro-invoice-ext {
  width: 26px; height: 32px; border-radius: 5px; background: var(--apro-red); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; flex-shrink: 0;
}
.apro-invoice-body { min-width: 0; flex: 1; }
.apro-invoice-name { font-size: 12px; font-weight: 700; }
.apro-invoice-meta { font-size: 10.5px; color: var(--apro-ink3); }
.apro-comm-filterbar { margin-top: 14px; }
.apro-settlement-request { margin-top: 14px; border: 1px solid #ddcfad; border-radius: var(--apro-r); padding: 15px 17px; background: #fffaf0; display: flex; align-items: center; justify-content: space-between; gap: 18px; box-shadow: var(--apro-shadow); }
.apro-settlement-request > div { min-width: 0; display: grid; gap: 4px; }
.apro-settlement-request b { color: var(--apro-navy); font-size: 12.5px; }
.apro-settlement-request span { color: #796947; font-size: 10.5px; line-height: 1.55; }
.apro-settlement-request .apro-btn { flex: none; min-height: 36px; }
.apro-settlement-request.is-requested { background: #f6f8fb; border-color: var(--apro-line); }
.apro-total-row td { padding: 13px 16px; font-size: 12px; font-weight: 800; color: var(--apro-ink2); background: #fcfcfd; border-bottom: 0; }
.apro-total-amt { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--apro-ink); }

/* ═══════════════ Marketing ═══════════════ */
.apro-mat-categories { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.apro-mat-category { min-width: max-content; border: 1px solid var(--apro-line); border-radius: 999px; background: #fff; color: var(--apro-ink2); padding: 8px 12px; font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.apro-mat-category b { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: var(--apro-bg); color: var(--apro-ink3); font-size: 9px; text-align: center; }
.apro-mat-category.is-active { border-color: var(--apro-navy); background: var(--apro-navy); color: #fff; }
.apro-mat-category.is-active b { background: rgba(255, 255, 255, 0.15); color: #fff; }
.apro-mkt-toolbar { margin-top: 10px; }
.apro-view-toggle { margin-left: auto; display: flex; gap: 3px; background: var(--apro-bg); border: 1px solid var(--apro-line); border-radius: var(--apro-r-sm); padding: 3px; }
.apro-view-btn { border: none; font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 6px; cursor: pointer; background: transparent; color: var(--apro-ink3); }
.apro-view-btn.is-active { background: #fff; color: var(--apro-navy); box-shadow: var(--apro-shadow); }
.apro-mat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 13px; margin-top: 14px; }
.apro-mat-card { background: #fff; border: 1px solid var(--apro-line); border-radius: var(--apro-r); box-shadow: var(--apro-shadow); overflow: hidden; display: flex; flex-direction: column; transition: 0.14s; }
.apro-mat-card:hover { box-shadow: var(--apro-shadow-md); }
.apro-mat-head { padding: 15px 16px 12px; display: flex; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--apro-line-soft); }
.apro-mat-ext {
  width: 34px; height: 40px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #fff; font-weight: 800; font-size: 9px;
}
.apro-mat-title-wrap { min-width: 0; }
.apro-mat-name { font-size: 13px; font-weight: 700; line-height: 1.35; }
.apro-mat-meta { font-size: 10.5px; color: var(--apro-ink3); margin-top: 4px; }
.apro-mat-body { padding: 12px 16px; flex: 1; }
.apro-mat-ver-row { display: flex; gap: 8px; align-items: center; }
.apro-mat-ver { font-size: 12px; font-weight: 700; }
.apro-mat-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.apro-mat-stats { font-size: 10.5px; color: var(--apro-ink3); margin-top: 10px; }
.apro-mat-foot { display: flex; gap: 8px; padding: 11px 16px; border-top: 1px solid var(--apro-line-soft); background: #fcfcfd; }
.apro-mat-btn {
  flex: 1; height: 30px; border-radius: 7px; border: 1px solid var(--apro-line); background: #fff;
  color: var(--apro-ink); font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.apro-mat-btn--dark { border: 0; background: var(--apro-navy); color: #fff; }
.apro-mat-btn--dark:hover { background: #253358; }
.apro-mkt-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; margin-top: 14px; align-items: start; }

.apro-tier-card { margin-bottom: 14px; padding: 18px; }
.apro-tier-head, .apro-tier-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.apro-tier-current { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(169, 130, 62, .25); border-radius: 10px; background: rgba(169, 130, 62, .08); }
.apro-tier-current span { color: var(--apro-gold); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.apro-tier-current b { color: var(--apro-navy); font-size: 17px; }
.apro-tier-summary { margin-top: 14px; color: var(--apro-ink3); font-size: 11px; }
.apro-tier-summary b { color: var(--apro-navy); }
.apro-tier-bar { height: 7px; margin-top: 9px; border-radius: 999px; background: var(--apro-line-soft); overflow: hidden; }
.apro-tier-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--apro-gold), var(--apro-red)); }
.apro-tier-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 14px; }
.apro-tier-rule { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; padding: 10px 11px; border: 1px solid var(--apro-line-soft); border-radius: 10px; background: #fcfcfd; }
.apro-tier-rule.is-current { border-color: rgba(169, 130, 62, .38); background: rgba(169, 130, 62, .06); }
.apro-tier-rule b { color: var(--apro-ink); font-size: 11px; }
.apro-tier-rule strong { color: var(--apro-gold); font-size: 12px; }
.apro-tier-rule small { grid-column: 1 / -1; color: var(--apro-ink3); font-size: 9.5px; line-height: 1.4; }
.apro-tier-note { margin-top: 12px; color: var(--apro-ink3); font-size: 10px; line-height: 1.5; }
.apro-qr-card { padding: 16px 17px; }
.apro-qr {
  margin: 14px auto 0; width: 148px; height: 148px; border-radius: var(--apro-r); border: 1px solid var(--apro-line);
  background: repeating-conic-gradient(#1e2a4a 0% 25%, #fff 0% 50%) 50% / 14px 14px; opacity: 0.9;
}
.apro-qr-caption { text-align: center; font-size: 11px; color: var(--apro-ink3); margin-top: 10px; }
.apro-qr-btns { display: flex; gap: 8px; margin-top: 12px; }
.apro-qr-btn { flex: 1; height: 32px; border-radius: var(--apro-r-sm); border: 1px solid var(--apro-line); background: #fff; color: var(--apro-ink); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.apro-qr-btn--dark { border: 0; background: var(--apro-navy); color: #fff; }
.apro-link-url { font-size: 10.5px; color: var(--apro-brand); font-family: "SF Mono", Menlo, Consolas, monospace; }

/* ═══════════════ Notifications ═══════════════ */
.apro-notif-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.apro-notif-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--apro-line); padding: 6px 10px 0; }
.apro-notif-tab { position: relative; padding: 12px 12px 13px; font-size: 13px; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; color: var(--apro-ink2); font-weight: 500; }
.apro-notif-tab { border-left: 0; border-right: 0; border-top: 0; background: transparent; font-family: inherit; }
.apro-notif-tab:hover { color: var(--apro-ink); background: var(--apro-line-soft); }
.apro-notif-tab.is-active { border-bottom-color: var(--apro-brand); color: var(--apro-brand); font-weight: 700; }
.apro-notif-tab-n { margin-left: 5px; padding: 1px 6px; border-radius: 20px; background: var(--apro-line-soft); color: var(--apro-ink3); font-size: 10.5px; font-weight: 700; }
.apro-notif-tab.is-active .apro-notif-tab-n { background: #eef2ff; color: var(--apro-brand); }
.apro-notif-readall { margin-left: auto; }
.apro-notif-group { padding: 10px 16px 7px; border-bottom: 1px solid var(--apro-line-soft); background: #fcfdfe; color: var(--apro-ink3); font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; }
.apro-notif {
  position: relative; width: 100%; display: flex; align-items: flex-start; gap: 11px; padding: 11px 16px 11px 13px;
  border-bottom: 1px solid var(--apro-line-soft); cursor: pointer; background: #fff; text-align: left; transition: background 0.12s;
}
.apro-notif.is-unread { background: #fcfdff; }
.apro-notif.is-unread::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--apro-brand); }
.apro-notif:hover { background: #fafbfe; }
.apro-notif.is-unread:hover { background: #f7f9ff; }
.apro-notif:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--apro-brand); outline-offset: -2px; }
.apro-notif-icon {
  width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  margin-top: 1px; font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.apro-notif-icon--brand { background: #eef2ff; color: var(--apro-brand); }
.apro-notif-icon--green { background: #e6f6f0; color: var(--apro-green); }
.apro-notif-icon--amber { background: #fbf3e2; color: #8a5d00; }
.apro-notif-icon--purple { background: #eeeafe; color: var(--apro-purple); }
.apro-notif-body { flex: 1; min-width: 0; }
.apro-notif-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.apro-notif-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--apro-ink2); }
.apro-notif.is-unread .apro-notif-title { color: var(--apro-ink); font-weight: 700; }
.apro-notif-preview { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--apro-ink3); font-size: 12px; }
.apro-notif.is-unread .apro-notif-preview { color: var(--apro-ink2); }
.apro-notif-meta { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 26px; margin-top: 3px; }
.apro-notif-when { color: var(--apro-ink3); font-size: 11px; white-space: nowrap; }
.apro-notif-actions { display: none; align-items: center; gap: 6px; }
.apro-notif:hover .apro-notif-when { display: none; }
.apro-notif:hover .apro-notif-actions { display: flex; }
.apro-notif-inline-action { height: 26px; padding: 0 9px; border: 1px solid var(--apro-line); border-radius: 7px; background: #fff; color: var(--apro-ink2); font-size: 11.5px; cursor: pointer; }
.apro-notif-inline-action:hover { border-color: #b9c6f5; background: #eef2ff; color: var(--apro-brand); }
.apro-notif-inline-action--icon { width: 26px; padding: 0; font-size: 18px; line-height: 1; }
.apro-notif-detail-overlay { z-index: 100; }
.apro-notif-modal {
  width: min(520px, 100%); max-height: calc(100vh - 40px); overflow: hidden; background: #fff;
  border-radius: 16px; box-shadow: 0 24px 64px rgba(16, 24, 48, 0.22); animation: aproFade 0.18s ease;
}
.apro-notif-modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid var(--apro-line-soft); }
.apro-notif-modal-head .apro-notif-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; }
.apro-notif-modal-heading-copy { flex: 1; min-width: 0; }
.apro-notif-modal-title { color: var(--apro-ink); font-size: 16px; font-weight: 800; line-height: 1.45; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.apro-notif-modal-close { width: 30px; height: 30px; border: 1px solid var(--apro-line); border-radius: 8px; background: #fff; color: var(--apro-ink3); cursor: pointer; flex-shrink: 0; }
.apro-notif-modal-close:hover { border-color: var(--apro-line-soft); background: var(--apro-line-soft); color: var(--apro-ink); }
.apro-notif-modal-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--apro-ink3); font-size: 11.5px; flex-wrap: wrap; }
.apro-notif-modal-body { max-height: 52vh; overflow: auto; padding: 16px 18px 4px; }
.apro-notif-modal-message { margin: 0 0 16px; color: var(--apro-ink2); font-size: 13.5px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.apro-notif-detail-kv { overflow: hidden; margin-bottom: 16px; border: 1px solid var(--apro-line); border-radius: 10px; }
.apro-notif-detail-kv-row { display: flex; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--apro-line-soft); font-size: 12.5px; }
.apro-notif-detail-kv-row:last-child { border-bottom: 0; }
.apro-notif-detail-kv-row:nth-child(odd) { background: #fcfdfe; }
.apro-notif-detail-kv-row span { flex: 0 0 84px; color: var(--apro-ink3); }
.apro-notif-detail-kv-row b { min-width: 0; flex: 1; color: var(--apro-ink); font-weight: 600; overflow-wrap: anywhere; }
.apro-notif-modal-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--apro-line-soft); background: #fcfdfe; }
.apro-notif-detail-nav { display: flex; gap: 4px; }
.apro-notif-detail-nav button { width: 30px; height: 30px; border: 1px solid var(--apro-line); border-radius: 8px; background: #fff; color: var(--apro-ink2); cursor: pointer; }
.apro-notif-detail-nav button:hover:not(:disabled) { border-color: #b9c6f5; color: var(--apro-brand); }
.apro-notif-detail-nav button:disabled { opacity: 0.35; cursor: not-allowed; }
.apro-notif-detail-pos { margin-right: auto; color: var(--apro-ink3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.apro-prefs-card { padding: 0; overflow: hidden; }
.apro-prefs-body { padding: 16px 16px 14px; }
.apro-prefs-title { margin: 0 0 2px; font-size: 13px; font-weight: 800; }
.apro-prefs-sub { margin: 0 0 14px; color: var(--apro-ink3); font-size: 11.5px; }
.apro-pref-push { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 11px 12px; border: 1px solid var(--apro-line); border-radius: 10px; background: #fbfcfe; }
.apro-pref-push.is-unavailable { border-color: #f2e4c6; background: #fffcf5; }
.apro-pref-group-label { margin: 14px 0 5px; color: var(--apro-ink3); font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; }
.apro-pref { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--apro-line-soft); }
.apro-pref-body { min-width: 0; flex: 1; }
.apro-pref-label { font-size: 12.5px; font-weight: 600; }
.apro-pref-desc { font-size: 10.5px; color: var(--apro-ink3); }
.apro-switch { width: 38px; height: 22px; border-radius: 20px; padding: 2px; cursor: pointer; transition: 0.15s; flex-shrink: 0; background: #d7dbe5; }
.apro-switch.is-on { background: var(--apro-green); }
.apro-switch.is-locked { opacity: 0.45; cursor: not-allowed; }
.apro-switch-knob { display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2); transition: 0.15s; transform: translateX(0); }
.apro-switch.is-on .apro-switch-knob { transform: translateX(16px); }
.apro-pref-savebar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--apro-line); background: #fff; }
.apro-pref-savebar > span { flex: 1; color: var(--apro-ink3); font-size: 11.5px; }
.apro-pref-savebar .apro-pref-save { width: auto; margin: 0; white-space: nowrap; }
.apro-pref-save:disabled { opacity: 0.4; cursor: not-allowed; }

/* Notification center high-fidelity prototype parity. */
.apro-app.is-page-notif {
  grid-template-columns: 220px minmax(0, 1fr);
  font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.55;
}
.apro-app.is-page-notif .apro-sb { width: 220px; }
.apro-app.is-page-notif .apro-topbar { height: 76px; padding: 0 24px; }
.apro-app.is-page-notif .apro-content { padding: 20px 24px 60px; scrollbar-width: none; }
.apro-app.is-page-notif .apro-content::-webkit-scrollbar { width: 0; height: 0; }
.apro-app.is-page-notif .apro-search input { width: 280px; height: 36px; }
.apro-notif-screen {
  --notif-primary: #2f53e6;
  --notif-primary-dark: #22409f;
  --notif-primary-soft: #eef2ff;
  --notif-ink: #0e1730;
  --notif-ink-2: #4a5568;
  --notif-ink-3: #8a93a6;
  --notif-ink-4: #aeb6c6;
  --notif-line: #e8ecf3;
  --notif-line-2: #f1f4f9;
}
.apro-notif-layout { gap: 20px; grid-template-columns: minmax(0, 1fr) 300px; }
.apro-notif-card { border-color: var(--notif-line); border-radius: 12px; }
.apro-notif-tabs { gap: 4px; padding: 6px 10px 0; border-bottom-color: var(--notif-line); }
.apro-notif-tab {
  position: relative; padding: 12px 12px 13px; border-bottom: 0; border-radius: 8px 8px 0 0;
  color: var(--notif-ink-2); font-size: 13.5px; font-weight: 500;
}
.apro-notif-tab:hover { color: var(--notif-ink); background: var(--notif-line-2); }
.apro-notif-tab.is-active { color: var(--notif-primary); font-weight: 650; }
.apro-notif-tab.is-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
  border-radius: 2px; background: var(--notif-primary);
}
.apro-notif-tab-n {
  margin-left: 5px; padding: 1px 6px; border-radius: 20px;
  background: var(--notif-line-2); color: var(--notif-ink-3); font-size: 11.5px; font-weight: 600;
}
.apro-notif-tab.is-active .apro-notif-tab-n { background: var(--notif-primary-soft); color: var(--notif-primary); }
.apro-notif-readall { height: 28px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; font-weight: 500; }
.apro-notif-bulkbar {
  display: none; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #dce3fb;
  background: var(--notif-primary-soft); color: var(--notif-primary-dark); font-size: 13px; font-weight: 600;
}
.apro-notif-bulkbar.is-visible { display: flex; }
.apro-notif-bulkbar .apro-btn { height: 28px; }
.apro-notif-group {
  padding: 11px 16px 7px; border-bottom-color: var(--notif-line-2); background: #fcfdfe;
  color: var(--notif-ink-3); font-size: 11.5px; font-weight: 700; letter-spacing: 0.8px;
}
.apro-notif {
  gap: 11px; padding: 11px 16px 11px 13px; border-bottom-color: var(--notif-line-2);
  color: var(--notif-ink); background: #fff;
}
.apro-notif.is-unread { background: #fcfdff; }
.apro-notif.is-unread::before { background: var(--notif-primary); }
.apro-notif:hover { background: #fafbfe; }
.apro-notif.is-unread:hover { background: #f7f9ff; }
.apro-notif.is-selected { background: #f3f6ff; }
.apro-notif-check {
  width: 16px; height: 16px; margin-top: 5px; padding: 0; border: 1.5px solid #c7d0e0; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; flex: 0 0 16px; opacity: 0;
  color: #fff; background: #fff; transition: 0.12s;
}
.apro-notif:hover .apro-notif-check,
.apro-notif-check.is-checked,
.apro-notif-list.is-selecting .apro-notif-check { opacity: 1; }
.apro-notif-check.is-checked { border-color: var(--notif-primary); background: var(--notif-primary); }
.apro-notif-check .apro-icon { width: 10px; height: 10px; stroke-width: 2.4; opacity: 0; }
.apro-notif-check.is-checked .apro-icon { opacity: 1; }
.apro-notif-title { color: var(--notif-ink-2); font-size: 13.5px; font-weight: 500; }
.apro-notif.is-unread .apro-notif-title { color: var(--notif-ink); font-weight: 650; }
.apro-notif-preview { margin-top: 2px; color: var(--notif-ink-3); font-size: 12.5px; }
.apro-notif.is-unread .apro-notif-preview { color: var(--notif-ink-2); }
.apro-notif-when { color: var(--notif-ink-4); font-size: 12px; }
.apro-notif-status {
  flex: 0 0 auto; padding: 3px 6px; border-radius: 5px; font-size: 11px; font-weight: 600; line-height: 1;
}
.apro-notif-status--approved { color: #0e9f6e; background: #e6f6ef; }
.apro-notif-status--rejected { color: #d94a4a; background: #fdecec; }
.apro-notif-screen .apro-pill { padding: 3px 6px; border-radius: 5px; font-size: 11px; font-weight: 600; line-height: 1; }
.apro-notif-inline-action { color: var(--notif-ink-2); border-color: var(--notif-line); font-size: 12.5px; }
.apro-notif-inline-action:hover { color: var(--notif-primary); border-color: #b9c6f5; background: var(--notif-primary-soft); }
.apro-notif-foot { padding: 12px 16px; border-top: 1px solid var(--notif-line-2); text-align: center; }
.apro-notif-foot button { color: var(--notif-primary); font-size: 13px; font-weight: 600; }
.apro-notif-foot button:hover { text-decoration: underline; }
.apro-notif-empty { padding: 56px 20px 64px; color: var(--notif-ink-3); text-align: center; }
.apro-notif-empty-icon {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; background: var(--notif-line-2);
  color: var(--notif-ink-4); font-size: 22px;
}
.apro-notif-empty b { display: block; margin-bottom: 4px; color: var(--notif-ink-2); font-size: 14px; }
.apro-notif-empty p { margin: 0; font-size: 12.5px; }

.apro-prefs-body { padding: 16px 16px 14px; }
.apro-prefs-title { margin: 0 0 2px; font-size: 13px; letter-spacing: 0.3px; }
.apro-prefs-sub { margin: 0 0 14px; font-size: 12px; }
.apro-pref-push { padding: 11px 12px; border-radius: 10px; background: #fbfcfe; }
.apro-pref-push .apro-pref-label { line-height: 21.7px; }
.apro-pref-push .apro-pref-desc { margin-top: 1px; }
.apro-pref-group { margin-bottom: 16px; }
.apro-pref-group--last { margin-bottom: 4px; }
.apro-pref-group-label { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; }
.apro-pref-group .apro-pref:last-child { border-bottom: 0; }
.apro-pref { padding: 9px 0; border-bottom-color: var(--notif-line-2); }
.apro-pref-label { color: var(--notif-ink); font-size: 13px; font-weight: 500; }
.apro-pref-desc { color: var(--notif-ink-3); font-size: 11.5px; }
.apro-pref-group .apro-pref-desc { line-height: 21.7px; }
.apro-switch { width: 36px; height: 20px; flex-basis: 36px; }
.apro-switch-knob { width: 16px; height: 16px; }
.apro-switch.is-on .apro-switch-knob { transform: translateX(16px); }
.apro-pref-savebar { padding: 11px 16px; }
.apro-pref-savebar > span { font-size: 12px; }
.apro-pref-savebar .apro-pref-save { height: 32px; padding: 0 14px; }

.apro-notif-detail-overlay { z-index: 100; padding: 20px; background: rgba(14, 23, 48, 0.42); }
.apro-notif-modal {
  width: 100%; max-width: 520px; max-height: calc(100vh - 40px); border-radius: 16px;
  box-shadow: 0 24px 64px rgba(16, 24, 48, 0.22);
}
.apro-notif-modal-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 30px;
  grid-template-rows: 36px auto;
  column-gap: 12px;
  row-gap: 8px;
  align-items: center;
  padding: 18px 18px 14px;
  border-bottom-color: var(--notif-line-2);
}
.apro-notif-modal-head .apro-notif-icon {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  margin: 0;
}
.apro-notif-modal-heading-copy { display: contents; }
.apro-notif-modal-title { margin: 0; color: var(--notif-ink); font-size: 16px; font-weight: 700; letter-spacing: 0.2px; }
.apro-notif-modal-title { grid-column: 2; grid-row: 1; align-self: center; }
.apro-notif-modal-meta {
  grid-column: 1 / 3;
  grid-row: 2;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 0;
  color: var(--notif-ink-3);
  font-size: 12px;
}
.apro-notif-modal-close { grid-column: 3; grid-row: 1; align-self: center; border: 0; color: var(--notif-ink-3); }
.apro-notif-modal-close:hover { color: var(--notif-ink); background: var(--notif-line-2); }
.apro-notif-modal-body { padding: 16px 18px 4px; }
.apro-notif-modal-message { margin: 0 0 16px; color: var(--notif-ink-2); font-size: 14px; line-height: 1.75; }
.apro-notif-detail-kv { margin-bottom: 16px; border-color: var(--notif-line); border-radius: 10px; }
.apro-notif-detail-kv-row { gap: 12px; padding: 9px 12px; border-bottom-color: var(--notif-line-2); font-size: 13px; }
.apro-notif-detail-kv-row span { flex-basis: 84px; color: var(--notif-ink-3); }
.apro-notif-detail-kv-row b { color: var(--notif-ink); font-weight: 500; }
.apro-notif-modal-foot { padding: 12px 18px; border-top-color: var(--notif-line-2); background: #fcfdfe; }
.apro-notif-detail-nav button { color: var(--notif-ink-2); border-color: var(--notif-line); }
.apro-notif-detail-nav button:hover:not(:disabled) { color: var(--notif-primary); border-color: #b9c6f5; }
.apro-notif-detail-pos { margin-left: 4px; color: var(--notif-ink-3); font-size: 12px; }
.apro-notif-modal-foot .apro-btn { height: 32px; }

/* ═══════════════ Account ═══════════════ */
.apro-acct-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 14px; align-items: start; }
.apro-acct-nav { padding: 8px; position: sticky; top: 22px; }
.apro-acct-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--apro-r-sm);
  font-size: 12.5px; cursor: pointer; color: var(--apro-ink2); font-weight: 600;
}
.apro-acct-nav-item:hover { background: #fafbfc; color: var(--apro-ink); }
.apro-acct-nav-item.is-active { background: #eef2ff; color: var(--apro-brand); font-weight: 700; }
.apro-acct-nav-icon { width: 16px; text-align: center; font-size: 13px; }
.apro-acct-main { display: flex; flex-direction: column; gap: 14px; }
.apro-acct-card { padding: 18px 20px 20px; }
.apro-acct-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.apro-acct-head--roomy { margin-bottom: 14px; }
.apro-acct-head-en { font-size: 11px; font-weight: 800; color: var(--apro-brand); letter-spacing: 0.06em; text-transform: uppercase; font-style: italic; }
.apro-acct-head-cn { font-size: 14px; font-weight: 800; }
.apro-acct-head-right { margin-left: auto; }
.apro-acct-warn { margin: 10px 0 16px; }
.apro-acct-btns { display: flex; gap: 10px; margin-top: 16px; }
.apro-amendment-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--apro-line-soft); }
.apro-amendment-list { display: grid; gap: 12px; }
.apro-amendment-card { padding: 15px 16px; border: 1px solid var(--apro-line); border-radius: var(--apro-r-sm); background: #fff; }
.apro-amendment-card.is-overdue { border-color: #e3a4a1; }
.apro-amendment-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.apro-amendment-title > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.apro-amendment-title span { color: var(--apro-brand); font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.apro-amendment-title strong { color: var(--apro-ink); font-size: 13.5px; }
.apro-amendment-meta { display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 10px; color: var(--apro-ink3); font-size: 11px; }
.apro-amendment-card > p { margin: 10px 0 0; color: var(--apro-ink2); font-size: 12px; line-height: 1.65; }
.apro-amendment-overlay { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 24px; background: rgba(16, 30, 54, .56); }
.apro-amendment-dialog { width: min(680px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 22px; border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgba(13, 28, 52, .28); }
.apro-amendment-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.apro-amendment-dialog-head > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.apro-amendment-dialog-head span { color: var(--apro-brand); font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.apro-amendment-dialog-head strong { color: var(--apro-ink); font-size: 18px; }
.apro-amendment-dialog-head small { color: var(--apro-ink3); font-size: 11px; }
.apro-amendment-dialog-head > button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--apro-bg); color: var(--apro-ink2); font-size: 21px; cursor: pointer; }
.apro-amendment-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.apro-amendment-otp { display: flex; gap: 8px; }
.apro-amendment-otp .apro-input { min-width: 0; flex: 1; }
.apro-amendment-signature-field, .apro-amendment-consent, .apro-amendment-form .apro-form-actions { grid-column: 1 / -1; }
.apro-amendment-canvas-wrap { position: relative; height: 160px; overflow: hidden; border: 1px dashed #aeb8cb; border-radius: var(--apro-r-sm); background: #fdfcf9; }
.apro-amendment-canvas-wrap canvas { width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.apro-amendment-canvas-wrap button { position: absolute; top: 8px; right: 8px; }
.apro-amendment-consent { display: flex; align-items: flex-start; gap: 8px; color: var(--apro-ink2); font-size: 12px; line-height: 1.55; }
.apro-amendment-consent input { margin-top: 2px; }
.apro-acct-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--apro-line-soft); }
.apro-acct-row-body { min-width: 0; flex: 1; }
.apro-acct-row-k { font-size: 12.5px; font-weight: 700; }
.apro-acct-row-desc { font-size: 11px; color: var(--apro-ink3); margin-top: 1px; }
.apro-acct-row-v { font-size: 12.5px; font-weight: 700; color: var(--apro-ink2); }
.apro-account-form {
  margin-top: 16px; padding: 16px; border: 1px solid var(--apro-line); border-radius: var(--apro-r-sm);
  background: var(--apro-bg); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.apro-form-field { display: flex; flex-direction: column; min-width: 0; }
.apro-account-form .apro-form-field:has(.apro-textarea), .apro-form-actions { grid-column: 1 / -1; }
.apro-account-form .apro-textarea { grid-column: 1 / -1; }
.apro-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 2px; }
.apro-textarea {
  width: 100%; min-height: 112px; resize: vertical; border: 1px solid var(--apro-line); border-radius: var(--apro-r-sm);
  background: #fff; color: var(--apro-ink); font: inherit; font-size: 12.5px; line-height: 1.55; padding: 10px 12px; outline: none;
}
.apro-textarea:focus { border-color: var(--apro-brand); box-shadow: 0 0 0 3px rgba(67, 87, 201, 0.1); }
.apro-file-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.apro-passport-required { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 11px 13px; margin-bottom: 12px; border: 1px solid #f1c27d; border-radius: 9px; background: #fff8e8; color: var(--apro-ink2); font-size: 11.5px; }
.apro-passport-required b { white-space: nowrap; }
.apro-passport-required span:not(.apro-req) { flex: 1; color: var(--apro-ink3); }
.apro-upload--input { position: relative; cursor: pointer; }
.apro-upload--input input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.apro-empty { padding: 28px 18px; color: var(--apro-ink3); font-size: 12.5px; text-align: center; }
.apro-link-list, .apro-request-list { padding: 0 18px 12px; }
.apro-th-button { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.apro-page {
  min-width: 30px; height: 30px; padding: 0 9px; border: 1px solid var(--apro-line); background: #fff;
  border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--apro-ink2); cursor: pointer;
}
.apro-page.is-active { border-color: var(--apro-navy); background: var(--apro-navy); color: #fff; }
.apro-page:disabled { opacity: 0.4; cursor: not-allowed; }
.apro-pager-pages { margin-left: auto; display: flex; align-items: center; gap: 4px; }

button.apro-tab, button.apro-acct-nav-item, button.apro-switch {
  font-family: inherit; border-left: 0; border-right: 0; border-top: 0; background-color: transparent;
}
button.apro-tab { background: transparent; }
button.apro-acct-nav-item { width: 100%; border-bottom: 0; text-align: left; }
button.apro-switch { border-bottom: 0; background: #d7dbe5; }
button.apro-switch.is-on { background: var(--apro-green); }

/* ═══════════════ Drawer / Modal / Toast ═══════════════ */
.apro-overlay {
  position: fixed; inset: 0; background: rgba(16, 22, 38, 0.46); backdrop-filter: blur(2px);
  z-index: 80; display: flex; align-items: center; justify-content: center; padding: 32px;
}
.apro-overlay--dup { z-index: 90; }
.apro-drawer {
  width: 100%; max-width: 760px; max-height: calc(100vh - 64px); background: #fff; border-radius: 14px;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.24); overflow: hidden; display: flex; flex-direction: column;
  animation: aproFade 0.18s ease;
}
.apro-drawer-head {
  background: linear-gradient(135deg, #1e2a4a 0%, #2c3a5e 100%); color: #fff; padding: 18px 22px;
  display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0;
}
.apro-drawer-head-left { display: flex; align-items: center; gap: 11px; }
.apro-drawer-head-icon {
  width: 34px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
.apro-drawer-title { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.2; }
.apro-drawer-sub { font-size: 11px; color: #9fb0d6; margin-top: 3px; font-weight: 600; }
.apro-drawer-close {
  width: 30px; height: 30px; border-radius: var(--apro-r-sm); border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06); color: #c2cad9; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.apro-drawer-close:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.apro-drawer-body { padding: 6px 22px 14px; overflow-y: auto; flex: 1; }
.apro-drawer-sec { padding: 16px 0; border-bottom: 1px solid var(--apro-line-soft); }
.apro-drawer-sec:last-child { border-bottom: 0; }
.apro-drawer-sec-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 13px; }
.apro-drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 16px; }
.apro-drawer-courses { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.apro-course-opt { position: relative; border-radius: 9px; padding: 11px 13px; cursor: pointer; transition: 0.13s; border: 1.5px solid var(--apro-line); background: #fff; }
.apro-course-opt:hover { border-color: #cdd2da; }
.apro-course-opt.is-active { border-color: var(--apro-brand); background: #eef2ff; }
.apro-course-name { font-size: 13px; font-weight: 800; }
.apro-course-desc { font-size: 10.5px; color: var(--apro-ink3); margin-top: 1px; }
.apro-course-price { font-size: 12.5px; font-weight: 800; color: var(--apro-brand); margin-top: 4px; }
.apro-course-check {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px;
  background: var(--apro-brand); color: #fff; border-radius: 50%; font-size: 9.5px; font-weight: 800;
  display: none; align-items: center; justify-content: center;
}
.apro-course-opt.is-active .apro-course-check { display: flex; }
.apro-drawer-foot {
  border-top: 1px solid var(--apro-line); padding: 13px 22px; display: flex; align-items: center; gap: 12px;
  background: #fcfcfd; flex-shrink: 0;
}
.apro-drawer-foot-note { font-size: 11px; color: var(--apro-ink3); font-weight: 600; line-height: 1.45; }
.apro-drawer-foot-note b { color: var(--apro-ink2); }
.apro-drawer-foot-btns { margin-left: auto; display: flex; gap: 10px; }

.apro-dup-modal {
  width: 100%; max-width: 470px; background: #fff; border-radius: 14px;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.24); overflow: hidden; animation: aproFade 0.16s ease;
}
.apro-dup-body { padding: 22px 24px 18px; }
.apro-dup-head { display: flex; align-items: flex-start; gap: 13px; }
.apro-dup-icon {
  width: 40px; height: 40px; border-radius: 11px; background: #fbf3e2; color: var(--apro-amber);
  display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0;
}
.apro-dup-title { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; }
.apro-dup-text { font-size: 12.5px; color: var(--apro-ink2); margin-top: 6px; line-height: 1.6; }
.apro-dup-box { background: var(--apro-bg); border: 1px solid var(--apro-line-soft); border-radius: 9px; padding: 12px 14px; margin-top: 16px; }
.apro-dup-row { display: flex; align-items: center; gap: 10px; }
.apro-dup-row + .apro-dup-row { margin-top: 7px; }
.apro-dup-k { font-size: 11px; color: var(--apro-ink3); font-weight: 700; }
.apro-dup-v { margin-left: auto; font-size: 12px; font-weight: 700; }
.apro-dup-v--red { color: var(--apro-red); }
.apro-dup-foot { border-top: 1px solid var(--apro-line); padding: 13px 24px; display: flex; gap: 10px; justify-content: flex-end; background: #fcfcfd; }

.apro-toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 120;
  background: var(--apro-navy); color: #fff; border-radius: var(--apro-r); padding: 12px 18px;
  font-size: 12.5px; font-weight: 600; box-shadow: 0 12px 30px rgba(16, 24, 40, 0.28);
  display: flex; align-items: center; gap: 9px; animation: aproToast 0.2s ease; white-space: nowrap;
}
.apro-toast-check { color: #e4c989; font-size: 13px; }

/* ═══════════════ Agent FAQ ═══════════════ */
.apro-faq-page { width: 100%; display: grid; gap: 18px; padding-bottom: 24px; }
.apro-faq-hero {
  min-height: 168px; padding: 28px 30px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(125deg, #172e55 0%, #294677 66%, #38598f 100%); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; position: relative;
  box-shadow: 0 12px 30px rgba(28, 50, 88, .14);
}
.apro-faq-hero::after { content: ""; position: absolute; width: 260px; height: 260px; right: -84px; top: -105px; border-radius: 50%; border: 52px solid rgba(255,255,255,.05); }
.apro-faq-hero > * { position: relative; z-index: 1; }
.apro-faq-eyebrow { display: block; margin-bottom: 9px; color: #e4c989; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.apro-faq-hero h1 { margin: 0; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; letter-spacing: -.7px; }
.apro-faq-hero p { max-width: 640px; margin: 10px 0 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.6; }
.apro-faq-total { width: 104px; height: 104px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-content: center; text-align: center; flex: none; backdrop-filter: blur(4px); }
.apro-faq-total b { font-size: 30px; line-height: 1; color: #f1d99a; }
.apro-faq-total span { margin-top: 7px; font-size: 10px; color: rgba(255,255,255,.72); }
.apro-faq-controls { background: #fff; border: 1px solid var(--apro-line); border-radius: 14px; padding: 18px; box-shadow: var(--apro-shadow); }
.apro-faq-search { height: 44px; border: 1px solid var(--apro-line); border-radius: 10px; background: var(--apro-bg); padding: 0 14px; display: flex; align-items: center; gap: 10px; color: var(--apro-ink3); }
.apro-faq-search svg { width: 16px; height: 16px; flex: none; }
.apro-faq-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--apro-ink); font: inherit; font-size: 12.5px; }
.apro-faq-tabs { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.apro-faq-tabs button { min-height: 34px; border: 1px solid var(--apro-line); border-radius: 18px; padding: 0 12px; background: #fff; color: var(--apro-ink2); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.apro-faq-tabs button span { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--apro-bg); color: var(--apro-ink3); font-size: 9px; display: grid; place-content: center; }
.apro-faq-tabs button:hover, .apro-faq-tabs button.is-active { border-color: #294677; background: #294677; color: #fff; }
.apro-faq-tabs button.is-active span { background: rgba(255,255,255,.14); color: #f1d99a; }
.apro-faq-result { margin-top: 13px; color: var(--apro-ink3); font-size: 10.5px; }
.apro-faq-result b { color: var(--apro-navy); }
.apro-faq-policy { border: 1px solid #eadcb9; border-radius: 12px; background: #fffaf0; padding: 13px 16px; display: flex; align-items: flex-start; gap: 12px; }
.apro-faq-policy > span { width: 22px; height: 22px; border-radius: 50%; background: #b58a37; color: #fff; font-size: 12px; font-weight: 800; font-style: normal; display: grid; place-content: center; flex: none; }
.apro-faq-policy p { margin: 0; display: grid; gap: 4px; }
.apro-faq-policy b { color: #6f5424; font-size: 11.5px; }
.apro-faq-policy small { color: #8b7245; font-size: 10.5px; line-height: 1.55; }
.apro-faq-group { background: #fff; border: 1px solid var(--apro-line); border-radius: 14px; overflow: hidden; box-shadow: var(--apro-shadow); }
.apro-faq-group > header { min-height: 52px; padding: 0 18px; border-bottom: 1px solid var(--apro-line-soft); display: flex; align-items: center; gap: 10px; }
.apro-faq-group h2 { margin: 0; color: var(--apro-navy); font-size: 13px; font-weight: 800; }
.apro-faq-group > header > span { min-width: 23px; height: 20px; border-radius: 10px; background: #f2ead7; color: #8a6b30; font-size: 9px; font-weight: 800; display: grid; place-content: center; }
.apro-faq-list { padding: 5px 16px; }
.apro-faq-item + .apro-faq-item { border-top: 1px solid var(--apro-line-soft); }
.apro-faq-item > button { width: 100%; min-height: 54px; border: 0; padding: 12px 2px; background: transparent; color: var(--apro-ink); font: inherit; font-size: 12px; font-weight: 700; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 16px; }
.apro-faq-item > button > span { flex: 1; }
.apro-faq-item > button i { width: 26px; height: 26px; border-radius: 50%; background: var(--apro-bg); color: var(--apro-ink3); display: grid; place-content: center; transition: transform .18s ease; }
.apro-faq-item > button i svg { width: 12px; height: 12px; }
.apro-faq-item.is-open > button { color: var(--apro-navy); }
.apro-faq-item.is-open > button i { transform: rotate(90deg); background: #f2ead7; color: #8a6b30; }
.apro-faq-answer { padding: 0 42px 16px 2px; }
.apro-faq-answer p { margin: 0; color: var(--apro-ink2); font-size: 11.5px; line-height: 1.7; }
.apro-faq-empty { min-height: 210px; border: 1px dashed var(--apro-line); border-radius: 14px; background: #fff; color: var(--apro-ink3); display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; }
.apro-faq-empty svg { width: 24px; height: 24px; }
.apro-faq-empty b { color: var(--apro-ink); font-size: 13px; }
.apro-faq-empty span { font-size: 11px; }

/* ═══════════════ Responsive ═══════════════ */
@media (max-width: 1280px) {
  .apro-mini-kpis { grid-template-columns: repeat(2, 1fr); }
  .apro-partner-card { align-items: flex-start; }
  .apro-partner-actions { max-width: 240px; }
  .apro-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .apro-calc-layout { grid-template-columns: minmax(0, 1fr); }
  .apro-calc-promo-grid { grid-template-columns: minmax(0, 1fr); }
  .apro-dash-mid, .apro-comm-mid, .apro-mkt-bottom, .apro-notif-layout { grid-template-columns: minmax(0, 1fr); }
  .apro-dash-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apro-dash-bottom > :nth-child(2) { grid-column: span 2; order: -1; }
  .apro-partner-card { flex-direction: column; }
  .apro-partner-main { width: 100%; }
  .apro-partner-actions { max-width: none; justify-content: flex-start; }
  .apro-ref-layout { grid-template-columns: minmax(0, 1fr); }
  .apro-ref-side { position: static; }
  .apro-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .apro-detail-side { position: static; }
  .apro-acct-layout { grid-template-columns: minmax(0, 1fr); }
  .apro-acct-nav { position: static; display: flex; flex-wrap: wrap; gap: 2px; }
}
@media (max-width: 1024px) {
  .apro-sb { width: 68px; }
  .apro-sb .apro-sb-brand-name, .apro-sb .apro-nav-label, .apro-sb .apro-advisor { display: none; }
  .apro-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apro-span-3 { grid-column: span 2; }
  .apro-partner-facts { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .apro-topbar-sub { display: none; }
  .apro-topbar-titles { min-width: 70px; }
  .apro-search { width: 210px; min-width: 100px; }
  .apro-user-lines { display: none; }
}
@media (max-width: 900px) {
  .apro-settlement-request { align-items: stretch; flex-direction: column; }
  .apro-faq-hero { min-height: 148px; padding: 22px; }
  .apro-faq-total { width: 82px; height: 82px; }
  .apro-faq-total b { font-size: 24px; }
  .apro-calc-fields { grid-template-columns: 1fr; }
  .apro-topbar { padding: 0 16px; gap: 10px; }
  .apro-search { display: none; }
  .apro-content { padding: 16px 16px 60px; }
  .apro-ref-footer { margin: 16px -16px -60px; padding: 13px 16px; }
  .apro-form-grid, .apro-drawer-grid, .apro-drawer-courses, .apro-tile-grid, .apro-file-grid, .apro-generic-grid { grid-template-columns: 1fr; }
  .apro-span-3 { grid-column: auto; }
  .apro-mini-kpis, .apro-pay-cards { grid-template-columns: 1fr; }
  .apro-user-lines { display: none; }
  .apro-account-form { grid-template-columns: 1fr; }
  .apro-amendment-overlay { padding: 12px; place-items: end center; }
  .apro-amendment-dialog { max-height: calc(100vh - 24px); border-radius: 14px 14px 0 0; }
  .apro-amendment-form { grid-template-columns: 1fr; }
  .apro-amendment-form > * { grid-column: 1; }
  .apro-dash-bottom { grid-template-columns: 1fr; }
  .apro-dash-bottom > :nth-child(2) { grid-column: auto; }
}