:root{--ink:#142039;--muted:#7b8494;--line:#dce1e8;--paper:#fff;--wash:#f4f2ed;--blue:#376bce;--blue-soft:#eaf0ff;--danger:#b64d40;--danger-soft:#fff1ee;--green:#2e7d62;--shadow:0 18px 50px rgba(30,38,55,.08);--radius:22px;--sidebar:270px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--wash);color:var(--ink);font-family:Inter,"Noto Sans Thai","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.app-shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar) 1fr}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);padding:34px 24px;border-right:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(20px);display:flex;flex-direction:column;z-index:20}
.brand{padding:0 8px 34px}.brand-lockup{display:block;width:195px;height:58px;object-fit:contain;object-position:left center}.brand p{margin:2px 0 0 54px;color:var(--muted);font-size:14px;letter-spacing:.04em}
.nav-list{display:grid;gap:7px}.nav-item{border:0;background:transparent;padding:14px 14px;border-radius:13px;text-align:left;font-weight:650;color:#4c566b;display:flex;align-items:center;gap:12px}.nav-item span{width:20px;color:var(--blue);font-size:18px;text-align:center}.nav-item:hover{background:#f5f7fb}.nav-item.active{background:var(--blue-soft);color:var(--blue)}
.local-status{margin-top:auto;border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;gap:11px;align-items:flex-start;background:#fff}.local-status strong{display:block;font-size:14px}.local-status small{display:block;color:var(--muted);margin-top:4px}.status-dot{width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 6px rgba(55,107,206,.12);display:inline-block;flex:0 0 auto;margin-top:5px}
.main{grid-column:2;min-width:0}.topbar{height:112px;padding:0 clamp(24px,4vw,64px);border-bottom:1px solid var(--line);background:rgba(244,242,237,.9);backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}.eyebrow,.step{margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--muted)}.topbar h1{margin:0;font-size:28px;letter-spacing:-.03em}.top-status{color:var(--muted);display:flex;gap:10px;align-items:center;font-size:14px}.top-status .status-dot{margin:0}
.view{display:none;padding:36px clamp(24px,4vw,64px) 80px;max-width:1600px;margin:auto}.view.active{display:block}.hero-card{padding:40px;background:var(--ink);color:#fff;border-radius:var(--radius);display:flex;align-items:end;justify-content:space-between;gap:24px;box-shadow:var(--shadow)}.hero-card h2{font-size:clamp(32px,4vw,56px);line-height:1.02;letter-spacing:-.05em;margin:8px 0 16px;max-width:760px}.hero-card p:not(.eyebrow){color:#c4cada;max-width:680px;margin:0}.primary,.secondary,.upload-button{border-radius:12px;padding:13px 18px;font-weight:750;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:10px}.primary{background:var(--ink);color:#fff}.hero-card .primary{background:#fff;color:var(--ink);white-space:nowrap}.primary:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(20,32,57,.16)}.secondary,.upload-button{background:#fff;border-color:#ccd3de;color:var(--ink)}.text-button,.danger-text{border:0;background:transparent;font-weight:750;color:var(--blue)}.danger-text{color:var(--danger)}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}.metric{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;gap:8px}.metric small,.metric span{color:var(--muted)}.metric strong{font-size:36px;letter-spacing:-.04em}
.panel-grid{display:grid;gap:18px}.dashboard-grid{grid-template-columns:1.25fr .75fr}.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 3px 18px rgba(30,38,55,.035)}.panel-head{padding:25px 27px 20px;display:flex;align-items:start;justify-content:space-between;gap:22px;border-bottom:1px solid #edf0f4}.panel-head h2,.panel-head h3{margin:0 0 7px;letter-spacing:-.025em}.panel-head p:not(.step){margin:0;color:var(--muted);font-size:14px}.list-empty{padding:32px;color:var(--muted)}
.workflow-bar{display:flex;gap:8px;margin:0 0 18px;overflow:auto}.workflow-step{border:1px solid var(--line);background:#fff;padding:11px 15px;border-radius:999px;color:var(--muted);white-space:nowrap}.workflow-step span{font-size:10px;font-weight:800;margin-right:7px}.workflow-step.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.form-panel{margin-bottom:18px}.procedure-tabs,.category-tabs{display:flex;gap:8px;overflow:auto;padding:22px 27px 4px}.procedure-tab,.category-tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 16px;font-weight:750;white-space:nowrap}.procedure-tab.active,.category-tab.active{background:var(--blue-soft);border-color:#a9c1f4;color:var(--blue)}
.form-grid{display:grid;gap:18px;padding:23px 27px}.form-grid.three{grid-template-columns:repeat(3,1fr)}.form-grid.two{grid-template-columns:repeat(2,1fr)}label{display:grid;gap:8px;font-size:13px;font-weight:750;color:#4b566b}input,select,textarea{width:100%;border:1px solid #cfd6e0;border-radius:11px;background:#fff;padding:12px 13px;outline:none;transition:.16s}textarea{resize:vertical;line-height:1.55}input:focus,select:focus,textarea:focus{border-color:#7ea3eb;box-shadow:0 0 0 4px rgba(55,107,206,.1)}.privacy-note{margin:0 27px 25px;padding:12px 14px;border-radius:11px;background:#f6f8fb;color:var(--muted);font-size:12px}.summary-fields{border-top:1px solid #edf0f4}.badge{border-radius:999px;padding:7px 10px;background:var(--blue-soft);color:var(--blue);font-size:11px;font-weight:800}.badge.neutral{background:#f3f4f6;color:#6f7785}
.image-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:20px 27px 27px}.image-empty{grid-column:1/-1;border:1px dashed #cfd6e0;border-radius:16px;padding:46px;text-align:center;color:var(--muted)}.image-card{position:relative;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#f7f8fa}.image-card img{width:100%;aspect-ratio:4/3;display:block;object-fit:cover}.image-meta{padding:10px}.image-meta select,.image-meta input{font-size:12px;padding:8px}.image-meta input{margin-top:7px}.image-remove{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(20,32,57,.8);color:#fff}
.report-preview{padding:27px}.preview-sheet{border:1px solid var(--line);border-radius:14px;padding:28px;min-height:260px}.preview-head{display:flex;justify-content:space-between;gap:18px;padding-bottom:18px;border-bottom:2px solid var(--ink)}.preview-head h3{margin:0;font-size:22px}.preview-head p{margin:5px 0 0;color:var(--muted)}.preview-section{padding:16px 0;border-bottom:1px solid #edf0f4}.preview-section h4{margin:0 0 8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}.preview-section p{white-space:pre-wrap;margin:0;line-height:1.6}.action-row{display:flex;gap:10px;align-items:center;padding:20px 27px;border-top:1px solid var(--line);background:#fff;border-radius:0 0 var(--radius) var(--radius)}
.filter-row{display:grid;grid-template-columns:1fr 230px;gap:12px;padding:20px 27px}.records-table{padding:0 27px 27px}.record-row{display:grid;grid-template-columns:120px 1fr 140px 100px auto;align-items:center;gap:14px;padding:15px 0;border-top:1px solid #edf0f4}.record-row:first-child{border-top:0}.record-main strong{display:block}.record-main span,.record-row small{color:var(--muted)}.record-actions{display:flex;gap:5px}.record-actions button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 10px}.status-pill{font-size:11px;font-weight:800;border-radius:999px;padding:6px 9px;background:#eef7f3;color:var(--green);width:max-content}.status-pill.draft{background:#fff5de;color:#93650f}
.station-grid{grid-template-columns:1fr 1fr;margin-bottom:18px}.form-grid .full{grid-column:1/-1}.equipment-list{padding:8px 27px 27px}.equipment-group h3{margin:20px 0 8px}.equipment-row{display:grid;grid-template-columns:1.2fr 1fr 1fr 110px auto;gap:12px;align-items:center;padding:13px 0;border-top:1px solid #edf0f4}.equipment-row small{color:var(--muted)}
.backup-grid{grid-template-columns:repeat(3,1fr)}.backup-card{padding:28px}.backup-card h2{margin:0 0 12px}.backup-card>p:not(.step){color:var(--muted);line-height:1.65;min-height:105px}.backup-card.warning{background:#fffaf0;border-color:#ead8aa}
.recent-row,.station-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 27px;border-top:1px solid #edf0f4}.recent-row:first-child,.station-row:first-child{border-top:0}.recent-row small,.station-row small{color:var(--muted)}
.toast{position:fixed;right:24px;bottom:24px;z-index:99;background:var(--ink);color:#fff;padding:13px 17px;border-radius:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:none}.icon-button{border:1px solid var(--line);background:#fff;border-radius:10px;width:42px;height:42px}.mobile-only{display:none}
@media(max-width:1100px){:root{--sidebar:225px}.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.station-grid,.backup-grid{grid-template-columns:1fr}.form-grid.three{grid-template-columns:repeat(2,1fr)}.image-grid{grid-template-columns:repeat(3,1fr)}.record-row{grid-template-columns:100px 1fr 110px auto}.record-row>.record-date{display:none}}
@media(max-width:760px){.app-shell{display:block}.sidebar{transform:translateX(-105%);transition:.22s;width:min(86vw,320px);box-shadow:var(--shadow)}.sidebar.open{transform:none}.main{display:block}.mobile-only{display:inline-grid;place-items:center}.topbar{height:92px;padding:0 18px;gap:12px}.topbar h1{font-size:22px}.top-status{display:none}.view{padding:20px 14px 60px}.hero-card{padding:28px;align-items:start;flex-direction:column}.metric-grid{grid-template-columns:1fr 1fr}.form-grid.three,.form-grid.two{grid-template-columns:1fr}.image-grid{grid-template-columns:1fr 1fr}.filter-row{grid-template-columns:1fr}.record-row{grid-template-columns:78px 1fr auto}.record-row>.record-status,.record-row>.record-date{display:none}.equipment-row{grid-template-columns:1fr auto}.equipment-row>:nth-child(2),.equipment-row>:nth-child(3),.equipment-row>:nth-child(4){display:none}.action-row{flex-wrap:wrap}.brand-lockup{width:185px}}
@media(max-width:440px){.metric-grid{grid-template-columns:1fr}.image-grid{grid-template-columns:1fr}.panel-head{padding:21px}.form-grid,.procedure-tabs,.category-tabs,.report-preview,.action-row{padding-left:21px;padding-right:21px}}
@media print{body{background:#fff}.sidebar,.topbar,.workflow-bar,.panel:not(#reportReview),.action-row,.toast{display:none!important}.app-shell,.main{display:block}.view{display:none!important;padding:0}.view.active,#reportView{display:block!important}.report-preview{padding:0}.preview-sheet{border:0;padding:0}.panel#reportReview{border:0;box-shadow:none}.panel#reportReview>.panel-head{display:none}.preview-sheet{font-size:11pt}@page{size:A4;margin:16mm}}