*{box-sizing:border-box;margin:0;padding:0;}
body{background:#000;color:#fff;font-family:sans-serif;overflow:hidden;}
.main-wrapper{display:flex;flex-direction:column;height:100vh;}

.header{border-bottom:1px solid #0ff;padding:6px 8px;flex-shrink:0;background:#000;}
.header h1{font-size:11px;color:#0ff;line-height:1.1;text-align:left;margin-bottom:6px;}
.header-actions{display:flex;gap:5px;align-items:center;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;}

.btn-refresh,.btn-normal,.btn-catch,.btn-gps,.btn-later,.btn-memory{
  color:#000;font-size:12px;font-weight:bold;padding:5px 9px;min-height:30px;min-width:58px;border-radius:5px;cursor:pointer;border:none;
  appearance:none;-webkit-appearance:none;line-height:1.1;touch-action:manipulation;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;justify-content:center;text-align:center;
}
.btn-refresh{background:#0ff;}
.btn-normal{background:#9cff57;}
.btn-catch{background:#ff9800;}
.btn-gps{background:#7db7ff;}
.btn-later{background:#ff5ad6;}
.btn-memory{background:#ffd54f;}
.btn-normal:disabled,.btn-catch:disabled,.btn-gps:disabled,.btn-later:disabled,.btn-memory:disabled{background:#777;color:#222;cursor:default;}

.warn-bar{background:#030;color:#fff;font-size:10px;font-weight:bold;padding:4px;text-align:center;border-bottom:1px solid #0f0;flex-shrink:0;}
.warn-bar a{color:#fff;text-decoration:none;display:block;}
.warn-bar a:hover{text-decoration:underline;}

.location-bar{background:#081018;border-bottom:1px solid #0ff;padding:6px;flex-shrink:0;}
.location-top{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap;}
.loc-label{font-size:10px;color:#0ff;font-weight:bold;}
.loc-value{font-size:11px;color:#fff;font-weight:bold;}
.loc-sub{font-size:9px;color:#9ad8ff;}
.catch-cache{font-size:9px;color:#ffb7f4;margin-top:4px;}
.location-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.location-controls select{background:#000;color:#fff;border:1px solid #0ff;border-radius:4px;font-size:11px;padding:5px 6px;min-height:32px;min-width:110px;max-width:45vw;}

.dashboard{display:flex;flex:1;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:6px;gap:6px;}
.column{width:24vw;min-width:95px;flex-shrink:0;display:flex;flex-direction:column;gap:6px;}

.area-card{flex-shrink:0;border:1.5px solid #0ff;border-radius:8px;padding:5px 0;background:#000;overflow:hidden;}
.area-name{font-size:12px;font-weight:bold;text-align:center;margin-bottom:5px;color:#0ff;border-bottom:1.5px solid #0ff;padding-bottom:2px;}
.data-list{display:flex;flex-direction:column;gap:4px;align-items:center;}
.item{text-align:center;width:100%;line-height:1.1;}
.label{font-size:9px;color:#0ff;display:block;font-weight:bold;}
.val{font-size:13px;font-weight:bold;color:#fff;}
.val-temp{color:#ffa500;}
.val-wind{color:#00d2ff;}
.val-tide{color:#f0f;}
.val-flow{color:#7cf7ff;}
.val-cd{color:#0f0;font-family:monospace;font-weight:bold;}
.val-tide-time{color:#ff0;}
.val-sun{color:#fff;}
.val-moon{color:#ffa500;}
.val-status{font-weight:bold;}
.cd-box{margin-top:4px;padding:3px;background:#080808;border-top:1px solid #333;transition:background 0.3s;}
.cd-box.bakuchou{background:linear-gradient(90deg,#ff0,#ffa500);font-weight:bold;color:#000;}

.port-rank-card{flex-shrink:0;border:1.5px solid #00d2ff;border-radius:8px;padding:5px 0;background:#02070a;overflow:hidden;}
.port-rank-title{font-size:11px;font-weight:bold;text-align:center;margin-bottom:5px;color:#00d2ff;border-bottom:1.5px solid #00d2ff;padding-bottom:2px;}
.port-list{display:flex;flex-direction:column;gap:4px;padding:0 4px;}
.port-item{text-align:left;width:100%;line-height:1.2;padding:2px 4px;border-bottom:1px dotted #123;}
.port-item:last-child{border-bottom:none;}
.port-rank-no{font-size:9px;color:#00d2ff;font-weight:bold;display:block;}
.port-rank-name{font-size:11px;color:#fff;font-weight:bold;display:block;word-break:break-word;}

@media (max-width: 640px){
  .header{padding:6px;}
  .header h1{font-size:10px;margin-bottom:5px;}
  .header-actions{gap:4px;}
  .btn-refresh,.btn-normal,.btn-catch,.btn-gps,.btn-later,.btn-memory{font-size:11px;padding:5px 7px;min-height:28px;min-width:52px;border-radius:5px;}
  .location-controls select{font-size:12px;min-height:34px;min-width:120px;}
}