:root{
    --bg:#0f1720; --panel:#161f2b; --panel2:#1d2836; --line:#2a3849;
    --ink:#e8eef6; --muted:#9fb0c3; --accent:#3d8bff; --accent2:#28c07a;
    --warn:#ffb020; --bad:#ff5d5d; --chip:#22303f;
    --helical:#3d8bff; --auger:#ff8f3d;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;font:14px/1.45 system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;min-height:100%}
  header{display:flex;align-items:center;gap:12px;padding:10px 14px;background:linear-gradient(180deg,#182231,#121a24);border-bottom:1px solid var(--line)}
  header h1{font-size:16px;margin:0;font-weight:650;letter-spacing:.2px}
  header .tag{font-size:11px;color:var(--muted);background:var(--chip);padding:2px 8px;border-radius:20px;border:1px solid var(--line)}
  .grow{flex:1}
  button{cursor:pointer;border:1px solid var(--line);background:var(--panel2);color:var(--ink);padding:6px 10px;border-radius:7px;font-size:13px}
  button:hover{border-color:#3a4b60;background:#243244}
  button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
  button.primary:hover{filter:brightness(1.08)}
  button.good{background:var(--accent2);border-color:var(--accent2);color:#04231a}
  button.ghost{background:transparent}
  button.active{outline:2px solid var(--accent);outline-offset:0}
  input,select{background:#0e151d;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:5px 7px;font-size:13px}
  input[type=range]{padding:0}
  label{font-size:12px;color:var(--muted)}
  .toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--line)}
  .toolbar .sep{width:1px;height:24px;background:var(--line);margin:0 2px}
  .workflow{display:grid;grid-template-columns:repeat(7,minmax(104px,1fr)) auto;gap:6px;align-items:stretch;padding:8px 14px;background:#0d1520;border-bottom:1px solid var(--line)}
  .step{display:grid;grid-template-columns:22px 1fr;gap:7px;align-items:center;min-height:42px;padding:7px 8px;background:#121c28;border:1px solid #233144;border-radius:8px;color:#aebfd2}
  .step .num{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#1d2a39;color:#c9d7e7;font-weight:800;font-size:11px}
  .step .copy{min-width:0}
  .step .title{font-weight:800;font-size:11px;color:#dbe7f3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .step .state{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.25px}
  .step.done{border-color:#244b37;background:#10251e}
  .step.done .num{background:var(--accent2);color:#052618}
  .step.next{border-color:#3d8bff;box-shadow:0 0 0 1px #3d8bff55 inset;background:#13243b}
  .step.warn{border-color:#765d21;background:#261f11}
  .workflowAction{display:flex;align-items:center;gap:8px;min-width:240px;background:#111b27;border:1px solid var(--line);border-radius:8px;padding:7px 8px}
  .workflowAction .nextText{font-size:11px;color:#dbe7f3;line-height:1.25;flex:1}
  .workflowAction .nextText b{display:block;font-size:12px;color:#fff}
  .workflowAction button{white-space:nowrap}
  main{display:flex;flex:1 1 auto;min-height:260px;height:auto}
  #side{width:360px;min-width:360px;overflow:auto;border-right:1px solid var(--line);background:var(--panel)}
  .sec{border-bottom:1px solid var(--line)}
  .sec>h2{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0;padding:11px 14px;background:var(--panel2);display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
  .sec>h2 .arw{transition:transform .15s;color:#6f8299}
  .sec.collapsed>h2 .arw{transform:rotate(-90deg)}
  .sec .body{padding:12px 14px}
  .sec.collapsed .body{display:none}
  .row{display:flex;gap:8px;align-items:center;margin:7px 0}
  .row.wrap{flex-wrap:wrap}
  .row label{width:120px;min-width:120px}
  .row .val{flex:1}
  .row input[type=number],.row input[type=text],.row select,.row textarea{width:100%}
  textarea{min-height:86px;resize:vertical;background:#08111b;border:1px solid var(--line);color:var(--ink);border-radius:7px;padding:8px;font:inherit}
  .hint{font-size:11px;color:var(--muted);margin:4px 0 0}
  .guide{display:grid;gap:6px}
  .guide .g{display:grid;grid-template-columns:92px 1fr;gap:8px;background:#0e1824;border:1px solid var(--line);border-radius:7px;padding:7px 8px}
  .guide .k{font-weight:750;font-size:11px;color:#d7e6f7}
  .guide .d{font-size:11px;color:var(--muted);line-height:1.35}
  .classlist{display:flex;flex-direction:column;gap:6px}
  .cls{display:flex;align-items:center;gap:8px;padding:7px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);flex-wrap:wrap}
  .cls.sel{outline:2px solid var(--accent)}
  .sw{width:16px;height:16px;border-radius:4px;border:1px solid #0006;flex:none}
  .cls .nm{flex:1;min-width:96px;background:transparent;border:none;color:var(--ink);font-size:13px;padding:2px}
  .cls .cnt{font-weight:700;min-width:112px;text-align:right;display:flex;align-items:center;justify-content:flex-end;gap:4px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
  .cnt .found{font-size:13px}
  .cnt .unit{font-size:10px;color:var(--muted);font-weight:650;text-transform:uppercase;letter-spacing:0}
  .cnt .mark-note{font-size:10px;color:var(--muted);font-weight:650}
  .cnt .sched{font-size:10px;border:1px solid currentColor;border-radius:6px;padding:1px 5px;font-weight:750;white-space:nowrap}
  .cnt .sched.ok{color:var(--accent2)}
  .cnt .sched.warn{color:var(--warn)}
  .cnt .review{font-size:10px;color:#241800;background:var(--warn);border-radius:999px;padding:1px 6px;font-weight:800}
  .cls .mini{padding:3px 6px;font-size:11px}
  .badge{font-size:10px;padding:1px 6px;border-radius:10px;border:1px solid var(--line)}
  .badge.helical{color:#bcd6ff;background:#12233d}
  .badge.auger{color:#ffd9bc;background:#3d2712}
  .badge.drilled,.badge.driven,.badge.unknown{color:#d5e0ed;background:#1b2734}
  .badge.shape{color:#c9f0df;background:#102a22}
  table{width:100%;border-collapse:collapse;font-size:12.5px}
  th,td{border-bottom:1px solid var(--line);padding:6px 6px;text-align:left}
  th{color:var(--muted);font-weight:600}
  td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
  td input{width:82px;text-align:right}
  .tot{font-weight:800}
  .kpi{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
  .kpi .box{flex:1;min-width:96px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px}
  .kpi .box .k{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
  .kpi .box .v{font-size:16px;font-weight:750;margin-top:2px}
  .pass{color:var(--accent2)} .fail{color:var(--bad)} .warnc{color:var(--warn)}
  .gate{display:flex;flex-direction:column;gap:6px}
  .gate .item{display:grid;grid-template-columns:12px 1fr;gap:8px;align-items:start;background:#0e1824;border:1px solid var(--line);border-radius:8px;padding:7px 8px}
  .gate .dot{width:9px;height:9px;border-radius:50%;margin-top:4px;background:var(--muted)}
  .gate .item.pass .dot{background:var(--accent2)} .gate .item.warn .dot{background:var(--warn)} .gate .item.fail .dot{background:var(--bad)}
  .gate .t{font-weight:750;font-size:12px}.gate .d{font-size:11px;color:var(--muted);line-height:1.35}
  #stage{flex:1;position:relative;overflow:auto;background:#0a0f15 repeating-linear-gradient(45deg,#0b1119 0 12px,#0a0f15 12px 24px)}
  #wrap{position:relative;margin:0 auto;display:none}
  #plan{display:block;image-rendering:auto;background:#fff}
  #ov{position:absolute;left:0;top:0;pointer-events:none}
  .status{pointer-events:none;position:absolute;left:12px;top:12px;background:#0c1420cc;border:1px solid var(--line);border-radius:8px;padding:8px 12px;color:var(--ink);backdrop-filter:blur(3px);max-width:60%}
  .status.hide{display:none}
  .empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:var(--muted);text-align:center;padding:24px}
  .empty h3{color:var(--ink);margin:0}
  footer{padding:7px 14px;font-size:11px;color:var(--muted);background:var(--panel);border-top:1px solid var(--line)}
  .legend{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .legend .li{display:flex;align-items:center;gap:5px;font-size:12px}
  .switchbtns{display:flex;gap:0;border:1px solid var(--line);border-radius:7px;overflow:hidden}
  .switchbtns button{border:none;border-radius:0;border-right:1px solid var(--line)}
  .switchbtns button:last-child{border-right:none}
  .note{background:#12233d;border:1px solid #234; color:#cfe0f5;border-radius:8px;padding:8px 10px;font-size:12px}
  a{color:var(--accent)}
  .small{font-size:11px}
  .disc{color:var(--warn)}
  @media (max-width:1100px){
    .workflow{grid-template-columns:repeat(4,minmax(104px,1fr));}
    .workflowAction{grid-column:1/-1}
    #side{width:330px;min-width:330px}
  }
  @media (max-width:760px){
    header{padding:8px;gap:6px;flex-wrap:wrap}
    header h1{flex-basis:100%;font-size:15px}
    header .disc{display:none}
    .toolbar{flex-wrap:nowrap;overflow-x:auto;padding:6px 8px}
    .toolbar .sep{display:none}
    .toolbar .switchbtns,.toolbar button,.toolbar label{flex:0 0 auto}
    .workflow{display:flex;overflow-x:auto;padding:6px 8px}
    .step{min-width:132px;flex:0 0 132px}
    .workflowAction{min-width:210px;flex:0 0 230px}
    main{flex-direction:column;min-height:720px}
    #side{width:100%;min-width:0;height:320px;max-height:320px;flex:0 0 320px;border-right:none;border-bottom:1px solid var(--line)}
    #stage{min-height:400px;flex:1 1 400px}
    footer{display:none}
  }