/* ==========================================================================
   LightMoon · 悦珂谷主题 (lightmoon.css)

   A clean, warm, and meticulously crafted theme for the YueKeGu education
   platform. Built on Bootstrap 3 with modern design principles.

   Design Tokens:
   -- Primary:     #4F6CF7 (trustworthy blue)
   -- Accent:      #F5A623 (warm gold — the "jade" warmth)
   -- Background:  #F7F8FA (soft warm gray)
   -- Surface:     #FFFFFF
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens (CSS Custom Properties)
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --yk-primary:         #4F6CF7;
  --yk-primary-dark:    #3B55D9;
  --yk-primary-darker:  #2D44B8;
  --yk-primary-light:   #EEF1FF;
  --yk-primary-subtle:  #F5F7FF;
  --yk-accent:          #F5A623;
  --yk-accent-dark:     #D9911E;
  --yk-accent-light:    #FFF8E1;

  /* Semantic */
  --yk-success:         #48BB78;
  --yk-success-light:   #F0FFF4;
  --yk-warning:         #ED8936;
  --yk-warning-light:   #FFFAF0;
  --yk-danger:          #F56565;
  --yk-danger-light:    #FFF5F5;
  --yk-info:            #4299E1;
  --yk-info-light:      #EBF8FF;

  /* Neutral */
  --yk-bg:              #F7F8FA;
  --yk-bg-warm:         #FAF9F7;
  --yk-surface:         #FFFFFF;
  --yk-text:            #1A202C;
  --yk-text-secondary:  #4A5568;
  --yk-text-muted:      #A0AEC0;
  --yk-border:          #E2E8F0;
  --yk-border-light:    #EDF2F7;

  /* Sizing & Spacing */
  --yk-radius-sm:      4px;
  --yk-radius:         8px;
  --yk-radius-lg:      12px;
  --yk-radius-xl:      16px;

  /* Layout shell：弹性布局的居中最大宽度（fluid 模式下被覆盖为 100%） */
  --yk-shell-max:      1280px;
  --yk-shadow-sm:      0 1px 2px rgba(0,0,0,0.05);
  --yk-shadow:         0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --yk-shadow-md:      0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  --yk-shadow-lg:      0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);
  --yk-shadow-xl:      0 20px 25px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.04);

  /* Typography */
  --yk-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                        "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
  --yk-font-mono:      "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --yk-line-height:    1.6;
  --yk-line-height-sm: 1.4;

  /* Transitions */
  --yk-transition:     all 0.2s ease;
  --yk-transition-slow: all 0.35s ease;
}

/* --------------------------------------------------------------------------
   2. Base Reset & Body
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--yk-font);
  color: var(--yk-text);
  background-color: var(--yk-bg);
  line-height: var(--yk-line-height);
  /* 注意：这里必须用 clip 而不是 hidden。
     hidden 会让 body 成为滚动容器，导致后代 position:sticky（.sns-topnav 吸顶）失效；
     clip 同样裁剪横向溢出，但不创建滚动容器。
     另外 minify 会对重复属性去重，所以只能写一条。 */
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   2b. 弹性布局
   整站的盒式（boxed）/ 通栏（fluid）与最大宽度已统一收敛到
   common\assets\LayoutSwitchAsset（common/assets/layout/layout-switch.css），
   由 body 上的 .yk-layout-boxed / .yk-layout-fluid + --yk-shell-max 控制。
   本主题只保留 :root 里的 --yk-shell-max 默认值，禁止在页面里另写 max-width，
   否则会出现「某个页面不跟随全局设置」的不一致问题。
   -------------------------------------------------------------------------- */

/* Selection */
::-moz-selection {
  background: var(--yk-primary-light);
  color: var(--yk-primary-dark);
}
::selection {
  background: var(--yk-primary-light);
  color: var(--yk-primary-dark);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E0;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #A0AEC0;
}

/* Focus */
a:focus,
.btn:focus,
.form-control:focus {
  outline: none !important;
}
a:focus-visible,
.btn:focus-visible,
.form-control:focus-visible {
  box-shadow: 0 0 0 3px rgba(79, 108, 247, 0.25);
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--yk-font);
  font-weight: 600;
  color: var(--yk-text);
  line-height: var(--yk-line-height-sm);
}

h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }

a {
  color: var(--yk-primary);
  transition: var(--yk-transition);
}
a:hover,
a:focus {
  color: var(--yk-primary-dark);
  text-decoration: none;
}

p {
  margin-bottom: 1rem;
  color: var(--yk-text-secondary);
}

small, .small {
  font-size: 0.857rem;
  color: var(--yk-text-muted);
}

.text-muted {
  color: var(--yk-text-muted) !important;
}
.text-primary {
  color: var(--yk-primary) !important;
}
.text-success {
  color: var(--yk-success) !important;
}
.text-warning {
  color: var(--yk-warning) !important;
}
.text-danger {
  color: var(--yk-danger) !important;
}
.text-info {
  color: var(--yk-info) !important;
}

code {
  color: #E53E3E;
  background: #FFF5F5;
  padding: 2px 6px;
  border-radius: var(--yk-radius-sm);
  font-family: var(--yk-font-mono);
  font-size: 0.9em;
}

hr {
  border-color: var(--yk-border);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

blockquote {
  border-left: 4px solid var(--yk-primary);
  background: var(--yk-primary-subtle);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--yk-radius) var(--yk-radius) 0;
  color: var(--yk-text-secondary);
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   4. Navigation / Navbar
   -------------------------------------------------------------------------- */
.navbar {
  border: none !important;
  border-radius: 0 !important;
  margin-bottom: 0;
  min-height: 56px;
  box-shadow: var(--yk-shadow);
  background: var(--yk-surface) !important;
}

.navbar-default {
  background: var(--yk-surface) !important;
  border-bottom: 1px solid var(--yk-border-light) !important;
}

.navbar-header {
  display: flex;
  align-items: center;
}

.navbar-brand {
  height: 56px;
  padding: 8px 15px;
  display: flex;
  align-items: center;
}

.navbar-brand img {
  max-height: 40px;
  width: auto;
}

.navbar-nav > li > a {
  padding: 18px 15px;
  color: var(--yk-text-secondary) !important;
  font-size: 0.93rem;
  font-weight: 500;
  transition: var(--yk-transition);
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
  color: var(--yk-primary) !important;
  background: transparent !important;
}

.navbar-nav > li > a .glyphicon {
  margin-right: 4px;
  font-size: 0.86rem;
}

.navbar-nav > .active > a {
  color: var(--yk-primary) !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 var(--yk-primary);
}

.navbar-toggle {
  border: none !important;
  margin-top: 11px;
  margin-bottom: 11px;
  padding: 8px 10px;
  border-radius: var(--yk-radius-sm);
  transition: var(--yk-transition);
}
.navbar-toggle:hover,
.navbar-toggle:focus {
  background: var(--yk-primary-light) !important;
}
.navbar-toggle .icon-bar {
  background: var(--yk-text-secondary) !important;
  border-radius: 2px;
}

/* Navbar dropdown */
.navbar-nav .dropdown-menu {
  border: none;
  border-radius: var(--yk-radius);
  box-shadow: var(--yk-shadow-lg);
  padding: 8px 0;
  margin-top: 4px;
}
.navbar-nav .dropdown-menu > li > a {
  padding: 8px 20px;
  color: var(--yk-text-secondary);
  font-size: 0.93rem;
  transition: var(--yk-transition);
}
.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav .dropdown-menu > li > a:focus {
  background: var(--yk-primary-light);
  color: var(--yk-primary);
}
.navbar-nav .dropdown-menu > li > a .glyphicon {
  margin-right: 8px;
  color: var(--yk-text-muted);
}

/* Badge in nav */
.navbar-nav .badge {
  position: absolute;
  top: 10px;
  right: 4px;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 10px;
  background: var(--yk-danger);
  color: #fff;
  min-width: 18px;
  text-align: center;
  line-height: 1;
}

/* Page title in navbar */
.navbar .page-title {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--yk-text);
  padding: 17px 15px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   4b. Top Navigation (.sns-topnav)
   站点顶部导航条，首页 (site/index) 与全站主布局 (layouts/main) 共用。
   -------------------------------------------------------------------------- */
.sns-topnav {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 60px;
  padding: 0 24px;
  background: var(--yk-surface);
  border-bottom: 1px solid var(--yk-border-light);
  box-shadow: var(--yk-shadow-sm);
}

.sns-topnav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.sns-topnav-brand img {
  height: 34px;
  width: auto;
  display: block;
}
.sns-topnav-brand:hover,
.sns-topnav-brand:focus {
  text-decoration: none;
  opacity: 0.9;
}

.sns-topnav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sns-topnav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 60px;
  padding: 0 14px;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--yk-text-secondary);
  text-decoration: none;
  transition: var(--yk-transition);
  white-space: nowrap;
}
.sns-topnav-links a:hover,
.sns-topnav-links a:focus {
  color: var(--yk-primary);
  text-decoration: none;
  background: transparent;
}
.sns-topnav-links a.active {
  color: var(--yk-primary);
  font-weight: 600;
}
.sns-topnav-links a.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--yk-primary);
}
.sns-topnav-links a .glyphicon {
  font-size: 0.85rem;
  opacity: 0.85;
}

.sns-topnav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.sns-topnav-actions .btn {
  border-radius: var(--yk-radius-sm);
  font-size: 0.86rem;
  padding: 6px 14px;
  font-weight: 500;
}

/* 窄屏：隐藏中间导航链接，保留品牌与操作区（避免换行挤爆） */
@media (max-width: 767px) {
  .sns-topnav {
    gap: 12px;
    padding: 0 14px;
  }
  .sns-topnav-links {
    display: none;
  }
  .sns-topnav-brand img {
    height: 28px;
  }
}

/* --------------------------------------------------------------------------
   5. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--yk-surface);
  border-top: 1px solid var(--yk-border-light);
  padding: 20px 0;
  color: var(--yk-text-muted);
  font-size: 0.86rem;
}
.footer a {
  color: var(--yk-text-secondary);
}
.footer a:hover {
  color: var(--yk-primary);
}
.footer p {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   6. Cards (replacing Bootstrap panels)
   -------------------------------------------------------------------------- */
.panel,
.box,
.padding-md,
.main-box {
  background: var(--yk-surface);
  border: none !important;
  border-radius: var(--yk-radius) !important;
  box-shadow: var(--yk-shadow) !important;
  margin-bottom: 20px;
}

.panel-heading,
.box-header {
  background: transparent !important;
  border-bottom: 1px solid var(--yk-border-light) !important;
  padding: 16px 20px !important;
  border-radius: var(--yk-radius) var(--yk-radius) 0 0 !important;
  color: var(--yk-text) !important;
  font-weight: 600;
  font-size: 1rem;
}

.panel-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--yk-text);
}

.panel-body,
.box-body {
  padding: 20px !important;
}

.panel-footer {
  background: var(--yk-bg) !important;
  border-top: 1px solid var(--yk-border-light) !important;
  padding: 12px 20px !important;
  border-radius: 0 0 var(--yk-radius) var(--yk-radius) !important;
}

/* Panel contextual variants */
.panel-primary {
  border-top: 3px solid var(--yk-primary) !important;
}
.panel-success {
  border-top: 3px solid var(--yk-success) !important;
}
.panel-warning {
  border-top: 3px solid var(--yk-warning) !important;
}
.panel-danger {
  border-top: 3px solid var(--yk-danger) !important;
}
.panel-info {
  border-top: 3px solid var(--yk-info) !important;
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--yk-radius);
  padding: 8px 18px;
  font-size: 0.93rem;
  font-weight: 500;
  line-height: 1.4;
  transition: var(--yk-transition);
  border: 1px solid transparent;
}

.btn:hover,
.btn:focus {
  transform: translateY(-1px);
  box-shadow: var(--yk-shadow-sm);
}

.btn:active {
  transform: translateY(0);
}

/* Default */
.btn-default {
  color: var(--yk-text-secondary);
  background: var(--yk-surface);
  border-color: var(--yk-border);
}
.btn-default:hover,
.btn-default:focus {
  color: var(--yk-text);
  background: var(--yk-bg);
  border-color: #CBD5E0;
}

/* Primary */
.btn-primary {
  color: #fff;
  background: var(--yk-primary);
  border-color: var(--yk-primary);
}
.btn-primary:hover,
.btn-primary:focus {
  color: #fff;
  background: var(--yk-primary-dark);
  border-color: var(--yk-primary-dark);
}

/* Success */
.btn-success {
  color: #fff;
  background: var(--yk-success);
  border-color: var(--yk-success);
}
.btn-success:hover,
.btn-success:focus {
  background: #38A169;
  border-color: #38A169;
}

/* Warning */
.btn-warning {
  color: #fff;
  background: var(--yk-warning);
  border-color: var(--yk-warning);
}
.btn-warning:hover,
.btn-warning:focus {
  background: #DD6B20;
  border-color: #DD6B20;
}

/* Danger */
.btn-danger {
  color: #fff;
  background: var(--yk-danger);
  border-color: var(--yk-danger);
}
.btn-danger:hover,
.btn-danger:focus {
  background: #E53E3E;
  border-color: #E53E3E;
}

/* Info */
.btn-info {
  color: #fff;
  background: var(--yk-info);
  border-color: var(--yk-info);
}
.btn-info:hover,
.btn-info:focus {
  background: #3182CE;
  border-color: #3182CE;
}

/* Link button */
.btn-link {
  color: var(--yk-primary) !important;
  font-weight: 500;
}
.btn-link:hover {
  color: var(--yk-primary-dark) !important;
  text-decoration: none !important;
}

/* Button sizes */
.btn-lg {
  padding: 12px 28px;
  font-size: 1.05rem;
  border-radius: var(--yk-radius-lg);
}
.btn-sm {
  padding: 5px 12px;
  font-size: 0.857rem;
}
.btn-xs {
  padding: 3px 8px;
  font-size: 0.786rem;
  border-radius: var(--yk-radius-sm);
}

/* Button groups */
.btn-group .btn {
  border-radius: 0;
}
.btn-group .btn:first-child {
  border-radius: var(--yk-radius) 0 0 var(--yk-radius);
}
.btn-group .btn:last-child {
  border-radius: 0 var(--yk-radius) var(--yk-radius) 0;
}

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
.form-control {
  border: 1px solid var(--yk-border);
  border-radius: var(--yk-radius);
  padding: 8px 14px;
  height: auto;
  font-size: 0.93rem;
  color: var(--yk-text);
  box-shadow: none !important;
  transition: var(--yk-transition);
  font-family: var(--yk-font);
}

.form-control:focus {
  border-color: var(--yk-primary);
  box-shadow: 0 0 0 3px rgba(79, 108, 247, 0.15) !important;
}

.form-control[disabled],
.form-control[readonly] {
  background: var(--yk-bg);
  cursor: not-allowed;
}

.form-control::-webkit-input-placeholder {
  color: var(--yk-text-muted);
  opacity: 1;
}
.form-control:-moz-placeholder {
  color: var(--yk-text-muted);
}
.form-control::-moz-placeholder {
  color: var(--yk-text-muted);
}
.form-control:-ms-input-placeholder {
  color: var(--yk-text-muted);
}

label {
  font-weight: 600;
  color: var(--yk-text);
  margin-bottom: 6px;
  font-size: 0.93rem;
}

.form-group {
  margin-bottom: 18px;
}

.help-block {
  color: var(--yk-text-muted);
  font-size: 0.857rem;
  margin-top: 4px;
}

/* Input groups */
.input-group-addon {
  border-color: var(--yk-border);
  background: var(--yk-bg);
  color: var(--yk-text-secondary);
  min-width: 38px;
  border-radius: var(--yk-radius);
}

.input-group .form-control:first-child,
.input-group-addon:first-child {
  border-radius: var(--yk-radius) 0 0 var(--yk-radius);
}
.input-group .form-control:last-child,
.input-group-addon:last-child {
  border-radius: 0 var(--yk-radius) var(--yk-radius) 0;
}

/* Has-error state */
.has-error .form-control {
  border-color: var(--yk-danger);
}
.has-error .form-control:focus {
  box-shadow: 0 0 0 3px rgba(245, 101, 101, 0.15) !important;
}
.has-error .help-block {
  color: var(--yk-danger);
}

/* Has-success state */
.has-success .form-control {
  border-color: var(--yk-success);
}

/* Checkbox & Radio */
.checkbox,
.radio {
  padding-left: 24px;
  position: relative;
}
.checkbox input[type="checkbox"],
.radio input[type="radio"] {
  margin-left: -24px;
  margin-top: 3px;
}

/* Select */
select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234A5568' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */
.table {
  margin-bottom: 0;
}

.table > thead > tr > th {
  border-bottom: 2px solid var(--yk-border-light);
  color: var(--yk-text-secondary);
  font-weight: 600;
  font-size: 0.857rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 12px 12px;
  vertical-align: middle;
}

.table > thead > tr > th a {
  color: var(--yk-text-secondary);
}
.table > thead > tr > th a:hover {
  color: var(--yk-primary);
}

.table > tbody > tr > td {
  padding: 12px;
  vertical-align: middle;
  border-top: 1px solid var(--yk-border-light);
  color: var(--yk-text-secondary);
  font-size: 0.93rem;
}

.table > tbody > tr:hover {
  background: var(--yk-primary-subtle);
}

.table > tbody > tr.active > td {
  background: var(--yk-primary-light);
}

.table-bordered {
  border: 1px solid var(--yk-border-light);
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border: 1px solid var(--yk-border-light);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: var(--yk-bg);
}

/* Table responsive wrapper */
.table-responsive {
  border: none;
  margin-bottom: 0;
}

/* GridView specific */
.grid-view {
  background: var(--yk-surface);
  border-radius: var(--yk-radius);
  box-shadow: var(--yk-shadow);
  overflow: hidden;
}
.grid-view .table {
  margin-bottom: 0;
}
.grid-view .summary {
  padding: 10px 20px;
  color: var(--yk-text-muted);
  font-size: 0.857rem;
  background: var(--yk-bg);
  border-bottom: 1px solid var(--yk-border-light);
}

/* --------------------------------------------------------------------------
   10. Alerts
   -------------------------------------------------------------------------- */
.alert {
  border: none;
  border-radius: var(--yk-radius);
  padding: 14px 18px;
  font-size: 0.93rem;
  box-shadow: var(--yk-shadow-sm);
  margin-bottom: 20px;
}

.alert-success {
  background: var(--yk-success-light);
  color: #276749;
  border-left: 4px solid var(--yk-success);
}
.alert-info {
  background: var(--yk-info-light);
  color: #2B6CB0;
  border-left: 4px solid var(--yk-info);
}
.alert-warning {
  background: var(--yk-warning-light);
  color: #9C4221;
  border-left: 4px solid var(--yk-warning);
}
.alert-danger {
  background: var(--yk-danger-light);
  color: #9B2C2C;
  border-left: 4px solid var(--yk-danger);
}

.alert .close {
  opacity: 0.4;
}
.alert .close:hover {
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   11. Badges & Labels
   -------------------------------------------------------------------------- */
.badge {
  background: var(--yk-bg);
  color: var(--yk-text-secondary);
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 0.786rem;
}

.label {
  border-radius: var(--yk-radius-sm);
  padding: 3px 8px;
  font-size: 0.786rem;
  font-weight: 500;
}

.label-default {
  background: var(--yk-bg);
  color: var(--yk-text-secondary);
}
.label-primary {
  background: var(--yk-primary-light);
  color: var(--yk-primary);
}
.label-success {
  background: var(--yk-success-light);
  color: #276749;
}
.label-warning {
  background: var(--yk-warning-light);
  color: #9C4221;
}
.label-danger {
  background: var(--yk-danger-light);
  color: #9B2C2C;
}
.label-info {
  background: var(--yk-info-light);
  color: #2B6CB0;
}

/* --------------------------------------------------------------------------
   12. Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumb {
  background: transparent;
  padding: 12px 0;
  margin-bottom: 16px;
  border-radius: 0;
  font-size: 0.857rem;
  font-weight: normal;
  box-shadow: none;
  text-shadow: none;
}

.breadcrumb > li {
  color: var(--yk-text-muted);
  line-height: 1.6;
}

.breadcrumb > li > a {
  color: var(--yk-text-secondary);
  text-decoration: none;
}
.breadcrumb > li > a:hover {
  color: var(--yk-primary);
}

.breadcrumb > .active {
  color: var(--yk-text);
  font-weight: 600;
}

.breadcrumb > li + li::before {
  content: "›";
  color: var(--yk-text-muted);
  padding: 0 8px;
}

/* --------------------------------------------------------------------------
   13. Sidebar / Navigation Menu (Dashboard)
   -------------------------------------------------------------------------- */
.wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#wrapper {
  max-width: 100% !important;
  margin: 0 !important;
  min-height: 100vh;
  box-shadow: none !important;
  position: relative;
  background: var(--yk-bg);
}

#main-container {
  padding-top: 56px;
  min-height: calc(100vh - 56px);
  background: var(--yk-bg);
  }

/* Modern sidebar (used in grade, teacher modules) */
aside {
  position: fixed !important;
  display: block;
  float: none !important;
  width: 220px;
  z-index: 1000;
  padding-top: 56px;
  bottom: 0;
  top: 0;
  left: 0;
  background: #1E293B;
  overflow-y: auto;
  transition: left 0.3s ease;
}

aside .sidebar-inner {
  border-right: none;
  padding-bottom: 60px;
}

aside .sidebar-inner .user-block {
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
}

aside .sidebar-inner .user-block img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(79,108,247,0.4);
}

aside .sidebar-inner .user-block .detail {
  margin-left: 12px;
  color: #E2E8F0;
  font-weight: 500;
  font-size: 0.93rem;
  line-height: 1.3;
}

aside .sidebar-inner .user-block .detail small {
  display: block;
  color: #94A3B8;
  font-size: 0.786rem;
  font-weight: normal;
}

/* Main navigation in sidebar */
aside .main-menu > ul {
  margin: 0;
  padding: 8px 0;
  list-style: none;
}

aside .main-menu > ul > li {
  position: relative;
  border: none !important;
}

aside .main-menu > ul > li > a {
  display: flex;
  align-items: center;
  padding: 11px 20px;
  color: #CBD5E1;
  font-size: 0.9rem;
  font-weight: 400;
  text-shadow: none;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

aside .main-menu > ul > li > a:hover,
aside .main-menu > ul > li > a:focus {
  color: #fff;
  background: rgba(255,255,255,0.06);
  border-left-color: var(--yk-primary);
  text-decoration: none;
}

aside .main-menu > ul > li.active > a,
aside .main-menu > ul > li.display > a {
  color: #fff;
  background: rgba(79,108,247,0.15);
  border-left-color: var(--yk-primary);
  font-weight: 500;
}

aside .main-menu > ul > li > a .menu-icon {
  width: 20px;
  text-align: center;
  margin-right: 12px;
  font-size: 1rem;
  color: #64748B;
}

aside .main-menu > ul > li.active > a .menu-icon,
aside .main-menu > ul > li.display > a .menu-icon {
  color: var(--yk-primary);
}

aside .main-menu > ul > li > a .badge {
  margin-left: auto;
  background: rgba(79,108,247,0.2);
  color: var(--yk-primary-light);
}

/* Submenu */
aside .main-menu > ul > li .submenu {
  display: none;
  background: rgba(0,0,0,0.15);
  padding: 4px 0;
}

aside .main-menu > ul > li .submenu li a {
  display: block;
  padding: 9px 20px 9px 55px;
  color: #94A3B8;
  font-size: 0.857rem;
  background: transparent !important;
  transition: var(--yk-transition);
  font-weight: normal;
}

aside .main-menu > ul > li .submenu li a:hover,
aside .main-menu > ul > li .submenu li a:focus {
  color: #fff;
  background: rgba(255,255,255,0.05) !important;
}

aside .main-menu > ul > li .submenu li.active a {
  color: #fff;
  background: rgba(79,108,247,0.1) !important;
}

aside .main-menu > ul > li .submenu li a .submenu-label {
  transition: var(--yk-transition);
}

/* Sidebar mini toggle */
aside .size-toggle {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
aside .size-toggle .btn {
  background: transparent;
  color: #94A3B8;
  border: none;
  padding: 6px 12px;
  font-size: 0.857rem;
}
aside .size-toggle .btn:hover {
  color: #fff;
}
aside .size-toggle .btn .icon-bar {
  display: block;
  width: 16px;
  height: 2px;
  margin-bottom: 3px;
  background: #94A3B8;
  border-radius: 2px;
}

/* Sidebar with main-content shift */
#main-container.with-sidebar {
  margin-left: 220px;
}

/* Sidebar responsive */
@media (max-width: 767px) {
  aside {
    left: -220px;
  }
  #main-container.with-sidebar {
    margin-left: 0;
  }
  #wrapper.sidebar-display aside {
    left: 0;
  }
  #wrapper.sidebar-display #main-container {
    margin-left: 220px;
  }
}

/* --------------------------------------------------------------------------
   14. Pagination
   -------------------------------------------------------------------------- */
.pagination {
  margin: 20px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination > li {
  display: inline-block;
}
.pagination > li > a,
.pagination > li > span {
  border: 1px solid var(--yk-border);
  padding: 7px 14px;
  color: var(--yk-text-secondary);
  background: var(--yk-surface);
  font-size: 0.9rem;
  margin-left: -1px;
  transition: var(--yk-transition);
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  border-radius: var(--yk-radius) 0 0 var(--yk-radius);
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-radius: 0 var(--yk-radius) var(--yk-radius) 0;
}
.pagination > li > a:hover,
.pagination > li > span:hover {
  color: var(--yk-primary);
  background: var(--yk-primary-light);
  border-color: var(--yk-primary);
  z-index: 2;
}
.pagination > .active > a,
.pagination > .active > span {
  background: var(--yk-primary) !important;
  border-color: var(--yk-primary) !important;
  color: #fff !important;
}
.pagination > .disabled > a,
.pagination > .disabled > span {
  color: var(--yk-text-muted);
  cursor: not-allowed;
}
.pagination > .disabled > a:hover {
  background: var(--yk-surface);
  border-color: var(--yk-border);
  color: var(--yk-text-muted);
}

/* --------------------------------------------------------------------------
   15. Modal
   -------------------------------------------------------------------------- */
.modal-content {
  border: none;
  border-radius: var(--yk-radius-lg);
  box-shadow: var(--yk-shadow-xl);
}
.modal-header {
  border-bottom: 1px solid var(--yk-border-light);
  padding: 18px 24px;
}
.modal-header .close {
  font-size: 1.5rem;
  opacity: 0.4;
  margin-top: -2px;
}
.modal-header .close:hover {
  opacity: 0.7;
}
.modal-body {
  padding: 24px;
}
.modal-footer {
  border-top: 1px solid var(--yk-border-light);
  padding: 14px 24px;
}
.modal-title {
  font-weight: 600;
  font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   16. Progress Bars
   -------------------------------------------------------------------------- */
.progress {
  height: 8px;
  border-radius: 4px;
  background: var(--yk-bg);
  box-shadow: none;
}
.progress-bar {
  background: var(--yk-primary);
  box-shadow: none;
  border-radius: 4px;
}
.progress-bar-success {
  background: var(--yk-success);
}
.progress-bar-warning {
  background: var(--yk-warning);
}
.progress-bar-danger {
  background: var(--yk-danger);
}
.progress-bar-info {
  background: var(--yk-info);
}

/* --------------------------------------------------------------------------
   17. Dropdowns
   -------------------------------------------------------------------------- */
.dropdown-menu {
  border: none;
  border-radius: var(--yk-radius);
  box-shadow: var(--yk-shadow-lg);
  font-size: 0.93rem;
  padding: 8px 0;
}
.dropdown-menu > li > a {
  padding: 8px 20px;
  color: var(--yk-text-secondary);
  transition: var(--yk-transition);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--yk-primary-light);
  color: var(--yk-primary);
}
.dropdown-header {
  padding: 8px 20px;
  color: var(--yk-text-muted);
  font-size: 0.786rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dropdown-divider {
  height: 1px;
  background: var(--yk-border-light);
  margin: 4px 0;
}

/* --------------------------------------------------------------------------
   18. Tabs & Nav Pills
   -------------------------------------------------------------------------- */
.nav-tabs {
  border-bottom: 1px solid var(--yk-border-light);
}
.nav-tabs > li > a {
  border: none !important;
  color: var(--yk-text-secondary);
  padding: 10px 18px;
  font-weight: 500;
  font-size: 0.93rem;
  transition: var(--yk-transition);
  margin-right: 2px;
  border-radius: var(--yk-radius) var(--yk-radius) 0 0;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  background: var(--yk-primary-light);
  color: var(--yk-primary);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border: none !important;
  border-bottom: 2px solid var(--yk-primary) !important;
  color: var(--yk-primary);
  background: transparent !important;
  font-weight: 600;
}

.nav-pills > li > a {
  border-radius: var(--yk-radius);
  color: var(--yk-text-secondary);
  font-weight: 500;
  padding: 8px 16px;
  transition: var(--yk-transition);
}
.nav-pills > li > a:hover {
  background: var(--yk-primary-light);
  color: var(--yk-primary);
}
.nav-pills > li.active > a {
  background: var(--yk-primary) !important;
  color: #fff !important;
}

.tab-content {
  padding-top: 20px;
}

/* --------------------------------------------------------------------------
   19. Wells & Jumbotron
   -------------------------------------------------------------------------- */
.well {
  border: 1px solid var(--yk-border-light);
  border-radius: var(--yk-radius);
  background: var(--yk-bg);
  box-shadow: none;
  padding: 18px;
}

.jumbotron {
  background: var(--yk-surface);
  border-radius: var(--yk-radius-lg);
  box-shadow: var(--yk-shadow);
  padding: 40px;
}

/* --------------------------------------------------------------------------
   20. List Group
   -------------------------------------------------------------------------- */
.list-group-item {
  border: 1px solid var(--yk-border-light);
  color: var(--yk-text-secondary);
  padding: 12px 16px;
  transition: var(--yk-transition);
}
.list-group-item:first-child {
  border-radius: var(--yk-radius) var(--yk-radius) 0 0;
}
.list-group-item:last-child {
  border-radius: 0 0 var(--yk-radius) var(--yk-radius);
}
.list-group-item.active,
.list-group-item.active:hover {
  background: var(--yk-primary);
  border-color: var(--yk-primary);
}
.list-group-item:hover {
  background: var(--yk-primary-subtle);
}
a.list-group-item {
  color: var(--yk-text-secondary);
}
a.list-group-item:hover {
  color: var(--yk-primary);
}

/* --------------------------------------------------------------------------
   21. Tooltips & Popovers
   -------------------------------------------------------------------------- */
.tooltip-inner {
  border-radius: var(--yk-radius-sm);
  padding: 6px 12px;
  font-size: 0.857rem;
}
.popover {
  border: none;
  border-radius: var(--yk-radius);
  box-shadow: var(--yk-shadow-md);
}
.popover-title {
  background: var(--yk-bg);
  border-bottom: 1px solid var(--yk-border-light);
  border-radius: var(--yk-radius) var(--yk-radius) 0 0;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.93rem;
}

/* --------------------------------------------------------------------------
   22. Utilities
   -------------------------------------------------------------------------- */

/* Spacing helpers */
.space-10 { margin-bottom: 10px !important; }
.space-20 { margin-bottom: 20px !important; }
.space-30 { margin-bottom: 30px !important; }
.space-40 { margin-bottom: 40px !important; }

.pad-10 { padding: 10px !important; }
.pad-15 { padding: 15px !important; }
.pad-20 { padding: 20px !important; }
.pad-30 { padding: 30px !important; }

.no-padding { padding: 0 !important; }
.no-margin { margin: 0 !important; }
.no-border { border: none !important; }
.no-shadow { box-shadow: none !important; }
.no-radius { border-radius: 0 !important; }

/* Backgrounds */
.bg-white { background: var(--yk-surface) !important; }
.bg-light { background: var(--yk-bg) !important; }
.bg-warm { background: var(--yk-bg-warm) !important; }
.bg-primary { background: var(--yk-primary) !important; color: #fff !important; }
.bg-primary-light { background: var(--yk-primary-light) !important; color: var(--yk-primary-dark) !important; }
.bg-success { background: var(--yk-success) !important; color: #fff !important; }
.bg-warning { background: var(--yk-warning) !important; color: #fff !important; }
.bg-danger { background: var(--yk-danger) !important; color: #fff !important; }
.bg-info { background: var(--yk-info) !important; color: #fff !important; }

/* Flex helpers */
.flex { display: flex !important; }
.flex-center { display: flex !important; align-items: center !important; justify-content: center !important; }
.flex-between { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.flex-wrap { flex-wrap: wrap !important; }
.gap-10 { gap: 10px !important; }
.gap-15 { gap: 15px !important; }
.gap-20 { gap: 20px !important; }

/* Text helpers */
.text-sm { font-size: 0.857rem !important; }
.text-xs { font-size: 0.786rem !important; }
.text-lg { font-size: 1.1rem !important; }
.text-xl { font-size: 1.25rem !important; }
.text-2xl { font-size: 1.5rem !important; }
.text-bold { font-weight: 600 !important; }
.text-normal { font-weight: 400 !important; }
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   23. Keyframe Animations
   -------------------------------------------------------------------------- */
@keyframes yk-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes yk-fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes yk-fadeInDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes yk-slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.fade-in {
  animation: yk-fadeIn 0.4s ease;
}
.fade-in-up {
  animation: yk-fadeInUp 0.4s ease;
}
.fade-in-down {
  animation: yk-fadeInDown 0.4s ease;
}
.slide-in-right {
  animation: yk-slideInRight 0.3s ease;
}

/* --------------------------------------------------------------------------
   24. Question / Post Item — SNS Card Style
   -------------------------------------------------------------------------- */
/* Question list items (from _view.php) */
.question-page .post-item {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    margin-bottom: 16px;
    padding: 20px 24px;
    position: relative;
    border-bottom: none !important;
}
.question-page .post-item:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.question-page .post-item .item {
    line-height: 1.8;
    font-size: 0.95rem;
}
.question-page .post-item .item b {
    color: var(--yk-text);
    font-weight: 600;
}
.question-page .post-item > div.answer {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--yk-primary-subtle);
    border-radius: var(--yk-radius);
    border-left: 3px solid var(--yk-primary);
}
.question-page .post-item > div.answer:empty,
.question-page .post-item > div.answer:not(:has(*)) {
    /* 默认隐藏蓝色占位条：仅在 getAnswer AJAX 注入答案后才显示。
       :empty 兜底；:has(*) 兼容模板残留空白让 :empty 失效的情况。 */
    display: none;
}
.question-page .post-item div.answer p {
    margin-bottom: 0;
    font-size: 0.9rem;
}
/* 选项列表若一个 <li> 都没有（占绝大多数的选择题因为未结构化入库），整块隐藏避免空白 */
.question-page .post-item > ul#options:not(:has(li)) {
    display: none;
}
.question-page .post-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--yk-border-light);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.857rem;
    color: var(--yk-text-muted);
}
.question-page .post-footer .item {
    font-size: 0.857rem;
    color: var(--yk-text-muted);
}
.question-page .post-footer .item b {
    color: var(--yk-text-secondary);
}
.question-page .post-footer a {
    color: var(--yk-text-secondary);
    transition: var(--yk-transition);
}
.question-page .post-footer a:hover {
    color: var(--yk-primary);
}
.question-page .post-footer .btn-group .btn {
    padding: 3px 10px;
    font-size: 0.786rem;
}

/* Cart widget bar */
.question-cart-bar .panel {
    border-radius: 12px !important;
}

/* Pagination */
.question-page .pagination {
    margin: 0;
}

/* --------------------------------------------------------------------------
   25. Explore / Content Page SNS Overrides
   -------------------------------------------------------------------------- */

/* Explore forum list — SNS card style */
.explore-index .container > .row .post-all .item {
    background: #fff;
    border-radius: var(--yk-radius-lg);
    box-shadow: var(--yk-shadow);
    padding: 24px;
    margin-bottom: 16px;
    transition: all 0.25s ease;
    cursor: pointer;
}
.explore-index .container > .row .post-all .item:hover {
    box-shadow: var(--yk-shadow-md);
    transform: translateY(-2px);
}
.explore-index .container > .row .post-all .item .row {
    display: flex;
    align-items: center;
}
.explore-index .container > .row .post-all .item .forum-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--yk-text);
    display: block;
    margin-bottom: 4px;
}
.explore-index .container > .row .post-all .item .forum-description {
    font-size: 0.857rem;
    color: var(--yk-text-secondary);
}
.explore-index .container > .row .post-all .item img {
    border-radius: var(--yk-radius);
    max-width: 100%;
}

/* Explore forum sidebar panels */
.explore-index .container > .row .col-md-3 .panel {
    border-radius: var(--yk-radius-lg) !important;
    overflow: hidden;
}
.explore-index .container > .row .col-md-3 .panel .list-group-item {
    border-left: none;
    border-right: none;
}
.explore-index .container > .row .col-md-3 .panel .list-group-item:first-child {
    border-top: none;
}
.explore-index .container > .row .col-md-3 .panel .list-group-item:last-child {
    border-bottom: none;
}

/* Explore new layout — forum grid & sidebar links */
.explore-forum-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.explore-forum-card {
    display: block;
    flex: 0 0 calc(25% - 12px);
    min-width: 0;
    padding: 16px 14px; text-align: center;
    background: #fff; border: 1px solid var(--yk-border-light, #eef1f7);
    border-radius: 14px; text-decoration: none !important;
    transition: all .18s ease; box-shadow: 0 1px 3px rgba(17,24,39,.04);
}
.explore-forum-card:hover {
    border-color: var(--yk-primary); transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(79,108,247,.16);
}
.explore-forum-icon {
    width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 16px; overflow: hidden;
    background: var(--yk-primary-subtle, #eef1ff); display: flex; align-items: center; justify-content: center;
}
.explore-forum-icon img { width: 100%; height: 100%; object-fit: cover; }
.explore-forum-name {
    font-size: 0.95rem; font-weight: 600; color: var(--yk-text); margin-bottom: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.explore-forum-desc {
    font-size: 0.78rem; color: var(--yk-text-muted); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px;
}
@media (max-width: 1199px) { .explore-forum-card { flex: 0 0 calc(33.333% - 11px); } }
@media (max-width: 991px)  { .explore-forum-card { flex: 0 0 calc(50% - 8px); } }
@media (max-width: 576px)  { .explore-forum-card { flex: 0 0 100%; } }
.explore-index .sns-card-body { overflow: hidden; }
.explore-index .sns-sidebar-card { overflow: hidden; }
.explore-link-list { display: flex; flex-direction: column; gap: 2px; }
.explore-link-item {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px; border-radius: 10px;
    color: var(--yk-text-secondary); font-size: 0.9rem; font-weight: 500;
    text-decoration: none !important; transition: all .15s ease;
}
.explore-link-item:hover { background: var(--yk-primary-subtle, #eef1ff); color: var(--yk-primary); }
.explore-link-item .glyphicon { color: var(--yk-primary); font-size: 12px; flex-shrink: 0; }
.explore-link-item .ellipsis { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explore-link-action { color: var(--yk-primary); font-weight: 600; }
.explore-tools .btn-block { margin-bottom: 8px; }
.explore-tools .btn-block:last-child { margin-bottom: 0; }
.sns-empty { text-align: center; padding: 48px 20px; color: var(--yk-text-muted); }
.sns-empty .glyphicon { font-size: 42px; opacity: .4; display: block; margin-bottom: 10px; }

/* Explore posts list */
.explore-posts .post-item {
    background: #fff;
    border-radius: var(--yk-radius-lg);
    box-shadow: var(--yk-shadow);
    padding: 24px;
    margin-bottom: 16px;
    transition: all 0.25s ease;
    border-bottom: none !important;
}
.explore-posts .post-item:hover {
    box-shadow: var(--yk-shadow-md);
    transform: translateY(-2px);
}
.explore-posts .post-item .mecctitle h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--yk-text);
    transition: var(--yk-transition);
}
.explore-posts .post-item .mecctitle h2:hover {
    color: var(--yk-primary);
}
.explore-posts .post-item .meccaddress {
    font-size: 0.857rem;
    color: var(--yk-text-muted);
    margin-bottom: 8px;
}
.explore-posts .post-item .meccaddress a {
    color: var(--yk-text-secondary);
}
.explore-posts .post-item .meccaddress a:hover {
    color: var(--yk-primary);
}
.explore-posts .post-item p {
    font-size: 0.9rem;
    color: var(--yk-text-secondary);
    margin-bottom: 0;
}
.explore-posts .post-item .titleimg img {
    border-radius: var(--yk-radius);
    width: 100%;
}

/* Explore photos */
.photo-index .photo-item {
    background: #fff;
    border-radius: var(--yk-radius-lg);
    box-shadow: var(--yk-shadow);
    overflow: hidden;
    transition: all 0.25s ease;
}
.photo-index .photo-item:hover {
    box-shadow: var(--yk-shadow-md);
    transform: translateY(-2px);
}
.photo-index .photo-item .photo-img img {
    border-radius: 0;
}
.photo-index .photo-item .photo-details {
    padding: 12px;
    border-top: 1px solid var(--yk-border-light);
    font-size: 0.857rem;
    color: var(--yk-text-secondary);
}
.photo-index .photo-item .photo-details:hover {
    background: var(--yk-primary-subtle);
}
.photo-index .photo-item .photo-details .user-image img {
    border-radius: 50%;
    width: 28px;
    height: 28px;
}

/* Explore individual view pages */
.explore-view .post-view {
    background: #fff;
    border-radius: var(--yk-radius-lg);
    box-shadow: var(--yk-shadow);
    padding: 32px;
    margin-bottom: 20px;
}
.explore-view .post-view .post-title {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: left;
    margin-bottom: 16px;
}
.explore-view .post-view .post-meta {
    background: var(--yk-bg);
    border-radius: var(--yk-radius);
    padding: 10px 16px;
    margin-bottom: 20px;
    font-size: 0.857rem;
    color: var(--yk-text-muted);
    text-align: left;
    line-height: 1.6;
}
.explore-view .post-view .post-content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--yk-text);
    padding: 0;
}
.explore-view .post-view .post-content p {
    margin-bottom: 20px;
    line-height: 1.8;
}

/* Explore question page */
.explore-question .post-item {
    background: #fff;
    border-radius: var(--yk-radius-lg);
    box-shadow: var(--yk-shadow);
    padding: 20px 24px;
    margin-bottom: 16px;
    transition: all 0.25s ease;
}
.explore-question .post-item:hover {
    box-shadow: var(--yk-shadow-md);
}

/* --------------------------------------------------------------------------
   26. Widget-specific overrides
   -------------------------------------------------------------------------- */

/* DetailView */
.table.detail-view {
  background: transparent;
  box-shadow: none;
}

/* Summary block */
.summary {
  color: var(--yk-text-muted);
  font-size: 0.857rem;
  padding: 8px 0;
}

/* Empty state */
.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--yk-text-muted);
  font-size: 1rem;
}
.empty .glyphicon {
  display: block;
  font-size: 3rem;
  margin-bottom: 16px;
  color: var(--yk-text-muted);
  opacity: 0.5;
}

/* Error summary */
.error-summary {
  background: var(--yk-danger-light);
  border: 1px solid #FED7D7;
  border-radius: var(--yk-radius);
  padding: 14px 18px;
  margin-bottom: 20px;
}
.error-summary ul {
  margin: 0;
  padding-left: 20px;
  color: #9B2C2C;
}

/* KV grid */
.kv-panel-before,
.kv-panel-after {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   27. Responsive overrides
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .navbar-nav > li > a {
    padding: 12px 15px;
  }
  .panel-body,
  .box-body {
    padding: 15px !important;
  }
  .table > thead > tr > th,
  .table > tbody > tr > td {
    padding: 8px 10px;
  }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.125rem; }
  .btn {
    padding: 6px 14px;
  }
}

/* Print */
@media print {
  .navbar,
  aside,
  .footer,
  .breadcrumb {
    display: none !important;
  }
  #main-container {
    margin-left: 0 !important;
    padding-top: 0 !important;
  }
  .panel,
  .box {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
}

/* --------------------------------------------------------------------------
   28. Special: Top navigation variant for dashboard areas
   -------------------------------------------------------------------------- */
#top-nav {
  height: 56px;
  width: 100%;
  padding-right: 20px;
  background: var(--yk-surface) !important;
  border-bottom: 1px solid var(--yk-border-light);
  white-space: nowrap;
  min-width: auto;
}
#top-nav.fixed {
  position: fixed;
  z-index: 999;
}
#top-nav .brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 56px;
  background: #1E293B !important;
  color: #fff !important;
  float: left;
  font-size: 15px;
  font-weight: 600;
  transition: width 0.3s ease;
}
#top-nav .brand:hover,
#top-nav .brand:focus {
  color: #fff !important;
}

#top-nav .nav-notification {
  list-style: none;
  margin: 0;
  float: right;
  white-space: nowrap;
  font-size: 0.93rem;
}
#top-nav .nav-notification > li {
  display: block;
  position: relative;
  float: left;
}
#top-nav .nav-notification > li > a {
  display: block;
  padding: 18px 15px;
  color: var(--yk-text-secondary);
  transition: var(--yk-transition);
}
#top-nav .nav-notification > li > a:hover,
#top-nav .nav-notification > li > a:focus {
  color: var(--yk-primary);
  background: transparent;
}
#top-nav .nav-notification > li.profile > a {
  padding: 13px 15px;
}
#top-nav .nav-notification > li.profile img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

/* Skin-1 overrides for new design */
#top-nav.skin-1,
aside.skin-1 {
  /* Use the default modern styles above */
}
aside.skin-1 {
  background: #1E293B !important;
}
aside.skin-1 .main-menu > ul > li > a {
  color: #CBD5E1 !important;
}
aside.skin-1 .main-menu > ul > li.active > a {
  background: rgba(79,108,247,0.15) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   29. Miscellaneous overrides
   -------------------------------------------------------------------------- */

/* ===== 弹性布局系统 ===== */
/* 容器：默认居中 (1200px)，加 .layout-full 可 100% 全宽 */
.container,
.container-fluid {
  width: auto !important;
  padding: 0 20px;
}
.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.container.layout-full,
.container-fluid {
  max-width: 100% !important;
}

/* 弹性布局辅助类 */
.layout-flex {
  display: flex;
  flex-wrap: wrap;
}
.layout-flex-center {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.layout-flex-between {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

/* SNS 三栏布局：默认居中，添加 .layout-full 切换到 100% 全宽 */
/* Back to top / fixed buttons */
.btn-fixed-bottom {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--yk-shadow-md);
}

/* Hover card effect */
.hover-card {
  transition: var(--yk-transition-slow);
}
.hover-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--yk-shadow-lg);
}

/* Image circular */
.img-circle {
  border-radius: 50%;
}

/* Inline code blocks in tables / content */
td code,
.content code {
  background: var(--yk-primary-subtle);
  color: var(--yk-primary-dark);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}

/* Loading spinner */
.loading-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--yk-border);
  border-top-color: var(--yk-primary);
  border-radius: 50%;
  animation: yk-spin 0.7s linear infinite;
}
@keyframes yk-spin {
  to { transform: rotate(360deg); }
}

/* Content divider with text */
.divider-text {
  display: flex;
  align-items: center;
  color: var(--yk-text-muted);
  font-size: 0.857rem;
}
.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--yk-border);
}
.divider-text::before { margin-right: 16px; }
.divider-text::after { margin-left: 16px; }

/* --------------------------------------------------------------------------
   30. SNS Layout & Social Feed Components
   -------------------------------------------------------------------------- */

/* SNS three-column layout */
.sns-layout {
    display: flex;
    gap: 20px;
    /* 跟随全站弹性布局控制中心：--yk-shell-max 由 body.yk-layout-* + JS 写入 <html>，
       不再写死 1200px，使「通栏/盒式 + 最大宽度」对 dashboard 类分栏页同样生效 */
    max-width: var(--yk-shell-max, 1200px);
    margin: 0 auto;
    padding: 20px;
    align-items: flex-start;
}
/* 通栏：放开分栏容器自身的封顶，跟随外层 .yk-shell / .container 一起全宽 */
body.yk-layout-fluid .sns-layout {
    max-width: none;
}
.sns-layout.layout-full {
    max-width: 100% !important;
    padding: 20px;
}
.sns-layout .sns-left {
    flex: 0 0 260px;
    max-width: 260px;
    position: sticky;
    top: 76px; /* navbar height (56px) + some breathing room */
    align-self: flex-start;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    scrollbar-width: thin;
}
/* Right sidebar also sticky when tall enough */
.sns-layout .sns-right {
    flex: 0 0 300px;
    max-width: 300px;
    position: sticky;
    top: 76px;
    align-self: flex-start;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    scrollbar-width: thin;
}
.sns-layout .sns-center {
    flex: 1;
    min-width: 0;
    background: var(--yk-surface, #fff);
    border-radius: var(--yk-radius-lg, 14px);
    box-shadow: var(--yk-shadow, 0 1px 3px rgba(17,24,39,.06));
    padding: 20px;
}

@media (max-width: 992px) {
    .sns-layout .sns-right { display: none; }
}
@media (max-width: 768px) {
    .sns-layout { flex-direction: column; padding: 12px; }
    .sns-layout .sns-left,
    .sns-layout .sns-right {
        /* column flex 下 flex:1 不撑交叉轴；必须 flex:0 0 auto + width:100% 才能占满
           否则侧栏只到内容宽（~118px），右侧大片空白。同时必须解 max-width 封顶 */
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        position: static;
        max-height: none;
    }
    .sns-layout .sns-center { width: 100%; }
}

/* SNS Cards — the universal social feed unit */
.sns-card {
    background: #fff;
    border-radius: var(--yk-radius-lg);
    box-shadow: var(--yk-shadow);
    margin-bottom: 16px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.sns-card:hover {
    box-shadow: var(--yk-shadow-md);
}

/* Card header: avatar + name + time + optional menu */
.sns-card-header {
    display: flex;
    align-items: center;
    padding: 16px 20px 0;
}
.sns-card-header .sns-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--yk-primary-light);
}
.sns-card-header .sns-info {
    flex: 1;
    margin-left: 12px;
    min-width: 0;
}
.sns-card-header .sns-info .sns-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--yk-text);
    display: block;
    line-height: 1.3;
}
.sns-card-header .sns-info .sns-name:hover {
    color: var(--yk-primary);
}
.sns-card-header .sns-info .sns-time {
    font-size: 0.786rem;
    color: var(--yk-text-muted);
    display: block;
    margin-top: 1px;
}
.sns-card-header .sns-action-btn {
    color: var(--yk-text-muted);
    padding: 4px 8px;
    border-radius: var(--yk-radius-sm);
    transition: var(--yk-transition);
    cursor: pointer;
    font-size: 1rem;
}
.sns-card-header .sns-action-btn:hover {
    background: var(--yk-primary-light);
    color: var(--yk-primary);
}

/* Card body: main content */
.sns-card-body {
    padding: 12px 20px 16px;
}
.sns-card-body p {
    margin-bottom: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--yk-text-secondary);
}
.sns-card-body .sns-media {
    margin-top: 12px;
    border-radius: var(--yk-radius);
    overflow: hidden;
    background: var(--yk-bg);
}
.sns-card-body .sns-media img,
.sns-card-body .sns-media video {
    width: 100%;
    display: block;
}
.sns-card-body .sns-media .sns-media-info {
    padding: 12px 16px;
}
.sns-card-body .sns-media .sns-media-info strong {
    display: block;
    font-size: 0.93rem;
    color: var(--yk-text);
    margin-bottom: 4px;
}
.sns-card-body .sns-media .sns-media-info span {
    font-size: 0.857rem;
    color: var(--yk-text-muted);
}

/* Card actions: like / comment / share */
.sns-card-actions {
    display: flex;
    border-top: 1px solid var(--yk-border-light);
    padding: 4px 0;
}
.sns-card-actions a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    color: var(--yk-text-muted);
    font-size: 0.857rem;
    font-weight: 500;
    transition: var(--yk-transition);
    border-radius: 0;
    gap: 6px;
}
.sns-card-actions a:hover {
    color: var(--yk-primary);
    background: var(--yk-primary-subtle);
}
.sns-card-actions a .glyphicon {
    font-size: 1rem;
}
.sns-card-actions a.sns-liked {
    color: var(--yk-danger);
}
.sns-card-actions a.sns-faved {
    color: var(--yk-accent);
}

/* Card comment section */
.sns-card-comments {
    border-top: 1px solid var(--yk-border-light);
    padding: 16px 20px;
    background: var(--yk-bg-warm);
}
.sns-card-comments .sns-comment {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.sns-card-comments .sns-comment:last-child {
    margin-bottom: 0;
}
.sns-card-comments .sns-comment img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sns-card-comments .sns-comment-body {
    flex: 1;
    background: #fff;
    border-radius: var(--yk-radius);
    padding: 8px 14px;
    box-shadow: var(--yk-shadow-sm);
}
.sns-card-comments .sns-comment-body .sns-comment-name {
    font-weight: 600;
    font-size: 0.857rem;
    color: var(--yk-text);
}
.sns-card-comments .sns-comment-body p {
    font-size: 0.857rem;
    color: var(--yk-text-secondary);
    margin: 2px 0 0;
}
.sns-card-comments .sns-comment-form {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}
.sns-card-comments .sns-comment-form input {
    flex: 1;
    border: 1px solid var(--yk-border);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.857rem;
    outline: none;
    transition: var(--yk-transition);
}
.sns-card-comments .sns-comment-form input:focus {
    border-color: var(--yk-primary);
}

/* Sidebar cards */
.sns-sidebar-card {
    background: #fff;
    border-radius: var(--yk-radius-lg);
    box-shadow: var(--yk-shadow);
    margin-bottom: 16px;
    overflow: hidden;
}
.sns-sidebar-card .sns-sidebar-header {
    padding: 16px 20px 12px;
    font-weight: 600;
    font-size: 0.93rem;
    color: var(--yk-text);
    border-bottom: 1px solid var(--yk-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sns-sidebar-card .sns-sidebar-header a {
    font-size: 0.786rem;
    font-weight: 500;
    color: var(--yk-primary);
}
.sns-sidebar-card .sns-sidebar-body {
    padding: 12px 20px 16px;
}

/* User profile card (left sidebar) */
.sns-user-card {
    background: #fff;
    border-radius: var(--yk-radius-lg);
    box-shadow: var(--yk-shadow);
    overflow: hidden;
    margin-bottom: 16px;
    text-align: center;
}
.sns-user-card .sns-user-cover {
    height: 100px;
    background: linear-gradient(135deg, var(--yk-primary) 0%, var(--yk-primary-darker) 100%);
}
.sns-user-card .sns-user-avatar {
    margin-top: -40px;
}
.sns-user-card .sns-user-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 4px solid #fff;
    object-fit: cover;
    box-shadow: var(--yk-shadow-md);
}
.sns-user-card .sns-user-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--yk-text);
    margin-top: 8px;
}
.sns-user-card .sns-user-bio {
    font-size: 0.857rem;
    color: var(--yk-text-muted);
    padding: 0 20px;
    margin: 4px 0 16px;
}
.sns-user-card .sns-user-stats {
    display: flex;
    border-top: 1px solid var(--yk-border-light);
}
.sns-user-card .sns-user-stats a {
    flex: 1;
    padding: 14px 8px;
    text-align: center;
    transition: var(--yk-transition);
}
.sns-user-card .sns-user-stats a:hover {
    background: var(--yk-primary-subtle);
}
.sns-user-card .sns-user-stats a strong {
    display: block;
    font-size: 1.1rem;
    color: var(--yk-text);
    font-weight: 700;
}
.sns-user-card .sns-user-stats a span {
    font-size: 0.786rem;
    color: var(--yk-text-muted);
}
.sns-user-card .sns-user-stats a + a {
    border-left: 1px solid var(--yk-border-light);
}

/* Guest card (for non-logged-in users) */
.sns-guest-card {
    background: linear-gradient(135deg, var(--yk-primary) 0%, var(--yk-primary-darker) 100%);
    border-radius: var(--yk-radius-lg);
    padding: 32px 24px;
    text-align: center;
    color: #fff;
    margin-bottom: 16px;
}
.sns-guest-card h3 {
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 8px;
}
.sns-guest-card p {
    color: rgba(255,255,255,0.85);
    font-size: 0.9rem;
    margin-bottom: 20px;
}
.sns-guest-card .btn {
    min-width: 120px;
}
.sns-guest-card .btn-default {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
    color: #fff;
}
.sns-guest-card .btn-default:hover {
    background: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}

/* Trending / hot list */
.sns-trending-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--yk-border-light);
}
.sns-trending-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.sns-trending-item .sns-trending-rank {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--yk-text-muted);
    min-width: 24px;
    text-align: center;
    line-height: 1.4;
}
.sns-trending-item:nth-child(1) .sns-trending-rank { color: #F56565; }
.sns-trending-item:nth-child(2) .sns-trending-rank { color: #ED8936; }
.sns-trending-item:nth-child(3) .sns-trending-rank { color: #F5A623; }
.sns-trending-item .sns-trending-content {
    flex: 1;
    min-width: 0;
}
.sns-trending-item .sns-trending-content a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--yk-text);
    display: block;
    line-height: 1.4;
    transition: var(--yk-transition);
}
.sns-trending-item .sns-trending-content a:hover {
    color: var(--yk-primary);
}
.sns-trending-item .sns-trending-content .sns-trending-meta {
    font-size: 0.786rem;
    color: var(--yk-text-muted);
    margin-top: 2px;
}

/* Tag cloud / chips */
.sns-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sns-tag {
    display: inline-block;
    padding: 4px 14px;
    font-size: 0.786rem;
    font-weight: 500;
    color: var(--yk-text-secondary);
    background: var(--yk-bg);
    border-radius: 20px;
    transition: var(--yk-transition);
    cursor: pointer;
}
.sns-tag:hover {
    background: var(--yk-primary-light);
    color: var(--yk-primary);
}
.sns-tag-primary {
    background: var(--yk-primary-light);
    color: var(--yk-primary);
}

/* Status update form (post something) */
.sns-status-form {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    align-items: flex-start;
}
.sns-status-form img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}
.sns-status-form .sns-status-input {
    flex: 1;
    border: none;
    background: var(--yk-bg);
    border-radius: 24px;
    padding: 10px 18px;
    font-size: 0.9rem;
    outline: none;
    transition: var(--yk-transition);
    resize: none;
    font-family: var(--yk-font);
}
.sns-status-form .sns-status-input:focus {
    background: var(--yk-primary-subtle);
    box-shadow: 0 0 0 2px rgba(79,108,247,0.15);
}
.sns-status-form .sns-status-tools {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}
.sns-status-form .sns-status-tools a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--yk-text-muted);
    transition: var(--yk-transition);
    font-size: 1.1rem;
}
.sns-status-form .sns-status-tools a:hover {
    background: var(--yk-primary-light);
    color: var(--yk-primary);
}

/* SNS avatar sizes */
.sns-avatar-xs { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.sns-avatar-sm { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.sns-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.sns-avatar-md { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.sns-avatar-lg { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.sns-avatar-xl { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }

/* SNS load more */
.sns-load-more {
    text-align: center;
    padding: 20px;
}
.sns-load-more .btn {
    padding: 10px 40px;
    border-radius: 24px;
    font-size: 0.9rem;
}

/* SNS divider */
.sns-divider {
    text-align: center;
    color: var(--yk-text-muted);
    font-size: 0.786rem;
    padding: 8px 0;
    position: relative;
}
.sns-divider::before,
.sns-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: var(--yk-border);
}
.sns-divider::before { left: 0; }
.sns-divider::after { right: 0; }

/* SNS quick links */
.sns-quick-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sns-quick-links li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    color: var(--yk-text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    border-bottom: 1px solid var(--yk-border-light);
    transition: var(--yk-transition);
}
.sns-quick-links li:last-child a {
    border-bottom: none;
}
.sns-quick-links li a:hover {
    color: var(--yk-primary);
    padding-left: 4px;
}
.sns-quick-links li a .glyphicon {
    color: var(--yk-text-muted);
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

/* SNS teacher list */
.sns-teacher-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--yk-border-light);
}
.sns-teacher-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.sns-teacher-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.sns-teacher-item .sns-teacher-info {
    flex: 1;
    min-width: 0;
}
.sns-teacher-item .sns-teacher-info strong {
    display: block;
    font-size: 0.9rem;
    color: var(--yk-text);
}
.sns-teacher-item .sns-teacher-info span {
    font-size: 0.786rem;
    color: var(--yk-text-muted);
}

/* SNS responsive containers */
@media (max-width: 768px) {
    .sns-card-header { padding: 12px 14px 0; }
    .sns-card-body { padding: 10px 14px 12px; }
    .sns-card-actions a { font-size: 0.786rem; padding: 8px 4px; }
    .sns-card-comments { padding: 12px 14px; }
    .sns-sidebar-card .sns-sidebar-header { padding: 14px 16px 10px; }
    .sns-sidebar-card .sns-sidebar-body { padding: 10px 16px 14px; }
    .sns-status-form { padding: 12px 14px; flex-wrap: wrap; }
    .sns-user-card .sns-user-cover { height: 72px; }
    .sns-user-card .sns-user-avatar img { width: 60px; height: 60px; }
}

/* Explore page layout & tabs */
.explore-page { margin-top: 8px; }
.explore-tabs {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 6px; margin-bottom: 18px;
    background: #fff; border: 1px solid var(--yk-border, #eaeef5);
    border-radius: var(--yk-radius, 14px);
    box-shadow: 0 2px 10px rgba(79,108,247,0.05);
}
.explore-tab {
    flex: 1 1 auto; text-align: center; white-space: nowrap;
    padding: 9px 14px; border-radius: 10px;
    color: var(--yk-text-muted, #6b7280); font-size: 14px; font-weight: 600;
    text-decoration: none !important; transition: all .15s ease;
}
.explore-tab:hover { background: var(--yk-primary-subtle, #eef1ff); color: var(--yk-primary, #4F6CF7); }
.explore-tab.active {
    background: linear-gradient(135deg, var(--yk-primary, #4F6CF7), var(--yk-primary-dark, #3a51d6));
    color: #fff; box-shadow: 0 6px 16px rgba(79,108,247,0.25);
}

/* Auth pages (login, signup, etc.) */
.auth-page {
  background: linear-gradient(135deg, var(--yk-primary) 0%, #2D44B8 100%);
  min-height: 100vh;
}
.auth-page .auth-container {
  width: 100%;
  max-width: 420px;
  padding: 20px;
}
.auth-page .auth-card {
  background: var(--yk-surface);
  border-radius: var(--yk-radius-xl);
  box-shadow: var(--yk-shadow-xl);
  padding: 40px;
}
.auth-page .auth-card .auth-logo {
  text-align: center;
  margin-bottom: 32px;
}
.auth-page .auth-card .auth-logo img {
  max-height: 48px;
}
.auth-page .auth-card .auth-logo h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--yk-text);
  margin-top: 16px;
  margin-bottom: 4px;
}
.auth-page .auth-card .auth-logo p {
  color: var(--yk-text-muted);
  font-size: 0.93rem;
}