@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#1c1b1f;
  --muted:#6f6d76;
  --bg:#faf9f7;
  --surface:#ffffff;
  --line:#e6e3dd;
  --line-strong:#19181c;
  --accent:#ef4a5f;
  --accent-soft:#fde8ea;
  --ok:#1c8a53;
  --bad:#c23b3b;
  --radius:12px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:15px;
  line-height:1.45;
}

h1,h2,h3{
  font-family:'Space Grotesk', sans-serif;
  margin:0;
  letter-spacing:-0.01em;
}

a{color:var(--ink);}

.wrap{
  max-width:920px;
  margin:0 auto;
  padding:0 20px 70px;
}

/* header */
.site-head{
  padding:22px 20px 8px;
}
.site-head-inner{
  max-width:920px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.site-title{
  font-size:clamp(1.5rem, 4vw, 2rem);
  font-weight:700;
  display:flex;
  align-items:center;
  gap:9px;
}
.site-title i{font-size:0.85em;color:var(--accent);}

.admin-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:50%;
  color:var(--muted);
  text-decoration:none;
  border:1px solid var(--line);
}
.admin-link:hover{color:var(--ink); border-color:var(--ink);}
.admin-link i{font-size:16px;}

/* section headings */
.section{
  margin-top:34px;
}
.section-head{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:14px;
}
.section-head i{color:var(--accent); font-size:1.15rem;}
.section-head h2{font-size:clamp(1.05rem,2.6vw,1.3rem);}

/* form */
.panel{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  background:var(--surface);
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:12px;
}
@media (max-width:520px){ .form-row{grid-template-columns:1fr;} }

label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  margin-bottom:6px;
}
input[type=text], input[type=password], input[type=search]{
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg);
  padding:10px 12px;
  font-family:'Inter',sans-serif;
  font-size:14px;
  color:var(--ink);
}
input:focus{outline:2px solid var(--accent); outline-offset:1px;}

.btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:var(--ink);
  color:#fff;
  padding:10px 16px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:13.5px;
  cursor:pointer;
}
.btn:hover{background:var(--accent); border-color:var(--accent); color:#fff;}
.btn.ghost{background:transparent; color:var(--ink);}
.btn.ghost:hover{background:var(--ink); color:#fff;}
.btn.small{padding:7px 11px; font-size:12.5px;}
.btn.accent{background:var(--accent); border-color:var(--accent); color:#fff;}
.btn.danger{background:var(--bad); color:#fff; border-color:var(--bad);}
.btn:disabled{opacity:0.35; cursor:not-allowed;}

.hint{font-size:12.5px; color:var(--muted); margin-top:10px;}
.ok-msg{
  margin-top:12px;
  border:1px solid var(--ok);
  color:var(--ok);
  border-radius:8px;
  padding:8px 12px;
  font-size:13px;
  display:flex;
  gap:8px;
  align-items:center;
}

/* search */
.search-bar{
  display:flex;
  gap:10px;
  margin-bottom:18px;
}
.search-bar input{flex:1;}

/* top ships */
.berths{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
}
@media (max-width:760px){ .berths{grid-template-columns:repeat(2,1fr);} }
@media (max-width:420px){ .berths{grid-template-columns:1fr;} }

.berth{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 13px;
  background:var(--surface);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:118px;
}
.berth.filled{border-color:var(--ink);}
.berth-rank{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:1.6rem;
  color:var(--accent);
  line-height:1;
}
.berth-names{
  font-size:13.5px;
  font-weight:600;
  margin:7px 0 1px;
  word-break:break-word;
}
.berth-title{
  font-size:11.5px;
  color:var(--muted);
  margin-bottom:6px;
}
.berth-stats{
  display:flex;
  gap:8px;
  font-size:12px;
  align-items:center;
  margin-top:8px;
}
.berth-empty{
  color:var(--muted);
  font-size:12px;
  margin-top:14px;
}

/* ship list */
.manifest{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
}
.manifest-row{
  display:grid;
  grid-template-columns:34px 1fr auto;
  gap:14px;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}
.manifest-row:last-child{border-bottom:none;}
.m-idx{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  color:var(--muted);
  font-size:14px;
}
.m-names{font-weight:600; font-size:13.5px;}
.m-title{font-size:11.5px; color:var(--muted);}
.m-stats{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:12px;
}
.vote-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:1px solid var(--line);
  border-radius:20px;
  background:transparent;
  padding:5px 10px;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:12px;
  color:var(--ink);
}
.vote-btn.star.active{background:var(--accent-soft); border-color:var(--accent); color:var(--accent);}
.vote-btn.dislike.active{background:#fbe9e9; border-color:var(--bad); color:var(--bad);}
.vote-btn:hover{border-color:var(--accent);}
.vote-btn:disabled{opacity:0.5; cursor:not-allowed;}

.empty-state{
  padding:28px 14px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

/* admin specific */
.admin-tabs{
  display:flex;
  gap:8px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.tab-btn{
  border:1px solid var(--line);
  background:transparent;
  padding:8px 14px;
  font-family:'Inter',sans-serif;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  border-radius:20px;
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--ink);
}
.tab-btn.active{background:var(--ink); color:#fff; border-color:var(--ink);}
.tab-count{color:var(--muted);}
.tab-btn.active .tab-count{color:#cfcdd4;}

.admin-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:12px;
  background:var(--surface);
}
.admin-card-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-start;
}
.admin-names{font-weight:700; font-size:15px;}
.admin-meta{font-size:11.5px; color:var(--muted); margin-top:3px;}
.admin-actions{
  display:flex;
  gap:8px;
  margin-top:12px;
  flex-wrap:wrap;
  align-items:center;
}
.rename-row{
  display:flex;
  gap:8px;
  margin-top:10px;
  align-items:center;
}
.rename-row input{flex:1;}

.login-box{
  max-width:340px;
  margin:70px auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px;
  background:var(--surface);
  text-align:center;
}
.login-box i{font-size:1.8rem; color:var(--accent);}
.login-box h2{margin:12px 0 18px;}
.login-err{
  color:var(--bad);
  font-size:12px;
  margin-top:10px;
  min-height:16px;
}