/* =====================================================================
   SynthGrowth · 商业级设计系统 v2 (app.css)
   现代 SaaS 风格：浅色精致侧边栏、indigo 主色、清晰层级、微交互。
   覆盖 Bootstrap 5 默认外观，统一全部页面。
   ===================================================================== */

:root{
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;

  --bg:          #f6f7f9;
  --surface:     #ffffff;
  --surface-2:   #f9fafb;
  --surface-3:   #f1f3f6;

  --sidebar-bg:  #ffffff;
  --sidebar-border: #eef0f4;

  --ink:         #0f172a;
  --ink-2:       #475569;
  --muted:       #94a3b8;
  --faint:       #cbd5e1;

  --border:      #e9ebf0;
  --border-2:    #e2e5eb;

  --primary:     #4f46e5;
  --primary-600: #4338ca;
  --primary-700: #3730a3;
  --primary-soft:#eef2ff;
  --primary-tint:#f5f3ff;

  --success:     #059669; --success-soft: #ecfdf5;
  --warning:     #b45309; --warning-soft: #fffbeb;
  --danger:      #dc2626; --danger-soft:  #fef2f2;
  --info:        #0891b2; --info-soft:    #ecfeff;
  --violet:      #7c3aed; --violet-soft:  #f5f3ff;

  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 8px;
  --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,.07), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg: 0 12px 28px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.05);

  --sidebar-w: 248px;
  --topbar-h:  60px;
}

/* ----------------------------- 基础 ----------------------------- */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{ color: var(--ink); font-weight: 650; letter-spacing: -.011em; line-height: 1.3; }
a{ color: var(--primary-600); text-decoration: none; }
a:hover{ color: var(--primary-700); }
.text-primary{ color: var(--primary) !important; }
.text-secondary{ color: var(--muted) !important; }
.text-muted{ color: var(--muted) !important; }
.small, small{ font-size: 12.5px; }
.text-danger{ color: var(--danger) !important; }
code{ background: var(--surface-3); padding: .1em .4em; border-radius: 5px; font-size: .9em; color: var(--ink); }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#cdd3dd; border-radius:999px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:#b3bac8; background-clip:content-box; }

/* ----------------------- Bootstrap 组件覆盖 ----------------------- */

/* 卡片 */
.card{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.card.p-3{ padding: 1.1rem 1.15rem !important; }
.card.p-4{ padding: 1.5rem !important; }

/* 按钮 */
.btn{
  font-weight: 600; font-size: 13.5px; border-radius: var(--r-md);
  padding: .5rem 1rem; border: 1px solid transparent; line-height: 1.4;
  transition: all .15s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-sm{ padding: .38rem .78rem; font-size: 12.5px; border-radius: var(--r-sm); }
.btn-lg{ padding: .65rem 1.4rem; font-size: 15px; }
.btn-primary{ background: var(--primary); border-color: var(--primary); color:#fff; box-shadow: 0 1px 2px rgba(79,70,229,.25); }
.btn-primary:hover{ background: var(--primary-600); border-color: var(--primary-600); color:#fff; box-shadow: 0 4px 12px rgba(79,70,229,.3); }
.btn-primary:disabled{ opacity:.5; box-shadow:none; }
.btn-outline-primary{ color: var(--primary-600); border-color: #c7c9f5; background:#fff; }
.btn-outline-primary:hover{ background: var(--primary-soft); border-color: var(--primary); color: var(--primary-700); }
.btn-outline-secondary{ color: var(--ink-2); border-color: var(--border-2); background:#fff; }
.btn-outline-secondary:hover{ background: var(--surface-3); color: var(--ink); }
.btn-outline-success{ color: var(--success); border-color: #b6e6d3; background:#fff; }
.btn-outline-success:hover{ background: var(--success-soft); }
.btn-outline-warning{ color: var(--warning); border-color: #f0d9a8; background:#fff; }
.btn-outline-warning:hover{ background: var(--warning-soft); }
.btn-light{ background:#fff; border-color: var(--border); color: var(--ink-2); }
.btn-light:hover{ background: var(--surface-3); color: var(--ink); }
.btn-secondary{ background:#e2e5eb; border-color:#e2e5eb; color: var(--ink-2); }
.btn-secondary:hover{ background:#d3d7df; color: var(--ink); }

/* 表单 */
.form-label{ font-weight: 600; color: var(--ink); margin-bottom: .35rem; font-size: 13px; }
.form-text{ color: var(--muted); font-size: 12px; margin-top: .3rem; }
.form-control, .form-select{
  border-radius: var(--r-md); border: 1px solid var(--border-2);
  padding: .5rem .8rem; font-size: 14px; color: var(--ink); background:#fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus{
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.14);
}
.form-control::placeholder{ color: #aab2c0; }
.form-check-input:checked{ background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus{ box-shadow: 0 0 0 3px rgba(79,70,229,.14); border-color: var(--primary); }
.input-group-text{ background: var(--surface-2); border-color: var(--border-2); color: var(--muted); border-radius: var(--r-md); }

/* 表格 */
.table{ color: var(--ink-2); margin-bottom: 0; }
.table > :not(caption) > * > *{ padding: .7rem .85rem; border-bottom-color: var(--border); }
.table thead th{
  background: transparent; color: var(--muted); font-weight: 600;
  font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-2); white-space: nowrap;
}
.table.table-sm > :not(caption) > * > *{ padding: .5rem .7rem; }
.table tbody tr{ transition: background .12s ease; }
.table-hover > tbody > tr:hover{ background: var(--surface-2); }
.table-light, .table-light > *{ background: var(--surface-2) !important; }
.table > :not(:last-child) > :last-child > *{ border-bottom-color: var(--border-2); }

/* 徽章 */
.badge{ font-weight: 600; font-size: 11.5px; padding: .32em .65em; border-radius: var(--r-pill); letter-spacing: .01em; }
.bg-primary{ background: var(--primary-soft) !important; color: var(--primary-700) !important; }
.bg-success{ background: var(--success-soft) !important; color: var(--success) !important; }
.bg-warning, .bg-warning.text-dark{ background: var(--warning-soft) !important; color: var(--warning) !important; }
.bg-danger{ background: var(--danger-soft) !important; color: var(--danger) !important; }
.bg-info, .bg-info.text-dark{ background: var(--info-soft) !important; color: var(--info) !important; }
.bg-secondary{ background: var(--surface-3) !important; color: var(--ink-2) !important; }
.bg-light, .bg-light.text-dark{ background: var(--surface-2) !important; color: var(--ink-2) !important; }
.badge.border{ border: 1px solid var(--border-2) !important; }
.badge-status-pending{ background: var(--warning-soft) !important; color: var(--warning) !important; }
.badge-status-approved{ background: var(--success-soft) !important; color: var(--success) !important; }
.badge-status-rejected{ background: var(--danger-soft) !important; color: var(--danger) !important; }

/* 警告 */
.alert{ border: 1px solid transparent; border-radius: var(--r-md); padding: .7rem 1rem; font-size: 13.5px; }
.alert-success{ background: var(--success-soft); color: #047857; border-color: #a7f3d0; }
.alert-info{ background: var(--info-soft); color: #0e7490; border-color: #a5f3fc; }
.alert-warning{ background: var(--warning-soft); color: #92400e; border-color: #fde68a; }
.alert-danger{ background: var(--danger-soft); color: #b91c1c; border-color: #fecaca; }
.alert-secondary{ background: var(--surface-2); color: var(--ink-2); border-color: var(--border); }

/* 分页 */
.pagination{ --bs-pagination-color: var(--ink-2); --bs-pagination-bg:#fff; --bs-pagination-border-color: var(--border-2);
  --bs-pagination-active-bg: var(--primary); --bs-pagination-active-border-color: var(--primary); gap: 4px; }
.page-link{ border-radius: var(--r-sm) !important; font-size: 13px; padding:.35rem .65rem; color: var(--ink-2); }
.page-item.active .page-link{ box-shadow: 0 1px 3px rgba(79,70,229,.3); }

/* 模态 */
.modal-content{ border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer{ border-color: var(--border); }
.modal-title{ font-weight: 650; color: var(--ink); }

/* ----------------------------- 后台布局 ----------------------------- */
.sg-layout{ display: flex; min-height: 100vh; }

/* 侧边栏（浅色） */
.sg-sidebar{
  width: var(--sg-sidebar-w); flex: 0 0 var(--sg-sidebar-w);
  background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border);
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; z-index: 1040;
}
.sg-brand{
  display: flex; align-items: center; gap: 11px; padding: 16px 18px;
  border-bottom: 1px solid var(--sidebar-border); color: var(--ink);
}
.sg-brand:hover{ color: var(--ink); }
.sg-brand-logo{
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 34px;
  background: linear-gradient(140deg, #6366f1, #4338ca);
  display: grid; place-items: center; box-shadow: 0 2px 8px rgba(79,70,229,.3);
}
.sg-brand-logo svg{ width: 20px; height: 20px; }
.sg-brand-text{ line-height: 1.15; }
.sg-brand-text b{ display:block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.sg-brand-text span{ font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }

.sg-nav{ padding: 10px; overflow-y: auto; flex: 1; }
.sg-nav-section{ font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); padding: 14px 12px 5px; }
.sg-nav-section:first-child{ padding-top: 6px; }
.sg-nav-link{
  display: flex; align-items: center; gap: 11px;
  color: var(--ink-2); padding: 8px 12px; border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 500; position: relative; margin: 1px 0;
  transition: all .13s ease;
}
.sg-nav-link i{ font-size: 16px; color: var(--muted); transition: color .13s ease; }
.sg-nav-link:hover{ background: var(--surface-2); color: var(--ink); }
.sg-nav-link:hover i{ color: var(--ink-2); }
.sg-nav-link.active{ background: var(--primary-soft); color: var(--primary-700); font-weight: 600; }
.sg-nav-link.active i{ color: var(--primary); }
.sg-nav-link.active::before{
  content:""; position:absolute; left: -10px; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--primary);
}

.sg-side-foot{ padding: 12px 16px; border-top: 1px solid var(--sidebar-border); }
.sg-user-mini{ display:flex; align-items:center; gap: 10px; }
.sg-user-mini .sg-avatar{ width: 34px; height: 34px; flex:0 0 34px; font-size: 13px; }
.sg-user-mini .sg-user-meta b{ font-size: 13px; color: var(--ink); }
.sg-user-mini .sg-user-meta span{ font-size: 11px; color: var(--muted); }

/* 主区 */
.sg-main{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sg-topbar{
  height: var(--topbar-h); position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
}
.sg-topbar-left{ display:flex; align-items:center; gap: 12px; }
.sg-menu-btn{ display:none; border: none; background: transparent; color: var(--ink-2);
  font-size: 20px; width: 36px; height: 36px; border-radius: var(--r-sm); }
.sg-menu-btn:hover{ background: var(--surface-2); }
.sg-page-title{ font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.sg-breadcrumb{ font-size: 11.5px; color: var(--muted); }
.sg-topbar-right{ display:flex; align-items:center; gap: 12px; }
.sg-avatar{
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px;
  background: linear-gradient(140deg, #6366f1, #4338ca); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  box-shadow: 0 1px 4px rgba(79,70,229,.3);
}
.sg-role-pill{ font-size: 11px; font-weight: 600; padding: .15em .6em; border-radius: var(--r-pill); display:inline-block; }
.sg-role-student{ background: var(--info-soft); color: var(--info); }
.sg-role-admin{ background: var(--primary-soft); color: var(--primary-700); }
.sg-role-super{ background: var(--violet-soft); color: var(--violet); }

.sg-content{ padding: 24px; flex: 1; max-width: 1500px; width: 100%; margin: 0 auto; }
.sg-sidebar-backdrop{ display:none; position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 1035; backdrop-filter: blur(2px); }

@media (max-width: 991.98px){
  .sg-sidebar{ position: fixed; left: 0; top: 0; transform: translateX(-100%);
    transition: transform .25s ease; box-shadow: var(--shadow-lg); }
  body.sg-sidebar-open .sg-sidebar{ transform: translateX(0); }
  body.sg-sidebar-open .sg-sidebar-backdrop{ display: block; }
  .sg-menu-btn{ display: inline-flex; }
  .sg-content{ padding: 16px; }
}

/* ----------------------------- 页面结构组件 ----------------------------- */
/* 页面标题区 */
.sg-page-header{ display:flex; align-items:flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.sg-page-header h1,.sg-page-header h4{ margin:0 0 3px; font-size: 19px; }
.sg-page-header .sg-page-sub{ font-size: 13px; color: var(--muted); }
.sg-page-header .sg-page-actions{ display:flex; gap: 8px; flex-wrap: wrap; }

/* 卡片头 */
.sg-card-head{ display:flex; align-items:center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border); }
.sg-card-head + .sg-card-body, .sg-card-head + .table-responsive{ }
.sg-card-body{ padding: 16px 18px; }
.sg-card-title{ font-size: 14px; font-weight: 650; color: var(--ink); margin:0; }
.sg-card-sub{ font-size: 12px; color: var(--muted); }
.sg-card-flush .sg-card-body{ padding: 0; }

/* 让旧式 .card 内首个 strong 自动像卡片标题 */
.card > strong:first-child{ display:flex; align-items:center; gap:8px; font-size: 14px; font-weight: 650; color: var(--ink); margin-bottom: 10px; }

/* 统计卡 */
.sg-stat{ position: relative; overflow: hidden; }
.sg-stat .sg-stat-num{ font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1.1; }
.sg-stat .sg-stat-label{ font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.sg-stat .sg-stat-icon{
  position:absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 30px; color: var(--primary); opacity: .14;
}
.sg-stat.is-warning .sg-stat-icon{ color: var(--warning); }
.sg-stat.is-success .sg-stat-icon{ color: var(--success); }
.sg-stat.is-violet .sg-stat-icon{ color: var(--violet); }
.sg-stat.is-info .sg-stat-icon{ color: var(--info); }

/* 空状态 */
.sg-empty{ text-align:center; padding: 40px 20px; color: var(--muted); }
.sg-empty i{ font-size: 34px; color: var(--faint); display:block; margin-bottom: 10px; }
.sg-empty p{ margin:0; font-size: 13px; }

/* 快速操作 */
.sg-quick{ display:flex; flex-direction: column; gap: 8px; }
.sg-quick .btn{ justify-content: flex-start; text-align:left; }

/* 筛选栏 */
.sg-filter{ display:flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.sg-filter > div{ flex: 1 1 170px; min-width: 0; }
.sg-filter > button{ flex: 0 0 auto; }
.sg-filter .form-label{ margin-bottom: 2px; }
@media (max-width: 575.98px){
  .sg-filter{ gap: 8px; }
  .sg-filter > div{ flex: 1 1 100%; }
  .sg-filter > button{ flex: 1 1 100%; }
}

/* ----------------------------- 登录壳 ----------------------------- */
.sg-auth{
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 28px 16px; position: relative;
  background:
    radial-gradient(1100px 520px at 12% -8%, #e0e7ff 0%, transparent 52%),
    radial-gradient(900px 460px at 108% 6%, #ede9fe 0%, transparent 48%),
    linear-gradient(165deg, #f6f7fb 0%, #eef0f7 100%);
}
.sg-auth-card{
  width: 100%; max-width: 420px; padding: 32px; background: #fff;
  border: 1px solid rgba(255,255,255,.6); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.sg-auth-wide{ max-width: 600px; }
.sg-auth-head{ text-align:center; margin-bottom: 22px; }
.sg-auth-logo{
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 12px;
  background: linear-gradient(140deg, #6366f1, #4338ca);
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(79,70,229,.32);
}
.sg-auth-logo svg{ width: 28px; height: 28px; }
.sg-auth-head h4{ font-size: 19px; margin: 0 0 4px; }
.sg-auth-head p{ color: var(--muted); font-size: 12.5px; margin: 0; }
.sg-auth-foot{ text-align:center; margin-top: 18px; font-size: 13px; color: var(--muted); }
.sg-auth-foot a{ font-weight: 600; }

/* 登录页分隔线 */
.sg-divider{ display:flex; align-items:center; gap: 12px; color: var(--muted); font-size: 12px; margin: 18px 0; }
.sg-divider::before, .sg-divider::after{ content:""; flex:1; height:1px; background: var(--border); }
.sg-divider span{ padding: 0 4px; }

/* 认证页输入框聚焦时整体高亮（配合 input-group 去掉相邻边框的写法） */
.sg-auth-card .input-group:focus-within .input-group-text{ border-color: var(--primary); }
.sg-auth-card .input-group:focus-within .form-control{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.14); }
.sg-auth-card .input-group .form-control{ border-right:none; }
.sg-auth-card .input-group .input-group-text:last-child{ border-left:none; border-right:1px solid var(--border-2); }
.sg-footer{ font-size: 12px; color: var(--muted); text-align:center; padding: 18px 0 0; }

/* 公开页 */
.sg-public{ background: var(--bg); min-height: 100vh; }
.sg-public-nav{
  background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30;
}
.sg-public-brand{ display:flex; align-items:center; gap: 11px; color: var(--ink); padding: 11px 0; }
.sg-public-brand:hover{ color: var(--ink); }
.sg-public-brand .sg-brand-logo{ width: 34px; height: 34px; border-radius: 9px; }
.sg-public-brand .sg-brand-logo svg{ width: 20px; height: 20px; }