/* 新技元工单系统 · 设计系统 v2（2026-09 视觉重设计）
   ===========================================================================
   说明：文档 §8 选用 Tailwind。为避免运行时依赖外部 CDN（内网部署场景），
   这里内联一份 Tailwind 风格的实用类子集 + 组件类，类名与 Tailwind 保持一致，
   后续若接入 Tailwind 构建流程，模板无需改动。

   v2 相对 v1 的变化（只改设计语言，不改类名语义）：
     1. 中性色板 + 单一主色；状态统一用「浅底 + 深字 + 小圆点」，不再满铺色块；
     2. 间距走 4pt 栅格，圆角/阴影收敛为三级，去掉"硬描边堆叠"感；
     3. 布局从「深色侧栏 + 顶栏 + 内容」改为
        桌面：浅色左导航（rail，分组常驻） + 顶栏 + 内容
        移动：顶栏（含汉堡） + 内容 + 底部 Tab 栏（tabbar），左导航降级为抽屉；
     4. 新增卡片流/行列表/弹层/聊天气泡等组件，供列表页与详情页使用；
     5. 全部图标使用内联 SVG（不引字体图标，避免缺字形导致方块/巨块）。
   =========================================================================== */

:root {
  /* ---------- 色板：中性灰 + 一个主色 ---------- */
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-2: #fafbfc;
  --color-border: #e9ebef;
  --color-border-strong: #d9dde4;
  --color-text: #111827;
  --color-text-2: #4b5563;
  --color-muted: #8b93a1;

  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-bg: #eef3ff;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger: #dc2626;

  /* 语义状态：浅底 + 深字（状态徽标、标签、提示条共用） */
  --ink-open: #1d4ed8;    --bg-open: #eef3ff;
  --ink-pending: #9a5b06; --bg-pending: #fdf4e6;
  --ink-closed: #6b7280;  --bg-closed: #f1f3f6;
  --ink-ok: #0f7b4f;      --bg-ok: #e9f7f0;
  --ink-danger: #b42318;  --bg-danger: #fdeceb;

  /* ---------- 圆角 / 阴影 ---------- */
  --radius-sm: 8px;
  --radius: 12px;          /* 卡片默认 */
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 6px 20px rgba(16, 24, 40, .08);
  --shadow-up: 0 -6px 20px rgba(16, 24, 40, .08);

  /* ---------- 布局尺寸 ---------- */
  --rail-w: 216px;
  --topbar-h: 60px;
  --tabbar-h: 58px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font); font-size: .875rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.35; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre { background: #0f172a; color: #e2e8f0; padding: 12px; border-radius: var(--radius-sm); overflow: auto; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: 1rem 0; }

/* 内联 SVG 图标（统一尺寸，避免各页面各写一套） */
.icon { width: 20px; height: 20px; flex: 0 0 auto; display: block; }
.icon-sm { width: 16px; height: 16px; flex: 0 0 auto; display: block; }
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text-2); cursor: pointer;
}
.iconbtn:hover { background: #f1f3f6; text-decoration: none; }

/* ---------- 应用外壳：桌面 = 左导航常驻 ---------- */
.app-shell { display: flex; min-height: 100vh; }

.rail {
  width: var(--rail-w); flex: 0 0 var(--rail-w);
  background: var(--color-surface); border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column; padding: 12px;
}
.rail-brand { display: flex; align-items: center; gap: 8px; padding: 8px 8px 16px; }
.rail-logo {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px;
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
}
.rail-brand b { font-size: .95rem; display: block; }
.rail-brand small { color: var(--color-muted); font-size: .72rem; }
.rail-sec {
  color: var(--color-muted); font-size: .7rem; font-weight: 600;
  letter-spacing: .06em; padding: 14px 8px 6px;
}
.rail-item {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px;
  border-radius: var(--radius-sm); color: var(--color-text-2); font-size: .875rem;
}
.rail-item:hover { background: var(--color-surface-2); text-decoration: none; }
.rail-item.active, .rail-item.rail-item-active {
  background: var(--color-primary-bg); color: var(--color-primary-dark); font-weight: 600;
}
.rail-item .count, .rail-item .ml-auto { margin-left: auto; }
.rail-foot {
  margin-top: auto; border-top: 1px solid var(--color-border); padding-top: 12px;
  display: flex; align-items: center; gap: 8px;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--topbar-h); padding: 10px 20px;
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
.topbar-lead { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.topbar h1 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.topbar .topbar-sub { color: var(--color-muted); font-size: .8rem; margin-top: 2px; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.content { padding: 20px; flex: 1; }
.content-narrow { max-width: 880px; }
.content-wide { max-width: 1400px; }

/* 移动端外壳元素：桌面隐藏，窄屏在文件末尾的 @media 中启用 */
.nav-toggle { display: none; }
.nav-backdrop { display: none; }
.m-tabbar { display: none; }

/* ---------- 卡片 / 面板 ---------- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.card-header { padding: 12px 16px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-header h2 { font-size: .95rem; }
.card-body { padding: 16px; }
.card-footer { padding: 12px 16px; border-top: 1px solid var(--color-border); background: var(--color-surface-2); border-radius: 0 0 var(--radius) var(--radius); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 6px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong); background: var(--color-surface);
  color: var(--color-text); cursor: pointer; font: inherit; font-size: .875rem; font-weight: 500;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: #f6f7f9; text-decoration: none; }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-success { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.btn-sm { min-height: 30px; padding: 3px 10px; font-size: .8rem; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--color-text-2); }
.btn-ghost:hover { background: #f1f3f6; }
.btn[disabled], .btn.disabled { opacity: .55; cursor: not-allowed; }

/* ---------- 状态徽标：浅底 + 深字 + 圆点 ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px;
  border-radius: var(--radius-pill); font-size: .75rem; font-weight: 500;
  border: 1px solid transparent; white-space: nowrap; vertical-align: middle;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-awaiting { background: var(--bg-pending); color: var(--ink-pending); }
.badge-open { background: var(--bg-open); color: var(--ink-open); }
.badge-pending { background: var(--bg-pending); color: var(--ink-pending); }
.badge-closed { background: var(--bg-closed); color: var(--ink-closed); }
.badge-claimed { background: var(--bg-ok); color: var(--ink-ok); }
.badge-danger { background: var(--bg-danger); color: var(--ink-danger); }
/* 计数角标（导航/tab 上的数字） */
.count, .badge-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--ink-danger); color: #fff; font-size: .68rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- 标签 ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 4px; }
.tag-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px;
  border-radius: var(--radius-pill); font-size: .72rem; line-height: 1.7;
  border: 1px solid transparent; white-space: nowrap; background: var(--bg-closed); color: var(--ink-closed);
}
.tag-slate  { background: #f1f3f6; color: #4b5563; }
.tag-blue   { background: #eaf1ff; color: #1d4ed8; }
.tag-green  { background: #e9f7f0; color: #0f7b4f; }
.tag-amber  { background: #fdf4e6; color: #9a5b06; }
.tag-red    { background: #fdeceb; color: #b42318; }
.tag-purple { background: #f1ecfe; color: #5b21b6; }
.tag-teal   { background: #e6f7f4; color: #0f766e; }
.tag-foreign { opacity: .65; }
.tag-remove { border: 1px solid var(--color-border-strong); background: transparent; color: var(--color-muted); border-radius: var(--radius-pill); }

/* ---------- 头像 / 键值行 ---------- */
.avatar {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
  background: var(--color-primary-bg); color: var(--color-primary-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 600;
}
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--color-border); font-size: .85rem; }
.kv:last-child { border-bottom: 0; }
.kv > span:first-child { color: var(--color-muted); }
.kv > span:last-child { text-align: right; word-break: break-word; }

/* ---------- 表格（宽屏仍是表格，窄屏在 @media 里转为卡片） ---------- */
.table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.table th { background: var(--color-surface-2); font-weight: 600; color: var(--color-text-2); font-size: .78rem; white-space: nowrap; }
.table tbody tr:hover { background: var(--color-surface-2); }
.table-fixed { table-layout: fixed; }

/* ---------- 行列表（宽屏用；由 _rows 片段或 table 渲染） ---------- */
.rows { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.rows-head, .row {
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: 44px minmax(0, 1fr) 170px 120px 120px;
  padding: 0 20px;
}
.rows-head { min-height: 42px; background: var(--color-surface-2); border-bottom: 1px solid var(--color-border); font-size: .75rem; color: var(--color-muted); }
.row { min-height: 62px; border-bottom: 1px solid var(--color-border); }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--color-surface-2); text-decoration: none; }
.row-active { background: var(--color-primary-bg); box-shadow: inset 3px 0 0 var(--color-primary); }
.row-subject { font-weight: 600; color: var(--color-text); }
.row-sub { font-size: .78rem; color: var(--color-muted); margin-top: 2px; }
.stripe { width: 3px; height: 26px; border-radius: 2px; background: var(--color-primary); }
.stripe-pending { background: #f59e0b; }
.stripe-closed { background: var(--color-border-strong); }

/* ---------- 筛选 chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text-2); font-size: .82rem;
}
.chip:hover { background: var(--color-surface-2); text-decoration: none; }
.chip-active { background: var(--color-text); border-color: var(--color-text); color: #fff; }

/* ---------- 列表工具条：搜索 + 常用筛选 chips + 筛选入口 ---------- */
.list-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.list-search {
  display: flex; align-items: center; gap: 8px; flex: 0 1 320px; min-width: 200px;
  height: 36px; padding: 0 12px; background: var(--color-surface);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-muted);
}
.list-search input { border: 0; min-height: 0; height: auto; padding: 0; background: transparent; }
.list-search input:focus { outline: 0; }
.list-search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px #e4ecff; }
.list-count { color: var(--color-muted); font-size: .78rem; margin-left: auto; }

/* ---------- 底部弹层：原生 <dialog> 模态 ----------
   用 dialog 而不是自己写遮罩：遮罩、Esc 关闭、焦点陷阱、惰性化背景都由浏览器负责。
   _mockup 设计稿里的那版是纯静态演示，落地用这个更稳。 */
.sheet-dialog {
  border: 0; padding: 0; background: transparent;
  width: 100%; max-width: 100%; margin: auto auto 0; max-height: 92vh;
}
.sheet-dialog::backdrop { background: rgba(17, 24, 39, .45); }
.sheet {
  background: var(--color-surface); border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 30px rgba(16, 24, 40, .18);
  display: flex; flex-direction: column; max-height: 92vh;
}
.sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--color-border-strong); margin: 10px auto 2px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; }
.sheet-head h2 { margin: 0; font-size: 1rem; }
.sheet-body { padding: 0 16px 16px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.sheet-foot { display: flex; gap: 12px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); }
/* 宽屏：弹层居中成对话框，而不是贴着底部 */
@media (min-width: 901px) {
  .sheet-dialog { max-width: 520px; margin: auto; }
  .sheet { border-radius: var(--radius-lg); }
}

/* ---------- 消息表单 / 提示条 ---------- */
.form-row { margin-bottom: 12px; }
label { display: block; font-weight: 500; margin-bottom: 5px; font-size: .82rem; color: var(--color-text-2); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url],
select, textarea {
  width: 100%; min-height: 38px; padding: 7px 11px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  font: inherit; background: var(--color-surface); color: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #c7d8ff; border-color: var(--color-primary); }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; }
input[type=file] { padding: 5px 8px; }
.helptext, .help { color: var(--color-muted); font-size: .78rem; margin-top: 3px; }
.errorlist { color: var(--color-danger); list-style: none; padding: 0; margin: 4px 0 0; font-size: .8rem; }
.form-actions { display: flex; gap: 8px; align-items: center; margin-top: 16px; }

.messages { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.alert { padding: 10px 13px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: .85rem; }
.alert-success { background: var(--bg-ok); color: var(--ink-ok); }
.alert-error, .alert-danger { background: var(--bg-danger); color: var(--ink-danger); }
.alert-warning { background: var(--bg-pending); color: var(--ink-pending); }
.alert-info { background: var(--bg-open); color: var(--ink-open); }

.empty { text-align: center; color: var(--color-muted); padding: 48px 16px; }
.empty p { margin: 4px 0; }

/* ---------- 工单时间线（详情页） ---------- */
.timeline { display: flex; flex-direction: column; gap: 12px; }
.timeline-item {
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface); box-shadow: var(--shadow-sm); overflow: hidden;
}
.timeline-item.is-note { background: #fffdf6; border-color: #f2e3bd; }
.timeline-item.is-auto { background: var(--color-surface-2); }
.timeline-head {
  padding: 9px 14px; border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8rem; color: var(--color-muted);
}
.timeline-head b { color: var(--color-text); font-weight: 600; }
.timeline-head .ml-auto { margin-left: auto; }
.timeline-body { padding: 14px; }
.timeline-body img { max-width: 100%; height: auto; }
.timeline-body blockquote { border-left: 3px solid var(--color-border-strong); margin: 0 0 8px; padding-left: 10px; color: var(--color-muted); }
.mail-html { word-break: break-word; }

/* ---------- 富文本编辑器 ---------- */
.editor-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.ql-toolbar.ql-snow { border: 0; border-bottom: 1px solid var(--color-border); }
.ql-container.ql-snow { border: 0; min-height: 180px; }

/* ---------- 登录页 ---------- */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1e293b, #0f172a); padding: 20px;
}
.auth-card {
  width: 100%; max-width: 380px; background: var(--color-surface);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 28px;
}
.auth-card h1 { text-align: center; margin-bottom: 4px; font-size: 1.25rem; }
.auth-card .sub { text-align: center; color: var(--color-muted); margin-bottom: 20px; font-size: .82rem; }

/* ---------- 打印 ---------- */
@media print {
  .rail, .topbar, .m-tabbar, .nav-toggle, .no-print { display: none !important; }
  .content { padding: 0; }
}

/* ===========================================================================
   窄屏（≤900px）：外壳换成「顶栏 + 底部 Tab + 抽屉」
   断点与 static/js/nav.js 的 BREAKPOINT 保持一致。
   =========================================================================== */
@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .content { padding: 12px 12px calc(var(--tabbar-h) + 16px); }

  /* 顶栏：汉堡 + 标题（允许折行的操作区） */
  .topbar { padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
  .topbar h1 { font-size: 1rem; }
  .topbar .topbar-sub { font-size: .75rem; }
  .page-actions { flex: 0 0 auto; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 auto; padding: 0; cursor: pointer;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  }
  .nav-toggle::before {
    content: ""; width: 16px; height: 2px; border-radius: 2px; background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
  }

  /* 底部 Tab：移动端唯一的一级导航 */
  .m-tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px);
    border-top: 1px solid var(--color-border);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  }
  .m-tab {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 4px 0; color: var(--color-muted); font-size: .68rem; position: relative;
  }
  .m-tab:hover { text-decoration: none; }
  .m-tab.active { color: var(--color-primary); }
  .m-tab .count { position: absolute; top: 0; left: 50%; margin-left: 4px; }

  /* 左导航 → 抽屉 */
  .rail {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
    width: min(80vw, 300px); flex: none; overflow-y: auto;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 0 0 24px rgba(15, 23, 42, .35);
  }
  body.nav-open .rail { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 50; background: rgba(15, 23, 42, .5);
  }

  /* 行列表 → 卡片流（同一份 DOM，窄屏把 grid 行摊成卡片） */
  .rows { border: 0; background: transparent; box-shadow: none; border-radius: 0; }
  .rows-head { display: none; }
  .row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    min-height: 0; padding: 12px 14px; margin-bottom: 8px; position: relative;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
  }
  .row:last-child { border-bottom: 1px solid var(--color-border); }
  .row > span:nth-child(1) { position: absolute; left: 0; top: 12px; bottom: 12px; height: auto; }
  /* 三行：① 主题（允许换行，不截断） ② 状态徽标 + 时间 ③ 归属与认领 */
  .row > span:nth-child(2) { flex: 1 1 100%; min-width: 0; order: 1; }
  .row > span:nth-child(4) { flex: 0 0 auto; order: 2; }
  .row > span:nth-child(5) { margin-left: auto; order: 3; font-size: .75rem; }
  .row > span:nth-child(3) { flex: 1 1 100%; order: 4; font-size: .75rem; }
  .row .row-subject, .row .row-sub { white-space: normal; overflow: visible; text-overflow: clip; }

  /* 工具条：搜索行铺满，chips 横滑 */
  .list-toolbar { gap: 8px; }
  .list-search { flex: 1 1 100%; }
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }
  .list-count { display: none; }

  /* 表格页（其它管理页）在窄屏也允许横向滑动，避免整页被撑破 */
  .table-responsive { display: block; overflow-x: auto; }
  .table-responsive .table { min-width: 640px; }

  @media (prefers-reduced-motion: reduce) {
    .rail { transition: none; }
  }
}

/* ---------- 工具类（Tailwind 子集） ---------- */
.flex { display: flex; } .inline-flex { display: inline-flex; } .block { display: block; } .hidden { display: none; }
.grid { display: grid; }
.flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.ml-1 { margin-left: 4px; } .ml-2 { margin-left: 8px; } .ml-auto { margin-left: auto; }
.p-2 { padding: 8px; } .p-3 { padding: 12px; } .p-4 { padding: 16px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; } .px-3 { padding-left: 12px; padding-right: 12px; }
.text-xs { font-size: .75rem; } .text-sm { font-size: .85rem; } .text-base { font-size: 1rem; } .text-lg { font-size: 1.1rem; }
.font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; }
.text-muted { color: var(--color-muted); } .text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); }
.text-center { text-align: center; } .text-right { text-align: right; }
.truncate, .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-full { width: 100%; } .w-1\/2 { width: 50%; } .w-1\/3 { width: 33.333%; } .w-2\/3 { width: 66.666%; }
.rounded { border-radius: var(--radius-sm); } .rounded-lg { border-radius: var(--radius); }
.border { border: 1px solid var(--color-border); } .border-t { border-top: 1px solid var(--color-border); }
.border-b { border-bottom: 1px solid var(--color-border); }
.bg-white { background: var(--color-surface); } .bg-slate-50 { background: var(--color-surface-2); } .bg-slate-100 { background: #f1f3f6; }
.overflow-auto { overflow: auto; } .whitespace-pre-wrap { white-space: pre-wrap; word-break: break-word; }
.list-none { list-style: none; padding-left: 0; margin: 0; }
.cursor-pointer { cursor: pointer; }
.sticky { position: sticky; }