/* ParallelX visual system. Keep this last: page-specific layouts stay in their pages. */
:root {
  --px-blue: #1c6ce5;
  --px-blue-hover: #155ac4;
  --px-blue-soft: #edf4ff;
  --px-bg: #f3f5f9;
  --px-text: #202b3d;
  --px-text-secondary: #657187;
  --px-border: #dfe5ee;
  --px-white: #fff;
  --px-surface-muted: #f8fafd;
  --px-radius: 14px;
  --px-radius-sm: 8px;
  --px-shadow: 0 2px 8px rgba(24, 43, 77, .035), 0 8px 24px rgba(24, 43, 77, .035);
  --px-shadow-raised: 0 8px 28px rgba(24, 43, 77, .08);
  --px-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --fb-blue: var(--px-blue);
  --fb-blue-hover: var(--px-blue-hover);
  --fb-bg: var(--px-bg);
  --fb-text: var(--px-text);
  --fb-text-secondary: var(--px-text-secondary);
  --fb-border: var(--px-border);
  --fb-white: var(--px-white);
  --fb-radius: var(--px-radius);
  --fb-radius-sm: var(--px-radius-sm);
  --fb-font: var(--px-font);
}
body[data-px-page] { background: var(--px-bg); color: var(--px-text); font-family: var(--px-font); -webkit-font-smoothing: antialiased; line-height: 1.6; }
body[data-px-page], body[data-px-page] *, body[data-px-page] *::before, body[data-px-page] *::after { box-sizing: border-box; }
body[data-px-page] :is(button, input, select, textarea) { font-family: inherit; }
body[data-px-page] :is(h1, h2, h3, h4, h5, h6) { line-height: 1.35; letter-spacing: -.02em; }
body[data-px-page] .text-muted { color: var(--px-text-secondary) !important; }
body[data-px-page] .text-primary { color: var(--px-blue) !important; }
body[data-px-page] :is(.page-wrapper, .page-container) { width: 100%; max-width: 1400px; margin: 28px auto; padding: 0 24px 32px; }
body[data-px-page] :is(.hero-card, .welcome-card) h1 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); color: var(--px-text); margin-bottom: .65rem; }
body[data-px-page] :is(.hero-card, .welcome-card) p { color: var(--px-text-secondary); }
body[data-px-page] :is(.card, .hero-card, .welcome-card, .class-card, .grades-card, .table-container, .shadow-card, .content-container, .diagram-section, .conversation-sidebar, .friends-sidebar, .friend-activities-container, .document-list, .editor-container) {
  border: 1px solid var(--px-border); border-radius: var(--px-radius); box-shadow: var(--px-shadow);
}
body[data-px-page] :is(.hero-card, .welcome-card) { background: var(--px-white); padding: 28px 30px; margin-bottom: 24px; }
body[data-px-page] .card { padding: 24px; }
body[data-px-page] .card-title { color: var(--px-text); font-size: 1.25rem; font-weight: 650; }
body[data-px-page] :is(.activity-card, .submission-item, .grade-item, .community-board-section, .class-item) { border-color: var(--px-border); border-radius: 10px; }
body[data-px-page] :is(.activity-card, .grades-card, .shadow-card):hover { transform: none; box-shadow: var(--px-shadow-raised); }
body[data-px-page] .content-container > .main-content { margin: 0; max-width: none; min-width: 0; padding: 24px; }
body[data-px-page] :is(.sidebar, .conversation-sidebar, .friends-sidebar) { border-color: var(--px-border); background: var(--px-surface-muted); }
body[data-px-page] :is(.class-item, .conversation-item):hover { border-color: #b7cef1; background: var(--px-blue-soft); }
body[data-px-page] .class-item.active { background: var(--px-blue-soft); color: var(--px-blue); border-color: #adc9f2; box-shadow: inset 3px 0 var(--px-blue); }
body[data-px-page] .class-item.active .text-muted { color: #4e6d98 !important; }
body[data-px-page] .page-container > .main-container > .content-container { margin: 0; }
body[data-px-page="ai_characters"] .main-container { border: 1px solid var(--px-border); border-radius: var(--px-radius); box-shadow: var(--px-shadow); }
body[data-px-page] .character-card { border: 1px solid var(--px-border); border-radius: 10px; box-shadow: none; }
body[data-px-page] .character-card:hover, body[data-px-page] .character-card.active { background: var(--px-blue-soft); border-color: #adc9f2; transform: none; }
body[data-px-page] .conversation-item:hover { transform: none; }
body[data-px-page] .conversation-item.active { background: var(--px-blue-soft); box-shadow: none; }
body[data-px-page] :is(.btn-outline-warning) { color: #946200; border-color: #dbbf7c; }
body[data-px-page] :is(.btn-outline-warning):hover { color: #805300; background: #fff5dc; }
body[data-px-page] .btn-outline-info { color: #08728a; border-color: #a0cbd6; }
body[data-px-page] .btn-outline-info:hover { color: #06596c; background: #eaf7fa; }
body[data-px-page="activity_management"] .btn-group-vertical { gap: 5px; }
body[data-px-page="activity_management"] .btn-group-vertical > .btn { border-radius: 7px; margin-top: 0; }
body[data-px-page="conversation"] .chat-container, body[data-px-page="shared_space"] .chat-container { border: 1px solid var(--px-border); box-shadow: var(--px-shadow); border-radius: var(--px-radius); }
body[data-px-page] :is(.chat-header, .input-container) { border-color: var(--px-border); }
body[data-px-page="chat"] #mainContainer > .container-fluid > .row > [class*="col-"] { padding: 0 6px; }
/* Navigation remains white with the established blue wordmark. */
body[data-px-page] .top-nav { border-bottom-color: var(--px-border); box-shadow: 0 2px 8px rgba(24,43,77,.025); }
body[data-px-page] :is(.top-nav, .mobile-nav-header) .nav-brand { color: var(--px-blue) !important; -webkit-text-fill-color: var(--px-blue) !important; }
body[data-px-page] .module-btn { border-radius: 8px; transition: background-color .16s ease, color .16s ease; }
body[data-px-page] .module-btn.active { background: var(--px-blue-soft); color: var(--px-blue); }
body[data-px-page] .dropdown-menu { border: 1px solid var(--px-border); border-radius: 12px; padding: 6px; box-shadow: 0 12px 32px rgba(24,43,77,.12); }
body[data-px-page] .dropdown-item { border-radius: 7px; padding: 9px 12px; font-size: .9rem; }
body[data-px-page] .dropdown-item:hover { background: var(--px-blue-soft); color: var(--px-blue); }
/* Consistent control density. Small controls and editor toolbars keep their own sizing. */
body[data-px-page] .btn { border-radius: var(--px-radius-sm); font-weight: 600; line-height: 1.45; transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease; }
body[data-px-page] .btn:not(.btn-sm):not(.btn-lg) { padding: .55rem .95rem; }
body[data-px-page] .btn-sm { padding: .35rem .65rem; }
body[data-px-page] :is(.btn-primary, .btn-gradient) { background: var(--px-blue); border: 1px solid var(--px-blue); color: white; box-shadow: 0 1px 2px rgba(24,43,77,.07); }
body[data-px-page] :is(.btn-primary, .btn-gradient):hover { background: var(--px-blue-hover); border-color: var(--px-blue-hover); color: white; transform: none; box-shadow: 0 3px 8px rgba(28,108,229,.15); }
body[data-px-page] :is(.btn-outline-primary, .btn-outline-gradient) { color: var(--px-blue); border: 1px solid #b5cced; background: var(--px-white); }
body[data-px-page] :is(.btn-outline-primary, .btn-outline-gradient):hover { color: var(--px-blue-hover); background: var(--px-blue-soft); border-color: var(--px-blue); transform: none; }
body[data-px-page] .btn-outline-secondary { color: #526078; border-color: #ccd5e2; }
body[data-px-page] .btn-outline-secondary:hover { color: var(--px-text); background: #eaf0f7; border-color: #b9c5d6; }
body[data-px-page] :is(.btn:disabled, .fb-btn-primary:disabled) { opacity: .55; cursor: not-allowed; box-shadow: none; }
body[data-px-page] :is(.form-control, .form-select) { border: 1px solid #ced7e4; border-radius: var(--px-radius-sm); color: var(--px-text); padding: .6rem .8rem; background-color: var(--px-white); transition: border-color .16s ease, box-shadow .16s ease; }
body[data-px-page] :is(.form-control-sm, .form-select-sm) { padding-top: .35rem; padding-bottom: .35rem; }
body[data-px-page] :is(.form-control, .form-select, .fb-input, .fb-select):focus { border-color: var(--px-blue); box-shadow: 0 0 0 3px rgba(28,108,229,.14); }
body[data-px-page] :is(.form-control, .fb-input)::placeholder { color: #8792a5; }
body[data-px-page] .form-control:disabled { background: #f0f3f7; color: var(--px-text-secondary); }
body[data-px-page] :is(.form-label, .fb-form-label) { font-weight: 600; color: #47546b; font-size: .9rem; }
body[data-px-page] :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--px-blue); outline-offset: 3px; }
body[data-px-page] .nav-tabs { border-bottom-color: var(--px-border); gap: 4px; }
body[data-px-page] .nav-tabs .nav-link { color: var(--px-text-secondary); border-radius: 8px 8px 0 0; font-weight: 600; }
body[data-px-page] .nav-tabs .nav-link.active { color: var(--px-blue); background: var(--px-blue-soft); border-color: var(--px-border) var(--px-border) transparent; }
/* Quiet table and dialog surfaces; status colours remain meaningful. */
body[data-px-page] .table { color: var(--px-text); border-color: var(--px-border); }
body[data-px-page] .table thead th { background: var(--px-surface-muted); color: #526078; border-bottom: 1px solid var(--px-border); font-size: .83rem; font-weight: 650; padding-top: 13px; padding-bottom: 13px; }
body[data-px-page] .table > tbody > tr > :is(td, th) { padding-top: 13px; padding-bottom: 13px; vertical-align: middle; }
body[data-px-page] .table tbody tr:hover { background: #f6f9fe; }
body[data-px-page] .modal-content { border: 1px solid var(--px-border); border-radius: 16px; box-shadow: 0 20px 64px rgba(24,43,77,.18); }
body[data-px-page] .modal-header { background: var(--px-white); color: var(--px-text); border-bottom: 1px solid var(--px-border); padding: 20px 24px; border-radius: 16px 16px 0 0; }
body[data-px-page] .modal-title { font-weight: 650; font-size: 1.15rem; }
body[data-px-page] .modal-header .btn-close { filter: none; opacity: .55; }
body[data-px-page] .modal-body { padding: 24px; }
body[data-px-page] .modal-footer { border-top: 1px solid var(--px-border); padding: 16px 24px; background: var(--px-surface-muted); border-radius: 0 0 16px 16px; }
body[data-px-page] .empty-state { padding: 40px 24px; color: var(--px-text-secondary); border: 1px dashed #d1dbe9; border-radius: var(--px-radius); background: #fbfcfe; }
body[data-px-page] .empty-state i { color: #7b9ac5; opacity: .65; font-size: 2.4rem; }
body[data-px-page] .empty-state .btn i { font-size: 1em; color: inherit; opacity: 1; margin-bottom: 0; }
body[data-px-page] .empty-state h5 { color: #526078; font-size: 1.1rem; }
body[data-px-page] .badge { border-radius: 6px; font-weight: 600; padding: .38em .6em; }
body[data-px-page] .badge.bg-light { background: #eef2f7 !important; color: #526078 !important; }
body[data-px-page] .badge-gradient { background: var(--px-blue-soft); color: var(--px-blue); }
body[data-px-page] .alert { border-radius: 10px; line-height: 1.6; }
body[data-px-page] ::-webkit-scrollbar-thumb { background: #c2ccd9; border: 2px solid #f3f5f9; }
body[data-px-page] ::-webkit-scrollbar-thumb:hover { background: #99a9bc; }
/* Public introduction and authentication retain their existing composition. */
body[data-px-page="index"] .hero-section { background: linear-gradient(120deg, #256de0 0%, #397fef 100%); }
body[data-px-page="index"] .feature-card { border: 1px solid var(--px-border); border-radius: 16px; box-shadow: var(--px-shadow); }
body[data-px-page="index"] .feature-card:hover { transform: translateY(-3px); box-shadow: var(--px-shadow-raised); }
body[data-px-page].fb-auth-page { background: radial-gradient(ellipse at 50% 10%, #e9f1ff, transparent 65%), var(--px-bg); padding: 76px 20px 40px; }
body[data-px-page] .fb-auth-card { max-width: 410px; padding: 30px; border: 1px solid var(--px-border); box-shadow: var(--px-shadow-raised); border-radius: 16px; }
body[data-px-page] .fb-auth-card-wide { max-width: 500px; }
body[data-px-page] .fb-auth-logo { font-size: 30px; margin-top: 0; margin-bottom: 20px; }
body[data-px-page] .fb-auth-subtitle { font-size: 14px; margin-bottom: 26px; }
body[data-px-page] .fb-input { font-size: 15px; padding: 13px 14px; }
body[data-px-page] .fb-btn-primary { font-size: 15px; padding: 13px; transition: background-color .16s ease; }
body[data-px-page] .fb-auth-locale button { padding: 7px 10px; border-radius: 7px; }
body[data-px-page] .fb-auth-locale button.is-active { background: var(--px-blue-soft); }
@media (min-width: 992px) {
  body[data-px-page] .mobile-nav-toggle.mobile-only { display: none; }
}
@media (max-width: 768px) {
  body[data-px-page] :is(.page-wrapper, .page-container) { margin-top: 16px; padding-left: 14px; padding-right: 14px; }
  body[data-px-page] :is(.card, .hero-card, .welcome-card, .class-card) { padding: 20px; }
  body[data-px-page] .content-container > .main-content { padding: 16px; }
  body[data-px-page="activity_management"] .activity-card > .d-flex { flex-direction: column; gap: 16px; }
  body[data-px-page="activity_management"] .activity-card .btn-group-vertical { flex-direction: row; flex-wrap: wrap; width: 100%; gap: 6px; }
  body[data-px-page="activity_management"] .activity-card .btn-group-vertical > .btn { flex: 0 1 auto; }
  body[data-px-page="chat"] #mainContainer { height: auto; }
  body[data-px-page="chat"] #mainContainer > .container-fluid > .row { height: auto !important; row-gap: 16px; }
  body[data-px-page="chat"] :is(.conversation-sidebar, .friends-sidebar, .friend-activities-container) { height: auto; min-height: 220px; max-height: 65vh; overflow-y: auto; }
  body[data-px-page] .modal-dialog { margin: 12px; }
  body[data-px-page] :is(.modal-header, .modal-body, .modal-footer) { padding: 18px; }
  body[data-px-page] .fb-auth-card { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-px-page] *, body[data-px-page] *::before, body[data-px-page] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}