/* Hanguly Pro identity, built only from the existing Hanguly tokens (--h-*) and its
   card construction: navy surface, 2px navy outline, flat offset shadow, Pretendard 900.
   Gold is the one brand colour reserved for Pro ("gold only for Pro"): an ordinary
   learning control never uses gold or the crown. Twin: iOS constants/proBrand.ts +
   components/ProKit.tsx. Pro is an extension of the app, not a separate design system. */
:root {
  --pro-surface: var(--h-navy, #21163C);
  --pro-raised: #302246;
  --pro-ink: var(--h-navy-deep, #070047);
  --pro-edge: var(--h-purple-shadow, #3F20AD);
  --pro-accent: var(--h-warm, #FFCF4F);
  --pro-accent-pressed: #F5C23B;
  --pro-accent-edge: var(--h-warm-shadow, #C9951F);
  --pro-text: #FFFFFF;
  --pro-muted: var(--h-lilac, #C9BDFF);
  --pro-border: var(--h-navy-deep, #070047);
  --pro-radius: var(--h-radius-lg, 20px);
}

.pro-crown { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* PRO chip: navy with gold on light surfaces; gold with navy inside Pro/navy surfaces. */
.pro-mark { display: inline-flex; align-items: center; gap: 4px; min-height: 20px; padding: 0 7px; border-radius: 7px; background: var(--pro-surface); color: var(--pro-accent); font: 900 .62rem/1 var(--h-font, sans-serif); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.pro-mark .pro-crown { font-size: 11px; }
.pro-mark.is-md { min-height: 26px; padding: 0 10px; border-radius: 9px; gap: 6px; font-size: .72rem; }
.pro-mark.is-md .pro-crown { font-size: 14px; }
.pro-mark.is-on-dark { background: var(--pro-accent); color: var(--pro-ink); }

/* The one Pro call to action: same outline/shadow construction as every Hanguly button. */
.pro-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 54px; padding: 8px 18px; border: 2px solid var(--pro-ink); border-radius: var(--h-radius-md, 16px); background: var(--pro-accent); color: var(--pro-ink); box-shadow: 0 4px 0 var(--pro-accent-edge); font: 900 1rem/1.2 var(--h-font, sans-serif); text-align: center; cursor: pointer; text-decoration: none; transition: transform .12s, box-shadow .12s, background .12s; }
.pro-btn .pro-crown { font-size: 18px; }
.pro-btn:hover { background: var(--pro-accent-pressed); }
.pro-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--pro-accent-edge); }
.pro-btn:focus-visible { outline: 3px solid var(--h-purple, #5D35DC); outline-offset: 3px; }
.pro-btn.is-compact { width: auto; min-height: 44px; padding: 6px 13px; border-radius: 13px; gap: 6px; font-size: .86rem; box-shadow: 0 3px 0 var(--pro-accent-edge); }
.pro-btn.is-compact .pro-crown { font-size: 15px; }

/* Optional Pro suggestion: navy card, mark, one benefit, one Pro action, Not now inside. */
.pro-card { display: block; margin: 16px 0; padding: 18px 18px 6px; border: 2px solid var(--pro-ink); border-radius: var(--pro-radius); background: var(--pro-surface); color: var(--pro-text); text-align: left; box-shadow: 0 4px 0 var(--pro-edge); }
.pro-card h3, .pro-card .pro-card-title { display: block; margin: 12px 0 0; color: var(--pro-text); font: 900 1.25rem/1.25 var(--h-font, sans-serif); letter-spacing: -.01em; }
.pro-card p, .pro-card .pro-card-body { margin: 6px 0 0; color: var(--pro-muted); font: 600 .9rem/1.45 var(--h-font, sans-serif); }
.pro-card .pro-btn { margin-top: 16px; }
.pro-card [data-pro-dismiss] { color: var(--pro-muted) !important; margin-left: auto !important; margin-right: auto !important; }
.pro-dismiss { display: block; min-height: 44px; margin: 4px auto 0; padding: 8px 16px; border: 0; background: transparent; font: 700 .9rem/1 var(--h-font, sans-serif); cursor: pointer; }

/* Host pages style their own p/strong/button (e.g. `.kt-dock p`, `.sc-report button`);
   inside Pro surfaces the Pro tokens always win. Found in QA: KaTalk dimmed the card body. */
html body .pro-card :is(.pro-card-title, h3) { color: var(--pro-text); }
html body .pro-card :is(.pro-card-body, p) { color: var(--pro-muted); opacity: 1; }
html body .pro-btn { border-color: var(--pro-ink); background: var(--pro-accent); color: var(--pro-ink); box-shadow: 0 4px 0 var(--pro-accent-edge); text-transform: none; letter-spacing: 0; opacity: 1; }
html body .pro-btn:hover { background: var(--pro-accent-pressed); }

@media (prefers-reduced-motion: reduce) { .pro-btn { transition: none; } .pro-btn:active { transform: none; } }

/* ── Standing Pro entry points (header, sidebar, phone Home pill, member badge).
   Same gold as the original header Try Pro, now with the shared crown and outline. */
#navUpgradeBtn,
.side-pro:not(.side-pro-member),
#homePage .hm-ios-pro {
  border: 2px solid var(--pro-ink) !important; background: var(--pro-accent) !important; color: var(--pro-ink) !important;
  box-shadow: 0 3px 0 var(--pro-accent-edge) !important;
}
#navUpgradeBtn:hover,
.side-pro:not(.side-pro-member):hover,
#homePage .hm-ios-pro:hover { background: var(--pro-accent-pressed) !important; }
#navProBadge,
.side-pro.side-pro-member {
  border: 2px solid var(--pro-ink) !important; background: var(--pro-surface) !important; color: var(--pro-accent) !important; box-shadow: none !important;
}
#homePage .hm-ios-pro .pro-crown { font-size: 15px; margin-right: 2px; }

/* ── Older per-page PRO badges, now one Pro mark (crown + PRO on navy).
   `html` raises specificity above page styles injected later by JS. */
html :is(.kt-pro, .ai-rail-pro, .ai-tab-pro, .pf21-pro, .lp-pro-tag, .hgpw-pro, .prn-pro-badge, .pro-lock-tag) {
  display: inline-flex; align-items: center; gap: 4px; min-height: 20px; padding: 0 7px; border: 1px solid var(--pro-border); border-radius: 7px;
  background: var(--pro-surface); color: var(--pro-accent); box-shadow: none;
  font: 900 .6rem/1 var(--h-font, sans-serif); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
html :is(.kt-pro, .ai-rail-pro, .ai-tab-pro, .pf21-pro, .lp-pro-tag, .hgpw-pro, .prn-pro-badge, .pro-lock-tag)::before {
  content: ''; width: 11px; height: 11px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 7 4.3 4L12 4l3.7 7L20 7l-1.5 10h-13L4 7Z'/%3E%3Cpath d='M6 20h12'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 7 4.3 4L12 4l3.7 7L20 7l-1.5 10h-13L4 7Z'/%3E%3Cpath d='M6 20h12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Profile upsell card: Pro surface + Pro action, not the pink learning accent. */
html .pf21-pro-card { border: 2px solid var(--pro-ink); background: var(--pro-surface); box-shadow: 0 4px 0 var(--pro-edge); }
html .pf21-pro-card small { color: var(--pro-accent); }
html .pf21-pro-card em { color: var(--pro-muted); }
html .pf21-pro-card b { border: 2px solid var(--pro-ink); background: var(--pro-accent); color: var(--pro-ink); box-shadow: 0 3px 0 var(--pro-accent-edge); }
html .kt-hero-cta.pro-btn { justify-content: center; }
html .kt-status.is-pro { background: var(--pro-surface); color: var(--pro-accent); }

/* Email-linked guest checkout uses the same Pro components as in-app plans. */
.hg-claim-card { position:relative; width:100%; max-width:400px; max-height:calc(100dvh - 48px); overflow:auto; padding:26px 22px 18px; margin:0; }
.hg-claim-card .pro-card-title { font-size:1.7rem; line-height:1.15; padding-right:14px; margin:18px 0; }
.hg-claim-close { position:absolute; top:10px; right:10px; width:36px; height:36px; border:0; border-radius:10px; background:var(--pro-raised); color:var(--pro-text); font:800 24px var(--h-font); cursor:pointer; }
.hg-claim-price { display:flex; align-items:baseline; gap:9px; margin:0 0 14px; color:var(--pro-text); }
.hg-claim-price s { font-size:1rem; color:var(--pro-muted); }
.hg-claim-price strong { font:900 2.4rem var(--h-font); letter-spacing:-.04em; }
.hg-claim-price span { color:var(--pro-muted); font-size:.85rem; }
.hg-claim-help { font-size:.8rem; line-height:1.55; color:var(--pro-muted); margin:14px 0 20px; }
.hg-claim-secure { display:block; color:var(--pro-muted); font-size:.68rem; line-height:1.5; text-align:center; margin-top:15px; }