/* ===== Design Tokens ===== */
:root{
  --bg: #0B1020;            /* 页面背景：深蓝黑 */
  --panel: #0F162C;         /* 卡片背景：深蓝 */
  --panel-2:#101832;
  --border:#1D2A4A;
  --hover:#152246;
  --text:#E8EEF9;
  --muted:#A9B4C6;
  --brand:#3B82F6;          /* 品牌蓝 */
  --brand-2:#1D4ED8;
  --success:#22C55E;        /* 绿色 */
  --danger:#EF4444;         /* 红色 */
  --warning:#F59E0B;        /* 橙色 */
  --shadow: 0 10px 30px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.02) inset;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 7px;
  --mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body.theme{margin:0; background:linear-gradient(180deg,#0A0E1C 0%, #0B1020 100%); color:var(--text); font-family:var(--font);}

/* ===== Top Nav ===== */
.topnav{
  position:sticky; top:0; z-index:1000;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 22px; background:rgba(8,12,24,.7); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.topnav .brand{display:flex; align-items:center; gap:10px;}
.topnav .brand .brandname{font-weight:600; letter-spacing:.3px}
.topnav .brand .ico1{fill:var(--brand)}
.topnav .brand .ico2{stroke:#fff; stroke-width:6; fill:none; stroke-linecap:round; stroke-linejoin:round}
.navlinks a{
  color:var(--muted); text-decoration:none; margin-left:16px; padding:8px 10px; border-radius:8px;
}
.navlinks a:hover{background:var(--hover); color:var(--text)}
.navlinks a.active{background:var(--brand); color:#fff}

/* ===== Container ===== */
.container{max-width:1200px; margin:20px auto; padding:0 16px}

/* ===== Card ===== */
.card{
  background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px 18px; margin-bottom:14px;
}
.card .card-title{font-weight:600; margin-bottom:10px;}
.card-row{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.card-row .cell .label{color:var(--muted); font-size:12px}
.card-row .cell .value{font-size:18px}
.card-row .cell .value.strong{font-weight:700}
.card-row .cell .sub{color:var(--muted); font-size:12px}
.cell-actions{display:flex; align-items:center; gap:10px}

/* ===== Grid ===== */
.grid2{display:grid; grid-template-columns:1.2fr .8fr; gap:14px}
@media (max-width: 980px){ .grid2{grid-template-columns:1fr} }

/* ===== Table ===== */
.table-wrap{max-height:520px; overflow:auto; border-radius:var(--radius); border:1px solid var(--border)}
.table{
  width:100%; border-collapse:separate; border-spacing:0; min-width:720px;
  background:transparent;
}
.table thead th{
  position:sticky; top:0; z-index:2;
  background:linear-gradient(180deg,#0F182F 0%, #0F1729 100%);
  color:var(--muted); font-weight:600; font-size:12px; letter-spacing:.2px;
  border-bottom:1px solid var(--border);
}
.table th, .table td{ padding:10px 12px; border-bottom:1px solid var(--border);}
.table tbody tr:hover{ background:rgba(21,34,70,.4); }
.table tbody tr:nth-child(2n){ background:rgba(21,34,70,.25); }
.ok td:nth-child(7){ /* 进度列 */
  background:rgba(34,197,94,.08);
}
.bad td:nth-child(7){
  background:rgba(239,68,68,.08);
}

/* 固定宽度列 */
.w-36{width:36px}.w-60{width:60px}.w-80{width:80px}.w-90{width:90px}.w-110{width:110px}
.w-160{width:160px}.w-200{width:200px}.w-220{width:220px}.w-280{width:280px}

/* ===== Controls ===== */
.input{
  background:#0E1530; border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:10px 12px; outline:none;
}
.input:focus{ border-color:#2950C8; box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.input.full{width:100%}
.input.w80{width:80px}
.select{
  appearance:none; background:#0E1530; border:1px solid var(--border);
  color:var(--text); border-radius:10px; padding:10px 36px 10px 12px;
  background-image:linear-gradient(45deg,transparent 50%,#9BA7BA 50%),linear-gradient(135deg,#9BA7BA 50%,transparent 50%),linear-gradient(to right,#0E1530,#0E1530);
  background-position:calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px), 100% 0;
  background-size:5px 5px,5px 5px,2.5em 2.5em; background-repeat:no-repeat;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:#132145; border:1px solid var(--border); color:var(--text);
  padding:9px 12px; border-radius:10px; text-decoration:none; cursor:pointer;
  transition: .15s ease; user-select:none;
}
.btn:hover{ background:#172855; }
.btn.small{ padding:6px 8px; font-size:12px }
.btn.ghost{ background:transparent }
.btn.primary{ background:var(--brand); border-color:transparent; color:#fff }
.btn.primary:hover{ background:var(--brand-2) }
.btn.success{ background:#1C834B; border-color:#0f6d3e }
.btn.success .dot{ width:8px; height:8px; border-radius:50%; background:var(--success) }
.btn.danger{ background:#4A1620; border-color:#6E1D2B; color:#FFC5CC }
.btn.danger.ghost{ background:transparent; border-color:#6E1D2B; color:#ff98a5}

/* ===== Badges / Pills ===== */
.pill{
  display:inline-block; padding:5px 10px; border-radius:999px; font-size:12px;
  border:1px solid transparent; background:rgba(255,255,255,.05)
}
.pill.green{ color:#B7FFD1; border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.12)}
.pill.red{ color:#FFB8BE; border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.12)}

/* ===== Toolbar ===== */
.toolbar.card{ display:flex; align-items:center; gap:10px }
.toolbar .split{ width:1px; height:28px; background:var(--border); margin:0 6px }
.flex1{ flex:1 }
.mr8{ margin-right:8px }
.mt8{ margin-top:8px }
.mt12{ margin-top:12px }

/* ===== Log ===== */
.log-box{
  border:1px solid var(--border); border-radius:var(--radius);
  background:linear-gradient(180deg,#0D142A 0%, #0C1328 100%);
  height:520px; overflow:auto; padding:10px 12px; font-family:var(--mono); font-size:12px;
}
.log{ margin:0; padding-left: 16px; }
.log li{ padding:3px 0; border-bottom:1px dashed rgba(255,255,255,.03) }
.log .time{ color:#B4C0D4; margin-right:6px; font-family:var(--mono) }

/* ===== Form Help / Alerts ===== */
.help{ color:var(--muted); margin:6px 0 10px }
.alert{ padding:10px 12px; border-radius:10px; border:1px solid var(--border) }
.alert.error{ background:rgba(239,68,68,.10); border-color:#7f2730; color:#ffc7cc }

/* ===== Utilities ===== */
.inline{ display:inline-flex; align-items:center; gap:10px }
.center{ text-align:center }
.muted{ color:var(--muted) }
.small{ font-size:12px }
.code{ font-family:var(--mono) }
.clip{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mono{ font-family:var(--mono) }

/* ===== Toast ===== */
.toast{
  position:fixed; bottom:26px; right:26px; background:#111a35; color:#e5ecff;
  border:1px solid var(--border); border-radius:12px; padding:10px 14px; box-shadow:var(--shadow);
  opacity:0; transform:translateY(6px); pointer-events:none; transition:.2s ease;
}
.toast.show{ opacity:1; transform:translateY(0); pointer-events:auto }

/* ===== Code in text ===== */
code{ background:rgba(255,255,255,.06); border:1px solid var(--border); padding:2px 6px; border-radius:6px }
/* 两栏布局：右侧日志栏固定在页面最右 */
.layout-main{
  display:grid; grid-template-columns: 1.6fr 0.9fr; gap:14px;
}
@media (max-width: 1100px){
  .layout-main{ grid-template-columns: 1fr; }
}
.col-left{ min-width: 0; }
.col-right{ min-width: 0; }
.sticky-right{ position:sticky; top:16px; }
.h300{ height:300px; }

/* 让日志面板更高一点，撑满视窗高度 */
.col-right .log-box{
  height: calc(100vh - 200px);
}
.select.full{ width:100% }

.msg-stack .alert{ margin-bottom:8px }
.alert.success{ background:rgba(34,197,94,.10); border-color:#2a7a4a; color:#b7ffd1 }
.alert.warning{ background:rgba(245,158,11,.12); border-color:#b97a14; color:#ffe0aa }


.ocr-box{ border:1px solid var(--border); border-radius:var(--radius); padding:8px 10px; background:rgba(255,255,255,.02) }
.ocr-item{ display:flex; align-items:center; gap:8px; padding:6px 4px; border-bottom:1px dashed rgba(255,255,255,.05) }
.ocr-item:last-child{ border-bottom:none }
.ocr-addr{ font-family:var(--mono) }
.dot-ok{ width:8px; height:8px; border-radius:50%; background:var(--success) }
.dot-bad{ width:8px; height:8px; border-radius:50%; background:var(--danger) }
.lat{ color:#B4C0D4; font-family:var(--mono) }
/* OCR 状态点：忙=红、闲=绿、下线=灰 */
.dot-busy{ width:8px; height:8px; border-radius:50%; background:#ef4444 } /* red-500 */
.dot-idle{ width:8px; height:8px; border-radius:50%; background:#22c55e } /* green-500 */
.dot-down{ width:8px; height:8px; border-radius:50%; background:#6b7280 } /* gray-500 */
.ocr-addr{ font-family:var(--mono) }
.lat{ color:#B4C0D4; font-family:var(--mono); margin-left:4px }
.badge{ padding:2px 6px; border-radius:999px; font-size:12px; border:1px solid var(--border); }
.badge.red{ color:#fca5a5; border-color:#7f1d1d; background:rgba(127,29,29,.25) }
.badge.green{ color:#bbf7d0; border-color:#14532d; background:rgba(20,83,45,.25) }
.badge.gray{ color:#e5e7eb; border-color:#374151; background:rgba(55,65,81,.25) }


/* === 表格紧凑模式：更小字体、更小行高，显示更多内容 === */
:root{
  --font-s: 12.5px;
  --row-py: 4px;   /* 上下内边距 */
  --row-px: 8px;   /* 左右内边距 */
}
.table.compact { table-layout: fixed; }
.table.compact th,
.table.compact td{
  padding: var(--row-py) var(--row-px);
  font-size: var(--font-s);
  line-height: 1.2;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table.compact tr{ height: 24px; }

/* 去掉任务列表容器的固定高度与滚动条（强制覆盖） */
.table-wrap,
.panel-scroll,
.main-scroll{
  max-height: none !important;
  overflow: visible !important;
}

/* 更紧凑的复选框、按钮 */
.table.compact input[type="checkbox"]{ transform: scale(0.9); }
.btn.small{ padding: 2px 8px; font-size: 12px; line-height: 18px; }
/* 顶部全宽项目卡片 */
#project-card .project-line {
  display: flex;
  align-items: center;
  gap: 16px;
}
#project-card .project-name {
  font-weight: 600;
  font-size: 18px;
}
#project-card .project-path {
  color: var(--muted, #666);
  font-size: 13px;
}

/* 新的双栏网格布局：右侧日志与左侧等高；底部表格全宽 */
.layout-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;  /* 左宽右窄 */
  gap: 16px;
  align-items: stretch;            /* 关键：两列等高 */
}

/* 左侧纵向栈：添加任务 + 工具栏 */
.left-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0; /* 防止撑破 */
}

/* 右侧日志卡片：占满右侧列高度 */
.logs-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto; /* 多日志可滚动，但不影响整体高度 */
}

/* 底部任务表：跨两列，保证与“当前项目”左右对齐 */
.table-card {
  grid-column: 1 / -1;
}

/* 表格密度更紧凑，显示更多 */
.table-card table {
  width: 100%;
  border-collapse: collapse;
}
.table-card th, .table-card td {
  padding: 6px 8px;       /* 更小的内边距 */
  font-size: 13px;        /* 更小的字号 */
  line-height: 1.2;
  border-bottom: 1px solid #eee;
}
.table-card thead th {
  position: sticky;
  top: 0;
  background: #fafafa;
  z-index: 1;
}