/*
 * Paper Code bridge
 * 目标：在不重排页面布局的前提下，为旧页面铺一层统一的 N区纸感视觉。
 * 只覆盖颜色、字体、圆角、边框、阴影、按钮、表单、表格、代码块等外观属性。
 */

:root {
  --pc-paper: #f7f1e7;
  --pc-paper-soft: #fbf7ef;
  --pc-surface: rgba(255, 252, 245, 0.92);
  --pc-surface-strong: #fffaf0;
  --pc-ink: #2f2a24;
  --pc-ink-soft: #62594d;
  --pc-muted: #8b7d6b;
  --pc-line: rgba(105, 86, 61, 0.18);
  --pc-line-strong: rgba(105, 86, 61, 0.28);
  --pc-primary: #2f7d6b;
  --pc-primary-strong: #246657;
  --pc-primary-soft: rgba(47, 125, 107, 0.12);
  --pc-accent: #c47a3b;
  --pc-accent-soft: rgba(196, 122, 59, 0.13);
  --pc-danger: #b4534a;
  --pc-success: #4d8a61;
  --pc-warning: #c68a2e;
  --pc-shadow: 0 18px 45px rgba(64, 45, 24, 0.08);
  --pc-shadow-soft: 0 10px 28px rgba(64, 45, 24, 0.06);
  --pc-radius-sm: 10px;
  --pc-radius: 16px;
  --pc-radius-lg: 24px;
  --pc-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --pc-code-font: "SFMono-Regular", "Cascadia Code", "JetBrains Mono", "Fira Code", Consolas, "Liberation Mono", monospace;

  /* Bridge old site variables */
  --theme-primary: var(--pc-primary);
  --primary-color: var(--pc-primary);
  --primary: var(--pc-primary);
  --bg-primary: var(--pc-paper-soft);
  --bg-secondary: var(--pc-paper);
  --text-primary: var(--pc-ink);
  --text-secondary: var(--pc-ink-soft);
  --border-light: var(--pc-line);
}

html[data-pc-theme="paper"] {
  --pc-paper: #f7f1e7;
  --pc-paper-soft: #fbf7ef;
  --pc-surface: rgba(255, 252, 245, 0.92);
  --pc-surface-strong: #fffaf0;
  --pc-ink: #2f2a24;
  --pc-ink-soft: #62594d;
  --pc-muted: #8b7d6b;
  --pc-line: rgba(105, 86, 61, 0.18);
  --pc-line-strong: rgba(105, 86, 61, 0.28);
  --pc-primary: #2f7d6b;
  --pc-primary-strong: #246657;
  --pc-primary-soft: rgba(47, 125, 107, 0.12);
  --pc-accent: #c47a3b;
  --pc-danger: #b4534a;
  --pc-success: #4d8a61;
  --pc-warning: #c68a2e;
  --pc-shadow: 0 18px 45px rgba(64, 45, 24, 0.08);
  --pc-shadow-soft: 0 10px 28px rgba(64, 45, 24, 0.06);
}

html[data-pc-theme="lake"] {
  --pc-paper: #eef6f2;
  --pc-paper-soft: #f7fbf8;
  --pc-surface: rgba(249, 253, 250, 0.92);
  --pc-surface-strong: #fbfffc;
  --pc-ink: #22352f;
  --pc-ink-soft: #536862;
  --pc-muted: #7b918a;
  --pc-line: rgba(59, 105, 93, 0.16);
  --pc-line-strong: rgba(59, 105, 93, 0.26);
  --pc-primary: #2e7d6b;
  --pc-primary-strong: #1f6255;
  --pc-primary-soft: rgba(46, 125, 107, 0.12);
  --pc-accent: #4f8fb8;
  --pc-danger: #b45b5b;
  --pc-success: #3f9460;
  --pc-warning: #c58b32;
  --pc-shadow: 0 18px 45px rgba(30, 67, 57, 0.07);
  --pc-shadow-soft: 0 10px 28px rgba(30, 67, 57, 0.045);
}

html[data-pc-theme="slate"] {
  --pc-paper: #edf0f3;
  --pc-paper-soft: #f8f9fa;
  --pc-surface: rgba(252, 253, 253, 0.92);
  --pc-surface-strong: #ffffff;
  --pc-ink: #252a31;
  --pc-ink-soft: #59616c;
  --pc-muted: #828b98;
  --pc-line: rgba(82, 92, 105, 0.16);
  --pc-line-strong: rgba(82, 92, 105, 0.26);
  --pc-primary: #496f8f;
  --pc-primary-strong: #34556f;
  --pc-primary-soft: rgba(73, 111, 143, 0.12);
  --pc-accent: #8a6fbb;
  --pc-accent-soft: rgba(138, 111, 187, 0.13);
  --pc-danger: #b35a61;
  --pc-success: #4f8d68;
  --pc-warning: #bd8438;
  --pc-shadow: 0 18px 45px rgba(43, 52, 64, 0.07);
  --pc-shadow-soft: 0 10px 28px rgba(43, 52, 64, 0.045);
}

html[data-pc-theme="rose"] {
  --pc-paper: #fbf0f3;
  --pc-paper-soft: #fff8f8;
  --pc-surface: rgba(255, 250, 248, 0.92);
  --pc-surface-strong: #fffafa;
  --pc-ink: #3c2b31;
  --pc-ink-soft: #66505a;
  --pc-muted: #927b82;
  --pc-line: rgba(144, 82, 96, 0.16);
  --pc-line-strong: rgba(144, 82, 96, 0.26);
  --pc-primary: #b95f75;
  --pc-primary-strong: #97495d;
  --pc-primary-soft: rgba(185, 95, 117, 0.13);
  --pc-accent: #d28a67;
  --pc-accent-soft: rgba(210, 138, 103, 0.14);
  --pc-danger: #b85665;
  --pc-success: #5f9871;
  --pc-warning: #c58a4a;
  --pc-shadow: 0 18px 45px rgba(89, 42, 52, 0.07);
  --pc-shadow-soft: 0 10px 28px rgba(89, 42, 52, 0.045);
}

html {
  background: var(--pc-paper);
}

body {
  color: var(--pc-ink);
  font-family: var(--pc-font);
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.82), transparent 28rem),
    radial-gradient(circle at 86% 12%, rgba(47, 125, 107, 0.09), transparent 24rem),
    linear-gradient(135deg, #f8f1e6 0%, #f4eadb 48%, #fbf7ee 100%) !important;
}

html[data-pc-theme="lake"] body {
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.84), transparent 28rem),
    radial-gradient(circle at 86% 12%, rgba(46, 125, 107, 0.10), transparent 24rem),
    linear-gradient(135deg, #eef7f3 0%, #e7f1ec 48%, #f8fbf8 100%) !important;
}

html[data-pc-theme="slate"] body {
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.86), transparent 28rem),
    radial-gradient(circle at 86% 12%, rgba(73, 111, 143, 0.09), transparent 24rem),
    linear-gradient(135deg, #f0f2f4 0%, #e8ecef 48%, #fafafa 100%) !important;
}

html[data-pc-theme="rose"] body {
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.86), transparent 28rem),
    radial-gradient(circle at 86% 12%, rgba(185, 95, 117, 0.10), transparent 24rem),
    linear-gradient(135deg, #fbf0f3 0%, #f6e7e9 48%, #fff8f8 100%) !important;
}

body::selection,
::selection {
  color: #173c34;
  background: rgba(47, 125, 107, 0.22);
}

a {
  color: var(--pc-primary);
}

a:hover {
  color: var(--pc-primary-strong);
}

hr {
  border-color: var(--pc-line);
}

/* Paper Code theme switcher */
.pc-theme-switcher {
  position: static;
  right: auto;
  bottom: auto;
  z-index: auto;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  flex: 0 0 auto;
  padding: 4px;
  border: 1px solid var(--pc-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pc-surface-strong) 68%, transparent);
  box-shadow: none;
  backdrop-filter: blur(10px) saturate(1.04);
}

.pc-theme-switcher button {
  min-width: 0 !important;
  padding: 4px 7px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--pc-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 700 11px/1 var(--pc-font) !important;
  letter-spacing: 0 !important;
  cursor: pointer;
}

.pc-theme-switcher button:hover {
  color: var(--pc-primary-strong) !important;
  background: var(--pc-primary-soft) !important;
  transform: none !important;
}

.pc-theme-switcher button.is-active {
  color: #fff !important;
  background: var(--pc-primary) !important;
}

@media (max-width: 760px) {
  .pc-theme-switcher {
    transform: none;
  }
}

.navbar > .nav-container .theme-switcher {
  display: none !important;
}

/* Surfaces */
:where(
  .card,
  .panel,
  .box,
  .content-card,
  .paper-card,
  .question-card,
  .exam-card,
  .collection-card,
  .problem-card,
  .stat-card,
  .feature-card,
  .dashboard-card,
  .admin-card,
  .section,
  .empty-state,
  .modal-content,
  .dropdown-menu,
  .sidebar,
  .main-content,
  .editor-panel,
  .preview-panel,
  .question-list,
  .question-item,
  .paper-panel,
  .toolbar,
  .filter-panel
) {
  background-color: var(--pc-surface);
  border-color: var(--pc-line);
  box-shadow: var(--pc-shadow-soft);
}

:where(.card, .panel, .content-card, .paper-card, .question-card, .exam-card, .collection-card, .problem-card, .dashboard-card, .admin-card, .modal-content) {
  border-radius: var(--pc-radius);
}

:where(header, .header, .navbar, .topbar, .nav-bar, .hub-header, .admin-header) {
  color: var(--pc-ink);
  background-color: rgba(255, 250, 240, 0.86);
  border-color: var(--pc-line);
  box-shadow: 0 1px 0 var(--pc-line), 0 12px 30px rgba(64, 45, 24, 0.05);
  backdrop-filter: blur(14px) saturate(1.08);
}

:where(.hero, .banner, .page-header, .title-section) {
  color: var(--pc-ink);
}

/* Typography */
:where(h1, h2, h3, h4, h5, h6) {
  color: var(--pc-ink);
  letter-spacing: -0.02em;
}

:where(p, li, td, th, label, .desc, .description, .subtitle, .muted, .meta) {
  color: inherit;
}

:where(.text-muted, .muted, .subtitle, .desc, .description, .meta, .hint, .help-text) {
  color: var(--pc-muted);
}

/* Buttons */
:where(button, .btn, .button, .action-btn, .nav-btn, .primary-btn, .submit-btn, input[type="button"], input[type="submit"]) {
  border-radius: 999px;
  border-color: var(--pc-line-strong);
  font-family: var(--pc-font);
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

:where(button, .btn, .button, .action-btn, .nav-btn, input[type="button"], input[type="submit"]):not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(64, 45, 24, 0.10);
}

:where(.btn-primary, .primary, .primary-btn, .submit-btn, .save-btn, button.primary, button[type="submit"]) {
  color: #fffaf0;
  background: linear-gradient(135deg, var(--pc-primary), var(--pc-primary-strong));
  border-color: rgba(36, 102, 87, 0.34);
  box-shadow: 0 12px 26px rgba(47, 125, 107, 0.20);
}

:where(.btn-secondary, .secondary, .secondary-btn, .cancel-btn) {
  color: var(--pc-ink);
  background: rgba(255, 250, 240, 0.76);
  border-color: var(--pc-line);
}

:where(.btn-danger, .danger, .delete-btn, .remove-btn) {
  color: #fffaf0;
  background: linear-gradient(135deg, var(--pc-danger), #913d36);
  border-color: rgba(180, 83, 74, 0.28);
}

:where(.btn-warning, .warning) {
  color: #42270c;
  background: linear-gradient(135deg, #f3d49b, #e7b969);
  border-color: rgba(198, 138, 46, 0.30);
}

/* Forms */
:where(input, textarea, select) {
  color: var(--pc-ink);
  background-color: rgba(255, 252, 246, 0.92);
  border-color: var(--pc-line-strong);
  border-radius: var(--pc-radius-sm);
  font-family: var(--pc-font);
}

:where(input, textarea, select):focus {
  border-color: rgba(47, 125, 107, 0.55);
  box-shadow: 0 0 0 4px rgba(47, 125, 107, 0.12);
  outline: none;
}

:where(textarea, .editor, .markdown-editor, .source-editor) {
  font-family: var(--pc-font);
  line-height: 1.72;
}

/* Tables */
:where(table) {
  color: var(--pc-ink);
  border-color: var(--pc-line);
}

:where(th) {
  color: var(--pc-ink);
  background-color: rgba(47, 125, 107, 0.09);
  border-color: var(--pc-line);
}

:where(td) {
  border-color: var(--pc-line);
}

:where(tr:hover) {
  background-color: rgba(47, 125, 107, 0.055);
}

/* Tags and status pills */
:where(.tag, .badge, .pill, .label, .status, .level-badge, .category-tag) {
  color: var(--pc-primary-strong);
  background-color: var(--pc-primary-soft);
  border-color: rgba(47, 125, 107, 0.18);
  border-radius: 999px;
}

:where(.active, .selected, .current) {
  border-color: rgba(47, 125, 107, 0.36);
}

/* Question and paper content */
:where(.question-content, .problem-content, .paper-content, .exam-content, .solution-content, .answer-content, .preview-content, .markdown-body) {
  color: var(--pc-ink);
  line-height: 1.78;
}

:where(.question-content, .problem-content, .paper-content, .exam-content, .solution-content, .answer-content, .preview-content, .markdown-body) p {
  margin-top: 0.7em;
  margin-bottom: 0.7em;
}

:where(.option, .choice, .answer-option, .option-item) {
  border-color: var(--pc-line);
  background-color: rgba(255, 252, 246, 0.72);
  border-radius: var(--pc-radius-sm);
}

:where(.option:hover, .choice:hover, .answer-option:hover, .option-item:hover) {
  background-color: rgba(47, 125, 107, 0.07);
  border-color: rgba(47, 125, 107, 0.24);
}

/* Code blocks */
:where(pre, code, kbd, samp) {
  font-family: var(--pc-code-font);
}

:where(pre, .code-block, .code-container, .sample-block, .example-block, .hljs, .language-cpp, .language-c, .language-js, .language-python) {
  color: #3a332b;
  background: linear-gradient(180deg, #fffaf0 0%, #f6ecdc 100%);
  border: 1px solid rgba(105, 86, 61, 0.20);
  border-radius: var(--pc-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 12px 26px rgba(64, 45, 24, 0.06);
}

:where(code):not(pre code) {
  color: #8b4d2d;
  background-color: rgba(196, 122, 59, 0.11);
  border: 1px solid rgba(196, 122, 59, 0.16);
  border-radius: 7px;
}

:where(.token.comment, .tok-comment, .hljs-comment) { color: #8b7d6b; }
:where(.token.keyword, .tok-keyword, .hljs-keyword) { color: #7f5ab6; }
:where(.token.string, .tok-string, .hljs-string) { color: #3f7f5f; }
:where(.token.number, .tok-number, .hljs-number) { color: #b36b38; }
:where(.token.function, .tok-fn, .hljs-title, .hljs-function) { color: #2e6f9f; }
:where(.token.operator, .tok-op) { color: #9a5b42; }

/* Alerts */
:where(.alert, .notice, .message, .toast) {
  border-color: var(--pc-line);
  border-radius: var(--pc-radius);
  box-shadow: var(--pc-shadow-soft);
}

:where(.success, .alert-success, .message-success) {
  color: #315f42;
  background-color: rgba(77, 138, 97, 0.12);
}

:where(.error, .alert-error, .message-error) {
  color: #8f3e37;
  background-color: rgba(180, 83, 74, 0.12);
}

/* Scrollbar */
* {
  scrollbar-color: rgba(105, 86, 61, 0.35) rgba(255, 250, 240, 0.65);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 250, 240, 0.65);
}

::-webkit-scrollbar-thumb {
  background: rgba(105, 86, 61, 0.30);
  border: 2px solid rgba(255, 250, 240, 0.86);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(47, 125, 107, 0.42);
}

/* Compatibility boost for pages whose local CSS has stronger selectors.
   Keep this section cosmetic-only: no width/height/grid/flex/position changes. */
:where(
  .login-container,
  .continue-card,
  .feature-card,
  .gesp-panel,
  .panel-card,
  .paper-card,
  .question-meta-card,
  .source-panel,
  .list-panel,
  .detail-panel
) {
  background-color: var(--pc-surface) !important;
  border-color: var(--pc-line) !important;
  border-radius: var(--pc-radius) !important;
  box-shadow: var(--pc-shadow-soft) !important;
}

:where(
  .login-btn,
  .btn-refresh,
  .src-tab,
  .sel-level-btn,
  .level-btn,
  .filter-btn,
  .search-btn,
  .back-btn,
  .start-btn,
  .continue-btn,
  .save-btn,
  .edit-btn,
  .delete-btn,
  .btn-help,
  [class*="btn"]
) {
  border-radius: 999px !important;
  font-family: var(--pc-font) !important;
}

:where(
  .login-btn,
  .btn-primary,
  .btn-success,
  .start-btn,
  .continue-btn,
  .save-btn,
  .search-btn,
  .src-tab.active,
  .sel-level-btn.active,
  .level-btn.active
) {
  color: #fffaf0 !important;
  background: linear-gradient(135deg, var(--pc-primary), var(--pc-primary-strong)) !important;
  border-color: rgba(36, 102, 87, 0.34) !important;
  box-shadow: 0 12px 26px rgba(47, 125, 107, 0.20) !important;
}

:where(
  .btn-refresh,
  .btn-help,
  .src-tab:not(.active),
  .sel-level-btn:not(.active),
  .level-btn:not(.active),
  .filter-btn,
  .back-btn,
  .edit-btn
) {
  color: var(--pc-ink) !important;
  background: rgba(255, 250, 240, 0.78) !important;
  border-color: var(--pc-line-strong) !important;
}


/* Student global navbar alignment: same mascot, same horizontal anchors. */
.navbar > .nav-container {
  width: min(1180px, calc(100vw - 48px));
  max-width: 1180px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) 260px !important;
  align-items: center !important;
}

.navbar > .nav-container > .logo {
  width: 260px !important;
  min-width: 0 !important;
  justify-self: start !important;
}

.navbar > .nav-container > .nav-right {
  width: 260px !important;
  min-width: 0 !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  justify-self: end !important;
  overflow: visible !important;
}

.navbar > .nav-container .logo-mark {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  display: block !important;
  flex: 0 0 32px !important;
  object-fit: contain !important;
}

.navbar > .nav-container .logo-icon {
  display: none !important;
}

.navbar > .nav-container .logo-text {
  white-space: nowrap !important;
}

.navbar > .nav-container > .nav-menu {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center !important;
  justify-self: center !important;
}

@media (max-width: 900px) {
  .navbar > .nav-container {
    width: calc(100vw - 28px);
    display: flex !important;
    grid-template-columns: none !important;
  }
  .navbar > .nav-container > .logo,
  .navbar > .nav-container > .nav-right {
    flex-basis: auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
}


/* Mock exam nav compatibility: hidden exam menu must not create a grid column. */
.navbar > .nav-container > #navMenuExam {
  display: none !important;
}

.navbar > .nav-container > #navMenuSelect,
.navbar > .nav-container > .nav-menu:not(#navMenuExam) {
  grid-column: 2 !important;
}

.navbar > .nav-container > .logo {
  grid-column: 1 !important;
}

.navbar > .nav-container > .nav-right {
  grid-column: 3 !important;
}