:root {
    --navy: #0d2f3d;
    --navy-soft: #174758;
    --teal: #0d826f;
    --mint: #dff2eb;
    --ink: #142432;
    --muted: #687983;
    --line: #dfe6e3;
    --paper: #ffffff;
    --canvas: #f4f6f3;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { color: var(--ink); background: var(--canvas); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(430px, 1.06fr) minmax(480px, .94fr); }
.welcome-panel { min-height: 100vh; position: relative; overflow: hidden; padding: clamp(32px, 5vw, 72px); color: #fff; background: radial-gradient(circle at 15% 15%, rgba(63, 153, 137, .28), transparent 34%), linear-gradient(145deg, #0b2d3b 0%, #123f4f 56%, #0d665c 140%); display: flex; flex-direction: column; }
.welcome-panel::before, .welcome-panel::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; pointer-events: none; }
.welcome-panel::before { width: 520px; height: 520px; right: -260px; top: -190px; }
.welcome-panel::after { width: 650px; height: 280px; left: -190px; bottom: -190px; transform: rotate(-8deg); box-shadow: 0 -35px 0 rgba(255,255,255,.025), 0 -70px 0 rgba(255,255,255,.018); }
.brand { width: fit-content; position: relative; z-index: 1; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 46px; height: 46px; border-radius: 14px; background: #e5f1ea; display: grid; place-items: center; transform: rotate(45deg); box-shadow: 0 10px 30px rgba(0,0,0,.16); }
.brand-mark i { width: 21px; height: 13px; border: 3px solid var(--teal); border-top: 0; border-left: 0; transform: rotate(45deg) skew(-15deg); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 21px; letter-spacing: -.4px; }
.brand small { margin-top: 2px; color: #9db8bf; font-size: 11px; letter-spacing: .5px; }
.welcome-copy { position: relative; z-index: 1; max-width: 680px; margin: auto 0; padding: 60px 0; }
.eyebrow { margin: 0 0 18px; color: #79c8b7; font-size: 12px; line-height: 1.5; letter-spacing: 1.6px; font-weight: 800; }
.welcome-copy h1 { max-width: 650px; margin: 0 0 22px; font-size: clamp(36px, 4.3vw, 61px); line-height: 1.08; letter-spacing: -2.3px; }
.welcome-copy > p:last-child { max-width: 610px; margin: 0; color: #b7cbd0; font-size: 17px; line-height: 1.75; }
.install-note { position: relative; z-index: 1; max-width: 700px; display: flex; align-items: flex-start; gap: 16px; padding: 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(7, 32, 42, .35); backdrop-filter: blur(8px); }
.install-icon { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #a6eadb; background: rgba(57, 156, 136, .22); font-size: 25px; font-weight: 800; }
.install-note h2 { margin: 0 0 6px; font-size: 16px; }
.install-note p { margin: 0; color: #b7cbd0; font-size: 13px; line-height: 1.65; }
.install-note strong { color: #fff; }

.login-panel { min-height: 100vh; padding: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f8faf8; }
.login-card { width: min(100%, 500px); padding: clamp(30px, 4vw, 48px); border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: 0 22px 60px rgba(19, 49, 60, .1); }
.secure-label { width: fit-content; padding: 7px 10px; border-radius: 30px; color: #15715f; background: var(--mint); font-size: 11px; letter-spacing: .8px; font-weight: 800; }
.secure-label span { margin-right: 5px; font-size: 9px; }
.login-card h2 { margin: 24px 0 9px; font-size: 29px; letter-spacing: -.7px; }
.login-card > p { margin: 0 0 30px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.login-card form > label, .password-row label { display: block; margin: 0 0 9px; font-size: 14px; font-weight: 750; }
.input-wrap { height: 54px; display: flex; align-items: center; gap: 11px; margin-bottom: 20px; padding: 0 15px; border: 1px solid #d8e0dd; border-radius: 11px; background: #fbfcfb; transition: border-color .18s, box-shadow .18s; }
.input-wrap:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(13, 130, 111, .1); }
.input-wrap > span { width: 22px; color: #789099; text-align: center; font-size: 15px; }
.input-wrap input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 15px; }
.input-wrap input::placeholder { color: #9da9ae; }
.password-row { display: flex; align-items: center; justify-content: space-between; }
.password-row a { color: var(--teal); text-decoration: none; font-size: 13px; font-weight: 700; }
.remember { display: flex !important; align-items: center; gap: 9px; width: fit-content; margin: 0 0 22px !important; color: #596b74; font-weight: 550 !important; cursor: pointer; }
.remember input { width: 18px; height: 18px; accent-color: var(--teal); }
.login-card form > button { width: 100%; height: 54px; border: 0; border-radius: 11px; color: #fff; background: var(--teal); cursor: pointer; font-weight: 800; box-shadow: 0 9px 22px rgba(13,130,111,.2); transition: transform .15s, background .15s; }
.login-card form > button:hover { background: #096e5e; transform: translateY(-1px); }
.login-card form > button span { margin-left: 8px; font-size: 19px; }
.form-error { margin: -12px 0 20px; padding: 12px 14px; border: 1px solid #efc7c3; border-radius: 10px; color: #a73e37; background: #fcede9; font-size: 13px; }
.form-notice { margin: -12px 0 20px; padding: 12px 14px; border: 1px solid #b8ddd2; border-radius: 10px; color: #146b5b; background: #e9f6f1; font-size: 13px; }
.access-info { display: flex; gap: 12px; margin-top: 27px; padding: 15px; border-radius: 12px; background: #f0f5f3; }
.access-info > span { flex: 0 0 auto; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: var(--teal); background: #dceee8; font-weight: 800; }
.access-info p { margin: 0; }
.access-info strong, .access-info small { display: block; }
.access-info strong { margin-bottom: 4px; font-size: 13px; }
.access-info small { color: var(--muted); font-size: 12px; line-height: 1.55; }
.login-panel footer { margin-top: 24px; color: #7e8d93; text-align: center; font-size: 11px; }

@media (max-width: 900px) {
    .login-shell { display: block; }
    .welcome-panel { min-height: auto; padding: 28px 24px; }
    .welcome-copy { padding: 64px 0 46px; }
    .welcome-copy h1 { font-size: clamp(34px, 9vw, 48px); }
    .install-note { margin-top: 0; }
    .login-panel { min-height: auto; padding: 45px 20px; }
}

@media (max-width: 520px) {
    .welcome-panel { padding: 23px 18px; }
    .welcome-copy { padding: 48px 0 34px; }
    .welcome-copy h1 { font-size: 34px; letter-spacing: -1.3px; }
    .welcome-copy > p:last-child { font-size: 15px; }
    .install-note { padding: 15px; }
    .login-panel { padding: 28px 14px; }
    .login-card { padding: 28px 20px; border-radius: 16px; }
    .login-card h2 { font-size: 25px; }
}

.setup-body { min-height: 100vh; padding: 34px 18px; background: linear-gradient(145deg, #0d2f3d 0 240px, #f4f6f3 240px); }
.setup-shell { width: min(100%, 980px); margin: 0 auto; }
.setup-header { display: flex; align-items: center; gap: 13px; margin: 0 0 28px; color: #fff; }
.setup-header > span { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 13px; color: var(--teal); background: #e5f1ea; font-size: 22px; font-weight: 900; }
.setup-header strong, .setup-header small { display: block; }
.setup-header strong { font-size: 18px; }.setup-header small { margin-top: 3px; color: #9eb8bf; font-size: 12px; }
.setup-card { padding: clamp(25px, 5vw, 54px); border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 22px 60px rgba(19,49,60,.14); }
.setup-card h1 { max-width: 700px; margin: 0 0 12px; font-size: clamp(27px, 4vw, 40px); letter-spacing: -1.2px; }
.setup-intro { max-width: 720px; margin: 0 0 30px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.setup-form fieldset { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 0 0 25px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; }
.setup-form legend { padding: 0 8px; font-size: 16px; font-weight: 800; }
.setup-form label { color: #53656e; font-size: 13px; font-weight: 750; }
.setup-form label.wide { grid-column: 1 / -1; }
.setup-form input { width: 100%; height: 49px; margin-top: 8px; padding: 0 13px; border: 1px solid #d8e0dd; border-radius: 9px; outline: none; background: #fbfcfb; }
.setup-form input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(13,130,111,.09); }
.setup-form > button { width: 100%; height: 54px; border: 0; border-radius: 11px; color: white; background: var(--teal); cursor: pointer; font-weight: 850; }
.panel-body { min-height: 100vh; display: flex; background: #f4f6f3; }
.panel-sidebar { width: 245px; min-height: 100vh; padding: 30px 22px; color: white; background: var(--navy); }
.panel-sidebar > strong, .panel-sidebar > small { display: block; }.panel-sidebar > strong { font-size: 20px; }.panel-sidebar > small { margin-top: 4px; color: #89a5ad; font-size: 11px; }
.panel-sidebar nav { margin-top: 45px; }.panel-sidebar a { display: block; padding: 12px; border-radius: 9px; color: #b4c8cd; text-decoration: none; font-size: 14px; }.panel-sidebar a.active { color: white; background: var(--navy-soft); }
.panel-main { flex: 1; }.panel-main > header { height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; border-bottom: 1px solid var(--line); background: white; }
.panel-main > header div { display: flex; align-items: center; gap: 10px; font-size: 13px; }.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #2ca481; box-shadow: 0 0 0 4px #e1f3ed; }
.panel-main > header button { padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; }
.panel-content { padding: 50px; }.panel-content h1 { margin: 0 0 10px; font-size: 32px; }.panel-content > p { color: var(--muted); }
.panel-content article { max-width: 760px; display: flex; gap: 15px; margin-top: 30px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 12px 34px rgba(25,51,61,.06); }
.panel-content article > span { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--teal); background: var(--mint); font-weight: 900; }.panel-content article h2 { margin: 0 0 7px; font-size: 17px; }.panel-content article p { margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 700px) { .setup-form fieldset { grid-template-columns: 1fr; padding: 17px; }.setup-form label.wide { grid-column: auto; }.panel-sidebar { display: none; }.panel-content { padding: 30px 20px; }.panel-main > header { padding: 0 20px; } }
.panel-message { max-width: 900px; margin-top: 22px; padding: 14px 16px; border-radius: 10px; font-size: 14px; }.panel-message.success { color: #146b5b; border: 1px solid #b8ddd2; background: #e9f6f1; }.panel-message.error { color: #a73e37; border: 1px solid #efc7c3; background: #fcede9; }
.pilot-card { max-width: 900px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 30px; padding: 24px; border-radius: 15px; color: white; background: linear-gradient(135deg, #103748, #126b61); box-shadow: 0 15px 35px rgba(16,55,72,.17); }.pilot-card h2 { margin: 0 0 6px; font-size: 22px; }.pilot-card p { margin: 0; color: #b7cbd0; font-size: 13px; }.pilot-card .eyebrow { color: #83d4c3; margin-bottom: 8px; }.pilot-card button { min-height: 43px; padding: 0 17px; border: 1px solid #67c6b3; border-radius: 9px; color: #0d5148; background: #a6eadb; cursor: pointer; font-weight: 850; }.pilot-state { padding: 8px 11px; border-radius: 30px; color: #a6eadb; background: rgba(3,29,35,.28); font-size: 11px; font-weight: 850; }
.vessel-preview-grid { max-width: 900px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 14px; }.panel-content .vessel-preview { max-width: none; display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 14px; margin: 0; padding: 19px; }.vessel-preview > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: white; background: #315b70; font-size: 25px; }.vessel-preview small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 1px; }.vessel-preview h3 { margin: 3px 0; font-size: 17px; }.vessel-preview p { margin: 0; color: var(--muted); font-size: 12px; }.vessel-preview b { padding: 6px 9px; border-radius: 20px; color: #9a681f; background: #f8ead7; font-size: 10px; }.vessel-preview b.ready { color: #16705f; background: #e0f1ea; }.panel-content .auth-ready { margin-top: 14px; }
@media (max-width: 700px) { .pilot-card { align-items: flex-start; flex-direction: column; }.vessel-preview-grid { grid-template-columns: 1fr; } }
.panel-main .back-link { color: var(--teal); text-decoration: none; font-size: 13px; font-weight: 750; }.users-content { padding: 42px; }.users-heading { display: flex; align-items: flex-end; justify-content: space-between; max-width: 1120px; margin-bottom: 24px; }.users-heading h1 { margin: 0 0 7px; font-size: 30px; }.users-heading p { margin: 0; color: var(--muted); font-size: 14px; }.users-heading > span { padding: 8px 11px; border-radius: 30px; color: #146b5b; background: #e0f1ea; font-size: 12px; font-weight: 850; }.users-layout { max-width: 1120px; display: grid; grid-template-columns: minmax(340px,.85fr) minmax(420px,1.15fr); gap: 18px; align-items: start; }.user-create-card,.user-list-card { border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: 0 12px 34px rgba(25,51,61,.06); }.user-create-card { padding: 24px; }.user-create-card h2,.list-head h2 { margin: 0; font-size: 17px; }.user-create-card > label { display: block; margin-top: 16px; color: #53656e; font-size: 13px; font-weight: 750; }.user-create-card input,.user-create-card select { width: 100%; height: 46px; margin-top: 7px; padding: 0 12px; border: 1px solid #d8e0dd; border-radius: 9px; outline: none; background: #fbfcfb; }.user-create-card input:focus,.user-create-card select:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(13,130,111,.09); }.vessel-checks { margin: 18px 0; padding: 15px; border: 1px solid var(--line); border-radius: 10px; }.vessel-checks legend { padding: 0 6px; font-size: 13px; font-weight: 800; }.vessel-checks label { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 8px; background: #f6f8f6; font-size: 13px; cursor: pointer; }.vessel-checks label + label { margin-top: 7px; }.vessel-checks input { width: 18px; height: 18px; margin: 0; accent-color: var(--teal); }.user-create-card > button { width: 100%; height: 49px; border: 0; border-radius: 10px; color: white; background: var(--teal); cursor: pointer; font-weight: 850; }.user-create-card > button:disabled { opacity: .45; cursor: not-allowed; }.list-head { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--line); }.list-head span { color: var(--muted); font-size: 12px; }.users-empty { padding: 55px 25px; color: var(--muted); text-align: center; font-size: 14px; }.account-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 16px 19px; border-bottom: 1px solid #edf0ee; }.account-row:last-child { border-bottom: 0; }.account-row > span { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 11px; color: white; background: #315b70; font-size: 11px; font-weight: 850; }.account-row strong,.account-row small,.account-row b { display: block; }.account-row strong { font-size: 13px; }.account-row small { margin-top: 3px; color: var(--muted); font-size: 11px; }.account-row b { margin-top: 5px; color: #3e718b; font-size: 10px; }.account-row i { padding: 5px 8px; border-radius: 20px; color: #16705f; background: #e0f1ea; font-size: 9px; font-style: normal; font-weight: 800; }
@media (max-width: 900px) { .users-content { padding: 30px 20px; }.users-layout { grid-template-columns: 1fr; }.users-heading { align-items: flex-start; flex-direction: column; gap: 15px; } }
.scope-banner { max-width: 900px; display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: center; margin-top: 28px; padding: 22px; border-radius: 15px; color: white; background: linear-gradient(135deg,#103748,#315b70); box-shadow: 0 15px 35px rgba(16,55,72,.14); }.scope-banner.vessel-only { background: linear-gradient(135deg,#103748,#126b61); }.scope-banner > span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 13px; color: #a6eadb; background: rgba(0,0,0,.2); font-size: 21px; font-weight: 900; }.scope-banner small { color: #83d4c3; font-size: 9px; font-weight: 850; letter-spacing: 1px; }.scope-banner h2 { margin: 3px 0 4px; font-size: 19px; }.scope-banner p { margin: 0; color: #b7cbd0; font-size: 12px; }.scope-banner > b { padding: 7px 10px; border-radius: 20px; color: #a6eadb; background: rgba(0,0,0,.2); font-size: 11px; }.scope-vessel-grid { max-width: 900px; display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 14px; }.panel-content .scope-vessel { max-width: none; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 13px; margin: 0; padding: 18px; }.scope-vessel > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: white; background: #315b70; font-size: 24px; }.scope-vessel small { color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: 1px; }.scope-vessel h3 { margin: 3px 0; font-size: 16px; }.scope-vessel p { margin: 0; color: var(--muted); font-size: 10px; }.scope-vessel button { border: 0; color: var(--teal); background: transparent; cursor: pointer; font-size: 11px; font-weight: 800; }.isolation-note { max-width: 900px; display: flex; align-items: center; gap: 13px; margin-top: 14px; padding: 15px; border: 1px solid #b8ddd2; border-radius: 11px; background: #e9f6f1; }.isolation-note > span { font-size: 20px; }.isolation-note p { margin: 0; }.isolation-note strong,.isolation-note small { display: block; }.isolation-note strong { color: #146b5b; font-size: 13px; }.isolation-note small { margin-top: 3px; color: #52736c; font-size: 11px; }
@media (max-width: 700px) { .scope-banner { grid-template-columns: 46px 1fr; }.scope-banner > b { grid-column: 1/-1; width: fit-content; }.scope-vessel-grid { grid-template-columns: 1fr; }.panel-content .scope-vessel { grid-template-columns: 40px 1fr; }.scope-vessel button { grid-column: 1/-1; text-align: left; } }
.vessel-open-link { color: var(--teal); text-decoration: none; font-size: 11px; font-weight: 800; }.equipment-page { padding: 40px; }.equipment-heading { max-width: 1250px; display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 24px; }.equipment-heading h1 { margin: 0 0 7px; font-size: 30px; }.equipment-heading p { margin: 0; color: var(--muted); font-size: 14px; }.equipment-heading form label { color: var(--muted); font-size: 11px; font-weight: 800; }.equipment-heading select { display: block; min-width: 220px; height: 43px; margin-top: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: white; }.equipment-layout { max-width: 1250px; display: grid; grid-template-columns: minmax(430px,.95fr) minmax(450px,1.05fr); gap: 18px; align-items: start; }.equipment-form,.equipment-list-card { border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: 0 12px 34px rgba(25,51,61,.06); }.equipment-form { padding: 24px; }.form-section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }.form-section-title > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: white; background: var(--teal); font-weight: 900; }.form-section-title h2 { margin: 0 0 3px; font-size: 17px; }.form-section-title p { margin: 0; color: var(--muted); font-size: 11px; }.maintenance-title { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }.equipment-fields { display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; }.equipment-fields label { color: #53656e; font-size: 12px; font-weight: 750; }.equipment-fields label.wide { grid-column: 1/-1; }.equipment-fields input,.equipment-fields select,.equipment-fields textarea { width: 100%; margin-top: 7px; padding: 0 11px; border: 1px solid #d8e0dd; border-radius: 9px; outline: none; background: #fbfcfb; }.equipment-fields input,.equipment-fields select { height: 44px; }.equipment-fields textarea { padding-top: 10px; resize: vertical; }.equipment-fields input:focus,.equipment-fields select:focus,.equipment-fields textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(13,130,111,.09); }.critical-check { grid-column: 1/-1; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 9px; background: #f8eee2; cursor: pointer; }.critical-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--orange); }.equipment-form > button { width: 100%; height: 50px; margin-top: 22px; border: 0; border-radius: 10px; color: white; background: var(--teal); cursor: pointer; font-weight: 850; }.equipment-list-head { padding: 20px; border-bottom: 1px solid var(--line); }.equipment-list-head h2 { margin: 0 0 3px; font-size: 17px; }.equipment-list-head p { margin: 0; color: var(--muted); font-size: 11px; }.equipment-empty { padding: 70px 25px; text-align: center; }.equipment-empty > span { width: 50px; height: 50px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 14px; color: var(--teal); background: var(--mint); font-size: 23px; }.equipment-empty strong { display: block; font-size: 15px; }.equipment-empty p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }.equipment-row { display: grid; grid-template-columns: 43px 1fr auto; gap: 13px; align-items: start; padding: 17px 19px; border-bottom: 1px solid #edf0ee; }.equipment-row:last-child { border-bottom: 0; }.equipment-row .equipment-glyph { width: 41px; height: 41px; display: grid; place-items: center; border-radius: 11px; color: var(--teal); background: var(--mint); }.equipment-row small { color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .7px; }.equipment-row h3 { margin: 3px 0; font-size: 14px; }.equipment-row p { margin: 0; color: var(--muted); font-size: 11px; }.equipment-row > i { padding: 5px 8px; border-radius: 20px; color: #b24c45; background: #fae4e1; font-size: 9px; font-style: normal; font-weight: 850; }.equipment-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }.equipment-tags b { padding: 4px 7px; border-radius: 20px; color: #3e718b; background: #e8f0f4; font-size: 9px; }
@media (max-width: 1000px) { .equipment-layout { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .equipment-page { padding: 28px 17px; }.equipment-heading { align-items: flex-start; flex-direction: column; }.equipment-heading form,.equipment-heading select { width: 100%; }.equipment-fields { grid-template-columns: 1fr; }.equipment-fields label.wide,.critical-check { grid-column: auto; } }
.maintenance-page { padding: 40px; }.maintenance-heading { max-width: 1450px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }.maintenance-heading h1 { margin: 0 0 7px; font-size: 30px; }.maintenance-heading p { margin: 0; color: var(--muted); font-size: 14px; }.maintenance-heading label { color: var(--muted); font-size: 11px; font-weight: 800; }.maintenance-heading select { display: block; min-width: 220px; height: 43px; margin-top: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: white; }.maintenance-metrics { max-width: 1450px; display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin: 22px 0 16px; }.maintenance-metrics article { display: flex; align-items: center; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: 0 8px 25px rgba(25,51,61,.05); }.maintenance-metrics article > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; font-weight: 900; }.maintenance-metrics small,.maintenance-metrics strong { display: block; }.maintenance-metrics small { color: var(--muted); font-size: 9px; font-weight: 850; }.maintenance-metrics strong { font-size: 23px; }.maintenance-metrics .overdue > span { color: #bd453e; background: #f9e4e1; }.maintenance-metrics .due > span { color: #ad651f; background: #f8ead7; }.maintenance-metrics .upcoming > span { color: #336b82; background: #e3eff3; }.maintenance-metrics .open > span { color: #16705f; background: #e0f1ea; }.maintenance-layout { max-width: 1450px; display: grid; grid-template-columns: minmax(520px,.94fr) minmax(560px,1.06fr); gap: 16px; align-items: start; }.plan-card,.orders-card { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: 0 12px 34px rgba(25,51,61,.06); }.maintenance-card-head { display: flex; align-items: center; justify-content: space-between; padding: 19px 20px; border-bottom: 1px solid var(--line); }.maintenance-card-head h2 { margin: 0 0 3px; font-size: 17px; }.maintenance-card-head p { margin: 0; color: var(--muted); font-size: 11px; }.maintenance-card-head > span { color: var(--muted); font-size: 11px; }.plan-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border-bottom: 1px solid #edf0ee; }.plan-row:last-child { border-bottom: 0; }.plan-status { text-align: center; }.plan-status > span { display: block; width: 11px; height: 11px; margin: 0 auto 5px; border-radius: 50%; background: #6f9bad; box-shadow: 0 0 0 5px #e8f0f4; }.plan-status small { color: var(--muted); font-size: 8px; font-weight: 850; }.plan-row.overdue .plan-status > span { background: #cf5149; box-shadow: 0 0 0 5px #f9e4e1; }.plan-row.due .plan-status > span { background: #d8863d; box-shadow: 0 0 0 5px #f8ead7; }.plan-row small { color: var(--muted); font-size: 8px; font-weight: 800; }.plan-row h3 { margin: 3px 0; font-size: 13px; }.plan-row p { margin: 0; color: var(--muted); font-size: 10px; }.plan-row > b { max-width: 150px; padding: 6px 8px; border-radius: 20px; color: #336b82; background: #e3eff3; font-size: 8px; }.plan-row button { padding: 8px 10px; border: 0; border-radius: 8px; color: white; background: var(--teal); cursor: pointer; font-size: 10px; font-weight: 800; }.order-flow-card { padding: 18px; border-bottom: 1px solid var(--line); }.order-flow-card:last-child { border-bottom: 0; }.order-flow-head { display: flex; justify-content: space-between; gap: 15px; }.order-flow-head small { color: var(--muted); font-size: 8px; font-weight: 800; }.order-flow-head h3 { margin: 4px 0 0; font-size: 14px; }.order-status { height: fit-content; padding: 5px 8px; border-radius: 20px; color: #336b82; background: #e3eff3; white-space: nowrap; font-size: 9px; font-weight: 850; }.order-status.in_progress { color: #ad651f; background: #f8ead7; }.order-status.completed { color: #16705f; background: #e0f1ea; }.flow-steps { display: grid; grid-template-columns: repeat(5,1fr); margin: 18px 0; }.flow-steps span { position: relative; color: #96a2a6; text-align: center; font-size: 8px; }.flow-steps span::before { content: ""; position: absolute; height: 2px; left: -50%; right: 50%; top: 5px; background: #dde4e1; }.flow-steps span:first-child::before { display: none; }.flow-steps i { position: relative; z-index: 1; display: block; width: 11px; height: 11px; margin: 0 auto 6px; border: 2px solid #c7d0cd; border-radius: 50%; background: white; }.flow-steps span.done { color: var(--teal); font-weight: 800; }.flow-steps span.done i { border-color: var(--teal); background: var(--teal); }.flow-steps span.done::before { background: var(--teal); }.order-action-form { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding-top: 15px; border-top: 1px solid var(--line); }.order-action-form label { color: var(--muted); font-size: 10px; font-weight: 750; }.order-action-form label.wide { grid-column: 1/-1; }.order-action-form input,.order-action-form textarea { width: 100%; margin-top: 6px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; }.order-action-form > button { grid-column: 1/-1; height: 40px; border: 0; border-radius: 9px; color: white; background: var(--teal); cursor: pointer; font-weight: 850; }.completed-summary { padding: 13px; border-radius: 10px; color: #146b5b; background: #e9f6f1; }.completed-summary strong,.completed-summary small { display: block; }.completed-summary p { margin: 7px 0; color: #52736c; font-size: 11px; }.completed-summary small { font-size: 9px; }
@media (max-width: 1100px) { .maintenance-layout { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .maintenance-page { padding: 28px 16px; }.maintenance-heading { align-items: flex-start; flex-direction: column; }.maintenance-heading form,.maintenance-heading select { width: 100%; }.maintenance-metrics { grid-template-columns: repeat(2,1fr); }.plan-row { grid-template-columns: 48px 1fr; }.plan-row > form,.plan-row > b { grid-column: 2; }.order-action-form { grid-template-columns: 1fr; }.order-action-form label.wide,.order-action-form > button { grid-column: auto; } }
.panel-main > header.context-header { min-height: 70px; height: auto; padding-top: 10px; padding-bottom: 10px; }.fixed-user-context,.vessel-account-context { display: flex; align-items: center; gap: 11px; }.fixed-user-context p,.vessel-account-context p { margin: 0; }.fixed-user-context small,.fixed-user-context strong,.fixed-user-context b,.vessel-account-context small,.vessel-account-context strong { display: block; }.fixed-user-context small,.vessel-account-context small { color: #7a8a91; font-size: 8px; letter-spacing: .9px; font-weight: 850; }.fixed-user-context strong,.fixed-user-context b,.vessel-account-context strong { margin-top: 2px; color: var(--ink); font-size: 13px; }.fixed-user-context b { color: var(--teal); }.fixed-user-context > i { width: 1px; height: 32px; margin: 0 5px; background: var(--line); }.context-avatar { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 50%; color: white; background: #315b70; font-size: 10px; font-weight: 850; }
@media (max-width: 600px) { .panel-main > header.context-header { align-items: flex-start; flex-direction: column; gap: 9px; }.fixed-user-context { width: 100%; flex-wrap: wrap; }.fixed-user-context > i { display: none; }.fixed-user-context p:last-child { width: 100%; padding: 8px 0 0 48px; border-top: 1px solid var(--line); }.context-header .back-link { margin-left: 48px; } }
.maintenance-gallery { display: grid; grid-template-columns: repeat(3,minmax(80px,1fr)); gap: 9px; margin-top: 13px; }.maintenance-gallery a { overflow: hidden; border: 1px solid #b8ddd2; border-radius: 9px; color: #146b5b; background: white; text-decoration: none; }.maintenance-gallery img { width: 100%; height: 92px; display: block; object-fit: cover; background: #dfe8e5; }.maintenance-gallery span { display: block; padding: 7px; text-align: center; font-size: 9px; font-weight: 800; }
@media (max-width: 600px) { .maintenance-gallery { grid-template-columns: repeat(2,1fr); } }
.archive-filter { display: grid; grid-template-columns: minmax(200px,1.5fr) 135px 135px auto auto; gap: 9px; align-items: end; padding: 14px 16px; border-bottom: 1px solid var(--line); background: #f8faf8; }.archive-tabs { grid-column: 1/-1; display: flex; gap: 6px; }.archive-tabs button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: white; cursor: pointer; font-size: 10px; font-weight: 800; }.archive-tabs button.active { color: white; border-color: var(--navy); background: var(--navy); }.archive-filter label { color: var(--muted); font-size: 9px; font-weight: 800; }.archive-filter input { width: 100%; height: 38px; margin-top: 5px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: white; outline: none; }.archive-filter input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,130,111,.08); }.archive-filter .filter-submit { height: 38px; padding: 0 13px; border: 0; border-radius: 8px; color: white; background: var(--teal); cursor: pointer; font-size: 10px; font-weight: 850; }.archive-filter > a { height: 38px; display: grid; place-items: center; color: var(--teal); text-decoration: none; font-size: 10px; font-weight: 800; }.archive-pagination { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 18px; border-top: 1px solid var(--line); background: #fafbf9; }.archive-pagination a { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--teal); background: white; text-decoration: none; font-size: 10px; font-weight: 800; }.archive-pagination a.disabled { opacity: .35; pointer-events: none; }.archive-pagination span { color: var(--muted); font-size: 10px; font-weight: 750; }
@media (max-width: 760px) { .archive-filter { grid-template-columns: 1fr 1fr; }.archive-search,.archive-tabs { grid-column: 1/-1; }.archive-filter .filter-submit,.archive-filter > a { width: 100%; } }
.certificate-page { padding: 40px; }.certificate-heading { max-width: 1250px; display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}.certificate-heading h1{margin:0 0 7px;font-size:30px}.certificate-heading p{margin:0;color:var(--muted);font-size:14px}.certificate-heading label{color:var(--muted);font-size:10px;font-weight:800}.certificate-heading select{display:block;min-width:220px;height:42px;margin-top:6px;border:1px solid var(--line);border-radius:8px;background:white}.certificate-metrics{max-width:1250px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0 16px}.certificate-metrics a{padding:17px;border:1px solid var(--line);border-radius:12px;background:white;text-decoration:none;box-shadow:0 8px 25px rgba(25,51,61,.05)}.certificate-metrics small,.certificate-metrics strong{display:block}.certificate-metrics small{color:var(--muted);font-size:9px;font-weight:850}.certificate-metrics strong{color:var(--ink);font-size:24px}.certificate-metrics a.expired{border-left:4px solid #cf5149}.certificate-metrics a.urgent{border-left:4px solid #d8863d}.certificate-metrics a.upcoming{border-left:4px solid #3e718b}.certificate-metrics a.valid{border-left:4px solid #0d826f}.certificate-layout{max-width:1250px;display:grid;grid-template-columns:minmax(380px,.8fr) minmax(500px,1.2fr);gap:17px;align-items:start}.certificate-form,.certificate-list{border:1px solid var(--line);border-radius:14px;background:white;box-shadow:0 12px 34px rgba(25,51,61,.06)}.certificate-form{padding:22px}.certificate-form h2{margin:0 0 17px;font-size:17px}.certificate-form>div{display:grid;grid-template-columns:1fr 1fr;gap:14px}.certificate-form label{color:#53656e;font-size:11px;font-weight:750}.certificate-form label.wide{grid-column:1/-1}.certificate-form input,.certificate-form textarea{width:100%;margin-top:6px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fbfcfb}.certificate-form input{height:42px}.certificate-form textarea{padding-top:9px}.certificate-form>button{width:100%;height:46px;margin-top:18px;border:0;border-radius:9px;color:white;background:var(--teal);font-weight:850;cursor:pointer}.certificate-list-head{padding:18px;border-bottom:1px solid var(--line)}.certificate-list-head h2{margin:0 0 12px;font-size:17px}.certificate-list-head form{display:grid;grid-template-columns:1fr 135px auto;gap:7px}.certificate-list-head input,.certificate-list-head select{height:38px;padding:0 9px;border:1px solid var(--line);border-radius:8px}.certificate-list-head button{border:0;border-radius:8px;color:white;background:var(--teal);font-size:10px;font-weight:800}.certificate-row{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:16px 18px;border-bottom:1px solid #edf0ee}.certificate-row:last-child{border-bottom:0}.certificate-state{width:37px;height:37px;display:grid;place-items:center;border-radius:10px;font-weight:900}.certificate-state.expired{color:#bd453e;background:#f9e4e1}.certificate-state.urgent{color:#ad651f;background:#f8ead7}.certificate-state.upcoming{color:#336b82;background:#e3eff3}.certificate-state.valid{color:#16705f;background:#e0f1ea}.certificate-row small{color:var(--muted);font-size:8px;font-weight:800}.certificate-row h3{margin:3px 0;font-size:13px}.certificate-row p{margin:0;color:var(--muted);font-size:10px}.certificate-row>div:last-child{text-align:right}.certificate-badge{display:block;padding:5px 7px;border-radius:20px;font-size:8px}.certificate-badge.expired{color:#bd453e;background:#f9e4e1}.certificate-badge.urgent{color:#ad651f;background:#f8ead7}.certificate-badge.upcoming{color:#336b82;background:#e3eff3}.certificate-badge.valid{color:#16705f;background:#e0f1ea}.certificate-row a{display:block;margin-top:7px;color:var(--teal);font-size:9px;font-weight:800;text-decoration:none}
@media(max-width:1000px){.certificate-layout{grid-template-columns:1fr}}@media(max-width:700px){.certificate-page{padding:28px 16px}.certificate-heading{align-items:flex-start;flex-direction:column}.certificate-heading form,.certificate-heading select{width:100%}.certificate-metrics{grid-template-columns:1fr 1fr}.certificate-form>div{grid-template-columns:1fr}.certificate-form label.wide{grid-column:auto}.certificate-list-head form{grid-template-columns:1fr}.certificate-row{grid-template-columns:36px 1fr}.certificate-row>div:last-child{grid-column:2;text-align:left}}
.stock-page{padding:40px}.stock-heading{max-width:1300px;display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px}.stock-heading h1{margin:0 0 7px;font-size:30px}.stock-heading p{margin:0;color:var(--muted);font-size:14px}.stock-heading select{min-width:220px;height:42px;border:1px solid var(--line);border-radius:8px;background:white}.stock-metrics{max-width:1300px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.stock-metrics article{padding:17px;border:1px solid var(--line);border-radius:12px;background:white}.stock-metrics article.critical{border-left:4px solid #cf5149}.stock-metrics small,.stock-metrics strong{display:block}.stock-metrics small{color:var(--muted);font-size:9px;font-weight:850}.stock-metrics strong{font-size:23px}.stock-layout{max-width:1300px;display:grid;grid-template-columns:minmax(380px,.8fr) minmax(540px,1.2fr);gap:17px;align-items:start}.stock-form,.stock-list{border:1px solid var(--line);border-radius:14px;background:white;box-shadow:0 12px 34px rgba(25,51,61,.06)}.stock-form{padding:22px}.stock-form h2{margin:0 0 16px;font-size:17px}.stock-form>div{display:grid;grid-template-columns:1fr 1fr;gap:13px}.stock-form label{color:#53656e;font-size:11px;font-weight:750}.stock-form label.wide{grid-column:1/-1}.stock-form input,.stock-form select,.stock-form textarea{width:100%;margin-top:6px;padding:0 9px;border:1px solid var(--line);border-radius:8px}.stock-form input,.stock-form select{height:41px}.stock-form textarea{min-height:65px;padding-top:8px}.stock-form>button{width:100%;height:46px;margin-top:17px;border:0;border-radius:9px;color:white;background:var(--teal);font-weight:850}.stock-list-head{padding:18px;border-bottom:1px solid var(--line)}.stock-list-head h2{margin:0 0 11px;font-size:17px}.stock-list-head form{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center}.stock-list-head input[type=text],.stock-list-head input:not([type]){height:38px;border:1px solid var(--line);border-radius:8px;padding:0 9px}.stock-list-head label{font-size:10px}.stock-list-head button{height:38px;border:0;border-radius:8px;color:white;background:var(--teal)}.stock-item{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:16px 18px;border-bottom:1px solid #edf0ee}.stock-item.critical{background:#fff9f8}.stock-item small{color:var(--muted);font-size:8px;font-weight:800}.stock-item h3{margin:3px 0;font-size:13px}.stock-item p{margin:0;color:var(--muted);font-size:10px}.stock-item>b{padding:5px 8px;border-radius:20px;color:#16705f;background:#e0f1ea;font-size:9px}.stock-item.critical>b{color:#bd453e;background:#f9e4e1}.stock-item form{grid-column:1/-1;display:grid;grid-template-columns:100px 110px 1fr auto;gap:7px;padding-top:10px;border-top:1px solid var(--line)}.stock-item form select,.stock-item form input{height:36px;border:1px solid var(--line);border-radius:7px;padding:0 8px}.stock-item form button{border:0;border-radius:7px;color:white;background:var(--teal);font-size:10px;font-weight:800}
@media(max-width:1000px){.stock-layout{grid-template-columns:1fr}}@media(max-width:700px){.stock-page{padding:28px 16px}.stock-heading{align-items:flex-start;flex-direction:column;gap:12px}.stock-heading form,.stock-heading select{width:100%}.stock-metrics{grid-template-columns:1fr}.stock-form>div{grid-template-columns:1fr}.stock-form label.wide{grid-column:auto}.stock-item{grid-template-columns:1fr auto}.stock-item form{grid-template-columns:1fr 1fr}.stock-item form input:nth-of-type(2),.stock-item form button{grid-column:1/-1}}