/* =====================================================
   个人工作助手 v2 — 设计系统
   基于 4px 网格、语义化变量、WCAG AA 对比度
   ===================================================== */

/* ---------- 设计令牌 ---------- */
:root{
  --radius-sm:6px;
  --radius:10px;
  --radius-lg:14px;
  --radius-xl:18px;
  --shadow-sm:0 1px 2px 0 rgb(15 23 42 / .04);
  --shadow:0 1px 3px 0 rgb(15 23 42 / .08), 0 1px 2px -1px rgb(15 23 42 / .06);
  --shadow-md:0 4px 6px -1px rgb(15 23 42 / .08), 0 2px 4px -2px rgb(15 23 42 / .04);
  --shadow-lg:0 10px 15px -3px rgb(15 23 42 / .08), 0 4px 6px -4px rgb(15 23 42 / .04);

  --primary-50:#eef2ff;
  --primary-100:#e0e7ff;
  --primary-200:#c7d2fe;
  --primary-500:#6366f1;
  --primary-600:#4f46e5;
  --primary-700:#4338ca;

  --success-50:#f0fdf4;
  --success-100:#dcfce7;
  --success-500:#22c55e;
  --success-600:#16a34a;
  --success-700:#15803d;

  --warning-50:#fffbeb;
  --warning-100:#fef3c7;
  --warning-500:#f59e0b;
  --warning-600:#d97706;
  --warning-700:#b45309;

  --danger-50:#fef2f2;
  --danger-100:#fee2e2;
  --danger-500:#ef4444;
  --danger-600:#dc2626;
  --danger-700:#b91c1c;

  --slate-0:#ffffff;
  --slate-50:#f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-300:#cbd5e1;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-600:#475569;
  --slate-700:#334155;
  --slate-800:#1e293b;
  --slate-900:#0f172a;

  --bg:var(--slate-50);
  --surface:var(--slate-0);
  --surface-elevated:var(--slate-0);
  --text:var(--slate-900);
  --text-secondary:var(--slate-600);
  --text-tertiary:var(--slate-400);
  --border:var(--slate-200);
  --border-strong:var(--slate-300);
  --ring:var(--primary-500);

  --primary:var(--primary-600);
  --primary-hover:var(--primary-700);
  --primary-soft:var(--primary-50);
  --primary-soft-text:var(--primary-700);

  --green:var(--success-600);
  --green-soft:var(--success-50);
  --green-soft-text:var(--success-700);
  --red:var(--danger-600);
  --red-soft:var(--danger-50);
  --red-soft-text:var(--danger-700);
  --amber:var(--warning-600);
  --amber-soft:var(--warning-50);
  --amber-soft-text:var(--warning-700);
  --blue:var(--primary-600);
  --blue-soft:var(--primary-50);
  --blue-soft-text:var(--primary-700);
}

[data-theme="dark"]{
  --bg:var(--slate-900);
  --surface:#151b2e;
  --surface-elevated:#1e2538;
  --text:#f1f5f9;
  --text-secondary:#94a3b8;
  --text-tertiary:#64748b;
  --border:#2a3247;
  --border-strong:#3b455e;
  --ring:var(--primary-500);

  --primary:var(--primary-500);
  --primary-hover:var(--primary-400);
  --primary-soft:#1e1b4b;
  --primary-soft-text:#a5b4fc;

  --green:var(--success-500);
  --green-soft:#052e16;
  --green-soft-text:#86efac;
  --red:var(--danger-500);
  --red-soft:#450a0a;
  --red-soft-text:#fca5a5;
  --amber:var(--warning-500);
  --amber-soft:#451a03;
  --amber-soft-text:#fde68a;
  --blue:var(--primary-500);
  --blue-soft:#1e1b4b;
  --blue-soft-text:#a5b4fc;
}

/* ---------- 基础重置 ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--text);
  font-size:14px; line-height:1.55;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:inherit}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

.hidden{display:none!important}

/* ---------- 按钮系统 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 14px;border-radius:var(--radius);
  border:1px solid transparent;font-weight:500;white-space:nowrap;
  background:var(--surface);color:var(--text-secondary);
  box-shadow:var(--shadow-sm);transition:all .15s ease;
  cursor:pointer;
}
.btn:hover:not(:disabled){background:var(--slate-100);color:var(--text)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn svg{width:16px;height:16px;stroke-width:2.2}

.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}

.btn-soft{background:var(--primary-soft);color:var(--primary-soft-text);border-color:var(--primary-100)}
.btn-soft:hover:not(:disabled){background:var(--primary-100)}

.btn-ghost{background:transparent;color:var(--text-secondary);border-color:var(--border)}
.btn-ghost:hover:not(:disabled){background:var(--slate-100);color:var(--text)}

.btn-danger{background:var(--red-soft);color:var(--red-soft-text);border-color:var(--danger-100)}
.btn-danger:hover:not(:disabled){background:var(--danger-100)}

.btn-plain{background:transparent;color:var(--text-secondary);border-color:var(--border);box-shadow:none}
.btn-plain:hover:not(:disabled){background:var(--slate-100)}

.btn-lg{height:42px;padding:0 18px;font-size:15px}
.btn-sm{height:30px;padding:0 10px;font-size:13px}
.btn.block{width:100%}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-secondary);cursor:pointer;transition:all .15s ease;
}
.icon-btn:hover{background:var(--slate-100);color:var(--text)}

/* ---------- 表单系统 ---------- */
.field{margin-bottom:14px}
.field label{
  display:block;font-size:12px;font-weight:500;color:var(--text-secondary);
  margin-bottom:5px;
}
input,select,textarea{
  width:100%;height:40px;padding:0 12px;
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius);
  transition:border-color .15s,box-shadow .15s,background .15s;
  outline:none;
}
input::placeholder,textarea::placeholder{color:var(--text-tertiary)}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent);
}
textarea{height:auto;min-height:90px;padding:10px 12px;resize:vertical}
select{padding-right:28px;background-image: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='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:16px;appearance:none}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.form-grid .span-2{grid-column:span 2}

.form-error{color:var(--red);font-size:13px;min-height:18px;text-align:center;margin-top:8px}
.form-info{color:var(--text-secondary);font-size:13px;min-height:18px;text-align:center;margin-top:6px}

/* ---------- 认证页 ---------- */
.auth-screen{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--bg);padding:20px;overflow:auto;
}
.auth-card{
  width:100%;background:var(--surface-elevated);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:32px;box-shadow:var(--shadow-lg);
}
.auth-brand{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.auth-brand.centered{flex-direction:column;text-align:center;gap:10px}
.auth-logo{
  width:52px;height:52px;border-radius:var(--radius-lg);
  background:var(--primary-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
}
.auth-logo svg{width:26px;height:26px}
.auth-brand h1{font-size:20px;font-weight:700;margin:0;color:var(--text)}
.auth-brand p{font-size:13px;color:var(--text-secondary);margin:4px 0 0}

/* ---------- 应用布局 ---------- */
.app{display:flex;height:100vh;overflow:hidden}

.sidebar{
  width:230px;flex-shrink:0;background:var(--surface-elevated);border-right:1px solid var(--border);
  display:flex;flex-direction:column;transition:transform .2s ease;
}
.sidebar-brand{
  height:60px;display:flex;align-items:center;gap:10px;padding:0 18px;
  border-bottom:1px solid var(--border);
}
.brand-logo{width:32px;height:32px;border-radius:var(--radius);background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center}
.brand-text{font-weight:700;font-size:15px}

.side-nav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:4px}
.side-nav .nav-item,
.mobile-nav .nav-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius);
  border:none;background:transparent;color:var(--text-secondary);cursor:pointer;transition:all .15s ease;
  font-size:14px;font-weight:500;
}
.side-nav .nav-item:hover{background:var(--slate-100);color:var(--text)}
.side-nav .nav-item.active{background:var(--primary-soft);color:var(--primary-soft-text)}
.side-nav .nav-item svg{width:18px;height:18px}

.sidebar-footer{padding:14px;border-top:1px solid var(--border)}
.user-name{display:block;font-size:13px;font-weight:500;color:var(--text);margin-bottom:10px;word-break:break-all}
.sidebar-actions{display:flex;gap:8px}

.content{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{
  height:60px;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;background:var(--surface-elevated);border-bottom:1px solid var(--border);
}
.topbar-title{font-size:17px;font-weight:700}
.topbar-actions{display:flex;gap:8px}

main{flex:1;overflow:auto;padding:22px}

.panel{display:none;animation:fadeIn .18s ease}
.panel.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* 移动端导航 */
.mobile-nav{
  display:none;position:fixed;left:0;right:0;bottom:0;
  background:var(--surface-elevated);border-top:1px solid var(--border);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:30;
  justify-content:space-around;
}
.mobile-nav .nav-item{flex-direction:column;gap:3px;padding:6px 4px;font-size:11px;flex:1}
.mobile-nav .nav-item svg{width:22px;height:22px}

/* ---------- 卡片 ---------- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:20px;box-shadow:var(--shadow);margin-bottom:18px;
}
.card-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:16px;
}
.card-title{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;margin:0}
.card-title svg{width:18px;height:18px;color:var(--primary)}
.card-desc{font-size:13px;color:var(--text-secondary);margin:4px 0 0}

/* ---------- 栅格 ---------- */
.row{display:grid;gap:12px;margin-bottom:12px}
.row.c2{grid-template-columns:repeat(2,1fr)}
.row.c3{grid-template-columns:repeat(3,1fr)}
.row.c4{grid-template-columns:repeat(4,1fr)}

/* ---------- 空状态 ---------- */
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:36px 20px;color:var(--text-tertiary);text-align:center;gap:10px;
}
.empty svg{width:40px;height:40px;opacity:.45}
.empty-text{font-size:14px}

/* ---------- 列表 ---------- */
.list{
  display:flex;flex-direction:column;gap:10px;
}
.list-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px;background:var(--slate-50);border:1px solid var(--border);
  border-radius:var(--radius);transition:all .15s ease;
}
.list-item:hover{background:var(--surface);border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.li-main{flex:1;min-width:0}
.li-title{font-size:14px;font-weight:500;color:var(--text);word-break:normal;overflow-wrap:break-word;line-height:1.5}
.li-title.done{text-decoration:line-through;color:var(--text-tertiary)}
.li-meta{font-size:12px;color:var(--text-secondary);margin-top:4px}
.li-actions{display:flex;gap:6px;flex-wrap:wrap}
.li-actions .btn{height:30px;padding:0 10px;font-size:13px}

/* ---------- 标签 ---------- */
.pill{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:20px;
  font-size:11px;font-weight:600;white-space:nowrap;vertical-align:middle;
}
.pill.p0{background:var(--danger-500);color:#fff}
.pill.p1{background:var(--warning-500);color:#fff}
.pill.p2{background:var(--slate-400);color:#fff}
.pill.ok{background:var(--green-soft);color:var(--green-soft-text)}
.pill.fail{background:var(--red-soft);color:var(--red-soft-text)}
.pill.rb{background:var(--amber-soft);color:var(--amber-soft-text)}
.pill.pending{background:var(--blue-soft);color:var(--blue-soft-text)}

.cat-tag{
  display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;
  font-size:11px;font-weight:600;color:#fff;vertical-align:middle;margin-right:5px;
}
.proj-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}

/* ---------- 筛选 ---------- */
.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filter-row .btn{height:32px;font-size:13px}
.filter-row .btn.active{background:var(--primary-soft);color:var(--primary-soft-text);border-color:var(--primary-200)}

/* ---------- 今日区域 ---------- */
.today-card{
  background:var(--primary-soft);border:1px solid var(--primary-100);border-radius:var(--radius-lg);padding:16px;
}
.today-card.over{background:var(--red-soft);border-color:var(--danger-100)}
.today-item{
  display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px dashed var(--border);
}
.today-item:first-child{border-top:none;padding-top:0}
.t-title{flex:1;font-size:14px;min-width:0;word-break:normal;overflow-wrap:break-word}
.t-meta{font-size:12px;color:var(--text-secondary);white-space:nowrap}
.t-actions{display:flex;gap:6px}

/* ---------- 进度环 ---------- */
.rings{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.ring{text-align:center}
.ring .rv{font-size:12px;color:var(--text-secondary);margin-top:6px}

/* ---------- 搜索 ---------- */
.search{position:relative;margin-bottom:14px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-tertiary);pointer-events:none}
.search input{padding-left:36px}

/* ---------- 代码块 ---------- */
.cmd-content{
  background:var(--slate-900);color:#e2e8f0;border-radius:var(--radius);padding:12px 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;
  white-space:pre-wrap;word-break:break-word;margin-top:8px;line-height:1.6;
}

/* ---------- 设置页 ---------- */
.cfg-group{margin-bottom:18px}
.cfg-group-title{font-size:14px;font-weight:600;margin:0 0 10px;color:var(--text)}
.cfg-list{display:flex;flex-wrap:wrap;gap:8px}
.cfg-chip{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 12px;
  background:var(--primary-soft);color:var(--primary-soft-text);border-radius:20px;font-size:13px;
}
.cfg-chip button{
  width:18px;height:18px;border-radius:50%;border:none;background:var(--danger-100);color:var(--red);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;line-height:1;
}

.set-sec{margin-bottom:20px}
.set-sec h3{font-size:15px;margin:0 0 10px}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;backdrop-filter:blur(2px)}
.modal-box{
  background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius-xl);
  width:100%;max-width:440px;box-shadow:var(--shadow-lg);overflow:hidden;
}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-title{font-size:16px;font-weight:700}
.modal-close{width:32px;height:32px;border-radius:var(--radius);border:none;background:transparent;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--slate-100)}
.modal-body{padding:20px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;padding:0 20px 20px}
.modal-actions .btn{flex:1}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--slate-900);color:#fff;padding:10px 18px;border-radius:20px;
  font-size:14px;z-index:60;box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:8px;
}

/* ---------- 工具类 ---------- */
.text-muted{color:var(--text-secondary)}
.text-sm{font-size:13px}
.mt-2{margin-top:8px}
.mt-3{margin-top:12px}
.mb-0{margin-bottom:0!important}
.flex{display:flex}
.gap-2{gap:8px}
.gap-3{gap:12px}
.items-center{align-items:center}
.justify-between{justify-content:space-between}

/* ---------- 响应式 ---------- */
@media (max-width:768px){
  .app{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  .sidebar{display:none}
  .mobile-nav{display:flex}
  .topbar{padding:0 16px}
  .topbar-title{font-size:16px}
  main{padding:14px}
  .card{padding:16px}
  .card-header{flex-wrap:wrap}
  .row.c2,.row.c3,.row.c4{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-grid .span-2{grid-column:auto}
  .auth-card{padding:24px 20px}
  .list-item{flex-direction:column;gap:10px}
  .li-main{width:100%}
  .li-actions{width:100%;justify-content:flex-end;margin-top:0}
  .li-actions .btn{flex:0 1 auto;justify-content:center}
  .today-item{flex-wrap:wrap}
  .t-actions{width:100%;justify-content:flex-end}

  .cal-cell{height:58px;padding:5px 6px}
  .cal-grid{gap:4px;max-width:100%}
  .cal-dow{font-size:11px}
  .cal-dot{width:6px;height:6px}
  .cal-badge{top:4px;right:4px;min-width:15px;height:15px;font-size:9px;padding:0 3px}
}

@media (min-width:1024px){
  main{padding:26px 28px}
  .card{padding:22px}
}

/* 颜色选择器特殊处理 */
input[type="color"]{padding:4px;height:44px}

/* ---------- 周报日历 ---------- */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.cal-title{display:flex;align-items:center;font-size:17px;font-weight:700}
.cal-nav{display:flex;gap:6px}
.cal-nav .btn svg{width:16px;height:16px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;max-width:880px;margin:0 auto}
.cal-dow{text-align:center;font-size:12px;font-weight:600;color:var(--text-tertiary);padding:4px 0}
.cal-cell{
  position:relative;height:74px;padding:7px 8px;
  display:flex;flex-direction:column;align-items:flex-start;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text);font:inherit;cursor:pointer;transition:all .15s ease;
}
.cal-cell:hover{border-color:var(--border-strong);background:var(--slate-100)}
.cal-cell.other{color:var(--text-tertiary);background:transparent}
.cal-cell.today{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.cal-cell.sel{background:var(--primary-soft);border-color:var(--primary)}
.cal-d{font-size:13px;font-weight:600;line-height:1}
.cal-dots{display:flex;gap:4px;margin-top:auto}
.cal-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.cal-dot.task{background:var(--primary-500)}
.cal-dot.rel{background:var(--success-500)}
.cal-dot.iss{background:var(--danger-500)}
.cal-badge{position:absolute;top:6px;right:7px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--primary);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.cal-legend{display:flex;gap:16px;justify-content:center;margin-top:14px;font-size:12px;color:var(--text-secondary)}
.cal-legend span{display:inline-flex;align-items:center;gap:6px}

.day-head{margin-bottom:6px}
.day-title{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.day-sec{margin-top:18px}
.day-sec-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;margin-bottom:10px}
.day-sec-h svg{color:var(--primary)}
.day-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--slate-100);color:var(--text-secondary);font-size:12px;font-weight:700}
.day-empty{font-size:13px;color:var(--text-tertiary);padding:8px 0}
.day-list{display:flex;flex-direction:column;gap:8px}
.day-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--slate-50);border:1px solid var(--border);border-radius:var(--radius);transition:all .15s ease}
.day-item:hover{background:var(--surface);border-color:var(--border-strong)}
.di-main{flex:1;min-width:0}
.di-title{font-size:14px;font-weight:500;color:var(--text);word-break:normal;overflow-wrap:break-word;display:flex;align-items:center;gap:6px}
.di-title.done{text-decoration:line-through;color:var(--text-tertiary)}
.di-meta{font-size:12px;color:var(--text-secondary);margin-top:5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.chk{width:22px;height:22px;flex-shrink:0;border-radius:7px;border:2px solid var(--border-strong);background:var(--surface);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;padding:0}
.chk:hover{border-color:var(--primary)}
.chk.done{background:var(--primary);border-color:var(--primary)}
.chk svg{width:14px;height:14px;stroke-width:3}

/* ---------- 运维动作执行面板 ---------- */
.ops-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:14px;border-radius:var(--radius);background:var(--warning-50);border:1px solid var(--warning-100);color:var(--warning-700)}
.ops-note svg{flex-shrink:0;margin-top:2px}
.ops-note b{display:block;font-size:13px;font-weight:650}
.ops-note-sub{font-size:12px;line-height:1.6;color:var(--text-secondary);margin-top:4px}

.ops-group{margin-bottom:16px}
.ops-group-t{font-size:12px;font-weight:650;letter-spacing:.04em;color:var(--text-tertiary);text-transform:uppercase;margin-bottom:8px}
.ops-acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.ops-act{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);transition:border-color .15s ease,box-shadow .15s ease}
.ops-act:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}
.ops-act-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ops-act-n{font-size:14px;font-weight:600;color:var(--text)}
.ops-act-d{font-size:12px;line-height:1.5;color:var(--text-secondary);flex:1}
.ops-act .btn{align-self:flex-start}
.ops-act .btn[disabled]{opacity:.45;cursor:not-allowed}
select.ops-param{width:100%;height:34px;font-size:12px;padding:0 8px}

.job-box{margin-top:14px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.job-box.ok{border-color:var(--success-500)}
.job-box.failed{border-color:var(--danger-500)}
.job-box.running{border-color:var(--primary)}
.job-h{padding:9px 12px;font-size:13px;font-weight:600;color:var(--text);background:var(--slate-50);border-bottom:1px solid var(--border)}
.job-box.ok .job-h{background:var(--success-50);color:var(--success-700)}
.job-box.failed .job-h{background:var(--danger-50);color:var(--danger-700)}
.job-box.running .job-h{background:var(--primary-50);color:var(--primary-700)}
.job-out{margin:0;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.6;color:var(--text-secondary);background:var(--surface);white-space:pre-wrap;overflow-wrap:anywhere;max-height:340px;overflow:auto}

@media (max-width:768px){
  .ops-acts{grid-template-columns:1fr}
  .job-out{max-height:240px;font-size:11px}
}

/* ========== 外部 API 探测面板 ========== */
.probe-out{margin-top:12px}
.probe-out .empty{padding:16px}
.probe-line{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);padding:4px 0}
.probe-snip{margin:8px 0 0;padding:12px;background:var(--slate-50);border:1px solid var(--border);border-radius:var(--r);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.6;color:var(--text-secondary);white-space:pre-wrap;overflow-wrap:anywhere;max-height:200px;overflow:auto}
.probe-out.ok .probe-line{color:var(--success-700)}
.probe-out.bad .probe-line{color:var(--danger-700)}
.log-tbl{width:100%;border-collapse:collapse;margin-top:8px;font-size:12px}
.log-tbl th,.log-tbl td{border:1px solid var(--border);padding:5px 7px;text-align:left;color:var(--text)}
.log-tbl th{background:var(--slate-50);font-weight:600;white-space:nowrap}
.log-tbl tbody tr:nth-child(even){background:var(--slate-50)}
/* 开孔率计算器：带中文标签的输入网格 */
.or-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 14px}
.or-field{display:flex;flex-direction:column;gap:4px}
.or-field label{font-size:12px;color:var(--muted);font-weight:600}
.or-field input,.or-field select{width:100%}
@media(max-width:560px){.or-grid{grid-template-columns:1fr}}
.mes-prev{margin-top:10px}
.mes-prev-h{margin:6px 0 2px;font-size:13px}
.mes-modal-list{max-height:60vh;overflow:auto}
.mes-task-row{padding:9px 10px;border-bottom:1px solid var(--border)}
.mes-task-row:last-child{border-bottom:none}
.mt-label{font-weight:600;color:var(--text);font-size:13px}
.mt-meta{color:var(--muted);font-size:12px;margin-top:2px}