/* The account pages (docs/site-redesign.md, mockup approved by the owner 2026-10-21): scoped to .ke-account so the theme
   stylesheet the pages still load (Bootstrap 4 + keywordeverywhere.css) does not reach the new layout. Same tokens and type
   as ke-home.css / ke-opr.css. Sign-in, code, find, switch and sign-out share the narrow card; /account and the Open Page
   Rank tab share the title band, the sticky section row and the card stack. */
.ke-account { --red: #b5332c; --red-dark: #8c2420; --red-soft: #fbedeb; --ink: #1c1a19; --text: #3d3936; --muted: #6f6a66; --line: #e6e1dc; --line-soft: #f0ece8; --ground: #f7f5f2; --r: 10px; --r-lg: 14px; --ok: #2b7010;
    --fh: "Bricolage Grotesque", "IBM Plex Sans", "Segoe UI", sans-serif; --fb: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fm: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-family: var(--fb); color: var(--text); background: var(--ground); font-size: 16px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; overflow: visible; }
.ke-account *, .ke-account *::before, .ke-account *::after { box-sizing: border-box; }
.ke-account h1, .ke-account h2, .ke-account h3, .ke-account h4 { font-family: var(--fh); color: var(--ink); margin: 0; letter-spacing: -0.012em; text-wrap: balance; line-height: 1.15; font-weight: 700; }
.ke-account p { margin: 0; }
.ke-account a { color: #1f4f8f; text-decoration: none; }
.ke-account a:hover { color: #133565; }
.ke-account strong, .ke-account b { font-weight: 600 !important; color: inherit; }
.ke-account code { font-family: var(--fm); font-size: .92em; background: var(--ground); border: 1px solid var(--line-soft); border-radius: 5px; padding: 1px 6px; color: var(--ink); }
.ke-account .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.ke-account .narrow { max-width: 620px; margin: 0 auto; padding: 0 24px; }
.ke-account .mid { max-width: 760px; margin: 0 auto; padding: 0 24px; }
/* title band */
.ke-account .title { background: #fff; border-bottom: 1px solid var(--line); padding: 36px 0 28px; }
.ke-account .title h1 { font-size: 30px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ke-account .title .sub { font-size: 16.5px; color: var(--muted); margin-top: 6px; }
.ke-account .title.c { text-align: center; }
.ke-account .title.c h1 { justify-content: center; }
.ke-account .badge { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; font-family: var(--fb); font-size: 13px; font-weight: 600; color: var(--ink); background: var(--ground); border: 1px solid var(--line); letter-spacing: 0; line-height: 1; vertical-align: middle; }
/* section row (sticky) */
.ke-account .subnav { position: sticky; top: 0; z-index: 5; background: var(--ground); padding: 14px 0 10px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.ke-account .subnav .wrap { display: flex; gap: 4px; flex-wrap: wrap; }
.ke-account .subnav a { font-size: 14.5px; font-weight: 500; color: var(--text); padding: 8px 12px; border-radius: 8px; }
.ke-account .subnav a:hover { background: #fff; color: var(--ink); }
.ke-account .subnav a.on { color: var(--ink); background: #fff; box-shadow: 0 1px 2px rgba(28,26,25,.1); font-weight: 600; }
.ke-account .subnav a.ext { margin-left: auto; color: var(--muted); }
/* cards */
.ke-account .stack { display: flex; flex-direction: column; gap: 20px; padding: 10px 0 64px; }
.ke-account .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px; scroll-margin-top: 72px; }
.ke-account .card h2, .ke-account .card h3.t { font-size: 22px; margin-bottom: 6px; font-family: var(--fh); font-weight: 700; color: var(--ink); line-height: 1.15; }
.ke-account .card .lead { font-size: 15.5px; color: var(--muted); margin-bottom: 18px; }
.ke-account .card .lead a, .ke-account .card p a, .ke-account .note a, .ke-account .hint a, .ke-account .box a { text-decoration: underline; text-underline-offset: 3px; }
.ke-account .card.current { border-color: var(--ink); }
.ke-account .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ke-account .three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ke-account .mini { background: var(--ground); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ke-account .mini b { color: var(--ink); font-size: 15px; }
.ke-account .mini p { font-size: 14px; color: var(--muted); }
.ke-account .mini .dl { font-size: 14px; color: var(--muted); display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.ke-account .mini .dl span:nth-child(even) { color: var(--text); }
/* buttons, fields */
.ke-account .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--r); font-weight: 600; font-size: 15px; line-height: 1; text-transform: none; letter-spacing: 0; text-decoration: none; background: var(--red); color: #fff; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; box-shadow: none; }
.ke-account .btn:hover, .ke-account .btn:focus { background: var(--red-dark); color: #fff; box-shadow: none; }
.ke-account .btn.ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.ke-account .btn.ghost:hover, .ke-account .btn.ghost:focus { background: var(--ground); color: var(--ink); border-color: var(--ink); }
.ke-account .btn.red-ghost { background: #fff; color: var(--red); border: 1.5px solid var(--red); }
.ke-account .btn.red-ghost:hover, .ke-account .btn.red-ghost:focus { background: var(--red-soft); color: var(--red-dark); border-color: var(--red-dark); }
.ke-account .btn.sm { height: 38px; padding: 0 14px; font-size: 14px; }
.ke-account .btn.lg { height: 52px; font-size: 16px; }
.ke-account .btn.w { width: 100%; }
.ke-account .btn.link { background: transparent; color: var(--muted); border: 0; padding: 0 6px; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.ke-account .btn.link:hover { color: var(--ink); background: transparent; }
.ke-account .btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ke-account .btns form { display: inline; margin: 0; }
.ke-account .field { width: 100%; height: 50px; border: 1.5px solid var(--line); border-radius: var(--r); padding: 0 16px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; }
.ke-account .field:focus { outline: 0; border-color: var(--ink); box-shadow: none; }
.ke-account .field.sm { height: 44px; font-size: 15px; }
.ke-account textarea.field { height: auto; padding: 10px 14px; line-height: 1.5; resize: vertical; }
.ke-account label.lbl { display: block; font-weight: 600; color: var(--ink); font-size: 15px; margin-bottom: 8px; }
.ke-account label.lbl span { font-weight: 400; color: var(--muted); }
.ke-account .hint { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.ke-account .note { font-size: 14px; color: var(--muted); }
.ke-account .inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ke-account .inline .field { width: auto; flex: 1 1 260px; min-width: 0; }
.ke-account .check { display: flex; align-items: center; gap: 8px; font-size: 14.5px; margin: 0; font-weight: 400; color: var(--text); cursor: pointer; }
.ke-account .check input { width: 18px; height: 18px; accent-color: #1c1a19; margin: 0; }
/* the key */
.ke-account .key { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ke-account .key code { font-size: 15px; padding: 12px 16px; border-radius: var(--r); letter-spacing: .04em; background: var(--ground); border: 1px solid var(--line); word-break: break-all; }
.ke-account .key form { margin: 0; }
/* quiet disclosures for the destructive actions */
.ke-account .danger { margin-top: 16px; }
.ke-account .danger summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--red); display: inline-flex; align-items: center; gap: 6px; }
.ke-account .danger summary::-webkit-details-marker { display: none; }
.ke-account .danger summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; }
.ke-account .danger[open] summary::before { transform: rotate(45deg); }
.ke-account .danger .box { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; font-size: 14.5px; background: var(--ground); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; color: var(--text); }
.ke-account .danger .box.white { background: #fff; }
.ke-account .danger .box form { display: contents; }
.ke-account .danger.quiet summary { color: var(--ink); }
/* figures, tables, lists */
.ke-account .big { font-family: var(--fh); font-size: 44px; font-weight: 700; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; margin: 4px 0 10px; }
.ke-account .plan { display: flex; align-items: center; gap: 12px; font-size: 18px; color: var(--ink); font-weight: 600; margin-bottom: 8px; }
.ke-account .plan img { width: 36px; height: 36px; border-radius: 50%; }
.ke-account .tbl { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.ke-account .tbl.scroll { overflow-x: auto; }
.ke-account .tbl table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 0; }
.ke-account .tbl th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 10px 14px; background: var(--ground); border-bottom: 1px solid var(--line); border-top: 0; }
.ke-account .tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); border-top: 0; vertical-align: middle; }
.ke-account .tbl tr:last-child td { border-bottom: 0; }
.ke-account .tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ke-account .tbl .r { text-align: right; }
.ke-account .tbl .nowrap { white-space: nowrap; }
.ke-account .kv { display: grid; grid-template-columns: 220px minmax(0, 1fr); font-size: 14.5px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.ke-account .kv > div { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); }
.ke-account .kv > div:nth-child(odd) { background: var(--ground); color: var(--muted); }
.ke-account .kv > div:nth-last-child(-n+2) { border-bottom: 0; }
.ke-account .ketoggle { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text); cursor: pointer; margin: 0; font-weight: 400; }
.ke-account .ketoggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.ke-account .ketoggle i { width: 40px; height: 22px; border-radius: 999px; background: var(--line); position: relative; display: inline-block; flex: 0 0 auto; transition: background .15s; }
.ke-account .ketoggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.ke-account .ketoggle input:checked + i { background: var(--ink); }
.ke-account .ketoggle input:checked + i::after { left: 21px; }
.ke-account .email { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.ke-account .email:first-child { border-top: 0; padding-top: 0; }
.ke-account .email b { color: var(--ink); font-weight: 600; display: block; word-break: break-all; }
.ke-account .email span { font-size: 13.5px; color: var(--muted); }
.ke-account .alert { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; font-size: 15px; background: #fff; margin-bottom: 16px; color: var(--text); }
.ke-account .alert.ok { border-color: #cfe3c3; background: #f3f8ef; }
.ke-account .alert.warn { border-color: #e8d7a8; background: #fbf6e8; }
.ke-account .alert.bad { border-color: #e6b8b4; background: #fbf0ee; }
.ke-account .alert p { margin-bottom: 8px; }
.ke-account .alert p:last-child { margin-bottom: 0; }
/* auth pages */
.ke-account .auth { padding: 40px 0 72px; }
.ke-account .auth .card { padding: 32px; }
.ke-account .auth .card.c { text-align: center; }
.ke-account .mailic { width: 56px; height: 56px; border-radius: 14px; background: var(--red-soft); color: var(--red); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.ke-account .code { font-family: var(--fm); font-size: 30px; letter-spacing: 10px; text-align: center; height: 64px; width: 260px; max-width: 100%; margin: 0 auto; font-weight: 600; display: block; }
.ke-account .code::placeholder { letter-spacing: 10px; color: #c9c2bb; font-weight: 600; }
.ke-account .code.sm { font-size: 20px; letter-spacing: 6px; height: 48px; width: 180px; margin: 0; display: inline-block; }
.ke-account .or { text-align: center; color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; margin: 12px 0; }
.ke-account .sep { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.ke-account .who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0 22px; }
.ke-account .who > div { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; background: var(--ground); }
.ke-account .who small { display: block; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.ke-account .who b { color: var(--ink); font-size: 16px; word-break: break-all; }
.ke-account .stackbtns { display: flex; flex-direction: column; gap: 10px; }
.ke-account .stackbtns .btn { width: 100%; }
@media (max-width: 1000px) {
    .ke-account .two, .ke-account .three { grid-template-columns: 1fr; }
    .ke-account .kv { grid-template-columns: 1fr; }
    .ke-account .kv > div:nth-child(odd) { border-bottom: 0; padding-bottom: 2px; }
}
@media (max-width: 600px) {
    .ke-account .wrap, .ke-account .narrow, .ke-account .mid { padding: 0 16px; }
    .ke-account .title { padding: 26px 0 22px; }
    .ke-account .title h1 { font-size: 24px; }
    .ke-account .card, .ke-account .auth .card { padding: 20px 18px; }
    .ke-account .subnav .wrap { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .ke-account .subnav a { white-space: nowrap; flex: 0 0 auto; }
    .ke-account .subnav a.ext { margin-left: 0; }
    .ke-account .btn { width: 100%; }
    .ke-account .btn.sm, .ke-account .btn.link { width: auto; }
    .ke-account .inline .field { flex-basis: 100%; }
    .ke-account .big { font-size: 38px; }
    .ke-account .who { grid-template-columns: 1fr; }
    .ke-account .key code { width: 100%; font-size: 14px; }
}