/* GeekPi OJ semantic tokens. Foundations only: no global component restyling. */
:root {
  --geekpi-primary: #1674c4;
  --geekpi-primary-hover: #105c9f;
  --geekpi-primary-light: #eaf4fd;
  --geekpi-bg: #f5f7fa;
  --geekpi-surface: #ffffff;
  --geekpi-surface-hover: #f1f5f9;
  --geekpi-text: #1e293b;
  --geekpi-text-secondary: #526176;
  --geekpi-text-muted: #68788b;
  --geekpi-border: #dce3ec;
  --geekpi-success: #15803d;
  --geekpi-warning: #a65b06;
  --geekpi-danger: #c62f3a;
  --geekpi-info: #1674c4;
  --geekpi-radius-sm: 4px;
  --geekpi-radius-md: 8px;
  --geekpi-radius-lg: 12px;
  --geekpi-shadow-sm: 0 1px 3px rgb(15 23 42 / 6%);
  --geekpi-shadow-md: 0 6px 20px rgb(15 23 42 / 8%);
  --geekpi-container-width: 1240px;
}

.theme--dark {
  --geekpi-primary: #62b5ff;
  --geekpi-primary-hover: #91ccff;
  --geekpi-primary-light: #16344d;
  --geekpi-bg: #111923;
  --geekpi-surface: #1b2634;
  --geekpi-surface-hover: #243244;
  --geekpi-text: #e8eef7;
  --geekpi-text-secondary: #b7c4d5;
  --geekpi-text-muted: #95a7bd;
  --geekpi-border: #3c4d62;
  --geekpi-success: #6dd69b;
  --geekpi-warning: #f4bc64;
  --geekpi-danger: #ff8e98;
  --geekpi-info: #62b5ff;
  --geekpi-shadow-sm: 0 1px 3px rgb(0 0 0 / 18%);
  --geekpi-shadow-md: 0 6px 20px rgb(0 0 0 / 24%);
}

/* Shared components across Hydro pages, using the established GeekPi palette. */
html[data-layout="basic"] body { background: var(--geekpi-bg); color: var(--geekpi-text); }
html[data-layout="basic"] #panel > .main { background: linear-gradient(180deg, var(--geekpi-primary-light), var(--geekpi-bg) 360px); }
.main .section { background: var(--geekpi-surface); border: 1px solid var(--geekpi-border); border-radius: 14px; box-shadow: 0 5px 20px rgb(21 65 105 / 5%); }
.main .section__header { padding: 20px 24px 14px; border-bottom: 1px solid var(--geekpi-border); }
.main .section__title { color: var(--geekpi-text); font-size: 21px; line-height: 1.5; font-weight: 700; }
.main .section__body { padding: 20px 24px; }
.main .section__body + .section__body { padding-top: 10px; }
.main .section__footer { border-radius: 0 0 14px 14px; border-top-color: var(--geekpi-border); }
.main .section.side { padding: 10px; }
.main .section.side .menu__link { border-radius: 8px; margin: 3px 0; padding: 12px 14px; color: var(--geekpi-text-secondary); font-weight: 500; line-height: 1.5; }
.main .section.side .menu__link:hover { color: var(--geekpi-primary); background: var(--geekpi-primary-light); }
.main .section.side .menu__link.active { color: var(--geekpi-primary); background: var(--geekpi-primary-light); border-left-color: var(--geekpi-primary); font-weight: 700; }
.main .section.side .menu__seperator { border-bottom-color: var(--geekpi-border); margin: 8px 0; }
.main .section.side .menu__subitem a { color: var(--geekpi-text-secondary); border-radius: 6px; }
.main .section.side .menu__subitem a:hover { background: var(--geekpi-primary-light); color: var(--geekpi-primary); }
.main .button { border-radius: 8px; font-weight: 600; border-color: var(--geekpi-border); transition: background-color .15s, border-color .15s; }
.main .button.primary { background: var(--geekpi-primary); color: #fff; border-color: var(--geekpi-primary); box-shadow: 0 3px 8px rgb(22 116 196 / 13%); }
.main .button.primary:hover { background: var(--geekpi-primary-hover); border-color: var(--geekpi-primary-hover); }
.main .button:focus-visible, .menu__link:focus-visible { outline: 2px solid var(--geekpi-primary); outline-offset: 3px; }
.main .button:disabled, .main .button.disabled { opacity: .55; box-shadow: none; }
.main input.textbox, .main textarea.textbox, .main select.select { border: 1px solid var(--geekpi-border); border-radius: 8px; background-color: var(--geekpi-surface); color: var(--geekpi-text); padding: 10px 12px; min-height: 42px; box-sizing: border-box; }
.main input.textbox:focus, .main textarea.textbox:focus, .main select.select:focus { border-color: var(--geekpi-primary); box-shadow: 0 0 0 3px var(--geekpi-primary-light); outline: none; }
.main .form__label, .main label { color: var(--geekpi-text-secondary); }
.main .form__help { color: var(--geekpi-text-muted); line-height: 1.7; }
.main input[type="file"] { max-width: 100%; font-size: 13px; color: var(--geekpi-text-secondary); }
.main input[type="file"]::file-selector-button { padding: 9px 14px; margin-right: 10px; border: 1px solid var(--geekpi-border); border-radius: 7px; background: var(--geekpi-primary-light); color: var(--geekpi-primary); cursor: pointer; font-weight: 600; }
.main .data-table thead { background: var(--geekpi-primary-light); color: var(--geekpi-text-secondary); }
.main .data-table th { font-weight: 600; }
.main .data-table td, .main .data-table th { border-color: var(--geekpi-border); }
.main .data-table tbody tr:hover { background: var(--geekpi-surface-hover); }
.main .filter { background: var(--geekpi-surface); border-color: var(--geekpi-border); border-radius: 10px; }
.main .pagination .page-link { border-radius: 6px; }
.main .pagination .page-link.current { color: var(--geekpi-primary); border-color: var(--geekpi-primary); }
.main .hint { border-radius: 10px; }
.nav__dropdown { border: 1px solid var(--geekpi-border); border-radius: 12px; box-shadow: var(--geekpi-shadow-md); }
.nav__dropdown .menu__link { color: var(--geekpi-text-secondary); }
.nav__dropdown .menu__link:hover { background: var(--geekpi-primary-light); color: var(--geekpi-primary); }
.geekpi-account-intro { margin-bottom: 24px; padding: 24px 28px; border: 1px solid var(--geekpi-border); border-radius: 14px; background: linear-gradient(110deg, var(--geekpi-surface), var(--geekpi-primary-light)); }
.geekpi-account-intro h1 { color: var(--geekpi-text); font-size: 28px; font-weight: 700; line-height: 1.5; margin: 0 0 8px; }
.geekpi-account-intro p { color: var(--geekpi-text-secondary); font-size: 14px; line-height: 1.8; margin: 0; }
:is(.page--home_account, .page--home_preference, .page--home_domain) #upload_avatar img { border-radius: 16px; border: 1px solid var(--geekpi-border); margin-bottom: 16px; }
:is(.page--home_account, .page--home_preference, .page--home_domain) .changeAvatar { display: inline-flex; gap: 12px; flex-wrap: wrap; align-items: center; max-width: 100%; vertical-align: middle; }
:is(.page--home_account, .page--home_preference, .page--home_domain) .changeAvatar select { min-height: 42px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--geekpi-border); color: var(--geekpi-text); background: var(--geekpi-surface); }
:is(.page--home_account, .page--home_preference, .page--home_domain) .change-avatar { margin: 12px 0 12px 16px; }
:is(.page--home_account, .page--home_preference, .page--home_domain) .markdown-editor { border-radius: 10px; overflow: hidden; border-color: var(--geekpi-border); }
@media (max-width: 600px) {
  .main .section__header { padding: 16px 18px 12px; }
  .main .section__body { padding: 16px 18px; }
  .main .section__title { font-size: 19px; }
  .geekpi-account-intro { padding: 20px; margin-bottom: 18px; }
  .geekpi-account-intro h1 { font-size: 24px; }
  :is(.page--home_account, .page--home_preference, .page--home_domain) .change-avatar { margin-left: 0; }
}
:is(.page--home_account, .page--home_preference, .page--home_domain) #upload_avatar > .section__body > img { display: block; }
:is(.page--home_account, .page--home_preference, .page--home_domain) .changeAvatar { width: 100%; }
:is(.page--home_account, .page--home_preference, .page--home_domain) .changeAvatar > .row { width: 100%; }
.main .section__tab-header-item.selected { color: var(--geekpi-primary); border-bottom-color: var(--geekpi-primary); font-weight: 700; }
.layout--immersive #panel { background: linear-gradient(150deg, #e7f4ff, #f5f8fc 55%, #eef6ff); }
.layout--immersive .immersive--content { max-width: 460px; width: auto; margin: 30px auto; padding: 28px 32px; border: 1px solid var(--geekpi-border); border-radius: 16px; background: var(--geekpi-surface); color: var(--geekpi-text); box-shadow: var(--geekpi-shadow-md); }
.layout--immersive .immersive--content h1 { color: var(--geekpi-text); font-size: 26px; font-weight: 700; margin: 0 0 28px; }
.layout--immersive .immersive--content label.inverse { color: var(--geekpi-text-secondary) !important; }
.layout--immersive .immersive--content label.material.textbox input { color: var(--geekpi-text); border-color: var(--geekpi-border); background: var(--geekpi-surface); }
.layout--immersive .immersive--content .supplementary.inverse { color: var(--geekpi-text-muted); }
.layout--immersive .immersive--content a { color: var(--geekpi-primary); }
@media (max-width: 600px) { .layout--immersive .immersive--content { margin: 20px 0; padding: 24px 20px; } }

/* GeekPi OJ official image remains unchanged; existing navigation is retained. */
.nav__logo[src$="/geekpi/geekpi.png"],
.header--mobile__domain img[src$="/geekpi/geekpi.png"] {
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

.footer.footer--geekpi, .layout--immersive .footer.footer--geekpi {
  background: linear-gradient(110deg, #10213c 0%, #17294e 58%, #233466 100%);
  color: #d5e2f4;
  border-top: 1px solid #233d65;
  padding: 46px 24px 24px;
  margin-top: 40px;
}
.footer--geekpi .geekpi-footer__inner { max-width: 1200px; margin: 0 auto; }
.footer--geekpi .geekpi-footer__grid { display: grid; grid-template-columns: 1.65fr 1fr 1fr 1fr 1.3fr; gap: 30px; align-items: start; }
.footer--geekpi a { color: #d5e2f4; text-decoration: none; }
.footer--geekpi a:hover { color: #67d9ff; }
.footer--geekpi a:focus-visible { outline: 2px solid #67d9ff; outline-offset: 5px; border-radius: 3px; }
.footer--geekpi .geekpi-footer__brand img { width: 230px; max-width: 100%; height: auto; display: block; margin: 0 0 20px; }
.footer--geekpi .geekpi-footer__brand p { font-size: 13px; line-height: 1.9; margin: 0 0 8px; }
.footer--geekpi .geekpi-footer__brand .geekpi-footer__motto { color: #9cb8d9; }
.footer--geekpi .geekpi-footer__group h2 { color: #fff; font-size: 18px; font-weight: 700; line-height: 1.5; margin: 4px 0 20px; }
.footer--geekpi .geekpi-footer__group a { display: block; width: fit-content; font-size: 15px; line-height: 1.5; margin-bottom: 15px; }
.footer--geekpi .geekpi-footer__wechat { text-align: center; }
.footer--geekpi .geekpi-footer__wechat img { width: 132px; height: 132px; display: block; margin: 0 auto 12px; border: 6px solid #fff; box-sizing: content-box; border-radius: 6px; }
.footer--geekpi .geekpi-footer__wechat p { color: #fff; font-size: 14px; margin: 0 0 8px; }
.footer--geekpi .geekpi-footer__wechat span { color: #b9cde7; font-size: 12px; }
.footer--geekpi .geekpi-footer__bottom { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(203,224,250,.17); text-align: center; }
.footer--geekpi .geekpi-footer__bottom p { margin: 0 0 10px; font-size: 13px; }
.footer--geekpi .geekpi-footer__credits { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font-size: 12px; line-height: 1.8; color: #b9cde7; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .footer--geekpi .geekpi-footer__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .footer--geekpi .geekpi-footer__brand { grid-column: span 2; }
  .footer--geekpi .geekpi-footer__wechat { grid-column: 3; grid-row: 1; }
}
@media (max-width: 520px) {
  .footer--geekpi { padding: 30px 20px 20px; }
  .footer--geekpi .geekpi-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .footer--geekpi .geekpi-footer__brand { grid-column: 1 / -1; }
  .footer--geekpi .geekpi-footer__group h2 { font-size: 16px; margin-bottom: 14px; }
  .footer--geekpi .geekpi-footer__wechat { grid-column: 1 / -1; grid-row: auto; padding-top: 8px; }
}
.footer.footer--geekpi .geekpi-footer__credits a,
.footer.footer--geekpi .geekpi-footer__credits a:visited,
.footer.footer--geekpi .geekpi-footer__credits a:hover,
.footer.footer--geekpi .geekpi-footer__credits a:active { color: inherit; }

.footer--geekpi .geekpi-footer__theme { display:flex; align-items:center; justify-content:center; gap:12px; margin:0 0 16px; color:#d5e2f4; font-size:13px; }
.footer--geekpi .geekpi-site-theme { margin:0; max-width:none; min-width:130px; height:36px; background:#173553; color:#def3ff; border:1px solid #456782; border-radius:6px; padding:6px; }

/* GeekPi OJ empty states retain Hydro messages and compact mode. */
.geekpi-empty-state .geekpi-empty-state__image {
  display: block;
  width: 200px;
  height: 200px;
  max-width: 100%;
  margin: 0 auto 18px;
  object-fit: contain;
}
.geekpi-empty-state.compact .geekpi-empty-state__image {
  width: 96px;
  height: 96px;
  margin-bottom: 12px;
}

.page--error .geekpi-error-mascot {
  display: inline-block;
  width: 230px;
  height: 230px;
  max-width: 100%;
  object-fit: contain;
}

.geekpi-difficulty { display:inline-block; padding:5px 8px; border-radius:5px; font-size:12px; font-weight:700; line-height:1.3; white-space:nowrap; background:var(--difficulty-bg); color:var(--difficulty-fg); }
.difficulty-0 { --difficulty-bg:#e5e7eb; --difficulty-fg:#4b5563; }
.difficulty-1 { --difficulty-bg:#ff4565; --difficulty-fg:#fff; }
.difficulty-2 { --difficulty-bg:#f59e0b; --difficulty-fg:#442700; }
.difficulty-3 { --difficulty-bg:#facc15; --difficulty-fg:#423300; }
.difficulty-4 { --difficulty-bg:#52c41a; --difficulty-fg:#143a00; }
.difficulty-5 { --difficulty-bg:#14b8b8; --difficulty-fg:#003a3a; }
.difficulty-6 { --difficulty-bg:#2584d4; --difficulty-fg:#fff; }
.difficulty-7 { --difficulty-bg:#963acb; --difficulty-fg:#fff; }
.difficulty-8 { --difficulty-bg:#19236d; --difficulty-fg:#fff; }
.page--problem_main .data-table .col--difficulty,
.page--problem_category .data-table .col--difficulty { width:170px; }
.geekpi-profile-trend { border-bottom:1px solid #e2edf5; background:linear-gradient(120deg,#fff,#f4fbff); padding:24px; }
.geekpi-profile-heading { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.geekpi-profile-heading h2,.geekpi-practice h2 { font-size:18px; font-weight:700; margin:0 0 16px; color:#173552; }
.geekpi-profile-heading>span,.geekpi-profile-note { font-size:12px; color:#677b8f; line-height:1.7; }
.geekpi-profile-note { margin:8px 0 16px; }
.geekpi-heat-scroll { overflow-x:auto; padding:4px 0; }
.geekpi-heatmap { display:flex; gap:5px; min-width:640px; }
.geekpi-heat-week,.geekpi-heat-days { display:flex; flex:1; flex-direction:column; gap:5px; }
.geekpi-heat-days { flex:0 0 20px; }
.geekpi-heat-days span { height:19px; text-align:center; font-size:11px; color:#718397; }
.geekpi-heat-month { height:19px; font-size:11px; color:#718397; white-space:nowrap; }
.geekpi-heat-cell { display:block; height:19px; border-radius:3px; background:#e8eef3; }
.geekpi-heat-cell.level-1 { background:#b9e9fc; }
.geekpi-heat-cell.level-2 { background:#60c9ef; }
.geekpi-heat-cell.level-3 { background:#09a6d8; }
.geekpi-heat-cell.level-4 { background:#086ea3; }
.geekpi-heat-cell:focus { outline:2px solid #132f4d; outline-offset:2px; }
.geekpi-heat-cell.future { visibility:hidden; }
.geekpi-heat-legend { display:flex; justify-content:flex-end; gap:12px; align-items:center; flex-wrap:wrap; margin-top:14px; color:#677b8f; font-size:11px; }
.geekpi-heat-legend>span { display:flex; gap:4px; align-items:center; }
.geekpi-heat-legend i { width:15px; height:15px; }
.geekpi-practice-layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:28px; }
.geekpi-practice-links { display:flex; flex-wrap:wrap; gap:10px 14px; margin:16px 0 24px; }
.geekpi-practice-links a { font-weight:600; }
.geekpi-practice-problem { border-bottom:3px solid var(--difficulty-bg); padding:3px 0; }
.geekpi-difficulty-stat table { width:100%; font-size:13px; }
.geekpi-difficulty-stat td,.geekpi-difficulty-stat th { padding:10px 4px; border-bottom:1px solid #e4ecf2; text-align:right; }
.geekpi-difficulty-stat td:first-child,.geekpi-difficulty-stat th:first-child { text-align:left; }
.geekpi-pi-card { border-top:3px solid #00b4e8; }
.geekpi-pi-total { float:right; color:#008ac4; font-size:30px; font-weight:800; }
.geekpi-pi-row { display:flex; justify-content:space-between; margin:0 0 18px; color:#4e657a; }
.geekpi-pi-card details { font-size:12px; color:#677b8f; line-height:1.8; }
.geekpi-pi-card summary { cursor:pointer; color:#008ac4; }
.page--user_detail .profile-content { margin-top:0; }
.page--user_detail .profile-content .section__tab-header-wrapper {
    background:#f3f8fc; border-bottom:1px solid #d9e5ef; padding:12px 16px 0;
}
.page--user_detail .profile-content .section__tab-header {
    display:flex; gap:8px; padding:0 0 12px; margin:0; mask-image:none;
}
.page--user_detail .profile-content .section__tab-header-item {
    flex:0 0 auto; margin:0; height:42px; line-height:42px; padding:0 20px;
    color:#314e68; background:#fff; border:1px solid #d8e4ee; border-radius:8px;
    font-size:14px; font-weight:600; cursor:pointer; box-shadow:none;
    transition:color .15s, background .15s, border-color .15s;
}
.page--user_detail .profile-content .section__tab-header-item:hover {
    color:#007fab; background:#e3f5fc; border-color:#74cbe7;
}
.page--user_detail .profile-content .section__tab-header-item.selected {
    color:#fff; background:#008cb9; border-color:#008cb9; box-shadow:none;
}
.page--user_detail .profile-content .section__tab-header-item.selected::after { display:none; }
.page--user_detail .profile-content .section__tab-header-item:focus-visible {
    outline:3px solid #124563; outline-offset:2px;
}
@media(max-width:1100px) { .geekpi-practice-layout { grid-template-columns:1fr; } }
@media(max-width:600px) { .geekpi-profile-trend { padding:16px; } }

/* Personal library, participation, and saved collections. */
.page--user_detail .geekpi-collection-toolbar {display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;border-bottom:1px solid #e2ebf3;background:#f8fbff;flex-wrap:wrap}
.page--user_detail .geekpi-collection-toolbar nav {display:flex;gap:8px;flex-wrap:wrap}
.page--user_detail .geekpi-collection-toolbar nav a {display:block;padding:10px 13px;border-radius:8px;color:#41566e;font-weight:600;line-height:1.4}
.page--user_detail .geekpi-collection-toolbar nav a.selected {background:#e0f3ff;color:#0077bc;box-shadow:inset 0 -2px #00b9e8}
.page--user_detail .geekpi-collection-toolbar a:hover {background:#eaf5ff;color:#0077bc}
.page--user_detail .geekpi-collection-create {padding:10px 15px;border-radius:8px;background:#007bc6;color:white;font-weight:600;white-space:nowrap}
.page--user_detail .geekpi-collection-list {padding:20px 22px}
.page--user_detail .geekpi-collection-row {display:flex;align-items:center;gap:14px;min-height:62px;padding:12px 15px;margin:10px 0;background:#f8fbfe;border:1px solid #e6edf5;border-radius:9px;flex-wrap:wrap}
.page--user_detail .geekpi-collection-id {color:#687c93;font-size:13px;font-variant-numeric:tabular-nums}
.page--user_detail .geekpi-collection-title {flex:1;min-width:180px;color:#007abc;font-weight:600;line-height:1.6;overflow-wrap:anywhere}
.page--user_detail .geekpi-collection-title:hover {text-decoration:underline}
.page--user_detail .geekpi-collection-meta {color:#647890;font-size:13px;line-height:1.6}
.page--user_detail .geekpi-collection-badge {padding:5px 9px;background:#e6f4ff;color:#076f9f;border-radius:6px;font-size:12px;white-space:nowrap}
.page--user_detail .geekpi-collection-edit {color:#007bc6;font-size:13px}
.page--user_detail .geekpi-collection-star {color:#f5af00;font-size:21px}
.page--user_detail .geekpi-collection-pager {display:flex;justify-content:flex-end;align-items:center;gap:16px;padding-top:18px;color:#657b92}
.page--user_detail .geekpi-collection-pager a {padding:8px 12px;border:1px solid #d2e5f1;border-radius:7px;color:#007bc6}
.page--user_detail .geekpi-profile-collection a:focus-visible {outline:2px solid #00aadd;outline-offset:3px}
@media(max-width:760px) {
 .page--user_detail .geekpi-collection-toolbar,.page--user_detail .geekpi-collection-list {padding:14px}
 .page--user_detail .geekpi-collection-row {gap:10px}
 .page--user_detail .geekpi-collection-title {min-width:140px}
 .page--user_detail .geekpi-collection-meta {flex-basis:100%}
}

.difficulty-8 { --difficulty-bg:#7b2149; --difficulty-fg:#fff; }
.difficulty-9 { --difficulty-bg:#19236d; --difficulty-fg:#fff; }
.difficulty-pending { --difficulty-bg:#f1f3f5; --difficulty-fg:#687078; }

.geekpi-profile-info { border-bottom: 1px solid var(--geekpi-border); }
.geekpi-profile-info h2 { margin: 0 0 16px; font-size: 18px; font-weight: 700; color: var(--geekpi-text); }
.geekpi-profile-nickname { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.geekpi-profile-nickname > div { flex: 1 1 240px; max-width: 440px; }
.geekpi-profile-nickname label { display: block; margin-bottom: 8px; font-size: 14px; line-height: 1.5; }
.geekpi-profile-nickname .textbox { width: 100%; }
.geekpi-profile-nickname p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--geekpi-text-secondary); }
.geekpi-profile-nickname .button { display: inline-flex; align-items: center; justify-content: center; margin: 29px 0 0; height: 42px; min-height: 42px; padding: 0 16px; line-height: 1; text-align: center; box-sizing: border-box; }
@media (max-width: 480px) {
  .geekpi-profile-nickname { flex-direction: column; align-items: stretch; }
  .geekpi-profile-nickname > div { flex-basis: auto; max-width: none; }
  .geekpi-profile-nickname .button { margin-top: 0; align-self: flex-start; }
}

html[data-page="homepage"] body .main { padding-top: 90px; }
html.page--homepage.theme--light #panel { background: #f2f8fd; }
.geekpi-home { max-width: 1240px; margin: 0 auto; padding: 0 24px 40px; color: var(--geekpi-text); }
.geekpi-home-hero { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; min-height: 430px; position: relative; }
.geekpi-home-intro { position: relative; z-index: 1; padding: 25px 0; }
.geekpi-home h1 { font-size: clamp(32px, 3.7vw, 52px); line-height: 1.4; font-weight: 800; letter-spacing: .02em; margin-bottom: 20px; }
.geekpi-home h1 span { color: #009fe8; }
.geekpi-home-intro > p { color: var(--geekpi-text-secondary); font-size: 17px; line-height: 1.8; }
.geekpi-home-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.geekpi-home-button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 13px 24px; background: #009fe8; color: #fff !important; border: 1px solid #009fe8; border-radius: 9px; font-weight: 600; text-decoration: none !important; transition: background .15s; }
.geekpi-home-button:hover { background: #0086c7; }
.geekpi-home-button--outline { color: var(--geekpi-primary) !important; background: var(--geekpi-surface); border-color: var(--geekpi-border); }
.geekpi-home-button--outline:hover { background: var(--geekpi-primary-light); }
.geekpi-home-visual { position: relative; min-width: 0; }
.geekpi-home-visual img { display: block; width: 100%; height: 410px; object-fit: contain; position: relative; z-index: 1; }
.geekpi-home-orbit { position: absolute; inset: 5% 8%; border-radius: 50%; background: radial-gradient(ellipse, #d4efff 0%, transparent 70%); border: none; transform: rotate(-15deg); }
.geekpi-learning { margin: 24px 0 48px; }
.geekpi-home h2 { font-size: 24px; font-weight: 700; line-height: 1.5; }
.geekpi-home-subtitle { color: var(--geekpi-text-secondary); margin: 8px 0 20px; line-height: 1.7; }
.geekpi-learning-tabs { display: flex; gap: 10px; margin-bottom: 20px; }
.geekpi-learning-tabs button { font: inherit; padding: 9px 22px; border: 1px solid var(--geekpi-border); background: var(--geekpi-surface); color: var(--geekpi-text-secondary); border-radius: 24px; cursor: pointer; }
.geekpi-learning-tabs [aria-selected="true"] { background: #009fe8; border-color: #009fe8; color: #fff; font-weight: 600; }
.geekpi-home :focus-visible { outline: 3px solid #009fe8; outline-offset: 4px; }
.geekpi-topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.geekpi-topic-grid[hidden] { display: none; }
.geekpi-topic { display: grid; grid-template-columns: 42px 1fr; gap: 12px; position: relative; padding: 24px 18px; background: var(--geekpi-surface); border: 1px solid var(--geekpi-border); border-radius: 14px; color: var(--geekpi-text) !important; text-decoration: none !important; transition: border-color .15s, transform .15s; }
.geekpi-topic:hover { border-color: #009fe8; transform: translateY(-3px); }
.geekpi-topic h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.geekpi-topic p { font-size: 13px; line-height: 1.8; color: var(--geekpi-text-secondary); }
.geekpi-topic-symbol { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #e8f6ff; color: #009fe8; font-size: 22px; font-weight: 700; }
.geekpi-topic-symbol--2 { background: #f0edff; color: #7664d4; }
.geekpi-topic-symbol--3 { background: #e6f7f2; color: #1b9e7e; }
.geekpi-topic-symbol--4 { background: #fff3d9; color: #b78014; }
.geekpi-topic-arrow { position: absolute; right: 14px; bottom: 12px; color: var(--geekpi-text-muted); }
.geekpi-home-section-title { margin-bottom: 22px; }
.geekpi-home-feed { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 24px; }
.geekpi-home-feed-main, .geekpi-home-feed-aside { min-width: 0; }
.geekpi-home .section { border: 1px solid var(--geekpi-border); border-radius: 14px; background: var(--geekpi-surface); box-shadow: none; margin-bottom: 24px; overflow: hidden; }
.geekpi-home .section__header { padding: 24px 24px 16px; }
.geekpi-home .section__title { font-size: 19px; }
.geekpi-home .section__body { padding: 12px 24px 24px; }
.geekpi-home-problems .section__header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.geekpi-home-problems .section__header > a { font-size: 13px; white-space: nowrap; }
.geekpi-home-problem-list { padding: 0 24px 12px; }
.geekpi-home-problem-list > li { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--geekpi-border); }
.geekpi-home-problem-index { flex: 0 0 32px; height: 32px; display: grid; place-items: center; background: var(--geekpi-primary-light); color: var(--geekpi-primary); border-radius: 9px; font-weight: 600; }
.geekpi-home-problem-title { flex: 1; min-width: 0; font-weight: 600; line-height: 1.7; overflow-wrap: anywhere; }
.geekpi-home-problem-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.geekpi-home-problem-tags span { font-size: 11px; font-weight: 400; color: var(--geekpi-text-secondary); background: var(--geekpi-bg); border-radius: 5px; padding: 2px 8px; }
.geekpi-home-problem-open { flex: 0 0 28px; font-size: 22px; text-align: center; }
.geekpi-home-empty .section__body { text-align: center; padding: 30px 24px 36px; }
.geekpi-home-empty__image { display: block; width: 128px; height: 128px; object-fit: contain; max-width: 100%; margin: 0 auto; }
.geekpi-home-empty p { color: var(--geekpi-text-secondary); line-height: 1.8; margin: 14px 0 22px; }
.geekpi-home-advice .section__body { text-align: center; }
.geekpi-home-advice img { display: block; width: 190px; max-width: 100%; height: 180px; object-fit: contain; margin: 0 auto 12px; }
.geekpi-home-advice p, .geekpi-home-create p { color: var(--geekpi-text-secondary); line-height: 1.9; margin-bottom: 16px; }
.geekpi-home-extra summary { cursor: pointer; color: var(--geekpi-text-secondary); padding: 10px 0; }
.geekpi-home-extra .section { margin-top: 12px; }
@media (max-width: 767px) { html[data-page="homepage"] body .main { padding-top: 18px; } }
@media (min-width: 1050px) { html[data-page="homepage"] body { background: #f2f8fd; } .theme--dark html[data-page="homepage"] body, html.theme--dark[data-page="homepage"] body { background: var(--geekpi-bg); } }
@media (max-width: 1050px) { .geekpi-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .geekpi-home-feed { grid-template-columns: minmax(0, 1fr) 280px; } }
@media (max-width: 767px) { .geekpi-home { padding: 0 16px 24px; } .geekpi-home-hero { grid-template-columns: 1fr; text-align: center; padding-top: 18px; } .geekpi-home-actions { justify-content: center; } .geekpi-home-intro { padding-bottom: 0; } .geekpi-home-visual img { height: auto; aspect-ratio: 3 / 2; } .geekpi-home-orbit { inset: 10% 15%; } .geekpi-learning { margin-top: 12px; } .geekpi-home-feed { grid-template-columns: 1fr; } .geekpi-home .section__header, .geekpi-home .section__body { padding-left: 18px; padding-right: 18px; } .geekpi-home-problem-list { padding-left: 18px; padding-right: 18px; } .geekpi-topic { padding: 20px 14px; grid-template-columns: 1fr; } .geekpi-topic-grid { gap: 12px; } .geekpi-learning-tabs button { padding: 9px 18px; } .geekpi-home-intro > p { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .geekpi-topic { transition: none; } .geekpi-topic:hover { transform: none; } }

/* Topic cards and a responsive, text-based competition ladder. */
.geekpi-topic { box-shadow: 0 4px 0 #e1ebf4; min-height: 158px; }
.geekpi-topic-count { display: inline-block; margin-top: 12px; color: #698297; font-size: 12px; }
.geekpi-topic-symbol--5, .geekpi-topic-symbol--8 { background: #e8f6ff; color: #009fe8; }
.geekpi-topic-symbol--6 { background: #f0edff; color: #7664d4; }
.geekpi-topic-symbol--7 { background: #e6f7f2; color: #1b9e7e; }
/* Crisp HTML nodes with SVG connectors keep the full selection map readable. */
.geekpi-ladder { margin: 0 0 48px; padding: 28px; border: 1px solid #d5e6f5; border-radius: 18px; background: linear-gradient(135deg, #ffffff 0%, #f1f8ff 55%, #edf7fc 100%); overflow: hidden; }
.geekpi-ladder-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; }
.geekpi-ladder-heading h2 { color: #123b65; font-size: 30px; margin-top: 7px; }
.geekpi-ladder-heading p { color: #617b91; margin-top: 8px; line-height: 1.7; }
.geekpi-ladder-eyebrow { color: #008dce; font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.geekpi-ladder-mascot { width: 144px; height: 144px; flex: 0 0 144px; }
.geekpi-ladder-mascot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.geekpi-ladder-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; font-size: 12px; color: #54708a; margin-bottom: 22px; }
.geekpi-ladder-legend span { display: inline-flex; align-items: center; gap: 7px; }
.geekpi-ladder-legend i { display: inline-block; width: 25px; border-top: 3px solid #7b9ab8; }
.geekpi-ladder-legend .ladder-line-main { border-color: #208fd5; }
.geekpi-ladder-legend .ladder-line-optional { border-top-style: dashed; }
.geekpi-ladder-scroll-hint { margin-left: auto; }
.geekpi-ladder-scroll { overflow-x: auto; border-bottom: 1px solid #d5e6f5; padding-top: 6px; }
.geekpi-ladder-map { position: relative; min-width: 1040px; width: 100%; height: 1070px; }
.geekpi-ladder-connectors { position: absolute; inset: 0; width: 100%; height: 1070px; pointer-events: none; }
.ladder-map-column { position: absolute; color: #668198; font-size: 12px; font-weight: 700; }
.ladder-node, .ladder-outlet { position: absolute; box-sizing: border-box; height: 91px; border: 1px solid #b6d6ef; border-radius: 11px; padding: 10px 15px; background: linear-gradient(110deg, #e6f3ff, #f7fbff); box-shadow: 0 3px 0 #d9e9f7; }
.ladder-node h3, .ladder-outlet h3 { font-size: 16px; font-weight: 750; line-height: 1.5; color: #183f68; margin: 3px 0; }
.ladder-node p, .ladder-outlet p { font-size: 12px; line-height: 1.65; color: #526f8b; margin: 0; }
.ladder-time { font-size: 11px; font-weight: 650; color: #377baa; }
.ladder-node--side { height: 104px; background: linear-gradient(120deg, #ecf9f8, #fbfefe); border-color: #b8dddc; box-shadow: 0 3px 0 #dceeed; }
.ladder-node--side h3 { color: #226f76; font-size: 15px; }
.ladder-node--side p, .ladder-node--side .ladder-time { color: #53767b; }
.ladder-node--junior, .ladder-node--senior { height: 80px; padding: 9px 13px; }
.ladder-node--junior { background: #e7f7f2; border-color: #abd9cc; box-shadow: 0 3px 0 #d3ebe3; }
.ladder-node--junior h3 { color: #276e5c; }
.ladder-node--junior p, .ladder-node--junior .ladder-time { color: #52796c; }
.ladder-node--senior { background: #e1efff; border-color: #91bce9; box-shadow: 0 3px 0 #c6dff8; }
.ladder-node--senior h3 { color: #164c8d; }
.ladder-node--senior p, .ladder-node--senior .ladder-time { color: #47688f; }
.ladder-arrow-label { position: absolute; font-size: 11px; color: #447796; background: #f4f9fe; padding: 2px 7px; border-radius: 4px; line-height: 1.7; }
.ladder-arrow-label--small { font-size: 10px; padding: 0 4px; }
.ladder-girls-label { position: absolute; font-size: 10px; color: #745694; line-height: 1.5; width: 22%; background: #f5f0fc; border: 1px solid #ddd0ec; border-radius: 7px; padding: 7px; z-index: 1; }
.ladder-outlet { background: #fff; border-color: #bccfea; box-shadow: 0 3px 0 #e0e9f6; height: 111px; }
.ladder-outlet--award { border-color: #e2cf9d; background: linear-gradient(110deg, #fff9e9, #fffdf6); box-shadow: 0 3px 0 #eee4c8; }
.ladder-outlet--award h3 { color: #775e21; }
.ladder-outlet > span { font-size: 10px; font-weight: 700; color: #8265b8; letter-spacing: 1px; }
.ladder-outlet h3 { color: #334e77; font-size: 15px; }
.ladder-outlet p { color: #5b7089; }
.ladder-map-start { position: absolute; left: 7%; top: 1040px; font-size: 12px; color: #57718a; }
.geekpi-ladder-requirements { margin-top: 18px; border: 1px solid #d4e4f2; border-radius: 10px; background: #fff; padding: 12px 16px; color: #466783; font-size: 12px; line-height: 1.8; }
.geekpi-ladder-requirements summary { cursor: pointer; font-weight: 700; color: #215780; }
.geekpi-ladder-requirements p { margin-top: 10px; }
.geekpi-ladder-exits { margin-top: 24px; }
.geekpi-ladder-exits > h3 { color: #224b70; font-size: 17px; font-weight: 700; margin-bottom: 14px; }
.geekpi-ladder-exit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.geekpi-ladder-exit-grid > div { border: 1px solid #d4e4f2; background: #fff; border-radius: 10px; padding: 15px; }
.geekpi-ladder-exit-grid b { color: #215780; font-size: 14px; }
.geekpi-ladder-exit-grid p { font-size: 12px; color: #637c92; line-height: 1.8; margin-top: 8px; }
.geekpi-ladder-footer { margin-top: 20px; font-size: 12px; line-height: 1.8; color: #6b8397; }
.geekpi-ladder-sources { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.geekpi-ladder-sources a { color: #008abe; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { .geekpi-ladder { padding: 20px 16px; } .geekpi-ladder-heading h2 { font-size: 24px; } .geekpi-ladder-mascot { width: 92px; height: 92px; flex-basis: 92px; } .geekpi-ladder-exit-grid { grid-template-columns: 1fr; } .geekpi-ladder-scroll-hint { margin-left: 0; font-weight: 700; color: #008abe; } }
@media (min-width: 768px) and (max-width: 1050px) { .geekpi-ladder-exit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.geekpi-team-menu-heading { padding: 10px 16px; color: #244963; font-weight: 700; }
.geekpi-team-menu-heading small { display: block; font-weight: 400; color: #718295; margin-top: 6px; max-width: 270px; overflow-wrap: anywhere; }
.geekpi-team-menu-link[aria-current="true"] { background: #edf8ff; }
.geekpi-team-current { color: #008bc4; font-size: 11px; margin-left: 8px; }

/* Keep the learning route readable outside the horizontally scrolling map. */
.geekpi-ladder-start { display: flex; gap: 18px; align-items: center; margin: 20px 0 16px; padding: 18px 22px; background: #e8f4ff; border: 1px solid #bddcf5; border-left: 4px solid #168bd1; border-radius: 12px; color: #254b70; }
.geekpi-ladder-start__label { flex-shrink: 0; padding: 7px 12px; background: #168bd1; color: #fff; font-size: 14px; font-weight: 700; border-radius: 7px; }
.geekpi-ladder-start p { margin: 0; font-size: 15px; line-height: 1.9; }
.geekpi-ladder-start strong { font-weight: 700; color: #123f6c; }
.geekpi-ladder-junior { padding: 20px 22px; margin-bottom: 16px; background: #fff; border: 1px solid #cfe2f2; border-radius: 12px; color: #486782; }
.geekpi-ladder-junior h3 { margin: 0 0 10px; color: #17629a; font-size: 17px; font-weight: 700; }
.geekpi-ladder-junior p { margin: 8px 0; font-size: 14px; line-height: 1.9; }
.geekpi-ladder-junior strong { color: #274f73; }
.geekpi-ladder-junior a { color: #087ab8; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .geekpi-ladder-start { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; } .geekpi-ladder-junior { padding: 16px; } }

.geekpi-problem-jump { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 36px; padding: 24px 28px; background: #fff; border: 1px solid #d4e7f5; border-radius: 16px; box-shadow: 0 8px 24px rgba(36,95,138,.05); }
.geekpi-problem-jump__eyebrow { color: #087ab8; font-size: 11px; letter-spacing: 1.5px; font-weight: 700; }
.geekpi-problem-jump h2 { color: #173d60; font-size: 23px; font-weight: 700; margin: 6px 0; }
.geekpi-problem-jump p { color: #607e98; font-size: 13px; margin: 0; }
.geekpi-problem-jump form { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.geekpi-problem-jump__label { color: #31516f; font-weight: 700; font-size: 14px; }
.geekpi-problem-jump input { width: 260px; max-width: 100%; height: 44px; padding: 0 14px; border: 1px solid #b9d6ec; border-radius: 8px; font-size: 14px; background: #f8fcff; box-sizing: border-box; }
.geekpi-problem-jump input:focus { outline: 2px solid #28a7e0; outline-offset: 2px; }
.geekpi-problem-jump .geekpi-home-button { min-height: 44px; padding: 10px 18px; font-size: 14px; }
@media (max-width: 950px) { .geekpi-problem-jump { flex-direction: column; align-items: flex-start; } }
@media (max-width: 600px) { .geekpi-problem-jump { padding: 20px; } .geekpi-problem-jump form { width: 100%; } .geekpi-problem-jump input { flex: 1; min-width: 0; width: auto; } .geekpi-problem-jump form .geekpi-home-button { flex: 1; } }

.geekpi-problem-jump .geekpi-home-button { white-space: nowrap; }
@media (max-width: 600px) {
  .geekpi-problem-jump form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .geekpi-problem-jump__label, .geekpi-problem-jump input { grid-column: 1 / -1; }
  .geekpi-problem-jump input { width: 100%; }
  .geekpi-problem-jump .geekpi-home-button { text-align: center; justify-content: center; }
}

.geekpi-hero-slides { display: grid; }
.geekpi-hero-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.geekpi-hero-slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.geekpi-hero-controls { display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; z-index: 2; }
.geekpi-hero-controls button { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border: 0; border-radius: 6px; background: transparent; color: var(--geekpi-primary-hover); cursor: pointer; }
.geekpi-hero-controls button:hover { background: var(--geekpi-primary-light); }
.geekpi-hero-controls button:focus-visible { outline: 2px solid var(--geekpi-primary); outline-offset: 2px; }
.geekpi-hero-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--geekpi-text-muted); }
.geekpi-hero-dot[aria-current="true"]::before { width: 22px; border-radius: 4px; background: var(--geekpi-primary); }
.geekpi-hero-controls .icon { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .geekpi-hero-slide { transition: none; } }

.geekpi-home h1 [data-hero-lead] { color: inherit; }
.geekpi-home-intro h1 { min-height: 2.8em; }
.geekpi-home-intro [data-hero-description] { min-height: 3.6em; }

/* Six selectable stages, styled as the approved continuous staircase. */
.geekpi-plan { margin: 0 0 44px; padding: 26px 6px 0; color: #173552; }
.geekpi-plan-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 20px; margin-bottom: 0; }
.geekpi-plan-heading h2 { margin: 0 0 10px; font-size: 46px; font-weight: 800; color: #24272b; }
.geekpi-plan-heading p { color: #526b85; line-height: 1.7; margin: 0; font-size: 15px; }
.geekpi-plan-heading > a { color: #087fc7; font-size: 14px; flex-shrink: 0; text-underline-offset: 4px; }
.geekpi-plan-route-scroll { overflow-x: auto; padding: 0 8px 22px; margin: -44px -2px 0; }
.geekpi-plan-route { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; min-width: 940px; padding-top: 62px; }
.geekpi-plan-route button { --step-fill: #d7edfc; --step-end: #cce6fa; --step-top: #eaf6ff; --step-accent: #3199db; --step-rise: 0px; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; box-sizing: border-box; height: calc(152px + var(--step-rise)); padding: 18px 20px 16px; border: 1px solid color-mix(in srgb, var(--step-accent), transparent 65%); border-top: 0; border-radius: 0 0 6px 6px; background: linear-gradient(120deg, var(--step-fill), var(--step-end)); color: #173552; font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 1px 0 rgb(255 255 255 / 48%), 0 3px 7px rgb(23 53 82 / 6%); }
/* Three edges meet at the front-left corner: top, front and a continuous
   narrow side face. Lower steps occlude the side below their own top edge. */
.geekpi-plan-route button::before { content: ''; position: absolute; pointer-events: none; left: -1px; right: -1px; top: -21px; height: 22px; background: linear-gradient(175deg, var(--step-top), var(--step-fill)); box-shadow: inset 0 -1px 0 rgb(255 255 255 / 55%); clip-path: polygon(20px 0, calc(100% - 14px) 0, 100% 100%, 16px 100%, 4px 15px, 2px 13px, 1px 11px, 2px 9px, 4px 7px); border-radius: 8px 8px 0 0; }
.geekpi-plan-route button::after { content: ''; position: absolute; pointer-events: none; left: -1px; top: -13px; bottom: 0; width: 17px; background: linear-gradient(90deg, color-mix(in srgb, var(--step-fill), var(--step-accent) 16%), color-mix(in srgb, var(--step-fill), var(--step-accent) 9%)); clip-path: polygon(1px 3px, 2px 1px, 4px 0, 6px 1px, 100% 13px, 100% 100%, 0 calc(100% - 2px), 0 6px); border-radius: 7px 0 0 5px; }
.geekpi-plan-route button { z-index: 6; padding-left: 32px; width: calc(100% + 16px); }
.geekpi-plan-route button:nth-child(2) { z-index: 5; }
.geekpi-plan-route button:nth-child(3) { z-index: 4; }
.geekpi-plan-route button:nth-child(4) { z-index: 3; }
.geekpi-plan-route button:nth-child(5) { z-index: 2; }
.geekpi-plan-route button:nth-child(6) { z-index: 1; width: 100%; }
.geekpi-plan-route button:nth-child(2) { --step-fill: #8de3e9; --step-end: #5cd2de; --step-top: #b9eff2; --step-accent: #139cab; --step-rise: 28px; }
.geekpi-plan-route button:nth-child(3) { --step-fill: #9aebba; --step-end: #6cdda0; --step-top: #c4f1d5; --step-accent: #329964; --step-rise: 56px; }
.geekpi-plan-route button:nth-child(4) { --step-fill: #ffe58a; --step-end: #f9d361; --step-top: #ffedb0; --step-accent: #ba8b20; --step-rise: 84px; }
.geekpi-plan-route button:nth-child(5) { --step-fill: #ffc29a; --step-end: #f8a372; --step-top: #fcd5ba; --step-accent: #c76b35; --step-rise: 112px; }
.geekpi-plan-route button:nth-child(6) { --step-fill: #c9a9fa; --step-end: #b18bea; --step-top: #e0ccfa; --step-accent: #8655c7; --step-rise: 140px; }
.geekpi-plan-route button:hover { filter: brightness(1.025); }
.geekpi-plan-route button[aria-selected="true"] .geekpi-plan-step { background: #087fc7; color: #fff; }
.geekpi-plan-route button[aria-selected="true"] { z-index: 7; padding-left: 20px; border-radius: 16px; outline: 3px solid #1598e4; outline-offset: -2px; }
.geekpi-plan-route button[aria-selected="true"]::before, .geekpi-plan-route button[aria-selected="true"]::after { display: none; }
.geekpi-plan-route button:focus-visible { outline: 3px solid #173552; outline-offset: 3px; }
.geekpi-plan-current { display: none; position: absolute; top: -56px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 7px; background: #087fc7; color: #fff; font-size: 12px; line-height: 1.6; white-space: nowrap; }
.geekpi-plan-current::after { content: ''; position: absolute; bottom: -5px; left: calc(50% - 5px); width: 10px; height: 10px; background: inherit; transform: rotate(45deg); }
.geekpi-plan-route [aria-selected="true"] .geekpi-plan-current { display: block; }
.geekpi-plan-step { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--step-accent); color: #fff; }
.geekpi-plan-stage { min-width: 0; }
.geekpi-plan-stage strong { display: block; font-size: 22px; font-weight: 750; line-height: 1.5; }
.geekpi-plan-stage small { display: block; font-size: 14px; line-height: 1.7; color: #314d67; margin-top: 4px; }
.geekpi-plan-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; padding: 30px 30px 22px; box-sizing: border-box; background: #fff; border: 1px solid #d2e5f5; border-radius: 18px; }
.geekpi-plan-panel[hidden] { display: none; }
.geekpi-plan-position { color: #087fc7; font-size: 13px; }
.geekpi-plan-overview h3 { color: #173552; font-size: 36px; font-weight: 800; margin: 12px 0 16px; line-height: 1.4; }
.geekpi-plan-panel p { color: #526b85; font-size: 14px; line-height: 1.85; margin: 0; max-width: 70ch; }
.geekpi-plan-check { position: relative; margin-top: 22px; padding: 22px 20px 22px 76px; border-radius: 12px; background: #f0f7fd; }
.geekpi-plan-check strong, .geekpi-plan-guide h4 { display: block; font-size: 17px; font-weight: 700; margin: 0 0 10px; color: #173552; }
.geekpi-plan-check p { font-size: 13px; }
.geekpi-plan-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #e1f1ff; color: #087fc7; font-size: 22px; }
.geekpi-plan-check > .geekpi-plan-icon { position: absolute; left: 20px; top: 22px; }
.geekpi-plan-guide { padding-left: 30px; border-left: 1px solid #e0e9f1; }
.geekpi-plan-method { display: grid; gap: 24px; margin-bottom: 12px; }
.geekpi-plan-method-item { position: relative; padding-left: 64px; }
.geekpi-plan-method-item > .geekpi-plan-icon { position: absolute; top: 0; left: 0; }
.geekpi-plan-method-item--practice > .geekpi-plan-icon { color: #319964; background: #e7f7ec; }
.geekpi-plan-guide .geekpi-plan-links-title { margin: 14px 0 8px 64px; font-size: 12px; color: #526b85; }
.geekpi-plan-links { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 64px; }
.geekpi-plan-links a { display: inline-flex; align-items: center; gap: 16px; padding: 8px 12px; border-radius: 8px; color: #087fc7; background: #eef7fe; font-size: 13px; }
.geekpi-plan-links a:hover { background: #e0f0fd; }
.geekpi-plan-panel .geekpi-plan-note { margin: 14px 0 0 64px; font-size: 12px; }
.geekpi-plan-pending { color: #526b85; font-size: 13px; padding: 8px 0; }
.geekpi-plan-panel-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #e0e9f1; padding-top: 22px; }
.geekpi-plan-primary { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; flex-shrink: 0; padding: 14px 24px; background: #087fc7; color: #fff; border-radius: 9px; font-size: 14px; font-weight: 600; }
.geekpi-plan-primary:hover { background: #076da9; color: #fff; }
.geekpi-plan-panel-actions p { font-size: 11px; text-align: right; }
.geekpi-plan-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 14px 8px 0; }
.geekpi-plan-footer p { color: #526b85; font-size: 11px; line-height: 1.8; margin: 0; }
.geekpi-plan-footer > a { color: #087fc7; font-size: 12px; flex-shrink: 0; }
.geekpi-plan-scroll-hint { display: none; }
#geekpi-ladder-title { scroll-margin-top: 95px; }
@media (max-width: 1000px) {
  .geekpi-plan-route-scroll { margin-top: 18px; }
  .geekpi-plan-route button { padding-left: 32px; padding-right: 12px; }
  .geekpi-plan-stage strong { font-size: 18px; }
  .geekpi-plan-panel { padding: 24px; gap: 24px; }
  .geekpi-plan-guide { padding-left: 22px; }
  .geekpi-plan-method-item { padding-left: 0; }
  .geekpi-plan-method-item > .geekpi-plan-icon { position: static; margin-bottom: 10px; }
  .geekpi-plan-guide .geekpi-plan-links-title, .geekpi-plan-links { margin-left: 0; padding-left: 0; }
  .geekpi-plan .geekpi-plan-scroll-hint { display: block; margin: 6px 0 16px; font-size: 12px; color: #526b85; }
}
@media (max-width: 600px) {
  .geekpi-plan { padding: 14px 0 0; }
  .geekpi-plan-heading { align-items: flex-start; flex-direction: column; gap: 10px; padding: 0 6px; }
  .geekpi-plan-heading h2 { font-size: 28px; }
  .geekpi-plan-heading p { font-size: 13px; }
  .geekpi-plan-panel { grid-template-columns: 1fr; padding: 22px 18px; }
  .geekpi-plan-guide { padding: 22px 0 0; border-left: 0; border-top: 1px solid #e0e9f1; }
  .geekpi-plan-overview h3 { font-size: 30px; }
  .geekpi-plan-check { padding-left: 66px; }
  .geekpi-plan-check > .geekpi-plan-icon { left: 14px; }
  .geekpi-plan-panel-actions, .geekpi-plan-footer { flex-direction: column; align-items: stretch; gap: 12px; }
  .geekpi-plan-panel-actions p { text-align: left; }
  .geekpi-plan-panel .geekpi-plan-note { margin-left: 0; }
}

/* Preserve the reference's compact heading/stair overlap without label collisions. */
.geekpi-plan-route button:nth-child(n+5) .geekpi-plan-current { top: 10px; left: auto; right: 10px; transform: none; padding: 3px 8px; }
.geekpi-plan-route button:nth-child(n+5) .geekpi-plan-current::after { display: none; }
@media (max-width: 1000px) { .geekpi-plan-route-scroll { margin-top: 10px; } }

@media (max-width: 600px) {
  .geekpi-plan-route button:nth-child(2) { --step-rise: 16px; }
  .geekpi-plan-route button:nth-child(3) { --step-rise: 32px; }
  .geekpi-plan-route button:nth-child(4) { --step-rise: 48px; }
  .geekpi-plan-route button:nth-child(5) { --step-rise: 64px; }
  .geekpi-plan-route button:nth-child(6) { --step-rise: 80px; }
}

/* GeekPi OJ keeps Hydro navigation routing and permission checks. */
.geekpi-nav { background: #132947; border-bottom: 1px solid #234364; box-shadow: 0 2px 10px rgb(15 35 65 / 10%); }
.geekpi-nav .nav__item, .geekpi-nav .nav__item--round { color: #e8f3fc; }
.geekpi-nav .nav__item:hover, .geekpi-nav .nav--active { color: #58d1ff; background: rgb(255 255 255 / 5%); }
.geekpi-nav .nav--active { box-shadow: inset 0 -3px #20b9f4; }
.geekpi-nav .nav__item.nav--active { border-top-color: transparent; }
.geekpi-nav .nav__item.nav--active::before { box-shadow: none; }
.geekpi-nav .nav__logo { object-fit: contain; }
.geekpi-nav > .row { max-width: 1280px; }
@media (min-width: 768px) {
  html[data-page] body .geekpi-nav { height: 56px; }
  html[data-page] body .geekpi-nav .nav__item { height: 56px; line-height: 50px; box-sizing: border-box; }
  html[data-page] body .geekpi-nav .nav__logo { height: 32px; width: auto; margin-top: 12px; margin-bottom: 12px; }
}
@media (max-width: 767px) {
  .header--mobile { background: #132947; color: #edf7ff; }
  .header--mobile a { color: #edf7ff; }
}

/* Account menu: compact groups with progressive disclosure. */
#menu-nav-user.geekpi-account-menu {
  width: 280px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 88px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: var(--geekpi-surface);
  box-shadow: 0 10px 32px rgb(15 35 60 / 18%);
  scrollbar-width: thin;
  scrollbar-color: var(--geekpi-border) transparent;
}
#menu-nav-user.geekpi-account-menu .menu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--geekpi-text-secondary);
  font-size: 14px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
#menu-nav-user.geekpi-account-menu .menu__link:hover,
#menu-nav-user.geekpi-account-menu .menu__link[aria-current] {
  color: var(--geekpi-primary-hover);
  background: var(--geekpi-primary-light);
  text-decoration: none;
}
#menu-nav-user.geekpi-account-menu .menu__link:focus-visible {
  outline: 2px solid var(--geekpi-primary);
  outline-offset: -2px;
}
#menu-nav-user.geekpi-account-menu .icon { width: 18px; flex: 0 0 18px; margin: 0; font-size: 18px; text-align: center; }
#menu-nav-user .geekpi-account-section { padding: 14px 12px 5px; color: var(--geekpi-text-muted); font-size: 12px; font-weight: 600; }
#menu-nav-user .geekpi-account-section:first-child { padding-top: 6px; }
#menu-nav-user .geekpi-account-disclosure summary { list-style: none; }
#menu-nav-user .geekpi-account-disclosure summary::-webkit-details-marker { display: none; }
#menu-nav-user .geekpi-account-disclosure summary > .icon:last-child { margin-left: auto; transition: transform .15s; }
#menu-nav-user .geekpi-account-disclosure[open] summary > .icon:last-child { transform: rotate(180deg); }
#menu-nav-user .geekpi-account-team { display: flex; flex: 1; min-width: 0; flex-direction: column; }
#menu-nav-user .geekpi-account-team small { color: var(--geekpi-primary-hover); font-size: 12px; }
#menu-nav-user .geekpi-account-submenu { list-style: none; margin: 2px 0 6px 28px; padding: 0; }
#menu-nav-user .geekpi-team-current { margin-left: auto; color: var(--geekpi-primary-hover); font-size: 12px; white-space: nowrap; }
@media (pointer: coarse) { #menu-nav-user.geekpi-account-menu .menu__link { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { #menu-nav-user .geekpi-account-disclosure summary > .icon:last-child { transition: none; } }
.geekpi-nav .geekpi-account-trigger { font-family: inherit; font-size: inherit; cursor: pointer; }
.geekpi-nav .geekpi-account-trigger:focus-visible { outline: 2px solid #58d1ff; outline-offset: -4px; }
#menu-nav-user .geekpi-account-subheading { padding: 8px 12px 4px; color: var(--geekpi-text-muted); font-size: 12px; font-weight: 600; }
#menu-nav-user .geekpi-account-team-action { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--geekpi-border); }

@media(min-width:768px){.geekpi-nav .geekpi-account-trigger{border:0;border-radius:0;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:16px}}

/* The mobile account trigger sits below the drawer links, so anchor its overlay to the viewport. */
@media (max-width: 767px) {
  .drop.geekpi-account-dropdown {
    position: fixed !important;
    top: 64px !important;
    right: 12px !important;
    left: auto !important;
    transform: none !important;
  }
}

/* Awesome DESIGN.md / Intercom: light surfaces, hairlines and measured spacing.
   Preserve GeekPi's blue palette and native filtering/navigation behavior. */
.page--problem_main body { background: var(--geekpi-bg); }
.page--problem_main .geekpi-problem-hero > .columns { min-height: 150px; }
.geekpi-problem-hero h1 { color: var(--geekpi-text); font-size: 28px; font-weight: 650; letter-spacing: -.5px; }
.geekpi-problem-hero p { color: var(--geekpi-text-secondary); font-size: 15px; }
.page--problem_main .geekpi-problem-library .section { border: 1px solid var(--geekpi-border); box-shadow: none; }
.geekpi-library-heading { color: var(--geekpi-text); font-size: 16px; }
.geekpi-problem-filters { background: var(--geekpi-surface); gap: 16px; padding-top: 20px; }
.geekpi-problem-filters label { color: var(--geekpi-text-secondary); font-weight: 500; }
.geekpi-problem-filters :is(input, select) { background: var(--geekpi-surface); color: var(--geekpi-text); border-color: var(--geekpi-border); height: 44px; }
.geekpi-problem-search { min-height: 44px; background: var(--geekpi-primary); }
.geekpi-problem-search:hover { background: var(--geekpi-primary-hover); }
.geekpi-problem-reset { min-height: 44px; color: var(--geekpi-primary); background: var(--geekpi-primary-light); }
.geekpi-library-management > summary { color: var(--geekpi-primary-hover); background: var(--geekpi-library-action-bg, var(--geekpi-primary-light)); border-color: var(--geekpi-library-action-border, var(--geekpi-border)); }
.page--problem_main .geekpi-list-table thead { color: var(--geekpi-text-secondary); background: var(--geekpi-primary-light); }
.page--problem_main .geekpi-list-table td { color: var(--geekpi-text-secondary); border-color: var(--geekpi-border); font-variant-numeric: tabular-nums; }
.page--problem_main .geekpi-list-table tbody tr { background: var(--geekpi-surface); }
.page--problem_main .geekpi-list-table tbody tr:nth-child(even) { background: var(--geekpi-surface); }
.page--problem_main .geekpi-list-table tbody tr:hover { background: var(--geekpi-primary-light); }
.page--problem_main .geekpi-list-table .problem__tag-link { color: var(--geekpi-text-secondary); background: var(--geekpi-surface-hover); line-height: 1.6; }
.page--problem_main .geekpi-list-table .col--problem-name > a { color: var(--geekpi-primary); }
.geekpi-pass-track i { background: var(--geekpi-primary); }
.page--problem_main .geekpi-pagination, .page--problem_main .pager { background: var(--geekpi-surface); }
.page--problem_main :is(a, button, summary):focus-visible { outline: 2px solid var(--geekpi-primary); outline-offset: 3px; }
.geekpi-problem-table-scroll { scrollbar-color: var(--geekpi-text-muted) var(--geekpi-surface-hover); }

.gps-catalog { color: var(--geekpi-text); }
.gps-catalog .gps-hero { background: var(--geekpi-primary-light); border-radius: 12px; padding: 24px 32px; }
.gps-catalog .gps-hero h1 { margin: 0 0 10px; font-size: 28px; font-weight: 650; }
.gps-catalog .gps-hero p { color: var(--geekpi-text-secondary); font-size: 15px; }
.gps-catalog .gps-hero img { width: 120px; height: 120px; }
.gps-catalog .gps-panel { background: var(--geekpi-surface); border-color: var(--geekpi-border); box-shadow: none; }
.gps-catalog .gps-toolbar { padding-bottom: 20px; border-bottom: 1px solid var(--geekpi-border); }
.gps-catalog .gps-tabs { gap: 4px; }
.gps-catalog .gps-tabs a { background: transparent; color: var(--geekpi-text-secondary); min-height: 44px; box-sizing: border-box; }
.gps-catalog .gps-tabs a.active { background: var(--geekpi-primary-light); color: var(--geekpi-primary); }
.gps-catalog .gps-button { background: var(--geekpi-primary); border-color: var(--geekpi-primary); min-height: 44px; }
.gps-catalog .gps-button:hover { background: var(--geekpi-primary-hover); }
.gps-catalog :is(input,select) { background: var(--geekpi-surface); color: var(--geekpi-text); border-color: var(--geekpi-border); min-height: 44px; }
.gps-catalog label { color: var(--geekpi-text-secondary); font-weight: 500; }
.gps-catalog .gps-categories a { background: var(--geekpi-surface-hover); color: var(--geekpi-text-secondary); font-weight: 500; min-height: 40px; box-sizing: border-box; }
.gps-catalog .gps-categories a.active { background: var(--geekpi-primary-light); color: var(--geekpi-primary); }
.gps-catalog .gps-card { display: flex; flex-direction: column; align-items: stretch; gap: 20px; background: var(--geekpi-surface); border-color: var(--geekpi-border); padding: 22px; box-shadow: none; }
.gps-catalog .gps-card:hover { border-color: var(--geekpi-primary); box-shadow: none; }
.gps-catalog .gps-card h2 { font-size: 18px; font-weight: 600; margin: 14px 0 10px; }
.gps-catalog .gps-card h2 a { color: var(--geekpi-text); }
.gps-catalog .gps-card p, .gps-catalog .gps-meta { color: var(--geekpi-text-secondary); }
.gps-catalog .gps-tag { color: var(--geekpi-primary); background: var(--geekpi-primary-light); }
.gps-catalog-progress { border-top: 1px solid var(--geekpi-border); padding-top: 16px; color: var(--geekpi-text-secondary); font-size: 12px; }
.gps-catalog-progress strong { color: var(--geekpi-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.gps-catalog .gps-catalog-progress progress { display: block; width: 100%; height: 5px; margin-top: 10px; border: 0; border-radius: 4px; overflow: hidden; appearance: none; background: var(--geekpi-border); color: var(--geekpi-primary); }
.gps-catalog-progress progress::-webkit-progress-bar { background: var(--geekpi-border); }
.gps-catalog-progress progress::-webkit-progress-value { background: var(--geekpi-primary); }
.gps-catalog-progress progress::-moz-progress-bar { background: var(--geekpi-primary); }
.gps-catalog .gps-pagination { margin-top: 24px; padding: 20px 0 0; border-top: 1px solid var(--geekpi-border); border-bottom: 0; color: var(--geekpi-text-secondary); }

.page--training_main .main .section { box-shadow: none; border-radius: 12px; }
.page--training_main .main .section__header { padding: 24px; }
.page--training_main .main .section__title { font-size: 22px; font-weight: 600; }
.page--training_main .filter-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page--training_main .filter-form .textbox { margin: 0; height: 44px; min-width: 0; }
.page--training_main .filter-form .button { margin: 0; height: 44px; background: var(--geekpi-primary); border-color: var(--geekpi-primary); color: #fff; }
.page--training_main .training__list.primary .training__item { padding: 28px 24px; border-color: var(--geekpi-border); }
.page--training_main .training__list.primary .training__item:hover { background: var(--geekpi-primary-light); }
.page--training_main .training__participants { background: var(--geekpi-primary-light); border-radius: 12px; padding: 16px; color: var(--geekpi-primary); min-width: 72px; box-sizing: border-box; }
.page--training_main .training__title { font-size: 19px; font-weight: 600; line-height: 1.5; }
.page--training_main .training__title a { color: var(--geekpi-text); }
.page--training_main .training__intro { margin: 8px 0 16px; color: var(--geekpi-text-secondary); line-height: 1.8; }
.page--training_main .main .section.side .section__title { font-size: 16px; }
.page--training_main .main .section.side .menu__link { background: var(--geekpi-primary-light); color: var(--geekpi-primary); min-height: 44px; box-sizing: border-box; }
.page--training_main .main .section.side .section__body { color: var(--geekpi-text-secondary); font-size: 13px; line-height: 1.8; }
.page--training_main :is(a,button,input):focus-visible { outline: 2px solid var(--geekpi-primary); outline-offset: 3px; }
@media (max-width:760px) {
 .gps-catalog .gps-hero { padding: 24px; gap: 12px; }
 .gps-catalog .gps-hero img { width: 84px; height: 84px; }
 .gps-catalog .gps-hero h1 { font-size: 25px; }
 .gps-catalog .gps-hero p { font-size: 14px; line-height: 1.7; }
 .gps-catalog .gps-tabs a, .gps-catalog .gps-categories a { min-height: 44px; }
 .gps-catalog .gps-card { padding: 20px; }
 .page--training_main .section__header .section__tools { position: static; width: 100%; margin-top: 16px; }
 .page--training_main .main .section__header { padding: 20px; }
 .page--training_main .filter-form .textbox { flex: 1; width: 100%; }
 .page--training_main .training__list.primary .training__item { padding: 24px 16px; }
 .page--training_main .training__participants { min-width: 60px; padding: 12px 8px; }
}
.page--training_main .training__progress, .page--training_main .numbox__text, .page--training_main .main .section.side .supplementary { color: var(--geekpi-text-secondary); }
.page--training_main .training__progress .training-status--text.outside { color: var(--geekpi-text-secondary); }
.theme--dark .gps-catalog .gps-button { color: var(--geekpi-bg) !important; }
.page--problem_main.theme--dark .geekpi-problem-search,
.page--training_main.theme--dark .filter-form .button { color: var(--geekpi-bg); }
/* Learning round one: reuse the brand tokens across selection and native Training. */
.gpt{max-width:1160px;width:calc(100% - 48px);margin:28px auto 48px;color:var(--geekpi-text);font-size:14px;box-sizing:border-box}
.gpt *{box-sizing:border-box}
.gpt h1,.gpt-detail-header h1{font-size:30px;font-weight:700;line-height:1.35;margin:0 0 10px}
.gpt h2{font-size:22px;line-height:1.4;font-weight:650;margin:0 0 18px}
.gpt h3{font-size:19px;font-weight:600;line-height:1.5;margin:0 0 9px}
.gpt p{line-height:1.7;color:var(--geekpi-text-secondary);margin:0}
.gpt a{color:var(--geekpi-primary-hover);text-underline-offset:3px}
.gpt-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px}
.gpt-nav{display:flex;gap:24px;flex-wrap:wrap;border-bottom:1px solid var(--geekpi-border);padding-bottom:16px;margin-bottom:30px}
.gpt-nav a{min-height:32px;display:inline-flex;align-items:center;font-weight:500}
.gpt-section{margin:28px 0;scroll-margin-top:80px}
.gpt-routes,.gpt-home-routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.gpt-route{border:1px solid var(--geekpi-border);border-radius:12px;padding:24px;background:var(--geekpi-surface);display:flex;flex-direction:column;gap:18px;min-width:0}
.gpt-route h3 a{color:var(--geekpi-text)}
.gpt-route p{max-width:65ch;font-size:14px}
.gpt-route-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:var(--geekpi-text-secondary);font-size:13px}
.gpt-route-progress{color:var(--geekpi-text-secondary);font-size:13px;font-variant-numeric:tabular-nums}
.gpt-route progress{display:block;width:100%;height:5px;margin-top:9px;accent-color:var(--geekpi-primary)}
.gpt-button,.gpt a.gpt-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:10px 18px;border:1px solid #1468b1;border-radius:8px;background:#1468b1;color:#fff;font-family:inherit;font-size:14px;font-weight:600;line-height:22px;text-decoration:none;cursor:pointer;white-space:nowrap;width:max-content}
.gpt-button:hover,.gpt a.gpt-button:hover{background:#105c9f;color:#fff;text-decoration:none}
.gpt-button--secondary,.gpt a.gpt-button--secondary{background:var(--geekpi-surface);border-color:var(--geekpi-border);color:var(--geekpi-primary-hover)}
.gpt-button--secondary:hover,.gpt a.gpt-button--secondary:hover{background:var(--geekpi-primary-light);color:var(--geekpi-primary-hover)}
.gpt-route>.gpt-button{margin-top:auto}
.gpt-section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.gpt-section-heading h2{margin:0}
.gpt-search{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}
.gpt-search input{width:220px;max-width:100%;min-width:0;height:44px;margin:0;padding:10px 12px;border:1px solid var(--geekpi-border);border-radius:8px;background:var(--geekpi-surface);color:var(--geekpi-text);font:inherit}
.gpt-all-list{display:grid;gap:12px}
.gpt-all-list .gpt-route{display:grid;grid-template-columns:minmax(0,1fr) 180px auto;align-items:center;padding:20px 24px}
.gpt-all-list .gpt-route h3{font-size:17px;margin-bottom:5px}
.gpt-all-list .gpt-route-meta{flex-direction:column;gap:4px}
.gpt-all-list .gpt-route-progress{grid-column:1/-1}
.gpt-all-list .gpt-route>.gpt-button{grid-column:3;grid-row:1;margin:0}
.gpt-empty{padding:24px;background:var(--geekpi-surface);border:1px solid var(--geekpi-border);border-radius:12px}
.gpt-empty h3{font-size:17px}.gpt-empty a{display:inline-block;margin-top:14px}
.gpt .gpt-note,.gpt-note{font-size:12px;line-height:1.7;color:var(--geekpi-text-muted);margin-top:18px}
.gpt :focus-visible,.gpt-home-next :focus-visible,.gpt-home-routes :focus-visible{outline:3px solid var(--geekpi-primary);outline-offset:3px}
.gpt-detail-header{margin-bottom:24px}.gpt-detail-header>h1{margin-top:18px}
.gpt-detail-summary{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:18px;color:var(--geekpi-text-secondary)}
.gpt-detail-body .section__title{font-weight:600}.gpt-detail-body .training__section{scroll-margin-top:80px}
.gpt-detail-body .training__section__detail .section__body{overflow-x:auto}
.gpt-guide>summary{font-size:16px;font-weight:600;cursor:pointer;min-height:44px;line-height:44px}
.gpt-guide[open]>summary{margin-bottom:16px}
.gpt-home-next{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--geekpi-border);border-bottom:1px solid var(--geekpi-border);padding:22px 0;margin-bottom:24px}
.gpt-home-next h2{font-size:20px;margin:0 0 6px}.gpt-home-next p{font-size:14px;color:var(--geekpi-text-secondary);margin:0}
.gpt-home-next>div:last-child{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.gpt-home-routes{margin:0 0 26px}.gpt-home-routes>a{display:flex;flex-direction:column;gap:10px;padding:22px 24px;border:1px solid var(--geekpi-border);border-radius:12px;background:var(--geekpi-surface);color:var(--geekpi-text);text-decoration:none}
.gpt-home-routes strong{font-size:20px;font-weight:650}.gpt-home-routes span{font-size:14px;line-height:1.6;color:var(--geekpi-text-secondary)}.gpt-home-routes small{font-size:13px;color:var(--geekpi-primary-hover)}
.page--problem_main .geekpi-problem-hero>.columns{min-height:110px}
.page--problem_main .geekpi-problem-filters{grid-template-columns:minmax(180px,2fr) minmax(140px,1fr) minmax(140px,1fr) auto auto;padding:18px 24px 14px;gap:14px}
.page--problem_main .geekpi-problem-keyword{grid-column:1;grid-row:1}
.page--problem_main #geekpi-difficulty-filter,.page--problem_main #geekpi-tag-filter{min-width:0}
.geekpi-advanced-filters{margin:0 24px 12px;color:var(--geekpi-text-secondary);font-size:13px}
.geekpi-advanced-filters summary{display:flex;align-items:center;gap:12px;width:max-content;min-height:36px;cursor:pointer;font-weight:600}
.geekpi-advanced-filters summary span{font-size:12px;font-weight:400}
.geekpi-advanced-filters>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:12px 0}
.geekpi-advanced-filters label{min-width:0;display:flex;flex-direction:column;gap:8px}
.geekpi-advanced-filters select{box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:44px;padding:0 12px;border:1px solid var(--geekpi-border);border-radius:8px;background:var(--geekpi-surface);color:var(--geekpi-text)}
.gps-catalog .gps-grid{margin-top:22px}.gps-catalog .gps-card-copy>p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:46px;margin:0 0 14px}
.gps-practice-link{display:inline-flex;align-items:center;gap:10px;margin-top:12px;min-height:36px;font-size:14px;font-weight:600}
@media(max-width:800px){.gpt-all-list .gpt-route{grid-template-columns:minmax(0,1fr) auto}.gpt-all-list .gpt-route-meta{grid-column:1}.gpt-all-list .gpt-route>.gpt-button{grid-column:2;grid-row:1/3}.gpt-home-next{align-items:flex-start;flex-direction:column}.page--problem_main .geekpi-problem-filters{grid-template-columns:1fr 1fr}.page--problem_main .geekpi-problem-keyword{grid-column:1/-1}.page--problem_main .geekpi-problem-search{grid-column:2}.page--problem_main .geekpi-problem-reset{grid-column:1}}
@media(max-width:600px){.gpt{width:calc(100% - 24px);margin-top:20px}.gpt h1{font-size:25px}.gpt h2{font-size:20px}.gpt-header{align-items:flex-start;gap:12px}.gpt-header>.gpt-button{font-size:12px;padding:8px 12px}.gpt-routes,.gpt-home-routes{grid-template-columns:1fr;gap:14px}.gpt-route{padding:20px}.gpt-all-list .gpt-route{padding:18px;gap:12px}.gpt-search{gap:8px;width:100%}.gpt-search label{width:100%}.gpt-search input{flex:1;width:120px}.gpt-home-next>div:last-child{gap:14px}.geekpi-advanced-filters{margin-inline:16px}.geekpi-advanced-filters>div{grid-template-columns:1fr}.page--problem_main .geekpi-problem-filters{padding:16px}.gpt-detail-header h1{font-size:25px}.gpt-detail-summary{gap:12px}.gpt-detail-body .training-section-status--text{font-size:14px}}
.gpt-detail-summary form{margin:0}.gpt-chapter-nav{margin-top:18px}.gpt-chapter-nav>summary{cursor:pointer;min-height:40px;line-height:40px;color:var(--geekpi-primary-hover);font-weight:600}.gpt-chapter-nav ol{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;list-style:none;padding:12px 0;margin:0;border-top:1px solid var(--geekpi-border)}.gpt-chapter-nav a{display:flex;align-items:center;min-height:40px;line-height:1.5}@media(max-width:600px){.gpt-chapter-nav ol{grid-template-columns:1fr}}
.geekpi-home .gpt-home-next a.gpt-button{color:#fff!important}.geekpi-home .gpt-home-next a.gpt-button:hover{color:#fff!important}

/* Native workflows, scoped presentation. Keep server authorization and data unchanged. */
.gkw-heading{max-width:1200px;margin:0 auto 24px;padding:4px 16px;color:var(--geekpi-text,#17374d)}
.gkw-heading h1{font-size:30px;font-weight:700;line-height:1.3;margin:4px 0 10px;letter-spacing:0}
.gkw-heading p{font-size:15px;line-height:1.7;margin:8px 0;color:var(--geekpi-text-secondary,#52697b)}
.gkw-heading .gkw-eyebrow{font-size:12px;font-weight:700;color:var(--geekpi-primary,#007d8e);letter-spacing:.08em}
.gkw-heading .button{margin:8px 8px 4px 0}
.gkw-scope,.gkw-dates{font-size:13px;line-height:1.7;color:var(--geekpi-text-secondary,#52697b);white-space:normal;overflow-wrap:anywhere}
.gkw-scope{margin:12px 16px}.gkw-dates{margin:8px 0}
.gkw-filter-header{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.gkw-filter-header .section__tools{float:none;flex:1;min-width:0}
.gkw-filter-header form{display:flex;flex-wrap:wrap;align-items:end;gap:8px}
.gkw-filter-label{font-size:13px;display:inline-flex;flex-direction:column;gap:6px}
.gkw-filter-header input,.gkw-filter-header select{max-width:100%;min-height:38px}
.gkw-filter-header input[name=q]{width:220px}.gkw-filter-header h1{font-size:18px}
.gkw-filter-header [name=homework_display]{margin-bottom:12px}
.gkw-activity-group{border-top:1px solid var(--geekpi-border,#dce6ee);margin:0}
.gkw-activity-group>summary{padding:16px 20px;font-size:16px;font-weight:700;cursor:pointer;background:var(--geekpi-surface-hover,#f3f7fa)}
.gkw-activity-group>summary span{font-size:13px;font-weight:400;margin-left:12px;color:var(--geekpi-text-secondary,#52697b)}
.gkw-activity-group .contest__title,.gkw-activity-group .homework__title{font-size:19px;line-height:1.5;font-weight:600}
.gkw-empty{padding:40px 24px;text-align:center}.gkw-empty h2{font-size:20px;font-weight:600}.gkw-empty p{line-height:1.8;margin:12px auto 20px;max-width:480px;color:var(--geekpi-text-secondary,#52697b)}
.gkw-status-en{display:block;font-size:11px;line-height:1.5;color:var(--geekpi-text-secondary,#52697b);font-weight:400}
.gkw-records .col--status{width:160px;min-width:140px}.gkw-records .section__body.no-padding,.gkw-ranking .section__body.no-padding{overflow-x:auto}
.gkw-records .record_main__table{min-width:860px}.gkw-record-actions{display:inline-block;font-size:12px;margin:0 8px 6px 0}
.gkw-record-actions>summary{cursor:pointer;color:var(--geekpi-text-secondary,#52697b)}.gkw-record-actions form{padding:8px;border:1px solid var(--geekpi-border,#dce6ee);border-radius:8px}
.gkw-result-link{display:block;font-size:12px;line-height:1.6;margin-top:6px}
.gkw-discussion-filter{padding:20px;border-bottom:1px solid var(--geekpi-border,#dce6ee);display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.gkw-discussion-filter label{flex:1;min-width:180px;font-size:13px;display:flex;flex-direction:column;gap:8px}
.gkw-discussion-filter input,.gkw-discussion-filter select{width:100%;height:40px}.gkw-discussion-filter p{flex-basis:100%;margin:0;font-size:13px;line-height:1.6}
.gkw-discussions [data-discussion-title][hidden]{display:none!important}.gkw-discussions .discussion__title{font-size:19px;line-height:1.5;font-weight:600}
.gkw-discussions .group-list__item h2{font-size:15px;font-weight:600;margin-bottom:12px}.gkw-discussions .chip-list__item a{display:inline-block;min-height:36px;padding:8px}
.gkw-personal-position{display:flex;gap:24px;flex-wrap:wrap;padding:16px 20px;border:1px solid var(--geekpi-border,#dce6ee);background:var(--geekpi-surface,#fff);border-radius:12px;margin-top:16px;font-size:14px}
.gkw-ranking .data-table{min-width:720px}.gkw-ranking .col--bio{max-width:260px;width:26%;overflow-wrap:anywhere;white-space:normal;line-height:1.6}
.gkw-ranking .col--rp,.gkw-ranking .col--detail,.gkw-ranking .col--ac{text-align:right;font-variant-numeric:tabular-nums}
.gkw-team-counts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:20px}
.gkw-team-counts>div{background:var(--geekpi-surface,#fff);border:1px solid var(--geekpi-border,#dce6ee);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px}
.gkw-team-counts strong{font-size:30px;color:var(--geekpi-primary,#007d8e);font-variant-numeric:tabular-nums}.gkw-team-counts span{font-size:14px;color:var(--geekpi-text-secondary,#52697b)}
.gkw-shortcuts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.gkw-check-summary{padding:24px}.gkw-check-summary h2{font-size:18px;font-weight:600}.gkw-check-summary [role=status]{margin:16px 0;font-size:17px;font-weight:600}.gkw-check-summary .gkw-scope{margin:0 0 16px}
.gkw-check-logs>summary,.gkw-maintenance>summary{padding:16px;cursor:pointer;font-size:14px;font-weight:600}
.gkw-check-logs #messages{max-height:400px;overflow:auto;overflow-wrap:anywhere;font-size:13px}.gkw-maintenance p{max-width:400px;line-height:1.6;font-size:13px;padding:0 16px;color:var(--geekpi-text-secondary,#52697b)}.gkw-maintenance form{padding:0 16px 16px}
.gkw-editor-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border:1px solid var(--geekpi-border,#dce6ee);background:var(--geekpi-surface,#fff);border-radius:12px;padding:12px 16px;margin-bottom:12px}
.gkw-editor-controls p{font-size:13px;line-height:1.7;margin:0;color:var(--geekpi-text-secondary,#52697b)}.gkw-editor-controls .button{margin:0;min-height:40px}
.page--geekpi_online_editor .scratchpad__toolbar label.gkw-language{font-size:13px;font-weight:600;margin-right:8px;white-space:nowrap}
.page--geekpi_online_editor #scratchpad.geekpi-online-editor{min-height:480px;height:calc(100dvh - 290px)}
.gkw-heading a:focus-visible,.gkw-activity-group summary:focus-visible,.gkw-maintenance summary:focus-visible,.gkw-check-logs summary:focus-visible{outline:3px solid #008ba3;outline-offset:3px}
@media(max-width:767px){.gkw-heading{padding:0 12px;margin-bottom:20px}.gkw-heading h1{font-size:26px}.gkw-heading p{font-size:14px}.gkw-filter-header,.gkw-filter-header form{display:flex;align-items:stretch;flex-direction:column}.gkw-filter-header .section__tools,.gkw-filter-header input[name=q]{width:100%}.gkw-filter-header select{width:100%}.gkw-activity-group>summary{padding:16px}.gkw-personal-position{gap:12px 20px}.gkw-personal-position strong{flex-basis:100%}.gkw-discussion-filter label{min-width:100%}.gkw-team-counts>div{padding:16px}.gkw-check-summary{padding:20px}.gkw-editor-controls{align-items:stretch}.gkw-editor-controls button{width:100%}.page--geekpi_online_editor #scratchpad.geekpi-online-editor{min-height:520px;height:calc(100dvh - 300px)}}
.gkw-activities .gkw-filter-header{display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:20px}
.gkw-activities .gkw-filter-header .section__tools{position:static;right:auto;top:auto;margin:0;float:none;width:100%}
.gkw-activities .gkw-filter-header .gkw-filter-label{display:inline-flex;flex-direction:column;align-items:stretch;gap:6px;margin:0}
.gkw-activities .gkw-filter-header .section__title{margin:0;line-height:1.4}
.gkw-activities .gkw-filter-header .filter-form{margin:0}
.gkw-maintenance.section__tools{position:static;float:none;margin:0}

/* Align the complete control boxes, including their labels, across native compact variants. */
.gkw-activities .gkw-filter-header form[name="filter-form"]{display:grid;grid-template-columns:minmax(180px,1fr) minmax(130px,180px) minmax(140px,180px) auto;gap:12px;align-items:end}
.gkw-activities .gkw-filter-header form.gkw-homework-filter{grid-template-columns:minmax(180px,1fr) minmax(160px,240px) auto}
.gkw-activities .gkw-filter-header .gkw-filter-label{font-size:13px;line-height:20px;gap:8px;min-width:0}
.gkw-activities .gkw-filter-header .gkw-filter-label :is(input.textbox,select.select){display:block;width:100%;height:42px;min-height:42px;line-height:20px;padding:10px 12px;margin:0;box-sizing:border-box;vertical-align:middle}
.gkw-activities .gkw-filter-actions{display:flex;gap:8px;align-items:center;align-self:end}
.gkw-activities .gkw-filter-header .gkw-filter-actions .button,.gkw-activities .gkw-view-tools>.button{display:inline-flex;align-items:center;justify-content:center;height:42px;min-height:42px;box-sizing:border-box;padding:0 16px;margin:0;line-height:20px;white-space:nowrap}
.gkw-activities .gkw-view-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 20px}
.gkw-activities .gkw-view-label{display:flex;align-items:center;gap:12px;font-size:13px;line-height:20px;margin:0}
.gkw-activities .gkw-filter-header .gkw-view-label select{height:42px;min-height:42px;width:150px;margin:0;box-sizing:border-box}
/* Restore actual table columns: native ranking CSS used block cells with a fixed 36px height. */
.page--ranking .gkw-ranking .data-table{min-width:900px}
.page--ranking .gkw-ranking col.col--bio{display:table-column;width:30%}
.page--ranking .gkw-ranking th.col--bio,.page--ranking .gkw-ranking td.col--bio{display:table-cell;max-width:none;width:30%;vertical-align:middle;white-space:normal}
.page--ranking .gkw-ranking td.col--bio{height:auto!important}
.page--ranking .gkw-ranking .gkw-ranking-bio{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:44px;line-height:22px;overflow-wrap:anywhere;white-space:normal}
@media(max-width:1100px){.gkw-activities .gkw-filter-header form.gkw-contest-filter{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.gkw-activities .gkw-filter-header form[name="filter-form"]{grid-template-columns:minmax(0,1fr)}.gkw-activities .gkw-filter-actions .button{flex:1}.gkw-activities .gkw-view-tools{align-items:flex-end;flex-wrap:wrap}.gkw-activities .gkw-view-label{flex-direction:column;align-items:flex-start;gap:8px}.gkw-activities .gkw-view-tools>.button{padding:0 12px}}

/* Cross-page control geometry: native search/autocomplete widgets use different box models. */
.page--training_main .gpt-search input{box-sizing:border-box;height:44px;min-height:44px;line-height:22px}
.gps .gps-filter{align-items:end}
.gps .gps-filter label{line-height:20px;min-width:0}
.gps .gps-filter :is(input:not([type=checkbox]):not([type=hidden]),select){box-sizing:border-box;height:44px;min-height:44px;margin:8px 0 0;padding:10px 12px;line-height:22px}
.gps .gps-filter .gps-button{box-sizing:border-box;height:44px;min-height:44px;margin:0;padding:0 18px;line-height:22px}
.gkw-record-filter>.section>.section__body>.row{display:flex;flex-wrap:wrap;align-items:flex-start}
.gkw-record-filter .section__body .columns>label{display:flex;flex-direction:column;gap:8px;margin:0;font-size:13px;line-height:20px}
.gkw-record-filter .section__body :is(input.textbox:not(.autocomplete-dummy),select.select){box-sizing:border-box;height:42px;min-height:42px;line-height:20px;margin:0;padding:10px 12px;width:100%}
.gkw-record-filter .autocomplete-container{display:block!important;margin:0!important;width:100%}
.gkw-record-filter .autocomplete-wrapper{box-sizing:border-box;height:42px!important;min-height:42px;padding:0;border:1px solid var(--geekpi-border);border-radius:8px;background:var(--geekpi-surface)}
.gkw-record-filter .autocomplete-wrapper>input{box-sizing:border-box;height:40px;min-height:40px;line-height:20px;padding:10px 12px;margin:0;width:100%;border:0;background:transparent;color:var(--geekpi-text)}
.gkw-record-filter .autocomplete-wrapper:focus-within{border-color:var(--geekpi-primary);box-shadow:0 0 0 3px var(--geekpi-primary-light)}
.gkw-record-filter .section__tools .button{height:42px;min-height:42px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;line-height:20px;padding:0 16px}
.page--error .error__text-container{min-width:0;overflow-wrap:anywhere}
@media(max-width:767px){.gkw-record-filter .section__body .columns{width:100%;margin-bottom:14px}.gps .gps-filter label{flex:1 1 100%}.gps .gps-filter .gps-button{width:100%}}

/* Keep the ladder guide independent of generic image sizing and sticky-header anchor offsets. */
.geekpi-home .geekpi-ladder-heading>div:first-child{min-width:0}
.geekpi-home .geekpi-ladder-mascot{display:grid;place-items:center;align-self:center;width:144px;height:144px;min-width:144px;flex:0 0 144px}
.geekpi-home .geekpi-ladder-mascot img{display:block;width:144px;height:144px;max-width:100%;object-fit:contain;object-position:center}
#geekpi-ladder-title{scroll-margin-top:150px}
@media(max-width:767px){.geekpi-home .geekpi-ladder-mascot{width:92px;height:92px;min-width:92px;flex-basis:92px}.geekpi-home .geekpi-ladder-mascot img{width:92px;height:92px}}

@media(max-width:767px){.page--domain_group .main .section__header{display:flex;flex-direction:column;align-items:stretch;gap:12px}.page--domain_group .main .section__header .section__tools{position:static;display:flex;flex-wrap:wrap;gap:8px;margin:0}.page--domain_group .main .section__header .section__tools .button{height:42px;min-height:42px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;line-height:20px;margin:0;padding:0 12px}}
/* The homepage ranking is a narrow preview; full biographies remain on the ranking page. */
.page--homepage .geekpi-home-feed-aside .col--bio{display:none}
.page--homepage .geekpi-home-feed-aside .col--rank{width:40px}
.page--homepage .geekpi-home-feed-aside .col--rp{width:48px;text-align:right}
.page--homepage .geekpi-home-feed-aside .col--user{width:auto}