:root{--navy:#0e2235;--navy2:#122a40;--teal:#0e9998;--teal2:#0ab5aa;--paper:#f5f7fa;--ink:#152537;--muted:#778598;--line:#e7ecf1;--white:#fff;--radius:15px;--shadow:0 3px 24px rgba(20,39,59,.025);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);font-size:14px;line-height:1.55}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}input,select,textarea{max-width:100%}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.3;letter-spacing:-.025em}h2{font-size:17px}small{font-size:11px}i{font-style:normal;color:#de8c39}b,strong{font-weight:650}.layout{display:flex;min-height:100vh}.sidebar{position:sticky;top:0;align-self:flex-start;flex:0 0 245px;height:100vh;background:#102539;color:#a4b8c9;display:flex;flex-direction:column;z-index:20}.brand{height:100px;display:flex;align-items:center;gap:12px;margin:0 22px;padding:0 2px;border-bottom:1px solid rgba(255,255,255,.09);color:white}.brand-mark{height:39px;width:39px;border-radius:11px;background:linear-gradient(135deg,#20ccc0,#1175a2);display:flex;align-items:center;justify-content:center;font-size:28px;line-height:1;color:white;box-shadow:0 3px 14px #16bea533}.brand strong{display:block;font-size:14px;letter-spacing:.09em;font-weight:800}.brand small{display:block;color:#91a6b9;font-size:10px;letter-spacing:.055em;margin-top:2px}.sidebar-label{font-size:10px;font-weight:750;letter-spacing:.16em;color:#607f97;padding:30px 29px 13px}.sidebar-label.in-nav{padding-top:25px}.nav{padding:0 13px}.nav-link{display:flex;align-items:center;gap:12px;color:#aabbcb;padding:12px 16px;border-radius:8px;font-weight:580;margin-bottom:4px;transition:background .15s,color .15s}.nav-link:hover{color:#f1f9ff;background:#1b3850}.nav-link.active{background:linear-gradient(90deg,#12646a,#14525c);color:white}.nav-ico{display:grid;place-items:center;width:20px;font-size:19px;font-weight:450}.sidebar-bottom{margin-top:auto;padding:20px 27px 30px;border-top:1px solid rgba(255,255,255,.07)}.server-mark{font-size:11px;color:#bdd3de;display:flex;align-items:center;gap:9px}.pulse{height:7px;width:7px;border-radius:50%;background:#4addad;box-shadow:0 0 0 4px #4addad19}.sidebar-help{font-size:10px;color:#658199;margin:9px 0 0 16px;line-height:1.6}.sidebar-shade{display:none}.main{min-width:0;flex:1;display:flex;flex-direction:column}.topbar{height:76px;background:white;display:flex;align-items:center;justify-content:space-between;padding:0 35px;border-bottom:1px solid var(--line);gap:20px}.crumb{font-size:10px;font-weight:750;letter-spacing:.125em;color:#8b97a5}.crumb span{padding:0 10px;color:#c0cad2}.crumb b{color:#25384a;letter-spacing:.045em}.account{display:flex;align-items:center;gap:11px}.avatar{width:35px;height:35px;border-radius:10px;background:#d9f3f0;color:#0c8a86;font-weight:800;display:grid;place-items:center;font-size:15px}.account-text strong,.account-text span{display:block}.account-text strong{font-size:12px;line-height:1.3}.account-text span{font-size:10px;color:var(--muted)}.logout-form{margin-left:12px;padding-left:12px;border-left:1px solid var(--line)}.logout-button{width:32px;height:32px;border:0;background:transparent;color:#75889a;font-size:24px;border-radius:8px}.logout-button:hover{background:#f0f4f7;color:var(--ink)}.menu-button{display:none}.main-content{width:100%;max-width:1610px;margin:0 auto;padding:34px 35px 54px;flex:1}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:27px;flex-wrap:wrap}.eyebrow{font-size:10px;color:var(--teal);font-weight:800;letter-spacing:.16em;margin-bottom:9px}.page-heading h1{font-size:29px;font-weight:800;margin:0 0 8px;letter-spacing:-.04em}.page-heading p{color:var(--muted);font-size:12.5px;margin:0}.heading-action{display:flex;gap:9px;align-items:center}.btn{appearance:none;border:1px solid transparent;border-radius:9px;padding:10px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:700;white-space:nowrap;min-height:40px;transition:transform .15s,background .15s,box-shadow .15s}.btn:hover{transform:translateY(-1px)}.btn.primary{background:#0b9290;color:white;box-shadow:0 3px 10px #0b929017}.btn.primary:hover{background:#087b7b}.btn.secondary{background:white;border-color:#dce5eb;color:#30485d}.btn.secondary:hover{background:#f6fafb}.btn.ghost{background:transparent;color:#7f8a95}.btn.full{width:100%}.surface{background:#fff;border-radius:var(--radius);border:1px solid #edf0f3;box-shadow:var(--shadow);padding:22px 24px;min-width:0}.surface-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:23px}.surface-heading h2{font-size:15.5px;margin:0 0 4px}.surface-heading p{font-size:11.5px;color:var(--muted);margin:0}.soft-icon{display:grid;place-items:center;border-radius:9px;background:#f1f7f8;width:35px;height:35px;color:#159d9b;font-size:19px}.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 18px}.metric-card{background:white;border:1px solid #edf0f3;border-radius:var(--radius);padding:21px 23px 17px;min-height:154px;box-shadow:var(--shadow);position:relative;overflow:hidden}.metric-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:#168da6}.metric-card.accent-violet:before{background:#8865cf}.metric-card.accent-green:before{background:#28b594}.metric-card.accent-amber:before{background:#eda447}.metric-top{display:flex;justify-content:space-between;align-items:center;color:#758596;font-size:12px;font-weight:600}.metric-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#eaf3f8;color:#168da6;font-size:20px}.accent-violet .metric-icon{background:#f4effb;color:#8865cf}.accent-green .metric-icon{background:#e9f8f2;color:#24aa86}.accent-amber .metric-icon{background:#fff4e7;color:#e1a04c}.metric-number{font-size:34px;line-height:1.2;font-weight:780;letter-spacing:-.05em;margin:12px 0 2px}.metric-bottom{color:#a1adba;font-size:11px}.dashboard-grid{display:grid;grid-template-columns:1.16fr 1fr;gap:17px;margin-bottom:18px}.dashboard-grid .surface{min-height:310px}.distribution{display:grid;gap:18px;margin:27px 0}.barrow .barlabels{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-bottom:8px}.barlabels strong{font-size:12px}.barlabels small{color:#94a2ad;font-weight:500;margin-left:2px}.bartrack{height:7px;background:#edf4f6;border-radius:20px;overflow:hidden}.barfill{height:100%;border-radius:20px;background:linear-gradient(90deg,#0b9696,#56cdba)}.surface-tail{border-top:1px solid var(--line);margin:5px -24px -22px;padding:17px 24px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted)}.surface-tail b{font-size:16px;color:var(--ink)}.control-radar{background:#f4f9fa;border-radius:12px;display:flex;align-items:center;gap:22px;padding:14px 24px;min-height:119px}.radar-sm{width:84px;height:84px;flex:0 0 84px;border-radius:50%;background:radial-gradient(circle,#c7e9e6 0 4px,transparent 5px),#e4f2f3;position:relative;display:grid;place-items:center;color:#0c9892;font-size:26px;overflow:hidden}.radar-ring{position:absolute;border:1px solid #a6dcdb;border-radius:50%;inset:11px}.radar-ring.second{inset:25px}.control-radar>div:last-child strong{display:block;font-size:26px;letter-spacing:-.03em;line-height:1.15}.control-radar>div:last-child span{display:block;color:#788b97;font-size:11px;margin-top:6px}.control-info{margin-top:18px}.control-info>div{display:flex;align-items:center;gap:9px;padding:8px 0;font-size:11px;color:#80909e}.control-info b{margin-left:auto;color:#304556}.control-dot{background:#c6bce4;width:7px;height:7px;border-radius:50%}.control-dot.ok{background:#32b29d}.card-note{font-size:10px;color:#a0a9b4}.table-surface{padding:0;overflow:hidden}.table-surface>.surface-heading{padding:22px 24px 3px;margin-bottom:12px}.plain-link{color:#0c9692;font-size:11.5px;font-weight:750}.table-scroll{width:100%;overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:12px;text-align:left}thead{background:#fafbfc}th{font-size:9.5px;font-weight:800;letter-spacing:.085em;color:#8c9aaa;padding:14px 22px;white-space:nowrap}td{border-top:1px solid #eef1f4;padding:17px 22px;color:#667789;vertical-align:middle}td.strong{font-size:12px;color:#21364a;font-weight:730;min-width:205px}td.strong a:hover{color:#0d938f}.pair-divider{color:#b5c2cd;padding:0 2px}.td-sub{display:block;color:#9ba9b6;font-size:10px;font-weight:500;margin-top:5px}.type-text{white-space:nowrap}.status{display:inline-flex;gap:7px;align-items:center;border-radius:7px;padding:6px 10px;font-size:10px;font-weight:800;letter-spacing:.035em;white-space:nowrap}.status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.status-faw{background:#f0ecfb;color:#8361c8}.status-arrival{background:#e5f7ee;color:#218c65}.status-kandas{background:#fff3e5;color:#cc872c}.status-other{background:#eaf1fa;color:#5e82b3}.status-neutral{background:#eff3f5;color:#66788c}.overdue-tag{font-weight:800;color:#df8c25;font-size:9px;letter-spacing:.035em;margin-top:5px}.time-col{white-space:nowrap;font-size:11px}.num-col{white-space:nowrap;font-weight:600;color:#354b5e}.table-arrow{display:grid;place-items:center;width:29px;height:29px;border:1px solid #e5ecf0;border-radius:7px;font-size:16px;color:#8ba2b3}.table-arrow:hover{background:#ecf8f7;color:#0b9990}.footer{border-top:1px solid #e8edf0;padding:17px 35px;display:flex;justify-content:space-between;color:#9aa8b3;font-size:10.5px;gap:15px}.alert{background:#edf8f5;color:#216d5d;border:1px solid #cde9df;border-radius:10px;padding:11px 14px;margin-bottom:19px;font-size:12px;display:flex;gap:11px;align-items:center}.alert.error{background:#fff5ed;color:#955324;border-color:#ffdfc6}.alert button{margin-left:auto;border:0;background:transparent;color:inherit;font-size:20px}.warning-banner{padding:13px 17px;border:1px solid #f2d8aa;border-radius:11px;background:#fff9ed;margin-bottom:21px;display:flex;gap:13px;align-items:center;color:#805b23}.warning-symbol{background:#f0b653;color:#fff;width:29px;height:29px;border-radius:9px;display:grid;place-items:center;font-weight:800}.warning-banner strong,.warning-banner small{display:block}.warning-banner strong{font-size:12px}.warning-banner small{font-size:10.5px;color:#a3814d}.banner-arrow{margin-left:auto;font-size:11px;font-weight:700}.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px 50px;text-align:center}.empty-icon{border:1px solid #cdebe6;color:#2da8a2;background:#e9f9f4;font-size:30px;width:54px;height:54px;display:grid;place-items:center;border-radius:16px;margin-bottom:15px}.empty strong{font-size:14px}.empty p{color:#94a3b0;font-size:11px;max-width:325px;margin:8px auto 0}.filter-card{padding:15px 20px 0;margin-bottom:15px}.filter-form{display:flex;gap:9px;align-items:stretch;flex-wrap:wrap}.filter-form select{max-width:195px}.filter-form .btn{flex:0 0 auto}.filter-search{flex:1;min-width:220px;position:relative}.filter-search span{position:absolute;left:13px;top:2px;color:#9fb0bf;font-size:24px}.filter-search input{padding-left:37px;width:100%}.filter-foot{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 0 0;margin-top:15px;border-top:1px solid var(--line);color:#95a1ad;font-size:11px;flex-wrap:wrap}.filter-foot b{color:#22384e}.filter-options{display:flex;align-items:center;gap:22px}.filter-options a{padding:0 0 12px;color:#8b9ca9;border-bottom:2px solid transparent;font-size:11px;font-weight:700}.filter-options a.selected{border-color:#0c9a91;color:#088f89}.monitoring-table{margin-bottom:20px}.pagination{display:flex;align-items:center;justify-content:flex-end;gap:10px}.pagination span{margin-right:auto;font-size:11px;color:#8a98a8}.back-line{margin-bottom:18px;color:#678196;font-weight:600;font-size:11px}.detail-grid{display:grid;grid-template-columns:1.45fr .95fr;gap:18px;margin:0 0 18px}.detail-primary{padding:26px 30px}.detail-status-line{display:flex;align-items:center;justify-content:space-between}.detail-status-line .eyebrow{margin-bottom:0}.vessel-display{display:flex;align-items:center;gap:26px;padding:35px 10px 34px;border-bottom:1px solid var(--line);margin-bottom:20px}.vessel-display>span{width:92px;height:92px;flex:0 0 92px;display:grid;place-items:center;background:#edf7f6;color:#109c98;font-size:43px;border-radius:21px}.vessel-display small{color:#a1adb8;font-size:10px;letter-spacing:.07em}.vessel-display strong{display:block;font-size:24px;letter-spacing:-.035em;line-height:1.5}.vessel-line{border-left:2px dashed #9bcbca;height:15px;margin-left:11px}.detail-facts{display:grid;grid-template-columns:1fr 1fr;gap:21px 15px}.detail-facts span{display:block;color:#91a0ae;font-size:11px;margin-bottom:5px}.detail-facts b{font-size:12px;overflow-wrap:anywhere}.detail-side{display:grid;align-content:start;gap:15px}.detail-panel{padding:22px}.detail-panel h2{font-size:15px;margin-bottom:12px}.document-preview{display:flex;align-items:center;gap:13px;background:#f7f9fa;padding:15px;border-radius:10px;margin-bottom:16px}.document-icon{border-radius:7px;background:#fff0ee;color:#d7655d;font-weight:800;padding:11px 8px;font-size:11px}.document-preview b{display:block;font-size:12px;overflow-wrap:anywhere}.document-preview small{display:block;color:#92a1b2;margin-top:5px}.muted-block{color:#a3abb5;font-size:12px;padding:25px 0}.remarks{color:#6d7e8e;font-size:12px;white-space:normal}.detail-modified{border-top:1px solid var(--line);padding-top:13px;font-size:10px;color:#a0aab6;margin-top:18px}.muted-text{font-size:11px;color:#9aa8b5}.history-card{padding:22px 26px}.history-list{margin-left:9px;padding-left:16px;border-left:1px solid #cfe3e5}.history-item{position:relative;padding:0 0 22px 15px}.history-item:last-child{padding-bottom:0}.history-marker{position:absolute;left:-22px;top:3px;width:11px;height:11px;border:3px solid #4bb9b1;border-radius:50%;background:white}.history-item b{font-size:12px}.history-item p{font-size:11px;color:#82919d;margin:4px 0}.history-item small{color:#a2aab3}.form-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px;align-items:start}.entry-card{padding:30px}.form-section-header{display:flex;align-items:center;gap:14px;margin-bottom:19px}.form-section-header.second{border-top:1px solid var(--line);padding-top:25px;margin-top:28px}.form-section-header>span{display:grid;place-items:center;width:37px;height:37px;border-radius:10px;background:#e5f5f2;color:#0a948d;font-weight:800;font-size:12px}.form-section-header h2{margin:0 0 3px;font-size:16px}.form-section-header p{color:#93a1ad;font-size:11px;margin:0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}.entry-card label,.manage-form label,.login-card label{display:block;color:#41566a;font-size:11.5px;font-weight:700;margin-bottom:16px}.entry-card label i,.manage-form label i{color:#e7a04c}input:not([type=hidden]):not([type=checkbox]),select,textarea{width:100%;outline:none;min-height:42px;padding:10px 12px;margin-top:7px;border:1px solid #dfe6eb;border-radius:8px;background:#fff;color:#23394b;font-size:12px;transition:border-color .15s,box-shadow .15s}input:focus,select:focus,textarea:focus{border-color:#3badac;box-shadow:0 0 0 3px #23ada618}input::placeholder,textarea::placeholder{color:#a6b1ba}textarea{resize:vertical;min-height:108px}input[type=file]{background:#fafcfd;font-size:10px;padding:8px}.helper{color:#98a7b4;font-size:10px;font-weight:450;margin-left:4px}.field-help{display:block;font-size:10px;color:#9aa6b2;margin-top:6px;font-weight:400}.fake-field{display:grid;grid-template-columns:1fr;align-content:center;background:#f5f9fa;border-radius:8px;border:1px solid #e2edef;padding:8px 14px;margin:0 0 16px;min-height:60px}.fake-field span{font-size:10px;color:#93a0ae}.fake-field strong{font-size:12px;color:#3c5569}.input-tip{margin:0;font-size:11px;color:#91a2b0}.input-tip a{color:#0e9390;font-weight:750}.entry-footer{border-top:1px solid var(--line);padding-top:19px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:13px}.entry-footer span{font-size:10px;color:#96a6b3}.entry-footer>div{display:flex;gap:8px}.help-surface{padding:22px}.help-surface h3{font-size:15px;margin:0 0 25px}.help-item{display:flex;gap:12px;margin-bottom:24px}.help-item:last-child{margin-bottom:0}.help-item>b{font-size:11px;color:#11a49a;background:#e5f6f3;height:28px;width:28px;border-radius:8px;flex:0 0 28px;display:grid;place-items:center}.help-item p{font-size:11px;color:#9aa7b3;line-height:1.65;margin:0}.help-item strong{display:block;font-size:12px;margin-bottom:3px;color:#34485b}.manage-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;align-items:start}.manage-table{padding:0;overflow:hidden}.manage-table .surface-heading{padding:23px 23px 3px;margin-bottom:16px;align-items:center}.manage-table td,.manage-table th{padding:15px 17px}.manage-table td.strong{min-width:130px}.manage-form{padding:23px}.manage-form h2{font-size:16px;margin:0 0 5px}.manage-form>p{font-size:11px;color:#95a4b0;margin-bottom:23px}.manage-form .btn{margin-top:5px}.manage-form form .btn.ghost{margin-top:8px}.counter-chip{font-size:11px;color:#468d88;background:#e9f8f4;border-radius:18px;padding:6px 10px}.mini-state{font-size:10px;border-radius:12px;padding:4px 8px;white-space:nowrap}.mini-state.on{color:#1a9978;background:#e6f7f0}.mini-state.off{color:#8a91a1;background:#f0f2f5}.inline-actions{display:flex;gap:6px;align-items:center}.small-action{border:0;background:transparent;font-size:10px;color:#188f8b;padding:5px 2px;white-space:nowrap;font-weight:650}.small-action:hover{text-decoration:underline}.role-label{font-size:10px;font-weight:800;color:#617a8c}.separator{border-top:1px solid #e8edf1;margin:22px 0}.auth-body{background:#f7f9fb;color:#1d3243}.login-layout{min-height:100vh;display:grid;grid-template-columns:50% 50%}.login-splash{min-height:740px;background:radial-gradient(circle at 90% 20%,#235d70 0%,transparent 27%),linear-gradient(145deg,#0a2134,#102c41 64%,#0b2938);color:white;padding:39px max(40px,7vw) 32px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.login-brand{display:flex;gap:11px;align-items:center;letter-spacing:.12em;font-size:14px;font-weight:800;position:relative;z-index:1}.login-symbol{width:43px;height:43px;background:#23b9ae;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:28px;box-shadow:0 0 0 7px #2bc3b014}.login-brand small,.install-brand small{display:block;font-size:9px;font-weight:600;letter-spacing:.2em;color:#9db6c4;margin-top:2px}.hero-graphic{width:min(100%,440px);height:360px;position:absolute;top:15%;right:-8%;opacity:.8}.radar-circle{position:absolute;border-radius:50%;border:1px solid #83c9c529;left:10%;top:0;aspect-ratio:1}.radar-circle.c1{width:340px}.radar-circle.c2{width:270px;left:calc(10% + 35px);top:35px}.radar-circle.c3{width:180px;left:calc(10% + 80px);top:80px}.hero-graphic:before,.hero-graphic:after{content:"";position:absolute;background:#69bab627}.hero-graphic:before{height:1px;width:100%;top:170px}.hero-graphic:after{width:1px;height:100%;left:calc(10% + 170px);top:0}.radar-center{position:absolute;top:122px;left:calc(10% + 129px);width:83px;height:83px;display:grid;place-items:center;background:#33cdb812;border:1px solid #5fdac436;border-radius:50%;font-size:35px;color:#67d9c6}.radar-point{position:absolute;width:9px;height:9px;border-radius:50%;background:#38dccb;box-shadow:0 0 0 6px #39dccc17}.rp1{left:20%;top:30%}.rp2{left:80%;top:60%}.rp3{left:40%;top:87%}.login-copy{position:relative;z-index:1;max-width:550px;margin-top:auto;margin-bottom:55px}.login-copy h1{font-size:clamp(34px,3.6vw,61px);letter-spacing:-.06em;font-weight:790;line-height:1.18;margin:16px 0 20px}.login-copy em{color:#40d2bd;font-style:normal}.login-copy p{font-size:14px;color:#a6c3cf;max-width:345px;line-height:1.8}.login-tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:31px}.login-tags span{font-size:10px;font-weight:650;border:1px solid #4c7d82a6;border-radius:6px;padding:7px 10px;color:#b2d7dc}.login-foot{position:relative;z-index:1;font-size:9px;color:#5c8799;letter-spacing:.14em;font-weight:750}.login-foot span{padding:0 8px}.login-form-area{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 25px;position:relative}.login-card{width:100%;max-width:415px}.login-card h2{font-size:27px;letter-spacing:-.045em;font-weight:780;margin:0 0 12px}.login-card>p{color:#889aaa;font-size:12.5px;margin:0 0 30px;max-width:360px;line-height:1.65}.auth-switch{background:#eaf0f3;border-radius:9px;display:flex;padding:4px;gap:3px;margin-bottom:26px}.auth-switch a{display:block;text-align:center;flex:1;font-size:11px;color:#788999;padding:10px 7px;border-radius:7px;font-weight:700}.auth-switch a.selected{background:white;box-shadow:0 1px 5px #1c3c4e10;color:#0a948e}.password-wrap{position:relative}.password-wrap input{padding-right:55px!important}.reveal{position:absolute;right:8px;top:16px;background:transparent;border:0;color:#8b9aaa;font-size:10px;font-weight:750}.login-submit{margin-top:13px;min-height:47px;justify-content:space-between;padding:11px 17px;font-size:13px}.login-support{margin-top:25px;text-align:center;color:#9aa9b6;font-size:11px}.login-copyright{position:absolute;bottom:26px;color:#a6b0bb;font-size:10px}.mobile-logo{display:none}.install-shell{min-height:100vh;max-width:1170px;margin:auto;padding:35px 35px 70px}.install-brand{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.1em}.install-brand small{color:#718b9c}.install-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:65px;align-items:center;margin-top:70px}.install-grid section h1{font-size:46px;letter-spacing:-.06em;line-height:1.1;max-width:380px}.install-grid section p{color:#8799a9;font-size:14px;line-height:1.8;max-width:360px}.setup-steps{margin-top:32px;display:grid;gap:13px}.setup-steps div{color:#506879;font-size:12px;display:flex;gap:12px;align-items:center}.setup-steps b{background:#def5f0;color:#088e88;border-radius:7px;padding:8px}.install-card{background:white;border:1px solid #e5eaee;border-radius:16px;box-shadow:0 15px 60px #2447590c;padding:32px;max-width:none}.install-card h2{margin-bottom:23px}.install-card .form-grid{gap:13px}.install-card .form-grid label{min-width:0}.mini{font-size:10px!important;color:#9eabb6!important;text-align:center;margin:15px 0 0!important}
@media(max-width:1280px){.sidebar{flex-basis:225px}.topbar{padding:0 24px}.main-content{padding:27px 24px 45px}.dashboard-grid{grid-template-columns:1fr 1fr}.form-layout{grid-template-columns:minmax(0,1fr) 260px}.manage-grid{grid-template-columns:minmax(0,1fr) 295px}.metrics-grid{gap:12px}.metric-card{padding:18px}}
@media(max-width:1060px){.sidebar{flex-basis:205px}.brand{margin:0 14px}.nav{padding:0 8px}.nav-link{padding:10px 11px}.main-content{padding:25px 19px 45px}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}.form-layout,.manage-grid{grid-template-columns:1fr}.form-tips{display:none}.login-splash{padding-left:42px;padding-right:35px}.install-grid{gap:30px}}
@media(max-width:700px){.layout{display:block}.sidebar{position:fixed;left:-280px;top:0;height:100dvh;width:255px;transition:left .2s;box-shadow:4px 0 30px #152d4017}.sidebar-shade{display:none;position:fixed;inset:0;background:#0b21357d;z-index:19}.layout.menu-open .sidebar{left:0}.layout.menu-open .sidebar-shade{display:block}.topbar{height:64px;padding:0 17px;justify-content:flex-start}.menu-button{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;font-size:21px;color:#213d52;padding:5px}.crumb{font-size:9px;letter-spacing:.03em;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.crumb span{padding:0 4px}.account{margin-left:auto;gap:6px}.avatar{width:30px;height:30px;border-radius:9px}.account-text{display:none}.logout-form{padding:0;margin-left:0;border:0}.logout-button{width:27px}.main-content{padding:24px 14px 35px}.page-heading{align-items:flex-start;margin-bottom:20px}.page-heading h1{font-size:24px}.page-heading p{font-size:11px}.heading-action{width:100%;flex-wrap:wrap}.heading-action .btn{flex:1}.metrics-grid{gap:10px}.metric-card{min-height:127px;padding:14px}.metric-top{font-size:10px}.metric-icon{width:28px;height:28px;font-size:17px}.metric-number{font-size:29px;margin:10px 0 0}.metric-bottom{font-size:10px}.surface{padding:19px 17px}.table-surface,.manage-table{padding:0}.table-surface>.surface-heading,.manage-table>.surface-heading{padding:18px 16px 0}.dashboard-grid .surface{min-height:0}.surface-heading h2{font-size:14px}.surface-tail{margin:5px -17px -19px;padding:15px 17px}table{min-width:720px}td{padding:14px 15px}th{padding:13px 15px}.footer{padding:16px;flex-direction:column;gap:4px}.filter-card{padding:13px 13px 0}.filter-form{gap:7px}.filter-form .filter-search{flex:1 0 100%}.filter-form select{flex:1;min-width:130px;max-width:none}.filter-form .btn{flex:1}.filter-options{gap:14px}.filter-foot{align-items:flex-start}.filter-options a{font-size:10px}.detail-primary{padding:21px}.vessel-display{padding:25px 0;gap:15px}.vessel-display>span{height:67px;width:67px;flex-basis:67px;font-size:32px}.vessel-display strong{font-size:20px}.detail-facts{gap:17px 8px}.entry-card{padding:20px}.form-grid{grid-template-columns:1fr;gap:0;margin-bottom:0}.entry-footer{flex-direction:column;align-items:stretch}.entry-footer>div{display:flex}.entry-footer>div .btn{flex:1}.manage-form{padding:20px}.login-layout{display:block;min-height:100dvh}.login-splash{min-height:150px;padding:22px 25px;background:#102639}.login-brand,.login-foot,.login-copy{display:none}.hero-graphic{top:-110px;right:-230px;opacity:.35;transform:scale(.7)}.login-form-area{min-height:calc(100dvh - 150px);padding:30px 25px 80px;justify-content:flex-start}.mobile-logo{display:block;color:#0b9290;font-weight:800;letter-spacing:.06em;font-size:12px;position:absolute;top:-90px;left:25px}.login-card h2{font-size:25px}.login-card>p{margin-bottom:22px}.login-copyright{bottom:25px;text-align:center}.install-shell{padding:22px 18px}.install-grid{margin-top:45px;grid-template-columns:1fr;gap:25px}.install-grid section h1{font-size:32px}.install-card{padding:22px}.install-card .form-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:700px){
 .table-surface .table-scroll,.manage-table .table-scroll{overflow:visible}
 .table-surface table,.manage-table table{min-width:0;width:100%;display:block}
 .table-surface thead,.manage-table thead{display:none}
 .table-surface tbody,.manage-table tbody{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:8px 10px 12px}
 .table-surface tbody tr,.manage-table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;border:1px solid #e6edf0;border-radius:11px;padding:14px 13px;background:#fff}
 .table-surface tbody td,.manage-table tbody td{min-width:0;width:auto;display:block;border:0;padding:0;font-size:11px;overflow-wrap:anywhere}
 .table-surface tbody td::before,.manage-table tbody td::before{content:attr(data-label);font-size:9px;color:#9caab7;font-weight:750;letter-spacing:.03em;display:block;margin-bottom:4px;text-transform:uppercase}
 .table-surface tbody td:first-child,.manage-table tbody td:first-child{grid-column:1/-1;border-bottom:1px solid var(--line);padding-bottom:11px;font-size:13px}
 .table-surface tbody td:first-child::before,.manage-table tbody td:first-child::before{display:none}
 .table-surface tbody td:last-child,.manage-table tbody td:last-child{grid-column:1/-1;border-top:1px solid #f0f2f3;padding-top:7px}
 .table-surface tbody td:last-child .table-arrow{width:100%;background:#f4faf9;height:31px}
 .manage-table tbody td:last-child .inline-actions{gap:18px}
 .manage-table tbody td:last-child .small-action{padding:6px 0}
 .table-surface .type-text{white-space:normal}
 .table-surface td .overdue-tag{margin-top:7px}
}

/* =====================================================
   RESOURCES BRAND REFRESH 2026-10-17 / Self-hosted v1.1
   Photo + transparent logo supplied by website owner.
   Only presentation changes; all existing forms/actions remain.
   ===================================================== */
:root { --teal:#079e9c; --teal2:#12baac; --paper:#f4f8fb; }
.resources-logo { display:block; width:auto; height:auto; object-fit:contain; object-position:left center; }
/* Branding consistently uses the supplied full-color PNG, never an emoji mark. */
.sidebar { background:linear-gradient(180deg,#061d32 0%,#0d344b 64%,#081f34 100%); }
.sidebar .brand { height:auto; min-height:145px; margin:0 18px 17px; padding:22px 4px 19px; flex-direction:column; align-items:flex-start; gap:5px; }
.sidebar-logo { width:min(100%,192px); height:auto; max-height:74px; }
.sidebar-brand-desc { color:#e6f3f4; display:block; font-size:10px; font-weight:730; letter-spacing:.115em; line-height:1.5; }
.sidebar-brand-desc small { color:#8db8c7; font-size:9px; letter-spacing:.13em; margin-top:1px; }
.nav-link.active { background:linear-gradient(95deg,#0e9c9c55,#12648a40); border-left:3px solid #19d6c8; }

/* Login: original jetty photograph is sharp in the center and gently
   defocused at the outer boundaries using a second masked background. */
body.auth-body:has(.login-layout) { background:#08253c; }
.login-layout { min-height:100dvh; grid-template-columns:minmax(0,54%) minmax(420px,46%); position:relative; overflow:hidden; isolation:isolate; }
.login-layout::before,
.login-layout::after { content:""; position:absolute; inset:-28px; z-index:-1; pointer-events:none; background-image:url('teluk-timbau-jetty.webp'); background-repeat:no-repeat; background-size:auto 130%; background-position:left center; }
.login-layout::before { filter:blur(20px) brightness(.65); transform:scale(1.045); }
.login-layout::after { inset:0; background-position:left center; -webkit-mask-image:radial-gradient(ellipse 72% 95% at 25% 48%,#000 27%,transparent 100%); mask-image:radial-gradient(ellipse 72% 95% at 25% 48%,#000 27%,transparent 100%); }
.login-splash { min-height:760px; padding:35px clamp(28px,5vw,90px) 36px; background:linear-gradient(90deg,rgba(2,22,37,.69) 0%,rgba(3,38,60,.23) 84%,transparent 100%); }
.login-brand { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.login-logo { width:clamp(170px,16vw,238px); max-height:75px; }
.login-brand-caption { display:block; color:#dff6f5; font-weight:700; font-size:9px; letter-spacing:.13em; padding-top:4px; }
.login-brand-caption small { color:#c2dadd; margin-top:2px; font-size:8px; }
.hero-graphic { display:none!important; }
.login-copy { margin-bottom:clamp(50px,12vh,142px); text-shadow:0 2px 18px rgba(1,19,34,.25); }
.login-copy h1 { font-size:clamp(38px,4.5vw,68px); line-height:1.12; color:#fff; }
.login-copy em { color:#38e6cf; }
.login-copy p { color:#e5f3f5; font-size:14px; }
.login-tags span { background:rgba(3,35,57,.35); color:#edf7f9; border-color:rgba(198,236,236,.37); backdrop-filter:blur(9px); }
.login-foot { color:#d6e5ec; text-shadow:0 2px 16px #07182f; }
.login-form-area { background:linear-gradient(90deg,rgba(8,38,61,.05),rgba(5,31,50,.52)); padding:34px clamp(20px,4vw,65px) 75px; }
.login-card { max-width:480px; background:rgba(255,255,255,.965); border:1px solid rgba(255,255,255,.8); padding:clamp(27px,3.2vw,49px); border-radius:19px; box-shadow:0 19px 65px rgba(3,23,40,.24); backdrop-filter:blur(17px); }
.login-card h2 { font-size:clamp(24px,2.3vw,31px); }
.login-card>p { color:#728699; }
.login-copyright { color:#f5fcff; text-align:center; text-shadow:0 2px 8px rgba(3,26,43,.65); width:calc(100% - 40px); }
.login-form-area .login-support { color:#8a9fb0; }
.mobile-logo { display:none; }

/* App dashboard: the same real jetty photo is used in its masthead.
   A dark gradient protects text contrast, and edge blurring is subtle. */
.page-dashboard .page-heading { min-height:250px; padding:clamp(26px,3.7vw,50px); border-radius:20px; display:flex; align-items:flex-end; position:relative; overflow:hidden; isolation:isolate; color:white; box-shadow:0 16px 36px rgba(10,48,70,.12); background:#092b45; }
.page-dashboard .page-heading::before,
.page-dashboard .page-heading::after { content:""; position:absolute; z-index:-1; inset:-18px; pointer-events:none; background-image:linear-gradient(90deg,rgba(3,28,48,.95) 0%,rgba(5,39,62,.83) 36%,rgba(5,37,58,.34) 100%),url('teluk-timbau-jetty.webp'); background-size:cover,auto 165%; background-position:center,right 42%; background-repeat:no-repeat; }
.page-dashboard .page-heading::before { filter:blur(14px); transform:scale(1.03); }
.page-dashboard .page-heading::after { inset:0; -webkit-mask-image:radial-gradient(ellipse 80% 84% at 65% 48%,#000 28%,transparent 100%); mask-image:radial-gradient(ellipse 80% 84% at 65% 48%,#000 28%,transparent 100%); }
.page-dashboard .page-heading .eyebrow { color:#60eadd; }
.page-dashboard .page-heading h1 { font-size:clamp(29px,3.35vw,43px); color:white; }
.page-dashboard .page-heading p { color:#d9eaf0; max-width:540px; font-size:13px; }
.page-dashboard .page-heading .btn.primary { background:#079d9f; border-color:#08aba8; box-shadow:0 7px 20px #051a3040; }
.page-dashboard .page-heading>div { position:relative; z-index:1; }

/* Setup screen also uses the supplied logo, without the login image overlay. */
.install-brand { gap:18px; }
.setup-logo { width:175px; }
.install-brand span { font-size:11px; }
.install-card { max-width:none; padding:32px; border:1px solid #e0e8ee; backdrop-filter:none; box-shadow:0 15px 60px #2447590c; }

@media (max-width: 1060px) {
  .login-layout { grid-template-columns:minmax(0,50%) minmax(390px,50%); }
  .login-splash { padding-left:36px; padding-right:20px; }
  .login-card { padding:29px; }
  .login-brand-caption { flex-basis:100%; }
  .page-dashboard .page-heading { min-height:220px; }
}
@media (max-width: 700px) {
  .sidebar .brand { min-height:128px; padding-top:19px; margin-bottom:9px; }
  .sidebar-logo { width:180px; }
  .login-layout { display:flex; flex-direction:column; min-height:100dvh; }
  .login-layout::before,.login-layout::after { background-size:cover; background-position:50% 34%; }
  .login-splash { min-height:255px; padding:0; background:linear-gradient(180deg,rgba(3,29,47,.48),rgba(4,35,57,.12)); flex:0 0 auto; }
  .login-copy,.login-brand,.login-foot { display:none; }
  .login-form-area { flex:1; min-height:calc(100dvh - 255px); padding:0 16px 50px; margin-top:-48px; justify-content:flex-start; background:transparent; z-index:2; }
  .mobile-logo { display:flex; align-items:center; flex-direction:column; position:relative; top:auto; left:auto; margin:-151px 0 112px; gap:0; width:100%; text-align:center; color:#fff; }
  .mobile-logo img { height:auto; width:195px; object-fit:contain; }
  .mobile-logo small { display:block; color:#e5f6f9; font-size:9px; letter-spacing:.12em; font-weight:800; text-shadow:0 2px 9px #0a2f43; }
  .login-card { max-width:520px; width:100%; padding:26px 22px 28px; border-radius:18px; box-shadow:0 17px 48px #071f3760; }
  .login-card h2 { font-size:23px; }
  .login-copyright { position:static; margin-top:20px; font-size:9px; width:100%; }
  .page-dashboard .page-heading { min-height:230px; padding:24px 20px; border-radius:15px; align-items:flex-end; }
  .page-dashboard .page-heading::before,.page-dashboard .page-heading::after { background-size:cover,auto 170%; background-position:center,right 40%; }
  .page-dashboard .page-heading h1 { font-size:28px; }
  .page-dashboard .page-heading .heading-action { width:100%; }
  .install-brand { flex-wrap:wrap; gap:8px; }
  .setup-logo { width:165px; }
}
@media (prefers-reduced-transparency: reduce) {
  .login-card { background:#fff; backdrop-filter:none; }
}

/* Mobile: logo stays visible without opening the navigation drawer. */
.topbar-logo { display:none; }
@media(max-width:700px){
  .topbar-logo { display:flex; align-items:center; width:79px; flex-shrink:0; }
  .topbar-logo img { display:block; width:79px; height:auto; }
  .topbar .crumb { font-size:8px; letter-spacing:0; }
}