/* 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 OJ problem and IDE surfaces reuse Hydro's original actions and editor. */
html.page--problem_detail body {
  background: var(--geekpi-bg);
}

.geekpi-problem-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
  width: calc(100% - 40px);
  max-width: var(--geekpi-container-width);
  margin: 0 auto;
}

.geekpi-problem-layout::before,
.geekpi-problem-layout::after { display: none; }
.geekpi-problem-main { display: contents; }
.geekpi-problem-aside { grid-column: 2; grid-row: 2; width: auto; padding: 0; min-width: 0; }
.geekpi-problem-heading { grid-column: 1 / -1; margin: 0; }
.geekpi-problem-statement { grid-column: 1; grid-row: 2; margin: 0; min-width: 0; }

.geekpi-problem-layout .section {
  background: var(--geekpi-surface);
  border: 1px solid var(--geekpi-border);
  border-radius: 12px;
  box-shadow: none;
  color: var(--geekpi-text);
}

.geekpi-problem-heading > .section__header { padding: 0 0 12px; }
.geekpi-problem-heading .section__title { font-size: 26px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; color: var(--geekpi-text); }
.geekpi-problem-heading > .section__body { padding: 0; }
.geekpi-problem-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; font-size: 13px; color: var(--geekpi-text-secondary); }
.geekpi-problem-layout a { color: var(--geekpi-primary); }
.geekpi-problem-layout a:hover { color: var(--geekpi-primary-hover); }
.geekpi-problem-heading .problem__tags { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--geekpi-text-secondary); line-height: 1.8; }
.geekpi-problem-heading .problem__tag-item { margin: 0; font-size: 13px; }
.geekpi-problem-tabs { display: flex; flex-wrap: wrap; gap: 24px; padding: 0 28px; border-bottom: 1px solid var(--geekpi-border); }
.geekpi-problem-tab { display: inline-flex; padding: 15px 0 12px; font-size: 15px; font-weight: 600; border-bottom: 3px solid transparent; }
.geekpi-problem-tab--active { color: var(--geekpi-primary); border-bottom-color: var(--geekpi-primary); }
.geekpi-copy-markdown { background: transparent; border: 0; font: inherit; color: var(--geekpi-primary); cursor: pointer; }
.geekpi-problem-tabs .geekpi-copy-markdown { margin-left: 0; font-size: 13px; font-weight: 600; color: var(--geekpi-primary); }
.geekpi-copy-markdown:hover { color: var(--geekpi-primary-hover); }
.geekpi-copy-markdown:focus-visible { outline: 2px solid var(--geekpi-primary); outline-offset: 3px; }
.geekpi-markdown-source[hidden] { display: none; }
.geekpi-problem-statement .section__body { padding: 24px 28px; }
.geekpi-problem-layout .typo { font-size: 16px; line-height: 1.85; }
.geekpi-problem-layout .typo h1,
.geekpi-problem-layout .typo h2,
.geekpi-problem-layout .typo h3 { font-size: 21px; font-weight: 700; line-height: 1.5; margin: 28px 0 14px; color: var(--geekpi-text); }
.geekpi-problem-layout .typo p { margin: 12px 0; }
.geekpi-problem-layout .typo pre { background: var(--geekpi-surface-hover); border: 1px solid var(--geekpi-border); border-radius: var(--geekpi-radius-sm); overflow-x: auto; color: var(--geekpi-text); }
.geekpi-problem-aside .section__title { font-size: 16px; font-weight: 600; color: var(--geekpi-text); }
.geekpi-problem-aside .section__header { padding: 18px 20px 8px; }
/* Awesome DESIGN.md / Linear reference: hairlines, restrained accent, 4px rhythm.
   Adapted to GeekPi's existing light surfaces, Chinese type and blue brand. */
/* Native sticky measurements become zero while Scratchpad hides the grid. */
.geekpi-problem-aside > div { display: grid; gap: 16px; }
.geekpi-problem-aside .section { margin: 0; overflow: hidden; border-radius: 12px; box-shadow: none; }
.geekpi-problem-info .geekpi-problem-card-heading { display: flex; align-items: center; gap: 8px; padding: 18px 20px; border-bottom: 1px solid var(--geekpi-border); background: var(--geekpi-surface); }
.geekpi-problem-card-icon { color: var(--geekpi-text-muted); font-size: 15px; }
.geekpi-problem-card-heading .section__title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.geekpi-problem-card-note { margin-left: auto; padding: 3px 7px; color: var(--geekpi-text-secondary); background: var(--geekpi-surface-hover); border: 1px solid var(--geekpi-border); border-radius: 5px; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.geekpi-problem-info .geekpi-problem-facts { padding: 16px 20px 20px; }
/* Intercom reference: quiet light surfaces and hairlines, adapted to GeekPi blue. */
.geekpi-fact-performance { padding: 16px; border: 0; border-radius: 12px; background: var(--geekpi-primary-light); color: var(--geekpi-text); }
.geekpi-performance-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--geekpi-text-secondary); font-size: 12px; }
.geekpi-problem-info .geekpi-performance-heading a { color: var(--geekpi-primary); font-size: 12px; text-decoration: none; }
.geekpi-performance-heading a:hover { text-decoration: underline; }
.geekpi-fact-performance strong { display: block; margin-top: 12px; font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.geekpi-fact-performance strong small { margin-left: 4px; font-size: 17px; font-weight: 400; color: var(--geekpi-text-secondary); }
.geekpi-fact-performance progress { display: block; appearance: none; width: 100%; height: 5px; margin-top: 16px; overflow: hidden; border: 0; border-radius: 4px; background: var(--geekpi-border); color: var(--geekpi-primary); }
.geekpi-fact-performance progress::-webkit-progress-bar { background: var(--geekpi-border); border-radius: 4px; }
.geekpi-fact-performance progress::-webkit-progress-value { background: var(--geekpi-primary); border-radius: 4px; }
.geekpi-fact-performance progress::-moz-progress-bar { background: var(--geekpi-primary); border-radius: 4px; }
.geekpi-fact-performance p { margin: 10px 0 0; color: var(--geekpi-text-secondary); font-size: 12px; line-height: 1.5; }
.geekpi-fact-performance p span { margin: 0 5px; color: var(--geekpi-text-muted); }
.geekpi-fact-overview { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; color: var(--geekpi-text-secondary); font-size: 12px; }
.geekpi-fact-overview .geekpi-difficulty { padding: 3px 8px; border-radius: 5px; font-size: 12px; }
.geekpi-problem-info .geekpi-fact-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding: 16px 0; border-top: 1px solid var(--geekpi-border); border-bottom: 1px solid var(--geekpi-border); }
.geekpi-fact-limits > div { min-width: 0; }
.geekpi-fact-limits > div + div { padding-left: 16px; border-left: 1px solid var(--geekpi-border); }
.geekpi-fact-limits dt { color: var(--geekpi-text-muted); font-size: 12px; line-height: 1.5; }
.geekpi-fact-limits dt .icon { display: none; }
.geekpi-fact-limits dd { margin: 6px 0 0; color: var(--geekpi-text); font-size: 19px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.geekpi-fact-limits dd small { margin-left: 4px; color: var(--geekpi-text-muted); font-size: 10px; font-weight: 400; }
.geekpi-fact-topics { margin-top: 20px; }
.geekpi-fact-topics h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; color: var(--geekpi-text-secondary); font-size: 12px; font-weight: 500; }
.geekpi-fact-topics h3 .icon { font-size: 12px; color: var(--geekpi-text-muted); }
.geekpi-topic-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.geekpi-topic-list li { min-width: 0; max-width: 100%; }
.geekpi-problem-info .geekpi-topic-list a { display: inline-flex; align-items: center; box-sizing: border-box; max-width: 100%; min-height: 32px; padding: 5px 8px; border: 1px solid var(--geekpi-border); border-radius: 5px; background: var(--geekpi-surface); color: var(--geekpi-text-secondary); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; transition: color .15s, border-color .15s, background .15s; }
.geekpi-problem-info .geekpi-topic-list a:hover { border-color: var(--geekpi-primary); background: var(--geekpi-primary-light); color: var(--geekpi-primary); text-decoration: none; }
.geekpi-topic-list:has(li) + .geekpi-fact-empty { display: none; }
.geekpi-fact-empty { color: var(--geekpi-text-muted); font-size: 12px; }
.geekpi-fact-owner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--geekpi-border); color: var(--geekpi-text-muted); font-size: 12px; }
.geekpi-fact-owner > span { flex-shrink: 0; }
.geekpi-fact-owner > div { min-width: 0; text-align: right; overflow-wrap: anywhere; line-height: 1.6; }
.geekpi-problem-info .geekpi-fact-owner a { color: var(--geekpi-text-secondary); }
.geekpi-fact-owner .avatar { width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; }
.geekpi-problem-aside .section.side.section--problem-sidebar::before { content: '练习工具'; display: block; padding: 18px 20px 0; color: var(--geekpi-text); font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: -.2px; }
.geekpi-problem-aside .section.side.section--problem-sidebar > div > .menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 16px; margin: 0; }
.geekpi-problem-aside .section.side.section--problem-sidebar .menu__item { min-width: 0; margin: 0; }
.geekpi-problem-aside .menu__item:has(> [name="problem-sidebar__open-scratchpad"]) { display: none; }
.geekpi-problem-aside .section.side.section--problem-sidebar .menu__link { display: flex; align-items: center; justify-content: flex-start; gap: 7px; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 10px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--geekpi-text-secondary); font: inherit; font-size: 13px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; transition: color .15s, background .15s; }
.geekpi-problem-aside .section.side.section--problem-sidebar .menu__link .icon { flex: 0 0 14px; width: 14px; min-width: 14px; margin: 0; color: var(--geekpi-text-muted); font-size: 14px; text-align: center; }
.geekpi-problem-aside .section.side.section--problem-sidebar .menu__link:hover { background: var(--geekpi-surface-hover); color: var(--geekpi-text); text-decoration: none; }
.geekpi-problem-aside .section.side.section--problem-sidebar .menu__item.scratchpad--hide { grid-column: 1 / -1; }
.geekpi-problem-aside .section.side.section--problem-sidebar .scratchpad--hide > .menu__link { justify-content: center; min-height: 44px; padding: 11px 14px; border-color: var(--geekpi-primary); border-radius: 8px; background: var(--geekpi-primary); color: var(--geekpi-surface); font-size: 14px; font-weight: 600; }
.geekpi-problem-aside .section.side.section--problem-sidebar .scratchpad--hide > .menu__link .icon { color: inherit; }
.geekpi-problem-aside .section.side.section--problem-sidebar .scratchpad--hide > .menu__link::after { content: '→'; margin-left: auto; font-size: 16px; }
.geekpi-problem-aside .section.side.section--problem-sidebar .scratchpad--hide > .menu__link:hover { background: var(--geekpi-primary-hover); }
.geekpi-problem-aside .section.side.section--problem-sidebar .menu__link.disabled { opacity: .5; cursor: not-allowed; }
.geekpi-problem-aside .section.side.section--problem-sidebar .menu__seperator { grid-column: 1 / -1; width: 100%; height: 0; margin: 8px 0; border: 0; border-top: 1px solid var(--geekpi-border); }
.geekpi-problem-aside .section.side.section--problem-sidebar .menu__item:has([name="problem-sidebar__rejudge"]) { grid-column: 1 / -1; }
.geekpi-problem-aside .section.side.section--problem-sidebar [name="problem-sidebar__rejudge"] { justify-content: center; min-height: 32px; color: var(--geekpi-text-muted); font-size: 12px; }
.geekpi-problem-aside .section.side.section--problem-sidebar [name="problem-sidebar__rejudge"] .icon { color: inherit; font-size: 12px; }
.geekpi-problem-aside :is(a, button):focus-visible { outline: 2px solid var(--geekpi-primary); outline-offset: 3px; }
@media (max-width: 760px) {
 .geekpi-problem-info .geekpi-topic-list a { min-height: 36px; font-size: 12px; }
 .geekpi-problem-aside .section.side.section--problem-sidebar .menu__link { min-height: 44px; font-size: 13px; }
}

html.page--problem_detail .mode--scratchpad .scratchpad-container { background: var(--geekpi-surface); }
html.page--problem_detail .mode--scratchpad .scratchpad__problem { background: var(--geekpi-surface); color: var(--geekpi-text); }
html.page--problem_detail .mode--scratchpad .problem-content > .section__header { display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; padding: 22px 24px 12px; border-bottom: 1px solid var(--geekpi-border); }
html.page--problem_detail .mode--scratchpad .problem-content .section__title { font-size: 23px; line-height: 1.5; font-weight: 700; color: var(--geekpi-text); }
html.page--problem_detail .mode--scratchpad .problem-content .section__body { padding: 20px 24px; font-size: 16px; line-height: 1.85; }
html.page--problem_detail .mode--scratchpad .problem-content .typo h2 { font-size: 21px; color: var(--geekpi-text); }
.geekpi-ide-exit { flex: 0 0 auto; font-size: 13px; color: var(--geekpi-primary); line-height: 2; }
html.page--problem_detail .mode--scratchpad .scratchpad__toolbar { background: var(--geekpi-surface-hover); border-bottom: 1px solid var(--geekpi-border); padding: 10px; }
html.page--problem_detail .mode--scratchpad .scratchpad__toolbar__button { color: var(--geekpi-text-secondary); font-size: 13px; border-radius: var(--geekpi-radius-sm); }
html.page--problem_detail .mode--scratchpad .scratchpad__toolbar__button.enabled:hover { color: var(--geekpi-primary); background: var(--geekpi-primary-light); }
html.page--problem_detail .mode--scratchpad .scratchpad__panel-title { background: var(--geekpi-surface-hover); color: var(--geekpi-text); border-bottom: 1px solid var(--geekpi-border); font-size: 13px; padding: 3px 10px; }
html.page--problem_detail .mode--scratchpad .scratchpad__tablist { background: var(--geekpi-surface-hover); }

@media (max-width: 1000px) {
  .geekpi-problem-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; }
}

@media (max-width: 760px) {
  .geekpi-problem-layout { display: flex; flex-direction: column; width: calc(100% - 24px); gap: 16px; }
  .geekpi-problem-heading > .section__header { padding: 0 0 10px; }
  .geekpi-problem-heading .section__title { font-size: 22px; }
  .geekpi-problem-heading > .section__body { padding: 0; }
  .geekpi-problem-tabs { padding: 0 18px; gap: 20px; }
  .geekpi-problem-statement .section__body { padding: 18px; }
  .geekpi-problem-layout .typo { font-size: 15px; }
  .geekpi-problem-layout .typo h2 { font-size: 19px; }
  .geekpi-problem-aside { width: 100%; }
  .geekpi-ide-exit { max-width: 85px; white-space: normal; }
}

/* GeekPi OJ sample actions stay above the data instead of covering it. */
html.page--problem_detail .problem-content .sample {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
}
html.page--problem_detail .problem-content .sample > h2 { margin: 0; font-size: 14px; color: var(--geekpi-text-secondary); }
html.page--problem_detail .problem-content .sample > pre { grid-column: 1 / -1; margin: 0; min-width: 0; }
.geekpi-sample-actions { display: flex; align-items: center; gap: 6px; }
html.page--problem_detail .geekpi-sample-actions .toolbar { position: static !important; padding: 0; background: transparent; display: flex; }
html.page--problem_detail .geekpi-sample-actions .scratchpad-fill-button { display: none; }
html.page--problem_detail .geekpi-sample-actions .toolbar-item a,
.geekpi-sample-run {
  display: inline-flex;
  padding: 4px 8px;
  border: 1px solid var(--geekpi-primary) !important;
  border-radius: var(--geekpi-radius-sm) !important;
  font-size: 13px !important;
  line-height: 1.4;
  color: var(--geekpi-primary);
  background: var(--geekpi-surface) !important;
  cursor: pointer;
  white-space: nowrap;
}
.geekpi-sample-run { display: none; }
.mode--scratchpad .geekpi-sample-run { display: inline-flex; }
.geekpi-sample-run:focus-visible { outline: 2px solid var(--geekpi-primary); outline-offset: 2px; }
.geekpi-sample-result { grid-column: 1 / -1; font-size: 13px; line-height: 1.6; color: var(--geekpi-text-secondary); }
.geekpi-sample-result:empty { display: none; }
html.page--problem_detail .mode--scratchpad .scratchpad__toolbar { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 12px 14px; }
html.page--problem_detail .mode--scratchpad .scratchpad__toolbar__item { flex: 0 0 auto; margin-right: 0; white-space: nowrap; }
html.page--problem_detail .mode--scratchpad .scratchpad__toolbar__button > div { white-space: nowrap; }
html.page--problem_detail .mode--scratchpad .scratchpad__toolbar .select { min-width: 120px; max-width: 190px; }
.geekpi-data-pane { display: flex; flex-direction: column; min-height: 0; }
.geekpi-data-label { flex: 0 0 auto; padding: 6px 10px; font-size: 13px; color: var(--geekpi-text-secondary); background: var(--geekpi-surface-hover); border-bottom: 1px solid var(--geekpi-border); }
.geekpi-data-pane > .scratchpad__data-input { flex: 1; min-height: 0; height: auto; }
/* Hydro hotkeys only invoke visible controls; keep native F9 and Alt+Q entries reachable. */
.geekpi-input-run { float: right; border: 0; padding: 0 4px; color: var(--geekpi-primary); background: transparent; cursor: pointer; font: inherit; }

/* GeekPi OJ uses distinct judge colors for each status. */
.geekpi-status-badge,
.geekpi-sample-result { --geekpi-status-color: #64748b; --geekpi-status-ink: #fff; }
[data-status="AC"] { --geekpi-status-color: #52c41a; --geekpi-status-ink: #153b06; }
[data-status="CE"] { --geekpi-status-color: #fadb14; --geekpi-status-ink: #443800; }
[data-status="PC"] { --geekpi-status-color: #f39c11; --geekpi-status-ink: #432700; }
[data-status="WA"] { --geekpi-status-color: #e74c3c; --geekpi-status-ink: #fff; }
[data-status="RE"] { --geekpi-status-color: #9d3dcf; --geekpi-status-ink: #fff; }
[data-status="TLE"], [data-status="MLE"], [data-status="OLE"] { --geekpi-status-color: #052242; --geekpi-status-ink: #fff; }
[data-status="UKE"], [data-status="SE"] { --geekpi-status-color: #0e1d69; --geekpi-status-ink: #fff; }
.geekpi-status-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--geekpi-status-color);
  color: var(--geekpi-status-ink);
  font-weight: 700;
  line-height: 1.5;
  vertical-align: middle;
}
.geekpi-sample-result:not(:empty) {
  border-left: 4px solid var(--geekpi-status-color);
  padding: 4px 10px;
  background: var(--geekpi-surface-hover);
  color: var(--geekpi-text);
  font-weight: 600;
}

/* A calm blue reading surface, shared by the statement and IDE. */
.geekpi-problem-layout .geekpi-problem-heading {overflow:hidden;background:transparent;border:0;border-radius:0;position:relative}
.geekpi-problem-heading .section__title {letter-spacing:-.35px;color:var(--geekpi-text)}
.geekpi-problem-heading .problem__tags {align-items:center}
.geekpi-problem-heading .problem__tag-item.tags {padding:3px 9px;border:1px solid #d6e9f7;border-radius:6px;background:var(--geekpi-primary-light);color:var(--geekpi-primary-hover)}
.geekpi-problem-summary {display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:0;background:rgba(255,255,255,.95);border:1px solid #d7e7f5;border-radius:12px;margin-top:18px;overflow:hidden;min-width:0}
.geekpi-problem-summary > div {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:17px 10px;text-align:center;position:relative}
.geekpi-problem-summary > div + div::before {content:'';position:absolute;left:0;top:22%;height:56%;border-left:1px solid #e1edf7}
.geekpi-problem-summary span {font-size:12px;color:#66819a}
.geekpi-problem-summary strong {font-size:20px;font-weight:700;line-height:1.3;color:#143a5d;font-variant-numeric:tabular-nums}
.geekpi-problem-summary small {font-size:12px;font-weight:500;color:#66819a;margin-left:3px}
.geekpi-problem-summary em {font-size:11px;font-style:normal;color:#7c90a3}
.geekpi-problem-statement {overflow:hidden}
.geekpi-problem-tabs {background:#fbfdff;gap:22px;align-items:center}
.geekpi-problem-tabs .geekpi-problem-tab {white-space:nowrap;font-size:14px}
.geekpi-problem-statement .typo {color:#344b60}
.geekpi-problem-statement .typo h1,.geekpi-problem-statement .typo h2,.geekpi-problem-statement .typo h3,
html.page--problem_detail .mode--scratchpad .problem-content .typo h1,
html.page--problem_detail .mode--scratchpad .problem-content .typo h2,
html.page--problem_detail .mode--scratchpad .problem-content .typo h3 {border-left:4px solid #00abe0;padding-left:12px;font-weight:700;color:#173d5b;font-size:19px;line-height:1.5;margin-top:28px;margin-bottom:14px}
html.page--problem_detail .problem-content .typo {color:#344b60}
html.page--problem_detail .problem-content .typo pre {border:1px solid #deebf5;border-radius:10px;background:#f5f9fd;padding:16px 18px;color:#244560;font-size:14px;line-height:1.7}
html.page--problem_detail .problem-content .typo table {border:1px solid #e0eaf3;border-radius:8px;max-width:100%}
html.page--problem_detail .problem-content .typo th {background:#edf6fc;color:#294d69;font-weight:600}
html.page--problem_detail .problem-content .typo td,html.page--problem_detail .problem-content .typo th {padding:10px 14px;border-color:#e0eaf3}
html.page--problem_detail .problem-content .typo :not(pre)>code {color:#087ea4;background:#ecf6fc;border-radius:4px;padding:2px 5px}
html.page--problem_detail .problem-content .typo blockquote {border-left-color:#21a7dc;background:#f0f8ff;border-radius:0 8px 8px 0}
html.page--problem_detail .mode--scratchpad .scratchpad__problem {background:#edf4fa}
html.page--problem_detail .mode--scratchpad .problem-content > .section__header {flex-wrap:wrap;gap:10px 14px;padding:22px 24px;background:linear-gradient(125deg,#e9f6ff,#f6fbff);border-bottom:1px solid #d9e9f5}
html.page--problem_detail .mode--scratchpad .problem-content > .section__header .section__title {flex:1 1 100%;font-size:22px;color:#173d5b}
html.page--problem_detail .mode--scratchpad .problem-content > .section__header .geekpi-problem-summary {flex:1 1 100%;margin-top:4px}
.geekpi-ide-title-meta {display:flex;align-items:center;gap:10px;flex:1 1 100%;font-size:12px;color:#71869b}
html.page--problem_detail .mode--scratchpad .problem-content .section__body {background:#fff;margin:14px 14px 0;padding:22px;border:1px solid #e1eaf3;border-radius:12px;font-size:15px;line-height:1.9}
html.page--problem_detail .problem-content .sample > h2 {border-left:0;padding-left:0;font-size:15px;font-weight:600;color:#27516f}
@media(max-width:1000px) {.geekpi-problem-tabs {gap:15px;flex-wrap:wrap}.geekpi-problem-tabs .geekpi-copy-markdown {margin-left:0}}
@media(max-width:760px) {
 .geekpi-problem-summary {grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}
 .geekpi-problem-summary > div {padding:14px 6px}
 .geekpi-problem-summary strong {font-size:17px}
 .geekpi-problem-tabs {gap:14px}
 html.page--problem_detail .mode--scratchpad .problem-content .section__body {padding:16px;margin:10px 8px 0}
}
.geekpi-problem-heading .problem__tag-item {border:0;background:transparent;padding:0;color:var(--geekpi-text-secondary)}

/* Problem reading polish: a compact title, one source for each statistic, and clear type rhythm. */
.geekpi-problem-heading .geekpi-problem-summary { display: none; }
.geekpi-problem-layout .geekpi-problem-tabs { gap: 4px 20px; padding: 8px 24px 0; background: var(--geekpi-surface); }
.geekpi-problem-tabs .geekpi-problem-tab { min-height: 44px; box-sizing: border-box; align-items: center; padding: 10px 0; color: var(--geekpi-text-secondary); font-size: 13px; font-weight: 500; }
.geekpi-problem-tabs .geekpi-problem-tab--active { color: var(--geekpi-primary); font-weight: 600; }
.geekpi-problem-tabs [name="problem-sidebar__open-scratchpad"] { margin: 0 0 8px auto; padding: 10px 12px; border: 1px solid var(--geekpi-border); border-radius: 6px; color: var(--geekpi-primary); }
.geekpi-problem-tabs [name="problem-sidebar__open-scratchpad"]:hover { border-color: var(--geekpi-primary); background: var(--geekpi-primary-light); }
.geekpi-problem-tabs :is(a,button):focus-visible, .geekpi-problem-heading a:focus-visible { outline: 2px solid var(--geekpi-primary); outline-offset: 3px; }
.geekpi-problem-statement .section__body { padding: 28px 32px 32px; }
html.page--problem_detail .geekpi-problem-statement .problem-content .typo { color: var(--geekpi-text); line-height: 1.9; overflow-wrap: anywhere; max-width: 75ch; margin-inline: auto; }
html.page--problem_detail .geekpi-problem-statement .typo :is(h1,h2,h3) { border: 0; padding-left: 0; color: var(--geekpi-text); font-size: 20px; font-weight: 600; margin: 32px 0 12px; text-wrap: balance; }
html.page--problem_detail .geekpi-problem-statement .typo > :first-child { margin-top: 0; }
html.page--problem_detail .geekpi-problem-statement .problem-content .typo pre { background: var(--geekpi-surface-hover); border-color: var(--geekpi-border); color: var(--geekpi-text); border-radius: 8px; scrollbar-color: var(--geekpi-text-muted) var(--geekpi-surface-hover); }
html.page--problem_detail .geekpi-problem-statement .typo :not(pre) > code { color: var(--geekpi-primary-hover); background: var(--geekpi-primary-light); }
html.page--problem_detail .geekpi-problem-statement .typo :is(td,th) { border-color: var(--geekpi-border); }
html.page--problem_detail .geekpi-problem-statement .typo th { color: var(--geekpi-text); background: var(--geekpi-surface-hover); }
.geekpi-problem-layout ::selection { color: var(--geekpi-text); background: var(--geekpi-primary-light); }
.geekpi-problem-layout a { text-underline-offset: 3px; }
html.page--problem_detail .geekpi-problem-statement .geekpi-sample-actions .toolbar-item a { display: inline-flex; align-items: center; min-height: 36px; box-sizing: border-box; }
.geekpi-problem-aside .section.side.section--problem-sidebar .scratchpad--hide > .menu__link { color: #fff; }
.theme--dark .geekpi-problem-aside .section.side.section--problem-sidebar .scratchpad--hide > .menu__link { color: var(--geekpi-bg); }
html.page--problem_detail .geekpi-problem-statement .typo pre code { background: transparent; color: inherit; }
@media (max-width: 1000px) and (min-width: 761px) {
 .geekpi-problem-layout { grid-template-columns: minmax(0, 1fr) 240px; }
 .geekpi-problem-layout .geekpi-problem-tabs { gap: 4px 16px; padding-inline: 20px; }
 .geekpi-problem-statement .section__body { padding: 24px; }
}
@media (max-width: 760px) {
 .geekpi-problem-heading .geekpi-problem-summary { display: grid; border: 0; border-radius: 0; border-top: 1px solid var(--geekpi-border); background: transparent; margin-top: 16px; }
 .geekpi-problem-heading .geekpi-problem-summary :is(span,small,em) { color: var(--geekpi-text-secondary); }
 .geekpi-problem-heading .geekpi-problem-summary strong { color: var(--geekpi-text); }
 .geekpi-problem-heading .geekpi-problem-summary > div + div::before { border-color: var(--geekpi-border); }
 .geekpi-problem-info :is(.geekpi-fact-performance,.geekpi-fact-limits,.geekpi-fact-overview) { display: none; }
 .geekpi-fact-topics { margin-top: 0; }
 .geekpi-problem-layout .geekpi-problem-tabs { gap: 0 16px; padding: 8px 18px 0; }
 .geekpi-problem-tabs [name="problem-sidebar__open-scratchpad"] { margin-left: 0; }
 .geekpi-problem-statement .section__body { padding: 24px 20px; }
 html.page--problem_detail .geekpi-problem-statement .typo :is(h1,h2,h3) { font-size: 19px; }
 html.page--problem_detail .geekpi-problem-statement .geekpi-sample-actions .toolbar-item a { min-height: 44px; }
}

/* Clear input/output headers and a prominent self-test action. */
html.page--problem_detail .geekpi-data-label {
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  min-height:44px;box-sizing:border-box;padding:7px 12px;
  font-size:14px;font-weight:700;line-height:1.5;color:#244963;
  background:#edf6fc;border-bottom:1px solid #d7e7f3;
}
html.page--problem_detail .geekpi-input-run {
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  float:none;margin-left:auto;min-height:30px;padding:5px 15px;
  border:1px solid #009fe0;border-radius:7px;
  background:linear-gradient(120deg,#00abe5,#008cdb);color:#fff;
  font-size:13px;font-weight:700;line-height:1.4;white-space:nowrap;
  box-shadow:0 2px 5px #009de222;transition:background .15s,box-shadow .15s;
}
html.page--problem_detail .geekpi-input-run::before {content:'▶';font-size:10px}
html.page--problem_detail .geekpi-input-run:hover {background:#008acb;border-color:#008acb;box-shadow:0 3px 7px #009de233}
html.page--problem_detail .geekpi-input-run:active {box-shadow:none}
html.page--problem_detail .geekpi-input-run:focus-visible {outline:2px solid #007bbd;outline-offset:3px}
html.page--problem_detail .geekpi-data-label .geekpi-status-badge {margin-left:0;font-size:12px}
html.page--problem_detail .mode--scratchpad .scratchpad__panel-title {font-weight:700;color:#244963}

/* Keep the editor entry distinct from the statement navigation. */
.geekpi-problem-layout .geekpi-problem-tabs { gap: 8px 12px; padding-bottom: 8px; }
.geekpi-problem-tabs .geekpi-problem-tab { padding: 10px 12px; border: 1px solid var(--geekpi-border); border-radius: 8px; background: var(--geekpi-surface); }
.geekpi-problem-tabs .geekpi-problem-tab--active,
.geekpi-problem-tabs .geekpi-copy-markdown { background: var(--geekpi-primary-light); border-color: transparent; color: var(--geekpi-primary); font-weight: 600; }
.geekpi-problem-tabs a.geekpi-problem-tab:hover, .geekpi-problem-tabs button.geekpi-problem-tab:hover { color: var(--geekpi-primary); background: var(--geekpi-primary-light); border-color: var(--geekpi-primary); text-decoration: none; }
.geekpi-problem-tabs [name="problem-sidebar__open-scratchpad"].geekpi-start-coding { margin: 0 0 0 auto; gap: 8px; padding: 11px 16px; min-height: 44px; border-color: var(--geekpi-primary); background: var(--geekpi-primary); color: #fff; font-size: 14px; font-weight: 600; }
.geekpi-problem-tabs [name="problem-sidebar__open-scratchpad"].geekpi-start-coding:hover { background: var(--geekpi-primary-hover); border-color: var(--geekpi-primary-hover); color: #fff; }
.geekpi-start-coding svg { flex-shrink: 0; }
.geekpi-start-coding kbd { font-family: inherit; font-size: 11px; line-height: 1.4; opacity: .9; border-left: 1px solid currentColor; padding-left: 8px; }
.theme--dark .geekpi-problem-tabs [name="problem-sidebar__open-scratchpad"].geekpi-start-coding { color: var(--geekpi-bg); }
@media (max-width:760px) { .geekpi-problem-tabs [name="problem-sidebar__open-scratchpad"].geekpi-start-coding { margin-left: 0; } }

.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; }
}

/* GeekPi OJ record details retain Hydro's live status and permission boundaries. */
.geekpi-record-page { max-width: var(--geekpi-container-width); margin: 0 auto; width: calc(100% - 40px); }
.geekpi-record-page .section { border: 1px solid var(--geekpi-border); border-radius: var(--geekpi-radius-md); background: var(--geekpi-surface); box-shadow: none; overflow: hidden; }
.geekpi-record-heading { margin-bottom: 20px; }
.geekpi-record-page .geekpi-record-heading > .section__header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; padding: 24px; }
.geekpi-record-heading .section__title { font-size: 22px; line-height: 1.4; margin: 0; }
.geekpi-record-identity { flex: 1 1 320px; min-width: 0; }
.geekpi-record-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.geekpi-record-result { font-size: 14px; line-height: 1.5; }
.geekpi-record-problem { margin-top: 10px; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.geekpi-record-id { margin: 6px 0 0; color: var(--geekpi-text-secondary); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.geekpi-record-page .geekpi-record-resume { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 14px; margin: 14px 0 0; font-size: 14px; line-height: 1.5; box-sizing: border-box; }
.geekpi-record-page .geekpi-record-resume[hidden] { display: none; }
.geekpi-record-id span { font-family: var(--code-font-family, monospace); }
.geekpi-record-page :is(a, button, summary, pre):focus-visible { outline: 2px solid var(--geekpi-primary); outline-offset: -3px; }
.geekpi-record-page ::selection { background: var(--geekpi-primary-light); color: var(--geekpi-text); }
.geekpi-record-metrics { display: flex; gap: 12px 24px; flex-wrap: wrap; font-size: 13px; text-align: left; font-variant-numeric: tabular-nums; }
.geekpi-record-metrics span, .geekpi-record-metrics strong { display: block; }
.geekpi-record-metrics span { color: var(--geekpi-text-secondary); margin-bottom: 5px; }
.geekpi-record-tabs { display: flex; padding: 0 24px; gap: 24px; }
.geekpi-record-tab { border: 0; border-bottom: 3px solid transparent; padding: 14px 8px; font: inherit; color: var(--geekpi-text-secondary); background: transparent; cursor: pointer; }
.geekpi-record-tab.is-active { color: var(--geekpi-primary); border-bottom-color: var(--geekpi-primary); }
.geekpi-record-page .geekpi-record-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; width: 100%; margin: 0; align-items: start; }
.geekpi-record-layout > .geekpi-record-main,
.geekpi-record-layout > .geekpi-record-aside { float: none; width: auto; padding: 0; min-width: 0; }
.geekpi-record-cases { padding: 22px; }
.geekpi-record-cases h2 { font-size: 18px; font-weight: 700; margin: 0 0 16px; }
.geekpi-case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 9px; }
.geekpi-case-item { min-width: 0; }
.geekpi-case-downloads { padding: 6px 0; }
.geekpi-case-download-button, .geekpi-case-download-links a { display: inline-block; border: 1px solid var(--geekpi-border); border-radius: 4px; padding: 4px 6px; color: var(--geekpi-primary); background: var(--geekpi-surface); cursor: pointer; font: inherit; font-size: 12px; }
.geekpi-case-download-links { display: flex; flex-wrap: wrap; gap: 5px; }
.geekpi-case-download-note { font-size: 11px; line-height: 1.5; color: var(--geekpi-text-secondary); overflow-wrap: anywhere; margin: 5px 0 0; }
.geekpi-case-download-note:empty { display: none; }
.geekpi-case-card { display: flex; min-height: 108px; flex-direction: column; justify-content: space-between; padding: 10px; border-radius: 5px; background: #19578e; color: #fff !important; text-decoration: none !important; transition: transform .15s; }
.geekpi-case-card:hover { transform: translateY(-2px); }
.geekpi-case-card:focus-visible { outline: 3px solid var(--geekpi-primary); outline-offset: 3px; }
.geekpi-case-card strong { text-align: center; font-size: 22px; }
.geekpi-case-number { font-size: 11px; }
.geekpi-case-cost { text-align: center; font-size: 11px; }
.geekpi-case-card[data-case-status="1"] { background: #52c41a; color: #153b06 !important; }
.geekpi-case-card[data-case-status="2"] { background: #e74c3c; }
.geekpi-case-card[data-case-status="7"] { background: #fadb14; color: #443800 !important; }
.geekpi-case-card[data-case-status="6"] { background: #9d3dcf; }
.geekpi-case-card[data-case-status="3"], .geekpi-case-card[data-case-status="4"], .geekpi-case-card[data-case-status="5"] { background: #052242; }
.geekpi-case-card[data-case-status="8"], .geekpi-case-card[data-case-status="10"] { background: #0e1d69; }
.geekpi-case-card[data-case-status="9"], .geekpi-case-card[data-case-status="30"] { background: #64748b; }
.geekpi-case-empty { color: var(--geekpi-text-secondary); padding: 18px 0; }
.geekpi-record-case-details { border-top: 1px solid var(--geekpi-border); }
.geekpi-record-case-details > summary { padding: 16px 22px; cursor: pointer; color: var(--geekpi-primary); font-weight: 600; }
.geekpi-record-case-details .section__body { overflow-x: auto; }
.geekpi-record-page .geekpi-record-aside .section.side { padding: 0; }
.geekpi-record-page .geekpi-record-aside .section__header { padding: 16px 20px; }
.geekpi-record-page .geekpi-record-aside .section__title { font-size: 16px; }
.geekpi-record-page .geekpi-record-aside .section__body { padding: 18px 20px; }
.geekpi-record-page .geekpi-record-aside dl.horizontal { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px 14px; margin: 0; padding: 0; font-size: 13px; line-height: 1.6; }
.geekpi-record-page .geekpi-record-aside dl.horizontal dt { float: none; width: auto; margin: 0; color: var(--geekpi-text-secondary); }
.geekpi-record-page .geekpi-record-aside dl.horizontal dd { margin: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
.geekpi-record-aside .user-profile-name { white-space: normal; }
.geekpi-record-summary-title { margin: 20px 0 12px; padding-top: 16px; border-top: 1px solid var(--geekpi-border); font-size: 13px; font-weight: 600; }
.geekpi-record-management { border-top: 1px solid var(--geekpi-border); }
.geekpi-record-management summary { padding: 14px 20px; color: var(--geekpi-text-secondary); cursor: pointer; font-size: 13px; }
.geekpi-record-management .menu { margin: 0 10px 10px; }
.geekpi-record-page .geekpi-record-code > .section__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 20px; }
.geekpi-record-page .geekpi-record-code .section__title { margin: 0; font-size: 17px; }
.geekpi-record-page .geekpi-record-code .section__tools { position: static; display: flex; flex-wrap: wrap; gap: 8px; transform: none; }
.geekpi-record-page .geekpi-record-code .button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin: 0; padding: 0 14px; background: var(--geekpi-surface); color: var(--geekpi-primary); border: 1px solid var(--geekpi-border); border-radius: 6px; box-shadow: none; font-size: 13px; line-height: 1.5; }
.geekpi-record-page .geekpi-record-code .button:hover { background: var(--geekpi-primary-light); border-color: var(--geekpi-primary); }
.geekpi-record-page .geekpi-record-code > .section__body { padding: 0; }
.geekpi-record-code .code-toolbar { min-width: 0; }
.geekpi-record-code .toolbar { display: none; }
.geekpi-record-code pre[class*="language-"] { margin: 0; border: 0; border-radius: 0; padding: 20px 24px 24px 4.2em; max-height: 72vh; overflow: auto; font-size: 15px; line-height: 1.75; tab-size: 4; scrollbar-color: var(--geekpi-border) var(--geekpi-surface); }
.geekpi-record-code pre[class*="language-"], .geekpi-record-code code[class*="language-"] { font-family: Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-weight: 600; }
.geekpi-record-code pre[class*="language-"] code { line-height: inherit; background: transparent; }
.geekpi-record-code .line-numbers-rows { font-weight: 400; }
.geekpi-record-code .line-numbers-rows > span::before { color: var(--geekpi-text-secondary); }
.geekpi-record-code .line-numbers-rows { border-right-color: var(--geekpi-border); }
.geekpi-record-case-details .data-table { min-width: 520px; }
.geekpi-record-cases :is(.compiler-text, .judge-text), .geekpi-record-main :is(.compiler-text, .judge-text) { max-width: 100%; overflow: auto; }

.geekpi-record-code[hidden], [data-record-panel][hidden] { display: none !important; }
.geekpi-ac-celebration { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; overflow: hidden; background: rgb(7 24 48 / 55%); backdrop-filter: blur(4px); }
.geekpi-ac-card { position: relative; z-index: 2; width: min(1100px, calc(100vw - 32px)); box-sizing: border-box; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 12px 0 20px; text-align: center; color: #fff; animation: geekpi-ac-enter .55s cubic-bezier(.16,1,.3,1); }
.geekpi-ac-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.geekpi-ac-banner { display: block; width: 100%; height: auto; max-height: calc(100dvh - 112px); object-fit: contain; margin: 0 auto 22px; filter: drop-shadow(0 12px 24px rgb(0 133 230 / 28%)); animation: geekpi-ac-banner-float 2.4s .55s ease-in-out 2; }
.geekpi-ac-close { border: 1px solid rgb(128 224 255 / 80%); border-radius: 999px; padding: 11px 30px; background: linear-gradient(135deg,#009dcc,#087bb9); color: #fff; box-shadow: 0 6px 24px rgb(0 136 211 / 28%); font: inherit; font-weight: 600; cursor: pointer; }
.geekpi-ac-close:hover { background: #0087b6; }
.geekpi-ac-close:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@keyframes geekpi-ac-banner-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.geekpi-ac-particle { position: absolute; z-index: 1; top: -40px; left: var(--x); color: var(--color); font: 700 23px monospace; pointer-events: none; animation: geekpi-ac-fall var(--duration) var(--delay) linear both; }
@keyframes geekpi-ac-fall { from { transform: translate3d(0,-20px,0) rotate(0); opacity: 1; } to { transform: translate3d(var(--drift),110vh,0) rotate(550deg); opacity: 0; } }
@keyframes geekpi-ac-enter { from { opacity: 0; transform: scale(.8) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@media (max-width: 1000px) {
  .geekpi-record-page .geekpi-record-layout { grid-template-columns: minmax(0, 1fr); }
  .geekpi-record-page .geekpi-record-aside dl.horizontal { grid-template-columns: 80px minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .geekpi-record-page { width: calc(100% - 24px); }
  .geekpi-record-identity { flex-basis: 100%; }
  .geekpi-record-metrics { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
  .geekpi-record-heading > .section__header { padding: 18px; }
  .geekpi-record-tabs { padding: 0 14px; }
  .geekpi-record-cases { padding: 18px; }
  .geekpi-record-code pre[class*="language-"] { font-size: 14px; padding-right: 18px; }
  .geekpi-record-page .geekpi-record-code > .section__header { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) { .geekpi-ac-particle { display: none; } .geekpi-ac-card, .geekpi-ac-banner { animation: none; } .geekpi-case-card { transition: none; } }

/* GeekPi OJ editor controls use the existing submission action and state. */
html.page--problem_detail .scratchpad__toolbar .scratchpad__toolbar__submit {
  color: #fff;
  background: #009fe8;
  border: 1px solid #009fe8;
  border-radius: 7px;
  padding: 8px 14px;
  font-weight: 700;
}
html.page--problem_detail .scratchpad__toolbar .scratchpad__toolbar__submit.enabled:hover {
  color: #fff;
  background: #0086c4;
  border-color: #0086c4;
}
html.page--problem_detail .scratchpad__toolbar .scratchpad__toolbar__submit:focus-visible,
.geekpi-editor-font button:focus-visible,
.geekpi-editor-font select:focus-visible { outline: 2px solid #009fe8; outline-offset: 2px; }
.geekpi-editor-font { display: flex; align-items: center; gap: 5px; margin-left: auto; white-space: nowrap; }
.geekpi-editor-font button, .geekpi-editor-font select {
  border: 1px solid var(--geekpi-border);
  border-radius: 5px;
  background: var(--geekpi-surface);
  color: var(--geekpi-text);
  padding: 5px 7px;
  font: inherit;
  cursor: pointer;
}
.geekpi-editor-font button { font-weight: 700; min-width: 32px; }
.geekpi-editor-font button:disabled { opacity: .4; cursor: default; }
.geekpi-editor-font label { display: flex; align-items: center; gap: 4px; font-size: 12px; }

/* Keep panel actions visually distinct from submission. */
html:is(.page--problem_detail, .page--geekpi_online_editor) :is(.mode--scratchpad, .geekpi-online-editor) .scratchpad__toolbar {background:#f4f9fd;border-bottom:1px solid #dce9f4;gap:8px;padding:12px 14px;box-shadow:0 2px 7px #123b5c08}
html:is(.page--problem_detail, .page--geekpi_online_editor) :is(.mode--scratchpad, .geekpi-online-editor) .scratchpad__toolbar__button {min-height:36px;padding:7px 12px;border:1px solid #d4e3ef;border-radius:8px;background:#fff;color:#385772;font-weight:600;font-size:13px;line-height:1.4;transition:background .16s,border-color .16s,box-shadow .16s}
html:is(.page--problem_detail, .page--geekpi_online_editor) :is(.mode--scratchpad, .geekpi-online-editor) .scratchpad__toolbar__button .icon {color:#3989b4;margin-right:3px}
html:is(.page--problem_detail, .page--geekpi_online_editor) :is(.mode--scratchpad, .geekpi-online-editor) .scratchpad__toolbar__button.enabled:hover {background:#eaf6ff;border-color:#93cbed;box-shadow:0 2px 5px #078bd114;color:#087caf}
html:is(.page--problem_detail, .page--geekpi_online_editor) :is(.mode--scratchpad, .geekpi-online-editor) .scratchpad__toolbar__button.activated {background:#dff3ff !important;color:#0877aa !important;border-color:#51b4e1;box-shadow:inset 0 -2px #08a8de}
html:is(.page--problem_detail, .page--geekpi_online_editor) :is(.mode--scratchpad, .geekpi-online-editor) .scratchpad__toolbar__button.disabled {opacity:.45;cursor:not-allowed}
html:is(.page--problem_detail, .page--geekpi_online_editor) :is(.mode--scratchpad, .geekpi-online-editor) .scratchpad__toolbar__button:focus-visible {outline:2px solid #00a6de;outline-offset:2px}
html:is(.page--problem_detail, .page--geekpi_online_editor) :is(.mode--scratchpad, .geekpi-online-editor) .scratchpad__toolbar .scratchpad__toolbar__submit {background:linear-gradient(120deg,#00abe5,#008cdb);border-color:#009de2;color:#fff;padding:8px 15px;box-shadow:0 3px 8px #009de224}
html:is(.page--problem_detail, .page--geekpi_online_editor) :is(.mode--scratchpad, .geekpi-online-editor) .scratchpad__toolbar .scratchpad__toolbar__submit .icon {color:#fff}
html:is(.page--problem_detail, .page--geekpi_online_editor) :is(.mode--scratchpad, .geekpi-online-editor) .scratchpad__toolbar .scratchpad__toolbar__submit.enabled:hover {background:#008acb;border-color:#008acb;color:#fff}
html:is(.page--problem_detail, .page--geekpi_online_editor) :is(.mode--scratchpad, .geekpi-online-editor) .scratchpad__toolbar .select,.geekpi-editor-font select {height:36px;border:1px solid #d4e3ef;border-radius:8px;background:#fff;color:#2d4b65;padding:5px 9px;font-size:13px}
.geekpi-editor-font button {height:36px;min-width:36px;border-radius:8px;border-color:#d4e3ef;color:#345775}
.geekpi-editor-font button:hover:not(:disabled) {background:#eaf6ff;border-color:#93cbed}
.geekpi-editor-font {gap:7px;padding-left:10px}
.geekpi-editor-font label {color:#637d92;gap:6px}
html:is(.page--problem_detail, .page--geekpi_online_editor) :is(.mode--scratchpad, .geekpi-online-editor) .scratchpad__toolbar {flex-wrap:wrap;overflow-x:visible;flex:0 0 auto}
html:is(.page--problem_detail, .page--geekpi_online_editor) :is(.mode--scratchpad, .geekpi-online-editor) .scratchpad__toolbar .geekpi-editor-font {flex:0 1 auto;flex-wrap:wrap;padding-left:0;min-width:0}
.geekpi-editor-font [aria-label="代码字体"] {max-width:175px}
html:is(.page--problem_detail, .page--geekpi_online_editor) :is(.mode--scratchpad, .geekpi-online-editor) .scratchpad__toolbar__split {display:none}
.geekpi-editor-settings{box-sizing:border-box;width:540px;max-width:calc(100vw - 32px);border:1px solid var(--geekpi-border);border-radius:14px;padding:24px;background:var(--geekpi-surface);color:var(--geekpi-text);box-shadow:var(--geekpi-shadow-md)}
.geekpi-editor-settings::backdrop{background:#0c1a2b88}.geekpi-editor-settings h2{font-size:20px;margin-bottom:20px}.geekpi-editor-settings>label{display:flex;align-items:center;gap:10px;margin:18px 0}.geekpi-editor-settings select{background:var(--geekpi-surface);color:var(--geekpi-text);border:1px solid var(--geekpi-border);border-radius:6px;padding:6px}.geekpi-editor-settings p{font-size:12px;color:var(--geekpi-text-secondary);margin:20px 0}.geekpi-editor-settings .geekpi-editor-font{flex-wrap:wrap;white-space:normal;margin:0;padding:0}.geekpi-code-italic .view-line span{font-style:italic !important}.geekpi-open-settings{margin-left:auto}
.geekpi-site-theme{margin:7px 5px;background:#173553;color:#def3ff;border:1px solid #456782;border-radius:6px;padding:6px;max-width:110px}
.theme--dark .geekpi-online-heading p{color:var(--geekpi-text-secondary)}.theme--dark #scratchpad.geekpi-online-editor,.theme--dark .scratchpad__toolbar,.theme--dark .geekpi-editor-io h2{background:#1b2d40;color:#d7e7f7;border-color:#34506b}.theme--dark .scratchpad__toolbar .scratchpad__toolbar__button,.theme--dark .scratchpad__toolbar .select{background:#23394e;color:#d7e7f7;border-color:#45637e}.theme--dark .scratchpad__data-input{background:#152332;color:#d7e7f7}
.geekpi-editor-settings>label,.geekpi-editor-settings .geekpi-editor-font label{white-space:nowrap}.geekpi-editor-settings>label{flex-wrap:wrap}.geekpi-editor-settings>label>select{flex:1;min-width:200px}
html.theme--dark #scratchpad .scratchpad__toolbar,html.theme--dark #scratchpad .scratchpad__panel-title,html.theme--dark #scratchpad .geekpi-editor-io h2{background:#1b2d40;color:#d7e7f7;border-color:#34506b}
html.theme--dark #scratchpad .scratchpad__toolbar__button,html.theme--dark #scratchpad .scratchpad__toolbar .select{background:#23394e;color:#d7e7f7;border-color:#45637e}
html.theme--dark #scratchpad .scratchpad__data-input,html.theme--dark #scratchpad .scratchpad__data-input pre{background:#152332;color:#d7e7f7}

/* Reuse the existing scratchpad and its input/output panels without remounting. */
html #scratchpad.geekpi-editor-fullscreen-active { position:fixed!important; inset:0!important; width:100vw!important; height:100vh!important; height:100dvh!important; min-height:0!important; max-height:none!important; margin:0!important; border:0!important; border-radius:0!important; z-index:10000; background:#f8fbfd; }
html.geekpi-editor-is-fullscreen { overflow:hidden; }
html.theme--dark #scratchpad.geekpi-editor-fullscreen-active { background:#152332; }
.geekpi-editor-fullscreen { white-space:nowrap; }

.geekpi-online-heading{padding:24px 0 14px}.geekpi-online-heading h1{font-size:26px;margin:0 0 10px}.geekpi-online-heading p{color:#61758a;line-height:1.7}#scratchpad.geekpi-online-editor{position:relative;top:auto;bottom:auto;height:calc(100vh - 190px);min-height:620px;border:1px solid #d4e3ef;border-radius:12px;overflow:hidden;background:#f8fbfd}.geekpi-online-editor .scratchpad__toolbar{flex-wrap:wrap}.geekpi-online-editor .geekpi-editor-io{display:flex;flex-direction:column;overflow:hidden}.geekpi-editor-io h2{font-size:14px;font-weight:600;background:#edf6fd;padding:10px 14px;margin:0;flex-shrink:0}.geekpi-editor-io>div{flex:1;min-height:0}.geekpi-online-editor .scratchpad__data-input{font-size:14px;line-height:1.6}.geekpi-online-editor .scratchpad__toolbar__pretest{background:#009edb;color:white}.geekpi-online-editor .scratchpad__toolbar__pretest .icon{color:white}@media(max-width:760px){#scratchpad.geekpi-online-editor{height:800px;min-height:0}.geekpi-online-heading{padding-top:18px}.geekpi-online-heading h1{font-size:22px}.geekpi-online-editor .geekpi-editor-font [aria-label="代码字体"]{max-width:145px}}

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; }
.geekpi-hero-slide.is-active { opacity: 1; visibility: visible; }
.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;
  }
}

.page--problem_main { background:#f0f6fc; }
.page--problem_main body { background:linear-gradient(180deg,#dceeff 0,#f1f7fd 380px,#f1f7fd 100%); }
.page--problem_main .geekpi-problem-hero>.columns { display:flex; justify-content:space-between; align-items:center; min-height:170px; position:relative; }
.geekpi-problem-hero h1 { font-size:32px; font-weight:800; color:#122e53; margin:0 0 12px; letter-spacing:1px; }
.geekpi-problem-hero p { font-size:16px; color:#526f91; margin:0; }
.geekpi-problem-hero img { width:280px; height:170px; object-fit:contain; }
.page--problem_main .geekpi-problem-library .section { border-radius:12px; overflow:hidden; box-shadow:0 5px 24px #183e6810; }
.geekpi-problem-filters { display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)) minmax(180px,1.5fr) auto auto; gap:16px; align-items:end; padding:22px 24px 16px; background:#fff; }
.geekpi-problem-filters label { display:flex; flex-direction:column; gap:9px; font-size:13px; font-weight:600; color:#405977; }
.geekpi-problem-filters input,.geekpi-problem-filters select { width:100%; margin:0; height:42px; padding:0 12px; border:1px solid #d7e3f0; border-radius:7px; background:#fbfdff; color:#244565; font-family:inherit; font-size:14px; font-weight:400; box-sizing:border-box; }
.geekpi-problem-filters input:focus,.geekpi-problem-filters select:focus { outline:2px solid #68c7ea; outline-offset:1px; }
.geekpi-problem-search,.geekpi-problem-reset { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 18px; border:0; border-radius:7px; background:#008fc9; color:white; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; }
.geekpi-problem-search:hover { background:#0075aa; }
.geekpi-problem-reset { background:#e8f4fc; color:#007cae; }
.geekpi-problem-reset:hover { background:#d7edf9; text-decoration:none; }
.geekpi-problem-count { display:flex; gap:20px; justify-content:space-between; padding:0 24px 18px; color:#74869b; font-size:12px; }
.geekpi-problem-count p { margin:0; font-weight:600; color:#405977; }
.geekpi-problem-table-scroll { overflow-x:auto; }
.page--problem_main .geekpi-list-table { min-width:1100px; border:0; table-layout:fixed; }
.page--problem_main .geekpi-list-table thead { background:#f3f7fc; color:#345070; }
.page--problem_main .geekpi-list-table th { font-weight:700; font-size:13px; height:48px; }
.page--problem_main .geekpi-list-table td { border:0; border-bottom:1px solid #edf2f8; padding:14px 14px; font-size:14px; line-height:1.6; color:#3e5874; }
.page--problem_main .geekpi-list-table tbody tr { background:#fff; }
.page--problem_main .geekpi-list-table tbody tr:nth-child(even) { background:#fbfdff; }
.page--problem_main .geekpi-list-table tbody tr:hover { background:#edf8fe; }
.page--problem_main .geekpi-list-table .col--name { min-width:240px; width:auto; }
.page--problem_main .geekpi-list-table .col--problem-name>a { color:#0089c2; font-weight:600; }
.page--problem_main .geekpi-list-table .col--pid { width:95px; white-space:nowrap; }
.page--problem_main .geekpi-list-table .col--pid>a { color:#405977; font-weight:600; }
.page--problem_main .geekpi-list-table .col--status { width:140px; border-right:0; }
.page--problem_main .geekpi-list-table .col--difficulty { width:160px; }
.page--problem_main .geekpi-list-table th.col--difficulty,
.page--problem_main .geekpi-list-table td.col--difficulty { display:table-cell; }
.page--problem_main .geekpi-list-table col.col--difficulty { display:table-column; }
.page--problem_main .geekpi-list-table .col--ac-tried { width:110px; white-space:nowrap; }
.geekpi-list-table .geekpi-col-tags { width:230px; }
.geekpi-list-table .geekpi-col-rate { width:155px; }
.geekpi-list-table .problem__tags { display:flex; flex-wrap:wrap; gap:5px; margin:0; padding:0; }
.geekpi-list-table .problem__tag,.geekpi-list-table .problem__tag.notag--hide { display:inline-block; margin:0; }
.geekpi-list-table .problem__tag-link { display:inline-block; background:#eaf4ff; border-radius:4px; color:#287bc2; font-size:12px; padding:3px 7px; }
.geekpi-all-tags { margin-top:5px; }
.geekpi-all-tags>summary { cursor:pointer; color:#70869b; font-size:11px; font-weight:500; }
.geekpi-all-tags[open]>summary { margin-bottom:8px; }
.geekpi-list-muted { color:#9aaabc; }
.geekpi-pass-rate { display:flex; align-items:center; gap:8px; min-width:140px; font-size:12px; white-space:nowrap; }
.geekpi-pass-track { display:block; width:84px; height:8px; background:#e3edf7; border-radius:6px; overflow:hidden; }
.geekpi-pass-track i { display:block; height:100%; background:linear-gradient(90deg,#00b4e6,#1682f4); border-radius:6px; }
.page--problem_main .pager { padding:18px 24px; margin:0; text-align:right; background:white; }
.page--problem_main .pager__item { border-radius:5px; }
@media(max-width:1200px) { .geekpi-problem-filters { grid-template-columns:1fr 1fr 1fr; } .geekpi-problem-keyword { grid-column:span 2; } }
@media(max-width:600px) { .geekpi-problem-hero h1 { font-size:26px; } .geekpi-problem-hero img { width:140px; height:140px; } .geekpi-problem-hero p { font-size:13px; max-width:190px; line-height:1.6; } .geekpi-problem-filters { grid-template-columns:1fr 1fr; padding:16px; gap:12px; } .geekpi-problem-keyword { grid-column:span 2; } .geekpi-problem-count { padding:0 16px 16px; } .geekpi-problem-count>span { display:none; } }

/* Fit every column into the desktop list; retain horizontal scrolling on phones. */
@media(min-width:1101px) {
  .page--problem_main .geekpi-list-table { width:100%; min-width:0; }
  .page--problem_main .geekpi-list-table .col--pid { width:7%; white-space:normal; }
  .page--problem_main .geekpi-list-table .col--status { width:12%; }
  .page--problem_main .geekpi-list-table .col--name { width:auto; min-width:0; }
  .page--problem_main .geekpi-list-table .geekpi-col-tags { width:19%; }
  .page--problem_main .geekpi-list-table .col--difficulty { width:12%; }
  .page--problem_main .geekpi-list-table .geekpi-col-rate { width:11%; }
  .page--problem_main .geekpi-list-table .col--ac-tried { width:11%; white-space:normal; }
  .page--problem_main .geekpi-list-table th,
  .page--problem_main .geekpi-list-table td { padding:12px 8px; overflow-wrap:anywhere; white-space:normal; }
  .page--problem_main .geekpi-list-table .col--status__text { white-space:normal; }
  .geekpi-pass-rate { min-width:0; flex-wrap:wrap; gap:4px; }
  .geekpi-pass-track { width:40px; max-width:100%; }
  .geekpi-list-table .problem__tag-link { white-space:normal; overflow-wrap:anywhere; }
}

.page--problem_main .geekpi-library-main > .section { overflow:visible; }
.geekpi-library-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 24px 0; color:#405977; font-size:14px; font-weight:600; }
.geekpi-library-management { position:relative; font-weight:400; }
.geekpi-library-management > summary { cursor:pointer; border:1px solid #d7e3f0; border-radius:7px; padding:10px 14px; color:#007cae; background:#e8f4fc; }
.geekpi-management-menu { position:absolute; right:0; top:calc(100% + 8px); z-index:30; width:280px; max-width:calc(100vw - 48px); border:1px solid #d7e3f0; border-radius:8px; background:var(--section-bg,#fff); box-shadow:0 8px 24px #183e6826; padding:6px; }
.geekpi-management-menu .menu__link { padding:12px; white-space:normal; }
.geekpi-batch-actions { padding:12px 16px; background:var(--section-bg,#fff); border:1px solid #d7e3f0; border-radius:8px; margin-bottom:12px; }
.geekpi-batch-actions #problem_selection { min-width:120px; }
.geekpi-library-actions { --geekpi-library-action-bg:color-mix(in srgb,var(--geekpi-primary-light) 88%,var(--geekpi-primary)); --geekpi-library-action-border:color-mix(in srgb,var(--geekpi-border) 70%,var(--geekpi-primary)); display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; min-width:0; }
.geekpi-lucky-action { display:flex; margin:0; padding:0; }
.geekpi-lucky-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; box-sizing:border-box; padding:10px 14px; border:1px solid var(--geekpi-library-action-border); border-radius:8px; background:var(--geekpi-library-action-bg); color:var(--geekpi-primary-hover); font-size:13px; line-height:1.5; font-weight:600; text-decoration:none; white-space:nowrap; transition:background-color .15s,border-color .15s; }
.geekpi-lucky-button:hover { color:var(--geekpi-primary-hover); border-color:var(--geekpi-primary); background:var(--geekpi-surface); text-decoration:none; }
.geekpi-lucky-button:focus-visible { outline:2px solid var(--geekpi-primary); outline-offset:3px; }
.geekpi-lucky-button:active { background:var(--geekpi-surface-hover); }
.geekpi-lucky-button svg { flex:none; }
.geekpi-library-actions .geekpi-lucky-button,
.geekpi-library-actions .geekpi-library-management > summary { font-family:inherit; font-size:13px; line-height:1.5; font-weight:600; min-height:44px; box-sizing:border-box; }
.geekpi-problem-filters { grid-template-columns:repeat(4,minmax(0,1fr)); }
.geekpi-problem-keyword { grid-column:span 2; }
@media(max-width:600px) {
  .geekpi-library-heading { padding:16px 16px 0; }
  .geekpi-problem-filters { grid-template-columns:1fr 1fr; }
  .geekpi-library-heading { align-items:flex-start; flex-wrap:wrap; }
  .geekpi-library-heading > span { padding-top:12px; }
  .geekpi-library-actions { gap:8px; }
  .geekpi-lucky-button { padding:10px 12px; }
}
.geekpi-management-menu .menu__link { box-sizing:border-box; width:100%; max-width:100%; margin:0; }

.geekpi-pagination { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px; padding:16px 24px; }
.page--problem_main .geekpi-pagination .pager { padding:0; }
.geekpi-page-jump { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:13px; color:#405977; }
.geekpi-page-jump label { display:flex; align-items:center; gap:8px; }
.geekpi-page-jump input[type=number] { width:68px; height:34px; box-sizing:border-box; margin:0; padding:4px 8px; border:1px solid #d7e3f0; border-radius:6px; background:var(--section-bg,#fff); color:inherit; }
.geekpi-page-jump button { border:0; border-radius:6px; padding:8px 14px; background:#008fc9; color:#fff; cursor:pointer; }
@media(max-width:600px) { .geekpi-pagination { padding:16px; justify-content:center; } .geekpi-page-jump { justify-content:center; } }

/* Keep problem tags consistent in lists, sidebars, and problem headings. */
.main .problem__tag-item.tags,
.main .problem__tag-link {
  background: var(--geekpi-primary-light);
  color: var(--geekpi-primary-hover) !important;
  border-radius: var(--geekpi-radius-sm);
}
.main a.problem__tag-item.tags:hover,
.main .problem__tag-item.tags.interactive:hover,
.main .problem__tag-link:hover {
  background: color-mix(in srgb, var(--geekpi-primary-light) 88%, var(--geekpi-primary));
  color: var(--geekpi-primary-hover) !important;
  text-decoration: none;
}

.gp-management { background:var(--geekpi-surface,#fff); border:1px solid var(--geekpi-border,#dce6ee); border-radius:14px; padding:20px 24px; margin-bottom:20px; }
.gp-management-heading { display:flex; gap:16px; align-items:center; justify-content:space-between; }
.gp-management h1 { font-size:24px; line-height:1.4; margin:6px 0 16px; }
.gp-management-meta { color:#71849b; font-size:13px; }
.gp-management-toolbar { display:flex; align-items:center; gap:12px; }
.gp-management nav { display:flex; gap:8px; overflow-x:auto; min-width:0; flex:1; padding:4px 0; }
.gp-management nav a { white-space:nowrap; padding:10px 14px; border-radius:8px; background:var(--geekpi-surface-hover,#f0f6fa); color:var(--geekpi-text,#335778); }
.gp-management nav a[aria-current] { background:#009bc5; color:white; font-weight:600; }
.gp-management-more { position:relative; flex-shrink:0; }
.gp-management-more summary { cursor:pointer; padding:10px; }
.gp-management-more > div { position:absolute; right:0; top:100%; z-index:40; width:200px; background:var(--geekpi-surface,#fff); box-shadow:0 8px 24px #172a4426; border:1px solid var(--geekpi-border,#dce6ee); border-radius:8px; padding:8px; }
.gp-management-more a { display:block; padding:10px; }
.gp-management-dialog { border:1px solid var(--geekpi-border,#dce6ee); border-radius:14px; padding:24px; max-width:440px; width:calc(100% - 32px); background:var(--geekpi-surface,#fff); color:inherit; }
.gp-management-dialog::backdrop { background:#142c4c66; }
.gp-management-dialog h2 { font-size:20px; margin:0 0 12px; }
.gp-management-dialog > div { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.gp-management-dialog button { border:1px solid #c5dbe8; border-radius:8px; padding:10px 12px; background:var(--geekpi-surface-hover,#f0f6fa); color:var(--geekpi-text,#335778); cursor:pointer; }
.gp-management-dialog button[data-nav-choice=save] { background:#009bc5; color:#fff; }
@media(max-width:640px) { .gp-management { padding:16px; } .gp-management-heading { align-items:flex-start; } .gp-management-heading > a { white-space:nowrap; font-size:12px; } .gp-management h1 { font-size:20px; } .gp-management-toolbar { gap:4px; } .gp-management nav a { padding:9px 11px; } }

.gp-management-heading > div { min-width:0; }
.gp-management h1 { overflow-wrap:anywhere; }

.gps { color:#193550; }
.gps h1 { font-size:30px; font-weight:750; line-height:1.35; margin:12px 0; }
.gps h2 { font-size:20px; font-weight:700; margin:0 0 18px; }
.gps a { color:#008fca; }
.gps-hero { display:flex; align-items:center; justify-content:space-between; padding:26px 38px; border-radius:18px; background:linear-gradient(115deg,#e5f5ff,#eefbff 55%,#e6f7ed); margin-bottom:22px; }
.gps-hero img { width:160px; height:160px; object-fit:contain; }
.gps-hero p { color:#58738b; font-size:17px; margin:0; }
.gps-eyebrow { color:#008fba; font-weight:700; letter-spacing:2px; font-size:12px; }
.gps-panel { background:white; padding:26px; border:1px solid #dfeaf2; border-radius:14px; box-shadow:0 5px 20px #18395508; margin-bottom:22px; }
.gps-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.gps-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.gps-tabs a,.gps-categories a { padding:10px 16px; border-radius:8px; font-weight:600; color:#34526b; background:#f2f7fb; }
.gps-tabs a.active,.gps-categories a.active { background:#008ed1; color:white; }
.gps-button { appearance:none; display:inline-flex; justify-content:center; align-items:center; padding:11px 18px; min-height:42px; border:1px solid #0098ce; border-radius:8px; background:#0098ce; color:white!important; font:inherit; font-size:14px; font-weight:650; cursor:pointer; text-decoration:none; white-space:nowrap; }
.gps-button:hover { background:#007eaf; }
.gps-button.secondary { background:#f0f9ff; color:#007cab!important; border-color:#b7dded; }
.gps-button:disabled { opacity:.65; cursor:default; }
.gps a:focus-visible,.gps button:focus-visible,.gps input:focus-visible,.gps select:focus-visible,.gps textarea:focus-visible { outline:3px solid #7bdaf4; outline-offset:3px; }
.gps-filter { display:flex; align-items:end; gap:16px; margin:25px 0; }
.gps label { display:block; font-weight:600; font-size:14px; color:#45617a; }
.gps input,.gps select,.gps textarea { display:block; width:100%; font:inherit; font-weight:400; border:1px solid #cedde8; border-radius:8px; padding:11px 13px; margin-top:8px; background:#fcfdff; color:#1b3750; box-sizing:border-box; }
.gps-filter label { min-width:180px; }
.gps-grow { flex:1; }
.gps-categories { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:24px; font-size:14px; }
.gps-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.gps-card { border:1px solid #dfeaf2; border-radius:12px; padding:22px; display:flex; align-items:center; gap:18px; background:linear-gradient(135deg,#fff,#f9fcff); transition:box-shadow .2s,border-color .2s; }
.gps-card:hover { border-color:#78cce9; box-shadow:0 7px 20px #009bd015; }
.gps-card-copy { flex:1; min-width:0; }
.gps-card h2 { font-size:18px; margin:12px 0 9px; line-height:1.5; overflow-wrap:anywhere; }
.gps-card h2 a { color:#193b58; }
.gps-card p { font-size:13px; color:#758a9c; line-height:1.7; margin:0 0 14px; overflow-wrap:anywhere; }
.gps-tag,.gps-private { display:inline-block; font-size:12px; padding:5px 9px; border-radius:5px; background:#e7f5ff; color:#087caf; margin-right:5px; }
.gps-private { color:#71839a; background:#edf1f5; }
.gps-meta { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:#8798a7; }
.gps-progress { flex:none; width:82px; height:82px; border-radius:50%; background:conic-gradient(#02a6dd var(--progress),#e2eff6 0); display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }
.gps-progress:before { content:''; position:absolute; inset:6px; border-radius:50%; background:white; }
.gps-progress strong,.gps-progress small { position:relative; }
.gps-progress strong { font-size:18px; color:#028fc1; }
.gps-progress small { color:#8598a8; font-size:11px; margin-top:4px; }
.gps-empty { grid-column:1/-1; text-align:center; padding:30px 10px; color:#8196a8; }
.gps-empty img { object-fit:contain; width:120px; height:120px; }
.gps-pagination { font-size:14px; color:#8196a8; margin-top:28px; }
.gps-pagination nav { display:flex; gap:18px; }
.gps-editor { max-width:920px; margin:0 auto; }
.gps-edit-form>label { margin:22px 0; }
.gps-muted { color:#8294a4; font-size:14px; line-height:1.7; }
.gps-actions { display:flex; flex-wrap:wrap; gap:10px; }
.gps-actions form { margin:0; }
.gps-detail-bottom { margin-top:26px; border-top:1px solid #e3edf4; padding-top:22px; }
.gps-detail-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start; }
.gps-description { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.9; color:#466078; min-height:180px; }
.gps-info { display:grid; grid-template-columns:1fr 1fr; gap:18px; font-size:14px; margin:0; }
.gps-info dt { color:#8496a5; }
.gps-info dd { text-align:right; margin:0; overflow-wrap:anywhere; }
.gps progress { width:100%; height:12px; accent-color:#009fd1; }
.gps-table-scroll { overflow-x:auto; }
.gps-panel,.gps-detail-grid>* { min-width:0; }
.gps-table { width:100%; border-collapse:collapse; min-width:620px; font-size:14px; }
.gps-table th { background:#f2f8fc; color:#52718a; text-align:left; white-space:nowrap; }
.gps-table td,.gps-table th { padding:16px 12px; border-bottom:1px solid #e6eef4; }
.gps-ac { color:#22af35; font-weight:700; }
.gps-add-list { margin:28px 0; }
.gps-add-list form { border-bottom:1px solid #e3edf4; padding:18px 0; }
.gps-add-list .gps-tag { margin-left:10px; }
@media(max-width:1200px) { .gps-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .gps-grid,.gps-detail-grid { grid-template-columns:1fr; } .gps-toolbar { flex-wrap:wrap; } .gps-filter { flex-wrap:wrap; } .gps-filter label { min-width:0; flex:1 1 140px; } .gps-panel { padding:20px 16px; } .gps-hero { padding:20px; } .gps-hero img { width:100px; height:100px; } .gps h1 { font-size:25px; } .gps-hero p { font-size:14px; } .gps-card { padding:18px; } .gps-pagination nav { gap:10px; } }

.gt .gps-panel{margin-bottom:20px}.gt h1{font-size:28px}.gt h2{font-size:20px;color:#173950;margin:0 0 18px}.gt-eyebrow{color:#1686b7;font-weight:700;font-size:13px;letter-spacing:1px}.gt-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px}.gt-sidebar{align-self:start;position:sticky;top:80px}.gt-sidebar>a{display:block;padding:12px 14px;border-radius:8px;color:#47697e;margin:4px 0}.gt-sidebar>a.selected,.gt-sidebar>a:hover{background:#e8f5fc;color:#0079b5;font-weight:650}.gt-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-top:1px solid #e5edf3}.gt-row>div{min-width:0}.gt-row a{font-weight:600;overflow-wrap:anywhere}.gt-row p{margin:6px 0 0;line-height:1.8}.gt-row form{flex-shrink:0}.gt-check{display:flex!important;align-items:center;gap:10px;margin:10px 0}.gt .gt-check input{width:18px;height:18px;min-height:0;margin:0}.gt fieldset{padding:14px 18px;border:1px solid #dce7ef;border-radius:8px}.gt-empty{padding:28px 0;color:#7890a0}.gt .gps-hero img{object-fit:contain}@media(max-width:760px){.gt-layout{grid-template-columns:1fr}.gt-sidebar{position:static;display:flex;flex-wrap:wrap;padding:12px}.gt-sidebar>a{padding:10px}.gt-sidebar hr,.gt-sidebar p{display:none}.gt h1{font-size:23px}.gt-row{align-items:flex-start;flex-wrap:wrap}.gt-row form{margin-left:auto}}
.gt [data-library-sharing-status]{margin:20px 0 28px;padding:20px;border:1px solid #dce7ef;border-radius:10px;background:#f4faff}
.gt [data-library-sharing-status] p{margin:10px 0;line-height:1.7;overflow-wrap:anywhere}
.gt [data-library-sharing-status] h2{margin-bottom:12px}
.gt [data-library-sharing-status] [role=status]{color:#79501c}
.geekpi-sharing-toolbar{margin-bottom:18px;padding:12px;flex-wrap:wrap}.geekpi-sharing-list{max-height:420px;overflow:auto;margin-bottom:18px}.geekpi-sharing-list input[type=checkbox]{width:18px;height:18px}.geekpi-sharing-list table{min-width:520px}

/* 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}

.geekpi-avatar-crop { flex: 0 0 100%; min-width: 0; padding-top: 12px; }
.geekpi-avatar-crop[hidden] { display: none; }
.geekpi-avatar-crop-help { flex: 0 0 100%; margin: 12px 0 0; line-height: 1.6; color: var(--geekpi-text-secondary); }
.geekpi-avatar-crop-help[hidden] { display: none; }
.geekpi-avatar-crop p { margin: 0 0 12px; line-height: 1.6; }
.geekpi-avatar-crop canvas { display: block; width: min(280px, 100%); height: auto; aspect-ratio: 1; border: 2px solid var(--geekpi-primary); border-radius: 8px; background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 16px 16px; cursor: grab; touch-action: none; }
.geekpi-avatar-crop canvas:active { cursor: grabbing; }
.geekpi-avatar-crop canvas:focus-visible { outline: 2px solid var(--geekpi-primary); outline-offset: 3px; }
.geekpi-avatar-crop label { display: flex; align-items: center; gap: 12px; width: min(280px, 100%); margin: 16px 0; }
.geekpi-avatar-crop input[type="range"] { flex: 1; min-width: 0; accent-color: var(--geekpi-primary); }
.geekpi-avatar-crop__status { font-size: 13px; color: var(--geekpi-text-secondary); }
#upload_avatar > .section__body > img, .user-profile-avatar { object-fit: cover; }

/* Native solution code: a stable toolbar above a separately scrolling code body. */
.page--problem_solution .typo.richmedia .geekpi-code-block {
  margin: 20px 0 24px;
  border: 1px solid var(--geekpi-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--geekpi-surface);
}
.page--problem_solution .geekpi-code-block > .toolbar {
  position: static;
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--geekpi-border);
  background: var(--geekpi-surface-hover);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  white-space: normal;
  opacity: 1;
}
.page--problem_solution .geekpi-code-block > .toolbar > .toolbar-item {
  font-size: inherit;
}
.geekpi-code-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--geekpi-text-secondary);
}
.geekpi-code-language {
  color: var(--geekpi-text);
  font-weight: 600;
}
.geekpi-code-lines {
  font-variant-numeric: tabular-nums;
}
.page--problem_solution .typo.richmedia .geekpi-code-block .geekpi-code-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 100px;
  min-height: 36px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--geekpi-border);
  border-radius: 6px;
  background: var(--geekpi-surface);
  color: var(--geekpi-primary);
  box-shadow: none;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.page--problem_solution .typo.richmedia .geekpi-code-block .geekpi-code-copy:hover {
  border-color: var(--geekpi-primary);
  background: var(--geekpi-primary-light);
}
.page--problem_solution .typo.richmedia .geekpi-code-block .geekpi-code-copy:focus-visible,
.page--problem_solution .geekpi-code-block > pre:focus-visible {
  outline: 2px solid var(--geekpi-primary);
  outline-offset: -3px;
}
.page--problem_solution .typo.richmedia .geekpi-code-block .geekpi-code-copy:disabled {
  opacity: .6;
  cursor: wait;
}
.page--problem_solution .typo.richmedia .geekpi-code-block .geekpi-code-copy[data-state="success"] {
  color: var(--geekpi-success);
}
.page--problem_solution .typo.richmedia .geekpi-code-block .geekpi-code-copy[data-state="error"] {
  color: var(--geekpi-danger);
}
.page--problem_solution .typo.richmedia .geekpi-code-block > pre {
  margin: 0;
  padding: 18px 20px;
  border: 0;
  border-radius: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--geekpi-border) transparent;
  background: var(--geekpi-surface);
  font-size: 14px;
  line-height: 1.75;
  tab-size: 4;
}
.page--problem_solution .geekpi-code-block > pre > code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: inherit;
  line-height: inherit;
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}
.geekpi-code-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .page--problem_solution .typo.richmedia .geekpi-code-block > pre {
    padding: 14px 12px;
    font-size: 13px;
  }
  .page--problem_solution .typo.richmedia .geekpi-code-block .geekpi-code-copy {
    min-height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page--problem_solution .typo.richmedia .geekpi-code-block .geekpi-code-copy { transition: none; }
}
@media print {
  .page--problem_solution .geekpi-code-block > .toolbar { display: none; }
}

/* 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}