:root{
  --navy:#072a4b;--navy2:#0b3d69;--blue:#19aee6;--bg:#f4f7fa;--card:#fff;
  --text:#17212b;--muted:#667785;--line:#dce5eb;--green:#1f9d68;--amber:#c58b1b;--red:#c84b4b;
}
*{box-sizing:border-box} body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.sidebar{background:var(--navy);color:#fff;padding:22px 16px;display:flex;flex-direction:column;gap:20px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px}.brandmark{width:44px;height:44px;border:2px solid var(--blue);border-radius:50%;display:grid;place-items:center;font-weight:800}
.brandname{font-weight:800;letter-spacing:.05em}.brandsub{font-size:12px;color:#a8c1d5}
nav{display:flex;flex-direction:column;gap:5px}.navbtn{border:0;background:transparent;color:#d9e6ef;text-align:left;padding:10px 12px;border-radius:10px;cursor:pointer}
.navbtn.active,.navbtn:hover{background:#123f65;color:#fff}.syncbox{margin-top:auto;font-size:12px;color:#b7cada;display:flex;gap:8px;align-items:center}.dot{width:8px;height:8px;border-radius:50%;background:#35d07f}
main{padding:28px;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.topbar h1{margin:0;color:var(--navy);font-size:28px}.topbar p{margin:4px 0 0;color:var(--muted)}
.actions{display:flex;gap:10px}.primary,.secondary{border:0;border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:700}.primary{background:var(--blue);color:#fff}.secondary{background:#e8eff4;color:var(--navy)}
.view{display:none}.view.active{display:block}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 4px 14px rgba(7,42,75,.04)}
.stat span{font-size:13px;color:var(--muted)}.stat strong{display:block;font-size:34px;color:var(--navy);margin:6px 0}.stat small{color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cardhead{display:flex;justify-content:space-between;align-items:center}.card h2{margin:0 0 12px;color:var(--navy);font-size:18px}.textbtn{border:0;background:none;color:var(--blue);font-weight:700;cursor:pointer}
.job{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--line)}.job:first-of-type{border-top:0}.job div{display:flex;flex-direction:column}.job span{font-size:12px;color:var(--muted)}
.pill{display:inline-block;padding:5px 9px;border-radius:999px;font-style:normal;font-size:12px;font-weight:700}.blue{background:#dff4fd;color:#097aab}.green{background:#e2f5ec;color:#17764f}.amber{background:#fff2d5;color:#9b6a00}.red{background:#fde4e4;color:#a93737}
.checklist{list-style:none;padding:0;margin:0}.checklist li{padding:9px 0;border-top:1px solid var(--line)}.checklist li:first-child{border-top:0}.checklist input{margin-right:8px}
.quickgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.quick{background:#f6fafd;border:1px solid var(--line);border-radius:12px;padding:16px;text-align:left;cursor:pointer}.quick b{display:block;color:var(--navy);margin-bottom:5px}.quick span{font-size:12px;color:var(--muted)}
.toolbar{display:flex;gap:10px;margin-bottom:14px}.toolbar input{flex:1}.tablewrap{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}table{width:100%;border-collapse:collapse}th,td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left}th{font-size:12px;color:var(--muted);background:#f8fbfd}
label{display:flex;flex-direction:column;gap:6px;margin:10px 0;font-size:13px;font-weight:700;color:var(--navy)}input,select,textarea{border:1px solid var(--line);border-radius:10px;padding:11px;background:#fff;color:var(--text)}
.result{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.result strong{font-size:34px;color:var(--navy);margin:8px 0}.result span,.result small{color:var(--muted)}
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.lane{background:#edf3f7;border-radius:14px;padding:12px;min-height:280px}.lane h3{margin:0 0 10px;color:var(--navy)}.ticket{background:#fff;border:1px solid var(--line);padding:13px;border-radius:12px;font-weight:700}.ticket small{display:block;color:var(--muted);margin-top:6px;font-weight:400}
.calcresult{margin-top:14px;background:#eff8fd;color:var(--navy);padding:14px;border-radius:12px;font-size:20px;font-weight:800}
dialog{border:0;border-radius:16px;padding:0;box-shadow:0 18px 60px rgba(0,0,0,.25);width:min(460px,90vw)}dialog::backdrop{background:rgba(4,24,43,.55)}.modal{padding:22px}.modal h2{margin-top:0;color:var(--navy)}.modalActions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
#toast{position:fixed;right:20px;bottom:20px;background:var(--navy);color:#fff;padding:12px 16px;border-radius:10px;opacity:0;pointer-events:none;transform:translateY(10px);transition:.2s}#toast.show{opacity:1;transform:translateY(0)}
@media(max-width:980px){.app{grid-template-columns:78px 1fr}.brandname,.brandsub,.navbtn{font-size:0}.navbtn:before{font-size:12px;content:attr(data-view);text-transform:capitalize}.brand{justify-content:center}.syncbox span:last-child{display:none}.cards{grid-template-columns:repeat(2,1fr)}.quickgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.app{display:block}.sidebar{position:fixed;z-index:10;bottom:0;top:auto;height:auto;width:100%;padding:8px;background:var(--navy)}.brand,.syncbox{display:none}nav{flex-direction:row;overflow-x:auto;gap:4px}.navbtn{white-space:nowrap;min-width:max-content;padding:9px}.navbtn:before{content:attr(data-view);font-size:12px}.topbar{align-items:flex-start;flex-direction:column}.actions{width:100%}.actions button{flex:1}main{padding:18px 14px 86px}.cards,.grid2,.kanban,.quickgrid{grid-template-columns:1fr}.topbar h1{font-size:24px}.tablewrap{overflow-x:auto}}

.muted{color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:10px}
.filebtn{display:block;background:#e8eff4;color:var(--navy);padding:11px 14px;border-radius:10px;font-weight:700;cursor:pointer;text-align:center}
.filebtn input{display:none}
.steps{color:var(--muted);padding-left:20px}.steps li{margin:8px 0}.steps code{background:#eef3f6;padding:2px 5px;border-radius:5px;color:var(--navy)}
.form2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.iconbtn{border:0;background:#eef4f8;color:var(--navy);border-radius:8px;padding:7px 9px;cursor:pointer}
.detailgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}.detailgrid div{padding:8px 0;border-bottom:1px solid var(--line)}.detailgrid small{display:block;color:var(--muted);margin-bottom:3px}
.detailactions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.badgecloud{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;background:#edf6fb;color:#0a6d9b;font-size:12px;font-weight:700}
@media(max-width:720px){.form2,.detailgrid{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}.tablewrap{max-width:100%}}

.login-screen{position:fixed;inset:0;background:linear-gradient(145deg,#041d34,#0b416e);z-index:100;display:grid;place-items:center;padding:20px}
.login-screen.hidden{display:none}.login-card{width:min(420px,94vw);background:#fff;border-radius:22px;padding:30px;box-shadow:0 30px 80px rgba(0,0,0,.28)}
.login-card h1{margin:12px 0 2px;color:var(--navy);letter-spacing:.05em}.login-card p{color:var(--muted);margin:0 0 18px}.login-card small{display:block;margin-top:12px;color:var(--muted);text-align:center}
.login-brandmark{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;border:3px solid var(--blue);font-weight:900;font-size:20px}
.wide{width:100%;margin-top:8px}.userpill{display:flex;align-items:center;gap:9px;margin-left:auto}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:12px;font-weight:800}.userpill div{display:flex;flex-direction:column}.userpill small{color:var(--muted);font-size:11px}
.accent-blue{border-top:4px solid #0f6ca5}.accent-cyan{border-top:4px solid var(--blue)}.accent-green{border-top:4px solid var(--green)}.accent-amber{border-top:4px solid var(--amber)}
.singlecol{grid-template-columns:1fr!important}.three{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.vesselcard{cursor:pointer;transition:.15s}.vesselcard:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(7,42,75,.08)}
.form3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.photo-drop{border:2px dashed var(--line);border-radius:14px;padding:14px;margin:12px 0;background:#f8fbfd}.photo-drop span{display:block;color:var(--muted);font-size:12px;margin:4px 0 8px}.photo-preview{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.photo-preview img{width:74px;height:74px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.audit-history{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}.audit-item,.quote-item{padding:10px 0;border-top:1px solid var(--line)}.audit-item:first-child,.quote-item:first-child{border-top:0}
.left{justify-content:flex-start}.quote-summary hr{border:0;border-top:1px solid var(--line);width:100%;margin:18px 0}
.quick.static{cursor:default}.quickgrid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.userpill{display:none}.form3,.three,.quickgrid.three{grid-template-columns:1fr 1fr!important}}
@media(max-width:720px){.form3,.three,.quickgrid.three{grid-template-columns:1fr!important}}