:root {
  --ink:#243044;
  --blue:#2f6fdb;
  --bar:#e7f2fb;
  --paper:#f6f8fb;
  --line:#e3e8ef;
  --green:#7dce6a;
  --navy:#1e4f86;
}
* { box-sizing: border-box; }
body { margin:0; font: 14px/1.45 "Segoe UI", Arial, sans-serif; color:var(--ink); background:var(--paper); }
a { color:var(--navy); }
body.app { display:flex; min-height:100vh; background:#fff; }
.side { width:210px; flex:0 0 210px; background:#fff; border-right:1px solid var(--line); padding:16px 0; }
.brand { padding:0 16px 16px; font-weight:700; color:var(--navy); }
.brand small { display:block; font-weight:500; color:#7b8794; font-size:12px; }
.side nav { display:flex; flex-direction:column; }
.side nav a { color:#334155; text-decoration:none; padding:9px 16px; border-left:3px solid transparent; }
.side nav a:hover { background:var(--bar); border-left-color:var(--blue); }
.rev { margin-top:auto; padding:16px; color:#6b7785; font-size:12px; letter-spacing:.04em; }
.side { display:flex; flex-direction:column; min-height:100vh; }
.workspace { flex:1; min-width:0; background:var(--paper); }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 20px; background:#fff; border-bottom:1px solid var(--line); }
.topbar h1 { margin:0; font-size:18px; font-weight:650; }
.find { margin:0; }
.find input { width:240px; border-radius:20px; background:#f3f6fa; }
main { padding:18px 20px 32px; }
.gate { background:#eef3f8; }
.gatecard { max-width:440px; margin:10vh auto; }
.card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin:0 0 14px; }
.card h1, .card h2 { margin:0 0 8px; }
.sectionbar { background:var(--bar); color:var(--navy); font-weight:650; padding:8px 12px; border-radius:6px 6px 0 0; margin:-14px -16px 12px; }
table { width:100%; border-collapse:collapse; background:#fff; }
th, td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#5b6b7c; background:#f7fafc; }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.warn { background:#fff8e8; border-color:#f0d48a; }
label { display:block; margin:8px 0 4px; font-size:12px; font-weight:650; color:#5b6b7c; }
input, select, textarea { width:100%; max-width:420px; padding:8px 10px; border:1px solid #d5dde6; border-radius:6px; }
button, .btn { background:var(--blue); color:#fff; border:0; border-radius:6px; padding:8px 12px; text-decoration:none; display:inline-block; font-weight:650; }
.muted { color:#6b7785; }
.tiles { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.tile { display:block; background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px; text-decoration:none; color:inherit; min-height:108px; }
.tile strong { display:block; font-size:22px; margin:4px 0; color:var(--navy); }
.tile em { font-style:normal; color:#6b7785; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.dockmap { width:100%; height:auto; background:#5eb0d8; border:1px solid #9ecae6; border-radius:4px; }
.slipbox.open { fill:#7dce6a; stroke:#3d8f45; }
.slipbox.occ { fill:#2f6fdb; stroke:#1d4f9c; }
.sliphit, .slipbox { cursor:pointer; pointer-events:all; }
.sliphit.on .slipbox { stroke:#111; stroke-width:2; }
.findslip { display:flex; gap:8px; margin:0 0 8px; }
.findslip input { max-width:220px; }
.slipmenu { margin-top:10px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.pierline { fill:#f4efe4; }
.pierline.util { fill:#f6d36b; }
.pierline.jet { fill:#9fd7c9; }
.pierline.gas { fill:#f0b429; }
.pierlabel, .landlabel, .legend text { font: 11px "Segoe UI", sans-serif; fill:#16324f; }
.legend text { font-size:12px; }
.bays { display:grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap:8px; }
.bay { border:1px solid var(--line); border-radius:6px; padding:8px; background:#fff; }
.bay.occ { background:#e7f0ff; }
.bay span { display:block; font-size:13px; margin:4px 0; }
.bay select, .bay button, .inline input { width:auto; max-width:100%; }
.invoice { max-width:820px; }
.statement { border-top:6px solid var(--navy); }
.register { background:#d9dde3; border:1px solid #b7c0cc; padding:8px; }
.regtop, .regmain, .regbottom, .payrow { display:flex; gap:8px; }
.regcust, .regmeta, .regtotals { background:#fff; border:1px solid #b7c0cc; padding:8px; }
.regcust { flex:1; }
.regcust select, .payrow select { max-width:100%; }
.regmain { margin-top:8px; align-items:stretch; }
.regmain > div:first-child { flex:1.4; }
.regkeys { flex:1; }
.reglines { min-height:220px; background:#fff; }
.regtools, .regtabs { display:flex; gap:6px; margin-bottom:6px; }
.regtabs a { background:#7eb6e6; color:#123; text-decoration:none; padding:8px 12px; border-radius:4px; font-weight:700; }
.regtabs a.on { background:#2f6fdb; color:#fff; }
.keygrid, .pad { display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; }
.keyitem, .pad button, .keyvoid, .keygray, .finish { min-height:52px; border-radius:4px; font-weight:700; }
.keyitem { background:#7dce6a; color:#143; }
.keyitem small { display:block; font-weight:500; }
.pad button { background:#e9edf2; color:#123; font-size:18px; }
.keyvoid { background:#e24b4b; color:#fff; }
.keygray { background:#c5ccd6; color:#123; }
.finish { background:#7dce6a; color:#143; flex:1; font-size:18px; }
.regtotals { min-width:180px; margin-left:auto; }
.regtotals b { float:right; }
@media (max-width:800px) { body.app { display:block; } .side { width:auto; min-height:0; } .side nav { flex-direction:row; flex-wrap:wrap; } .filelayout { grid-template-columns: 1fr; } }
.filelayout { display:grid; grid-template-columns: minmax(0,1fr) 300px; gap:14px; align-items:start; }
.yeartabs { display:flex; gap:6px; margin:0 0 10px; }
.yeartabs a { text-decoration:none; padding:6px 10px; border-radius:6px; background:#e7f2fb; color:var(--navy); font-weight:700; }
.yeartabs a.on { background:var(--navy); color:#fff; }
.history details { border-top:1px solid var(--line); padding:8px 0; }
.history summary { cursor:pointer; font-weight:700; color:var(--navy); }
.filegrid { display:grid; grid-template-columns: 180px 1fr; gap:6px 12px; align-items:center; }
.filegrid label { margin:0; }
.fobs { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:10px; }
.fobslot input { max-width:100%; margin-top:4px; }