/* 用户中心（/account 登录后）的外壳与公共组件，UPDF 风格：浅灰页面底、左导航、右侧大圆角内容面板、
   白色圆角卡片、蓝紫主按钮。配色用 --uc-* 令牌，深色模式在 prefers-color-scheme: dark 里整体重定义（沿用 site.css 的做法）。
   所有页面（含「管理」下的账号管理、数据看板）一律用下面的 uc- 类，页面特有样式在各自的 uc-*.css。CSP 禁止内联 style，状态都用 class / hidden 表达。

   ===== 外壳结构 =====
   #app-shell.uc-shell
     header.uc-top                顶栏：.uc-brand（logo + OmniExam）· .uc-brand-sep · .uc-brand-sub（用户中心）· .uc-user（头像按钮 + .uc-menu 下拉）
     .uc-layout
       aside.uc-side > nav.uc-nav#side-nav   左侧导航（a.uc-nav-item[aria-current=page]，管理分组 .uc-nav-group）
       .uc-content#app-pane                   右侧大面板，里面是 section.uc-panel：
         section.uc-panel#panel-<name>
           header.uc-head > h1.uc-title       由外壳生成
           div.uc-body                        页面模块往这里放内容

   ===== 公共组件类名（页面直接用）=====
   .uc-stack         纵向排列，子元素间距 16px（放卡片、段落）
   .uc-card          白色圆角卡片，内边距 24px
   .uc-card-title    卡片小标题（加粗 16px）
   .uc-card-desc     灰色说明文字（13px）
   .uc-row           左标签右内容的一行，行间带分隔线；子元素用 .uc-row-label（灰色，固定宽）与 .uc-row-value（内容，可换行）
   .uc-table         表格（放在 .uc-table-wrap 里窄屏可横向滚动）：表头灰字、行分隔、最后一列右对齐
   .uc-btn           次按钮：白底细边框；.uc-btn.primary 蓝紫实心；.uc-btn.danger 红字；.uc-btn.sm 小号；:disabled 变淡
   .uc-actions       一排按钮（flex，间距 12px）；.uc-actions.end 右对齐
   .uc-field         表单项（label 包住 .uc-label 与控件，纵向）；.uc-form 表单项纵向容器
   .uc-input         文本输入 / 文本域；.uc-select 下拉（自带箭头）
   .uc-badge         浅蓝底小标签；.uc-badge.ok 绿；.uc-badge.warn 橙；.uc-badge.free 灰
   .uc-msg           提示条，加 .error 或 .ok；hidden 时不占位
   .uc-empty         空状态（居中灰字，可放图标 .icon 与文字）
   .uc-notice        灰底说明条（如设备管理页顶部那条）
   .uc-setting       账号设置的一行：子元素 .uc-setting-icon（左图标）+ .uc-setting-text（> .uc-setting-title / .uc-setting-desc）+ .uc-setting-action（右按钮）
   .uc-dialog        模态对话框（由 OmniShell.dialog({...}) 生成：.uc-dialog-head / -body / -foot / -x）
   .uc-avatar        圆形渐变头像（.lg 大号），内含 .uc-avatar-letter 与 img.uc-avatar-img
   .uc-mono          等宽字体（机器码、激活码）
   .uc-link          链接样式的按钮 / a（蓝紫字）
   .uc-muted         灰色文字
   .uc-nowrap        不换行
   .uc-grow          flex 子项占满剩余空间 */

/* ---------- 令牌 ---------- */
.uc-shell {
    --uc-bg: #ebebeb;
    --uc-panel: #f5f5f5;
    --uc-card: #ffffff;
    --uc-text: #1f1f24;
    --uc-text-2: #3d3d46;
    --uc-muted: #7b7b88;
    --uc-border: #e0e0e5;
    --uc-divider: #ececf0;
    --uc-hover: #ededf2;
    --uc-primary: #6c6cf5;
    --uc-primary-hover: #5a5aea;
    --uc-primary-text: #ffffff;
    --uc-danger: #e5484d;
    --uc-danger-soft: #fdecec;
    --uc-ok: #1f9d55;
    --uc-ok-soft: #e6f6ec;
    --uc-warn: #c77700;
    --uc-warn-soft: #fff1da;
    --uc-badge-bg: #e3edff;
    --uc-badge-fg: #3a6fe0;
    --uc-notice: #ebebef;
    --uc-shadow: 0 12px 36px rgba(20, 20, 40, 0.16);
    --uc-focus: rgba(108, 108, 245, 0.28);
    --uc-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8a96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    .uc-shell {
        --uc-bg: #141418;
        --uc-panel: #1c1c22;
        --uc-card: #26262e;
        --uc-text: #ececf1;
        --uc-text-2: #cfcfd8;
        --uc-muted: #9a9aa8;
        --uc-border: #3a3a45;
        --uc-divider: #32323c;
        --uc-hover: #30303a;
        --uc-primary: #7b7bff;
        --uc-primary-hover: #9090ff;
        --uc-primary-text: #101018;
        --uc-danger: #ff6b70;
        --uc-danger-soft: #3d2124;
        --uc-ok: #4ade80;
        --uc-ok-soft: #173a26;
        --uc-warn: #f5a524;
        --uc-warn-soft: #3d2d12;
        --uc-badge-bg: #223357;
        --uc-badge-fg: #9db8ff;
        --uc-notice: #2c2c35;
        --uc-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
        --uc-focus: rgba(123, 123, 255, 0.35);
    }
}

/* ---------- 页面与外壳 ---------- */
body.is-app {
    background: #ebebeb;
    overflow: visible;
}
@media (prefers-color-scheme: dark) {
    body.is-app { background: #141418; }
}
body.is-app .topbar,
body.is-app .footer { display: none; }
body.is-app main.account { padding: 0; background: transparent; }

.uc-shell {
    display: block;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    background: var(--uc-bg);
    color: var(--uc-text);
    color-scheme: light dark;
    font-size: 15px;
    line-height: 1.5;
}
.uc-shell [hidden] { display: none !important; }
.uc-shell :focus-visible {
    outline: 2px solid var(--uc-primary);
    outline-offset: 2px;
}
.uc-shell .icon { width: 20px; height: 20px; }
:where(.uc-shell) a { color: inherit; text-decoration: none; }
.uc-shell * { box-sizing: border-box; }
:where(.uc-shell) button { font: inherit; color: inherit; }
:where(.uc-shell) h1, :where(.uc-shell) h2, :where(.uc-shell) p { margin: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 底部提示条（OmniShell.toast） */
.shell-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 30;
    max-width: calc(100vw - 32px);
    padding: 9px 16px;
    border-radius: 8px;
    background: #1f1f24;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.4;
}

/* 顶栏 */
.uc-top {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 68px;
    padding: 0 32px;
}
.uc-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
}
.uc-brand img { width: 32px; height: 32px; border-radius: 8px; }
.uc-brand-name { font-size: 20px; font-weight: 700; letter-spacing: -0.2px; color: var(--uc-text); }
.uc-brand-sep { width: 1px; height: 22px; background: var(--uc-border); flex: none; }
.uc-brand-sub { font-size: 16px; color: var(--uc-text-2); white-space: nowrap; }
.uc-user { margin-left: auto; position: relative; }

/* 头像 */
.uc-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, #7aa7ff 0%, #7b6cf6 100%);
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}
.uc-avatar.lg { width: 48px; height: 48px; font-size: 20px; }
.uc-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.uc-avatar.has-img .uc-avatar-letter { visibility: hidden; }
.uc-avatar-btn {
    display: inline-flex;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}
.uc-avatar-btn:hover .uc-avatar { box-shadow: 0 0 0 4px var(--uc-focus); }

/* 头像下拉 */
.uc-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 40;
    width: 280px;
    padding: 18px 8px 8px;
    border: 1px solid var(--uc-divider);
    border-radius: 16px;
    background: var(--uc-card);
    box-shadow: var(--uc-shadow);
}
.uc-menu-head { display: flex; align-items: center; gap: 12px; padding: 0 10px; }
.uc-menu-id { display: flex; flex-direction: column; min-width: 0; }
.uc-menu-id strong {
    font-size: 16px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.uc-menu-id span {
    font-size: 13px;
    color: var(--uc-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.uc-menu-badge { margin: 12px 10px 0; }
.uc-menu-sep { height: 1px; margin: 10px 4px; border: 0; background: var(--uc-divider); }
.uc-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--uc-text);
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}
.uc-menu-item:hover,
.uc-menu-item:focus-visible { background: var(--uc-hover); }
.uc-menu-item .icon { width: 18px; height: 18px; color: var(--uc-muted); }

/* 布局 */
.uc-layout {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    gap: 20px;
    padding: 0 32px 32px;
    align-items: start;
}
.uc-side { position: sticky; top: 16px; }
.uc-nav { display: flex; flex-direction: column; gap: 4px; }
.uc-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 46px;
    padding: 0 16px;
    border-radius: 12px;
    color: var(--uc-text-2);
    font-size: 15px;
    white-space: nowrap;
}
.uc-nav-item .icon { color: var(--uc-muted); flex: none; }
.uc-nav-item:hover { background: var(--uc-hover); text-decoration: none; }
.uc-nav-item[aria-current="page"] {
    background: var(--uc-card);
    color: var(--uc-text);
    font-weight: 600;
}
.uc-nav-item[aria-current="page"] .icon {
    color: var(--uc-text);
    fill: currentColor;
    fill-opacity: 0.14;
    stroke-width: 2.2;
}
.uc-nav-group {
    margin: 14px 0 4px;
    padding: 0 16px;
    font-size: 12px;
    color: var(--uc-muted);
    letter-spacing: 0.04em;
}

.uc-content {
    min-width: 0;
    min-height: calc(100vh - 68px - 32px);
    min-height: calc(100dvh - 68px - 32px);
    padding: 32px 40px 40px;
    border-radius: 24px;
    background: var(--uc-panel);
    container-type: inline-size;
    container-name: pane;
}
.uc-panel[hidden] { display: none; }
.uc-head {
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--uc-border);
}
.uc-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--uc-text);
}
.uc-body { min-width: 0; }


/* ---------- 公共组件 ---------- */
.uc-stack { display: grid; gap: 16px; }
/* grid 子项默认 min-width:auto，宽表格会撑破窄屏 */
.uc-stack > * { min-width: 0; }
.uc-card {
    padding: 24px;
    border-radius: 16px;
    background: var(--uc-card);
    color: var(--uc-text);
}
.uc-card-title { margin: 0 0 6px; font-size: 16px; line-height: 1.4; font-weight: 600; }
.uc-card-desc { margin: 0; font-size: 13px; line-height: 1.6; color: var(--uc-muted); }
.uc-card-title + .uc-card-desc { margin-top: 2px; }
.uc-muted { color: var(--uc-muted); }
.uc-nowrap { white-space: nowrap; }
.uc-grow { flex: 1; min-width: 0; }
.uc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.uc-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--uc-primary);
    font: inherit;
    cursor: pointer;
}
.uc-link:hover { text-decoration: underline; }

.uc-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--uc-divider);
}
.uc-row:last-child { border-bottom: 0; }
.uc-row-label { flex: none; width: 120px; font-size: 14px; color: var(--uc-muted); }
.uc-row-value { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }

.uc-table-wrap { overflow-x: auto; }
.uc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.uc-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: var(--uc-muted);
    border-bottom: 1px solid var(--uc-divider);
    white-space: nowrap;
}
.uc-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--uc-divider);
    vertical-align: middle;
}
.uc-table tr:last-child td { border-bottom: 0; }
.uc-table th:last-child,
.uc-table td:last-child { text-align: right; }

.uc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border: 1px solid var(--uc-border);
    border-radius: 10px;
    background: var(--uc-card);
    color: var(--uc-text);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
.uc-btn:hover { background: var(--uc-hover); }
.uc-btn .icon { width: 16px; height: 16px; }
.uc-btn.primary {
    border-color: var(--uc-primary);
    background: var(--uc-primary);
    color: var(--uc-primary-text);
}
.uc-btn.primary:hover { border-color: var(--uc-primary-hover); background: var(--uc-primary-hover); }
.uc-btn.danger { color: var(--uc-danger); }
.uc-btn.danger:hover { background: var(--uc-danger-soft); }
.uc-btn.sm { height: 32px; padding: 0 14px; border-radius: 8px; font-size: 13px; }
.uc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.uc-btn:disabled:hover { background: var(--uc-card); }
.uc-btn.primary:disabled:hover { background: var(--uc-primary); }
.uc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.uc-actions.end { justify-content: flex-end; }

.uc-form { display: grid; gap: 16px; }
.uc-field { display: grid; gap: 6px; }
.uc-label { font-size: 14px; font-weight: 500; color: var(--uc-text-2); }
.uc-input,
.uc-select {
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--uc-border);
    border-radius: 10px;
    background: var(--uc-card);
    color: var(--uc-text);
    font: inherit;
    font-size: 15px;
}
textarea.uc-input { padding: 10px 14px; line-height: 1.5; resize: vertical; }
.uc-input::placeholder { color: var(--uc-muted); opacity: 0.8; }
.uc-input:focus,
.uc-select:focus {
    outline: none;
    border-color: var(--uc-primary);
    box-shadow: 0 0 0 3px var(--uc-focus);
}
.uc-input:disabled,
.uc-select:disabled { opacity: 0.6; cursor: not-allowed; }
.uc-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: var(--uc-select-arrow);
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

.uc-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 4px;
    height: 24px;
    padding: 0 10px;
    border-radius: 6px;
    background: var(--uc-badge-bg);
    color: var(--uc-badge-fg);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.uc-badge .icon { width: 13px; height: 13px; }
.uc-badge.ok { background: var(--uc-ok-soft); color: var(--uc-ok); }
.uc-badge.warn { background: var(--uc-warn-soft); color: var(--uc-warn); }
.uc-badge.free { background: var(--uc-notice); color: var(--uc-muted); }

.uc-msg { margin: 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.uc-msg.error { background: var(--uc-danger-soft); color: var(--uc-danger); }
.uc-msg.ok { background: var(--uc-ok-soft); color: var(--uc-ok); }

.uc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 48px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--uc-muted);
}
.uc-empty .icon { width: 36px; height: 36px; opacity: 0.6; }

.uc-notice {
    margin: 0;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--uc-notice);
    color: var(--uc-text-2);
    font-size: 14px;
    line-height: 1.6;
}

.uc-setting {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--uc-divider);
}
.uc-setting:last-child { border-bottom: 0; }
.uc-setting-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--uc-panel);
    color: var(--uc-text-2);
}
.uc-setting-text { flex: 1; min-width: 0; }
.uc-setting-title { margin: 0; font-size: 15px; font-weight: 600; }
.uc-setting-desc { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--uc-muted); }
.uc-setting-action { flex: none; }

/* ---------- 对话框 ---------- */
.uc-dialog {
    width: min(480px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: var(--uc-card);
    color: var(--uc-text);
    box-shadow: var(--uc-shadow);
}
.uc-dialog[open] { display: flex; flex-direction: column; }
.uc-dialog.wide { width: min(760px, calc(100vw - 32px)); }
.uc-dialog::backdrop { background: rgba(10, 10, 20, 0.45); }
.uc-dialog-head {
    flex: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 24px 8px;
}
.uc-dialog-title { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 700; }
.uc-dialog-titles .uc-card-desc { margin-top: 4px; }
.uc-dialog-x {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--uc-muted);
    cursor: pointer;
}
.uc-dialog-x:hover { background: var(--uc-hover); }
.uc-dialog-x .icon { width: 18px; height: 18px; }
.uc-dialog-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 24px 16px; }
.uc-dialog-text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--uc-text-2); }
.uc-dialog-foot {
    flex: none;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 24px 22px;
}

/* ---------- 窄屏：导航变成顶部横向滚动的标签条 ---------- */
@media (max-width: 860px) {
    .uc-top { height: 60px; padding: 0 16px; gap: 10px; }
    .uc-brand-name { font-size: 18px; }
    .uc-brand-sub { font-size: 14px; }
    .uc-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 0 16px 16px;
    }
    .uc-side { position: static; min-width: 0; }
    .uc-nav {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .uc-nav::-webkit-scrollbar { display: none; }
    .uc-nav-item { flex: none; height: 40px; padding: 0 14px; gap: 8px; border-radius: 10px; font-size: 14px; }
    .uc-nav-item .icon { width: 18px; height: 18px; }
    .uc-nav-group { margin: 0 4px 0 8px; padding: 0; flex: none; white-space: nowrap; }
    .uc-content {
        min-height: calc(100vh - 60px - 120px);
        padding: 20px 16px 28px;
        border-radius: 18px;
    }
    .uc-head { padding-bottom: 14px; margin-bottom: 18px; }
    .uc-title { font-size: 22px; }
    .uc-card { padding: 18px 16px; }
    .uc-row { flex-wrap: wrap; gap: 4px 16px; }
    .uc-row-label { width: 100%; font-size: 13px; }
    .uc-setting { flex-wrap: wrap; }
    .uc-setting-action { margin-left: 56px; }
    .uc-menu { width: min(280px, calc(100vw - 32px)); }
}