/* =========================================================================
   Problem page for visitors who are not signed in.
   The same workspace as the signed-in app (description / solutions / submissions on the left,
   code editor and test cases on the right, drag handles between them), with real content:
   the problem, its starter code in every language and its public test cases.
   Run and Submit ask the visitor to sign in. Light and dark follow [data-bs-theme].
   ========================================================================= */
.pg {
  --pg-page: #f9fafb; --pg-card: #ffffff; --pg-card2: #f9fafb; --pg-card3: #f1f5f9; --pg-line: #e5e7eb;
  --pg-ink: #0f172a; --pg-ink2: #334155; --pg-muted: #64748b;
  --pg-brand: #0891b2; --pg-brand2: #2563eb; --pg-ring: rgba(8, 145, 178, .3);
  --pg-easy: #059669; --pg-easy-bg: #d1fae5; --pg-med: #d97706; --pg-med-bg: #fef3c7; --pg-hard: #dc2626; --pg-hard-bg: #fee2e2;
  --pg-ed: #fff; --pg-ed-ink: #1e293b; --pg-ed-gutter: #94a3b8; --pg-ed-line: #e2e8f0; --pg-ed-sel: rgba(8, 145, 178, .18);
  --pg-k: #7c3aed; --pg-s: #b45309; --pg-n: #0e7490; --pg-c: #6b7280; --pg-f: #1d4ed8;
  --pg-split: 50%; --pg-top: 60%;
  --pg-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  position: relative; display: flex; gap: 0; box-sizing: border-box; padding: 8px;
  padding-top: calc(var(--pd-header-h, 64px) + 8px); height: 100vh; height: 100dvh; min-height: 560px;
  background: var(--pg-page); color: var(--pg-ink2); font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
}
[data-bs-theme="dark"] .pg {
  --pg-page: #000000; --pg-card: #010b13; --pg-card2: #04111c; --pg-card3: #0f1c2a; --pg-line: #364153;
  --pg-ink: #f1f5f9; --pg-ink2: #cbd5e1; --pg-muted: #94a3b8; --pg-brand: #22d3ee; --pg-ring: rgba(34, 211, 238, .32);
  --pg-easy: #34d399; --pg-easy-bg: rgba(52, 211, 153, .14); --pg-med: #fbbf24; --pg-med-bg: rgba(251, 191, 36, .14); --pg-hard: #f87171; --pg-hard-bg: rgba(248, 113, 113, .14);
  --pg-ed: #1e1e1e; --pg-ed-ink: #d4d4d4; --pg-ed-gutter: #6b7280; --pg-ed-line: #2b2b2b; --pg-ed-sel: rgba(34, 211, 238, .2);
  --pg-k: #c586c0; --pg-s: #ce9178; --pg-n: #b5cea8; --pg-c: #6a9955; --pg-f: #dcdcaa;
}
.pg *, .pg *::before, .pg *::after { box-sizing: border-box; }
.pg button { font: inherit; color: inherit; }
.pg svg { flex: none; }

/* panels */
.pg-left { flex: 0 0 var(--pg-split); min-width: 0; }
.pg-right { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.pg-card { display: flex; flex-direction: column; height: 100%; min-height: 0; border: 1px solid var(--pg-line); border-radius: 6px; background: var(--pg-card); overflow: hidden; }
.pg-code { flex: 0 0 var(--pg-top); position: relative; }
.pg-tests { flex: 1 1 0; min-height: 0; }
.pg-gutter { flex: none; display: grid; place-items: center; touch-action: none; }
.pg-gutter i { display: block; border-radius: 4px; background: var(--pg-line); transition: background .2s; }
.pg-gutter:hover i, .pg-gutter.is-drag i { background: var(--pg-brand); }
.pg-gutter--v { width: 10px; cursor: col-resize; } .pg-gutter--v i { width: 3px; height: 38px; }
.pg-gutter--h { height: 10px; cursor: row-resize; } .pg-gutter--h i { height: 3px; width: 38px; }

/* tabs (shared by the three panels) */
.pg-tabs { display: flex; align-items: center; flex: none; overflow-x: auto; border-bottom: 1px solid var(--pg-line); background: var(--pg-card); scrollbar-width: none; }
.pg-tabs::-webkit-scrollbar { display: none; }
.pg-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; background: transparent; white-space: nowrap; font-size: .86rem; font-weight: 600; color: var(--pg-muted); cursor: pointer; opacity: .85; transition: color .15s, opacity .15s; }
.pg-tab:hover { opacity: 1; color: var(--pg-ink); }
.pg-tab[aria-selected="true"] { opacity: 1; color: var(--pg-ink); box-shadow: inset 0 -2px 0 var(--pg-brand); }
.pg-tab svg { width: 17px; height: 17px; }
.pg-tab .t-desc { color: #2563eb; } .pg-tab .t-sol { color: #d97706; } .pg-tab .t-sub { color: #059669; } .pg-tab .t-case { color: #16a34a; } .pg-tab .t-out { color: #d97706; }
.pg-tab + .pg-tab { margin-left: 0; }

.pg-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px 20px 24px; }
.pg-body[hidden] { display: none; }

/* description */
.pg-title { margin: 0 0 10px; color: var(--pg-ink); font-size: 1.2rem; font-weight: 600; letter-spacing: -.005em; line-height: 1.3; }
.pg-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pg-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: var(--pg-card3); font-size: .78rem; color: var(--pg-muted); }
.pg-pill b { color: var(--pg-ink); font-weight: 700; }
.pg-pill.is-easy { background: var(--pg-easy-bg); color: var(--pg-easy); font-weight: 700; } .pg-pill.is-medium { background: var(--pg-med-bg); color: var(--pg-med); font-weight: 700; }
.pg-pill.is-hard, .pg-pill.is-expert { background: var(--pg-hard-bg); color: var(--pg-hard); font-weight: 700; }
.pg-quick { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--pg-line); }
.pg-quick a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--pg-line); border-radius: 999px; background: var(--pg-card2); color: var(--pg-ink2); font-size: .78rem; text-decoration: none; }
.pg-quick a:hover { border-color: var(--pg-brand); color: var(--pg-brand); }
.pg-quick svg { width: 14px; height: 14px; }
.pg-md { color: var(--pg-ink2); font-size: .92rem; line-height: 1.7; overflow-wrap: anywhere; }
.pg-md > :first-child { margin-top: 0; } .pg-md p { margin: 0 0 .8em; } .pg-md ul, .pg-md ol { margin: 0 0 .8em; padding-left: 1.3em; }
.pg-md strong { color: var(--pg-ink); } .pg-md img { max-width: 100%; height: auto; border-radius: 8px; background: #fff; }
.pg-md code { padding: 1px 6px; border-radius: 4px; background: var(--pg-card3); color: var(--pg-ink); font: .85em var(--pg-mono); }
.pg-md pre { padding: 12px 14px; border-radius: 6px; background: var(--pg-card3); overflow: auto; } .pg-md pre code { padding: 0; background: none; }
.pg-md table { width: 100%; margin-bottom: .8em; border-collapse: collapse; font-size: .85rem; } .pg-md th, .pg-md td { padding: 6px 10px; border: 1px solid var(--pg-line); }
.pg-h { margin: 22px 0 8px; color: var(--pg-ink); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pg-ex { margin-bottom: 10px; border: 1px solid var(--pg-line); border-radius: 6px; overflow: hidden; }
.pg-ex > b { display: block; padding: 7px 12px; background: var(--pg-card2); border-bottom: 1px solid var(--pg-line); color: var(--pg-ink); font-size: .78rem; }
.pg-ex .pg-md { padding: 10px 12px; font-size: .86rem; }
.pg-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pg-list li { display: flex; gap: 9px; align-items: baseline; font-size: .84rem; }
.pg-list li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: .55em; border-radius: 50%; background: var(--pg-muted); }
.pg-list p { display: inline; margin: 0; }
.pg-tagset { display: flex; flex-wrap: wrap; gap: 7px; }
.pg-tag { padding: 4px 11px; border: 1px solid var(--pg-line); border-radius: 999px; background: var(--pg-card2); color: var(--pg-ink2); font-size: .78rem; }
.pg-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--pg-line); color: var(--pg-muted); font-size: .76rem; }

/* locked tabs: the real layout, blurred, with one clear action */
.pg-lock { position: relative; display: grid; gap: 12px; padding: 4px 0; }
.pg-lock .ln { height: 12px; border-radius: 6px; background: var(--pg-card3); filter: blur(.4px); }
.pg-lock .ln:nth-child(3n) { width: 62%; } .pg-lock .ln:nth-child(3n+1) { width: 92%; } .pg-lock .ln:nth-child(3n+2) { width: 78%; }
.pg-lock .box { height: 84px; border-radius: 10px; background: var(--pg-card2); border: 1px solid var(--pg-line); }
.pg-cta { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 16px; text-align: center; background: linear-gradient(180deg, transparent, var(--pg-card) 55%); }
.pg-cta h3 { margin: 0; color: var(--pg-ink); font-size: 1.05rem; font-weight: 700; }
.pg-cta p { max-width: 36ch; margin: 0; color: var(--pg-muted); font-size: .85rem; line-height: 1.55; }
.pg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 18px; border: 0; border-radius: 6px; background: linear-gradient(135deg, var(--pg-brand), var(--pg-brand2)); color: #fff; font-size: .88rem; font-weight: 700; cursor: pointer; box-shadow: 0 10px 22px -12px var(--pg-brand); transition: transform .15s, filter .15s; }
.pg-btn:hover { filter: brightness(1.06); transform: translateY(-1px); } .pg-btn svg { width: 16px; height: 16px; }
[data-bs-theme="dark"] .pg-btn { color: #04212b; }

/* code panel */
.pg-bar { display: flex; align-items: center; justify-content: space-between; flex: none; gap: 10px; padding: 5px 12px; border-bottom: 1px solid var(--pg-line); background: var(--pg-card); }
.pg-lang { display: flex; align-items: center; gap: 8px; color: #2563eb; }
.pg-lang svg { width: 18px; height: 18px; }
.pg-lang select { height: 30px; padding: 0 28px 0 10px; border: 1px solid var(--pg-line); border-radius: 6px; background: var(--pg-card2); color: var(--pg-ink); font-size: .82rem; font-weight: 600; cursor: pointer; }
.pg-icons { display: flex; align-items: center; gap: 2px; }
.pg-ic { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--pg-muted); cursor: pointer; }
.pg-ic:hover { background: var(--pg-card3); color: var(--pg-ink); } .pg-ic svg { width: 17px; height: 17px; }
.pg-ed { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--pg-ed); }
.pg-ed .nums, .pg-ed pre, .pg-ed textarea { margin: 0; font: 13px/1.65 var(--pg-mono); tab-size: 4; }
.pg-ed .nums { position: absolute; z-index: 2; inset: 0 auto 0 0; width: 46px; padding: 12px 8px 12px 0; overflow: hidden; border-right: 1px solid var(--pg-ed-line); background: var(--pg-ed); color: var(--pg-ed-gutter); text-align: right; white-space: pre; user-select: none; }
.pg-ed pre, .pg-ed textarea { position: absolute; inset: 0; width: 100%; height: 100%; padding: 12px 14px 56px 58px; overflow: auto; white-space: pre; border: 0; }
.pg-ed pre { z-index: 0; pointer-events: none; color: var(--pg-ed-ink); background: transparent; }
.pg-ed pre code { display: block; padding: 0; background: none; color: inherit; font: inherit; }
.pg-ed textarea { z-index: 1; resize: none; outline: 0; background: transparent; color: transparent; caret-color: var(--pg-ed-ink); -webkit-text-fill-color: transparent; }
.pg-ed textarea::selection { background: var(--pg-ed-sel); -webkit-text-fill-color: transparent; }
.pg .hljs-keyword, .pg .hljs-built_in, .pg .hljs-type, .pg .hljs-literal { color: var(--pg-k); }
.pg .hljs-string, .pg .hljs-regexp { color: var(--pg-s); } .pg .hljs-number { color: var(--pg-n); }
.pg .hljs-comment, .pg .hljs-doctag { color: var(--pg-c); font-style: italic; }
.pg .hljs-title, .pg .hljs-function, .pg .hljs-class .hljs-title { color: var(--pg-f); }
.pg .hljs-params, .pg .hljs-variable, .pg .hljs-attr { color: inherit; }
.pg-status { display: flex; justify-content: space-between; flex: none; padding: 3px 12px; border-top: 1px solid var(--pg-line); background: var(--pg-card); color: var(--pg-muted); font: 11px var(--pg-mono); user-select: none; }
.pg-status .save { color: var(--pg-muted); font-family: Inter, sans-serif; }
.pg-run { position: absolute; z-index: 3; right: 10px; bottom: 30px; display: flex; gap: 8px; }
.pg-run button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border: 1px solid var(--pg-line); border-radius: 4px; background: var(--pg-card); color: #16a34a; font-size: .84rem; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .4); }
.pg-run button:hover { background: var(--pg-card3); } .pg-run svg { width: 15px; height: 15px; }
.pg-run .is-primary { border-color: transparent; background: #16a34a; color: #fff; } .pg-run .is-primary:hover { background: #15803d; }
.pg-code.is-full { position: fixed; z-index: 3500; inset: 0; border-radius: 0; }

/* test cases / output */
.pg-cases { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.pg-case { padding: 5px 13px; border: 0; border-radius: 6px; background: var(--pg-card3); color: var(--pg-muted); font-size: .8rem; font-weight: 600; cursor: pointer; }
.pg-case[aria-selected="true"] { background: var(--pg-brand); color: #fff; } [data-bs-theme="dark"] .pg-case[aria-selected="true"] { color: #04212b; }
.pg-field { margin-bottom: 12px; } .pg-field label { display: block; margin-bottom: 5px; color: var(--pg-muted); font-size: .76rem; font-weight: 600; }
.pg-field pre { margin: 0; padding: 10px 12px; border-radius: 6px; background: var(--pg-card3); color: var(--pg-ink); font: 13px/1.6 var(--pg-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.pg-out { display: grid; justify-items: center; gap: 10px; padding: 26px 10px; text-align: center; color: var(--pg-muted); font-size: .86rem; }
.pg-out b { color: var(--pg-ink); font-size: .98rem; } .pg-out svg { width: 30px; height: 30px; color: var(--pg-brand); }

/* phones and tablets: one panel at a time, switched at the top (Description / Code) */
.pg-seg { display: none; }
@media (max-width: 991.98px) {
  .pg { flex-direction: column; height: auto; min-height: 100vh; padding-bottom: 96px; }
  .pg-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 8px; border: 1px solid var(--pg-line); border-radius: 8px; background: var(--pg-card); }
  .pg-seg button { height: 36px; border: 0; border-radius: 6px; background: transparent; color: var(--pg-muted); font-size: .86rem; font-weight: 700; }
  .pg-seg button[aria-selected="true"] { background: var(--pg-brand); color: #fff; } [data-bs-theme="dark"] .pg-seg button[aria-selected="true"] { color: #04212b; }
  .pg-gutter { display: none; }
  .pg-left, .pg-right { flex: none; height: auto; }
  .pg[data-view="desc"] .pg-right, .pg[data-view="code"] .pg-left { display: none; }
  .pg-left .pg-card { height: auto; } .pg-left .pg-body { overflow: visible; }
  .pg-code { flex: none; height: 440px; } .pg-tests { flex: none; height: auto; margin-top: 8px; } .pg-tests .pg-body { overflow: visible; }
  .pg-run { bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) { .pg-btn, .pg-gutter i { transition: none; } }