/* 深色主题基础取自 camera_webui/www/style.css, 删掉全天相机用不到的组件。
 * 布局原则(2026-09-23): 所有元素左对齐, 大图占满内容宽度, 状态/参数并排两栏。 */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --bg: #0b0f19;
    --surface: #151b2b;
    --surface-hover: #1e2740;
    --border: #2a3447;
    --text: #e2e8f0;
    --text-secondary: #94a3b8;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --success: #22c55e;
}
body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px 20px 44px;
}
/* 页眉: 标题左、模式按钮也靠左(标题右侧留白, 不做 space-between 右推) */
header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
h1 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
h2 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-secondary);
    text-align: left;
}
section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    text-align: left;
}
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
table td {
    padding: 7px 4px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
table tr:last-child td { border-bottom: none; }
table td:first-child { color: var(--text-secondary); width: 42%; }

/* 表单: 标签左对齐, 控件紧随其后(原来是 space-between 把输入框推到右边) */
label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    text-align: left;
}
label > span { flex: 0 0 auto; }
input[type="number"], input[type="text"] {
    width: 150px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-hover);
    color: var(--text);
    font-size: 13px;
    outline: none;
}
input[type="text"] { width: 190px; }
input[type="number"]:focus, input[type="text"]:focus { border-color: var(--accent); }
input::placeholder { color: #5b6879; }
input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--accent);
}
button {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
button:hover { background: var(--accent-hover); }
#event-list {
    list-style: none;
    font-size: 13px;
}
#event-list li {
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-align: left;
}
#event-list li:last-child { border-bottom: none; }
#event-list:empty::after {
    content: "暂无事件";
    color: var(--text-secondary);
    font-size: 13px;
}

/* 大图显示区: 页面主体, 占满内容宽度, 尽量高 */
#live {
    margin-bottom: 16px;
    padding: 0;
    background: #000;
    overflow: hidden;
}
#live img {
    width: 100%;
    max-height: 82vh;
    object-fit: contain;
    display: block;
    margin: 0;
}

/* 状态 / 参数 两栏; 窄屏单列 */
.cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.cols > section { margin-bottom: 16px; }
@media (max-width: 720px) {
    .cols { grid-template-columns: 1fr; gap: 0; }
    body { padding: 14px 12px 32px; }
    input[type="number"], input[type="text"] { width: 130px; }
}

/* 模式切换按钮 */
#mode-switch { display: flex; gap: 8px; }
.mode-btn {
    padding: 6px 18px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    width: auto;
}
.mode-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
#focus-hint {
    display: none;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: rgba(59,130,246,.12);
    border: 1px solid var(--accent);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: left;
}
#focus-hint.show { display: block; }

/* ---- 任务板块 ---- */

/* 任务运行横幅: 全天相机让位时顶在页面最上方, 一览即知当前不是全天模式 */
#task-banner {
    display: none;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: rgba(234,179,8,.15);
    border: 1px solid #eab308;
    border-radius: 8px;
    color: #fde047;
    font-size: 14px;
    font-weight: 600;
}
#task-banner.show { display: block; }

#tasks .hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 14px;
    line-height: 1.6;
}
/* 表单: 窄屏单列, 宽屏两列 —— 字段多, 一行一个太占高度 */
.task-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
    align-items: end;
    margin-bottom: 16px;
}
.task-form label { margin-bottom: 10px; }
.task-form label > input { flex: 1 1 auto; width: auto; min-width: 0; }
.task-form #t-create { grid-column: 1 / -1; width: auto; justify-self: start;
                       padding: 8px 26px; }
#t-error {
    grid-column: 1 / -1;
    display: none;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(239,68,68,.12);
    border: 1px solid #ef4444;
    border-radius: 6px;
    color: #fca5a5;
    font-size: 13px;
}
#t-error.show { display: block; }

#task-list { font-size: 13px; }
#task-list th {
    text-align: left;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 12px;
    padding: 6px 6px;
    border-bottom: 1px solid var(--border);
}
#task-list td { vertical-align: top; padding: 9px 6px; }
#task-list td:first-child { width: auto; color: var(--text); }
#task-list .dim { color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
#task-list .badge {
    display: inline-block;
    margin-top: 5px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    background: var(--surface-hover);
    color: var(--text-secondary);
}
#task-list tr.st-running .badge { background: var(--accent); color: #fff; }
#task-list tr.st-done .badge { background: rgba(34,197,94,.2); color: #4ade80; }
#task-list tr.st-cancelled .badge,
#task-list tr.st-expired .badge { background: rgba(239,68,68,.15); color: #f87171; }
/* 进度条 */
#task-list .bar {
    margin-top: 5px;
    height: 4px;
    border-radius: 2px;
    background: var(--surface-hover);
    overflow: hidden;
}
#task-list .bar > i { display: block; height: 100%; background: var(--accent); }
#task-list tr.st-done .bar > i { background: var(--success); }
button.mini {
    width: auto;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border);
}
button.mini:hover { background: var(--surface-hover); color: var(--text); }

/* 产品视图提示条(非 AP 来源可见) */
#product-hint {
    padding: 10px 14px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 13px;
}
#product-hint b { color: var(--text); font-weight: 600; }

/* 管理区(仅 AP 直连渲染) */
#admin fieldset {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px 14px;
    margin: 0 0 12px;
    background: var(--surface);
}
#admin legend { color: var(--text); font-weight: 600; font-size: 13px; padding: 0 6px; }
#admin label { display: block; margin: 6px 0; font-size: 13px; color: var(--text-secondary); }
#admin input { margin-left: 6px; }
#admin button { width: auto; margin-top: 6px; padding: 6px 14px; font-size: 13px; }
#admin button.danger { border-color: #f87171; color: #f87171; background: transparent; }
#admin .hint { font-size: 12px; color: var(--text-secondary); margin: 6px 0 0; }
#a-msg { font-size: 13px; color: var(--success); margin-top: 8px; min-height: 1.2em; }
#sys-info { font-size: 13px; margin-bottom: 12px; }

@media (max-width: 720px) {
    .task-form { grid-template-columns: 1fr; }
}