/* ======================================================================
 * 27 · 台式机多久清灰一次 —— 「维修工单夹」
 * 视觉：工业铁灰 + 安全橙、夹纸板与撕纸虚线、圆形判定章、
 *       工单表格与可勾选核对格；与前面所有页面的视觉语言不同。
 * ====================================================================== */

.dg3.ptm {
    --bg: #f0f1f2;
    --bg2: #e3e6e8;
    --card: #ffffff;
    --card2: #f5f6f7;
    --ink: #22272b;
    --ink2: #475159;
    --muted: #74808a;
    --line: #cbd3d8;
    --line2: #e3e8eb;
    --accent: #c25a13;
    --accent-ink: #ffffff;
    --accent-soft: #fbeade;
    --accent2: #2f6072;
    --accent2-soft: #e0eef2;
    --ok: #1e7749;
    --ok-bg: #e1f1e7;
    --warn: #96620d;
    --warn-bg: #fbf0d9;
    --bad: #ad3527;
    --bad-bg: #f9e3df;
    --shadow: 0 6px 22px rgba(40, 50, 56, .12);
    --radius: 2px;
    --radius-sm: 2px;
    --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace;
    --head-weight: 800;

    background:
        repeating-linear-gradient(135deg, transparent 0 12px, rgba(70, 84, 92, .028) 12px 13px),
        var(--bg);
    border-top: 5px solid #3d4a52;
}
:root[data-theme="dark"] .dg3.ptm {
    --bg: #171b1e;
    --bg2: #1f2529;
    --card: #20262a;
    --card2: #282f34;
    --ink: #e7edef;
    --ink2: #bdc9ce;
    --muted: #8b9aa1;
    --line: #3b474d;
    --line2: #2d383d;
    --accent: #ec944c;
    --accent-ink: #2a1405;
    --accent-soft: #3c2a19;
    --accent2: #77b8ca;
    --accent2-soft: #1c3a43;
    --ok: #6cc394;
    --ok-bg: #1d3528;
    --warn: #dcb055;
    --warn-bg: #372c18;
    --bad: #e08076;
    --bad-bg: #3a2220;
    --shadow: 0 6px 24px rgba(0, 0, 0, .48);
    background:
        repeating-linear-gradient(135deg, transparent 0 12px, rgba(160, 190, 200, .028) 12px 13px),
        var(--bg);
}

/* ---------- 夹纸板 ---------- */
.ptm-clip {
    position: relative; margin: 26px 0 24px; padding: 26px 0 0;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.ptm-clip-bar {
    position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
    width: 190px; height: 18px; border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #7b858c, #454f55);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 2px 5px rgba(0, 0, 0, .2);
}
.ptm-clip-bar::after {
    content: ""; position: absolute; left: 50%; top: 5px; transform: translateX(-50%);
    width: 34px; height: 6px; border-radius: 3px; background: #2c343a;
}
.ptm-clip-top {
    display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 16px; align-items: center;
    padding: 4px 28px 20px;
}
.ptm-kicker { font: 700 11px var(--font-mono); letter-spacing: .18em; color: var(--accent); margin: 0 0 9px; }
.ptm-clip h1 { font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 9px; }
.ptm-lede { font-size: 14.5px; line-height: 1.88; color: var(--ink2); margin: 0; }
.ptm-lede b { color: var(--accent); border-bottom: 2px solid var(--accent-soft); }
:root[data-theme="dark"] .ptm-lede b { color: var(--accent2); border-bottom-color: var(--accent2-soft); }

.ptm-stamp {
    width: 172px; height: 172px; margin-left: auto; border-radius: 50%;
    border: 4px double var(--accent); color: var(--accent);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transform: rotate(-9deg); text-align: center; opacity: .85;
    background: radial-gradient(circle, var(--accent-soft) 0 62%, transparent 63%);
}
.ptm-stamp.is-urgent { border-color: var(--bad); color: var(--bad); background: radial-gradient(circle, var(--bad-bg) 0 62%, transparent 63%); }
.ptm-stamp.is-soon { border-color: var(--warn); color: var(--warn); background: radial-gradient(circle, var(--warn-bg) 0 62%, transparent 63%); }
.ptm-stamp.is-ok { border-color: var(--ok); color: var(--ok); background: radial-gradient(circle, var(--ok-bg) 0 62%, transparent 63%); }
.ptm-stamp-cap, .ptm-stamp-foot { font: 700 9px var(--font-mono); letter-spacing: .16em; }
.ptm-stamp strong { font-size: 22px; line-height: 1.25; margin: 7px 0; max-width: 140px; }

/* ---------- 工单表格 ---------- */
.ptm-order { border-top: 2px dashed var(--line); padding: 18px 26px 22px; }
.ptm-order-head {
    display: flex; flex-wrap: wrap; gap: 18px; font: 600 11.5px var(--font-mono);
    color: var(--muted); letter-spacing: .04em; padding-bottom: 12px; margin-bottom: 14px;
    border-bottom: 1px solid var(--line2);
}
.ptm-order-head b { color: var(--ink2); }
.ptm-order-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.ptm .dg3-field > label { font-size: 12.3px; font-weight: 700; }
.ptm .dg3-field .tip { font-size: 11.2px; }
.ptm input, .ptm select, .ptm textarea { border-radius: 2px; }
.ptm .dg3-btn--main { background: var(--accent); border-color: var(--accent); }
.ptm .dg3-btn { border-radius: 2px; }

/* ---------- 结果 ---------- */
.ptm .dg3-kv > div { border-left: 3px solid var(--accent); }
.ptm .dg3-kv dd { color: var(--accent); font-size: 17px; }
.ptm-temp-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 74px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink2); margin-bottom: 8px; }
.ptm-temp-track { height: 10px; background: var(--line2); border-radius: 2px; overflow: hidden; position: relative; }
.ptm-temp-track > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent), var(--bad)); }
.ptm-temp-row b { text-align: right; font: 700 12px var(--font-mono); color: var(--ink); }
.ptm .dg3-table th { background: var(--card2); color: var(--accent); border-right: 1px solid var(--line2); }
:root[data-theme="dark"] .ptm .dg3-table th { color: var(--accent2); }
.ptm-checklist { display: grid; gap: 6px; margin-top: 10px; }
.ptm-checklist label {
    display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px;
    border: 1px solid var(--line); border-radius: 2px; background: var(--card2);
    font-size: 13.5px; line-height: 1.7; color: var(--ink2); cursor: pointer;
}
.ptm-checklist label.is-done { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); text-decoration: line-through; }
.ptm-checklist input { margin-top: 4px; flex: 0 0 auto; }
.ptm-checklist .cid { font: 700 11px var(--font-mono); color: var(--accent); flex: 0 0 auto; }
.ptm #ptmChecks { display: grid; gap: 8px; }
.ptm #ptmChecks .dg3-note { font-size: 13.2px; }
.ptm #ptmEscape { margin-top: 12px; }
.ptm .ptm-batch-ok { color: var(--ok); font-weight: 700; }
.ptm .ptm-batch-bad { color: var(--bad); font-weight: 700; }

@media (max-width: 900px) {
    .ptm-clip-top { grid-template-columns: minmax(0, 1fr); }
    .ptm-stamp { margin: 0; width: 140px; height: 140px; }
    .ptm-stamp strong { font-size: 19px; }
    .ptm-order-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .ptm-clip-top { padding: 4px 15px 16px; }
    .ptm-order { padding: 16px 14px 20px; }
    .ptm-order-grid { grid-template-columns: minmax(0, 1fr); }
    .ptm-temp-row { grid-template-columns: 72px minmax(0, 1fr) 58px; }
}