:root {
  --navy: #071923;
  --navy2: #092a35;
  --mint: #7ce0d5;
  --mint2: #b8f3ea;
  --sand: #e9c77d;
  --coral: #ff7c6b;
  --paper: #eef4f3;
  --text: #17353d;
  --muted: #71888b;
  --line: #d6e3e0;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Inter, "Segoe UI", Arial, sans-serif; letter-spacing: 0; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 8vw;
  padding: 7vw;
  color: #eff8f5;
  background:
    radial-gradient(circle at 18% 78%, rgba(55, 183, 176, .18), transparent 30%),
    radial-gradient(circle at 74% 12%, rgba(233, 199, 125, .10), transparent 25%),
    var(--navy);
}

.login-screen.photo-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(7, 25, 35, .96) 0%, rgba(7, 25, 35, .86) 44%, rgba(7, 25, 35, .28) 100%),
    url("assets/tuna-hero.png") center / cover no-repeat;
}

.login-screen.photo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(7, 25, 35, .70), transparent 42%),
    linear-gradient(90deg, rgba(7, 25, 35, .44), transparent 72%);
}

.login-screen.photo-hero > * {
  position: relative;
  z-index: 1;
}

.brand { display: flex; align-items: center; gap: 12px; font-weight: 850; }
.brand small { display: block; margin-top: 2px; color: #86a3a3; font-size: 8px; letter-spacing: .18em; }
.brand-mark { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; color: #05202a; background: var(--mint); font-weight: 900; }
.eyebrow { margin: 92px 0 20px; color: var(--mint2); font-size: 11px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.login-copy h1 { max-width: 760px; margin: 0; font-family: Georgia, serif; font-size: clamp(44px, 6vw, 78px); font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.login-copy p { max-width: 620px; color: #aec5c2; font-size: 17px; line-height: 1.7; }
.trust { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px; color: #86a5a4; font-size: 10px; }

.login-card {
  width: min(430px, 100%);
  justify-self: end;
  padding: 30px;
  border: 1px solid rgba(124, 224, 213, .2);
  border-radius: 24px;
  background: rgba(10, 39, 50, .86);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}
.login-card-head { display: flex; justify-content: space-between; color: #779696; font-size: 9px; letter-spacing: .13em; }
.login-card-head b { color: var(--sand); }
.login-card h2 { margin: 25px 0 4px; font-family: Georgia, serif; font-size: 32px; font-weight: 500; }
.login-card p { color: #88a5a5; font-size: 11px; }
.login-card label { display: block; margin: 13px 0 7px; color: #bfd0cd; font-size: 10px; }
.login-card input { width: 100%; padding: 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; outline: 0; color: #fff; background: rgba(255,255,255,.04); }
.login-card details { margin-top: 14px; color: #8ba6a6; font-size: 10px; }
.form-error { margin-top: 10px; color: #ff9c8e; font-size: 11px; }

.primary, .secondary, .logout {
  border: 0;
  border-radius: 11px;
  padding: 12px 16px;
  font-weight: 850;
}
.primary { color: #06212a; background: var(--mint); }
.secondary { color: var(--mint2); background: transparent; border: 1px solid rgba(124,224,213,.24); }
.login-card .primary { width: 100%; margin-top: 20px; }

.app { min-height: 100vh; display: grid; grid-template-columns: 242px 1fr; color: var(--text); background: var(--paper); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 20px 16px; color: #eaf5f2; background: #08232e; }
.brand.compact { padding: 0 7px 20px; font-size: 12px; }
.brand.compact .brand-mark { width: 35px; height: 35px; border-radius: 10px; }
.tenant-card { padding: 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(255,255,255,.035); }
.tenant-card small { display: block; color: #718f91; font-size: 8px; letter-spacing: .13em; }
.tenant-card strong { display: block; margin: 6px 0; color: #fff; font-family: Georgia, serif; font-size: 17px; font-weight: 500; }
.tenant-card span { color: var(--mint); font-size: 9px; text-transform: uppercase; }
.main-nav { display: grid; gap: 4px; margin-top: 18px; }
.main-nav button { display: flex; gap: 10px; align-items: center; padding: 11px 13px; border: 0; border-radius: 10px; color: #91acab; background: transparent; text-align: left; font-size: 11px; }
.main-nav button.active { color: #06212a; background: var(--mint); font-weight: 850; }
.logout { width: 100%; margin-top: auto; border: 1px solid rgba(255,255,255,.12); color: #b9cdca; background: transparent; font-size: 10px; }

.main { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 72px; display: flex; justify-content: space-between; align-items: center; padding: 12px 26px; border-bottom: 1px solid var(--line); background: rgba(238,244,243,.94); backdrop-filter: blur(14px); }
.topbar h2 { margin: 0; font-family: Georgia, serif; font-size: 23px; font-weight: 500; }
.topbar p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.user-box { display: flex; align-items: center; gap: 9px; color: #536e72; font-size: 10px; }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #06212a; background: #bcebe4; font-weight: 850; }
.demo-warning { display: flex; justify-content: space-between; gap: 12px; margin: 16px 26px 0; padding: 10px 13px; border: 1px solid #dec989; border-radius: 11px; color: #6d5724; background: #fff8df; font-size: 9px; }
.content { padding: 16px 26px 38px; }
.view { display: none; }
.view.active { display: block; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 13px; }
.stat, .card, .record { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 20px rgba(25,58,65,.04); }
.stat { padding: 16px; }
.stat small { color: #7c9294; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.stat strong { display: block; margin: 7px 0 3px; font-family: Georgia, serif; font-size: 25px; font-weight: 500; }
.dashboard-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 13px; }
.card-head { display: flex; justify-content: space-between; align-items: center; padding: 15px 17px; border-bottom: 1px solid #e2eae8; }
.card-head h3 { margin: 0; font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.mini-map { position: relative; min-height: 390px; overflow: hidden; background: #0a4350; }
.mini-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pin { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 8px rgba(255,124,107,.2); }
.p1 { left: 58%; top: 39%; } .p2 { left: 44%; top: 52%; background: var(--sand); } .p3 { left: 70%; top: 27%; background: var(--mint); }
.activity { padding: 5px 17px; }
.activity-row { display: grid; grid-template-columns: 9px 1fr auto; gap: 10px; padding: 14px 0; border-bottom: 1px solid #e5ecea; }
.activity-row i { width: 8px; height: 8px; margin-top: 3px; border-radius: 50%; background: #50ca98; }
.activity-row b { display: block; font-size: 11px; }
.activity-row p, .activity-row time { margin: 3px 0 0; color: #7b9092; font-size: 9px; }

.analysis-shell { display: grid; gap: 10px; }
.analysis-toolbar { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); gap: 8px; }
.tool-button { min-height: 62px; display: grid; align-content: center; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: #31565d; background: #fff; text-align: left; }
.tool-button strong { font-size: 13px; }
.tool-button span { color: #789094; font-size: 8px; text-transform: uppercase; }
.tool-button.active { border-color: rgba(124,224,213,.8); color: #04212b; background: var(--mint); box-shadow: 0 10px 22px rgba(21,87,93,.12); }
.tool-button.active span { color: #0c4a4a; }
.analysis-layout { min-height: 620px; display: grid; grid-template-columns: 240px minmax(420px,1fr) 320px; overflow: hidden; border-radius: 17px; background: #082630; box-shadow: 0 14px 38px rgba(5,31,40,.18); }
.layer-panel, .reading-panel { padding: 15px; color: #d7e7e3; overflow: auto; }
.layer-panel { border-right: 1px solid rgba(255,255,255,.08); }
.reading-panel { border-left: 1px solid rgba(255,255,255,.08); }
.layer-panel h3 { margin: 5px 0 10px; color: #759899; font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
.layer-panel label { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; margin-bottom: 7px; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; color: #b7ceca; font-size: 9px; background: rgba(255,255,255,.025); }
.point-list { display: grid; gap: 7px; margin-bottom: 13px; }
.point-button { min-height: 38px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; color: #c0d7d3; background: rgba(255,255,255,.025); text-align: left; }
.point-button strong { color: var(--sand); }
.point-button.active { border-color: rgba(124,224,213,.7); color: #05212b; background: var(--mint); }
.point-button.active strong { color: #05212b; }
.analysis-map { position: relative; overflow: hidden; background: #0a4350; }
.analysis-map svg { width: 100%; height: 100%; min-height: 620px; display: block; }
.map-point { position: absolute; min-width: 44px; height: 28px; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.4); border-radius: 999px; color: #05212b; background: var(--sand); font-size: 9px; font-weight: 850; box-shadow: 0 0 0 8px rgba(233,199,125,.16); }
.map-point.active { background: var(--coral); color: #fff; box-shadow: 0 0 0 10px rgba(255,124,107,.24); }
.map-status { position: absolute; left: 14px; top: 14px; width: min(360px, calc(100% - 28px)); display: grid; gap: 5px; padding: 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; color: #eaf7f4; background: rgba(3,28,38,.76); backdrop-filter: blur(10px); }
.map-status b { font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.map-status span { color: #a9c2c0; font-size: 10px; line-height: 1.5; }
.map-watermark { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 6px 9px; border-radius: 7px; color: rgba(255,255,255,.72); background: rgba(2,22,30,.68); font-size: 7px; letter-spacing: .1em; white-space: nowrap; }
.reading-source { color: #759798; font-size: 8px; letter-spacing: .1em; }
.reading-panel h3 { margin: 8px 0 12px; color: var(--mint2); font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.reading-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.reading-grid div, .interpretation, .role-box { padding: 9px; border-radius: 9px; background: rgba(255,255,255,.04); }
.reading-grid small, .interpretation small { display: block; color: #729293; font-size: 7px; letter-spacing: .07em; }
.fish-score { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding: 10px; border: 1px solid rgba(124,224,213,.22); border-radius: 10px; background: rgba(124,224,213,.07); }
.fish-score strong { color: #fff; font-size: 16px; }
.fish-score span { padding: 6px 8px; border-radius: 99px; color: #073327; background: #73dfae; font-size: 8px; font-weight: 800; }
.analysis-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.secondary.dark { color: var(--mint2); background: rgba(255,255,255,.04); border-color: rgba(124,224,213,.24); }

.ocean-workbench { display: grid; gap: 10px; }
.ocean-toolbar { min-height: 72px; display: grid; grid-template-columns: repeat(5, minmax(104px, 1fr)) minmax(10px, .8fr) 170px auto; gap: 8px; align-items: stretch; }
.icon-tool { display: grid; align-content: center; gap: 4px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; color: #31565d; background: #fff; text-align: left; }
.icon-tool b { font-size: 12px; }
.icon-tool span { color: #789094; font-size: 8px; text-transform: uppercase; }
.icon-tool.active { border-color: rgba(124,224,213,.8); color: #04212b; background: var(--mint); box-shadow: 0 10px 22px rgba(21,87,93,.12); }
.icon-tool.active span { color: #0c4a4a; }
.toolbar-spacer { min-width: 8px; }
.date-control { display: grid; align-content: center; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.date-control span { color: #789094; font-size: 8px; text-transform: uppercase; }
.date-control input { min-width: 0; border: 0; outline: 0; color: var(--text); }
.ocean-grid { min-height: 680px; display: grid; grid-template-columns: 260px minmax(420px,1fr) 340px; overflow: hidden; border-radius: 10px; background: #082630; box-shadow: 0 14px 38px rgba(5,31,40,.18); }
.qgis-panel, .analysis-side { color: #d7e7e3; overflow: auto; }
.qgis-panel { padding: 14px; border-right: 1px solid rgba(255,255,255,.08); background: #08232e; }
.analysis-side { padding: 14px; border-left: 1px solid rgba(255,255,255,.08); background: #092a35; }
.panel-title { display: flex; justify-content: space-between; gap: 10px; margin: 2px 0 10px; color: var(--mint2); }
.panel-title.second { margin-top: 18px; }
.panel-title b { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.panel-title span { color: #729293; font-size: 8px; }
.layer-row { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: center; margin-bottom: 7px; padding: 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.025); }
.layer-row b { display: block; color: #dcebe8; font-size: 10px; }
.layer-row small { display: block; margin-top: 2px; color: #7fa1a0; font-size: 8px; }
.model-list { display: grid; gap: 7px; }
.model-list button { display: grid; gap: 3px; padding: 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; color: #c0d7d3; background: rgba(255,255,255,.025); text-align: left; }
.model-list button b { font-size: 10px; }
.model-list button span { color: #7fa1a0; font-size: 8px; line-height: 1.4; }
.model-list button.active { border-color: rgba(124,224,213,.7); color: #05212b; background: var(--mint); }
.model-list button.active span { color: #105054; }
.map-canvas { position: relative; overflow: hidden; background: #0a4350; }
.map-canvas svg { width: 100%; height: 100%; min-height: 680px; display: block; }
.map-point { position: absolute; min-width: 44px; height: 28px; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.4); border-radius: 999px; color: #05212b; background: var(--sand); font-size: 9px; font-weight: 850; box-shadow: 0 0 0 8px rgba(233,199,125,.16); }
.map-point.active { background: var(--coral); color: #fff; box-shadow: 0 0 0 10px rgba(255,124,107,.24); }
.scale-bar { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 7px; color: #dcebe8; background: rgba(2,22,30,.75); font-size: 8px; }
.scale-bar span { width: 70px; height: 3px; background: #dcebe8; }
.map-coordinates { position: absolute; left: 14px; top: 14px; padding: 8px 10px; border-radius: 7px; color: #dcebe8; background: rgba(2,22,30,.75); font-size: 9px; }
.map-legend { position: absolute; right: 14px; bottom: 14px; display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; align-items: center; padding: 10px; border-radius: 9px; color: #dcebe8; background: rgba(2,22,30,.75); font-size: 8px; }
.map-legend b { grid-column: 1 / -1; color: var(--mint2); font-size: 9px; }
.legend-hot, .legend-bio, .legend-front { width: 18px; height: 8px; border-radius: 99px; display: inline-block; }
.legend-hot { background: #ff8759; }
.legend-bio { background: #3bd483; }
.legend-front { background: #f6d276; }
.analysis-card { margin-bottom: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.04); }
.analysis-card h3 { margin: 4px 0; color: var(--mint2); font-family: Georgia, serif; font-size: 22px; font-weight: 500; }
.analysis-card p { margin: 6px 0 0; color: #b7ceca; font-size: 10px; line-height: 1.6; }
.rank-row { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; align-items: center; margin-top: 7px; padding: 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; color: #c0d7d3; background: rgba(255,255,255,.025); text-align: left; }
.rank-row b { color: var(--sand); }
.rank-row small { grid-column: 1 / -1; color: #7fa1a0; font-size: 8px; }
.rank-row.active { border-color: rgba(124,224,213,.7); color: #05212b; background: var(--mint); }
.rank-row.active b, .rank-row.active small { color: #05212b; }

.view-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.view-heading h3 { margin: 0; font-family: Georgia, serif; font-size: 29px; font-weight: 500; }
.view-heading p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.record-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.record { padding: 17px; }
.record h4 { margin: 0 0 6px; font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.record p { margin: 0; color: #72888b; font-size: 10px; line-height: 1.5; }
.pill { display: inline-block; padding: 5px 8px; border-radius: 99px; color: #276f57; background: #dcf5e9; font-size: 8px; font-weight: 800; }
.table-card { overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.data-table th { padding: 10px 15px; color: #839698; background: #f8faf9; font-size: 8px; text-align: left; }
.data-table td { padding: 12px 15px; border-top: 1px solid #e7eeee; color: #38555b; }
.form-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 12px; }
.form-row.user-form { grid-template-columns: 1.1fr 1.2fr .85fr 1fr auto; }
.form-row.password-form { grid-template-columns: 1fr 1fr auto; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.form-row input, .form-row select { min-width: 0; min-height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; color: var(--text); background: #fff; }
.form-row button { white-space: nowrap; }
.toast { position: fixed; right: 20px; bottom: 20px; max-width: 350px; padding: 12px 15px; border-radius: 12px; color: #eaf7f4; background: #12353e; box-shadow: 0 18px 45px rgba(0,0,0,.27); font-size: 10px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .login-screen { grid-template-columns: 1fr; }
  .login-card { justify-self: start; }
  .app { grid-template-columns: 76px 1fr; }
  .brand.compact span:last-child, .tenant-card, .main-nav span, .logout { display: none; }
  .main-nav button { justify-content: center; font-size: 16px; }
  .stats, .dashboard-grid, .record-grid, .analysis-layout, .analysis-toolbar { grid-template-columns: 1fr; }
  .analysis-map svg { min-height: 460px; }
}

@media (max-width: 620px) {
  .login-screen { padding: 26px 17px; }
  .login-copy h1 { font-size: 42px; }
  .app { display: block; }
  .sidebar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; top: auto; height: 62px; display: block; padding: 6px; }
  .sidebar>.brand, .sidebar>.tenant-card, .sidebar form { display: none; }
  .main-nav { display: flex; margin: 0; overflow-x: auto; }
  .main-nav button { flex: 0 0 94px; }
  .main { padding-bottom: 62px; }
  .content { padding: 10px 11px 24px; }
  .form-row { grid-template-columns: 1fr; }
}