:root {
      --gap: 6px;
      --pad: 8px;
      --radius: 8px;
      --mono: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
    }

    body {
      font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      margin: 0;
      padding: 8px;
      background: #cfd3dc;
      color: #e6e8ef;
    }

    /* Header Layout */
    .header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      padding: 8px;
      border: 1px solid #232b52;
      border-radius: var(--radius);
      background: #11172e;
    }

    .title-group {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .header-controls {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    #headerProjectName[data-empty="true"] {
      color: #8892bf;
    }

    /* Title Styling */
    h1 {
      margin: 0;
      letter-spacing: 0.5px;
      line-height: 1.2;
    }

    .brand-main {
      font-size: 19px;
      color: #ffa458;
      font-weight: 700;
    }

    .brand-sub {
      font-size: 12px;
      color: #e6e8ef;
      font-weight: 400;
      opacity: 0.9;
      margin-left: 4px;
    }

    /* Info Button */
    .info-btn {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #6aa7ff;
      color: #0b1020;
      font-weight: bold;
      font-family: serif;
      font-style: italic;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      box-shadow: 0 0 8px rgba(106, 167, 255, 0.4);
    }

    .info-btn:hover {
      background: #fff;
      transform: scale(1.1);
    }

    /* Lang Selector */
    .lang-sel {
      padding: 4px 6px;
      background: #141a34;
      border: 1px solid #2c3566;
      color: #e6e8ef;
      border-radius: 6px;
      cursor: pointer;
      font-weight: bold;
    }

    .grid {
      display: grid;
      grid-template-columns: minmax(240px, 290px) minmax(620px, 1fr) minmax(224px, 259px);
      grid-template-areas:
        "left chart side"
        "left profile side";
      gap: var(--gap);
      align-items: start;
    }

    .left-stack {
      grid-area: left !important;
      display: grid;
      gap: var(--gap);
      align-content: start;
    }

    .left-stack .panel-serial,
    .left-stack .panel-files,
    .left-stack .panel-waypoints {
      grid-area: auto !important;
    }

    .card {
      background: #141a34;
      border: 1px solid #232b52;
      border-radius: var(--radius);
      padding: var(--pad);
      box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    }

    .panel-serial {
      grid-area: serial !important;
    }

    .panel-files {
      grid-area: files !important;
    }

    .panel-waypoints {
      grid-area: waypoints !important;
    }

    .panel-profile {
      grid-area: profile !important;
      margin-top: -16px;
    }

    .side-stack {
      grid-area: side !important;
      display: grid;
      gap: 4px;
      align-content: start;
    }

    .chart-shell {
      grid-area: chart !important;
      min-height: 620px;
      padding: 0;
      overflow: hidden;
      position: relative;
    }

    .chart-frame {
      display: block;
      width: 100%;
      height: min(76vh, 730px);
      min-height: 600px;
      border: 0;
      background: #0b1020;
    }

    .card h2 {
      font-size: 13px;
      margin: 0 0 6px;
      color: #b9c1ff;
      letter-spacing: .3px;
    }

    label {
      display: block;
      font-size: 11px;
      margin: 4px 0 2px;
      color: #a9b2d9;
    }

    input,
    select,
    button {
      font: inherit;
      padding: 5px 7px;
      border-radius: 6px;
      border: 1px solid #2c3566;
      background: #0f1430;
      color: #e6e8ef;
      font-size: 12px;
    }

    input:disabled,
    select:disabled,
    button:disabled {
      opacity: .5;
      cursor: not-allowed;
    }

    button:not(:disabled):hover {
      background: #1e2650;
      border-color: #4a5696;
    }

    button:not(:disabled):active {
      transform: translateY(1px);
    }

    .row {
      display: flex;
      gap: var(--gap);
      flex-wrap: wrap;
      align-items: center;
    }

    .row>* {
      flex: 1;
      min-width: 120px;
    }

    .actions {
      display: flex;
      gap: var(--gap);
      flex-wrap: wrap;
      align-items: center;
    }

    .pill {
      padding: 3px 7px;
      border-radius: 999px;
      border: 1px solid #2c3566;
      background: #0f1430;
      font-size: 11px;
      white-space: nowrap;
    }

    .mini-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-height: 27px;
      padding: 4px 7px;
      font-size: 11px;
      white-space: nowrap;
    }

    .header-bar .mini-btn {
      min-height: 34px;
      padding: 6px 10px;
      font-size: 12.5px;
      gap: 7px;
      border-radius: 8px;
    }

    .header-bar .mini-btn::before {
      content: "";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 27px;
      height: 27px;
      line-height: 1;
      flex: 0 0 27px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 27px 27px;
    }

    #createProjectBtn::before { background-image: url("../icons/transparent/crea progetto.png"); }
    #selectProjectBtn::before { background-image: url("../icons/transparent/apri progetto.png"); }
    #saveProjectBtn::before { background-image: url("../icons/transparent/salva progetto.png"); }
    #simToggle::before { content: "▶"; color: #62e050; font-size: 20px; }
    #simToggle.sim-running::before { content: "■"; color: #ff4038; }

    #togglePointsBtn::before {
      content: "▶";
      color: #62e050;
      border: 2px solid #35d04f;
      border-radius: 50%;
      box-sizing: border-box;
      font-size: 14px;
      padding-left: 2px;
    }

    #togglePointsBtn.recording::before {
      content: "■";
      color: #ff4038;
      border-color: #ff4038;
      padding-left: 0;
      font-size: 13px;
    }


    .header-bar #simToggle {
      margin-left: 22px;
    }

    .header-bar #simToggle,
    .header-bar #togglePointsBtn,
    .header-bar #status {
      transform: translateX(4px);
    }

    .icon-btn {
      width: 28px;
      min-width: 28px;
      height: 28px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
    }


    #settingsBtn {
      font-size: 0;
      background-image: url("../icons/transparent/Settings.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 24px 24px;
    }

    .project-icon-btn {
      width: 50px;
      min-width: 50px;
      height: 44px;
      padding: 3px !important;
      gap: 0 !important;
      font-size: 0 !important;
      color: transparent !important;
    }

    .project-icon-btn::before {
      margin: 0;
      width: 38px !important;
      height: 38px !important;
      flex-basis: 38px !important;
      background-size: 38px 38px !important;
    }

    .project-name-pill {
      min-width: 270px;
      max-width: 380px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .app-notice {
      display: none;
      position: absolute;
      top: 58px;
      left: 12px;
      right: 12px;
      z-index: 12;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: #ff3b3b;
      font-size: 13px;
      line-height: 1.35;
      font-weight: 800;
      text-align: center;
      text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.85);
      white-space: pre-line;
      pointer-events: none;
    }

    .app-notice.bad,
    .app-notice.warn {
      border: 0;
      background: transparent;
      color: #ff3b3b;
    }

    .mono {
      font-family: var(--mono);
      font-size: 12px;
    }

    .log {
      height: 210px;
      overflow: auto;
      background: #0a0f26;
      border-radius: 8px;
      padding: 8px;
      border: 1px solid #212a55;
    }

    .log div {
      border-bottom: 1px solid #182040;
      padding: 2px 0;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .serial-debug-grid {
      display: block;
    }

    .serial-debug-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }

    .serial-debug-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
    }

    .panel-log .card-header {
      justify-content: space-between;
      flex-wrap: nowrap;
    }

    .panel-log .log-actions {
      margin-left: auto;
      margin-right: 6px;
      flex-wrap: nowrap;
    }

    .panel-log .card-header h2 {
      white-space: nowrap;
    }

    .serial-debug-body {
      display: none;
      height: 128px;
      overflow: auto;
      background: #050918;
      border: 1px solid #212a55;
      border-radius: 8px;
      padding: 8px;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      line-height: 1.35;
      color: #dbe4ff;
    }

    .serial-debug-body.open {
      display: block;
    }

    .profile-body {
      display: none;
      height: 190px;
      background: #050918;
      border: 1px solid #212a55;
      border-radius: 8px;
      padding: 8px;
    }

    .profile-body.open {
      display: block;
    }

    #profileCanvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    #profilePanel .serial-debug-header {
      cursor: move;
      user-select: none;
    }
    #profilePanel.drag-floating {
      position: fixed !important;
      grid-area: auto !important;
      z-index: 57;
      max-width: calc(100vw - 24px);
      max-height: calc(100vh - 24px);
      overflow: auto;
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }

    .card-header h2 {
      margin: 0;
    }

    .panel-body.closed,
    .boat-body {
      display: none;
    }

    .boat-body.open,
    .panel-body {
      display: block;
    }

    .panel-boat {
      width: min(860px, calc(100vw - 30px));
      border-color: #c9ced8 !important;
      box-shadow: 0 0 0 1px rgba(201,206,216,.18), 0 10px 30px rgba(0,0,0,.38);
    }

    .boat-setup {
      display: grid;
      grid-template-columns: minmax(205px, 230px) minmax(0, 1fr);
      gap: var(--gap);
      align-items: start;
      justify-content: space-between;
    }

    .boat-fields {
      display: grid;
      grid-template-columns: 112px 86px;
      gap: 5px;
      align-content: start;
    }

    .boat-fields label {
      margin: 0;
      align-self: center;
    }

    .boat-fields input {
      width: 86px;
      max-width: 86px;
      box-sizing: border-box;
    }

    #boatName {
      width: 86px;
      max-width: 86px;
    }

    .boat-bow-direction-controls {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .boat-bow-direction-controls input {
      width: 14px;
      max-width: 14px;
      margin: 0;
    }

    .boat-bow-direction-controls select {
      width: 62px;
      min-width: 0;
    }

    .boat-actions {
      grid-column: 1 / -1;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 4px;
    }



    .instrument-setup {
      margin-top: 8px;
      border-top: 1px solid #232b52;
      padding-top: 8px;
    }

    .boat-setup > .instrument-setup {
      margin-top: 0;
      border-top: none;
      padding-top: 0;
    }

    .instrument-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }

    .instrument-grid {
      display: grid;
      grid-template-columns: 94px 22px 68px 68px 68px 104px 32px;
      gap: 4px;
      align-items: center;
      font-size: 11px;
    }

    .instrument-grid .instrument-grid-label {
      color: #a9b2d9;
      font-size: 10.5px;
      font-weight: 600;
    }

    .instrument-grid input[type="number"] {
      width: 66px;
      max-width: 66px;
      padding-left: 4px;
      padding-right: 4px;
      box-sizing: border-box;
    }

    .instrument-grid select {
      width: 96px;
      max-width: 96px;
      min-width: 0;
      margin-left: 8px;
      box-sizing: border-box;
    }

    .instrument-row-name {
      display: flex;
      align-items: center;
      gap: 5px;
      font-weight: 700;
      color: #e6e8ef;
      white-space: nowrap;
    }

    .instrument-color-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      flex: 0 0 8px;
      border: 1px solid rgba(255,255,255,.72);
      border-radius: 50%;
      box-shadow: 0 1px 2px rgba(0,0,0,.55);
    }

    .instrument-row-disabled {
      opacity: .55;
    }

    .instrument-note {
      margin-top: 6px;
      color: #8892bf;
      font-size: 10.5px;
      line-height: 1.35;
    }

    .echo-depth-panel {
      display: none;
      margin-top: 8px;
      padding: 8px;
      border: 1px solid #232b52;
      border-radius: 7px;
      background: rgba(6, 12, 32, .72);
    }

    .echo-depth-panel.open {
      display: block;
    }

    .echo-sv-mini-btn {
      width: 28px;
      min-width: 28px;
      padding: 2px 3px;
      font-size: 10px;
      line-height: 1.2;
      border-radius: 5px;
    }

    .echo-depth-title {
      color: #b9c1ff;
      font-size: 11px;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .echo-depth-grid {
      display: grid;
      grid-template-columns: minmax(118px, 1fr) 74px;
      gap: 5px;
      align-items: center;
      font-size: 11px;
    }

    .echo-depth-grid label {
      margin: 0;
    }

    .echo-depth-grid input[type="number"] {
      width: 74px;
      max-width: 74px;
      box-sizing: border-box;
    }

    .echo-sv-check {
      grid-column: 1 / -1;
      margin-top: 2px !important;
    }

    .boat-preview-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--gap);
      margin-top: 8px;
      align-items: stretch;
    }

    .boat-preview-wrap {
      min-height: 240px;
      width: auto;
      max-width: none;
      justify-self: stretch;
      background: #050918;
      border: 1px solid #212a55;
      border-radius: 8px;
      padding: 8px;
      overflow: hidden;
    }

    .boat-preview-canvas {
      display: block;
      width: 100%;
      height: 240px;
      cursor: zoom-in;
    }

    .compact-stack {
      display: grid;
      gap: 6px;
    }

    .port-grid {
      display: grid;
      grid-template-columns: minmax(0, 118px) minmax(0, 112px);
      gap: 5px 6px;
      align-items: center;
      margin-top: 6px;
    }

    .port-grid .wide {
      grid-column: 1 / -1;
    }

    .port-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 112px;
    }

    .baud-select {
      width: 68px;
      max-width: 68px;
    }

    .short-num {
      width: 62px;
      max-width: 62px;
    }

    .port-grid .wide.row {
      justify-content: flex-start;
    }

    .port-grid .wide.row>* {
      flex: 0 0 auto;
      min-width: 0;
    }

    .inline-check {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 0;
    }

    .tabs {
      display: flex;
      gap: 4px;
      margin-top: 8px;
      border-bottom: 1px solid #232b52;
    }

    .tab-btn {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom-color: transparent;
    }

    .tab-btn.active {
      background: #1e2650;
      border-color: #4a5696;
      color: #fff;
    }

    .tab-panel {
      display: none;
      padding-top: 6px;
    }

    .tab-panel.active {
      display: block;
    }

    .settings-popover {
      position: fixed;
      right: 8px;
      top: 48px;
      width: min(360px, calc(100vw - 16px));
      z-index: 60;
      display: none;
      max-height: calc(100vh - 64px);
      overflow: auto;
    }

    .settings-popover.open {
      display: block;
    }

    .settings-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 86px;
      gap: 6px;
      align-items: center;
    }

    .floating-panel {
      position: fixed;
      left: 90px;
      top: 76px;
      width: min(760px, calc(100vw - 30px));
      max-height: calc(100vh - 100px);
      overflow: auto;
      z-index: 55;
      display: none;
    }

    .floating-panel.open {
      display: block;
    }

    .floating-panel .card-header {
      cursor: move;
      user-select: none;
    }

    .pilot-panel {
      left: auto;
      right: 28px;
      top: 86px;
      width: min(520px, calc(100vw - 30px));
      overflow: hidden;
      padding: 0;
      border-color: #c9ced8 !important;
      box-shadow: 0 0 0 1px rgba(201,206,216,.18), 0 10px 30px rgba(0,0,0,.38);
    }

    .pilot-stats {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 6px;
      padding: 8px;
      background: #09142b;
    }

    .pilot-stat {
      border: 1px solid #26325f;
      background: #0f1430;
      border-radius: 6px;
      padding: 6px 7px;
      font-family: var(--mono);
    }

    .pilot-stat span {
      display: block;
      color: #8892bf;
      font-size: 10px;
    }

    .pilot-stat b {
      font-size: 15px;
      color: #fff;
    }

    .pilot-stat.warn b {
      color: #ffca58;
    }

    .pilot-stat.bad b {
      color: #ff6b6b;
    }

    #pilotCanvas {
      width: 100%;
      height: 250px;
      display: block;
      background: #050918;
    }

    .import-block + .import-block {
      border-top: 1px solid #232b52;
      margin-top: 8px;
      padding-top: 8px;
    }

    @media (max-width: 900px) {
      .boat-setup {
        grid-template-columns: 1fr;
      }
      .boat-preview-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 900px) {
      .serial-debug-grid {
        grid-template-columns: 1fr;
      }
    }

    .log .bad {
      color: #ff6b6b;
    }

    .log .warn {
      color: #ffca58;
    }

    .kv {
      display: grid;
      grid-template-columns: 104px minmax(0, 1fr);
      gap: 3px 4px;
      font-size: 10.5px;
    }

    .kv div {
      padding: 3px 4px;
      background: #0f1430;
      border: 1px solid #222b5a;
      border-radius: 7px;
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .side-stack .mono {
      font-size: 10.5px;
    }



    .wp-header-btn {
      width: 36px;
      min-width: 36px;
      height: 34px;
      font-size: 20px;
      border-radius: 9px;
    }
    .wp-header-btn.active {
      background: #6aa7ff;
      color: #0b1020;
      border-color: #9cc4ff;
      box-shadow: 0 0 0 2px rgba(106,167,255,.22);
    }
    .panel-waypoints.disabled-panel {
      opacity: .58;
    }
    .wp-actions {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 6px;
    }
    .wp-actions .icon-btn {
      width: 30px;
      height: 30px;
      min-width: 30px;
      font-size: 17px;
    }
    #wpSaveBtn:disabled,
    #wpImportBtn:disabled {
      opacity: .32 !important;
      filter: grayscale(1) !important;
      cursor: not-allowed !important;
    }
    .wp-table-wrap {
      max-height: 210px;
      overflow: auto;
      border: 1px solid #212a55;
      border-radius: 8px;
      background: #050918;
    }
    .wp-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 10.5px;
    }
    .wp-table th,
    .wp-table td {
      border-bottom: 1px solid #182040;
      padding: 3px 4px;
      text-align: left;
      white-space: nowrap;
    }
    .wp-table th {
      color: #b9c1ff;
      background: #0a0f26;
      position: sticky;
      top: 0;
      z-index: 1;
    }
    .wp-table tr.selected {
      background: rgba(255, 80, 80, .18);
      outline: 1px solid rgba(255, 80, 80, .55);
    }
    .wp-name-input {
      width: 74px;
      max-width: 74px;
      padding: 3px 4px;
      font-size: 10.5px;
      background: #0f1430;
    }
    .wp-note {
      margin-top: 5px;
      color: #8892bf;
      font-size: 10.5px;
      line-height: 1.3;
    }
    .wp-nav-panel {
      left: auto;
      right: 28px;
      top: 370px;
      width: min(360px, calc(100vw - 30px));
      padding: 0;
      overflow: hidden;
    }
    .wp-nav-stats {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 6px;
      padding: 8px;
      background: #09142b;
    }
    .wp-nav-stat {
      border: 1px solid #26325f;
      background: #0f1430;
      border-radius: 6px;
      padding: 6px 7px;
      font-family: var(--mono);
    }
    .wp-nav-stat span {
      display: block;
      color: #8892bf;
      font-size: 10px;
    }
    .wp-nav-stat b {
      display: block;
      color: #fff;
      font-size: 15px;
    }

    /* Responsive adjustments */
    @media (max-width: 1100px) {
      .grid {
        grid-template-columns: 1fr;
        grid-template-areas:
          "chart"
          "profile"
          "left"
          "side";
      }

      .chart-frame {
        height: 560px;
      }
    }
/* === NETTUNO METAL 3D THEME OVERRIDE - visual only, layout unchanged === */
:root {
  --gap: 6px;
  --pad: 8px;
  --radius: 9px;
  --metal-bg: #9da3ad;
  --metal-bg-2: #c6cad0;
  --metal-ink: #eef1f5;
  --metal-muted: #c8ced8;
  --metal-panel-1: #3a414b;
  --metal-panel-2: #252b33;
  --metal-panel-3: #171c23;
  --metal-line-hi: rgba(255,255,255,.26);
  --metal-line-lo: rgba(0,0,0,.72);
  --metal-blue: #8fb4d9;
  --metal-orange: #ffb15f;
}

html {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.38), transparent 34%),
    linear-gradient(135deg, #7f8792 0%, #bcc1c8 45%, #737b86 100%);
}

body {
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 26%),
    linear-gradient(180deg, #b7bcc5 0%, #8b929c 48%, #737b86 100%);
  color: var(--metal-ink);
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
}

/* Barre e pannelli: effetto metallo estruso */
.header-bar,
.card,
.settings-popover,
.floating-panel,
.panel-boat,
.pilot-panel,
.wp-nav-panel {
  background:
    linear-gradient(145deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(180deg, var(--metal-panel-1) 0%, var(--metal-panel-2) 46%, var(--metal-panel-3) 100%) !important;
  border-color: rgba(224,230,238,.52) rgba(0,0,0,.82) rgba(0,0,0,.88) rgba(224,230,238,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.76),
    0 1px 0 rgba(255,255,255,.20),
    0 10px 24px rgba(0,0,0,.34) !important;
}

.header-bar {
  background:
    linear-gradient(180deg, #4b535e 0%, #252b33 54%, #141920 100%) !important;
  border-color: rgba(255,255,255,.34) rgba(0,0,0,.80) rgba(0,0,0,.92) rgba(255,255,255,.22) !important;
}

.card-header {
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(0,0,0,.20));
  border-radius: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.40);
}

.card h2,
.instrument-grid .instrument-grid-label,
.wp-table th,
.mono[style*="color:#b9c1ff"],
#wpNavName {
  color: #dbe5ef !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

.brand-main {
  color: var(--metal-orange) !important;
  text-shadow:
    0 1px 0 #4a2500,
    0 0 12px rgba(255,177,95,.25);
}

.brand-sub,
label,
.instrument-note,
.wp-note,
#btInfo {
  color: var(--metal-muted) !important;
}

/* Campi input e select: incassati nel pannello */
input,
select,
button,
.lang-sel,
.pill {
  background:
    linear-gradient(180deg, #242a32 0%, #151a21 100%) !important;
  color: #eef2f6 !important;
  border-color: rgba(255,255,255,.22) rgba(0,0,0,.72) rgba(0,0,0,.82) rgba(255,255,255,.15) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.12),
    inset 0 -1px 2px rgba(0,0,0,.60),
    0 1px 0 rgba(255,255,255,.10);
}

input:focus,
select:focus {
  outline: none;
  border-color: rgba(157,199,238,.75) rgba(0,0,0,.70) rgba(0,0,0,.82) rgba(157,199,238,.55) !important;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.12),
    0 0 0 2px rgba(143,180,217,.18),
    0 0 12px rgba(143,180,217,.22);
}

button:not(:disabled) {
  background:
    linear-gradient(180deg, #5d6672 0%, #343b45 48%, #20262f 100%) !important;
  color: #f4f6f8 !important;
  border-color: rgba(255,255,255,.34) rgba(0,0,0,.78) rgba(0,0,0,.88) rgba(255,255,255,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.72),
    0 2px 5px rgba(0,0,0,.28);
}

button:not(:disabled):hover {
  background:
    linear-gradient(180deg, #707b88 0%, #404955 50%, #252c35 100%) !important;
  border-color: rgba(189,215,240,.60) rgba(0,0,0,.78) rgba(0,0,0,.90) rgba(189,215,240,.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -1px 0 rgba(0,0,0,.70),
    0 0 12px rgba(143,180,217,.18),
    0 3px 7px rgba(0,0,0,.34);
}

button:not(:disabled):active {
  background:
    linear-gradient(180deg, #252b33 0%, #39414b 100%) !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.72),
    0 1px 0 rgba(255,255,255,.10);
}

/* Pulsanti icona: nessun cambio icona, solo cornice metallica */
.icon-btn,
.project-icon-btn,
.wp-header-btn,
.info-btn {
  background-color: #343b45 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.72),
    0 2px 5px rgba(0,0,0,.28) !important;
}

.info-btn {
  color: #111820 !important;
  background:
    radial-gradient(circle at 32% 22%, #ffffff 0%, #b8d5ee 38%, #607386 100%) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.50);
}

/* Superfici tecniche interne */
.log,
.serial-debug-body,
.profile-body,
.boat-preview-wrap,
#pilotCanvas,
.wp-table-wrap,
.wp-nav-stats,
.pilot-stats,
.settings-subbox {
  background:
    linear-gradient(180deg, #10151c 0%, #080b10 100%) !important;
  border-color: rgba(255,255,255,.16) rgba(0,0,0,.78) rgba(0,0,0,.86) rgba(255,255,255,.10) !important;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.78),
    inset 0 0 18px rgba(0,0,0,.42);
}

.chart-frame {
  background:
    radial-gradient(circle at 50% 20%, #1b2531 0%, #0a0d12 62%, #050608 100%) !important;
}

.pilot-stat,
.wp-nav-stat,
.kv div,
.wp-table th,
.wp-table td {
  background:
    linear-gradient(180deg, #28303a 0%, #151a21 100%) !important;
  border-color: rgba(255,255,255,.12) rgba(0,0,0,.68) rgba(0,0,0,.78) rgba(255,255,255,.08) !important;
}

.pilot-stat b,
.wp-nav-stat b {
  color: #f7f9fb !important;
}

.pilot-stat span,
.wp-nav-stat span,
#headerProjectName[data-empty="true"] {
  color: #b9c1ca !important;
}

/* Tabelle e separatori */
.tabs,
.instrument-setup,
.import-block + .import-block,
.log div,
.wp-table th,
.wp-table td {
  border-color: rgba(255,255,255,.10) !important;
}

.tab-btn.active,
.wp-header-btn.active {
  background:
    linear-gradient(180deg, #8aa6c1 0%, #53687d 50%, #2e3c49 100%) !important;
  color: #ffffff !important;
  border-color: rgba(220,238,255,.70) rgba(0,0,0,.75) rgba(0,0,0,.88) rgba(220,238,255,.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    0 0 0 2px rgba(143,180,217,.16),
    0 0 14px rgba(143,180,217,.20) !important;
}

.wp-table tr.selected {
  background: rgba(255, 116, 86, .22) !important;
  outline-color: rgba(255, 150, 120, .65) !important;
}

.app-notice {
  text-shadow:
    0 1px 3px rgba(0,0,0,1),
    0 0 10px rgba(0,0,0,.95),
    0 0 12px rgba(255,60,60,.35) !important;
}

/* Scrollbar dark-metal per Chrome/Edge */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: #11161d;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, #68717d, #303842);
  border-radius: 999px;
  border: 2px solid #11161d;
}

*::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, #85909d, #3d4652);
}


/* === HYDROSUITE BRAND + METAL CHART REFINEMENTS === */
.title-group{
  align-items:center;
}
.brand-link{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  text-decoration:none;
  margin-right:6px;
}
#brandLogo{
  display:block;
  height:48px;
  width:auto;
  max-width:350px;
  object-fit:contain;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.25)) drop-shadow(0 3px 10px rgba(0,0,0,.28));
}
#settingsBtn{
  width:36px !important;
  min-width:36px !important;
  height:36px !important;
  font-size:0 !important;
  background-color:#343b45 !important;
  background-image:url("../icons/transparent/Settings.png") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:24px 24px !important;
}
#settingsBtn:hover,
#settingsBtn:active,
#settingsBtn:focus-visible{
  background-color:#3b4550 !important;
  background-image:url("../icons/transparent/Settings.png") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:24px 24px !important;
  filter:brightness(1.08);
}
.chart-shell{
  background:
    linear-gradient(145deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 24%),
    linear-gradient(180deg, #4f5762 0%, #272e37 48%, #14191f 100%) !important;
  padding:6px !important;
}
.chart-frame{
  border:1px solid rgba(215,223,232,.22) !important;
  border-radius:10px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.55),
    0 10px 24px rgba(0,0,0,.32) !important;
}


/* === COM + WAYPOINT ICON BUTTONS OVERRIDE === */
#wpCreateMapBtn,
#wpGotoBtn {
  font-size: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 30px 30px !important;
}
#wpCreateMapBtn { background-image: url("../icons/transparent/Crea Way point.png") !important; }
#wpGotoBtn { background-image: url("../icons/transparent/Vai su way point.png") !important; }

.port-grid {
  grid-template-columns: 38px minmax(0, 1fr) 78px !important;
  gap: 6px 7px !important;
  align-items: center !important;
}
.port-grid .wide {
  grid-column: 1 / -1 !important;
}
.port-name {
  max-width: none !important;
  min-width: 0 !important;
  white-space: nowrap;
}
.com-icon-btn {
  width: 36px !important;
  min-width: 36px !important;
  height: 34px !important;
  padding: 0 !important;
  font-size: 0 !important;
  border-radius: 9px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 31px 31px !important;
}
#pickGPS.com-icon-btn { background-image: url("../icons/transparent/gps.png") !important; }
#pickDBT.com-icon-btn { background-image: url("../icons/transparent/echo.png") !important; }
#pickGYRO.com-icon-btn { background-image: url("../icons/transparent/heading.png") !important; }
#pickIMU.com-icon-btn { background-image: url("../icons/transparent/IMU.png") !important; background-size: 29px 29px !important; }
.com-icon-btn.port-selected {
  border-color: rgba(143, 220, 255, .82) rgba(0,0,0,.78) rgba(0,0,0,.88) rgba(143, 220, 255, .62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(0,0,0,.70),
    0 0 0 2px rgba(80,180,255,.22),
    0 0 14px rgba(80,180,255,.30) !important;
}
.com-icon-btn.port-selected::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  right: 2px;
  top: 2px;
  border-radius: 50%;
  background: #63e66a;
  box-shadow: 0 0 8px rgba(99,230,106,.75);
}
.com-icon-btn {
  position: relative;
}
.baud-select {
  width: 76px !important;
  max-width: 76px !important;
}


/* === ACTIVE COM ICON VISIBILITY FIX === */
.com-icon-btn,
.com-icon-btn:disabled,
.com-icon-btn.port-selected,
.com-icon-btn.port-selected:disabled {
  opacity: 1 !important;
  filter: none !important;
  background-color: #0f1d32 !important;
  background-size: 33px 33px !important;
}
.com-icon-btn.port-selected {
  border-color: #7bd8ff !important;
  background-color: #17324c !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,0,0,.72),
    0 0 0 2px rgba(80,180,255,.36),
    0 0 18px rgba(80,180,255,.42) !important;
}
.com-icon-btn.port-selected::after {
  display: none !important;
}
.com-icon-btn:disabled:not(.port-selected) {
  opacity: .42 !important;
  filter: grayscale(.35) !important;
}


/* === SERIAL PANEL REFINEMENTS 71 === */
.com-icon-btn,
.com-icon-btn:disabled,
.com-icon-btn.port-selected,
.com-icon-btn.port-selected:disabled {
  opacity: 1 !important;
  filter: none !important;
  background-color: #102033 !important;
  background-size: 34px 34px !important;
}
.com-icon-btn:disabled:not(.port-selected) {
  opacity: .82 !important;
  filter: grayscale(.18) contrast(.92) !important;
}
.com-icon-btn.port-selected {
  border-color: #7bd8ff !important;
  background-color: #17324c !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,0,0,.72),
    0 0 0 2px rgba(80,180,255,.36),
    0 0 18px rgba(80,180,255,.42) !important;
}
.com-icon-btn.port-selected::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  width: 8px !important;
  height: 8px !important;
  right: 1px !important;
  top: 1px !important;
  border-radius: 50% !important;
  background: #63e66a !important;
  box-shadow: 0 0 8px rgba(99,230,106,.85) !important;
  border: 1px solid rgba(4,30,8,.8) !important;
}
.tabs {
  gap: 2px !important;
}
.tab-btn[data-raw-tab] {
  flex: 0 0 auto !important;
  min-width: 42px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
}
.serial-debug-actions {
  gap: 4px !important;
}
.raw-icon-btn {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 24px 24px !important;
  border-radius: 8px !important;
}
.raw-open-btn { background-image: url("../icons/transparent/Apri.png") !important; }
.raw-clear-btn { background-image: url("../icons/transparent/Pulisci.png") !important; }
.raw-icon-btn:hover {
  background-size: 25px 25px !important;
}


/* === DEFINITIVE SERIAL ICON VISIBILITY FIX === */
.com-icon-btn,
.com-icon-btn:hover,
.com-icon-btn:active,
.com-icon-btn:disabled,
.raw-icon-btn,
.raw-icon-btn:hover,
.raw-icon-btn:active,
.raw-icon-btn:disabled {
  background-image: none !important;
  background-repeat: no-repeat !important;
}

.com-icon-btn {
  width: 40px !important;
  min-width: 40px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  position: relative !important;
  color: transparent !important;
}

.com-icon-btn::before {
  content: "" !important;
  display: block !important;
  width: 35px !important;
  height: 35px !important;
  flex: 0 0 35px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)) !important;
}

#pickGPS.com-icon-btn::before { background-image: url("../icons/transparent/gps.png") !important; }
#pickDBT.com-icon-btn::before { background-image: url("../icons/transparent/echo.png") !important; }
#pickGYRO.com-icon-btn::before { background-image: url("../icons/transparent/heading.png") !important; }
#pickCABLE.com-icon-btn::before {
  content: "" !important;
  background-image: url("../icons/transparent/Cable counter.png") !important;
  background-size: 35px 35px !important;
}
#pickBEACON.com-icon-btn::before {
  background-image: url("../icons/transparent/beacon.png") !important;
  background-size: 25px 34px !important;
}
#pickNMEAOUT.com-icon-btn::before {
  background-image: url("../icons/transparent/nmea output.png") !important;
  background-size: 56px 56px !important;
}

.com-icon-btn:disabled:not(.port-selected)::before {
  opacity: .78 !important;
  filter: grayscale(.15) drop-shadow(0 1px 1px rgba(0,0,0,.45)) !important;
}

.com-icon-btn.port-selected::before,
.com-icon-btn.port-selected:disabled::before {
  opacity: 1 !important;
  filter: drop-shadow(0 0 5px rgba(100,210,255,.75)) drop-shadow(0 1px 1px rgba(0,0,0,.55)) !important;
}

.com-icon-btn.port-selected::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  width: 8px !important;
  height: 8px !important;
  right: 1px !important;
  top: 1px !important;
  border-radius: 50% !important;
  background: #63e66a !important;
  box-shadow: 0 0 8px rgba(99,230,106,.9) !important;
  border: 1px solid rgba(4,30,8,.85) !important;
}

.raw-icon-btn {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  position: relative !important;
}

.raw-icon-btn::before {
  content: "" !important;
  display: block !important;
  width: 27px !important;
  height: 27px !important;
  flex: 0 0 27px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.50)) !important;
}

.raw-open-btn::before { background-image: url("../icons/transparent/Apri.png") !important; }
.raw-clear-btn::before { background-image: url("../icons/transparent/Pulisci.png") !important; }

.raw-icon-btn:disabled::before {
  opacity: .60 !important;
  filter: grayscale(.2) drop-shadow(0 1px 1px rgba(0,0,0,.45)) !important;
}

.port-grid {
  grid-template-columns: 42px minmax(0, 1fr) 78px !important;
}


/* === DROPDOWN OPTION CONTRAST FIX === */
select option,
select optgroup {
  color: #111827 !important;
  background: #ffffff !important;
}
select:focus {
  color: #ffffff !important;
}
.wp-sampler-btn {
  font-size: 0 !important;
  position: relative !important;
}
.wp-sampler-btn::before {
  content: "" !important;
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  border-radius: 50% !important;
  background: #9a6a2b !important;
  border: 2px solid #f1d08a !important;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.45), 0 0 6px rgba(154,106,43,.75) !important;
}
.wp-actions .icon-btn {
  flex: 0 0 auto !important;
}

.hidden-file-input,
.import-info {
  display: none !important;
}

.import-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
}

.import-row + .import-row {
  margin-top: 3px !important;
  padding-top: 6px !important;
}

.import-icon-btn {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  position: relative !important;
  overflow: visible !important;
  font-size: 0 !important;
}

.import-icon-btn::before,
.wp-add-gps-btn::before,
.wp-add-sampler-btn::before {
  content: "" !important;
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 150% 150% !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)) !important;
}

#chooseDxfBtn::before { background-image: url("../icons/transparent/Scegli file DXF.png") !important; }
#choosePtsBtn::before { background-image: url("../icons/transparent/Scegli file Punti xyz.png") !important; }
#chooseKmzBtn::before { background-image: url("../icons/transparent/Scegli file KMZ KML.png") !important; }
#chooseGeotiffBtn::before {
  background-image: url("../icons/transparent/Scegli file Geotiff.png") !important;
  background-size: contain !important;
}
#loadGeotiffBtn::before { background-image: url("../icons/transparent/Carica file.png") !important; }
.geotiff-info {
  font-size: 10px;
  overflow-wrap: anywhere;
}
.geotiff-info:empty { display: none; }
#loadDxfBtn::before,
#loadPtsBtn::before,
#loadKmzBtn::before { background-image: url("../icons/transparent/Carica file.png") !important; }

.import-visible-check {
  margin-left: 2px;
  white-space: nowrap;
}

.import-color-select {
  width: 48px;
  min-width: 48px;
  height: 30px;
  padding: 2px 15px 2px 4px;
  font-size: 0;
  color: transparent !important;
  cursor: pointer;
}
.import-color-select option {
  font-size: 18px !important;
  color: transparent !important;
}
.import-color-select option[value="#ffffff"] { background: #ffffff !important; }
.import-color-select option[value="#ff0000"] { background: #ff0000 !important; }
.import-color-select option[value="#ffd700"] { background: #ffd700 !important; }
.import-color-select option[value="#0066ff"] { background: #0066ff !important; }
.import-color-select option[value="#00b050"] { background: #00b050 !important; }
.import-color-select option[value="#ff8c00"] { background: #ff8c00 !important; }
.import-color-select option[value="#8b00ff"] { background: #8b00ff !important; }
.import-color-select option[value="#000000"] { background: #000000 !important; }

.wp-add-gps-btn,
.wp-add-sampler-btn {
  font-size: 0 !important;
  position: relative !important;
  overflow: visible !important;
}

#wpAddCurrentBtn::before { background-image: url("../icons/transparent/new GPS waypoint.png") !important; }
#wpAddSamplerBtn::before { background-image: url("../icons/transparent/new sampler waypoint.png") !important; }

#chooseDxfBtn,
#choosePtsBtn,
#chooseKmzBtn,
#loadDxfBtn,
#loadPtsBtn,
#loadKmzBtn,
#wpAddCurrentBtn,
#wpAddSamplerBtn,
#chooseDxfBtn:hover,
#choosePtsBtn:hover,
#chooseKmzBtn:hover,
#loadDxfBtn:hover,
#loadPtsBtn:hover,
#loadKmzBtn:hover,
#wpAddCurrentBtn:hover,
#wpAddSamplerBtn:hover,
#chooseDxfBtn:active,
#choosePtsBtn:active,
#chooseKmzBtn:active,
#loadDxfBtn:active,
#loadPtsBtn:active,
#loadKmzBtn:active,
#wpAddCurrentBtn:active,
#wpAddSamplerBtn:active,
#chooseDxfBtn:disabled,
#choosePtsBtn:disabled,
#chooseKmzBtn:disabled,
#loadDxfBtn:disabled,
#loadPtsBtn:disabled,
#loadKmzBtn:disabled,
#wpAddCurrentBtn:disabled,
#wpAddSamplerBtn:disabled {
  background-color: #343b45 !important;
  background-image: none !important;
}


/* === SERIAL TOGGLE + NEW DEVICE ICONS === */
#pickGPS.com-icon-btn::before { background-image: url("../icons/transparent/gps.png") !important; }
#pickDBT.com-icon-btn::before { background-image: url("../icons/transparent/echo.png") !important; }
#pickGYRO.com-icon-btn::before { background-image: url("../icons/transparent/heading.png") !important; }

.serial-toggle-row {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 6px !important;
}
.ports-toggle-btn {
  width: 42px !important;
  min-width: 42px !important;
  height: 36px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-image: none !important;
  border-radius: 9px !important;
}
.ports-toggle-btn::before {
  content: "" !important;
  display: block !important;
  width: 35px !important;
  height: 35px !important;
  background: url("../icons/transparent/potre serial apri chiudi.png") center / contain no-repeat !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)) !important;
  opacity: 1 !important;
}
.ports-toggle-btn.ports-open {
  border-color: rgba(255,110,90,.8) rgba(0,0,0,.75) rgba(0,0,0,.85) rgba(255,170,150,.5) !important;
  background-color: #3a1e1e !important;
  box-shadow: 0 0 10px rgba(255,80,55,.25), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.ports-toggle-btn:disabled::before {
  opacity: .45 !important;
  filter: grayscale(.45) drop-shadow(0 1px 1px rgba(0,0,0,.55)) !important;
}

.raw-tabs-row {
  align-items: center !important;
  gap: 3px !important;
}

.raw-tabs-row [hidden],
.raw-tab-actions [hidden] {
  display: none !important;
}
.raw-tab-actions {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.raw-tab-action {
  display: none !important;
}
.raw-tab-action.active {
  display: inline-flex !important;
}
.raw-tabs-row + .tab-panel {
  margin-top: 3px !important;
}


/* === FIX DOPPIE ICONE COM + PULSANTE PORTE CENTRATO GRANDE === */
#pickGPS.com-icon-btn,
#pickDBT.com-icon-btn,
#pickGYRO.com-icon-btn,
#pickIMU.com-icon-btn,
#pickIMU.com-icon-btn,
#pickGPS.com-icon-btn:hover,
#pickDBT.com-icon-btn:hover,
#pickGYRO.com-icon-btn:hover,
#pickIMU.com-icon-btn:hover,
#pickIMU.com-icon-btn:hover,
#pickGPS.com-icon-btn:disabled,
#pickDBT.com-icon-btn:disabled,
#pickGYRO.com-icon-btn:disabled,
#pickIMU.com-icon-btn:disabled,
#pickIMU.com-icon-btn:disabled,
#pickGPS.com-icon-btn.port-selected,
#pickDBT.com-icon-btn.port-selected,
#pickGYRO.com-icon-btn.port-selected,
#pickIMU.com-icon-btn.port-selected,
#pickIMU.com-icon-btn.port-selected {
  background-image: none !important;
}
#pickIMU.com-icon-btn::before {
  content: "IMU";
  color: #7ec8ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .4px;
}

.serial-toggle-row {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 4px !important;
}

.ports-toggle-btn {
  width: 76px !important;
  min-width: 76px !important;
  height: 62px !important;
  border-radius: 13px !important;
}

.ports-toggle-btn::before {
  width: 58px !important;
  height: 58px !important;
}

.ports-toggle-btn:disabled::before {
  opacity: .50 !important;
}


/* === WARNING COLOR + SERIAL STATUS DOTS === */
.app-notice.warn {
  color: #ffd84a !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.85), 0 0 8px rgba(255,216,74,.35) !important;
}
.app-notice.bad {
  color: #ff3b3b !important;
}

.com-icon-btn::after,
.ports-toggle-btn::after {
  content: "" !important;
  position: absolute !important;
  width: 9px !important;
  height: 9px !important;
  right: 1px !important;
  top: 1px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(4,30,8,.85) !important;
  display: none !important;
  z-index: 4 !important;
}

.com-icon-btn.status-off::after,
.ports-toggle-btn.status-off::after {
  display: none !important;
}

.com-icon-btn.status-ok::after,
.ports-toggle-btn.status-ok::after {
  display: block !important;
  background: #63e66a !important;
  box-shadow: 0 0 8px rgba(99,230,106,.9) !important;
}

.com-icon-btn.status-warn::after,
.ports-toggle-btn.status-warn::after {
  display: block !important;
  background: #ffd84a !important;
  box-shadow: 0 0 8px rgba(255,216,74,.95) !important;
  border-color: rgba(55,42,0,.9) !important;
}

.com-icon-btn.status-bad::after,
.ports-toggle-btn.status-bad::after {
  display: block !important;
  background: #ff3030 !important;
  box-shadow: 0 0 9px rgba(255,48,48,.95) !important;
  border-color: rgba(65,0,0,.9) !important;
}


/* === GRAPHICS COLOR THEME: LIGHT GREY PANELS === */
body.graphics-light {
  background: #d7dbe2 !important;
  color: #1d232b !important;
}
body.graphics-light .header-bar,
body.graphics-light .card,
body.graphics-light .settings-popover,
body.graphics-light .floating-panel,
body.graphics-light .panel-serial,
body.graphics-light .panel-files,
body.graphics-light .panel-waypoints,
body.graphics-light .panel-live,
body.graphics-light .panel-log,
body.graphics-light .panel-profile,
body.graphics-light .panel-boat {
  background:
    linear-gradient(145deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.28) 24%),
    linear-gradient(180deg, #f2f4f7 0%, #d2d7df 48%, #b9c0ca 100%) !important;
  border-color: #8d96a4 !important;
  color: #202833 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 6px 16px rgba(60,70,85,.20) !important;
}
body.graphics-light .card-header,
body.graphics-light .serial-debug-header,
body.graphics-light .instrument-head,
body.graphics-light .pilot-panel .card-header,
body.graphics-light .wp-nav-panel .card-header {
  background:
    linear-gradient(180deg, #f8f9fb 0%, #d4dae2 52%, #b6bec9 100%) !important;
  border-color: #9aa3b0 !important;
  color: #18202b !important;
}
body.graphics-light h2,
body.graphics-light label,
body.graphics-light .mono,
body.graphics-light .kv div,
body.graphics-light .instrument-note,
body.graphics-light .wp-note,
body.graphics-light .pill,
body.graphics-light #headerProjectName {
  color: #1f2935 !important;
}
body.graphics-light input,
body.graphics-light select,
body.graphics-light textarea,
body.graphics-light button,
body.graphics-light .pill,
body.graphics-light .log,
body.graphics-light .serial-debug-body,
body.graphics-light .wp-table-wrap,
body.graphics-light .wp-table input {
  background: #eef1f5 !important;
  border-color: #9aa4b1 !important;
  color: #17202a !important;
}
body.graphics-light button:not(:disabled):hover {
  background: #dde3eb !important;
  border-color: #778391 !important;
}
body.graphics-light .log div {
  border-bottom-color: #c2c9d3 !important;
}
body.graphics-light .tab-btn {
  background: #d6dce5 !important;
  color: #18202b !important;
  border-color: #9aa4b1 !important;
}
body.graphics-light .tab-btn.active {
  background: #f4f6f9 !important;
  color: #0e1722 !important;
  border-color: #7e8a98 !important;
}
body.graphics-light .settings-subbox {
  background: #dfe4eb !important;
  border-color: #a5afbd !important;
}
body.graphics-light #openBoatFromSettingsBtn {
  background: #c9d0da !important;
  border-color: #8d98a8 !important;
  color: #17202a !important;
}
body.graphics-light .panel-boat .instrument-head h2,
body.graphics-light .panel-boat .instrument-grid,
body.graphics-light .panel-boat .instrument-grid .instrument-grid-label,
body.graphics-light .panel-boat .instrument-row-name,
body.graphics-light .panel-boat .inline-check,
body.graphics-light .panel-boat .instrument-note {
  color: #000000 !important;
  text-shadow: none !important;
}

/* === PROJECT HEADER + RAW SERIAL FINAL OVERRIDES === */
.header-bar .project-icon-btn {
  width: 50px !important;
  min-width: 50px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 2px !important;
}
.header-bar .project-icon-btn::before {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  background-size: 130% 130% !important;
  background-position: center !important;
}
.header-bar .project-name-pill {
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  flex: 0 0 300px !important;
  box-sizing: border-box !important;
}
.ports-toggle-btn {
  width: 106px !important;
  min-width: 106px !important;
  height: 42px !important;
  border-radius: 10px !important;
}
.ports-toggle-btn::before {
  width: 92px !important;
  height: 34px !important;
  transform: scale(1.22) !important;
}

/* === IMPORT ICONS + COLOR PALETTE FINAL === */
#chooseDxfBtn,
#chooseDxfBtn:hover,
#chooseDxfBtn:active,
#chooseDxfBtn:disabled {
  background-image: url("../icons/transparent/Scegli file DXF.png") !important;
}
#choosePtsBtn,
#choosePtsBtn:hover,
#choosePtsBtn:active,
#choosePtsBtn:disabled {
  background-image: url("../icons/transparent/Scegli file Punti xyz.png") !important;
}
#chooseKmzBtn,
#chooseKmzBtn:hover,
#chooseKmzBtn:active,
#chooseKmzBtn:disabled {
  background-image: url("../icons/transparent/Scegli file KMZ KML.png") !important;
}
#chooseDxfBtn,
#choosePtsBtn,
#chooseKmzBtn {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 31px 31px !important;
}
#chooseDxfBtn::before,
#choosePtsBtn::before,
#chooseKmzBtn::before {
  display: none !important;
}
.import-color-select {
  display: none !important;
}
.import-color-picker {
  position: relative;
  flex: 0 0 auto;
}
.import-color-current {
  width: 14px !important;
  min-width: 14px !important;
  height: 12px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  background-image: none !important;
}
.import-color-palette {
  display: none;
  position: absolute;
  left: 0;
  top: 26px;
  z-index: 80;
  width: 52px;
  padding: 3px;
  grid-template-columns: repeat(2, 21px);
  gap: 3px;
  background: #20262f;
  border: 1px solid #77818d;
  border-radius: 7px;
  box-shadow: 0 6px 16px rgba(0,0,0,.55);
}
.import-color-picker.open .import-color-palette {
  display: grid;
}
.import-color-choice {
  width: 21px !important;
  min-width: 21px !important;
  height: 17px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  background-image: none !important;
  box-shadow: none !important;
}
.import-color-choice:hover,
.import-color-choice:active {
  background-image: none !important;
  filter: brightness(1.12) !important;
}
.import-color-current:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}
.import-color-none {
  position: relative;
}
.import-color-none::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 50%;
  height: 2px;
  background: #ff6060;
  transform: rotate(-35deg);
  pointer-events: none;
}


/* === LIGHT GRAPHICS FIX: CHART PANEL + LIVE DATA READABILITY === */
body.graphics-light .chart-shell {
  background:
    linear-gradient(145deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.32) 24%),
    linear-gradient(180deg, #f2f4f7 0%, #d2d7df 48%, #b9c0ca 100%) !important;
  border-color: #8d96a4 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 6px 16px rgba(60,70,85,.20) !important;
}
body.graphics-light .chart-frame {
  border: 1px solid #9aa4b1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 0 0 1px rgba(255,255,255,.35),
    0 8px 20px rgba(60,70,85,.18) !important;
}
body.graphics-light .panel-live .kv div {
  background: #f3f5f8 !important;
  border-color: #a7b0bd !important;
  color: #121a24 !important;
}
body.graphics-light .panel-live .kv div[data-i18n] {
  color: #26313f !important;
  font-weight: 650 !important;
}
body.graphics-light #pointsSaved {
  color: #005eb8 !important;
}
body.graphics-light #depth,
body.graphics-light #qual {
  color: #111827 !important;
}
body.graphics-light #zValue {
  color: #8a5a00 !important;
}
body.graphics-light #zValueLf {
  color: #087a2c !important;
}

  

/* Boat preview: dark blue technical background */
.boat-preview-wrap {
  background: linear-gradient(180deg, #0a315c 0%, #04172e 100%) !important;
  border-color: rgba(150,190,230,.45) rgba(0,0,0,.78) rgba(0,0,0,.86) rgba(150,190,230,.30) !important;
}
.boat-preview-canvas {
  background: #062a4f !important;
}


/* Boat preview graph background: dark blue */
.boat-preview-wrap,
.boat-preview-canvas {
  background: #06234a !important;
}

/* === FINAL UI FIXES: IMU ICON + SETTINGS + INITIAL TITLES === */
#pickIMU.com-icon-btn,
#pickIMU.com-icon-btn:hover,
#pickIMU.com-icon-btn:active,
#pickIMU.com-icon-btn:focus-visible,
#pickIMU.com-icon-btn:disabled,
#pickIMU.com-icon-btn.port-selected {
  background-image: url("../icons/transparent/IMU.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 33px 33px !important;
}
#pickIMU.com-icon-btn::before {
  content: none !important;
  display: none !important;
}
#settingsBtn,
#settingsBtn:hover,
#settingsBtn:active,
#settingsBtn:focus-visible,
#settingsBtn:disabled {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  background-image: url("../icons/transparent/Settings.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 31px 31px !important;
  border-radius: 10px !important;
}
#settingsBtn:hover,
#settingsBtn:focus-visible {
  filter: brightness(1.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,0,0,.68),
    0 0 0 2px rgba(143,180,217,.18),
    0 0 12px rgba(143,180,217,.22) !important;
}
#settingsBtn:active {
  transform: translateY(1px) !important;
  filter: brightness(.96) !important;
}
body.graphics-light #settingsBtn,
body.graphics-light #settingsBtn:hover,
body.graphics-light #settingsBtn:active,
body.graphics-light #settingsBtn:focus-visible {
  background-image: url("../icons/transparent/Settings.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 28px 28px !important;
  background-color: #eef1f5 !important;
  border-color: #9aa4b1 !important;
}