:root{
  --bg:#f6f8fb;--card:#fff;--text:#152238;--muted:#6b7b8d;--primary:#c38a51;--border:#e6ebf2
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
.topbar{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--border);padding:10px 16px;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.title{color:var(--primary);font-weight:700;display:flex;align-items:center;line-height:1}
.logo{width:20px;height:20px;display:block;margin-right:8px}
.topbar .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:nowrap}
.container{max-width:960px;margin:24px auto;padding:0 16px;display:flex;flex-direction:column;gap:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px}
.row{display:flex;gap:12px;align-items:center;margin:8px 0}
/* 行内操作按钮行：即使在窄屏也保持同行 */
.row.actions-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.section-gap{margin-top:14px}
label{min-width:90px}
input{padding:6px 10px;border:1px solid var(--border);border-radius:8px}
button{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:8px 14px;cursor:pointer}
/* Hover 仅在支持 hover 的设备上启用，避免移动端点击后粘住 */
.btn{display:inline-block;background:var(--primary);color:#fff;border:none;border-radius:8px;padding:8px 14px;cursor:pointer;text-decoration:none}
@media (hover:hover) and (pointer:fine){
  button:hover{opacity:.95}
  .btn:hover{opacity:.95}
}
button, .btn{-webkit-tap-highlight-color: transparent; touch-action: manipulation}
/* Ghost 按钮：默认白底，仅悬停时变主题色 */
.btn.ghost{background:#fff;color:var(--primary);border:1px solid var(--primary)}
@media (hover:hover) and (pointer:fine){
  .btn.ghost:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
}
/* 强制在触屏或禁用 hover 模式下，hover 不产生高亮（规避移动端粘住） */
.no-hover .btn.ghost:hover{background:#fff;color:var(--primary);border-color:var(--primary)}
.no-hover .btn:hover, .no-hover button:hover{opacity:1}
/* 单次按钮，不保留点击后的激活态 */
.btn:focus{outline:none}
.btn.ghost:focus{background:#fff;color:var(--primary);border-color:var(--primary)}
.students{display:flex;flex-wrap:wrap;gap:8px}
.students{width:100%}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:6px 10px;background:#fff}
.chip input{transform:translateY(1px)}
/* Theme preview chips (applied dynamically) */
#themeWrap .chip.theme-preview{
  position:relative;
  padding:0;
  gap:0;
  border-radius:50%;
  width:var(--chip-size, 52px);
  height:var(--chip-size, 52px);
  overflow:hidden;
  background-color:#fff;
  background-image:var(--chip-bg, none);
  background-size:cover;
  background-position:center;
  justify-content:center;
  text-align:center;
}
#themeWrap .chip.theme-preview span{
  position:relative;
  z-index:1;
  color:#111;
  text-shadow:
    -1px -1px 0 #fff,
    0 -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 0 0 #fff,
    1px 0 0 #fff,
    -1px 1px 0 #fff,
    0 1px 0 #fff,
    1px 1px 0 #fff;
}
#themeWrap .chip.theme-preview:has(input:checked){
  border-color:var(--primary);
  box-shadow:0 0 0 2px var(--primary);
}

/* 通用学号网格与格子（与管理页一致） */
.grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(64px,1fr));gap:10px;width:100%;flex:1}
.tag{display:flex;align-items:center;justify-content:center;height:48px;border-radius:10px;border:1px solid var(--border);cursor:pointer;user-select:none}
.tag.sel{background:var(--primary);color:#fff;border-color:var(--primary)}
.tag.done{background:#e9ecef;color:#6b7b8d;border-color:#dde2ea}
.tag.sel.done{background:var(--primary);color:#fff;border-color:var(--primary)}
.list-item{display:grid;grid-template-columns:auto 2fr 1fr 1fr auto;align-items:center;column-gap:12px;border:1px solid var(--border);border-radius:10px;padding:10px;margin:8px 0;background:#fff}
.col-icon{display:flex;align-items:center}
.theme-icon{width:32px;height:32px;border-radius:50%;background:#f1f3f5;border:none;background-size:cover;background-position:center;background-repeat:no-repeat}
.theme-icon.has-img{background-color:#fff}
.muted{color:var(--muted)}
.actions{display:flex;gap:8px}
.list-item > .col-icon{grid-column:1}
.list-item > .col-name{grid-column:2}
.list-item > .col-time{grid-column:3}
.list-item > .col-status{grid-column:4;justify-self:end}
.list-item > .col-actions{grid-column:5;justify-self:end}
.pill{padding:4px 8px;border-radius:999px;font-size:12px}
.pill.live{background:#d7f5e8;color:#087f5b}
.pill.draft{background:#ffecec;color:#c92a2a}

/* Mobile layout */
@media (max-width: 720px){
  .list-item{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto auto;gap:8px;align-items:center}
  .list-item > .col-icon{grid-column:1;grid-row:1 / span 2;align-self:start}
  .list-item > .col-name{grid-column:2;grid-row:1}
  .list-item > .col-time{grid-column:2;grid-row:2}
  .list-item > .col-actions{grid-column:1 / span 3;grid-row:3; margin-left:0}
  .list-item > .col-status{grid-column:3;grid-row:1; justify-self:end}
  .col-name{font-weight:600}
  .col-time{color:var(--muted);font-size:12px}
  .col-actions{display:flex;gap:6px;flex-wrap:wrap}
  .col-actions button, .col-actions .btn{margin-top:6px}
  .col-status{justify-self:end}
  button, .btn{padding:6px 10px;font-size:14px}
  .list-item > .col-actions{justify-self:center}
  .list-item .col-actions{justify-content:center}
  .theme-icon{width:28px;height:28px}
  /* 表单行纵向排列，避免挤压 */
  .row{flex-direction:column;align-items:flex-start}
  /* actions-inline 行在移动端仍保持横向 */
  .row.actions-inline{flex-direction:row !important; align-items:center}
  .row.actions-inline .btn, .row.actions-inline button{margin-top:0 !important}
  label{min-width:0}
  .row .btn, .row button{margin-top:8px}
}

/* 专门禁用“一键”按钮的悬停/激活变色（保持白底不变色） */
#btnSelectAll.btn.ghost, #btnSelectNone.btn.ghost{background:#fff;color:var(--primary);border:1px solid var(--primary)}
@media (hover:hover) and (pointer:fine){
  #btnSelectAll.btn.ghost:hover, #btnSelectNone.btn.ghost:hover{background:#fff;color:var(--primary);border-color:var(--primary);opacity:1}
}
#btnSelectAll.btn.ghost:active, #btnSelectAll.btn.ghost:focus,
#btnSelectNone.btn.ghost:active, #btnSelectNone.btn.ghost:focus{background:#fff;color:var(--primary);border-color:var(--primary)}