* { box-sizing: border-box; }

:root{
  --navy: #0b1f3a;
  --panel: rgba(255,255,255,.78);
  --border: rgba(11,31,58,.18);
  --shadow: 0 1.2rem 3rem rgba(0,0,0,.14);
  --shadow2: 0 .8rem 2.2rem rgba(0,0,0,.12);
  --radius: 1.1rem;
  --pad2: 1.4rem;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --blue-rows: #0a46c5;
  --blue-head: #083493;
  --blue-hover: rgba(10,70,197,.10);
  --blue-focus: rgba(0,140,255,.18);
}

html, body { height: 100%; }

body{
  margin: 0;
  font-family: var(--font);
  line-height: 1.4;
  color: var(--navy);
  background: radial-gradient(120rem 70rem at 15% 10%, rgba(0,180,255,.34), transparent 55%),
              radial-gradient(90rem 60rem at 85% 30%, rgba(0,255,214,.22), transparent 55%),
              linear-gradient(180deg, rgba(0,22,60,.06), rgba(255,255,255,.92));
}

.wrap{
  width: min(58rem, calc(100% - 2rem));
  margin: 0 auto;
}

.hero{
  padding: clamp(2.2rem, 3.8vw, 4rem) 0 1.2rem;
}

h1{
  margin: 0 0 .55rem;
  font-size: clamp(1.65rem, 3.6vw, 2.4rem);
  letter-spacing: .01em;
}

h2{
  margin: 0 0 .9rem;
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  font-weight: 650;
  opacity: .95;
}

.lead{
  margin: 0 0 .6rem;
  font-size: clamp(1rem, 2.3vw, 1.1rem);
}

.seo{
  margin: 0;
  background: rgba(255,255,255,.42);
  border: 1px solid var(--border);
  padding: .85rem 1rem;
  border-radius: .9rem;
  box-shadow: 0 .9rem 2.6rem rgba(0,0,0,.08);
}

.panel{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--pad2);
  backdrop-filter: blur(8px);
}

.panel h3{
  margin: 0 0 1rem;
  font-size: clamp(1.15rem, 2.6vw, 1.35rem);
  text-align: center;
}

.msg{
  width: min(34rem, 100%);
  margin: 0 auto 1rem;
  padding: .85rem 1rem;
  border-radius: .9rem;
  border: 1px solid var(--border);
  box-shadow: 0 .8rem 2.2rem rgba(0,0,0,.08);
  text-align: center;
  font-weight: 650;
}

.msg.ok{ background: rgba(0,210,170,.14); }
.msg.bad{ background: rgba(255,50,96,.12); }

.grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: end;
}

.field{ text-align: center; }

label{
  display: block;
  margin: 0 0 .45rem;
  font-weight: 700;
  font-size: 1rem;
}

input{
  width: 100%;
  max-width: 18rem;
  padding: .85rem 1rem;
  border-radius: .95rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  color: var(--navy);
  font-size: 1.05rem;
  outline: none;
  box-shadow: 0 .8rem 2rem rgba(0,0,0,.06);
}

.text-left{ text-align: left; }
.text-right{ text-align: right; }

input:focus{
  border-color: rgba(0,120,255,.55);
  box-shadow: 0 0 0 .25rem rgba(0,120,255,.14), 0 .8rem 2rem rgba(0,0,0,.06);
}

.actions{
  display: flex;
  gap: .9rem;
  justify-content: center;
  margin-top: 1.1rem;
  flex-wrap: wrap;
}

.btn{
  border: 0;
  border-radius: 999rem;
  padding: .9rem 1.2rem;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
  min-width: 10rem;
}

.btn:active{ transform: translateY(1px) scale(.99); }

.btn-primary{
  color: #fff;
  background: linear-gradient(90deg, rgba(0,140,255,1), rgba(0,210,255,1));
  box-shadow: 0 .9rem 2.6rem rgba(0,140,255,.35), 0 .25rem .8rem rgba(0,0,0,.12);
  filter: saturate(1.05);
}

.btn-primary:hover{
  box-shadow: 0 1.1rem 3.1rem rgba(0,140,255,.44), 0 .35rem 1rem rgba(0,0,0,.14);
  transform: translateY(-1px);
}

.btn-reset{
  color: #fff;
  background: linear-gradient(90deg, rgba(130,70,255,1), rgba(190,90,255,1));
  box-shadow: 0 .9rem 2.6rem rgba(160,90,255,.35), 0 .25rem .8rem rgba(0,0,0,.12);
}

.btn-reset:hover{
  box-shadow: 0 1.1rem 3.1rem rgba(160,90,255,.44), 0 .35rem 1rem rgba(0,0,0,.14);
  transform: translateY(-1px);
}

.results{
  margin: 1.2rem 0 0;
  background: rgba(255,255,255,.62);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: var(--pad2);
  backdrop-filter: blur(8px);
}

.results h3{
  margin: 0 0 .25rem;
  text-align: center;
  font-size: clamp(1.15rem, 2.6vw, 1.35rem);
}

.results-sub{
  text-align: center;
  font-weight: 650;
  opacity: .9;
  margin: 0 0 .7rem;
}

.results-meta{
  text-align: center;
  font-weight: 800;
  opacity: .95;
  margin: 0 0 .9rem;
  color: var(--blue-head);
}

.tableWrap{
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.85);
}

.table{
  width: 100%;
  border-collapse: collapse;
}

th, td{
  padding: .85rem 1rem;
  border-bottom: 1px solid rgba(11,31,58,.12);
  vertical-align: middle;
}

th{
  text-align: left;
  font-size: 1rem;
  background: rgba(0,40,90,.06);
  color: var(--blue-head);
}

td{
  font-size: 1.03rem;
  color: var(--blue-rows);
  font-weight: 560;
}

.num{
  text-align: right;
  white-space: nowrap;
}

.cell-left{ text-align: left; }

.placeholder{
  text-align: center;
  padding: 1.1rem 1rem;
  opacity: .85;
  color: var(--navy);
  font-weight: 650;
}

.thbtn{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--blue-head);
  font-weight: 900;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.thbtn-right{ justify-content: flex-end; width: 100%; }

.thbtn:hover{
  text-decoration: underline;
  text-underline-offset: .2rem;
}

.sortmark{
  font-size: .95em;
  opacity: .95;
}

.rowlink{
  transition: transform .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.rowlink:hover{
  background: var(--blue-hover);
  box-shadow: inset 0 0 0 999rem rgba(0,140,255,.03);
}

.rowlink:focus-within{
  background: var(--blue-focus);
  box-shadow: inset 0 0 0 .2rem rgba(0,140,255,.28);
}

.rowa{
  display: block;
  color: inherit;
  text-decoration: none;
  outline: none;
}

.rowa:hover{
  text-decoration: underline;
  text-underline-offset: .2rem;
}

.rowa-min{
  display: inline-block;
  width: 100%;
}

.memo{
  margin-top: 1rem;
  padding: .9rem 1rem;
  border-radius: .9rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.55);
}

.footer{
  margin-top: 1.5rem;
  padding: 1.6rem 0 2.2rem;
  opacity: .98;
  background: rgba(255,255,255,.35);
  border-top: 1px solid rgba(11,31,58,.14);
}

.footer-h{
  margin: 0 0 .45rem;
  font-size: clamp(1.15rem, 2.6vw, 1.35rem);
  color: var(--blue-head);
}

.footer p{
  margin: 0;
  font-weight: 650;
}

.col-ship{ width: 30%; }
.col-operator{ width: 26%; }
.col-imo{ width: 12%; }
.col-type{ width: 16%; }
.col-flag{ width: 16%; }
.col-atsea{ width: 10%; }

@media (max-width: 60rem){
  .grid{ grid-template-columns: 1fr; }
  input{ max-width: 100%; }
}

@media (max-width: 48rem){
  .results{ padding: 1.15rem; }
  th, td{ padding: .75rem .85rem; }
  td{ font-size: 1.0rem; }
}

@media (max-width: 40rem){
  .results{ padding: 1rem; }
  th, td{ padding: .65rem .7rem; }
  td{ font-size: .98rem; }
  .memo{ padding: .8rem .9rem; }
}

@media (max-width: 34rem){
  .wrap{ width: min(58rem, calc(100% - 1.2rem)); }
  .btn{ width: 100%; min-width: 0; }
  .results{ padding: .9rem; }
  th, td{ padding: .55rem .6rem; }
  td{ font-size: .95rem; }
  .memo{ padding: .75rem .85rem; }

  .col-type, .col-flag, .col-atsea, .col-imo{
    display: none;
  }

  th.col-type, th.col-flag, th.col-atsea, th.col-imo{
    display: none;
  }
}

@media (max-width: 30rem){
  .results{ padding: .8rem; }
  th, td{ padding: .5rem .55rem; }
  td{ font-size: .93rem; }
}
.shiplinks {
    width: 100%;
    padding: 1rem 0.8rem;
}

.shiplinks__inner {
    max-width: 50rem;
    margin: 0 auto;
    text-align: center;
    line-height: 1.4;
}

.shiplinks__title {
    margin: 0 0 0.7rem 0;
    font-size: clamp(1.1rem, 2.6vw, 1.45rem);
    font-weight: 700;
    color: navy;
    letter-spacing: 0.02em;
}

.shiplinks__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem 0.6rem;
}

.shiplinks__a {
    display: inline-block;
    text-decoration: none;
    color: navy;
    font-size: 1rem;
    padding: 0.3rem 0.5rem;
    border-radius: 0.55rem;
    transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease, text-decoration-color 120ms ease;
    outline: none;
}

.shiplinks__a:hover,
.shiplinks__a:focus-visible {
    background-color: rgba(10, 55, 110, 0.10);
    box-shadow: 0 0.25rem 0.9rem rgba(10, 55, 110, 0.18);
    transform: translateY(-1px);
    text-decoration: underline;
    text-decoration-thickness: 0.12rem;
    text-underline-offset: 0.2rem;
    text-decoration-color: rgba(10, 55, 110, 0.55);
}

.shiplinks__sep {
    color: rgba(10, 55, 110, 0.65);
    font-size: 0.95rem;
    line-height: 1;
    user-select: none;
}

@media (max-width: 40rem) {
    .shiplinks__inner {
        max-width: 37.5rem;
    }

    .shiplinks__a {
        width: auto;
        max-width: 100%;
    }
}