/**
 * 全局共享 UI 主题(老师端 /app、管理员后台 /database、文件页 /database/library)。
 *
 * 方向:高级简约、零视觉疲劳 —— 暖白底、发丝边框、近黑主按钮(唯一强调色)、
 * 无渐变、无彩色、无阴影(弹层仅一丝)、Inter 全界面、克制的动效。
 * 所有页面的设计令牌收敛于此,调色只改这里。
 */

export const UI_HEAD_FONTS = `
  <link rel="preconnect" href="https://fonts.googleapis.com"/>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
`;

export const UI_THEME_CSS = `
  :root {
    --bg: #FCFCFB;
    --panel: #FFFFFF;
    --sidebar: #F7F7F5;
    --text: #1A1A18;
    --text-2: #6B6A66;
    --text-3: #9C9B96;
    --border: #ECECE8;
    --border-soft: #F1F1EE;
    --hover: #F4F4F1;
    --selected: #EBEBE7;
    --accent: #1A1A18;
    --accent-hover: #333330;
    --danger: #A13A33;
    --guide: #E9E9E5;
    --diff-add-bg: #F3F6F2;
    --diff-add-text: #4A6741;
    --diff-del-bg: #F8F2F1;
    --diff-del-text: #A13A33;
    --sans: 'Inter', -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --shadow-pop: 0 4px 20px rgba(26,26,24,.07);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; }
  body {
    font-family: var(--sans);
    background: var(--bg); color: var(--text);
    font-size: 14px; line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  .hidden { display: none !important; }
  h1, h2, h3 { margin: 0; }
  a { color: var(--text); text-decoration: none; }
  a:hover { text-decoration: underline; }

  /* 按钮:近黑实心(主)/ 发丝边幽灵(次)/ 文字型(危险) */
  .btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--panel);
    color: var(--text); font-size: 12.5px; font-weight: 500;
    cursor: pointer; transition: all 120ms ease; text-decoration: none;
  }
  .btn:hover { background: var(--hover); text-decoration: none; }
  .btn-primary {
    background: var(--accent); border-color: var(--accent); color: #fff;
  }
  .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .btn-danger { border-color: transparent; background: transparent; color: var(--danger); }
  .btn-danger:hover { background: #A13A3312; }

  /* 面板与标签 */
  .panel {
    background: var(--panel); border: 1px solid var(--border-soft);
    border-radius: 10px; padding: 20px 22px;
  }
  .tag {
    font-size: 10.5px; font-weight: 500; font-family: var(--mono);
    padding: 2px 8px; border-radius: 999px;
    border: 1px solid var(--border-soft); color: var(--text-3); background: var(--panel);
  }
  .tag-role { color: var(--text-2); border-color: var(--border); }

  /* 页签 */
  .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-soft); margin-bottom: 18px; }
  .tab {
    padding: 8px 14px; font-size: 13px; color: var(--text-3);
    border: none; background: none; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color 120ms ease;
  }
  .tab:hover { color: var(--text); }
  .tab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }

  /* 表单 */
  .input, .select, .textarea {
    width: 100%; padding: 7px 11px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--panel);
    font-size: 13px; color: var(--text); font-family: inherit;
    outline: none; transition: border-color 120ms ease;
  }
  .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); }
  .textarea { font-family: var(--mono); font-size: 12.5px; line-height: 1.75; resize: vertical; }
  .form-label { display: block; font-size: 11.5px; color: var(--text-3); margin-bottom: 4px; }
  .form-row { margin-bottom: 12px; }
  .inline-form { display: flex; gap: 8px; align-items: center; }
  .inline-form .input { flex: 1; }

  /* 表格 */
  table.list { width: 100%; border-collapse: collapse; font-size: 13px; }
  table.list th { text-align: left; font-size: 11.5px; font-weight: 500; color: var(--text-3); padding: 4px 0; }
  table.list td { padding: 8px 0; border-top: 1px solid var(--border-soft); }
  table.list tr:first-child td { border-top: none; }

  /* 弹层 */
  .modal-mask {
    position: fixed; inset: 0; z-index: 40;
    background: rgba(26,26,24,.3);
    display: flex; align-items: center; justify-content: center; padding: 16px;
  }
  .modal-card {
    width: 100%; max-width: 430px; background: var(--panel);
    border: 1px solid var(--border-soft); border-radius: 14px; padding: 22px;
    box-shadow: var(--shadow-pop);
  }
  .modal-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
  .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
  .toast {
    border-radius: 8px; padding: 8px 16px; font-size: 12.5px; color: #fff;
    background: #333230; max-width: 330px;
  }
  .toast-err { background: #7E2C26; }
  #toast-root { position: fixed; bottom: 18px; right: 18px; z-index: 50; display: flex; flex-direction: column; gap: 8px; }

  .quiet { color: var(--text-3); font-size: 12.5px; }
  .divider { border-top: 1px solid var(--border-soft); margin: 14px 0; }
  .section-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
  .section-note { font-size: 11.5px; color: var(--text-3); margin-top: 6px; }
  .file-path { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
  .file-meta { font-size: 11px; color: var(--text-3); font-family: var(--mono); }
  .link-danger { color: var(--danger); font-size: 12.5px; background: none; border: none; cursor: pointer; padding: 0; }
  .link-danger:hover { text-decoration: underline; }
`;