.sn-page {
  --sn-bg: #071827;
  --sn-panel: #102f43;
  --sn-panel-2: #0c2537;
  --sn-line: rgba(103, 213, 192, .32);
  --sn-mint: #5cd4bd;
  --sn-cyan: #82def3;
  --sn-text: #f4fbff;
  --sn-muted: #b8cfdb;
  background: linear-gradient(150deg, #06121e, #082034 55%, #061724);
  color: var(--sn-text);
  min-height: 100vh;
  padding: clamp(7rem, 12vw, 9rem) clamp(1rem, 4vw, 4rem) 5rem;
}
.sn-shell { max-width: 1480px; margin: 0 auto; }
.sn-hero { max-width: 980px; margin-bottom: 2rem; }
.sn-back { color: var(--sn-cyan); display: inline-block; font-weight: 800; margin-bottom: 1.25rem; text-decoration: none; }
.sn-hero h1 { font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: .98; margin: .2rem 0 1rem; }
.sn-hero > p:not(.eyebrow) { color: var(--sn-muted); font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.7; max-width: 900px; }
.sn-badges { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.2rem; }
.sn-badges span { background: rgba(130, 222, 243, .1); border: 1px solid rgba(130, 222, 243, .32); border-radius: 999px; color: #dff9ff; font-size: .84rem; font-weight: 800; padding: .45rem .8rem; }
.sn-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 2rem 0; max-width: 1180px; }
.sn-tab { background: #102b3e; border: 1px solid #31536a; border-radius: 16px; color: var(--sn-muted); cursor: pointer; font: inherit; font-weight: 900; padding: 1rem 1.2rem; text-align: left; }
.sn-tab small { display: block; font-size: .72rem; font-weight: 600; margin-top: .25rem; }
.sn-tab.is-active { background: linear-gradient(135deg, var(--sn-mint), var(--sn-cyan)); border-color: transparent; color: #062333; }
.sn-subtabs { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.sn-subtab { background: rgba(4, 23, 36, .6); border: 1px solid var(--sn-mint); border-radius: 999px; color: #ddf8f3; cursor: pointer; font: inherit; font-weight: 900; min-height: 44px; padding: .65rem 1rem; }
.sn-subtab.is-active { background: var(--sn-mint); color: #062333; }
.sn-station-panel { display: grid; gap: 1rem; }
.sn-panel { display: grid; gap: 1rem; }
.sn-card { background: linear-gradient(135deg, rgba(19, 55, 75, .97), rgba(10, 34, 51, .97)); border: 1px solid var(--sn-line); border-radius: 24px; box-shadow: 0 24px 65px rgba(0, 0, 0, .18); padding: clamp(1rem, 3vw, 2rem); }
.sn-card h2 { font-size: clamp(1.35rem, 2.5vw, 2rem); margin: 0 0 .35rem; }
.sn-card h3 { margin: 0 0 .8rem; }
.sn-help { color: var(--sn-muted); line-height: 1.6; margin: .25rem 0 1.25rem; }
.sn-help strong { color: #fff; }
.sn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sn-grid .sn-span-2 { grid-column: span 2; }
.sn-field { display: grid; gap: .38rem; }
.sn-field > span { color: #cce0ea; font-size: .76rem; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.sn-field input, .sn-field select, .sn-table input { background: #f7fbfd; border: 2px solid transparent; border-radius: 9px; color: #102738; font: inherit; min-height: 44px; padding: .65rem .75rem; width: 100%; }
.sn-field input:focus, .sn-field select:focus, .sn-table input:focus { border-color: var(--sn-mint); outline: none; }
.sn-controlled-grid { display: contents; }
.sn-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.sn-button, .sn-file-label { align-items: center; background: transparent; border: 1px solid var(--sn-mint); border-radius: 999px; color: #eafffb; cursor: pointer; display: inline-flex; font: inherit; font-size: .88rem; font-weight: 900; justify-content: center; min-height: 44px; padding: .65rem 1rem; text-decoration: none; }
.sn-button.is-primary { background: linear-gradient(135deg, var(--sn-mint), var(--sn-cyan)); border-color: transparent; color: #062333; }
.sn-button:disabled { cursor: not-allowed; opacity: .45; }
.sn-file-label input { height: 1px; opacity: 0; overflow: hidden; position: absolute; width: 1px; }
.sn-status { color: var(--sn-mint); font-weight: 800; margin: .8rem 0 0; min-height: 1.4rem; }
.sn-status.is-error { color: #ff9a9a; }
.sn-table-wrap { border: 1px solid rgba(176, 213, 229, .17); border-radius: 16px; margin-top: 1rem; overflow: auto; }
.sn-table { border-collapse: collapse; min-width: 820px; width: 100%; }
.sn-table th { background: #0a2233; color: #a9c9d8; font-size: .68rem; letter-spacing: .04em; padding: .75rem .6rem; text-align: left; text-transform: uppercase; }
.sn-table td { border-top: 1px solid rgba(176, 213, 229, .13); color: #eaf6fb; padding: .55rem .6rem; }
.sn-table input { min-width: 110px; }
.sn-table td:first-child input { min-width: 125px; }
.sn-remove { background: transparent; border: 1px solid #e16b6b; border-radius: 8px; color: #ffadad; cursor: pointer; font-size: 1.1rem; height: 36px; width: 36px; }
.sn-results { border-color: rgba(92, 212, 189, .5); }
.sn-results[hidden], [data-sn-panel][hidden], [data-sn-station-panel][hidden], #snEndCoordinates[hidden], #snLevelEndWrap[hidden] { display: none !important; }
.sn-metrics { display: grid; gap: .65rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1rem 0; }
.sn-metrics div { background: rgba(5, 21, 33, .48); border: 1px solid rgba(130, 222, 243, .13); border-radius: 14px; padding: .9rem; }
.sn-metrics span { color: #a9c9d8; display: block; font-size: .72rem; font-weight: 800; margin-bottom: .3rem; text-transform: uppercase; }
.sn-metrics strong { color: #fff; font-size: clamp(.95rem, 2vw, 1.2rem); }
.sn-note, .sn-verdict { background: rgba(130, 222, 243, .1); border-left: 4px solid var(--sn-cyan); border-radius: 10px; color: #dceff7; line-height: 1.55; margin: 1rem 0; padding: .9rem 1rem; }
.sn-verdict.is-pass { background: rgba(78, 207, 151, .12); border-color: #4ecf97; }
.sn-verdict.is-fail { background: rgba(255, 118, 118, .12); border-color: #ff7676; }
.sn-diagram { background: #f3fbfd; border-radius: 18px; display: block; margin: 1rem auto; max-height: 430px; width: min(100%, 760px); }
.sn-diagram rect { fill: #f3fbfd; }
.sn-diagram polyline { fill: rgba(56, 172, 198, .12); stroke: #0e79a8; stroke-linejoin: round; stroke-width: 3; }
.sn-diagram circle { fill: #36bfa5; stroke: #07354a; stroke-width: 2; }
.sn-diagram text { fill: #0c2b3d; font-size: 14px; font-weight: 800; }
.sn-diagram .sn-north { font-size: 20px; }
.sn-stakeout-result { min-width: 1320px; }
.sn-disclaimer { background: rgba(238, 180, 70, .08); border: 1px solid rgba(238, 180, 70, .35); border-radius: 16px; color: #f7e5bc; line-height: 1.6; margin-top: 1rem; padding: 1rem; }
.sn-print-sheet { display: none; }
@media (max-width: 900px) {
  .sn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .sn-page { padding-left: .75rem; padding-right: .75rem; }
  .sn-tabs, .sn-grid, .sn-metrics { grid-template-columns: 1fr; }
  .sn-grid .sn-span-2 { grid-column: auto; }
  .sn-tab { text-align: center; }
  .sn-card { border-radius: 18px; }
}
@media print {
  body > *:not(#snPrintSheet) { display: none !important; }
  #snPrintSheet { color: #152633; display: block !important; font-family: Arial, sans-serif; padding: 12mm; }
  #snPrintSheet header { align-items: center; border-bottom: 2px solid #126ba0; display: grid; gap: 15px; grid-template-columns: 145px 1fr 145px; padding-bottom: 10px; text-align: center; }
  #snPrintSheet header img { height: 65px; max-width: 145px; object-fit: contain; width: 100%; }
  #snPrintSheet h1 { color: #0b4d83; font-size: 21px; margin: 0; }
  #snPrintSheet h2 { color: #0b4d83; }
  #snPrintSheet header p, #snPrintSheet header a { margin: 4px 0; }
  #snPrintSheet table { border-collapse: collapse; font-size: 9px; margin-top: 10px; width: 100%; }
  #snPrintSheet th, #snPrintSheet td { border: 1px solid #a8bac5; padding: 5px; text-align: right; }
  #snPrintSheet th:first-child, #snPrintSheet td:first-child { text-align: left; }
  #snPrintSheet footer { border-top: 1px solid #a8bac5; color: #52646f; font-size: 9px; margin-top: 15px; padding-top: 8px; }
  @page { margin: 10mm; size: landscape; }
}