/* OJ skin: the framed-sheet look from ../oj-mockup, layered over the stock QingdaoU OnlineJudgeFE build.
   Loaded from /public/skin/skin.css by a <link> that apply-skin.sh adds to /app/dist/index.html. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --sk-ground: #f2f5f3; --sk-surface: #ffffff; --sk-raised: #eef1ef; --sk-active: #e3e8e5;
  --sk-border: #e3e7e4; --sk-rule: #eff1f0; --sk-control: #cdd1ce;
  --sk-text: #131416; --sk-muted: #5b605d; --sk-primary: #1d1f20;
  --sk-accent: #2a6b52; --sk-accent-pale: #e3efe9; --sk-empty: #e2e7e4;
  --sk-font: "IBM Plex Sans KR", "IBM Plex Sans", "Malgun Gothic", system-ui, sans-serif;
  --sk-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* Ground, type */
html, body, #app, .content-app { background: var(--sk-ground) !important; color: var(--sk-text); font-family: var(--sk-font) !important; }
body { font-size: 14px; }
.ivu-table, .ivu-btn, .ivu-input, .ivu-select, .ivu-menu, .ivu-card { font-family: var(--sk-font) !important; }

/* Top bar: on the frame tint, no shadow, no rule; active item in ink with a 2px accent underline */
#header .oj-menu, #header .ivu-menu-light { background: var(--sk-ground) !important; box-shadow: none !important; }
#header .ivu-menu-horizontal.ivu-menu-light:after { display: none; }
#header .logo span { color: var(--sk-text); font-weight: 600; font-size: 17px; }
#header .logo { cursor: pointer; }
#header .logo:hover span { color: var(--sk-accent); }
#header .ivu-menu-item { color: #3f4441 !important; }
#header .ivu-menu-item .ivu-icon { color: var(--sk-muted); }
#header .ivu-menu-item:hover, #header .ivu-menu-item-active, #header .ivu-menu-item-selected {
  color: var(--sk-text) !important; border-bottom-color: var(--sk-accent) !important;
}

/* Cards: flat white sheets with a 1px edge */
.ivu-card, .ivu-card-shadow, .ivu-card-bordered { background: var(--sk-surface); border: 1px solid var(--sk-border) !important; border-radius: 8px !important; box-shadow: none !important; }
.ivu-card-head { border-bottom: 1px solid var(--sk-rule) !important; }
.panel-title, .ivu-card-head p { color: var(--sk-text) !important; font-weight: 600 !important; font-size: 16px !important; }

/* Tables: grey sentence-case header with no band, light rules, tabular figures */
.ivu-table, .ivu-table-wrapper { border: 0 !important; }
.ivu-table:before, .ivu-table:after { display: none; }
.ivu-table th { background: transparent !important; color: var(--sk-muted); font-weight: 400; font-size: 12px; border-bottom: 0 !important; }
.ivu-table td { border-bottom: 1px solid var(--sk-rule) !important; font-variant-numeric: tabular-nums; }
.ivu-table-row-hover td, .ivu-table-row:hover td { background: #fafbfa !important; }
.ivu-table a, .ivu-table .ivu-btn-text { color: var(--sk-text); }
.ivu-table a:hover { color: var(--sk-accent); }

/* Buttons and controls: near-black primary, square-ish 6px corners */
.ivu-btn { border-radius: 6px; box-shadow: none !important; }
.ivu-btn-primary, .ivu-btn-info { background: var(--sk-primary) !important; border-color: var(--sk-primary) !important; color: #fff !important; }
.ivu-btn-primary:hover, .ivu-btn-info:hover { background: #33373a !important; border-color: #33373a !important; }
.ivu-input, .ivu-select-selection { border-color: var(--sk-control) !important; border-radius: 6px !important; box-shadow: none !important; }
.ivu-input:focus, .ivu-select-visible .ivu-select-selection { border-color: var(--sk-accent) !important; }
.ivu-switch-checked { background: var(--sk-accent) !important; border-color: var(--sk-accent) !important; }

/* Tags: pale chips. Result tags keep their meaning as pale pairs: green Accepted, red failures, yellow/orange limits */
.ivu-tag { background: #ebedee !important; border: 0 !important; border-radius: 4px !important; }
.ivu-tag .ivu-tag-text { color: #353736 !important; font-weight: 500; }
.ivu-tag-green { background: #e3efe9 !important; } .ivu-tag-green .ivu-tag-text { color: #173d2e !important; }
.ivu-tag-red { background: #ffedea !important; } .ivu-tag-red .ivu-tag-text { color: #831c1e !important; }
.ivu-tag-yellow, .ivu-tag-orange { background: #fffbeb !important; } .ivu-tag-yellow .ivu-tag-text, .ivu-tag-orange .ivu-tag-text { color: #92400e !important; }
.ivu-tag-blue { background: #e4ecf6 !important; } .ivu-tag-blue .ivu-tag-text { color: #1f3e63 !important; }

/* Links: the accent instead of iView blue */
.content-app a, .markdown-body a { color: var(--sk-accent); }
.content-app a:hover { color: #1d4d3a; }
.footer, .footer p { color: var(--sk-muted) !important; }
.footer a { color: var(--sk-accent) !important; }

/* Buttons repeated on every row (Rejudge, Detail) are outlined, not filled */
.ivu-table .ivu-btn, .ivu-btn-ghost { background: var(--sk-surface) !important; border: 1px solid var(--sk-control) !important; color: var(--sk-text) !important; }
.ivu-table .ivu-btn:hover, .ivu-btn-ghost:hover { background: var(--sk-raised) !important; }
.ivu-btn-warning, .ivu-btn-success { background: var(--sk-primary) !important; border-color: var(--sk-primary) !important; color: #fff !important; }

/* Status page: the ID and problem cells are blue spans styled by the stock component */
body.sk-status .ivu-table td:nth-child(2) .ivu-table-cell > span, body.sk-status .ivu-table td:nth-child(4) .ivu-table-cell > span { color: var(--sk-accent) !important; }
body.sk-status .ivu-table td:nth-child(2) .ivu-table-cell > span { font-family: var(--sk-mono); }
.ivu-table-fixed-right { box-shadow: none !important; }

/* Alerts (judge result under the editor): pale pairs, no saturated fills */
.ivu-alert { border-radius: 6px; border: 0 !important; }
.ivu-alert-success { background: #e3efe9 !important; } .ivu-alert-success .ivu-alert-icon { color: var(--sk-accent) !important; }
.ivu-alert-error { background: #ffedea !important; } .ivu-alert-error .ivu-alert-icon { color: #c4242a !important; }
.ivu-alert-warning { background: #fffbeb !important; } .ivu-alert-warning .ivu-alert-icon { color: #92400e !important; }
.ivu-alert-info { background: #e4ecf6 !important; } .ivu-alert-info .ivu-alert-icon { color: #1f3e63 !important; }

/* Problem detail: section titles in ink, samples on a tone step, info as key-value rows */
#problem-content .title { color: var(--sk-text) !important; font-size: 16px !important; font-weight: 600 !important; margin-top: 24px !important; }
#problem-content .title:first-child { margin-top: 0 !important; }
#problem-content .content { font-size: 15px; line-height: 24px; color: var(--sk-text); }
#problem-content pre, #problem-content code { font-family: var(--sk-mono) !important; background: var(--sk-raised) !important; border: 0 !important; border-radius: 6px; }
#problem-content pre { padding: 12px 14px !important; }
.card-title { color: var(--sk-text); font-weight: 600; }
#right-column .ivu-icon { color: var(--sk-muted); }
#info ul li { border-bottom: 1px solid var(--sk-rule); }
#info ul li p:first-child { color: var(--sk-muted); }
#info ul li p:last-child { font-variant-numeric: tabular-nums; }
#submit-code .vue-codemirror-wrap, #submit-code .CodeMirror { border: 1px solid var(--sk-border); border-radius: 6px; font-family: var(--sk-mono); }
.sk-replaced > .echarts, #pieChart.sk-replaced .echarts { display: none !important; }

/* Our statistic block on the problem page */
.sk-stat { padding: 4px 16px 12px; }
.sk-stat-head { display: flex; justify-content: space-between; align-items: baseline; font-variant-numeric: tabular-nums; }
.sk-stat-head b { font-size: 22px; font-weight: 500; }
.sk-track { height: 8px; border-radius: 4px; background: var(--sk-empty); margin: 10px 0 14px; overflow: hidden; }
.sk-track i { display: block; height: 100%; background: var(--sk-accent); }
.sk-kv { list-style: none; margin: 0; padding: 0; }
.sk-kv li { display: flex; justify-content: space-between; height: 28px; align-items: center; font-variant-numeric: tabular-nums; }
.sk-kv li span:first-child { color: var(--sk-muted); }

/* Our bar list on the ranking page */
.sk-bars { list-style: none; margin: 0; padding: 4px 0; }
.sk-bars { padding: 4px 20px 8px; }
.sk-bars li { display: grid; grid-template-columns: 28px minmax(120px, 220px) minmax(0, 720px); align-items: center; gap: 12px; height: 40px; }
.sk-bars .bar { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.sk-bars .bar i { height: 10px; border-radius: 5px; background: var(--sk-accent); display: block; }
.sk-bars .bar small { color: var(--sk-muted); }
.sk-bars .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ivu-page-item { border-color: var(--sk-control); border-radius: 6px; }
.ivu-page-item-active { background: var(--sk-primary) !important; border-color: var(--sk-primary) !important; }
.ivu-page-item-active a { color: #fff !important; }

/* Problem list page: every problem is "Mid", so the Level column recedes (hiding it breaks iView's fixed colgroup) */
body.sk-problems .ivu-table td:nth-child(4) .ivu-tag { background: transparent !important; }
body.sk-problems .ivu-table td:nth-child(4) .ivu-tag-text { color: var(--sk-muted) !important; font-weight: 400; }
body.sk-problems .ivu-table td:nth-child(2) { font-family: var(--sk-mono); color: var(--sk-muted); }
body.sk-problems .ivu-table .ivu-icon-checkmark-round, body.sk-problems .ivu-table .ivu-icon-android-done { color: var(--sk-accent) !important; }

/* Added block above the problem list */
.sk-hero { max-width: 100%; margin: 0 0 20px; }
.sk-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.sk-title-row h1 { font-size: 22px; line-height: 28px; font-weight: 600; margin: 0; }
.sk-finding { margin: 6px 0 0; color: var(--sk-muted); font-size: 15px; line-height: 22px; }
.sk-finding strong { color: var(--sk-text); font-weight: 500; }
.sk-btn { height: 36px; padding: 0 14px; border-radius: 6px; background: var(--sk-primary); color: #fff !important; display: inline-flex; align-items: center; font-weight: 500; white-space: nowrap; transition: transform .08s, background .15s; }
.sk-btn:hover { background: #33373a; }
.sk-btn:active { transform: translateY(1px); }
.sk-row { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.sk-panel { background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; min-width: 0; }
.sk-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sk-panel h2 { font-size: 16px; line-height: 22px; font-weight: 600; margin: 0; }
.sk-legend { display: flex; gap: 14px; font-size: 12px; color: var(--sk-muted); flex-wrap: wrap; }
.sk-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sk-units { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; flex: 1; }
.sk-unit { display: grid; grid-template-columns: 76px 1fr 64px; align-items: center; gap: 4px 12px; }
.sk-unit-name { font-weight: 500; }
.sk-unit-count { text-align: right; font-variant-numeric: tabular-nums; }
.sk-unit-count small { color: var(--sk-muted); }
.sk-unit-rate { grid-column: 2; font-size: 12px; color: var(--sk-muted); font-variant-numeric: tabular-nums; }
.sk-cells { display: grid; grid-template-columns: repeat(25, 1fr); gap: 4px; }
.sk-cell { aspect-ratio: 1; border-radius: 4px; background: var(--sk-empty); display: block; transition: transform .1s; }
.sk-cell:hover, .sk-cell:focus-visible { transform: scale(1.15); }
.sk-cell.solved, .sk-sw.solved { background: var(--sk-accent); }
.sk-cell.tried, .sk-sw.tried { background: var(--sk-surface); box-shadow: inset 0 0 0 1.5px var(--sk-accent); }
.sk-cell.next, .sk-sw.next { box-shadow: 0 0 0 2px var(--sk-surface), 0 0 0 4px var(--sk-text); }
.sk-sw { width: 12px; height: 12px; border-radius: 3px; background: var(--sk-empty); display: inline-block; }
.sk-rank { list-style: none; padding: 0; margin: 0; }
.sk-rank li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; height: 44px; border-top: 1px solid var(--sk-rule); }
.sk-rank li:first-child { border-top: 0; }
.sk-rank .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-rank .score { text-align: right; line-height: 16px; font-variant-numeric: tabular-nums; }
.sk-rank .score small { display: block; font-size: 12px; color: var(--sk-muted); }
.sk-muted { color: var(--sk-muted); }
.sk-link { color: var(--sk-accent) !important; font-weight: 500; font-size: 13px; margin-top: auto; padding-top: 12px; }
.sk-tip { position: fixed; z-index: 3000; pointer-events: none; background: var(--sk-primary); color: #fff; font-size: 12px; line-height: 18px; padding: 6px 8px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.12); display: none; max-width: 260px; }

@media (max-width: 1100px) { .sk-row { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .sk-title-row { flex-direction: column; }
  .sk-btn { width: 100%; justify-content: center; height: 44px; }
  .sk-panel-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sk-unit { grid-template-columns: 1fr auto; }
  .sk-cells { grid-column: 1 / -1; grid-row: 2; gap: 3px; }
  .sk-unit-rate { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .sk-cell, .sk-btn { transition: none; } }