:root{
    --navy-deep:#050b14;
    --navy-mid:rgba(255,255,255,.055);
    --navy-line:rgba(255,255,255,.14);
    --brass:#2AABEE;
    --brass-light:#8CDDF8;
    --offwhite:#F5F3EC;
    --offwhite-dim:#B7C4CE;
    --glass-blur:blur(24px) saturate(160%);
    --glass-blur-soft:blur(14px) saturate(140%);
    --glass-hi:rgba(255,255,255,.30);
    --glass-hi-soft:rgba(255,255,255,.14);
    --glass-shadow:0 10px 34px rgba(2,8,16,.45);
    --well-bg:rgba(0,0,0,.22);
    --surface-strong:rgba(20,32,46,.62);
    --popup-surface:#14202E;
    --popup-field-surface:#0D1824;
    --header-solid:#14202E;
    --scrim:rgba(3,8,14,.55);
    --on-brass:#14202C;
    --blob1:rgba(90,175,255,.30);
    --blob2:rgba(242,200,120,.22);
    --blob3:rgba(70,210,190,.18);
    --blob4:rgba(150,100,230,.16);
    --bg-base:linear-gradient(160deg,#050b14 0%,#0a1a2c 45%,#071322 100%);
    --sc-surface-gradient:
      radial-gradient(ellipse 920px 620px at 6% -10%, var(--blob1), transparent 60%),
      radial-gradient(ellipse 720px 520px at 104% 4%, var(--blob2), transparent 58%),
      radial-gradient(ellipse 820px 720px at 12% 108%, var(--blob3), transparent 60%),
      radial-gradient(ellipse 640px 520px at 92% 96%, var(--blob4), transparent 58%),
      var(--bg-base);
  }
  :root[data-theme="light"]{
    --navy-deep:#EDF1F5;
    --navy-mid:rgba(255,255,255,.6);
    --navy-line:rgba(20,40,60,.14);
    --brass:#2AABEE;
    --brass-light:#176FBA;
    --offwhite:#16232E;
    --offwhite-dim:#55707F;
    --glass-hi:rgba(255,255,255,.75);
    --glass-hi-soft:rgba(255,255,255,.5);
    --glass-shadow:0 10px 28px rgba(20,60,90,.12);
    --well-bg:rgba(20,40,60,.055);
    --surface-strong:rgba(255,255,255,.78);
    --popup-surface:#FFFFFF;
    --popup-field-surface:#F3F6F9;
    --header-solid:#FFFFFF;
    --scrim:rgba(24,30,32,.32);
    --blob1:rgba(120,180,255,.35);
    --blob2:rgba(240,190,110,.30);
    --blob3:rgba(80,210,190,.25);
    --blob4:rgba(170,120,230,.22);
    --bg-base:linear-gradient(160deg,#F4F7FA 0%,#E9EEF3 45%,#F1F5F8 100%);
  }
  *{box-sizing:border-box;}
  /* The document paints the same app surface at every physical edge during
     native iOS/browser overscroll, without pinning or clipping the page body. */
  html,body{
    margin:0;
    padding:0;
    min-height:100dvh;
    height:auto;
    background:
      radial-gradient(ellipse 920px 620px at 6% -10%, var(--blob1), transparent 60%),
      radial-gradient(ellipse 720px 520px at 104% 4%, var(--blob2), transparent 58%),
      radial-gradient(ellipse 820px 720px at 12% 108%, var(--blob3), transparent 60%),
      radial-gradient(ellipse 640px 520px at 92% 96%, var(--blob4), transparent 58%),
      var(--bg-base) !important;
    background-attachment:fixed !important;
  }
  .app-background-fixed-layer{
    position:fixed;
    inset:calc(0px - env(safe-area-inset-top, 0px)) 0 calc(0px - env(safe-area-inset-bottom, 0px)) 0;
    min-height:calc(100dvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
    z-index:0;
    pointer-events:none;
    background-color:#EEF4F8;
    background:var(--bg-base);
    background-attachment:fixed;
  }
  body{
    color:var(--offwhite);
    font-family:'Inter',sans-serif;
    display:flex;
    flex-direction:column;
    min-height:100dvh;
    transition:background .3s ease, color .3s ease;
  }
  header{
    padding:16px 20px;
    background:var(--header-solid);
    border-bottom:1px solid var(--navy-line);
    position:sticky;
    top:0;
    z-index:60;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  header h1{
    font-family:'Spectral',serif;
    font-weight:700;
    font-size:20px;
    letter-spacing:.5px;
    margin:0;
    text-align:center;
  }
  .menu-btn{
    position:absolute;
    z-index:1000;
    pointer-events:auto;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--well-bg);
    border:1px solid var(--navy-line);
    border-radius:50%;
    color:var(--offwhite);
    font-size:17px;
    line-height:1;
    padding:0;
    cursor:pointer;
    transition:background .15s ease;
  }
  .menu-btn:hover{background:rgba(255,255,255,.12);}

  /* ---------- Side menu ---------- */
  .side-menu-overlay{
    display:none;
    position:fixed; inset:0; z-index:1200;
    touch-action:none;
    overscroll-behavior:contain;
    background:var(--scrim);
    /* The scrim dims the page without sampling/blurred rendering beneath it. */
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .side-menu-overlay.open{display:block;}
  .side-menu{
    position:fixed; top:0; left:0; bottom:0;
    width:78%; max-width:300px;
    touch-action:pan-y;
    overscroll-behavior:contain;
    /* Opaque from top to bottom; the drawer never reveals a white root layer. */
    background:var(--header-solid);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-right:1px solid var(--navy-line);
    box-shadow:var(--glass-shadow), inset -1px 0 0 var(--glass-hi-soft);
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.2,.8,.2,1);
    display:flex;
    flex-direction:column;
  }
  .side-menu-overlay.open .side-menu{transform:translateX(0);}
  .side-menu-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 18px 14px; border-bottom:1px solid var(--navy-line);
  }
  .side-menu-title{
    font-family:'Spectral',serif; font-weight:700; font-size:16px; letter-spacing:.5px; color:var(--offwhite);
  }
  .side-menu-brand{display:flex; align-items:center; gap:8px; min-width:0;}
  .side-menu-brand-logo{display:block; width:34px; height:34px; border-radius:9px; object-fit:cover; flex:0 0 auto; filter:none;}
  .smart-seamen-placeholder{filter:grayscale(100%); opacity:.58;}
  .side-menu-close{
    background:none; border:none; color:var(--offwhite-dim); font-size:22px; line-height:1; cursor:pointer; padding:2px 6px;
  }
  .side-menu-close:hover{color:var(--offwhite);}
  .side-menu-list{display:flex; flex-direction:column; padding:10px; gap:2px;}
  .side-menu-item{
    display:flex; align-items:center; gap:12px;
    background:none; border:none; color:var(--offwhite);
    font-family:'Inter',sans-serif; font-weight:600; font-size:14px;
    padding:12px 12px; border-radius:12px; cursor:pointer; text-align:left;
    transition:background .15s ease;
  }
  .side-menu-item:hover{background:rgba(224,177,92,.10);}
  .side-menu-item-icon{font-size:17px; width:22px; text-align:center;}

  /* ---------- Side menu: User Profile ---------- */
  .side-menu-profile{
    display:flex; align-items:center; gap:12px;
    width:100%; background:none; border:none; cursor:pointer; text-align:left;
    padding:16px 18px; border-bottom:1px solid var(--navy-line);
    transition:background .15s ease;
  }
  .side-menu-profile:hover{background:rgba(224,177,92,.08);}
  .profile-avatar{
    width:46px; height:46px; border-radius:50%; flex:0 0 auto;
    background:var(--well-bg); border:1px solid var(--navy-line);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    color:var(--offwhite-dim);
  }
  .profile-avatar img{width:100%; height:100%; object-fit:cover;}
  .profile-avatar .profile-placeholder-svg{width:62%; height:62%; color:#607b82;}
  .profile-avatar-edit .profile-placeholder-svg{width:62%; height:62%; color:#607b82;}
  .profile-info{flex:1; min-width:0;}
  .profile-name{
    font-family:'Spectral',serif; font-weight:700; font-size:15px; color:var(--offwhite);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .profile-rank{
    font-family:'Inter',sans-serif; font-size:12.5px; color:var(--brass-light); margin-top:2px;
  }
  .profile-edit-chevron{color:var(--offwhite-dim); font-size:18px;}
  /* Profile focus: keep the identity surface limited to photo, name, and rank. */
  .profile-focus-actions{display:flex; justify-content:center; margin-top:24px;}
  .profile-focus-actions .btn-save-ship{min-width:150px;}
  /* ---------- Edit Profile modal: big centered avatar w/ camera badge ---------- */
  .profile-avatar-edit-wrap{display:flex; justify-content:center; margin-bottom:18px;}
  .profile-avatar-edit{
    position:relative; width:92px; height:92px; border-radius:50%;
    background:var(--well-bg); border:1px solid var(--navy-line);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    cursor:pointer; color:var(--offwhite-dim);
  }
  .profile-avatar-edit img{width:100%; height:100%; object-fit:cover;}
  .profile-avatar-edit-badge{
    position:absolute; right:-2px; bottom:-2px; width:28px; height:28px; border-radius:50%;
    background:var(--brass); color:var(--navy-deep); display:flex; align-items:center; justify-content:center;
    border:2px solid var(--surface-strong);
  }

  /* ---------- Settings: Mode selector ---------- */
  .mode-select-group{
    display:flex;
    gap:10px;
  }
  .mode-option{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    background:var(--well-bg);
    border:1px solid var(--navy-line);
    border-radius:14px;
    padding:14px 8px;
    cursor:pointer;
    color:var(--offwhite-dim);
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:12.5px;
    transition:all .15s ease;
  }
  .mode-option-icon{font-size:20px;}
  .mode-option:hover{border-color:var(--brass);}
  .mode-option.active{
    border-color:var(--brass-light);
    color:var(--brass-light);
    background:rgba(242,200,120,.12);
    box-shadow:inset 0 1px 0 var(--glass-hi-soft);
  }
  .theme-color-title{margin-top:16px;}
  .theme-color-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;}
  .theme-color-option{position:relative;display:grid;place-items:center;gap:5px;min-width:0;padding:8px 4px;border:1px solid var(--navy-line);border-radius:11px;color:var(--offwhite-dim);background:var(--well-bg);font:600 9px/1.1 'Inter',sans-serif;cursor:pointer;transition:all .15s ease;}
  .theme-color-option:hover{border-color:var(--brass);}
  .theme-color-option.active{z-index:1;border-color:var(--brass-light);color:var(--brass-light);background:rgba(42,171,238,.12);box-shadow:0 0 0 2px var(--header-solid),0 0 0 4px var(--brass-light),0 5px 14px rgba(42,171,238,.28),inset 0 1px 0 var(--glass-hi-soft);transform:translateY(-1px);}
  .theme-color-option.active::after{content:'✓';position:absolute;top:4px;right:5px;color:var(--brass-light);font:800 10px/1 'Inter',sans-serif;text-shadow:0 1px 2px rgba(0,0,0,.2);}
  .theme-color-swatch{display:block;width:22px;height:22px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 2px 5px rgba(0,0,0,.18);}
  .settings-default-button{width:100%;padding:10px 13px;border:1px solid var(--navy-line);border-radius:12px;color:var(--brass-light);background:var(--well-bg);font:700 12px/1.2 'Inter',sans-serif;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease;}
  .settings-default-button:hover{border-color:var(--brass);background:rgba(42,171,238,.1);}
  .settings-default-button:active{transform:scale(.985);}
  :root{--life-day:#35ab60;--life-month:#2a91d3;--life-year:#ddaa27;}
  :root[data-theme-accent="teal"]{--brass:#19B6A5;--brass-light:#087F78;--on-brass:#062C2A;--life-day:#2aa876;--life-month:#169bb2;--life-year:#d4a72c;}
  :root[data-theme-accent="emerald"]{--brass:#3BB273;--brass-light:#19724D;--on-brass:#06251A;--life-day:#35b86b;--life-month:#278fba;--life-year:#d7a52e;}
  :root[data-theme-accent="purple"]{--brass:#9B6DFF;--brass-light:#6C43C4;--on-brass:#1B0D3B;--life-day:#55b978;--life-month:#8b6cf0;--life-year:#d3a13b;}
  :root[data-theme-accent="sunset"]{--brass:#F28C5B;--brass-light:#C85A2F;--on-brass:#3B160A;--life-day:#3aa878;--life-month:#238fc2;--life-year:#d99c2c;}
  :root[data-theme-accent="amber"]{--brass:#E0B15A;--brass-light:#9A6A12;--on-brass:#2E2007;--life-day:#42a86a;--life-month:#278eb8;--life-year:#c98f1f;}
  :root[data-theme-accent="rose"]{--brass:#E56B8A;--brass-light:#B83B60;--on-brass:#3A0D1C;--life-day:#36ab74;--life-month:#2b8fc4;--life-year:#d19c35;}

  main{
    flex:1;
    min-height:0;
    position:relative;
    z-index:1;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
  }
  .tab-panel{
    display:none;
    padding:16px 20px calc(96px + env(safe-area-inset-bottom, 0px));
    text-align:center;
    color:var(--offwhite-dim);
  }
  .tab-panel.active{display:block;}
  .tab-panel .placeholder{
    margin-top:60px;
    font-size:14px;
    line-height:1.7;
  }
  .tab-panel .icon{
    font-size:34px;
    display:block;
    margin-bottom:14px;
    opacity:.6;
  }

  /* ---------- Shared spacing for the 3 main tab screens (Ships / Calculators / Reports) ----------
     Using shared classes instead of per-instance inline styles guarantees the header, search
     bar row, and content-card list start at identical vertical positions on every screen. */
  .tab-toolbar{
    display:flex;
    align-items:center;
    width:100%;
    min-height:32px;
    margin:6px 0 16px;
    box-sizing:border-box;
  }
  .tab-toolbar > .sr-search-wrap{
    min-height:32px;
    box-sizing:border-box;
  }
  .tab-toolbar > .sr-icon-btn,
  .tab-toolbar > .cert-sort-select{
    flex:0 0 auto;
  }
  .tab-content-list{
    text-align:left;
    margin-top:12px;
  }

  /* Ship Register Styles */
  .ship-register-container{
    padding:12px 14px;
    text-align:left;
  }
  .ship-list{
    display:grid;
    gap:8px;
    margin-bottom:12px;
  }
  .ship-list.grid-mode{
    grid-template-columns:repeat(2, 1fr);
  }
  .ship-list.grid-mode .ship-item{
    padding:10px;
  }
  .ship-list.grid-mode .ship-item-info{
    font-size:11px;
  }
  .ship-list.grid-mode .tank-list,
  .ship-list.grid-mode .btn-secondary{
    display:none;
  }
  .ship-item{
    background:var(--navy-mid);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--navy-line);
    border-radius:16px;
    padding:14px;
    cursor:pointer;
    box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi-soft);
    transition:all .25s cubic-bezier(.2,.8,.2,1);
  }
  .ship-item:hover{
    border-color:var(--brass);
    background:rgba(224,177,92,.10);
    transform:translateY(-1px);
  }
  .ship-item.selected{
    border-color:var(--brass-light);
    background:rgba(224,177,92,.16);
    box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi), 0 0 0 1px rgba(242,200,120,.25);
  }
  .ship-item-header{
    display:flex;
    justify-content:space-between;
    align-items:start;
    margin-bottom:8px;
  }
  .cert-actions{
    display:flex;
    gap:2px;
    align-items:center;
    flex-shrink:0;
    margin-left:8px;
  }
  .cert-actions .detail-action-btn{
    font-size:14px;
    padding:5px 6px;
    border-radius:8px;
  }
  .ship-item-name{
    font-weight:600;
    color:var(--brass-light);
    font-size:14px;
  }
  .ship-item-info{
    font-size:12px;
    color:var(--offwhite-dim);
    line-height:1.5;
  }
  .ship-item-delete{
    background:none;
    border:none;
    color:var(--offwhite-dim);
    cursor:pointer;
    padding:2px 6px;
    font-size:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .ship-item-delete:hover{
    color:#ff8a7a;
  }

  .tank-list{
    display:grid;
    gap:10px;
    margin-top:12px;
    margin-left:8px;
  }
  .tank-item{
    background:var(--well-bg);
    backdrop-filter:var(--glass-blur-soft);
    -webkit-backdrop-filter:var(--glass-blur-soft);
    border:1px solid var(--navy-line);
    border-radius:12px;
    padding:10px;
    font-size:12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .tank-item-info{
    color:var(--offwhite-dim);
  }
  .sd-tank-entry-scroll{margin:10px 0 12px; padding:0;}
  .sd-tank-entry-row{display:grid; width:100%; min-width:0; grid-template-columns:minmax(76px,1.55fr) minmax(34px,.55fr) minmax(56px,.82fr) minmax(48px,.72fr) 34px; gap:4px; align-items:end;}
  .sd-tank-entry-row .field{ min-width:0; margin:0; }
  .sd-tank-entry-row .tank-name-field,.sd-tank-entry-row .tank-number-field,.sd-tank-entry-row .tank-side-field,.sd-tank-entry-row .tank-volume-field{min-width:0;}
  .sd-tank-entry-row .field label{ font-size:8px; white-space:nowrap; line-height:1.1; }
  .sd-tank-entry-row .field input,.sd-tank-entry-row .field select{ min-width:0; width:100%; height:34px; padding:6px 4px; font-size:10px; }
  .sd-tank-entry-row .hydro-tool-btn{ width:34px; min-width:34px; height:34px; min-height:34px; padding:0; margin:0; white-space:nowrap; font-size:20px; line-height:1; }
  .sd-tank-register-table{ width:100%; border-collapse:collapse; font-size:12px; overflow:hidden; border:1px solid var(--navy-line); border-radius:8px; }
  .sd-tank-register-table th{ padding:8px; text-align:left; font-size:10px; color:var(--offwhite-dim); background:var(--well-bg); text-transform:uppercase; letter-spacing:.04em; }
  .sd-tank-register-table td{ padding:9px 8px; border-top:1px solid var(--navy-line); color:var(--offwhite); }
  .sd-tank-register-table th:last-child,.sd-tank-register-table td:last-child{ text-align:right; }
  .tank-item-delete{
    background:none;
    border:none;
    color:var(--offwhite-dim);
    cursor:pointer;
    font-size:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .tank-item-delete:hover{
    color:#ff8a7a;
  }

  .btn-secondary{
    background:rgba(255,255,255,.08);
    backdrop-filter:var(--glass-blur-soft);
    -webkit-backdrop-filter:var(--glass-blur-soft);
    color:var(--offwhite);
    border:1px solid var(--brass);
    padding:10px 18px;
    border-radius:999px;
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:13px;
    cursor:pointer;
    transition:all .2s;
    margin-top:12px;
    box-shadow:inset 0 1px 0 var(--glass-hi-soft);
  }
  .btn-secondary:hover{
    background:rgba(224,177,92,.16);
  }

  .section-title{
    font-family:'Spectral',serif;
    font-size:15px;
    font-weight:600;
    color:var(--brass-light);
    margin-bottom:14px;
    border-bottom:1px solid var(--navy-line);
    padding-bottom:8px;
  }

  /* Keep the main tab header/search row aligned with Ships and Reports. */
  #tab-calc{padding-top:16px;}
  .calc-subtabs{
    display:flex;
    gap:22px;
    padding:14px 20px 0;
    border-bottom:1px solid var(--navy-line);
    text-align:left;
  }
  .calc-subtab-btn{
    background:none;
    border:none;
    color:var(--offwhite-dim);
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:13.5px;
    letter-spacing:.3px;
    padding:6px 2px 12px;
    cursor:pointer;
    position:relative;
  }
  .calc-subtab-btn.active{color:var(--brass-light);}
  .calc-subtab-btn.active::after{
    content:'';
    position:absolute; left:0; right:0; bottom:-1px; height:2px;
    background:var(--brass-light);
    border-radius:2px;
    box-shadow:0 0 8px rgba(242,200,120,.6);
  }
  .calc-subpanel{display:none; padding:20px 0 0;}
  .calc-subpanel.active{display:block;}

  /* ---------- Telegram-style bottom tab bar: flat, edge-to-edge, no FAB ---------- */
  nav.bottom-tabs{
    display:grid;
    grid-template-columns:48px 82px 48px;
    grid-template-rows:42px;
    align-items:center;
    gap:2px;
    width:190px;
    height:42px;
    margin:0;
    padding:2px 4px;
    border:1px solid rgba(210,177,104,.42);
    border-radius:4px;
    --glass-x:50%;
    --glass-y:50%;
    --glass-shift:0px;
    background:
      radial-gradient(90px 58px at var(--glass-x) var(--glass-y), rgba(255,255,255,.46), rgba(255,255,255,.10) 42%, transparent 72%),
      linear-gradient(145deg, rgba(255,255,255,.32), rgba(205,226,245,.16) 46%, rgba(113,166,205,.18));
    backdrop-filter:blur(22px) saturate(170%) contrast(108%);
    -webkit-backdrop-filter:blur(22px) saturate(170%) contrast(108%);
    box-shadow:0 10px 28px rgba(2,8,16,.26), inset 0 1px 0 rgba(255,255,255,.68), inset 0 -1px 0 rgba(111,155,192,.22);
    overflow:visible;
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:calc(28px + env(safe-area-inset-bottom, 0px));
    justify-content:center;
    z-index:80;
    isolation:isolate;
    touch-action:pan-y;
    user-select:none;
    transition:transform 180ms cubic-bezier(.23,1,.32,1), box-shadow 180ms ease, border-color 180ms ease;
  }
  nav.bottom-tabs::before{
    content:"";
    position:absolute;
    inset:1px;
    z-index:0;
    pointer-events:none;
    border-radius:inherit;
    background:linear-gradient(115deg, rgba(255,255,255,.62), rgba(255,255,255,.10) 28%, transparent 52%), radial-gradient(70px 48px at calc(var(--glass-x) + var(--glass-shift)) 50%, rgba(255,255,255,.52), transparent 74%);
    opacity:.84;
    transition:opacity 160ms ease, background-position 120ms ease;
  }
  nav.bottom-tabs::after{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    top:2px;
    height:1px;
    z-index:0;
    pointer-events:none;
    border-radius:inherit;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.86), transparent);
    opacity:.82;
  }
  nav.bottom-tabs > button{z-index:1;}
  nav.bottom-tabs.liquid-hover{border-color:rgba(255,255,255,.68);}
  nav.bottom-tabs.liquid-touching{transform:translateX(-50%) scale(1.018); box-shadow:0 13px 32px rgba(37,106,157,.26), inset 0 1px 0 rgba(255,255,255,.84), inset 0 -1px 0 rgba(87,139,181,.28);}
  nav.bottom-tabs.liquid-dragging::before{opacity:1;}
  nav.bottom-tabs button{
    position:relative;
    width:58px;
    height:64px;
    min-width:0;
    align-self:center;
    background:none;
    border:none;
    color:var(--offwhite-dim);
    font-family:'Inter',sans-serif;
    padding:0;
    overflow:hidden;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    border-radius:0;
    transition:color .15s ease;
  }
  nav.bottom-tabs button .tab-icon{
    font-size:18px;
    line-height:1;
    width:18px;
    height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:0;
    background:none;
    border:none;
    box-shadow:none;
    transition:transform .15s ease;
  }
  nav.bottom-tabs button .tab-icon-img{
    padding:0;
    overflow:visible;
  }
  nav.bottom-tabs button .tab-icon-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:6px;
    transition:filter .15s ease;
    filter:grayscale(100%) opacity(.6);
  }
  nav.bottom-tabs button .tab-label{
    display:none;
    font-family:'Inter',sans-serif;
    font-weight:500;
    font-size:7.5px;
    line-height:10px;
    letter-spacing:-.1px;
    color:inherit;
    opacity:1;
    white-space:nowrap;
  }
  nav.bottom-tabs button.active{
    color:#2AABEE;
  }
  nav.bottom-tabs button.active .tab-icon-img img{
    filter:none;
  }
  nav.bottom-tabs button.active .tab-label{
    font-weight:600;
    opacity:1;
  }

  /* No raised/circular center button in Telegram's tab bar -- all tabs sit flush and equal */
  nav.bottom-tabs button.tab-btn-center{
    position:static;
    margin-top:0;
  }
  nav.bottom-tabs button.tab-btn-center .tab-icon{
    width:22px;
    height:22px;
    border-radius:0;
    background:none;
    border:none;
    box-shadow:none;
  }
  /* Circular navigation: equal side tabs with a centered Ship Home tab. */
  nav.bottom-tabs button[data-tab="calc"]{grid-column:1; grid-row:1;}
  nav.bottom-tabs button[data-tab="ship"]{grid-column:2; grid-row:1;}
  nav.bottom-tabs button[data-tab="results"]{grid-column:3; grid-row:1;}
  nav.bottom-tabs button[data-tab="ship"]{
    position:absolute;
    left:calc(50% - 27px);
    top:50%;
    width:88px;
    height:84px;
    margin:0;
    padding:0;
    align-self:center;
    justify-content:center;
    transform:translate(-50%,-50%);
    color:var(--offwhite-dim);
    background:transparent;
    border-radius:50%;
  }
  nav.bottom-tabs button[data-tab="calc"],
  nav.bottom-tabs button[data-tab="results"]{
    width:44px;
    height:42px;
    justify-self:center;
    padding:0;
    border:none;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    transform:translateY(-3px);
  }
  nav.bottom-tabs button[data-tab="calc"]{transform:translate(-7px,-3px);}
  nav.bottom-tabs button[data-tab="results"]{transform:translate(7px,-3px);}
  nav.bottom-tabs button[data-tab="ship"] .tab-icon{
    position:relative;
    z-index:1;
    width:78px;
    height:78px;
    flex:0 0 78px;
    border-radius:50%;
    background:#ffffff;
    border:3px solid rgba(225,247,255,.92);
    box-shadow:0 6px 18px rgba(27,111,161,.22), inset 0 1px 0 rgba(255,255,255,.95);
    transform:none;
  }
  nav.bottom-tabs button[data-tab="ship"] .tab-icon::before{
    content:"";
    position:absolute;
    z-index:-1;
    width:86px;
    height:86px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border:1px solid rgba(210,177,104,.68);
    border-radius:50%;
    box-shadow:0 0 0 5px rgba(210,177,104,.08);
  }
  nav.bottom-tabs button[data-tab="ship"] .tab-icon-img img{
    border-radius:50%;
    filter:none;
  }
  nav.bottom-tabs button[data-tab="ship"].active{color:var(--brass-light);}
  nav.bottom-tabs button[data-tab="ship"] .tab-label{
    margin-top:1px;
    font-size:8px;
    font-weight:700;
  }
  nav.bottom-tabs button[data-tab="ship"].active .tab-icon{
    box-shadow:0 7px 22px rgba(38,139,198,.48), inset 0 1px 0 rgba(255,255,255,.72);
  }
  /* Keep side icons visible while the center circle carries the visual weight. */
  nav.bottom-tabs button[data-tab="calc"] .tab-icon,
  nav.bottom-tabs button[data-tab="results"] .tab-icon{
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:4px;
    overflow:hidden;
    background:rgba(248,250,252,.94);
    border:1px solid rgba(26,49,72,.22);
    box-shadow:0 2px 5px rgba(18,42,64,.16);
  }
  nav.bottom-tabs.liquid-touching button .tab-icon{transform:scale(.94);}
  nav.bottom-tabs button[data-tab="calc"] .tab-icon-img img,
  nav.bottom-tabs button[data-tab="results"] .tab-icon-img img{
    display:block;
    width:100%;
    height:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
    object-position:center;
    border-radius:0;
    filter:none;
    opacity:.92;
  }
  nav.bottom-tabs button[data-tab="calc"]::before,
  nav.bottom-tabs button[data-tab="results"]::after{
    content:"";
    position:absolute;
    width:8px;
    height:1px;
    top:50%;
    background:rgba(210,177,104,.58);
    pointer-events:none;
  }
  nav.bottom-tabs button[data-tab="calc"]::before{left:-6px;}
  nav.bottom-tabs button[data-tab="results"]::after{right:-6px;}
  nav.bottom-tabs button.tab-btn-center .tab-icon-img img{
    border-radius:50%;
    box-shadow:none;
  }
  nav.bottom-tabs button.tab-btn-center.active .tab-icon,
  nav.bottom-tabs button.tab-btn-center:active .tab-icon{
    transform:none;
  }
  nav.bottom-tabs button.tab-btn-center .tab-label{
    margin-top:0;
  }
  nav.bottom-tabs button.tab-btn-center.active{
    color:#2AABEE;
  }
  nav.bottom-tabs button.tab-btn-center.active .tab-icon-img img{
    box-shadow:none;
  }

  /* Telegram-style navigation: a flush bottom bar with three equal tabs. */
  nav.bottom-tabs.telegram-style-nav{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    grid-template-rows:58px;
    width:100%;
    height:calc(58px + env(safe-area-inset-bottom, 0px));
    margin:0;
    padding:4px 12px env(safe-area-inset-bottom, 0px);
    gap:0;
    left:0;
    right:0;
    bottom:0;
    transform:none;
    border:0;
    border-top:1px solid rgba(145,181,211,.22);
    border-radius:0;
    background:rgba(9,25,40,.96);
    box-shadow:0 -6px 22px rgba(1,8,16,.18), inset 0 1px 0 rgba(255,255,255,.035);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    overflow:hidden;
  }
  nav.bottom-tabs.telegram-style-nav::before{
    inset:0;
    border-radius:0;
    background:linear-gradient(180deg, rgba(255,255,255,.045), transparent 55%);
    opacity:1;
  }
  nav.bottom-tabs.telegram-style-nav::after{
    left:0;
    right:0;
    top:0;
    border-radius:0;
    background:linear-gradient(90deg, transparent, rgba(42,171,238,.42), transparent);
    opacity:.72;
  }
  nav.bottom-tabs.telegram-style-nav.liquid-hover{border-color:rgba(145,181,211,.32);}
  nav.bottom-tabs.telegram-style-nav.liquid-touching{
    transform:none;
    box-shadow:0 -6px 22px rgba(1,8,16,.18), inset 0 1px 0 rgba(255,255,255,.06);
  }
  nav.bottom-tabs.telegram-style-nav > button,
  nav.bottom-tabs.telegram-style-nav > button[data-tab="calc"],
  nav.bottom-tabs.telegram-style-nav > button[data-tab="ship"],
  nav.bottom-tabs.telegram-style-nav > button[data-tab="results"]{
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    height:52px;
    min-width:0;
    margin:0;
    padding:3px 0 1px;
    align-self:center;
    justify-self:stretch;
    justify-content:center;
    gap:3px;
    transform:none !important;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#8296a9;
  }
  nav.bottom-tabs.telegram-style-nav > button .tab-icon,
  nav.bottom-tabs.telegram-style-nav > button[data-tab="ship"] .tab-icon,
  nav.bottom-tabs.telegram-style-nav > button[data-tab="calc"] .tab-icon,
  nav.bottom-tabs.telegram-style-nav > button[data-tab="results"] .tab-icon{
    width:24px;
    height:24px;
    flex:0 0 24px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  nav.bottom-tabs.telegram-style-nav > button .tab-icon::before,
  nav.bottom-tabs.telegram-style-nav > button[data-tab="calc"]::before,
  nav.bottom-tabs.telegram-style-nav > button[data-tab="results"]::after{display:none;}
  nav.bottom-tabs.telegram-style-nav > button .tab-icon-img img,
  nav.bottom-tabs.telegram-style-nav > button[data-tab="ship"] .tab-icon-img img,
  nav.bottom-tabs.telegram-style-nav > button[data-tab="calc"] .tab-icon-img img,
  nav.bottom-tabs.telegram-style-nav > button[data-tab="results"] .tab-icon-img img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:0;
    opacity:.7;
    filter:grayscale(1) brightness(1.65);
  }
  nav.bottom-tabs.telegram-style-nav > button .tab-label,
  nav.bottom-tabs.telegram-style-nav > button[data-tab="ship"] .tab-label{
    display:block;
    margin:0;
    color:inherit;
    font-size:10px;
    font-weight:600;
    line-height:12px;
    letter-spacing:0;
  }
  nav.bottom-tabs.telegram-style-nav > button.active{
    background:transparent;
    color:#2AABEE;
  }
  nav.bottom-tabs.telegram-style-nav > button.active .tab-label{color:#2AABEE; font-weight:700;}
  nav.bottom-tabs.telegram-style-nav > button.active .tab-icon{box-shadow:none;}
  nav.bottom-tabs.telegram-style-nav > button.active .tab-icon-img img{
    opacity:1;
    filter:brightness(0) saturate(100%) invert(62%) sepia(88%) saturate(1518%) hue-rotate(164deg) brightness(96%) contrast(93%);
  }
  nav.bottom-tabs.telegram-style-nav > button:active{transform:scale(.96) !important;}
  nav.bottom-tabs.telegram-style-nav.liquid-touching > button .tab-icon{transform:scale(.94);}

  /* Compact white floating dock with a restrained grey active state. */
  nav.bottom-tabs.telegram-style-nav{
    width:min(calc(100% - 48px), 312px);
    height:54px;
    grid-template-rows:46px;
    left:50%;
    right:auto;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    padding:4px 6px;
    transform:translateX(-50%);
    border:1px solid rgba(21,30,43,.14);
    border-radius:27px;
    background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(245,246,248,.60));
    box-shadow:0 12px 28px rgba(17,24,39,.18), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(19,28,40,.07);
    overflow:hidden;
  }
  nav.bottom-tabs.telegram-style-nav::before{
    inset:1px;
    border-radius:inherit;
    background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 45%);
    opacity:.75;
  }
  nav.bottom-tabs.telegram-style-nav::after{
    left:18px;
    right:18px;
    top:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.94), transparent);
    opacity:.7;
  }
  nav.bottom-tabs.telegram-style-nav.liquid-hover{border-color:rgba(21,30,43,.22);}
  nav.bottom-tabs.telegram-style-nav.liquid-touching{
    transform:translateX(-50%) scale(1.012);
    box-shadow:0 14px 30px rgba(17,24,39,.23), inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(19,28,40,.09);
  }
  nav.bottom-tabs.telegram-style-nav > button,
  nav.bottom-tabs.telegram-style-nav > button[data-tab="calc"],
  nav.bottom-tabs.telegram-style-nav > button[data-tab="ship"],
  nav.bottom-tabs.telegram-style-nav > button[data-tab="results"]{
    height:44px;
    padding:2px 0 1px;
    border-radius:22px;
    color:#697386;
    transition:background 160ms cubic-bezier(.23,1,.32,1), color 160ms cubic-bezier(.23,1,.32,1), transform 160ms cubic-bezier(.23,1,.32,1);
  }
  nav.bottom-tabs.telegram-style-nav > button .tab-icon,
  nav.bottom-tabs.telegram-style-nav > button[data-tab="ship"] .tab-icon,
  nav.bottom-tabs.telegram-style-nav > button[data-tab="calc"] .tab-icon,
  nav.bottom-tabs.telegram-style-nav > button[data-tab="results"] .tab-icon{
    width:24px;
    height:24px;
    flex-basis:24px;
  }
  nav.bottom-tabs.telegram-style-nav > button .tab-icon-img img,
  nav.bottom-tabs.telegram-style-nav > button[data-tab="ship"] .tab-icon-img img,
  nav.bottom-tabs.telegram-style-nav > button[data-tab="calc"] .tab-icon-img img,
  nav.bottom-tabs.telegram-style-nav > button[data-tab="results"] .tab-icon-img img{
    opacity:.82;
    filter:grayscale(1) brightness(.54) contrast(1.08);
  }
  nav.bottom-tabs.telegram-style-nav > button .tab-label,
  nav.bottom-tabs.telegram-style-nav > button[data-tab="ship"] .tab-label{
    color:inherit;
    font-size:8px;
    font-weight:600;
    line-height:9px;
  }
  #cel-active-ship-summary[hidden],
  #cel-custom-ship-wrap[hidden]{display:none !important;}
  .cel-position-after-course{margin-top:6px;}
  .cel-position-after-course .tw-ship-summary{margin:6px 0 0;}
  #cel-manual-position-fields{margin-top:6px;}
  #cel-manual-position-fields .field{margin-bottom:8px;}
  #cel-manual-position-fields .grid-2{gap:8px;}
  nav.bottom-tabs.telegram-style-nav > button.active{
    background:#e7e9ed;
    color:#202938;
  }
  nav.bottom-tabs.telegram-style-nav > button.active .tab-label{color:#202938; font-weight:700;}
  nav.bottom-tabs.telegram-style-nav > button.active .tab-icon-img img{
    opacity:1;
    filter:grayscale(1) brightness(.24) contrast(1.1);
  }
  :root[data-theme="dark"] nav.bottom-tabs.telegram-style-nav{
    border-color:rgba(140,221,248,.18);
    background:linear-gradient(180deg,rgba(26,42,59,.62),rgba(17,29,42,.48));
    box-shadow:0 12px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.3);
  }
  :root[data-theme="dark"] nav.bottom-tabs.telegram-style-nav::before{
    background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 45%);
    opacity:1;
  }
  :root[data-theme="dark"] nav.bottom-tabs.telegram-style-nav::after{
    background:linear-gradient(90deg,transparent,rgba(140,221,248,.24),transparent);
    opacity:.65;
  }
  :root[data-theme="dark"] nav.bottom-tabs.telegram-style-nav > button{color:var(--offwhite-dim);}
  :root[data-theme="dark"] nav.bottom-tabs.telegram-style-nav > button.active,
  :root[data-theme="dark"] nav.bottom-tabs.telegram-style-nav > button.tab-btn-center.active{background:transparent !important; color:var(--offwhite) !important;}
  :root[data-theme="dark"] nav.bottom-tabs.telegram-style-nav > button.active .tab-label,
  :root[data-theme="dark"] nav.bottom-tabs.telegram-style-nav > button.tab-btn-center.active .tab-label{color:var(--offwhite) !important;}
  nav.bottom-tabs.telegram-style-nav > button:active{transform:scale(.97) !important;}
  .bottom-dock-cluster{
    position:fixed; z-index:25; left:50%; bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    display:flex; align-items:center; justify-content:center; gap:8px; transform:translateX(-50%);
  }
  .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav{
    position:relative; left:auto; right:auto; bottom:auto; margin:0; width:min(220px,calc(100vw - 92px)); height:60px; padding:4px 6px; border-radius:30px; transform:none;
  }
  .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button{min-height:50px; height:50px; border-radius:25px;}
  .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button,
  .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="calc"],
  .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="ship"],
  .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="results"]{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; text-align:center; transform:none !important;
  }
  .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button .tab-icon,
  .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="ship"] .tab-icon,
  .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="calc"] .tab-icon,
  .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="results"] .tab-icon{
    width:28px; height:28px; flex-basis:28px; box-sizing:border-box; padding:2px; overflow:hidden; border:1px solid rgba(34,45,61,.10); border-radius:50%; position:relative; top:2px;
    background:rgba(102,113,131,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.78);
  }
  .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button .tab-icon-img img{border-radius:50%; opacity:1 !important; filter:none !important;}
  .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button.active .tab-icon{background:rgba(255,255,255,.82); border-color:rgba(34,45,61,.15);}
  :root[data-theme="dark"] .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button .tab-icon{background:transparent; border-color:transparent; box-shadow:none;}
  :root[data-theme="dark"] .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button.active .tab-icon,
  :root[data-theme="dark"] .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button.tab-btn-center.active .tab-icon{background:transparent !important; border-color:transparent !important;}
  .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button .tab-label,
  .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="ship"] .tab-label{
    margin:0; font-size:8px; line-height:9px; text-align:center; position:relative; top:2px;
  }
  .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav.liquid-touching{transform:scale(1.012);}
  .dock-notification-btn{
    position:fixed; z-index:330; top:calc(12px + env(safe-area-inset-top, 0px)); right:calc(16px + env(safe-area-inset-right, 0px)); left:auto; bottom:auto; flex:0 0 36px; width:36px; height:36px; padding:0; border-radius:50%;
    display:flex; align-items:center; justify-content:center; color:#202938; background:linear-gradient(180deg,#fff,#f5f6f8);
    border:1px solid rgba(21,30,43,.14); box-shadow:0 8px 18px rgba(17,24,39,.15), inset 0 1px 0 rgba(255,255,255,.95);
    transition:transform 160ms cubic-bezier(.23,1,.32,1), box-shadow 160ms cubic-bezier(.23,1,.32,1);
  }
  .dock-notification-btn:active{transform:scale(.94);}
  .dock-notification-btn svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  #ai-fab-btn{
    position:fixed; z-index:25; left:calc(50% + 122px); bottom:calc(76px + env(safe-area-inset-bottom, 0px)); right:auto; top:auto; transform:none;
    width:44px; height:44px;
  }
  #ai-fab-btn:hover{transform:scale(1.06);}
  #ai-fab-btn:active{transform:scale(.94);}
  .dock-notification-badge{
    position:absolute; min-width:15px; height:15px; padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
    top:-3px; right:-3px; border-radius:999px; border:2px solid var(--page-bg); background:#d54848; color:#fff; font:700 8px/1 'Inter',sans-serif;
  }
  .dock-notification-badge[hidden], .notification-subtab-count[hidden]{display:none!important;}
  #dock-notification-overlay{z-index:9999!important; align-items:stretch; justify-content:stretch; padding:0; overflow-y:auto; background:var(--header-solid); isolation:isolate;}
  #dock-notification-overlay.open{z-index:9999!important;}
  body:has(#dock-notification-overlay.open) header#app-header,
  body:has(#dock-notification-overlay.open) #ai-fab-btn,
  body:has(#dock-notification-overlay.open) .side-menu-overlay{z-index:-1!important; pointer-events:none!important;}
  #dock-notification-overlay .notification-panel{width:100%; max-width:none; min-height:100dvh; max-height:none; display:block; overflow:visible; box-sizing:border-box; border:0; border-radius:0; box-shadow:none; background:var(--header-solid);}
  .notification-panel .modal-header{padding:calc(18px + env(safe-area-inset-top, 0px)) 18px 16px; border-bottom:1px solid var(--navy-line);}
  .notification-subtabs{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin:0; padding:10px 18px 0; border-bottom:1px solid var(--navy-line);}
  .notification-subtab{position:relative; min-height:38px; padding:8px 6px; border:0; border-radius:9px 9px 0 0; background:transparent; color:var(--muted); font:700 11px/1 'Inter',sans-serif; cursor:pointer;}
  .notification-subtab.active{color:var(--brass-light); background:var(--well-bg);}
  .notification-subtab.active::after{content:''; position:absolute; left:18%; right:18%; bottom:-1px; height:2px; border-radius:2px; background:var(--brass-light);}
  .notification-subtab-count{display:inline-flex; min-width:16px; height:16px; align-items:center; justify-content:center; margin-left:3px; padding:0 4px; border-radius:999px; background:#d54848; color:#fff; font:700 8px/1 'Inter',sans-serif; vertical-align:middle;}
  .notification-panel .modal-body{padding:14px 18px calc(30px + env(safe-area-inset-bottom, 0px)); overflow:visible;}
  .notification-empty{padding:28px 10px; color:var(--muted); font:600 13px/1.45 'Inter',sans-serif; text-align:center;}
  .notification-item{display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; align-items:center; padding:11px 0; border-bottom:1px solid var(--navy-line);}
  .notification-item:last-child{border-bottom:0;}
  .notification-item-icon{width:30px; height:30px; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:10px; background:var(--well-bg); color:var(--brass-light); font:inherit;}
  .notification-item-icon svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .notification-item-attachment{overflow:hidden; border:1px solid var(--navy-line); background:var(--header-solid); cursor:pointer; appearance:none; -webkit-appearance:none;}
  .notification-item-attachment img{width:100%; height:100%; display:block; object-fit:contain; object-position:center; background:#fff;}
  .notification-item-attachment .certificate-pdf-thumbnail{width:100%; height:100%;}
  .notification-item-attachment:focus-visible{outline:2px solid var(--brass-light); outline-offset:2px;}
  .notification-item-main{display:block; width:100%; min-width:0; margin:0; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer;}
  .notification-item-main:focus-visible{outline:2px solid var(--brass-light); outline-offset:3px; border-radius:4px;}
  .notification-item-title{font:700 12px/1.25 'Inter',sans-serif; color:var(--offwhite); overflow-wrap:anywhere;}
  .notification-item.read .notification-item-title,.notification-report-item.read .notification-report-title{font-weight:400;}
  .notification-item.unread .notification-item-title,.notification-report-item.unread .notification-report-title{font-weight:700;}
  .notification-item-meta{margin-top:4px; font:700 10px/1.3 'Inter',sans-serif; color:var(--muted);}
  .notification-item-scope{display:inline-block; margin-left:5px; padding:2px 5px; border:1px solid currentColor; border-radius:999px; color:var(--muted); font-size:8px; line-height:1.1; vertical-align:middle; white-space:nowrap;}
  .notification-item-meta.expired{color:#ef6262;}.notification-item-meta.soon{color:#f0a13a;}
  .notification-item-time{margin-top:3px; color:var(--muted); font:500 9px/1.2 'Inter',sans-serif; opacity:.82;}
  .notification-report-item{display:block; width:100%; margin:0; padding:12px 0; border:0; border-bottom:1px solid var(--navy-line); background:transparent; color:inherit; text-align:left; cursor:pointer; appearance:none; -webkit-appearance:none;}
  .notification-report-item:last-child{border-bottom:0;}
  .notification-report-item:focus-visible{outline:2px solid var(--brass-light); outline-offset:3px; border-radius:4px;}
  .notification-report-title{display:block; color:var(--offwhite); font:700 12px/1.3 'Inter',sans-serif;}
  .notification-report-result{margin-top:4px; color:var(--brass-light); font:600 10px/1.35 'Inter',sans-serif; overflow-wrap:anywhere;}
  .notification-item.expired .notification-item-icon{color:#ef6262; background:rgba(196,62,62,.14);}
  .notification-item.soon .notification-item-icon{color:#f0a13a; background:rgba(224,135,32,.14);}
  @media(max-width:360px){
    .bottom-dock-cluster{width:calc(100% - 16px); gap:6px;}
    .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav{width:calc(100% - 46px);}
    .dock-notification-btn{top:calc(10px + env(safe-area-inset-top, 0px)); right:8px; bottom:auto; left:auto; flex-basis:36px; width:36px; height:36px;}
    #ai-fab-btn{left:auto; right:8px; bottom:calc(76px + env(safe-area-inset-bottom, 0px)); top:auto; width:40px; height:40px;}
  }
  html[data-theme="dark"] nav.bottom-tabs.telegram-style-nav > button.active{
    background:transparent !important;
    color:var(--offwhite) !important;
  }
  html[data-theme="dark"] nav.bottom-tabs.telegram-style-nav > button.active .tab-label{color:var(--offwhite) !important;}
  html[data-theme="dark"] .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button.tab-btn.active{
    background:transparent !important;
    color:var(--offwhite) !important;
  }
  @media (prefers-reduced-motion:reduce){
    nav.bottom-tabs,
    nav.bottom-tabs::before,
    nav.bottom-tabs button .tab-icon{transition:none !important;}
  }

  .btn-add-ship{
    background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),linear-gradient(180deg,var(--brass-light),var(--brass));
    color:var(--on-brass);
    border:1px solid rgba(255,255,255,.4);
    padding:12px 26px;
    border-radius:999px;
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:14px;
    letter-spacing:.3px;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(217,164,65,.35), inset 0 1px 0 rgba(255,255,255,.5);
    transition:transform .12s ease, filter .12s ease;
  }
  .btn-add-ship:hover{filter:brightness(1.06);}
  .btn-add-ship:active{transform:scale(.97);}

  /* ---------- Ship register toolbar: search + view toggle + add icon ---------- */
  .sr-toolbar{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .sr-search-wrap{
    flex:1;
    display:flex;
    align-items:center;
    gap:6px;
    background:var(--well-bg);
    border:1px solid var(--navy-line);
    border-radius:999px;
    padding:7px 12px;
    box-shadow:inset 0 1px 0 var(--glass-hi-soft);
    min-width:0;
  }
  .sr-search-icon{
    font-size:14px;
    opacity:.7;
    flex-shrink:0;
  }
  .sr-search-input{
    flex:1;
    min-width:0;
    background:none;
    border:none;
    outline:none;
    color:var(--offwhite);
    font-family:'Inter',sans-serif;
    font-size:12.5px;
  }
  .sr-search-input::placeholder{color:var(--offwhite-dim);}
  .sr-icon-btn{
    flex-shrink:0;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.08);
    backdrop-filter:var(--glass-blur-soft);
    -webkit-backdrop-filter:var(--glass-blur-soft);
    border:1px solid var(--navy-line);
    border-radius:10px;
    color:var(--offwhite);
    font-size:14px;
    line-height:1;
    cursor:pointer;
    box-shadow:inset 0 1px 0 var(--glass-hi-soft);
    transition:all .15s ease;
  }
  .sr-icon-btn:hover{
    border-color:var(--brass);
    background:rgba(224,177,92,.10);
  }
  .sr-icon-btn:active{transform:scale(.94);}
  .sr-icon-btn-brass{
    background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),linear-gradient(180deg,var(--brass-light),var(--brass));
    color:var(--on-brass);
    border:1px solid rgba(255,255,255,.4);
    font-size:16px;
    font-weight:700;
    box-shadow:0 6px 16px rgba(217,164,65,.35), inset 0 1px 0 rgba(255,255,255,.5);
  }
  .sr-icon-btn-brass:hover{filter:brightness(1.06);}

  /* ---------- Calculation list: compact Sort control beside View ---------- */
  .calc-sort-wrap,
  .ship-sort-wrap{position:relative; flex:0 0 auto;}
  .calc-sort-menu,
  .ship-sort-menu{
    position:absolute;
    z-index:96;
    top:calc(100% + 7px);
    right:0;
    width:118px;
    padding:5px;
    border:1px solid var(--navy-line);
    border-radius:12px;
    background:var(--header-solid);
    box-shadow:0 12px 26px rgba(2,8,16,.30), inset 0 1px 0 var(--glass-hi-soft);
  }
  .calc-sort-menu[hidden],
  .ship-sort-menu[hidden]{display:none;}
  .calc-sort-option,
  .ship-sort-option{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:8px 7px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--offwhite-dim);
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
  }
  .calc-sort-option:hover,
  .calc-sort-option.is-active,
  .ship-sort-option:hover,
  .ship-sort-option.is-active{background:rgba(255,255,255,.08); color:var(--offwhite);}
  .calc-sort-option.is-active::after,
  .ship-sort-option.is-active::after{content:'✓'; margin-left:2px; color:var(--brass-light); font-size:10px;}

  /* ---------- Certificate list: sort select + filter chips ---------- */
  .cert-sort-select{
    flex-shrink:0;
    background:var(--well-bg);
    border:1px solid var(--navy-line);
    border-radius:999px;
    padding:7px 10px;
    color:var(--offwhite);
    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:600;
    outline:none;
    cursor:pointer;
    max-width:150px;
  }
  .cert-sort-select option{ background:var(--navy-deep); color:var(--offwhite); }
  .cert-filter-row{
    display:flex;
    gap:8px;
    margin-top:10px;
  }
  .cert-filter-chip{
    flex:1;
    background:var(--well-bg);
    border:1px solid var(--navy-line);
    border-radius:999px;
    padding:6px 10px;
    color:var(--offwhite-dim);
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:12px;
    cursor:pointer;
    transition:all .15s ease;
  }
  .cert-filter-chip:hover{border-color:var(--brass);}
  .cert-filter-chip.active{
    border-color:var(--brass-light);
    color:var(--brass-light);
    background:rgba(242,200,120,.12);
  }

  /* ---------- Modal ---------- */
  .modal-overlay{
    display:none;
    position:fixed; inset:0; z-index:200;
    background:var(--scrim);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    align-items:flex-end;
    justify-content:center;
  }
  .modal-overlay.open{display:flex;}
  #sd-registration-overlay{z-index:700;}
  .modal-box{
    background:var(--surface-strong);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    width:100%;
    max-width:640px;
    max-height:88vh;
    border-radius:26px 26px 0 0;
    border:1px solid var(--navy-line);
    border-bottom:none;
    box-shadow:0 -12px 40px rgba(0,0,0,.4), inset 0 1px 0 var(--glass-hi);
    display:flex;
    flex-direction:column;
    animation:slideUp .25s ease;
  }
  @keyframes slideUp{from{transform:translateY(24px); opacity:0;} to{transform:translateY(0); opacity:1;}}
  @media(min-width:680px){
    .modal-overlay{align-items:center;}
    .modal-box{border-radius:22px; border-bottom:1px solid var(--navy-line);}
  }

  .modal-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 22px; border-bottom:1px solid var(--navy-line);
  }
  .modal-header h2{
    font-family:'Spectral',serif; font-size:18px; font-weight:600; margin:0; color:var(--brass-light);
  }
  .modal-close{
    background:none; border:none; color:var(--offwhite-dim); font-size:24px; line-height:1;
    cursor:pointer; padding:2px 6px;
  }
  .modal-close:hover{color:var(--offwhite);}

  .modal-body{
    padding:20px 22px;
    overflow-y:auto;
  }
  .form-group-title{
    font-family:'Spectral',serif;
    font-size:13.5px;
    font-weight:600;
    color:var(--offwhite-dim);
    text-transform:uppercase;
    letter-spacing:1px;
    margin:20px 0 12px;
    padding-bottom:6px;
    border-bottom:0;
  }
  .form-group-title:first-child{margin-top:0;}
  .grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  @media(max-width:480px){
    .grid-2{grid-template-columns:1fr;}
  }
  .field{display:flex; flex-direction:column; gap:6px;}
  .field label{font-size:12px; color:var(--offwhite-dim); letter-spacing:.2px;}
  .ds-bunker-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
  .ds-bunker-row .field{min-width:0;}
  @media(max-width:480px){
    .ds-bunker-row{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
    .ds-bunker-row .field{gap:4px;}
    .ds-bunker-row .field label{font-size:10px; line-height:1.2;}
    .ds-bunker-row .field input{min-width:0; padding-left:8px; padding-right:8px;}
  }
  .field input{
    background:var(--well-bg);
    backdrop-filter:var(--glass-blur-soft);
    -webkit-backdrop-filter:var(--glass-blur-soft);
    border:1px solid var(--navy-line);
    color:var(--offwhite);
    padding:10px 11px;
    border-radius:12px;
    font-family:'Inter',sans-serif;
    font-size:14px;
    outline:none;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.3);
    transition:border-color .2s;
  }
  .field input:focus{border-color:var(--brass);}
  .field input::placeholder{color:#7387a0;}
  .ds-table-input{
    background:var(--well-bg);
    border:1px solid var(--navy-line);
    color:var(--offwhite);
    padding:7px 8px;
    border-radius:8px;
    font-family:'JetBrains Mono', monospace;
    font-size:12.5px;
    width:72px;
    text-align:right;
    outline:none;
    transition:border-color .2s;
  }
  .ds-table-input:focus{border-color:var(--brass);}
  .trim-cell-input{
    background:transparent;
    border:1px solid transparent;
    color:var(--offwhite);
    padding:5px 4px;
    border-radius:6px;
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    width:58px;
    text-align:center;
    outline:none;
    transition:border-color .15s, background .15s;
  }
  .trim-cell-input::placeholder{color:var(--offwhite-dim); opacity:.55;}
  .trim-cell-input:hover{background:var(--well-bg); border-color:var(--navy-line);}
  .trim-cell-input:focus{background:var(--well-bg); border-color:var(--brass);}
  .trim-name-input, .trim-lcg-input{
    background:transparent;
    border:1px solid transparent;
    color:var(--offwhite);
    font-family:'Inter',sans-serif;
    font-weight:600;
    padding:6px 6px;
    border-radius:6px;
    outline:none;
    transition:border-color .15s, background .15s;
  }
  .trim-name-input{ width:100%; min-width:140px; text-align:left; color:var(--brass-light); }
  .trim-lcg-input{ width:80px; text-align:right; font-family:'JetBrains Mono', monospace; font-weight:400; }
  .trim-name-input::placeholder, .trim-lcg-input::placeholder{color:var(--offwhite-dim); opacity:.55;}
  .trim-name-input:hover, .trim-lcg-input:hover{background:var(--well-bg); border-color:var(--navy-line);}
  .trim-name-input:focus, .trim-lcg-input:focus{background:var(--well-bg); border-color:var(--brass);}

  .profile-seaservice-row{
    background:var(--well-bg); border:1px solid var(--navy-line); border-radius:12px;
    padding:12px; margin-bottom:10px; position:relative;
  }
  .profile-seaservice-row .grid-2{margin-bottom:0;}
  .profile-seaservice-row .field{margin-top:8px;}
  .profile-seaservice-row .field:nth-child(-n+2){margin-top:0;}
  .profile-seaservice-remove{
    position:absolute; top:8px; right:8px; background:none; border:none;
    color:var(--offwhite-dim); cursor:pointer; font-size:18px; line-height:1; padding:2px 6px;
  }
  .profile-seaservice-remove:hover{color:#ff6b6b;}

  /* ---------- Profile view (read-only) ---------- */
  /* Profile Detail identity header: centered photo, then name, then rank. */
  .profile-view-header{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
    padding:24px 0 26px; border-bottom:1px solid var(--navy-line); margin-bottom:18px;
  }
  .profile-photo-card{width:132px; min-height:132px; padding:13px; border:1px solid var(--navy-line); border-radius:16px; background:rgba(255,255,255,.045); display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
  .profile-view-avatar{
    width:104px; height:104px; border-radius:50%; flex:0 0 auto;
    background:var(--well-bg); border:1px solid var(--navy-line);
    display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--offwhite-dim);
  }
  .profile-view-avatar img{width:100%; height:100%; object-fit:cover;}
  .profile-view-avatar .profile-placeholder-svg{width:70%; height:70%; color:#607b82;}
  .smart-seamen-placeholder{display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(100%); opacity:.58;}
  .profile-avatar .smart-seamen-placeholder,.profile-view-avatar .smart-seamen-placeholder{padding:0;}
  .ship-thumb .smart-seamen-placeholder,.profile-doc-list-photo-button .smart-seamen-placeholder,.profile-doc-grid-photo .smart-seamen-placeholder,.collection-doc-detail-preview-thumb .smart-seamen-placeholder{padding:0;}
  button.profile-view-avatar{border:0; padding:0; background:var(--well-bg); cursor:pointer; touch-action:manipulation; font-size:0;}
  .profile-view-name{font-family:'Spectral',serif; font-weight:700; font-size:22px; color:var(--offwhite); line-height:1.1;}
  .profile-view-rank{font-family:'Inter',sans-serif; font-size:14px; color:var(--brass-light); margin-top:0;}
  .profile-cv-action{display:flex; flex-direction:column; align-items:center; gap:6px; margin:2px 0 18px;}
  .profile-cv-action .btn-save-ship{min-width:190px;}
  .profile-cv-status{font-family:'Inter',sans-serif; font-size:11px; color:var(--offwhite-dim); text-align:center;}
  .profile-accordion{width:100%; box-sizing:border-box; margin:10px 0 0; border:0; border-radius:12px; background:rgba(0,0,0,.12); overflow:hidden;}
  .profile-accordion > summary{position:relative; width:100%; box-sizing:border-box; min-height:42px; padding:0 28px 0 0; border:0; box-shadow:none; list-style:none; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;}
  .profile-accordion > summary::-webkit-details-marker{display:none;}
  .profile-accordion > summary::after{content:''; position:absolute; right:12px; top:50%; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:7px solid var(--brass-light); transform:translateY(-50%); transform-origin:center; transition:transform .18s ease;}
  .profile-accordion[open] > summary::after{transform:translateY(-50%) rotate(90deg);}
  .profile-accordion > summary > .profile-section-head{width:100%; min-height:42px; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1fr) 28px; align-items:center; gap:8px; margin:0 !important; padding:9px 0 9px 12px; white-space:nowrap; overflow:hidden;}
  .profile-accordion > summary > .profile-section-head .form-group-title{min-width:0; margin:0; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .profile-accordion > summary > .profile-section-head .detail-action-btn,
  .profile-detail-head .detail-action-btn{width:28px; height:28px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; flex:0 0 28px; margin:0; padding:5px;}
  .profile-detail-head{display:grid !important; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding-right:26px;}
  /* Unified right-edge action column: every document/certificate and sea-service card shares the same icon alignment. */
  .profile-doc-card .profile-detail-head,
  .profile-ss-card .profile-detail-head{margin-right:-14px; padding-right:0;}
  .profile-detail-actions{display:inline-flex; align-items:center; justify-content:flex-end; gap:6px; min-width:78px; width:78px; justify-self:end; position:relative; z-index:5;}
  .profile-detail-actions .detail-action-btn{width:34px; height:34px; padding:7px; flex:0 0 34px;}
  .profile-detail-actions .detail-action-btn{min-width:34px; min-height:34px; touch-action:manipulation; pointer-events:auto; cursor:pointer; position:relative; z-index:8;}
  .profile-detail-actions .detail-delete-btn{color:inherit; border:0 !important; background:transparent !important; box-shadow:none !important; padding:7px;}
  .profile-detail-actions .detail-delete-btn:hover{color:#ffd0c7; background:transparent !important;}
  .profile-accordion-body{padding:0 10px 12px;}
  .profile-accordion:not([open]) > summary .detail-action-btn{display:none;}
  .profile-accordion[open] > summary .detail-action-btn{display:inline-flex;}
  .profile-photo-upload-btn{margin-top:8px; padding:7px 14px; border:1px solid rgba(255,255,255,.18); border-radius:18px; background:rgba(255,255,255,.08); color:var(--offwhite); font-family:'Inter',sans-serif; font-size:11px; font-weight:700; cursor:pointer; touch-action:manipulation;}
  #cv-review-overlay{z-index:390;}
  .cv-review-section-field{margin-top:14px;}
  .cv-review-section-field label{display:block; margin-bottom:6px; color:var(--brass-light); font-size:11px; text-transform:uppercase; letter-spacing:.08em;}
  .cv-mobile-scroll-hint{display:inline-block; margin-left:6px; color:var(--offwhite-dim); font-size:9px; font-weight:400; letter-spacing:0; text-transform:none;}
  .cv-review-section-field textarea{width:100%; min-height:76px; resize:vertical; font-family:ui-monospace,monospace; font-size:11px; line-height:1.45;}
  .cv-table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; border:1px solid var(--navy-line); border-radius:10px; background:rgba(0,0,0,.08);}
  .cv-edit-table{width:100%; min-width:760px; border-collapse:collapse; font-size:11px;}
  .cv-edit-table th{padding:8px 6px; text-align:left; color:var(--brass-light); background:rgba(0,0,0,.15); white-space:nowrap; font-size:10px;}
  .cv-edit-table td{padding:5px; border-top:1px solid var(--navy-line); vertical-align:middle;}
  .cv-edit-table td:first-child{width:28px; color:var(--offwhite-dim); text-align:center;}
  .cv-edit-table input{width:100%; min-width:92px; padding:7px 6px; font-size:11px;}
  .cv-edit-table .cv-history-reason{min-width:150px;}
  .cv-row-remove{border:0; background:transparent; color:#c77979; cursor:pointer; font-size:17px; padding:3px 6px;}
  .cv-add-row{margin-top:8px; border:1px solid var(--navy-line); background:transparent; color:var(--brass-light); border-radius:8px; padding:7px 10px; cursor:pointer; font-size:11px;}
  .cv-table-actions{display:flex; flex-wrap:wrap; gap:6px;}
  .cv-wizard-steps{display:flex; gap:5px; overflow:auto; margin:0 0 14px; padding-bottom:4px;}
  .cv-review-warnings{margin:8px 0 12px; padding:10px 12px; border:1px solid rgba(242,200,120,.48); border-left:3px solid var(--brass-light); border-radius:10px; background:rgba(242,200,120,.08); color:var(--offwhite); font-size:12px; line-height:1.45;}
  .cv-review-warnings strong{color:var(--brass-light);}
  .cv-review-warnings ul{margin:6px 0 0 18px; padding:0;}
  .cv-review-warnings li{margin:3px 0;}
  #cv-step-personal .field.cv-import-warning-field > label{color:var(--brass-light);}
  #cv-step-personal .field.cv-import-warning-field > input,
  #cv-step-personal .field.cv-import-warning-field > textarea{border-color:var(--brass-light); box-shadow:0 0 0 2px rgba(242,200,120,.12);}
  .cv-wizard-steps span{white-space:nowrap; font-size:10px; color:var(--offwhite-dim); padding:6px 8px; border:1px solid var(--navy-line); border-radius:999px;}
  .cv-wizard-steps span.active{color:var(--brass-light); border-color:var(--brass-light); background:rgba(242,200,120,.1);}
  .cert-category-card{border:1px solid var(--navy-line); background:rgba(255,255,255,.04); color:var(--offwhite); border-radius:12px; padding:15px 12px; text-align:left; cursor:pointer; min-height:96px;}
  .cert-category-card strong{display:block; color:var(--brass-light); font-size:14px; margin-bottom:7px;}
  .cert-category-card small{display:block; color:var(--offwhite-dim); line-height:1.45; font-size:11px;}
  .cert-category-card:active{transform:scale(.98);}
  .cert-category-card.selected{border-color:var(--brass-light); background:rgba(242,200,120,.12); box-shadow:0 0 0 1px rgba(242,200,120,.22);}
  .profile-collection-intro{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 0 10px; color:var(--offwhite-dim); font-size:12px;}
  .profile-collection-intro strong{color:var(--offwhite); font-family:'Spectral',serif; font-size:16px;}
  .profile-collection-summary{display:flex; align-items:center; gap:6px; margin:10px 0;}
  .profile-collection-selected-filter{display:inline-flex; align-items:center; gap:5px; min-height:30px; padding:4px 10px; border:1px solid #a8c3dc; border-radius:8px; background:#e4eef8; color:#365a7a; font:700 10px 'Inter',sans-serif;}
  .profile-collection-selected-filter strong{color:#244766; font-size:12px;}
  .summary-all-wrap{position:relative; grid-column:span 2; grid-row:2; min-width:0;}
  .profile-collection-summary button{display:inline-flex; align-items:center; justify-content:center; gap:4px; width:100px; min-height:30px; padding:4px 7px; border:1px solid var(--navy-line); border-radius:8px; background:var(--well-bg); color:var(--offwhite-dim); font:600 10px 'Inter',sans-serif; white-space:nowrap; cursor:pointer; touch-action:manipulation;}
  .profile-collection-summary > button,.summary-all-wrap > button{width:100%; min-width:0;}
  .profile-collection-summary button:active{transform:scale(.97);}
  .profile-collection-summary strong{color:var(--brass-light); font-size:12px;}
  .profile-collection-summary .is-active{box-shadow:0 0 0 2px var(--brass);}
  .profile-collection-summary .summary-total{background:#e4eef8; border-color:#a8c3dc; color:#365a7a;}
  .profile-collection-summary .summary-total strong{color:#244766;}
  .profile-collection-summary .summary-expired{background:#ffe1e1; border-color:#e58b8b; color:#a82323;}
  .profile-collection-summary .summary-expired strong{color:#8b1515;}
  .profile-collection-summary .summary-valid{background:#d9f7df; border-color:#8ed39d; color:#176b35;}
  .profile-collection-summary .summary-valid strong{color:#105326;}
  .profile-collection-summary .summary-soon{background:#fff0df; border-color:#f0aa68; color:#a34d06;}
  .profile-collection-summary .summary-soon strong{color:#843d05;}
  .profile-collection-summary .summary-none{background:#f1f3f5; border-color:#cfd6dc; color:#5c6770;}
  .profile-collection-summary .summary-none strong{color:#46515a;}
  .profile-collection-summary .summary-valid{grid-column:1; grid-row:1;}
  .profile-collection-summary .summary-none{grid-column:2; grid-row:1;}
  .profile-collection-summary .summary-soon{grid-column:3; grid-row:1;}
  .profile-collection-summary .summary-expired{grid-column:4; grid-row:1;}
  .profile-collection-summary .summary-clear-filter{grid-column:span 2; grid-row:2; width:100%; min-width:0; padding-inline:10px; background:transparent; border-color:#94a5b6; color:#526779; font-weight:700;}
  .profile-service-summary .summary-voyage-all{grid-column:span 2; grid-row:2;}
  .profile-collection-summary .summary-clear-filter:hover{background:#eef3f7; color:#2e536f;}
  .profile-service-summary{display:block;}
  .profile-service-ranks{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-bottom:6px;}
  .profile-service-actions{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px;}
  .profile-service-summary .profile-service-ranks button,.profile-service-summary .profile-service-actions button{width:100%; min-width:0;}
  .profile-service-summary .summary-voyage-all,.profile-service-summary .summary-clear-filter{grid-column:auto; grid-row:auto;}
  .profile-service-summary .summary-period{font-size:10px; font-weight:700; color:#244766; letter-spacing:.01em;}
  .summary-type-panel{position:absolute; top:calc(100% + 6px); left:0; z-index:14; display:flex; flex-direction:column; gap:5px; width:114px; padding:7px; border:1px solid var(--navy-line); border-radius:10px; background:var(--header-solid); box-shadow:0 10px 24px rgba(2,8,16,.26);}
  .summary-type-panel[hidden]{display:none;}
  .summary-type-panel button{width:100px; justify-content:center; color:var(--offwhite); background:var(--well-bg);}
  .summary-type-panel button.is-active{color:var(--brass-light);}
  .profile-collection-tools{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 40px 40px 40px; gap:8px; margin:10px 0 12px;}
  .profile-collection-tools .collection-search{grid-column:auto; width:100%;}
  .profile-collection-tools input,
  .profile-collection-tools select{min-width:0; width:100%; padding:9px 10px; border:1px solid var(--navy-line); border-radius:9px; background:var(--header-solid); color:var(--offwhite); font:12px 'Inter',sans-serif;}
  .profile-collection-tools select{appearance:auto; cursor:pointer;}
  .profile-collection-tools button{min-width:42px; padding:8px 10px; border:1px solid var(--navy-line); border-radius:9px; background:var(--well-bg); color:var(--brass-light); cursor:pointer; font-size:13px; touch-action:manipulation; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:5px;}
  .profile-collection-tools button:active{transform:scale(.97);}
  .collection-icon-tool{width:40px; min-width:40px!important; height:40px; padding:0!important;}
  .collection-icon-tool .collection-line-icon{width:18px; height:18px;}
  .collection-sort-wrap{position:relative;}
  .collection-filter-wrap{position:relative;}
  .collection-filter-panel{width:145px;}
  .collection-sort-panel{position:absolute; top:calc(100% + 6px); right:0; z-index:14; display:flex; flex-direction:column; gap:5px; width:145px; padding:7px; border:1px solid var(--navy-line); border-radius:10px; background:var(--header-solid); box-shadow:0 10px 24px rgba(2,8,16,.26);}
  .collection-sort-panel[hidden]{display:none;}
  .collection-sort-panel button{width:100%; min-width:0!important; justify-content:flex-start; padding:8px!important; font-size:11px!important; color:var(--offwhite)!important;}
  .collection-sort-panel button.is-active{color:var(--brass-light)!important; box-shadow:0 0 0 1px var(--brass);}
  .collection-sort-control{min-width:0; width:100%; display:flex; align-items:center; gap:5px; padding:0 7px; border:1px solid var(--navy-line); border-radius:9px; background:var(--well-bg); color:var(--brass-light);}
  .collection-sort-control .collection-line-icon{flex:0 0 15px;}
  .collection-sort-control select{border:0; padding:9px 2px; background:transparent;}
  .collection-line-icon{width:15px; height:15px; display:block; color:currentColor;}
  .collection-line-icon path{fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  @media (max-width:520px){
    .profile-collection-tools{grid-template-columns:minmax(0,1fr) 40px 40px 40px;}
  }
  .profile-collection-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  .profile-collection-grid .profile-doc-card{margin-bottom:0;}
  .profile-collection-grid .profile-info-grid{grid-template-columns:1fr; gap:8px;}
  .profile-info-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin-bottom:8px;
  }
  .profile-info-item{min-width:0;}
  .profile-info-label{font-family:'Inter',sans-serif; font-size:11px; color:var(--offwhite-dim); text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px;}
  .profile-info-value{font-family:'Inter',sans-serif; font-size:14.5px; color:var(--offwhite); word-break:break-word;}
  .profile-info-value.empty{color:var(--offwhite-dim); font-style:italic;}
  .collection-issued-by-content{display:flex; align-items:flex-start; justify-content:space-between; gap:8px;}
  .collection-issued-by-content .profile-info-value{min-width:0; flex:1 1 auto;}
  .collection-issued-by-status{display:flex; flex:0 0 auto; flex-direction:column; align-items:flex-end; gap:2px; text-align:right;}
  .collection-issued-by-status .expiry-badge{padding:2px 5px; font-size:8px; line-height:1.1;}
  .collection-issued-by-status .certificate-expiry-period{font-size:7px; line-height:1.1;}
  .profile-doc-card{
    background:var(--well-bg); border:1px solid var(--navy-line); border-radius:12px; padding:14px; margin-bottom:12px;
  }
  .profile-doc-card-title{font-family:'Inter',sans-serif; font-weight:700; font-size:13px; color:var(--brass-light); margin-bottom:8px;}
  .profile-doc-list-row{display:grid; width:100%; box-sizing:border-box; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:60px; padding:10px 12px; background:var(--well-bg); border:1px solid var(--navy-line); border-radius:12px; cursor:pointer; list-style:none;}
  .profile-doc-list-row + .profile-doc-list-row{margin-top:12px;}
  #collection-doc-detail-overlay{z-index:10001!important; align-items:center; padding:20px 14px;}
  #collection-doc-detail-overlay .collection-doc-detail-modal{max-width:420px; width:100%; max-height:min(78dvh,620px); overflow:auto; border-radius:20px; border-bottom:1px solid var(--navy-line); box-shadow:0 18px 48px rgba(0,0,0,.42), inset 0 1px 0 var(--glass-hi);}
  .collection-doc-detail-modal .modal-header{position:relative; padding:16px 128px 16px 18px;}
  .collection-doc-detail-modal .modal-header .profile-detail-actions{position:absolute; top:50%; right:46px; width:auto; min-width:0; transform:translateY(-50%);}
  .collection-doc-detail-modal .modal-close{position:absolute; top:50%; right:12px; width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center; transform:translateY(-50%);}
  .collection-doc-detail-modal .modal-body{padding-top:4px;}
  .profile-doc-list-photo,.profile-doc-list-photo-button{width:46px; min-width:46px; max-width:46px; height:46px; min-height:46px; max-height:46px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0; border:1px solid var(--navy-line); border-radius:9px; background:var(--header-solid); color:var(--brass-light); cursor:pointer;}
  .profile-doc-list-photo img,.profile-doc-list-photo-button img{width:100%; height:100%; max-width:100%; object-fit:contain; object-position:center; display:block; background:#fff;}
  .profile-doc-list-photo svg,.profile-doc-list-photo-button svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
  .certificate-pdf-thumbnail{width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; background:#fff4f4; color:#b4232f;}
  .certificate-pdf-thumbnail svg{width:23px!important; height:23px!important; fill:none!important; stroke:currentColor!important; stroke-width:1.7!important;}
  .certificate-pdf-thumbnail span{font:800 8px 'Inter',sans-serif; letter-spacing:.04em;}
  .profile-doc-list-name{display:flex; min-width:0; flex-direction:column; align-items:flex-start; gap:3px; overflow:visible; color:var(--offwhite); font:700 13px 'Inter',sans-serif;}
  .profile-doc-list-name-text,.profile-doc-grid-name-text{display:block; min-width:0; max-width:100%; overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; line-height:1.14;}
  .profile-doc-list-name-text.is-name-long,.profile-doc-grid-name-text.is-name-long{font-size:11px; line-height:1.12;}
  .profile-doc-list-name-text.is-name-very-long,.profile-doc-grid-name-text.is-name-very-long{font-size:9.5px; line-height:1.1; letter-spacing:-.01em;}
  .profile-doc-uploaded-label{display:inline-flex; align-items:center; max-width:100%; color:var(--brass-light); font:700 9px 'Inter',sans-serif; letter-spacing:.025em; line-height:1.15; white-space:normal;}
  .profile-doc-uploaded-label::before{content:'✓'; margin-right:3px; font-size:8px;}
  .profile-doc-list-status{display:flex; flex-direction:column; align-items:flex-end; justify-self:end; gap:3px;}
  .collection-doc-title-row{display:flex; min-width:0; align-items:center; gap:8px;}
  .collection-doc-title-row h2{display:-webkit-box; min-width:0; flex:1 1 auto; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:normal; overflow-wrap:anywhere; line-height:1.12; -webkit-box-orient:vertical; -webkit-line-clamp:2; max-height:2.24em; font-size:13px;}
  .collection-doc-title-row h2.is-long{font-size:12px;}
  .collection-doc-title-row h2.is-very-long{font-size:11px;}
  #collection-doc-detail-status{display:inline-flex; flex:0 0 auto; align-items:center;}
  #collection-doc-detail-status .expiry-badge{font-size:9px; padding:3px 6px;}
  .profile-doc-grid-card{display:grid; grid-template-columns:clamp(54px,35%,110px) minmax(0,1fr); grid-template-rows:auto auto; align-items:center; gap:8px 10px; min-width:0; min-height:116px; padding:10px; overflow:visible; background:var(--well-bg); border:1px solid var(--navy-line); border-radius:12px;}
  .profile-doc-grid-photo{grid-column:1; grid-row:1 / span 2; width:100%; aspect-ratio:1 / 1; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:9px; background:var(--header-solid); border:1px solid var(--navy-line); color:var(--brass-light);}
  .profile-doc-grid-photo-button{padding:0; cursor:pointer; appearance:none; -webkit-appearance:none;}
  .profile-doc-grid-photo img{width:100%; height:100%; object-fit:contain; object-position:center; display:block; background:#fff;}
  .profile-doc-grid-photo svg{width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
  .profile-doc-grid-name{display:flex; grid-column:2; grid-row:1; align-self:center; min-width:0; flex-direction:column; gap:3px; overflow:visible; color:var(--offwhite); font:700 13px 'Inter',sans-serif;}
  .profile-doc-grid-name .profile-doc-uploaded-label{font-size:8.5px;}
  .profile-doc-grid-status{display:flex; flex-direction:column; align-items:flex-start; grid-column:2; grid-row:2; align-self:start; gap:3px;}
  .collection-doc-detail-preview{display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:10px; width:100%; margin-top:12px; padding:9px; border:1px solid var(--navy-line); border-radius:11px; background:var(--well-bg); color:var(--offwhite); text-align:left; cursor:pointer;}
  .collection-doc-detail-preview:active{transform:scale(.99);}
  .collection-doc-detail-preview.is-empty{cursor:default; opacity:.78;}
  .collection-doc-detail-preview.is-empty:active{transform:none;}
  .collection-doc-detail-preview-thumb{width:64px; height:64px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--navy-line); border-radius:8px; background:var(--header-solid);}
  .collection-doc-detail-preview-thumb img{width:100%; height:100%; object-fit:contain; object-position:center; display:block; background:#fff;}
  .collection-doc-detail-preview-copy{display:flex; min-width:0; flex-direction:column; gap:3px;}
  .collection-doc-detail-preview-copy strong{overflow:hidden; color:var(--offwhite); font:700 12px 'Inter',sans-serif; text-overflow:ellipsis; white-space:nowrap;}
  .collection-doc-detail-preview-copy small{color:var(--brass-light); font:600 10px 'Inter',sans-serif;}
  #collection-voyage-detail-overlay{z-index:385; align-items:center; padding:20px 14px;}
  #collection-voyage-detail-overlay .collection-voyage-detail-modal{max-width:420px; width:100%; max-height:min(78dvh,620px); overflow:auto; border-radius:20px; border-bottom:1px solid var(--navy-line); box-shadow:0 18px 48px rgba(0,0,0,.42), inset 0 1px 0 var(--glass-hi);}
  .collection-voyage-detail-modal .modal-header{position:relative; min-height:66px; box-sizing:border-box; padding:16px 156px 16px 18px;}
  .collection-voyage-detail-modal .modal-header .profile-detail-actions{position:absolute; top:50%; right:12px; width:auto; min-width:0; gap:2px; transform:translateY(-50%);}
  .collection-voyage-detail-preview{display:flex; width:64px; height:64px; align-items:center; justify-content:center; margin-top:12px; overflow:hidden; border:1px solid var(--navy-line); border-radius:9px; background:var(--header-solid); color:var(--brass-light);}
  .collection-voyage-detail-preview img{width:100%; height:100%; object-fit:cover; display:block;}
  .collection-voyage-detail-preview svg{width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round;}
  .profile-service-list-row{display:grid; width:100%; box-sizing:border-box; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:68px; padding:10px 12px; background:var(--well-bg); border:1px solid var(--navy-line); border-radius:12px; cursor:pointer; list-style:none; touch-action:manipulation;}
  .profile-service-list-row + .profile-service-list-row{margin-top:12px;}
  .profile-service-list-thumb{width:46px; height:46px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--navy-line); border-radius:9px; background:var(--header-solid); color:var(--brass-light);}
  .profile-service-list-thumb img,.profile-service-grid-card .profile-doc-grid-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  .profile-service-list-thumb svg{width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round;}
  .profile-service-list-copy{display:flex; min-width:0; flex-direction:column; gap:4px; overflow:hidden;}
  .profile-service-list-name{overflow:hidden; color:var(--offwhite); font:700 13px 'Inter',sans-serif; text-overflow:ellipsis; white-space:nowrap;}
  .profile-service-list-duration{overflow:hidden; color:var(--offwhite-dim); font:600 11px 'Inter',sans-serif; text-overflow:ellipsis; white-space:nowrap;}
  .profile-service-rank-badge{display:inline-flex; max-width:82px; align-items:center; justify-content:center; padding:4px 7px; border:1px solid transparent; border-radius:999px; font:800 10px 'Inter',sans-serif; letter-spacing:.02em; line-height:1.15; text-align:center; white-space:nowrap;}
  .profile-service-rank-badge.command{background:#f8e2ae; color:#6c4301; border-color:#d9ad4c;}
  .profile-service-rank-badge.officer{background:#d9eaff; color:#164e85; border-color:#8bbce8;}
  .profile-service-rank-badge.engineer{background:#eadcff; color:#623a91; border-color:#b99be0;}
  .profile-service-rank-badge.crew{background:#d9f3e2; color:#17643b; border-color:#8bc9a2;}
  .profile-service-rank-badge.other{background:#e5e7eb; color:#4b5563; border-color:#cbd0d8;}
  .profile-service-summary .summary-clear-filter{grid-column:auto; grid-row:auto;}
  .profile-service-summary .profile-service-rank-filter.command{background:#f8e2ae; color:#6c4301; border-color:#d9ad4c;}
  .profile-service-summary .profile-service-rank-filter.command strong{color:#6c4301;}
  .profile-service-summary .profile-service-rank-filter.officer{background:#d9eaff; color:#164e85; border-color:#8bbce8;}
  .profile-service-summary .profile-service-rank-filter.officer strong{color:#164e85;}
  .profile-service-summary .profile-service-rank-filter.engineer{background:#eadcff; color:#623a91; border-color:#b99be0;}
  .profile-service-summary .profile-service-rank-filter.engineer strong{color:#623a91;}
  .profile-service-summary .profile-service-rank-filter.crew{background:#d9f3e2; color:#17643b; border-color:#8bc9a2;}
  .profile-service-summary .profile-service-rank-filter.crew strong{color:#17643b;}
  .profile-service-summary .profile-service-rank-filter.other{background:#e5e7eb; color:#4b5563; border-color:#cbd0d8;}
  .profile-service-summary .profile-service-rank-filter.other strong{color:#4b5563;}
  .profile-service-summary .profile-service-rank-filter.is-active{box-shadow:0 0 0 2px var(--brass);}
  .profile-service-grid-card .profile-service-list-duration{font-size:8.5px;}
  .profile-service-grid-card .profile-service-rank-badge{font-size:9px; padding:3px 6px;}
  .expiry-badge{display:inline-flex; align-items:center; width:max-content; padding:3px 8px; border-radius:999px; font:700 10px 'Inter',sans-serif; letter-spacing:.02em; line-height:1.2; text-transform:uppercase;}
  .expiry-badge.valid{background:#d9f7df; color:#176b35; border:1px solid #8ed39d;}
  .expiry-badge.soon{background:#fff0df; color:#a34d06; border:1px solid #f0aa68;}
  .expiry-badge.expired{background:#ffe1e1; color:#a82323; border:1px solid #e58b8b;}
  .expiry-badge.none{background:#e5e7eb; color:#4b5563; border:1px solid #cbd0d8; padding:3px 8px; font-size:9px; font-weight:700; letter-spacing:.01em; text-transform:none; opacity:1;}
  .certificate-expiry-period{display:block; font:700 8px 'Inter',sans-serif; letter-spacing:.01em; line-height:1.15; white-space:nowrap;}
  .certificate-expiry-period.valid{color:#176b35;}
  .certificate-expiry-period.soon{color:#a34d06;}
  .certificate-expiry-period.expired{color:#a82323;}
  .certificate-expiry-period.none{color:#4b5563;}
  @media (max-width:520px){
    .profile-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
  }
  .profile-ss-card{
    background:var(--well-bg); border:1px solid var(--navy-line); border-radius:12px; padding:14px; margin-bottom:10px;
  }
  .profile-ss-vessel{font-family:'Inter',sans-serif; font-weight:700; font-size:14.5px; color:var(--offwhite);}
  .profile-ss-rank-badge{
    display:inline-block; background:var(--brass); color:var(--navy-deep); font-weight:700; font-size:11px;
    padding:2px 8px; border-radius:10px; margin-left:8px; vertical-align:middle;
  }
  .profile-ss-meta{font-family:'Inter',sans-serif; font-size:12.5px; color:var(--offwhite-dim); margin-top:4px;}
  .field select{
    background:var(--well-bg);
    backdrop-filter:var(--glass-blur-soft);
    -webkit-backdrop-filter:var(--glass-blur-soft);
    border:1px solid var(--navy-line);
    color:var(--offwhite);
    padding:10px 11px;
    border-radius:12px;
    font-family:'Inter',sans-serif;
    font-size:14px;
    outline:none;
    transition:border-color .2s;
  }
  .field select:focus{border-color:var(--brass);}

  .photo-upload-row{
    display:flex;
    gap:16px;
    align-items:center;
    margin-bottom:18px;
  }
  .photo-preview-box{
    width:72px; height:72px; border-radius:16px;
    background:var(--well-bg); border:1px dashed var(--navy-line);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; overflow:hidden;
    font-size:26px; color:var(--offwhite-dim);
  }
  .photo-preview-box img{width:100%; height:100%; object-fit:cover;}
  .photo-upload-controls{display:flex; flex-direction:column; gap:6px;}
  .photo-upload-controls label{font-size:12px; color:var(--offwhite-dim); letter-spacing:.2px;}
  .photo-upload-controls input[type="file"]{
    color:var(--offwhite-dim); font-size:12.5px; font-family:'Inter',sans-serif;
    max-width:220px;
  }
  .photo-hint{font-size:11px; color:#7f93a3;}

  .modal-footer{
    display:flex; justify-content:flex-end; gap:10px;
    padding:16px 22px; border-top:1px solid var(--navy-line);
  }
  /* Import CV wizard footer: one uniform, single-line action row on mobile. */
  #cv-review-footer{display:flex; flex-wrap:nowrap; gap:6px; justify-content:stretch; overflow-x:auto; scrollbar-width:none;}
  #cv-review-footer::-webkit-scrollbar{display:none;}
  #cv-review-footer > button{flex:1 1 0; min-width:0; height:40px; padding:0 6px; border-radius:999px; font-size:11px; line-height:1; white-space:nowrap; box-shadow:none;}
  #cv-review-footer > button:hover{filter:none; border-color:var(--brass-light); color:var(--offwhite);}
  #cv-review-footer > button:active{transform:scale(.98);}
  #cv-review-footer .btn-save-ship{background:rgba(255,255,255,.05); border:1px solid var(--navy-line); color:var(--offwhite-dim);}
  #cv-step-personal .cv-personal-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
  #cv-step-personal .cv-personal-grid .field{min-width:0;}
  #cv-step-personal .cv-personal-grid input,
  #cv-step-personal .cv-personal-grid select,
  #cv-step-personal .cv-personal-grid textarea{width:100%; min-width:0; box-sizing:border-box;}
  #cv-step-personal .cv-personal-grid input,
  #cv-step-personal .cv-personal-grid select{height:42px;}
  #cv-step-personal .cv-measurement-control{display:flex; gap:8px; min-width:0;}
  #cv-step-personal .cv-measurement-control input{flex:1 1 auto; min-width:0;}
  #cv-step-personal .cv-measurement-control select{flex:0 0 58px; min-width:58px;}
  @media(max-width:480px){
    #cv-step-personal .cv-personal-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
    #cv-step-personal .cv-personal-grid .field{gap:4px;}
    #cv-step-personal .cv-personal-grid .field label{font-size:10px; line-height:1.2;}
    #cv-step-personal .cv-personal-grid input,
    #cv-step-personal .cv-personal-grid select{height:38px; padding:8px; font-size:12px; border-radius:10px;}
    #cv-step-personal .cv-measurement-control{gap:4px;}
    #cv-step-personal .cv-measurement-control select{flex-basis:50px; min-width:50px; padding-left:4px; padding-right:4px;}
  }

  .btn-cancel{
    background:rgba(255,255,255,.05); border:1px solid var(--navy-line); color:var(--offwhite-dim);
    padding:10px 18px; border-radius:999px; font-family:'Inter',sans-serif; font-weight:600; font-size:14px; cursor:pointer;
  }
  .btn-cancel:hover{border-color:#e3775a; color:#e3775a;}
  .btn-save-ship{
    background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),linear-gradient(180deg,var(--brass-light),var(--brass));
    color:var(--on-brass); border:1px solid rgba(255,255,255,.4);
    padding:10px 22px; border-radius:999px; font-family:'Inter',sans-serif; font-weight:700; font-size:14px; cursor:pointer;
    box-shadow:0 6px 18px rgba(217,164,65,.32), inset 0 1px 0 rgba(255,255,255,.5);
  }
  .btn-save-ship:hover{filter:brightness(1.06);}

  /* ---------- Saved ship list (compact clickable rows) ---------- */
  .ship-card{
    background:var(--navy-mid);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--navy-line);
    border-radius:12px;
    margin-top:8px;
    overflow:hidden;
  }
  .ship-card-header{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    padding-right:104px;
    position:relative;
    cursor:pointer;
  }
  .ship-card-header:hover{background:rgba(224,177,92,.08);}
  .ship-thumb{
    width:44px; height:44px; border-radius:10px; flex-shrink:0; overflow:hidden;
    background:var(--well-bg); border:1px solid var(--navy-line);
    display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--offwhite-dim);
  }
  .ship-thumb .calc-line-icon{width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
  #calc-list.grid-mode .ship-thumb .calc-line-icon,#cargo-hub-list.grid-mode .ship-thumb .calc-line-icon{width:20px; height:20px;}
  .ship-thumb img{width:100%; height:100%; object-fit:cover;}
  .ship-photo-trigger{padding:0; border:0; cursor:pointer; touch-action:manipulation;}
  .ship-photo-trigger:focus-visible{outline:2px solid var(--brass-light); outline-offset:2px;}
  .ship-card-info{flex:1; min-width:0; text-align:left;}
  .ship-name-line{display:flex; align-items:flex-start; gap:7px; min-width:0;}
  .ship-card-info .name{
    font-family:'Spectral',serif; font-size:14px; font-weight:600; color:var(--offwhite);
    flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .ship-card-info .meta{
    font-size:11px; color:var(--offwhite-dim); margin-top:1px;
  }
  .ship-card-info .meta-grid-only{display:none;}
  .ship-chevron{
    font-size:20px; color:var(--offwhite-dim); flex-shrink:0;
  }
  .ship-card.is-active-ship{border-color:rgba(73,202,125,.62); box-shadow:0 0 0 1px rgba(73,202,125,.12),var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.12);}
  .ship-active-control{position:absolute; right:12px; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:flex-end; flex-shrink:0;}
  .ship-active-badge,.ship-set-active-btn{box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; width:78px; min-width:78px; height:28px; min-height:28px; padding:0; border-radius:8px; font:700 10px 'Inter',sans-serif; letter-spacing:.02em; white-space:nowrap;}
  .ship-active-badge{border:1px solid rgba(73,202,125,.55); background:rgba(73,202,125,.13); color:#53d68a;}
  .ship-active-badge::before{content:"✓"; margin-right:4px; font-size:11px; font-weight:800; line-height:1;}
  .ship-set-active-btn{border:1px solid rgba(242,200,120,.38); background:rgba(255,255,255,.035); color:var(--brass-light); cursor:pointer; touch-action:manipulation;}
  .ship-set-active-btn:active{transform:scale(.97); background:rgba(242,200,120,.13);}
  #ship-list.grid-mode{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
  }
  #ship-list.grid-mode .ship-card{margin-top:0; height:100%;}
  #ship-list.grid-mode .ship-card-header{
    flex-direction:row;
    align-items:center;
    gap:8px;
    height:100%;
    box-sizing:border-box;
    padding:10px;
    padding-right:10px;
    padding-bottom:36px;
    --grid-active-bottom-gap:8px;
  }
  #ship-list.grid-mode .ship-thumb{width:36px; height:36px; font-size:15px;}
  #ship-list.grid-mode .ship-card-info{width:auto;}
  #ship-list.grid-mode .ship-card-info .name{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    font-size:12.5px;
    line-height:1.25;
    word-break:break-word;
  }
  #ship-list.grid-mode .ship-card-info .meta{
    white-space:normal;
  }
  #ship-list.grid-mode .ship-card-info .meta-list-only{display:none;}
  #ship-list.grid-mode .ship-card-info .meta-grid-only{display:block;}
  #ship-list.grid-mode .ship-chevron{display:none;}
  #ship-list.grid-mode .ship-active-control{position:absolute; left:54px; right:auto; top:auto; bottom:var(--grid-active-bottom-gap); transform:none; align-self:auto;}

  /* Voyage Calculator grid cards use title-only text; descriptions remain visible in list view. */
  #voyage-hub-list.grid-mode .ship-card-info .meta{display:none;}
  #voyage-hub-list.grid-mode .ship-card-header{min-height:64px;}
  #voyage-hub-list.grid-mode .ship-card-info .name{white-space:normal; overflow:visible; text-overflow:clip;}
  #ship-list.grid-mode .ship-active-badge,#ship-list.grid-mode .ship-set-active-btn{width:72px; min-width:72px; height:26px; min-height:26px; padding:0; font-size:9px;}

  /* Cargo Calculation cards mirror the main calculator hub: descriptive list rows and title-only grid cards. */
  #cargo-hub-list{display:grid; gap:8px; margin-bottom:12px;}
  .cargo-calc-card .ship-card-header{padding-right:12px;}
  .cargo-calc-card .ship-card-info .name{white-space:normal; overflow:visible; text-overflow:clip;}
  .cargo-calc-card .ship-card-info .meta{white-space:normal; line-height:1.35;}
  #cargo-hub-list.grid-mode{grid-template-columns:repeat(2,1fr);}
  #cargo-hub-list.grid-mode .cargo-calc-card{margin-top:0; height:100%;}
  #cargo-hub-list.grid-mode .cargo-calc-card .ship-card-header{height:100%; min-height:64px; padding:10px; gap:8px;}
  #cargo-hub-list.grid-mode .cargo-calc-card .ship-thumb{width:36px; height:36px; font-size:15px;}
  #cargo-hub-list.grid-mode .cargo-calc-card .ship-card-info .name{font-size:12.5px; line-height:1.25; word-break:break-word;}
  #cargo-hub-list.grid-mode .cargo-calc-card .ship-card-info .meta{display:none;}
  
  #calc-list.grid-mode, #activity-list.grid-mode{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
  }
  #calc-list.grid-mode .ship-card, #activity-list.grid-mode .ship-card{margin-top:0;}

  /* Calculation cards: descriptions need the full row in list view; grid is deliberately label-only. */
  .calc-card .ship-card-header{padding-right:12px;}
  .calc-card .ship-card-info .name{white-space:normal; overflow:visible; text-overflow:clip;}
  .calc-card .ship-card-info .meta{white-space:normal; line-height:1.35;}
  #calc-list.grid-mode .calc-card{height:100%;}
  #calc-list.grid-mode .calc-card .ship-card-header{height:100%; min-height:64px; padding:10px; gap:8px;}
  #calc-list.grid-mode .calc-card .ship-thumb{width:36px; height:36px; font-size:15px;}
  #calc-list.grid-mode .calc-card .ship-card-info .name{font-size:12.5px; line-height:1.25; word-break:break-word;}
  #calc-list.grid-mode .calc-card .ship-card-info .meta{display:none;}

  #calc-list, #activity-list{
    display:grid;
    gap:8px;
    margin-bottom:12px;
  }
  #calc-list .calc-group{display:grid;gap:8px;margin-top:18px;}
  #calc-list .calc-group:first-child{margin-top:0;}
  #calc-list .calc-group-title{display:flex;align-items:center;gap:10px;margin:0;padding:0 2px;color:var(--offwhite);font:700 15px/1.25 'Inter',sans-serif;letter-spacing:.01em;}
  #calc-list .calc-group-title::after{content:"";height:1px;flex:1;background:var(--navy-line);}
  #calc-list .calc-group-list{display:grid;gap:8px;}
  #calc-list.grid-mode{display:flex;flex-direction:column;align-items:stretch;}
  #calc-list.grid-mode .calc-group{display:grid;grid-template-columns:1fr;width:100%;}
  #calc-list.grid-mode .calc-group-list{grid-template-columns:repeat(2,1fr);}
  #calc-list.grid-mode .calc-group-list .ship-card{margin-top:0;}

  .ship-card .row{
    display:flex; justify-content:space-between; padding:8px 12px; font-size:12px;
    border-bottom:1px dashed var(--navy-line);
  }
  .ship-card .row:last-child{border-bottom:none;}
  .ship-card .row span:first-child{color:var(--offwhite-dim);}
  .ship-card .row span:last-child{font-family:'Inter',sans-serif; font-weight:600; text-align:right;}

  /* True Wind opens as a compact overview; input fields are revealed deliberately. */
  .tw-overview{padding:10px 0 2px;}
  .tw-overview-card{padding:24px 18px; text-align:center; border:1px solid var(--navy-line); border-radius:16px; background:var(--well-bg); box-shadow:inset 0 1px 0 var(--glass-hi-soft);}
  .cable-scope-drawing{margin:16px auto 14px;max-width:420px;padding:10px;border:1px solid var(--navy-line);border-radius:14px;background:var(--well-bg);}
  .cable-scope-drawing svg{display:block;width:100%;height:auto;}
  .cable-scope-drawing img{display:block;width:100%;height:auto;border-radius:10px;}
  .cable-scope-water{fill:rgba(42,171,238,.18);}
  .cable-scope-seabed{fill:none;stroke:var(--offwhite-dim);stroke-width:2;}
  .cable-scope-ship{fill:var(--brass);stroke:var(--offwhite);stroke-width:1.5;}
  .cable-scope-mast,.cable-scope-chain,.cable-scope-depth{fill:none;stroke:var(--offwhite);stroke-width:2;}
  .cable-scope-chain{stroke:var(--brass-light);stroke-width:3;stroke-dasharray:4 3;}
  .cable-scope-anchor{fill:none;stroke:var(--brass-light);stroke-width:2;}
  .cable-scope-drawing text{fill:var(--offwhite);font:600 10px 'Inter',sans-serif;}
  .cable-scope-label{fill:var(--brass-light)!important;}
  .cable-scope-wizard-box{max-width:540px;}
  .cable-scope-results{display:grid;gap:0;border:1px solid var(--navy-line);border-radius:10px;overflow:hidden;background:var(--well-bg);}
  .cable-scope-result-row{display:flex;justify-content:space-between;gap:10px;padding:9px 11px;border-bottom:1px solid var(--navy-line);font-size:12px;text-align:left;}
  .cable-scope-result-row span{color:var(--offwhite-dim);}
  .cable-scope-result-row strong{color:var(--offwhite);text-align:right;}
  .cable-scope-result-heading{padding:8px 11px 5px;color:var(--brass-light);font:700 11px/1.2 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.05em;}
  .cable-scope-review-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px;}
  #squat-table-view{z-index:321;}
  #squat-table-wizard-overlay{z-index:400;align-items:center;padding:18px 14px;box-sizing:border-box;}
  #squat-table-result-overlay{z-index:460;align-items:center;padding:18px 14px;box-sizing:border-box;}
  #squat-table-result-overlay .modal-box{max-height:min(84dvh,680px);border-radius:20px;}
  #squat-table-wizard-overlay .modal-box{max-height:min(84dvh,680px);border-radius:20px;border-bottom:1px solid var(--navy-line);}
  #squat-table-wizard-overlay .modal-body{overflow-y:auto;}
  .squat-table-card{margin-top:14px;}
  .squat-table-card .btn-save-ship{margin-top:14px;width:100%;}
  .squat-table-result-card{margin-top:14px;}
  .squat-table-wrap{overflow-x:auto;border:1px solid var(--navy-line);border-radius:10px;}
  .squat-table{width:100%;min-width:430px;border-collapse:collapse;font:500 11px/1.35 'Inter',sans-serif;}
  .squat-table th,.squat-table td{padding:9px 8px;border-bottom:1px solid var(--navy-line);text-align:right;white-space:nowrap;}
  .squat-table th{color:var(--brass-light);background:rgba(255,255,255,.035);font-weight:700;}
  .squat-table td:first-child,.squat-table th:first-child{text-align:left;}
  .cable-scope-error{padding:12px;border-left:3px solid #C1502E;background:#C1502E22;color:#ff9b88;}
  .tw-overview-icon{display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin:0 auto 12px; border:1px solid var(--navy-line); border-radius:14px; background:var(--header-solid); font-size:25px;}
  .tw-overview-card h3{margin:0; color:var(--offwhite); font:700 19px/1.2 'Spectral',serif;}
  .tw-overview-card p{max-width:290px; margin:8px auto 18px; color:var(--offwhite-dim); font:500 12px/1.55 'Inter',sans-serif;}
  .tw-overview-card .tw-steps-accordion{margin:0 0 18px; border:1px solid var(--navy-line); border-radius:13px; text-align:left; background:rgba(255,255,255,.025);}
  .tw-overview-card .tw-steps-accordion > summary{min-height:44px; padding-right:28px;}
  .tw-overview-card .tw-steps-accordion > summary > .profile-section-head{display:flex; min-height:44px; padding:10px 0 10px 12px;}
  .tw-overview-card .tw-steps-accordion .form-group-title{margin:0; color:var(--brass-light); font-size:11px; letter-spacing:.08em; text-transform:uppercase;}
  .tw-overview-card .tw-steps-accordion .profile-accordion-body{padding:0 0 4px;}
  .calc-reference-notice{display:flex; align-items:center; justify-content:center; min-height:34px; margin:-7px 0 18px; padding:8px 12px; border:1px solid rgba(185,121,30,.40); border-radius:10px; background:rgba(185,121,30,.08); color:#ed8a1a; font:800 10px/1.2 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase;}
  .tw-inline-step{display:grid; grid-template-columns:25px minmax(0,1fr); gap:9px; align-items:start; padding:9px 12px; border-top:1px dashed var(--navy-line);}
  .tw-inline-step-number{display:flex; align-items:center; justify-content:center; width:25px; height:25px; border:1px solid rgba(185,121,30,.48); border-radius:50%; background:rgba(185,121,30,.10); color:var(--brass-light); font:800 11px/1 'Inter',sans-serif;}
  .tw-inline-step strong{display:block; margin:1px 0 2px; color:var(--offwhite); font:700 12px/1.2 'Inter',sans-serif;}
  .tw-inline-step span{display:block; color:var(--offwhite-dim); font:500 10px/1.4 'Inter',sans-serif;}
  .tw-overview-card .btn-save-ship{width:100%; min-height:42px;}
  #deadweight-view h1.detail-header-title{margin:0;}
  .tw-subtabs{margin:0 0 12px; padding:0;}
  .tw-wizard-stepper{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:12px 0 18px;}
  .tw-wizard-stepper span{min-height:48px; padding:6px 4px; border:1px solid var(--navy-line); border-radius:10px; color:var(--offwhite-dim); background:var(--well-bg); text-align:center; font:700 13px/1.1 'Inter',sans-serif;}
  .tw-wizard-stepper span small{display:block; margin-top:4px; font:600 9px/1.15 'Inter',sans-serif; letter-spacing:.05em; text-transform:uppercase;}
  .tw-wizard-stepper span.active{border-color:rgba(185,121,30,.52); color:var(--brass-light); background:rgba(185,121,30,.10);}
  .tw-wizard-stepper span.complete{color:var(--offwhite); background:rgba(255,255,255,.05);}
  .tw-wizard-card{padding:15px; border:1px solid var(--navy-line); border-radius:15px; background:var(--well-bg); box-shadow:inset 0 1px 0 var(--glass-hi-soft);}
  .tw-wizard-card h3{margin:0 0 4px; color:var(--offwhite); font:700 18px/1.2 'Spectral',serif;}
  .tw-wizard-card .tw-lead{margin:0 0 16px; color:var(--offwhite-dim); font:500 12px/1.45 'Inter',sans-serif;}
  .sd-start-sounding-wrap{display:flex; justify-content:center; margin-top:16px;}
  .sd-start-sounding-wrap .btn-save-ship{width:auto; min-width:158px;}
  #sd-wizard-overlay{z-index:403;}
  #sd-wizard-overlay .modal-box{width:min(540px,calc(100vw - 28px)); max-height:90dvh;}
  .sdw-draft-sketch{margin:0 0 14px; padding:11px 8px 12px; border:1px solid var(--navy-line); border-radius:16px; background:var(--header-solid);}
  .sdw-draft-sketch-key{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 4px 9px; color:var(--offwhite-dim); font:700 9px/1 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase;}
  .sdw-draft-sketch-key strong{color:var(--brass-light); font-size:10px; letter-spacing:.1em;}
  .sdw-draft-sketch-layout{display:grid; grid-template-columns:minmax(0,1fr) 122px; grid-template-rows:repeat(2,minmax(70px,auto)); align-items:center; column-gap:10px; row-gap:8px;}
  .sdw-draft-node{min-width:0;}
  .sdw-draft-node label{display:block; margin:0 0 5px; color:var(--offwhite-dim); font:700 9px/1.15 'Inter',sans-serif; letter-spacing:.04em; text-transform:uppercase;}
  .sdw-draft-node input{box-sizing:border-box; width:100%; height:37px; min-width:0; padding:0 8px; border:1px solid var(--navy-line); border-radius:10px; background:var(--surface-strong); color:var(--offwhite); font:700 12px 'Inter',sans-serif; outline:none;}
  .sdw-draft-node input:focus,.sdw-density-field input:focus{border-color:var(--brass); box-shadow:0 0 0 2px rgba(185,121,30,.12);}
  .sdw-draft-node.forward{grid-column:2; grid-row:1;}
  .sdw-draft-node.aft{grid-column:2; grid-row:2;}
  .sdw-draft-vessel{grid-column:1; grid-row:1 / span 2; align-self:stretch; display:flex; align-items:center; justify-content:center; min-height:156px; padding:4px 0;}
  .sdw-draft-vessel svg{display:block; width:100%; height:100%; min-height:156px;}
  .sdw-draft-vessel.top-view{padding:0 10px;}
  .sdw-draft-vessel.top-view svg{width:108px; max-width:100%;}
  .sdw-draft-vessel .sdw-hull{fill:rgba(185,121,30,.09); stroke:var(--brass-light); stroke-width:2; stroke-linejoin:round;}
  .sdw-draft-vessel .sdw-deck{fill:none; stroke:var(--offwhite); stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; opacity:.85;}
  .sdw-draft-vessel .sdw-water{stroke:var(--offwhite-dim); stroke-width:1.2; stroke-dasharray:5 4;}
  .sdw-draft-vessel .sdw-centreline{fill:none; stroke:var(--offwhite-dim); stroke-width:1.15; stroke-dasharray:3 3;}
  .sdw-draft-vessel .sdw-station{fill:none; stroke:var(--brass-light); stroke-width:1.1; opacity:.86;}
  .sdw-draft-vessel .sdw-mark{fill:var(--brass-light);}
  .sdw-draft-vessel .sdw-leader{fill:none; stroke:var(--brass-light); stroke-width:1.15; stroke-linecap:round;}
  .sdw-draft-vessel text{fill:var(--offwhite-dim); font:800 8px 'Inter',sans-serif; letter-spacing:.08em;}
  .sdw-sketch-trim{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding:9px 10px; border-top:1px solid var(--navy-line); color:var(--offwhite-dim); font:700 10px/1.25 'Inter',sans-serif; letter-spacing:.035em; text-transform:uppercase;}
  .sdw-sketch-trim strong{font-size:12px; letter-spacing:.025em; text-align:right; text-transform:uppercase;}
  .sdw-sketch-trim strong.trim-head{color:#e34c52;}
  .sdw-sketch-trim strong.trim-stern{color:#35c98b;}
  .sdw-sketch-trim strong.trim-even,.sdw-sketch-trim strong.trim-empty{color:var(--offwhite-dim);}
  .sdw-density-field{margin-top:12px;}
  .sdw-density-field label{display:block; margin:0 0 6px; color:var(--offwhite-dim); font:700 11px 'Inter',sans-serif;}
  .sdw-density-field input{box-sizing:border-box; width:100%; height:40px; padding:0 11px; border:1px solid var(--navy-line); border-radius:11px; background:var(--surface-strong); color:var(--offwhite); font:700 13px 'Inter',sans-serif; outline:none;}
  .sdw-tank-filter{margin-top:14px; padding:11px; border:1px solid var(--navy-line); border-radius:12px; background:var(--header-solid);}
  .sdw-tank-filter-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:9px;}
  .sdw-tank-filter-head strong{display:block; color:var(--offwhite); font:700 12px/1.25 'Inter',sans-serif;}
  .sdw-tank-filter-head small{display:block; margin-top:2px; color:var(--offwhite-dim); font:600 10px/1.3 'Inter',sans-serif;}
  .sdw-tank-filter-count{flex:0 0 auto; padding:4px 7px; border-radius:999px; background:rgba(185,121,30,.12); color:var(--brass-light); font:800 10px/1 'Inter',sans-serif;}
  .sdw-tank-filter-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px;}
  .sdw-tank-filter-option{position:relative; min-width:0; cursor:pointer;}
  .sdw-tank-filter-option input{position:absolute; opacity:0; pointer-events:none;}
  .sdw-tank-filter-option span{display:block; min-height:35px; box-sizing:border-box; padding:8px 8px; border:1px solid var(--navy-line); border-radius:10px; background:var(--surface-strong); color:var(--offwhite-dim); font:700 10px/1.2 'Inter',sans-serif; overflow-wrap:anywhere; transition:border-color .14s ease,background .14s ease,color .14s ease;}
  .sdw-tank-filter-option input:checked + span{border-color:rgba(185,121,30,.58); background:rgba(185,121,30,.12); color:var(--brass-light); box-shadow:inset 0 0 0 1px rgba(185,121,30,.08);}
  .sdw-tank-filter-option input:focus-visible + span{outline:2px solid var(--brass); outline-offset:2px;}
  .sdw-tank-table-wrap{overflow:hidden; margin:0; padding:0;}
  .sdw-tank-table{width:100%; min-width:0; table-layout:fixed; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--navy-line); border-radius:10px; font:700 9px 'Inter',sans-serif;}
  .sdw-tank-table th{padding:7px 3px; background:var(--navy-line); color:var(--offwhite-dim); text-align:center; font:800 8px/1.1 'Inter',sans-serif; letter-spacing:.03em; text-transform:uppercase; overflow-wrap:anywhere;}
  .sdw-tank-table th:first-child{text-align:left;}
  .sdw-tank-table td{padding:7px 3px; border-top:1px solid var(--navy-line); color:var(--offwhite); vertical-align:middle; overflow-wrap:anywhere;}
  .sdw-tank-table td:first-child{width:28%; min-width:0; padding-left:6px;}
  .sdw-tank-table td:not(:first-child){width:auto; text-align:center;}
  .sdw-tank-table input{box-sizing:border-box; width:100%; min-width:0; height:32px; padding:0 3px; border:1px solid var(--navy-line); border-radius:7px; background:var(--surface-strong); color:var(--offwhite); text-align:right; font:700 10px 'Inter',sans-serif; outline:none;}
  .sdw-tank-table input:focus{border-color:var(--brass); box-shadow:0 0 0 2px rgba(185,121,30,.12);}
  .sdw-tank-table .unit{display:block; margin-top:3px; color:var(--offwhite-dim); font:600 9px/1.1 'Inter',sans-serif;}
  .sdw-tank-entry{display:grid; grid-template-columns:minmax(0,1fr) 105px; gap:9px; align-items:center; padding:10px 0; border-top:1px solid var(--navy-line);}
  .sdw-tank-entry:first-child{border-top:0; padding-top:0;}
  .sdw-tank-entry strong{display:block; color:var(--offwhite); font:700 12px/1.25 'Inter',sans-serif;}
  .sdw-tank-entry small{display:block; margin-top:3px; color:var(--offwhite-dim); font:600 10px/1.2 'Inter',sans-serif;}
  .sdw-tank-entry input{width:100%; height:38px; box-sizing:border-box; padding:0 8px; border:1px solid var(--navy-line); border-radius:10px; background:var(--surface-strong); color:var(--offwhite); text-align:right; font:700 12px 'Inter',sans-serif; outline:none;}
  @media(max-width:390px){.sdw-draft-sketch-layout{grid-template-columns:minmax(0,1fr) 102px; column-gap:6px;}.sdw-draft-node label{font-size:8px;}.sdw-draft-node input{padding:0 6px;font-size:11px;}.sdw-tank-entry{grid-template-columns:minmax(0,1fr) 90px;}.sdw-tank-filter{padding:10px;}.sdw-tank-filter-list{gap:6px;}.sdw-tank-filter-option span{min-height:33px;padding:7px;font-size:9px;}.sdw-tank-table th{padding:6px 2px;font-size:7px;}.sdw-tank-table td{padding:6px 2px;}.sdw-tank-table td:first-child{padding-left:4px;}.sdw-tank-table input{height:30px;padding:0 2px;font-size:9px;}.sdw-tank-table .unit{font-size:7px;}}
  .tw-ship-choice{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 14px;}
  .tw-ship-choice button{min-height:42px; padding:8px; border:1px solid var(--navy-line); border-radius:10px; background:rgba(255,255,255,.035); color:var(--offwhite-dim); font:700 11px/1.2 'Inter',sans-serif;}
  .tw-ship-choice button.active{border-color:rgba(185,121,30,.52); color:var(--brass-light); background:rgba(185,121,30,.11);}
  .tw-ship-summary{margin:0 0 14px; padding:10px 12px; border:1px solid var(--navy-line); border-radius:10px; background:rgba(255,255,255,.025); color:var(--offwhite-dim); font:600 11px/1.4 'Inter',sans-serif;}
  .tw-ship-summary strong{display:block; margin-top:2px; color:var(--offwhite); font-size:13px;}
  #ds-setup-card > .btn-save-ship{width:100%; min-height:42px; margin-top:2px;}
  #ds-setup-custom-fields .grid-2{gap:8px;}
  #ds-setup-entry-list{margin-top:16px;}
  #ds-setup-entry-list .ship-card{margin-bottom:8px;}
  #ds-entries-list .ship-card-header,#ds-setup-entry-list .ship-card-header{padding-right:12px;}
  #ds-setup-entry-list .ds-setup-entry-open{cursor:pointer;}
  #ds-setup-entry-list .ds-setup-entry-open:focus-visible{outline:2px solid var(--brass-light); outline-offset:-2px; border-radius:10px;}
  #ds-entries-list .ds-entry-checkbox,#ds-setup-entry-list .ds-setup-entry-checkbox{margin-left:auto; flex:0 0 auto;}
  @media(max-width:480px){#ds-setup-custom-fields .grid-2{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}#ds-setup-custom-fields .field{min-width:0;}#ds-setup-custom-fields .field label{font-size:10px;}#ds-setup-custom-fields .field input{min-width:0;padding-left:8px;padding-right:8px;}}
  .ds-custom-ship-particulars{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px;}
  .ds-custom-ship-particulars .field{min-width:0;}
  .ds-custom-ship-particulars .field label{font-size:11px;}
  .ds-custom-ship-particulars .field input{min-width:0;}
  @media(max-width:480px){.ds-custom-ship-particulars{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}.ds-custom-ship-particulars .field{gap:4px;}.ds-custom-ship-particulars .field label{font-size:10px;}.ds-custom-ship-particulars .field input{padding-left:8px;padding-right:8px;}}
  .tw-side-toggle{min-width:82px; border:1px solid rgba(185,121,30,.42); border-radius:10px; background:rgba(185,121,30,.10); color:var(--brass-light); font:800 11px/1 'Inter',sans-serif;}
  .tw-wizard-actions{display:flex; gap:8px; margin-top:18px;}
  .tw-wizard-actions button{flex:1; min-height:42px;}
  .tw-review-section{margin-top:12px; border:1px solid var(--navy-line); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.025);}
  .tw-review-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid var(--navy-line);}
  .tw-review-head h4{margin:0; color:var(--brass-light); font:700 12px/1.2 'Inter',sans-serif;}
  .tw-review-edit{border:0; background:transparent; color:var(--brass-light); font:700 11px/1 'Inter',sans-serif;}
.tw-review-row{display:flex; justify-content:space-between; gap:12px; padding:8px 12px; border-bottom:1px dashed var(--navy-line); color:var(--offwhite-dim); font:500 11px/1.35 'Inter',sans-serif;}
.tw-review-row:last-child{border-bottom:0;}
.tw-review-row strong{color:var(--offwhite); text-align:right; font-weight:700;}
.tw-review-row>span:last-child{color:var(--offwhite); text-align:right; font-weight:700;}
.tw-review-head>div:first-child{margin:0; color:var(--brass-light); font:700 12px/1.2 'Inter',sans-serif;}
  .tw-activity-item{display:block; width:100%; margin-bottom:8px; padding:12px; border:1px solid var(--navy-line); border-radius:12px; background:var(--well-bg); color:inherit; text-align:left;}
  .tw-activity-item h4{margin:0 0 4px; color:var(--offwhite); font:700 13px/1.2 'Inter',sans-serif;}
  .tw-activity-item p{margin:0; color:var(--offwhite-dim); font:500 11px/1.4 'Inter',sans-serif;}
  .sd-ship-list-container{overflow:hidden; border:1px solid var(--navy-line); border-radius:14px; background:var(--well-bg);}
  .sd-ship-list-item{display:flex; align-items:center; gap:10px; margin:0; padding:13px 12px; border:0; border-radius:0; background:transparent;}
  .sd-ship-list-item + .sd-ship-list-item{border-top:1px solid var(--navy-line);}
  .sd-ship-list-item.is-selected{background:rgba(185,121,30,.11); box-shadow:inset 3px 0 0 var(--brass);}
  .sd-ship-list-copy{min-width:0; flex:1; cursor:pointer;}
  .sd-ship-list-copy h4{margin:0 0 5px; color:var(--offwhite); font:700 13px/1.2 'Inter',sans-serif;}
  .sd-ship-list-summary{margin:0; color:var(--offwhite-dim); font:600 11px/1.35 'Inter',sans-serif;}
  .sd-ship-list-date{margin:3px 0 0; color:var(--offwhite-dim); font:500 10px/1.35 'Inter',sans-serif;}
  .sd-ship-list-copy:focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:5px;}
  .sd-ship-list-row-actions{display:flex; flex:0 0 auto; align-items:center; gap:7px;}
  .sd-ship-review-btn{flex:0 0 auto; min-height:32px; padding:0 10px; border:1px solid rgba(185,121,30,.52); border-radius:9px; background:rgba(185,121,30,.10); color:var(--brass-light); font:800 10px/1 'Inter',sans-serif;}
  .sd-ship-select-check{display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; border:1px solid var(--navy-line); border-radius:9px; background:rgba(255,255,255,.025); cursor:pointer;}
  .sd-ship-select-check input{width:16px; height:16px; margin:0; accent-color:var(--brass); cursor:pointer;}
  .sd-register-actions{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:9px; margin-top:14px;}
  .sd-register-actions .btn-save-ship{margin:0;}
  .sd-delete-selected-btn{min-height:42px; border:1px solid rgba(193,80,46,.58); border-radius:11px; background:rgba(193,80,46,.10); color:#e89078; font:800 12px/1 'Inter',sans-serif;}
  .sd-delete-selected-btn:disabled{opacity:.46; cursor:not-allowed;}
  .cg-rob-row{margin:10px 0 0; padding:9px 10px 10px; border:1px solid var(--navy-line); border-radius:10px; background:var(--well-bg);}
  .cg-rob-row-label{display:block; margin:0 0 7px; color:var(--offwhite-dim); font:700 10px/1 'Inter',sans-serif; letter-spacing:.04em; text-transform:uppercase;}
  .cg-rob-row .field{margin-bottom:0;}
  .cg-rob-row .grid-2{gap:10px;}
  @media(max-width:480px){
    #cargo-wizard-overlay .cg-step2-primary-row,
    #cargo-wizard-overlay .cg-rob-row .grid-2{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
    #cargo-wizard-overlay .cg-step2-primary-row .tw-ship-summary{padding:10px;}
    #cargo-wizard-overlay .cg-step2-primary-row .tw-ship-summary span{font-size:10px; line-height:1.25;}
    #cargo-wizard-overlay .cg-step2-primary-row .tw-ship-summary strong{font-size:16px;}
    #cargo-wizard-overlay .cg-rob-row{margin-top:8px; padding:8px;}
    #cargo-wizard-overlay .cg-rob-row-label{margin-bottom:6px; font-size:9px;}
    #cargo-wizard-overlay .cg-rob-row .field{gap:4px; min-width:0;}
    #cargo-wizard-overlay .cg-rob-row .field label{min-height:28px; font-size:10px; line-height:1.25;}
    #cargo-wizard-overlay .cg-rob-row .field input{min-width:0; padding:9px 8px; font-size:15px;}
  }
  .tw-calc-intro{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; padding:12px; border:1px solid var(--navy-line); border-radius:14px; background:var(--well-bg);}
  .tw-calc-intro-copy{min-width:0;}
  .tw-calc-intro h3{margin:0 0 3px; color:var(--offwhite); font:700 13px/1.2 'Inter',sans-serif;}
  .tw-calc-intro p{margin:0; color:var(--offwhite-dim); font:500 11px/1.42 'Inter',sans-serif;}
  .tw-guide-btn{flex:0 0 auto; min-height:38px; padding:0 10px; border:1px solid rgba(185,121,30,.44); border-radius:10px; background:rgba(185,121,30,.10); color:var(--brass-light); font:800 10px/1.1 'Inter',sans-serif;}
  .tw-lower-summary{margin-top:18px; padding-top:16px; border-top:1px dashed var(--navy-line);}
  .tw-summary-title{margin:0 0 8px; color:var(--brass-light); font:800 11px/1.2 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase;}
  .tw-weather-card,.tw-recent-card{margin-bottom:14px; padding:12px; border:1px solid var(--navy-line); border-radius:13px; background:var(--well-bg);}
  .tw-weather-card strong,.tw-recent-card strong{display:block; margin-bottom:3px; color:var(--offwhite); font:700 13px/1.25 'Inter',sans-serif;}
  .tw-weather-card p,.tw-recent-card p{margin:0; color:var(--offwhite-dim); font:500 11px/1.42 'Inter',sans-serif;}
  .tw-recent-card{display:block; width:100%; color:inherit; text-align:left;}
  #truewind-result-overlay,#tw-wizard-overlay{z-index:460;}
  #tw-wizard-overlay{align-items:center; padding:18px 14px;}
  #tw-wizard-overlay .modal-box{max-height:min(84dvh,680px); border-radius:20px; border-bottom:1px solid var(--navy-line);}
  #tw-wizard-overlay .modal-body{overflow-y:auto;}
  #etaspeed-wizard-overlay{z-index:480; align-items:center; padding:18px 14px;}
  #etaspeed-wizard-overlay .modal-box{max-height:min(84dvh,680px); border-radius:20px; border-bottom:1px solid var(--navy-line);}
  #etaspeed-wizard-overlay .modal-body{overflow-y:auto;}
  #etaspeed-result-overlay{z-index:490;}
  #celestial-wizard-overlay{z-index:390; align-items:center; padding:18px 14px;}
  #celestial-wizard-overlay .modal-box{max-height:min(84dvh,680px); border-radius:20px; border-bottom:1px solid var(--navy-line);}
  #celestial-wizard-overlay .modal-body{overflow-y:auto;}
  .tw-guide-step{display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; padding:11px 0; border-bottom:1px dashed var(--navy-line);}
  .tw-guide-step:last-child{border-bottom:0;}
  .tw-guide-number{display:flex; width:28px; height:28px; align-items:center; justify-content:center; border:1px solid rgba(185,121,30,.48); border-radius:50%; background:rgba(185,121,30,.10); color:var(--brass-light); font:800 12px/1 'Inter',sans-serif;}
  .tw-guide-step h4{margin:1px 0 3px; color:var(--offwhite); font:700 13px/1.2 'Inter',sans-serif;}
  .tw-guide-step p{margin:0; color:var(--offwhite-dim); font:500 11px/1.45 'Inter',sans-serif;}
  .tw-section-divider{height:1px; margin:22px 0 16px; background:var(--navy-line);}
  .tw-activity-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 10px;}
  .tw-activity-head h3{margin:0; color:var(--offwhite); font:700 18px/1.2 'Spectral',serif;}
  .tw-activity-head p{margin:0; color:var(--offwhite-dim); font:500 10px/1.35 'Inter',sans-serif; text-align:right;}
  .tw-activity-tools{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 40px; gap:8px; margin:0 0 10px;}
  .tw-activity-tools input{min-width:0; width:100%; height:40px; box-sizing:border-box; padding:0 11px; border:1px solid var(--navy-line); border-radius:10px; background:var(--header-solid); color:var(--offwhite); font:12px 'Inter',sans-serif;}
  .tw-activity-sort-btn{display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; padding:0; border:1px solid var(--navy-line); border-radius:10px; background:var(--well-bg); color:var(--brass-light);}
  .tw-activity-sort-btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .tw-activity-sort-menu{position:absolute; z-index:18; top:calc(100% + 6px); right:0; display:flex; flex-direction:column; gap:4px; width:142px; padding:6px; border:1px solid var(--navy-line); border-radius:11px; background:var(--header-solid); box-shadow:0 10px 24px rgba(2,8,16,.24);}
  .tw-activity-sort-menu[hidden]{display:none;}
  .tw-activity-sort-menu button{width:100%; padding:8px; border:0; border-radius:7px; background:transparent; color:var(--offwhite); text-align:left; font:700 11px/1.2 'Inter',sans-serif;}
  .tw-activity-sort-menu button.active{background:rgba(185,121,30,.12); color:var(--brass-light);}

  /* Deadweight Calculator result rows only (Check Point 1 onward):
     label left-aligned + wraps when long, value right-aligned + no-wrap */
  .cg-metric-card .row{
    align-items:flex-start;
    gap:12px;
  }
  .cg-metric-card .row span:first-child{
    text-align:left;
    flex:1 1 auto;
    min-width:0;
    word-break:break-word;
  }
  .cg-metric-card .row span:last-child{
    white-space:nowrap;
    flex-shrink:0;
  }
  .cg-metric-card .row.cg-subtotal-row span:last-child{font-weight:700;}
  .cg-metric-card .row.cg-final-row{background:rgba(242,200,120,.10);}
  .cg-metric-card .row.cg-final-row span:first-child{color:var(--brass-light); font-weight:600;}
  .cg-metric-card .row.cg-final-row span:last-child{color:var(--brass-light); font-size:14.5px;}

  /* ---------- Full-screen ship detail ---------- */
  .detail-view{
    display:none;
    position:fixed; inset:0; z-index:300;
    min-height:100dvh;
    background:
      radial-gradient(ellipse 900px 600px at 8% -8%, var(--blob1), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 0%, var(--blob2), transparent 55%),
      var(--navy-deep);
    flex-direction:column;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .detail-view.open{display:flex;}
  .detail-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 16px; border-bottom:1px solid var(--navy-line);
    position:sticky; top:0;
    background:var(--header-solid);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    z-index:2;
  }
  .detail-back-btn{
    background:none; border:none; color:var(--brass-light);
    font-family:'Inter',sans-serif; font-weight:600; font-size:15px; cursor:pointer;
    padding:6px 4px;
  }
  .detail-back-btn:hover{color:var(--offwhite);}
  .detail-header-title{
    font-family:'Spectral',serif; font-weight:600; font-size:15px; color:var(--offwhite);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60%;
  }
  .detail-header-spacer{width:52px;}
  .detail-header-actions{
    display:flex; gap:4px; align-items:center;
  }
  .detail-action-btn{
    background:none; border:none; color:var(--offwhite-dim);
    font-size:17px; cursor:pointer; padding:7px 9px; border-radius:10px;
    display:inline-flex; align-items:center; justify-content:center;
    transition:background .15s ease, color .15s ease;
  }
  .detail-action-btn:hover{background:rgba(255,255,255,.08); color:var(--brass-light);}
  .detail-delete-btn:hover{color:#e89078;}
  #activity-detail-view{z-index:470;}
  #activity-detail-view .detail-header{z-index:8;}
  #activity-detail-view .detail-header-actions{position:relative; z-index:9;}
  #activity-detail-view #activity-detail-delete-btn{position:relative; z-index:10; color:#e89078;}
  .detail-body{
    padding:0 18px 40px;
    text-align:left;
  }
  .learning-hub-body{padding:0 16px calc(112px + env(safe-area-inset-bottom,0px));text-align:left;}
  .learning-hub-shell{width:min(100%,760px);margin:0 auto;padding:20px 0 28px;}
  .learning-hub-intro{margin-bottom:18px;}
  .learning-hub-intro h1{margin:0 0 6px;color:var(--offwhite);font-family:'Spectral',serif;font-size:27px;}
  .learning-hub-intro p{max-width:620px;margin:0;color:var(--offwhite-dim);font-size:13px;line-height:1.6;}
  .learning-hub-search{display:flex;align-items:center;gap:9px;margin-bottom:22px;padding:0 13px;border:1px solid var(--navy-line);border-radius:13px;background:var(--well-bg);color:var(--offwhite-dim);box-shadow:inset 0 1px 0 var(--glass-hi-soft);}
  .learning-hub-search svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .learning-hub-search input{width:100%;min-width:0;padding:12px 0;border:0;outline:0;background:transparent;color:var(--offwhite);font:500 13px 'Inter',sans-serif;}
  .learning-hub-search input::placeholder{color:var(--offwhite-dim);}
  .learning-hub-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;}
  .learning-hub-section-heading h2{margin:0;color:var(--offwhite);font-size:15px;font-weight:750;}
  .learning-hub-section-heading span{color:var(--offwhite-dim);font-size:11px;}
  .learning-hub-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .learning-hub-category-card{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:15px 13px;border:1px solid var(--navy-line);border-radius:15px;background:var(--navy-mid);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi-soft);}
  .learning-hub-category-card,.learning-hub-course-card,.learning-hub-lesson-row,.learning-hub-manager-row{font:inherit;text-align:left;cursor:pointer;}
  .learning-hub-category-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:12px;color:var(--brass-light);background:rgba(42,171,238,.12);font-size:20px;font-weight:700;}
  .learning-hub-category-copy{min-width:0;flex:1;}
  .learning-hub-category-title-row,.learning-hub-course-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;}
  .learning-hub-category-copy h2{min-width:0;margin:0 0 5px;color:var(--offwhite);font-size:13px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .learning-hub-category-copy p{margin:0 0 9px;color:var(--offwhite-dim);font-size:11px;line-height:1.45;}
  .learning-hub-category-status{color:var(--brass-light);font-size:10px;font-weight:700;}
  .learning-hub-category-card:hover,.learning-hub-course-card:hover,.learning-hub-lesson-row:hover,.learning-hub-manager-row:hover{border-color:var(--brass-light);transform:translateY(-1px);}
  .learning-hub-course-list,.learning-hub-lesson-list,.learning-hub-manager-list{display:grid;gap:9px;}
  .learning-hub-course-card{display:flex;align-items:flex-start;gap:13px;width:100%;padding:15px;border:1px solid var(--navy-line);border-radius:15px;background:var(--navy-mid);color:var(--offwhite);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi-soft);transition:transform .15s ease,border-color .15s ease;}
  .learning-hub-course-icon{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:13px;color:var(--brass-light);background:rgba(42,171,238,.12);font-size:23px;}
  .learning-hub-course-copy{min-width:0;flex:1;}.learning-hub-course-copy h2{min-width:0;margin:0 0 5px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.learning-hub-course-copy p{margin:0 0 10px;color:var(--offwhite-dim);font-size:12px;line-height:1.5;}.learning-hub-course-meta,.learning-hub-course-summary{display:flex;flex-wrap:wrap;gap:7px;color:var(--brass-light);font-size:10px;font-weight:700;text-transform:capitalize;}.learning-hub-course-meta span,.learning-hub-course-summary span{padding:4px 7px;border:1px solid rgba(140,221,248,.18);border-radius:7px;background:rgba(42,171,238,.08);}
  .learning-hub-back-link,.learning-hub-manage-link{border:0;background:transparent;color:var(--brass-light);font:700 12px 'Inter',sans-serif;cursor:pointer;}.learning-hub-back-link{padding:4px 0;margin-bottom:15px;}.learning-hub-manage-link{display:block;margin:22px auto 0;padding:10px 14px;border:1px solid var(--navy-line);border-radius:10px;background:var(--well-bg);}
  .learning-hub-lesson-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;padding:12px;border:1px solid var(--navy-line);border-radius:12px;background:var(--navy-mid);color:var(--offwhite);}.learning-hub-lesson-row strong{display:-webkit-box;min-width:0;font-size:13px;line-height:1.35;overflow:hidden;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}.learning-hub-lesson-row small{display:block;margin-top:4px;color:var(--offwhite-dim);font-size:11px;}.learning-hub-status-label.is-completed{color:#62d69a;font-weight:800;}.learning-hub-status-label.is-in-progress{color:var(--brass-light);font-weight:800;}.learning-hub-lesson-row.is-completed{border-color:rgba(98,214,154,.45);}.learning-hub-completion-status{color:#62d69a;font-size:10px;font-weight:800;line-height:1.2;white-space:nowrap;}.learning-hub-lesson-number{color:var(--brass-light);font-weight:800;font-size:12px;}.learning-hub-lesson-copy{min-width:0;}
  .learning-hub-inline-progress{display:inline-flex;align-items:center;gap:5px;min-width:0;color:var(--offwhite-dim);font-size:10px;font-weight:700;line-height:1;white-space:nowrap;}.learning-hub-inline-progress-track{display:block;width:42px;height:5px;overflow:hidden;border-radius:999px;background:rgba(190,218,230,.18);}.learning-hub-inline-progress-track i{display:block;height:100%;border-radius:inherit;background:var(--brass);}.learning-hub-inline-progress b{color:var(--brass-light);font-size:10px;font-weight:800;}.learning-hub-category-progress{flex:0 0 auto;}.learning-hub-course-progress{flex:0 0 auto;}.learning-hub-lesson-progress{justify-self:end;}
  .learning-hub-reader{max-width:680px;}.learning-hub-reader-kicker{margin:12px 0 7px;color:var(--brass-light);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}.learning-hub-reader h1{margin:0;color:var(--offwhite);font-family:'Spectral',serif;font-size:28px;line-height:1.2;}.learning-hub-reader-duration{margin:8px 0 24px;color:var(--offwhite-dim);font-size:12px;}.learning-hub-reader-content{color:var(--offwhite);font-size:15px;line-height:1.72;}.learning-hub-reader-content h2{margin:26px 0 8px;font-family:'Spectral',serif;font-size:21px;}.learning-hub-reader-content h3{margin:20px 0 7px;font-size:16px;}.learning-hub-reader-content p{margin:0 0 13px;}.learning-hub-reader-content ul{margin:0 0 16px;padding-left:22px;}.learning-hub-reader-content li{margin:5px 0;}.learning-hub-reader-gap{height:6px;}.learning-hub-reader-note{margin:18px 0;padding:13px 15px;border-left:3px solid var(--brass-light);border-radius:0 10px 10px 0;background:var(--well-bg);}.learning-hub-reader-note strong{display:block;margin-bottom:4px;color:var(--brass-light);font-size:12px;}.learning-hub-reader-note p{margin:0;font-size:13px;}.learning-hub-progress-action{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 4px;padding:12px 13px;border:1px solid var(--navy-line);border-radius:12px;background:var(--well-bg);}.learning-hub-progress-status{color:var(--offwhite-dim);font-size:11px;line-height:1.4;}.learning-hub-progress-action button{padding:9px 11px;border:1px solid var(--brass);border-radius:9px;color:var(--on-brass);background:var(--brass);font:800 11px 'Inter',sans-serif;cursor:pointer;white-space:nowrap;}.learning-hub-progress-action button:disabled{opacity:.6;cursor:default;}.learning-hub-reader-nav{display:flex;justify-content:space-between;gap:10px;margin-top:32px;padding-top:18px;border-top:1px solid var(--navy-line);}.learning-hub-reader-nav button{padding:10px 13px;border:1px solid var(--navy-line);border-radius:10px;color:var(--brass-light);background:var(--well-bg);font:700 12px 'Inter',sans-serif;cursor:pointer;}.learning-hub-reader-nav button:disabled{opacity:.35;cursor:not-allowed;}
  .learning-hub-manager-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,1.2fr);gap:18px;}.learning-hub-manager-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:11px 12px;border:1px solid var(--navy-line);border-radius:11px;background:var(--well-bg);color:var(--offwhite);}.learning-hub-manager-lesson{display:flex;align-items:center;gap:7px;}.learning-hub-manager-lesson .learning-hub-manager-row{flex:1;}.learning-hub-manager-row.is-selected{border-color:var(--brass-light);background:rgba(42,171,238,.1);}.learning-hub-manager-row strong{display:block;font-size:12px;}.learning-hub-manager-row small{display:block;margin-top:3px;color:var(--offwhite-dim);font-size:10px;}.learning-hub-small-button{padding:6px 9px;border:1px solid var(--navy-line);border-radius:8px;color:var(--brass-light);background:var(--well-bg);font:700 10px 'Inter',sans-serif;cursor:pointer;}.learning-hub-editor-form{display:grid;gap:10px;margin-bottom:16px;padding:15px;border:1px solid var(--navy-line);border-radius:14px;background:var(--well-bg);}.learning-hub-editor-form h2{margin:0 0 3px;color:var(--offwhite);font-size:14px;}.learning-hub-editor-form label{display:grid;gap:5px;color:var(--offwhite-dim);font-size:10px;font-weight:700;}.learning-hub-editor-form input,.learning-hub-editor-form textarea,.learning-hub-editor-form select{width:100%;padding:9px;border:1px solid var(--navy-line);border-radius:8px;background:var(--popup-field-surface);color:var(--offwhite);font:500 12px 'Inter',sans-serif;}.learning-hub-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}.learning-hub-save-button{padding:10px;border:0;border-radius:9px;color:var(--on-brass);background:var(--brass);font:800 12px 'Inter',sans-serif;cursor:pointer;}.learning-hub-form-status{min-height:14px;color:var(--brass-light);font-size:10px;}
  .learning-hub-tutor-card{margin:24px 0;padding:15px;border:1px solid rgba(140,221,248,.2);border-radius:14px;background:rgba(42,171,238,.07);}.learning-hub-tutor-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}.learning-hub-tutor-heading strong{color:var(--offwhite);font-size:14px;}.learning-hub-tutor-heading p{margin:5px 0 0;color:var(--offwhite-dim);font-size:11px;line-height:1.5;}.learning-hub-tutor-heading>span{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border:1px solid rgba(140,221,248,.25);border-radius:10px;color:var(--brass-light);font-size:10px;font-weight:800;}.learning-hub-tutor-open{margin-top:13px;padding:10px 12px;border:1px solid var(--brass);border-radius:9px;color:var(--on-brass);background:var(--brass);font:800 11px 'Inter',sans-serif;cursor:pointer;}.learning-hub-ai-usage{margin-top:12px;padding:10px 0 0;border-top:1px solid rgba(140,221,248,.14);border-bottom:0;background:transparent;}.learning-hub-ai-usage .ai-chat-usage-details{display:none;}.learning-hub-tutor-open:disabled,.learning-hub-tutor-send:disabled{opacity:.6;cursor:default;}.learning-hub-tutor-panel{display:grid;gap:9px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(140,221,248,.16);}.learning-hub-tutor-panel>label,.learning-hub-tutor-controls label{display:grid;gap:5px;color:var(--offwhite-dim);font-size:10px;font-weight:700;}.learning-hub-tutor-panel textarea,.learning-hub-tutor-controls select{width:100%;padding:10px;border:1px solid var(--navy-line);border-radius:9px;background:var(--popup-field-surface);color:var(--offwhite);font:500 12px/1.5 'Inter',sans-serif;resize:vertical;}.learning-hub-tutor-composer textarea:focus,.learning-hub-tutor-controls select:focus,.learning-hub-tutor-open:focus,.learning-hub-tutor-send:focus{outline:2px solid var(--brass-light);outline-offset:2px;}.learning-hub-tutor-controls{display:flex;align-items:end;justify-content:space-between;gap:10px;}.learning-hub-tutor-controls label{width:min(52%,180px);}.learning-hub-tutor-send{padding:10px 13px;border:0;border-radius:9px;color:var(--on-brass);background:var(--brass);font:800 11px 'Inter',sans-serif;cursor:pointer;white-space:nowrap;}.learning-hub-tutor-status{display:flex;align-items:center;gap:8px;color:var(--offwhite-dim);font-size:11px;}.learning-hub-tutor-error{padding:10px;border:1px solid rgba(218,101,75,.45);border-radius:9px;color:var(--offwhite);font-size:11px;line-height:1.5;}.learning-hub-tutor-error button{margin-left:6px;padding:3px 7px;border:1px solid var(--navy-line);border-radius:6px;color:var(--brass-light);background:var(--well-bg);font:700 10px 'Inter',sans-serif;cursor:pointer;}.learning-hub-tutor-response{padding:12px;border-left:3px solid var(--brass-light);border-radius:0 9px 9px 0;background:var(--well-bg);}.learning-hub-tutor-response strong{color:var(--brass-light);font-size:11px;}.learning-hub-tutor-response p{margin:7px 0 0;color:var(--offwhite);font-size:12px;line-height:1.6;white-space:normal;}.learning-hub-tutor-message{margin-top:10px;padding:10px 12px;border-radius:11px;background:var(--well-bg);border:1px solid var(--navy-line);}.learning-hub-tutor-message strong{display:block;color:var(--brass-light);font-size:10px;letter-spacing:.05em;text-transform:uppercase;}.learning-hub-tutor-message p{margin:6px 0 0;color:var(--offwhite);font-size:12px;line-height:1.6;white-space:normal;}.learning-hub-tutor-message.is-user{margin-left:8%;background:rgba(42,171,238,.09);}.learning-hub-tutor-message.is-ai{margin-right:8%;}.learning-hub-tutor-message[role="status"]{outline:0;}
  .learning-hub-tutor-card{margin:24px 0;padding:16px;border:1px solid rgba(140,221,248,.2);border-radius:16px;background:linear-gradient(145deg,rgba(42,171,238,.08),rgba(224,177,92,.045));}
  .learning-hub-tutor-panel{gap:12px;}
  .learning-hub-tutor-messages{min-height:56px;max-height:min(52vh,520px);}
  .learning-hub-tutor-composer{display:flex;align-items:center;gap:8px;min-height:48px;padding:5px 6px 5px 9px;border:1px solid var(--navy-line);border-radius:15px;background:var(--popup-field-surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
  .learning-hub-tutor-composer:focus-within{border-color:var(--brass-light);box-shadow:0 0 0 3px rgba(224,177,92,.12);}
  .learning-hub-tutor-composer textarea{min-height:44px;margin:0;padding:11px 12px;border-radius:13px;}
  .learning-hub-tutor-level-badge{position:relative;display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;min-height:30px;padding:0 8px;border:1px solid rgba(224,177,92,.32);border-radius:9px;background:rgba(224,177,92,.08);color:var(--brass-light);font-size:11px;font-weight:800;cursor:pointer;}
  .learning-hub-tutor-level-badge select{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;}
  .learning-hub-tutor-level-label{max-width:62px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .learning-hub-tutor-send{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;padding:0;border-radius:10px;font-size:20px;line-height:1;}
  .learning-hub-progress-action{position:relative;z-index:1;}
  @media(min-width:681px){.learning-hub-tutor-card{padding:18px 20px;}.learning-hub-tutor-messages{max-height:460px;}}
  @media(max-width:680px){.learning-hub-tutor-card{margin-top:20px;padding:13px;}.learning-hub-tutor-messages{max-height:52vh;}.learning-hub-tutor-composer{padding-left:7px;}}
  @media(max-width:380px){.learning-hub-tutor-level-badge{padding:0 6px;}.learning-hub-tutor-level-label{max-width:54px;}}
  .learning-hub-tutor-messages{display:grid;gap:10px;max-height:360px;overflow-y:auto;margin-top:14px;padding:4px 2px 8px;scroll-behavior:smooth;overscroll-behavior:contain;}
  .learning-hub-tutor-message{margin:0;padding:11px 13px;border:1px solid var(--navy-line);border-radius:14px;background:var(--well-bg);color:var(--offwhite);}
  .learning-hub-tutor-message.is-user{margin-left:8%;border-color:rgba(42,171,238,.38);background:rgba(42,171,238,.11);}
  .learning-hub-tutor-message.is-ai{margin-right:8%;border-color:rgba(224,177,92,.32);background:rgba(224,177,92,.07);}
  .learning-hub-tutor-message-label{margin-bottom:6px;color:var(--brass-light);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;}
  .learning-hub-tutor-message p{margin:0;color:var(--offwhite);font-size:13px;line-height:1.6;white-space:normal;overflow-wrap:anywhere;}
  .learning-hub-tutor-thinking{display:flex;align-items:center;gap:8px;padding:10px 12px;color:var(--offwhite-dim);font-size:12px;}
  .learning-hub-tutor-thinking .learning-hub-spinner{width:14px;height:14px;}
  .learning-hub-tutor-question:focus-visible,.learning-hub-tutor-panel button:focus-visible,.learning-hub-tutor-panel select:focus-visible{outline:2px solid var(--brass-light);outline-offset:2px;}
  @media(max-width:680px){.learning-hub-tutor-message.is-user,.learning-hub-tutor-message.is-ai{margin-left:0;margin-right:0;}.learning-hub-tutor-messages{max-height:48vh;}}
  .learning-quiz-shell{max-width:680px;}.learning-quiz-kicker{margin:10px 0 7px;color:var(--brass-light);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}.learning-quiz-shell h1{margin:0 0 10px;color:var(--offwhite);font-family:'Spectral',serif;font-size:27px;line-height:1.22;}.learning-quiz-muted{margin:0 0 20px;color:var(--offwhite-dim);font-size:13px;line-height:1.55;}.learning-quiz-language-list,.learning-quiz-options{display:grid;gap:9px;margin:18px 0 22px;}.learning-quiz-language-option,.learning-quiz-option{display:flex;align-items:center;gap:10px;padding:13px;border:1px solid var(--navy-line);border-radius:11px;background:var(--well-bg);color:var(--offwhite);font-size:13px;cursor:pointer;}.learning-quiz-language-option:has(input:checked),.learning-quiz-option:has(input:checked){border-color:var(--brass-light);background:rgba(42,171,238,.1);}.learning-quiz-language-option input,.learning-quiz-option input{accent-color:var(--brass);}.learning-quiz-progress{margin:4px 0 17px;color:var(--brass-light);font-size:11px;font-weight:800;}.learning-quiz-nav,.learning-quiz-result-actions{display:flex;justify-content:space-between;gap:10px;margin-top:24px;}.learning-quiz-nav button,.learning-quiz-secondary-button{padding:10px 13px;border:1px solid var(--navy-line);border-radius:10px;color:var(--brass-light);background:var(--well-bg);font:700 12px 'Inter',sans-serif;cursor:pointer;}.learning-quiz-nav button:disabled{opacity:.35;cursor:not-allowed;}.learning-quiz-result{display:grid;place-items:center;gap:7px;margin:24px 0;padding:25px;border:1px solid var(--navy-line);border-radius:15px;background:var(--well-bg);}.learning-quiz-result strong{color:var(--offwhite);font-size:42px;}.learning-quiz-result span{color:var(--offwhite-dim);font-size:13px;}.learning-quiz-result b{font-size:12px;letter-spacing:.1em;}.learning-quiz-result .is-passed{color:#62d69a;}.learning-quiz-result .is-failed{color:#ed8f77;}.learning-quiz-review-list{display:grid;gap:13px;margin-top:18px;}.learning-quiz-review-item{padding:15px;border:1px solid var(--navy-line);border-radius:13px;background:var(--well-bg);}.learning-quiz-review-item>span{color:var(--brass-light);font-size:10px;font-weight:800;text-transform:uppercase;}.learning-quiz-review-item h2{margin:6px 0 14px;color:var(--offwhite);font-size:14px;line-height:1.4;}.learning-quiz-review-item p{margin:7px 0;color:var(--offwhite-dim);font-size:12px;line-height:1.5;}.learning-quiz-explanation{margin-top:13px;padding:11px;border-left:3px solid var(--brass-light);background:rgba(42,171,238,.06);}.learning-quiz-explanation strong{color:var(--brass-light);font-size:11px;}.learning-quiz-explanation p{margin-bottom:0;}.learning-quiz-ai-button{margin-top:13px;padding:9px 12px;border:1px solid var(--brass);border-radius:9px;color:var(--on-brass);background:var(--brass);font:800 11px 'Inter',sans-serif;cursor:pointer;}.learning-quiz-ai-button:disabled{opacity:.6;cursor:default;}.learning-quiz-ai-response{margin-top:12px;padding:12px;border-left:3px solid var(--brass-light);border-radius:0 9px 9px 0;background:rgba(42,171,238,.07);}.learning-quiz-ai-content{margin-top:7px;color:var(--offwhite);font-size:12px;line-height:1.6;overflow-wrap:anywhere;}.learning-quiz-ai-content h3{margin:15px 0 5px;color:var(--brass-light);font-size:12px;line-height:1.35;letter-spacing:.04em;text-transform:none;}.learning-quiz-ai-content h3:first-child{margin-top:0;}.learning-quiz-ai-content p{margin:0 0 9px;color:var(--offwhite);font-size:12px;line-height:1.6;}.learning-quiz-ai-content ul,.learning-quiz-ai-content ol{margin:5px 0 10px;padding-left:20px;}.learning-quiz-ai-content li{padding-left:3px;margin:4px 0;color:var(--offwhite);line-height:1.55;}.learning-quiz-ai-content hr{margin:13px 0;border:0;border-top:1px solid var(--navy-line);}.learning-quiz-ai-response strong{color:var(--brass-light);font-size:11px;}.learning-quiz-ai-response p{margin:7px 0 0;color:var(--offwhite);font-size:12px;line-height:1.6;}.learning-quiz-ai-error{margin-top:12px;padding:10px;border:1px solid rgba(218,101,75,.45);border-radius:9px;color:var(--offwhite);font-size:11px;line-height:1.5;}.learning-quiz-ai-error button{margin-left:6px;padding:3px 7px;border:1px solid var(--navy-line);border-radius:6px;color:var(--brass-light);background:var(--well-bg);font:700 10px 'Inter',sans-serif;cursor:pointer;}.learning-quiz-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:25px 0;padding:14px;border:1px solid rgba(140,221,248,.2);border-radius:13px;background:rgba(42,171,238,.08);}.learning-quiz-cta strong{color:var(--offwhite);font-size:13px;}.learning-quiz-cta p{margin:4px 0 0;color:var(--offwhite-dim);font-size:11px;}.learning-quiz-cta button{padding:9px 12px;border:0;border-radius:9px;color:var(--on-brass);background:var(--brass);font:800 11px 'Inter',sans-serif;cursor:pointer;}
  @media(max-width:680px){.learning-hub-manager-layout{grid-template-columns:1fr;}.learning-hub-manager-layout>div:nth-child(2){order:-1;}.learning-hub-reader-content{font-size:14px;}}
  .learning-hub-state{padding:28px 20px;border:1px dashed var(--navy-line);border-radius:15px;background:var(--well-bg);text-align:center;}
  .learning-hub-state strong{display:block;margin-bottom:6px;color:var(--offwhite);font-size:14px;}
  .learning-hub-state p{margin:0;color:var(--offwhite-dim);font-size:12px;line-height:1.5;}
  .learning-hub-error{border-color:rgba(218,101,75,.45);}
  .learning-hub-retry{margin-top:14px;padding:9px 14px;border:1px solid var(--brass);border-radius:10px;color:var(--on-brass);background:var(--brass);font:700 12px 'Inter',sans-serif;cursor:pointer;}
  .learning-hub-loading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:180px;color:var(--offwhite-dim);font-size:13px;}
  .learning-hub-spinner{width:18px;height:18px;border:2px solid rgba(140,221,248,.3);border-top-color:var(--brass-light);border-radius:50%;animation:learningHubSpin .8s linear infinite;}
  @keyframes learningHubSpin{to{transform:rotate(360deg);}}
  @media(max-width:560px){.learning-hub-category-grid{grid-template-columns:1fr;}.learning-hub-category-card{padding:13px 12px;}}
  :root[data-theme="light"] .learning-hub-category-card{background:rgba(255,255,255,.72);box-shadow:0 8px 20px rgba(20,60,90,.08),inset 0 1px 0 rgba(255,255,255,.8);}
  /* Ship Detail screen only: leave clearance for the persistent phone navigation. */
  #ship-detail-view .detail-body{
    padding-bottom:132px;
  }
  #ship-detail-view .detail-body.ship-detail-accordion-list{
    padding-top:0;
    padding-bottom:150px;
  }
  #ship-detail-view .ship-detail-accordion{
    margin-top:10px;
    background:rgba(0,0,0,.12);
  }
  #ship-detail-view .ship-detail-accordion > summary > .profile-section-head{
    grid-template-columns:minmax(0,1fr) 28px;
    padding-right:0;
  }
  #ship-detail-view .ship-detail-accordion .ship-particular-edit-btn{
    grid-column:2;
    justify-self:end;
    position:relative;
    z-index:2;
  }
  #ship-detail-view .ship-detail-accordion.ship-certificates-accordion > summary > .profile-section-head{
    grid-template-columns:minmax(0,1fr) 28px;
  }
  #ship-detail-view .ship-detail-accordion .ship-certificates-import-btn{
    grid-column:2;
    justify-self:end;
    position:relative;
    z-index:2;
  }
  #ship-detail-view .ship-detail-accordion.ship-hydrostatic-accordion > summary > .profile-section-head{
    grid-template-columns:minmax(0,1fr) 28px;
  }
  #ship-detail-view .ship-detail-accordion .ship-hydrostatic-input-btn{
    grid-column:2;
    justify-self:end;
    position:relative;
    z-index:2;
  }
  #ship-detail-view .ship-hydrostatic-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:52px;
    padding:10px 12px;
    border:1px solid var(--navy-line);
    border-radius:10px;
    background:rgba(255,255,255,.045);
  }
  #ship-detail-view .ship-hydrostatic-summary-copy{min-width:0;}
  #ship-detail-view .ship-hydrostatic-summary-copy .profile-info-label{margin-bottom:3px;}
  #ship-detail-view .ship-hydrostatic-summary-count{
    color:var(--offwhite);
    font-family:'Inter',sans-serif;
    font-size:15px;
    font-weight:750;
  }
  #ship-detail-view .ship-hydrostatic-view-btn{
    appearance:none;
    border:0;
    background:transparent;
    color:var(--brass-light);
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:750;
    letter-spacing:.035em;
    text-transform:uppercase;
    white-space:nowrap;
    cursor:pointer;
    touch-action:manipulation;
    padding:8px 0 8px 8px;
  }
  #ship-detail-view .ship-hydrostatic-view-btn:active{transform:scale(.97);}
  #ship-detail-view .ship-detail-cert-card-list{
    margin-top:2px;
  }
  #ship-detail-view .ship-detail-cert-card-list .ship-certificate-card{
    margin:0 0 12px;
  }
  #ship-detail-view .ship-detail-cert-card-list .profile-detail-head{
    margin-right:-14px;
    padding-right:0;
  }
  #ship-detail-view .ship-detail-cert-card-list .profile-detail-actions{
    width:78px;
    min-width:78px;
  }
  #ship-detail-view .ship-detail-cert-card-list .profile-info-grid{
    margin:10px 0 0;
  }
  #ship-detail-view .ship-detail-cert-card-list .ship-certificate-status{
    margin-top:8px;
  }
  #ship-detail-view .ship-detail-accordion .form-group-title{
    color:var(--offwhite);
    font-size:13px;
    letter-spacing:.015em;
    text-transform:none;
  }
  #ship-detail-view .ship-detail-accordion .profile-accordion-body{
    padding:0 10px 12px;
  }
  #ship-detail-view .ship-detail-accordion .ship-card{
    margin:0;
  }
  #cert-view .detail-body{padding-bottom:112px;}
  #cert-view .ship-certificate-card-list{margin-top:14px;}
  #cert-view .ship-certificate-card{
    margin:0 0 12px;
  }
  #cert-view .ship-certificate-card .profile-detail-head{
    margin-right:-14px;
    padding-right:0;
  }
  #cert-view .ship-certificate-card .profile-detail-actions{
    width:78px;
    min-width:78px;
  }
  #cert-view .ship-certificate-card .profile-info-grid{
    margin:10px 0 0;
  }
  #cert-view .ship-certificate-status{
    margin-top:8px;
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:700;
  }
  .ship-detail-section-launch{
    width:100%;
    min-height:40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border:1px solid var(--navy-line);
    border-radius:10px;
    background:rgba(255,255,255,.045);
    color:var(--offwhite);
    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:650;
    text-align:left;
    cursor:pointer;
    touch-action:manipulation;
  }
  .ship-detail-section-launch::after{
    content:'Open';
    color:var(--brass-light);
    font-size:10px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  .ship-detail-section-launch:active{transform:scale(.985);}
  .detail-photo-hero{
    position:relative;
    width:118px; height:118px;
    border-radius:50%;
    overflow:hidden;
    background:var(--navy-mid);
    border:3px solid var(--navy-line);
    box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi-soft);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    margin:22px auto 18px;
    cursor:pointer;
    transition:border-color .15s ease, transform .15s ease;
  }
  .detail-photo-hero:active{transform:scale(.96);}
  .detail-photo-hero:hover{border-color:var(--brass);}
  .detail-photo-hero img{
    display:block;
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center center;
  }
  .detail-photo-placeholder{display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:40px; color:var(--offwhite-dim);}
  .detail-photo-placeholder .smart-seamen-placeholder{
    position:relative; top:auto; left:auto;
    display:block;
    width:84%; height:84%;
    margin:auto;
    border-radius:50%; padding:0;
    object-fit:contain; object-position:center center;
    filter:grayscale(100%);
  }
  .detail-photo-edit-badge{
    position:absolute; right:-2px; bottom:-2px;
    width:32px; height:32px; border-radius:50%;
    background:var(--brass-light); color:var(--on-brass);
    display:flex; align-items:center; justify-content:center;
    font-size:14px; border:2px solid var(--navy-deep);
    box-shadow:var(--glass-shadow);
  }
  :root[data-theme="light"] .detail-photo-edit-badge{border-color:var(--navy-deep);}

  /* ---------- Photo action sheet (View / Edit) ---------- */
  .photo-sheet-overlay{
    display:none;
    position:fixed; inset:0; z-index:400;
    background:var(--scrim);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    align-items:flex-end;
    justify-content:center;
  }
  .photo-sheet-overlay.open{display:flex;}
  .photo-sheet-box{
    background:var(--surface-strong);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    width:100%; max-width:420px;
    border-radius:22px 22px 0 0;
    border:1px solid var(--navy-line);
    border-bottom:none;
    box-shadow:0 -12px 40px rgba(0,0,0,.4), inset 0 1px 0 var(--glass-hi);
    padding:10px;
    animation:slideUp .22s ease;
  }
  @media(min-width:680px){
    .photo-sheet-overlay{align-items:center;}
    .photo-sheet-box{border-radius:20px; border-bottom:1px solid var(--navy-line);}
  }
  .photo-sheet-item{
    display:flex; align-items:center; gap:12px;
    width:100%; background:none; border:none;
    color:var(--offwhite); font-family:'Inter',sans-serif; font-weight:600; font-size:15px;
    padding:15px 14px; border-radius:14px; cursor:pointer; text-align:left;
    transition:background .15s ease;
  }
  .photo-sheet-item:hover{background:rgba(224,177,92,.10);}
  .photo-sheet-item-icon{font-size:18px; width:22px; text-align:center;}
  .photo-sheet-cancel{
    margin-top:4px;
    color:var(--offwhite-dim);
    justify-content:center;
    border-top:1px solid var(--navy-line);
    border-radius:14px;
  }

  /* ---------- Photo lightbox (full image view) ---------- */
  .photo-lightbox-overlay{
    display:none;
    position:fixed; inset:0; z-index:2147483000!important;
    isolation:isolate; background:rgba(3,8,14,.92); overscroll-behavior:contain;
    align-items:center; justify-content:center; touch-action:none;
  }
  .photo-lightbox-overlay.open{display:flex;}
  .photo-lightbox-overlay img{
    max-width:92vw; max-height:80vh; border-radius:14px; touch-action:none; user-select:none; -webkit-user-drag:none;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
  }
  .photo-lightbox-close{
    position:absolute; top:max(18px, env(safe-area-inset-top)); right:max(18px, env(safe-area-inset-right)); z-index:2;
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; padding:0; border-radius:50%;
    background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.34);
    color:#fff; font:700 24px/1 Arial,sans-serif; cursor:pointer;
    appearance:none; -webkit-appearance:none; touch-action:manipulation;
    box-shadow:0 6px 20px rgba(0,0,0,.28);
  }
  .photo-lightbox-close:hover{background:rgba(255,255,255,.24);}
  .photo-lightbox-close:focus-visible{outline:2px solid var(--brass-light); outline-offset:3px;}
  .photo-lightbox-counter{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:50%;z-index:2;transform:translateX(-50%);color:#fff;font:700 12px 'Inter',sans-serif;text-shadow:0 1px 4px #000;}
  @media (max-width:600px){
    .photo-lightbox-overlay img{max-width:94vw;max-height:78dvh;border-radius:10px;}
  }
  .detail-name{
    font-family:'Spectral',serif; font-size:22px; font-weight:700; margin:0 0 2px; color:var(--offwhite);
  }
  .detail-type{
    font-size:13px; color:var(--brass-light); font-weight:600; margin-bottom:20px;
  }
  .ship-example-notice{
    margin:0 0 14px;
    padding:9px 11px;
    border:1px solid rgba(242,200,120,.48);
    border-radius:10px;
    background:rgba(242,200,120,.10);
    color:var(--brass-light);
    font:700 11px/1.45 'Inter',sans-serif;
  }

  #hydro-view{ z-index:350; }
  #hydro-import-overlay{ z-index:380; }
  #hydro-mapping-overlay{ z-index:395; }
  #hydro-row-overlay{ z-index:390; }
  #draftmark-view{ z-index:340; }
  #draftmark-overlay{ z-index:380; }
  .draftmark-sketch{
    margin:14px 0 18px;
    padding:12px;
    border:1px solid var(--navy-line);
    border-radius:14px;
    background:var(--surface-strong);
    box-shadow:inset 0 1px 0 var(--glass-hi);
  }
  .draftmark-sketch-heading{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    margin:0 0 8px;
    color:var(--brass-light);
    font:700 12px/1.35 'Inter',sans-serif;
    letter-spacing:.035em;
    text-transform:uppercase;
  }
  .draftmark-sketch-heading small{
    color:var(--offwhite-dim);
    font:600 10px/1.35 'Inter',sans-serif;
    letter-spacing:0;
    text-transform:none;
    text-align:right;
  }
  .draftmark-sketch-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px;}
  .draftmark-photo-frame{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    overflow:hidden;
    border:1px solid var(--navy-line);
    border-radius:10px;
    background:#f8f8f5;
  }
  .draftmark-original-photo{
    display:block;
    width:100%;
    max-height:54vh;
    object-fit:contain;
    background:#f8f8f5;
  }
  .draftmark-sketch-svg{display:block; width:100%; min-width:520px; height:auto; color:var(--offwhite-dim);}
  .draftmark-sketch-svg .dm-outline{fill:none; stroke:var(--offwhite); stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;}
  .draftmark-sketch-svg .dm-guide{fill:none; stroke:var(--offwhite-dim); stroke-width:1.1; stroke-dasharray:5 5; opacity:.7;}
  .draftmark-sketch-svg .dm-baseline{fill:none; stroke:var(--brass); stroke-width:1.55; stroke-linecap:round;}
  .draftmark-sketch-svg .dm-mark{fill:rgba(242,200,120,.13); stroke:var(--brass-light); stroke-width:1.7;}
  .draftmark-sketch-svg .dm-dimension{fill:none; stroke:var(--offwhite-dim); stroke-width:1.15; stroke-linecap:round;}
  .draftmark-sketch-svg .dm-text{fill:var(--offwhite-dim); font:600 10px 'Inter',sans-serif; letter-spacing:.04em;}
  .draftmark-sketch-svg .dm-label{fill:var(--brass-light); font:700 10px 'Inter',sans-serif; letter-spacing:.055em;}
  .draftmark-sketch-svg .dm-note{fill:var(--offwhite-dim); font:600 9px 'Inter',sans-serif; letter-spacing:.025em;}
  @media(max-width:480px){
    .draftmark-sketch{margin-left:-2px; margin-right:-2px; padding:10px;}
    .draftmark-sketch-heading{align-items:flex-start; flex-direction:column; gap:2px;}
    .draftmark-sketch-heading small{text-align:left;}
    .draftmark-original-photo{max-height:48vh;}
  }
  #trim-view{ z-index:330; }
  #hold-overlay{ z-index:380; }
  #hold-import-overlay{ z-index:381; }
  #trim-draft-overlay{ z-index:381; }
  #profile-modal-overlay{ z-index:381; }
  #profile-modal-overlay .profile-edit-modal{width:min(700px,calc(100vw - 24px));max-width:700px;}
  #profile-modal-overlay .profile-edit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  #profile-modal-overlay .profile-edit-grid .field{min-width:0;}
  #profile-modal-overlay .profile-edit-grid input,
  #profile-modal-overlay .profile-edit-grid select{width:100%;min-width:0;box-sizing:border-box;}
  #profile-modal-overlay #profile-dob-input{width:min(100%,180px);max-width:180px;}
  @media(max-width:480px){#profile-modal-overlay #profile-dob-input{width:100%;max-width:160px;}}
  #profile-modal-overlay .profile-edit-section-label{grid-column:1 / -1;margin-top:4px;padding-top:12px;border-top:1px solid var(--navy-line);color:var(--brass-light);font:700 11px/1.2 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;}
  #profile-modal-overlay .measurement-control{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:6px;min-width:0;}
  #profile-modal-overlay .measurement-control input{min-width:0;}
  #profile-modal-overlay .measurement-control select{min-width:0;}
  #profile-modal-overlay .profile-bmi-output{display:flex;align-items:center;min-height:42px;padding:9px 11px;border:1px solid var(--navy-line);border-radius:12px;background:var(--well-bg);color:var(--brass-light);font:700 18px/1 'Inter',sans-serif;box-shadow:inset 0 1px 3px rgba(0,0,0,.3);}
  #profile-modal-overlay .profile-bmi-output[data-category="Healthy range"]{color:#7de3a4;}
  #profile-modal-overlay .profile-bmi-output[data-category="Underweight"],
  #profile-modal-overlay .profile-bmi-output[data-category="Overweight"]{color:#f2c878;}
  #profile-modal-overlay .profile-bmi-output[data-category="Obesity range"]{color:#e6816f;}
  #profile-modal-overlay .profile-bmi-note{display:block;margin-top:5px;color:var(--offwhite-dim);font:500 10px/1.35 'Inter',sans-serif;}
  @media(max-width:480px){
    #profile-modal-overlay .profile-edit-modal{width:calc(100vw - 16px);}
    #profile-modal-overlay .modal-body{padding:16px 14px;}
    #profile-modal-overlay .profile-edit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
    #profile-modal-overlay .profile-edit-grid .field{gap:4px;}
    #profile-modal-overlay .profile-edit-grid .field label{font-size:10px;line-height:1.2;}
    #profile-modal-overlay .profile-edit-grid input,
    #profile-modal-overlay .profile-edit-grid select{padding:9px 8px;font-size:12px;border-radius:10px;}
    #profile-modal-overlay .measurement-control{grid-template-columns:minmax(0,1fr) 58px;gap:4px;}
    #profile-modal-overlay .profile-bmi-output{min-height:37px;padding:8px;font-size:15px;}
    #profile-modal-overlay .profile-bmi-note{font-size:9px;}
  }
  #doc-add-overlay{ z-index:382; }
  #doc-form-overlay{ z-index:383; }
  #collection-doc-detail-overlay{ z-index:10001!important; }
  #voyage-form-overlay{ z-index:381; }
  #truewind-view{ z-index:320; }
  #cable-scope-view{ z-index:321; }
  #trial-maneuver-view{ z-index:322; }
  #cable-scope-wizard-overlay{ z-index:400; align-items:center; padding:18px 14px; box-sizing:border-box; }
  #cable-scope-wizard-overlay .modal-box{ max-height:min(84dvh,680px); border-radius:20px; border-bottom:1px solid var(--navy-line); }
  #cable-scope-wizard-overlay .modal-body{ overflow-y:auto; }
  #cargo-wizard-overlay{ z-index:450; }
  #truewind-result-overlay,#cable-scope-result-overlay{ z-index:460; }
  #trial-maneuver-wizard-overlay{ z-index:470; align-items:center; padding:18px 14px; box-sizing:border-box; }
  #trial-maneuver-result-overlay{ z-index:480; }
  #trial-maneuver-wizard-overlay .modal-box{width:min(520px,calc(100vw - 28px));max-height:min(84dvh,680px);border-radius:20px;border-bottom:1px solid var(--navy-line);overflow:hidden;}
  #trial-maneuver-result-overlay .modal-box{border-radius:20px;border-bottom:1px solid var(--navy-line);overflow:hidden;}
  #trial-maneuver-wizard-overlay .modal-body{overflow-y:auto;padding:20px 22px;}
  .trial-column-heads,.trial-three-row-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;}
  .trial-column-heads{margin:14px 0 6px;}
  .trial-column-heads h4{margin:0;padding:0 4px;color:var(--offwhite);font:700 16px/1.2 'Inter',sans-serif;}
  .trial-three-row-grid{grid-template-columns:110px minmax(0,1fr);padding:12px;border:1px solid var(--navy-line);border-radius:15px;background:var(--well-bg);box-shadow:inset 0 1px 0 var(--glass-hi-soft);}
  .trial-column{min-width:0;display:grid;gap:10px;align-content:start;}
  .trial-column:first-child{padding-right:12px;border-right:1px solid var(--navy-line);}
  .trial-column:last-child{padding-left:12px;}
  .trial-column .field{min-width:0;}
  .trial-column:first-child .field input{width:110px;max-width:100%;}
  .trial-column:last-child > .field input{width:110px;max-width:100%;}
  .trial-column .tw-ship-summary{min-height:42px;padding:10px 12px;}
  .trial-step-timer{float:right;display:inline-flex;align-items:center;min-width:42px;padding:4px 8px;border:1px solid var(--navy-line);border-radius:8px;color:var(--brass-light);font:700 11px/1 'Inter',sans-serif;letter-spacing:.2px;}
  .trial-bearing-toggle{width:100%;height:38px;min-height:38px;padding:7px 9px;border:1px solid var(--navy-line);border-radius:9px;background:var(--well-bg);color:var(--offwhite);font:700 13px/1 'Inter',sans-serif;cursor:pointer;}
  .trial-bearing-toggle:hover{border-color:var(--brass);color:var(--brass-light);}
  .trial-three-row-grid input,.trial-three-row-grid select{height:38px;min-height:38px;padding:7px 9px;font-size:13px;line-height:1.1;}
  .trial-three-row-grid .field{margin:0;}
  .trial-three-row-grid .field label{display:block;margin:0 0 4px;font-size:11px;line-height:1.1;white-space:nowrap;}
  .trial-compact-row{display:grid;grid-template-columns:42px minmax(0,110px) minmax(0,110px);gap:6px;max-width:100%;}
  .trial-compact-row .field label{white-space:nowrap;font-size:11px;}
  .trial-compact-row input,.trial-compact-row select{min-width:0;width:100%;}
  .trial-step2-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px;border:1px solid var(--navy-line);border-radius:15px;background:var(--well-bg);box-shadow:inset 0 1px 0 var(--glass-hi-soft);}
  .trial-step2-fields .field{min-width:0;}
  .trial-step2-fields input,.trial-step2-fields select{height:38px;min-height:38px;padding:7px 9px;font-size:13px;line-height:1.1;}
  .trial-step2-fields .field label{display:block;margin:0 0 4px;font-size:11px;line-height:1.1;white-space:nowrap;}
  .trial-adjust-buttons{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin-top:6px;}
  .trial-adjust-buttons button{min-width:0;padding:5px 2px;border:1px solid var(--navy-line);border-radius:7px;background:var(--well-bg);color:var(--offwhite-dim);font:700 10px/1 'Inter',sans-serif;cursor:pointer;white-space:nowrap;}
  .trial-adjust-buttons button:hover{border-color:var(--brass);color:var(--brass-light);background:rgba(42,171,238,.1);}
  .trial-adjust-buttons button[data-trial-reset]{color:var(--brass-light);}
  .trial-delay-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:6px;}
  .trial-delay-buttons button{padding:5px 4px;border:1px solid var(--navy-line);border-radius:7px;background:var(--well-bg);color:var(--offwhite-dim);font:700 10px/1 'Inter',sans-serif;cursor:pointer;}
  .trial-delay-buttons button:hover{border-color:var(--brass);color:var(--brass-light);background:rgba(42,171,238,.1);}
  .trial-delay-buttons button:last-child{color:var(--brass-light);}
  .trial-time-to-change{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--navy-line);border-radius:12px;background:var(--well-bg);color:var(--offwhite-dim);font-size:12px;}
  .trial-time-to-change strong{color:var(--brass-light);font-size:16px;letter-spacing:.4px;}
  .trial-review-time{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:10px 12px;border:1px solid var(--navy-line);border-radius:12px;background:var(--well-bg);color:var(--offwhite-dim);font-size:12px;}
  .trial-review-time strong{color:var(--brass-light);font-size:15px;letter-spacing:.3px;}
  .trial-result-table-wrap{overflow-x:auto;margin:0 0 14px;border:1px solid var(--navy-line);border-radius:12px;background:var(--well-bg);}
  .trial-result-table{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;color:var(--offwhite);font:600 11px/1.25 'Inter',sans-serif;}
  .trial-result-table .trial-label-col{width:31%;}.trial-result-table .trial-value-col{width:34.5%;}.trial-action-table .trial-action-label-col{width:52%;}.trial-action-table .trial-action-value-col{width:48%;}
  .trial-result-table th,.trial-result-table td{padding:9px 8px;border-bottom:1px solid var(--navy-line);vertical-align:middle;text-align:right;}
  .trial-result-table tr:last-child th,.trial-result-table tr:last-child td{border-bottom:0;}
  .trial-result-table thead th{background:rgba(255,255,255,.035);color:var(--brass-light);font-weight:800;text-align:right;}
  .trial-result-table thead th:first-child,.trial-result-table tbody th:first-child,.trial-result-table tbody td:first-child{width:31%;text-align:left;}
  .trial-result-table thead th:nth-child(2),.trial-result-table tbody td:nth-child(2){width:34.5%;}
  .trial-result-table thead th:nth-child(3),.trial-result-table tbody td:nth-child(3){width:34.5%;}
  .trial-result-table tbody th{color:var(--offwhite-dim);font-weight:700;text-align:right;}
  .trial-result-table td{text-align:right;font-weight:800;white-space:nowrap;}
  .trial-action-table th:first-child,.trial-action-table td:first-child{width:52%;text-align:left;}
  .trial-action-table th:nth-child(2),.trial-action-table td:nth-child(2){width:48%;}
  @media (max-width:560px){.trial-column-heads,.trial-three-row-grid{gap:8px;}.trial-three-row-grid{padding:9px;}.trial-column:first-child{padding-right:8px;}.trial-column:last-child{padding-left:8px;}.trial-column-heads h4{font-size:14px;}.trial-three-row-grid input,.trial-three-row-grid select{height:34px;min-height:34px;padding:6px 7px;font-size:12px;}.trial-column:first-child .field input{width:88%;}.trial-three-row-grid .field label{font-size:9px;}.trial-compact-row{grid-template-columns:38px minmax(62px,1fr) minmax(62px,1fr);gap:4px;}.trial-compact-row .field label{font-size:9px;}.trial-compact-row input,.trial-compact-row select{padding-left:6px;padding-right:6px;font-size:11px;}.trial-step2-fields{grid-template-columns:1fr;gap:8px;padding:9px;}.trial-step2-fields input,.trial-step2-fields select{height:34px;min-height:34px;padding:6px 7px;font-size:12px;}.trial-step2-fields .field label{font-size:9px;}}
  @media (max-width:560px){.trial-three-row-grid{grid-template-columns:100px minmax(0,1fr);}.trial-column:first-child .field input,.trial-column:last-child > .field input{width:100px;max-width:100%;}.trial-compact-row{grid-template-columns:38px minmax(0,100px) minmax(0,100px);gap:4px;}}
  @media (max-width:560px){.trial-adjust-buttons{gap:2px;}.trial-adjust-buttons button{padding:5px 1px;font-size:9px;}}
  @media (max-width:560px){.trial-delay-buttons{gap:3px;}.trial-delay-buttons button{padding:5px 2px;font-size:9px;}}
  @media (max-width:560px){.trial-step-timer{padding:4px 6px;font-size:10px;}.trial-bearing-toggle{height:34px;min-height:34px;padding:6px 7px;font-size:12px;}}
  #celestial-view{ z-index:325; }
  #celestial-result-overlay{ z-index:391; }
  #activity-detail-view{ z-index:470; }
  #voyage-hub-view{ z-index:315; }
  #voyage-view{ z-index:320; }
  #voyage-leg-overlay{ z-index:395; }
  #voyage-result-overlay{ z-index:390; }
  #etaspeed-view{ z-index:322; }
  #etaspeed-result-overlay{ z-index:392; }
  #cargo-view{ z-index:316; }
  #deadweight-view{ z-index:321; }
  #cargo-result-overlay{ z-index:393; }
  #draft-survey-view{ z-index:323; }
  #ds-setup-view{ z-index:340; }
  #ds-entry-overlay{ z-index:395; align-items:center; padding:18px 14px; box-sizing:border-box; }
  #ds-entry-overlay .modal-box{width:min(540px,100%); max-height:min(84dvh,680px); border-radius:20px; border-bottom:1px solid var(--navy-line);}
  #ds-entry-overlay .modal-body{overflow-y:auto;}
  .ds-draft-sketch-card{padding:10px 8px 12px; border:1px solid var(--navy-line); border-radius:16px; background:var(--header-solid);}
  .ds-draft-sketch-key{display:flex; align-items:center; justify-content:space-between; padding:0 5px 9px; color:var(--offwhite-dim); font:700 9px/1 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase;}
  .ds-draft-sketch-key strong{color:var(--brass-light); font-size:10px; letter-spacing:.1em;}
  .ds-draft-sketch-layout{display:grid; grid-template-columns:minmax(0,1fr) 94px minmax(0,1fr); grid-template-rows:repeat(3,minmax(60px,auto)); align-items:center; column-gap:8px; row-gap:7px;}
  .ds-draft-node{min-width:0;}
  .ds-draft-node label{display:block; margin:0 0 5px; color:var(--offwhite-dim); font:700 9px/1.15 'Inter',sans-serif; letter-spacing:.035em; text-transform:uppercase;}
  .ds-draft-node input{box-sizing:border-box; width:100%; height:36px; min-width:0; padding:0 8px; border:1px solid var(--navy-line); border-radius:10px; background:var(--surface-strong); color:var(--offwhite); font:700 12px 'Inter',sans-serif; outline:none;}
  .ds-draft-node input:focus{border-color:var(--brass); box-shadow:0 0 0 2px rgba(185,121,30,.12);}
  .ds-draft-node.port{text-align:left;}
  .ds-draft-node.stbd{text-align:right;}
  .ds-draft-node.stbd input{text-align:right;}
  .ds-draft-vessel{grid-column:2; grid-row:1 / span 3; align-self:stretch; display:flex; align-items:center; justify-content:center; min-height:196px;}
  .ds-draft-vessel svg{display:block; width:92px; height:202px; overflow:visible;}
  .ds-draft-vessel .hull{fill:rgba(31,126,174,.12); stroke:var(--brass-light); stroke-width:1.8;}
  .ds-draft-vessel .deck{fill:rgba(255,255,255,.035); stroke:var(--navy-line); stroke-width:1.1;}
  .ds-draft-vessel .centreline{stroke:var(--brass-light); stroke-width:1; stroke-dasharray:4 3; opacity:.72;}
  .ds-draft-vessel .station{stroke:var(--brass-light); stroke-width:1; opacity:.6;}
  .ds-draft-vessel text{fill:var(--offwhite-dim); font:700 7px 'Inter',sans-serif; letter-spacing:.08em;}
  .ds-draft-vessel .mean-label{fill:var(--offwhite); font:800 6.6px 'Inter',sans-serif; letter-spacing:.035em;}
  .ds-draft-vessel .mean-value{fill:#35c98b; stroke:var(--navy-deep); stroke-width:1.15px; paint-order:stroke; font:800 9px 'Inter',sans-serif; letter-spacing:0;}
  .ds-sketch-trim{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding:9px 10px; border-top:1px solid var(--navy-line); color:var(--offwhite-dim); font:700 10px/1.25 'Inter',sans-serif; letter-spacing:.035em; text-transform:uppercase;}
  .ds-sketch-trim strong{font-size:12px; letter-spacing:.025em; text-align:right; text-transform:uppercase;}
  .ds-sketch-trim strong.trim-head{color:#e34c52;}
  .ds-sketch-trim strong.trim-stern{color:#35c98b;}
  .ds-sketch-trim strong.trim-even,.ds-sketch-trim strong.trim-empty{color:var(--offwhite-dim);}
  .ds-draft-density-field{margin-top:12px;}
  .ds-draft-density-field label{display:block; margin:0 0 6px; color:var(--offwhite-dim); font:700 11px 'Inter',sans-serif;}
  .ds-draft-density-field input{box-sizing:border-box; width:100%; height:40px; padding:0 11px; border:1px solid var(--navy-line); border-radius:11px; background:var(--surface-strong); color:var(--offwhite); font:700 13px 'Inter',sans-serif; outline:none;}
  .ds-draft-density-field input:focus{border-color:var(--brass); box-shadow:0 0 0 2px rgba(185,121,30,.12);}
  .ds-draft-mark-position[readonly]{background:var(--navy-line); color:var(--offwhite-dim); cursor:not-allowed;}
  @media(max-width:390px){.ds-draft-sketch-layout{grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr); column-gap:5px;}.ds-draft-vessel svg{width:76px;}.ds-draft-node label{font-size:8px;}.ds-draft-node input{padding:0 6px;font-size:11px;}}
  #ds-result-overlay{ z-index:394; }
  #cargo-trim-view{ z-index:324; }
  #cargo-trim-result-overlay{ z-index:396; }
  #cargo-trim-table-result-overlay{ z-index:396; }
  #ctm-table-wizard-overlay{ z-index:400; }
  #ctm-wizard-overlay{ z-index:399; }
  #sounding-view{ z-index:326; }
  #sounding-ship-detail-view{ z-index:327; }
  #sounding-calc-view{ z-index:328; }
  #sounding-wizard-overlay{ z-index:400; }
  #sounding-result-overlay{ z-index:397; }
  #aftdraft-view{ z-index:327; }
  #aftdraft-wizard-overlay{ z-index:399; }
  #aftdraft-result-overlay{ z-index:398; }
  #ship-register-modal{ z-index:401; }
  #cert-view{ z-index:329; }
  #cert-method-overlay{ z-index:385; }
  #cert-overlay{ z-index:386; }
  #tank-wizard-modal{ z-index:402; }
  #tank-register-modal{ z-index:403; }

  .hydro-btn-row{
    margin-bottom:22px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .btn-hydro{
    width:100%;
    background:rgba(255,255,255,.06);
    backdrop-filter:var(--glass-blur-soft);
    -webkit-backdrop-filter:var(--glass-blur-soft);
    border:1px solid var(--brass);
    color:var(--brass-light);
    padding:13px 16px;
    border-radius:16px;
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:14px;
    letter-spacing:.3px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    box-shadow:inset 0 1px 0 var(--glass-hi-soft);
    transition:background .15s ease;
  }
  .btn-hydro:hover{background:rgba(242,200,120,.14);}

  /* Voyage Setup action row: three equal icon controls across the full mobile width. */
  .vc-setup-action-row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    width:100%;
    margin-top:24px;
  }
  .vc-setup-action-btn{
    min-height:52px;
    width:100%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border-radius:14px;
    border:1px solid var(--navy-line);
    background:rgba(255,255,255,.05);
    color:var(--offwhite-dim);
    cursor:pointer;
    box-shadow:inset 0 1px 0 var(--glass-hi-soft);
    transition:transform .16s cubic-bezier(.23,1,.32,1), background .16s ease, border-color .16s ease, color .16s ease;
  }
  .vc-setup-action-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
  .vc-setup-action-btn:hover{border-color:var(--brass-light);color:var(--offwhite);background:rgba(42,171,238,.10);}
  .vc-setup-action-btn:active{transform:scale(.97);}
  .vc-setup-action-btn.add{color:var(--brass-light);border-color:rgba(42,171,238,.72);background:rgba(42,171,238,.10);}
  .vc-setup-action-btn.delete{color:#e89078;border-color:rgba(224,140,120,.42);}
  .vc-setup-action-btn.delete:hover{background:rgba(224,140,120,.14);border-color:#e89078;}
  .vc-setup-action-btn:disabled,
  .vc-setup-action-btn:disabled:hover{
    cursor:not-allowed;
    color:var(--offwhite-dim);
    border-color:var(--navy-line);
    background:rgba(255,255,255,.025);
    opacity:.38;
    transform:none;
  }
  .vc-voyage-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .vc-next-leg-plus{
    width:42px;height:42px;flex:0 0 42px;padding:0;border-radius:50%;border:1px solid rgba(42,171,238,.72);
    background:rgba(42,171,238,.10);color:var(--brass-light);font:700 28px/1 'Inter',sans-serif;cursor:pointer;
    box-shadow:inset 0 1px 0 var(--glass-hi-soft);transition:transform .16s cubic-bezier(.23,1,.32,1),background .16s ease;
  }
  .vc-next-leg-plus:hover{background:rgba(42,171,238,.18);}
  .vc-next-leg-plus:active{transform:scale(.96);}
  /* Voyage location pickers: readable card surfaces in both day and dark modes. */
  #vcw-country-dropdown,
  #vcw-second-country-dropdown,
  .vc-port-dropdown{
    background:var(--popup-surface) !important;
    color:var(--offwhite) !important;
    border-color:var(--navy-line) !important;
    opacity:1 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    box-shadow:var(--glass-shadow) !important;
  }
  #vcw-country-dropdown button,
  #vcw-second-country-dropdown button,
  .vc-port-dropdown button{
    background:transparent !important;
    color:var(--offwhite) !important;
    opacity:1 !important;
  }
  #vcw-country-dropdown button:hover,
  #vcw-second-country-dropdown button:hover,
  .vc-port-dropdown button:hover{background:rgba(42,171,238,.13) !important;}
  #vcw-country-dropdown button span,
  #vcw-second-country-dropdown button span,
  .vc-port-dropdown button span{color:var(--offwhite-dim) !important;}
  .vc-country-combobox,
  .vc-port-combobox{position:relative;display:flex;align-items:stretch;gap:6px;}
  #vcw-country-toggle,
  #vcw-second-country-toggle{
    background:var(--popup-field-surface) !important;
    color:var(--offwhite) !important;
    border:1px solid var(--navy-line) !important;
  }
  .vc-port-picker-toggle{
    position:static;flex:0 0 40px;width:40px;height:40px;border:1px solid var(--navy-line);border-radius:8px;
    background:var(--popup-field-surface);color:var(--offwhite);font-size:17px;line-height:1;cursor:pointer;
  }
  .vc-country-picker-toggle{
    flex:0 0 40px;width:40px;height:40px;border:1px solid var(--navy-line);border-radius:8px;
    background:var(--popup-field-surface);color:var(--offwhite);font-size:17px;line-height:1;cursor:pointer;
  }
  .vc-country-combobox input,
  .vc-port-combobox input{flex:1;min-width:0;height:40px;box-sizing:border-box;}
  .vc-port-dropdown{position:absolute;z-index:14;top:calc(100% - 1px);left:0;right:0;max-height:226px;overflow-y:auto;border:1px solid var(--navy-line);border-radius:0 0 10px 10px;}
  .vc-port-dropdown button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:0;border-bottom:1px solid var(--navy-line);font:inherit;text-align:left;cursor:pointer;}
  .vc-port-dropdown button:last-child{border-bottom:0;}
  .vc-port-dropdown button strong{font-size:12px;font-weight:700;}
  .vc-port-dropdown button span{font-size:11px;white-space:nowrap;}
  .vc-port-search-hint{display:block;margin-top:5px;color:var(--offwhite-dim);font-size:10px;line-height:1.3;}
  .vc-port-no-match{padding:12px;color:var(--offwhite-dim);font-size:12px;}
  #vcw-second-speed-profile,
  #vcw-second-tz{
    background:var(--popup-field-surface) !important;
    color:var(--offwhite) !important;
    opacity:1 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  #vcw-second-speed-profile option,
  #vcw-second-tz option{background:var(--popup-surface);color:var(--offwhite);opacity:1;}
  .vc-consumption-table{width:100%;border:1px solid var(--navy-line);border-radius:12px;overflow:hidden;background:var(--well-bg);}
  .vc-consumption-table-row{display:grid;grid-template-columns:78px minmax(0,1fr) minmax(0,1fr);gap:0;align-items:center;}
  .vc-consumption-table-row + .vc-consumption-table-row{border-top:1px solid var(--navy-line);}
  .vc-consumption-table-row > *{min-width:0;padding:10px 8px;}
  .vc-consumption-table-row > * + *{border-left:1px solid var(--navy-line);}
  .vc-consumption-table-row.vc-consumption-head{background:rgba(42,171,238,.10);color:var(--brass-light);font-size:11px;font-weight:700;}
  .vc-consumption-table-row label{color:var(--offwhite-dim);font-size:12px;font-weight:700;}
  .vc-consumption-table-row input{width:100%;min-width:0;padding:8px 7px;font-size:13px;text-align:right;}
  .vc-arrival-supply{margin-top:14px;padding-top:14px;border-top:1px solid var(--navy-line);}

  .ship-tool-fab-group{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    bottom:auto;
    transform:none;
    display:none;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:calc(100% - 36px);
    max-width:390px;
    margin:-5px auto 9px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    z-index:auto;
  }
  .ship-tool-fab-group.open{display:flex;}
  .ship-tool-fab{
    position:relative;
    flex:1 1 0;
    min-width:0;
    height:44px;
    border-radius:10px;
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
    border:1px solid var(--navy-line);
    color:var(--brass-light);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:2px;
    padding:4px 3px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
    transition:background .15s ease, transform .15s ease;
  }
  .ship-tool-fab:hover{background:rgba(242,200,120,.12); border-color:rgba(242,200,120,.40); transform:translateY(-1px);}
  .ship-tool-fab:active{transform:scale(.94);}
  .ship-tool-fab svg{width:16px; height:16px; flex-shrink:0; stroke-width:2.15;}
  .ship-tool-fab-label{
    position:static;
    transform:none;
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    background:transparent;
    border:0;
    color:var(--offwhite-dim);
    font-family:'Inter',sans-serif;
    font-weight:650;
    font-size:8px;
    line-height:1.2;
    padding:0;
    border-radius:0;
    box-shadow:none;
    opacity:1;
    pointer-events:none;
    transition:none;
  }
  /* ---------- AI Assistant: floating button + chat panel ---------- */
  .ai-fab{
    position:absolute;
    right:calc(16px + env(safe-area-inset-right, 0px));
    left:auto;
    top:50%;
    bottom:auto;
    transform:translateY(-50%);
    width:36px; height:36px; border-radius:50%;
    background:linear-gradient(145deg, var(--brass-light), var(--brass));
    color:var(--navy-deep);
    border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 20px rgba(2,8,16,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
    z-index:320;
    transition:transform .15s ease;
  }
  .ai-fab:hover{transform:translateY(-50%) scale(1.06);}
  .ai-fab:active{transform:translateY(-50%) scale(.94);}
  .ai-fab svg{width:19px; height:19px;}

  .ai-chat-view{
    display:none;
    position:fixed; inset:0; z-index:500;
    /* The header lives in this fixed shell, outside the scrollable message
       region. 100dvh follows the visible viewport when the iPhone keyboard
       opens without changing the root page height. */
    width:100%;
    height:var(--sc-ai-chat-viewport-height, 100dvh);
    min-height:0;
    max-height:100dvh;
    overflow:hidden;
    background:
      radial-gradient(ellipse 900px 600px at 8% -8%, var(--blob1), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 0%, var(--blob2), transparent 55%),
      var(--navy-deep);
    flex-direction:column;
  }
  .ai-chat-view.open{display:flex;}
  .ai-chat-header{
    display:flex; align-items:center; gap:12px;
    position:sticky; top:0; z-index:2;
    padding:calc(16px + env(safe-area-inset-top, 0px)) 18px 14px;
    border-bottom:1px solid var(--navy-line);
    background:var(--navy-deep);
    flex:0 0 auto;
  }
  .ai-chat-profile{
    width:42px; height:42px; border-radius:50%; flex:0 0 auto; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(145deg, var(--well-bg), rgba(224,177,92,.18));
    border:1px solid rgba(224,177,92,.55);
  }
  .ai-chat-profile img{width:124%; height:124%; object-fit:cover; padding:0; transform:translateY(1px);}
  .ai-chat-header-copy{min-width:0;}
  .ai-chat-header-title{font-family:'Spectral',serif; font-weight:700; font-size:16px; color:var(--offwhite);}
  .ai-chat-header-sub{font-family:'Inter',sans-serif; font-size:11.5px; color:var(--offwhite-dim); margin-top:1px;}
  .ai-chat-header-actions{margin-left:auto; display:flex; align-items:center; gap:2px;}
  .ai-chat-header-action{
    width:34px; height:34px; padding:0; border-radius:50%; border:1px solid transparent;
    background:transparent; color:var(--offwhite-dim); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .ai-chat-header-action:hover,.ai-chat-header-action:focus-visible{color:var(--brass-light); border-color:rgba(224,177,92,.45); background:rgba(224,177,92,.09); outline:none;}
  .ai-chat-header-action svg{width:18px; height:18px;}
  .ai-chat-close{
    background:none; border:none; color:var(--offwhite-dim);
    font-size:24px; line-height:1; cursor:pointer; padding:4px 8px;
  }
  .ai-chat-close:hover{color:var(--offwhite);}
  .ai-chat-history-panel{
    position:absolute; z-index:10; inset:0; display:flex; flex-direction:column; overflow:hidden;
    background:var(--popup-surface); border:0; border-radius:0; box-shadow:none; color:var(--offwhite); opacity:0;
    pointer-events:none; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease;
  }
  .ai-chat-history-panel.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .ai-chat-history-heading{
    flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
    min-height:70px; padding:calc(16px + env(safe-area-inset-top, 0px)) 18px 14px; border-bottom:1px solid var(--navy-line);
    color:var(--offwhite); background:var(--popup-surface); font-family:'Spectral',serif; font-size:19px; font-weight:700;
  }
  .ai-chat-history-heading button{
    width:38px; height:38px; padding:0; border:1px solid var(--navy-line); border-radius:50%;
    background:var(--popup-field-surface); color:var(--offwhite); font-size:23px; line-height:1;
    cursor:pointer; transition:color .15s ease, border-color .15s ease, transform .15s ease;
  }
  .ai-chat-history-heading button:hover{border-color:var(--brass); color:var(--brass-light);}
  .ai-chat-history-heading button:active{transform:scale(.96);}
  .ai-history-search{
    flex:0 0 auto; display:flex; align-items:center; gap:10px; min-height:46px;
    margin:16px 16px 8px; padding:0 13px; border:1px solid var(--navy-line); border-radius:13px;
    background:var(--popup-field-surface); color:var(--offwhite-dim);
  }
  .ai-history-search:focus-within{border-color:var(--brass); box-shadow:0 0 0 3px rgba(42,171,238,.14);}
  .ai-history-search svg{width:17px; height:17px; flex:0 0 auto;}
  .ai-history-search input{min-width:0; width:100%; border:0; outline:0; background:transparent; color:var(--offwhite); font:13px 'Inter',sans-serif;}
  .ai-history-search input::placeholder{color:var(--offwhite-dim); opacity:.86;}
  .ai-history-help{flex:0 0 auto; margin:0 18px 10px; color:var(--offwhite-dim); font:11.5px/1.4 'Inter',sans-serif;}
  .ai-chat-history-list{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:0 16px calc(18px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; gap:10px;}
  .ai-history-more{margin:2px 2px 12px; color:var(--offwhite-dim); text-align:center; font:11.5px/1.4 'Inter',sans-serif;}
  .ai-history-item{
    width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:5px; text-align:left;
    padding:13px; border:1px solid var(--navy-line); border-radius:13px;
    background:var(--popup-field-surface); color:var(--offwhite); cursor:pointer; touch-action:manipulation;
    font-family:'Inter',sans-serif; transition:border-color .15s ease, background .15s ease, transform .15s ease;
  }
  .ai-history-item:hover,.ai-history-item.active{border-color:var(--brass); background:var(--surface-strong);}
  .ai-history-item.is-holding{border-color:#C1502E; background:rgba(193,80,46,.12);}
  .ai-history-item:active{transform:scale(.985);}
  .ai-history-item strong{display:-webkit-box; max-width:100%; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:13.5px; line-height:1.4;}
  .ai-history-item span{color:var(--offwhite-dim); font-size:11px;}
  .ai-history-empty{margin:24px 8px; color:var(--offwhite-dim); text-align:center; font:13px/1.5 'Inter',sans-serif;}
  .ai-chat-messages{
    flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    padding:16px 16px 8px;
    display:flex; flex-direction:column; gap:12px;
  }
  .ai-msg{max-width:82%; padding:11px 14px 8px; border-radius:16px; font-family:'Inter',sans-serif; font-size:14px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word;}
  .ai-msg-text{display:block;}
  .ai-msg-copy{
    display:block; margin:7px -3px 0 auto; padding:2px 6px; border:1px solid currentColor; border-radius:7px;
    background:transparent; color:inherit; font:600 10px/1.35 'Inter',sans-serif; opacity:.8; cursor:pointer;
  }
  .ai-msg-copy:hover,.ai-msg-copy:focus-visible{opacity:1; outline:none;}
  .ai-msg-copy:active{transform:scale(.96);}
  .ai-msg.user{
    align-self:flex-end; background:var(--brass); color:var(--navy-deep); border-bottom-right-radius:4px;
  }
  .ai-msg.assistant{
    align-self:flex-start; max-width:100%; padding:0; background:transparent; border:0; color:var(--offwhite); border-radius:0; box-shadow:none;
  }
  .ai-msg.error{
    align-self:flex-start; background:rgba(193,80,46,.12); border:1px solid #C1502E; color:#ff9d80;
  }
  .ai-retry-btn{
    margin-top:8px; background:#C1502E; color:#fff; border:none; border-radius:14px;
    padding:7px 16px; font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; cursor:pointer;
  }
  .ai-retry-btn:hover{background:#a7451f;}
  .ai-msg.thinking{align-self:flex-start; color:var(--offwhite-dim); font-style:italic;}
  .ai-msg-disclaimer{
    align-self:flex-start; max-width:82%; margin-top:-6px;
    font-family:'Inter',sans-serif; font-size:10.5px; color:var(--offwhite-dim);
    padding:0 4px;
  }
  .ai-chat-empty{
    margin:auto; text-align:center; color:var(--offwhite-dim); font-family:'Inter',sans-serif; font-size:13.5px; padding:0 30px;
  }
  .ai-chat-empty svg{margin-bottom:10px; opacity:.5;}
  .ai-chat-chips{
    position:relative; z-index:4;
    flex:0 0 auto; display:flex; gap:8px; overflow-x:auto;
    padding:2px 14px 10px; -webkit-overflow-scrolling:touch;
  }
  .ai-chat-chips::-webkit-scrollbar{display:none;}
  .ai-chat-choice-buttons{display:grid; gap:6px; margin-top:9px; max-height:42vh; overflow-y:auto;}
  .ai-chat-choice-button{display:flex; align-items:center; gap:9px; width:100%; min-width:0; padding:9px 10px; border:1px solid var(--navy-line); border-radius:10px; color:var(--offwhite); background:var(--navy-deep); text-align:left; cursor:pointer;}
  .ai-chat-choice-button:hover,.ai-chat-choice-button:focus-visible{border-color:var(--brass); outline:none;}
  .ai-chat-choice-button strong,.ai-chat-choice-button small{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .ai-chat-choice-button strong{font:700 12px/1.3 'Inter',sans-serif;}
  .ai-chat-choice-button small{margin-top:2px; color:var(--offwhite-dim); font:10px/1.3 'Inter',sans-serif;}
  .ai-chat-certificate-filters{display:grid; gap:6px;}
  .ai-chat-certificate-table-wrap{margin-top:10px;}
  .ai-chat-certificate-table-scroll{max-width:100%; overflow-x:auto; border:1px solid var(--navy-line); border-radius:9px;}
  .ai-chat-certificate-table-scroll table{width:max-content; min-width:760px; border-collapse:collapse; font:10px/1.3 'Inter',sans-serif;}
  .ai-chat-certificate-table-scroll th,.ai-chat-certificate-table-scroll td{padding:7px 8px; border-bottom:1px solid var(--navy-line); text-align:left; white-space:nowrap; vertical-align:top;}
  .ai-chat-certificate-table-scroll th{color:var(--brass-light); font-weight:700; background:rgba(255,255,255,.04);}
  .ai-chat-certificate-table-scroll tr:last-child td{border-bottom:0;}
  .ai-chat-see-detail{margin-top:8px; padding:8px 12px; border:1px solid var(--brass); border-radius:9px; color:var(--brass-light); background:transparent; font:700 11px 'Inter',sans-serif; cursor:pointer;}
  .ai-chat-see-detail:hover,.ai-chat-see-detail:focus-visible{background:rgba(224,177,92,.12); outline:none;}
  .ai-chat-chip{
    flex:0 0 auto; white-space:nowrap;
    background:var(--well-bg); border:1px solid var(--navy-line); border-radius:16px;
    color:var(--brass-light); font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600;
    padding:8px 14px; cursor:pointer; transition:border-color .15s ease, background .15s ease;
  }
  .ai-chat-chip:hover{border-color:var(--brass); background:rgba(224,177,92,.08);}
  .ai-chat-inputbar{
    position:sticky; bottom:0; z-index:2;
    flex:0 0 auto; display:flex; align-items:flex-end; gap:10px;
    /* Keyboard mode clears only the physical bottom inset; the browser's
       dynamic viewport already supplies the keyboard clearance. */
    padding:10px 14px calc(12px + var(--sc-ai-input-safe-bottom, env(safe-area-inset-bottom, 0px)));
    border-top:1px solid var(--navy-line);
    background:var(--navy-deep);
  }
  .ai-chat-view.keyboard-open{--sc-ai-input-safe-bottom:0px;}
  .ai-chat-attachment-preview{
    flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    padding:8px 14px 0; background:var(--navy-deep);
  }
  .ai-attachment-chip{
    position:relative; display:flex; align-items:center; gap:8px; min-width:0;
    max-width:260px; padding:7px 9px; border:1px solid var(--navy-line); border-radius:12px;
    background:var(--well-bg); color:var(--offwhite); font:12px/1.35 'Inter',sans-serif;
  }
  .ai-attachment-chip-thumb{width:32px; height:32px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:8px; background:rgba(224,177,92,.12); color:var(--brass-light);}
  .ai-attachment-chip-thumb img{width:100%; height:100%; object-fit:cover;}
  .ai-attachment-chip-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .ai-attachment-remove{width:24px; height:24px; flex:0 0 auto; border:0; border-radius:50%; background:transparent; color:var(--offwhite-dim); cursor:pointer; font-size:18px; line-height:1;}
  .ai-attachment-remove:hover,.ai-attachment-remove:focus-visible{background:rgba(224,177,92,.12); color:var(--offwhite); outline:none;}
  .ai-chat-composer-status{flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:8px 14px 0; color:var(--offwhite-dim); font:12px/1.4 'Inter',sans-serif;}
  .ai-chat-composer-status.error{color:#ffad95;}
  .ai-chat-composer-status.review{justify-content:space-between; gap:10px; padding-top:9px;}
  .ai-chat-quota-notice{position:relative; z-index:1; flex:0 0 auto; margin:0 14px; padding:9px 11px; border:1px solid rgba(224,177,92,.48); border-radius:10px; background:var(--navy-deep); color:var(--brass-light); box-shadow:0 5px 16px rgba(0,0,0,.22); font:600 11px/1.4 'Inter',sans-serif;}
  .ai-chat-recording-preview{display:flex; align-items:center; gap:10px; min-width:0; flex:1;}
  .ai-chat-recording-preview audio{height:34px; min-width:0; width:100%; max-width:320px;}
  .ai-chat-review-actions{display:flex; align-items:center; gap:6px; flex:0 0 auto;}
  .ai-chat-review-btn{border:1px solid var(--navy-line); border-radius:12px; padding:7px 10px; background:var(--well-bg); color:var(--offwhite); cursor:pointer; font:600 11.5px/1.2 'Inter',sans-serif;}
  .ai-chat-review-btn.primary{border-color:var(--brass); background:var(--brass); color:var(--navy-deep);}
  .ai-chat-review-btn:hover,.ai-chat-review-btn:focus-visible{border-color:var(--brass-light); outline:none;}
  .ai-chat-tool-btn{
    width:38px; height:38px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--navy-line); border-radius:50%; background:var(--well-bg); color:var(--offwhite-dim); cursor:pointer;
  }
  .ai-chat-tool-btn:hover,.ai-chat-tool-btn:focus-visible{border-color:var(--brass); color:var(--brass-light); outline:none;}
  .ai-chat-tool-btn.is-recording{border-color:#ff9075; background:rgba(193,80,46,.2); color:#ffad95; animation:ai-recording-pulse 1.2s ease-in-out infinite;}
  .ai-chat-tool-btn:disabled{opacity:.4; cursor:default; animation:none;}
  .ai-chat-tool-btn svg{width:17px; height:17px;}
  .ai-chat-owner-only-control[hidden]{display:none!important;}
  @keyframes ai-recording-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,144,117,.24);}50%{box-shadow:0 0 0 5px rgba(255,144,117,0);}}
  .ai-message-attachment{display:flex; align-items:center; gap:8px; margin:0 0 8px; padding:7px 9px; border:1px solid var(--navy-line); border-radius:10px; background:rgba(0,0,0,.12); color:inherit; font:12px/1.35 'Inter',sans-serif;}
  .ai-message-attachment img{display:block; max-width:220px; max-height:160px; border-radius:8px; object-fit:cover;}
  .ai-message-attachment audio{width:min(260px,100%); height:32px;}
  .ai-message-attachment-file{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .ai-chat-input{
    flex:1; resize:none; max-height:110px; min-height:42px;
    background:var(--well-bg); border:1px solid var(--navy-line); border-radius:20px;
    color:var(--offwhite); font-family:'Inter',sans-serif; font-size:14px;
    padding:10px 16px; outline:none;
  }
  .ai-chat-input:focus{border-color:var(--brass);}
  .ai-chat-send{
    width:42px; height:42px; border-radius:50%; flex:0 0 auto;
    background:var(--brass); color:var(--navy-deep); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .ai-chat-send:disabled{opacity:.4; cursor:default;}
  .ai-chat-send svg{width:18px; height:18px;}
  @media (max-width:520px){
    .ai-chat-attachment-preview{padding-left:10px; padding-right:10px;}
    .ai-chat-inputbar{gap:7px; padding-left:10px; padding-right:10px;}
    .ai-chat-tool-btn{width:36px; height:36px;}
    .ai-chat-send{width:40px; height:40px;}
    .ai-chat-composer-status.review{align-items:stretch; flex-direction:column;}
    .ai-chat-recording-preview audio{max-width:none;}
    .ai-chat-review-actions{justify-content:flex-end;}
  }

  .ship-tool-fab-label.show{
    opacity:1;
    transform:none;
  }

  .hydro-note{
    font-size:12px;
    color:var(--offwhite-dim);
    line-height:1.6;
    margin:0 0 18px;
  }
  .hydro-mapping-modal{max-width:560px;}
  .hydro-mapping-grid{display:grid; grid-template-columns:minmax(145px,.8fr) minmax(180px,1.2fr); gap:12px; align-items:center;}
  .hydro-mapping-heading{padding:0 10px 7px; color:var(--brass-light); font:700 11px/1.3 'Inter',sans-serif; text-transform:uppercase; letter-spacing:.35px;}
  .hydro-mapping-rows{display:grid; gap:7px; padding:10px; border:1px solid var(--navy-line); border-radius:12px; background:rgba(255,255,255,.025);}
  .hydro-mapping-rows label{font:600 12px/1.3 'Inter',sans-serif; color:var(--offwhite);}
  .hydro-mapping-rows select{width:100%; min-width:0; padding:9px 10px; border:1px solid var(--navy-line); border-radius:9px; background:var(--well-bg); color:var(--offwhite); font:12px 'Inter',sans-serif;}
  .hydro-mapping-rows select:focus{border-color:var(--brass); outline:2px solid rgba(224,177,92,.18);}
  .hydro-mapping-status{margin-top:10px; min-height:18px; color:var(--offwhite-dim); font:11.5px/1.45 'Inter',sans-serif;}
  @media (max-width:520px){
    .hydro-mapping-grid{grid-template-columns:1fr; gap:5px;}
    .hydro-mapping-heading{display:none;}
  }
  #info-popup-overlay{ z-index:500; }
  .info-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    min-width:22px;
    border-radius:50%;
    border:1px solid var(--brass);
    background:rgba(255,255,255,.05);
    color:var(--brass-light);
    font-family:'Spectral',serif;
    font-style:italic;
    font-weight:700;
    font-size:13px;
    line-height:1;
    cursor:pointer;
    padding:0;
    transition:background .15s ease, color .15s ease;
  }
  .info-btn:hover{background:var(--brass); color:var(--on-brass);}
  .info-btn-row{
    display:flex;
    justify-content:flex-start;
    margin:18px 0;
  }
  #info-popup-body{
    font-size:13px;
    color:var(--offwhite-dim);
    line-height:1.7;
    text-align:left;
  }
  #info-popup-body p{margin:0 0 14px;}
  #info-popup-body p:last-child{margin-bottom:0;}
  .table-scroll{
    overflow-x:auto;
    border:1px solid var(--navy-line);
    border-radius:16px;
    margin-bottom:10px;
    background:rgba(255,255,255,.03);
    backdrop-filter:var(--glass-blur-soft);
    -webkit-backdrop-filter:var(--glass-blur-soft);
  }
  .hydro-zoom-wrap{
    transform-origin:top left;
    transition:transform .1s ease-out;
    will-change:transform;
  }
  table.hydro-table{
    width:auto;
    border-collapse:collapse;
    font-family:'JetBrains Mono', monospace;
    font-size:12.5px;
    white-space:nowrap;
  }
  table.hydro-table thead th{
    background:rgba(255,255,255,.06);
    color:var(--brass-light);
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:.4px;
    padding:11px 10px;
    text-align:right;
    white-space:nowrap;
  }
  table.hydro-table thead th:first-child{text-align:left;}
  table.hydro-table tbody td{
    padding:9px 10px;
    text-align:right;
    border-top:1px solid var(--navy-line);
    color:var(--offwhite);
    white-space:nowrap;
  }
  table.hydro-table tbody td:first-child{
    text-align:left;
    font-family:'Inter',sans-serif;
    font-weight:600;
    color:var(--brass-light);
  }
  table.hydro-table tbody tr:nth-child(even){background:rgba(255,255,255,.025);}
  /* Trimming Table (100t) — larger cells/font since it's dense with typed-in da/df values */
  #trim-table-el{ font-size:15px; }
  #trim-table-el thead th{ font-size:13.5px; padding:13px 12px; }
  #trim-table-el tbody td{ padding:12px 12px; }
  #trim-table-el .trim-cell-input{ width:78px; font-size:14px; padding:8px 6px; }
  table.hydro-table tbody tr.summer-row{background:rgba(242,200,120,.12);}
  table.hydro-table tbody tr.summer-row td:nth-child(2)::after{
    content:' (Summer)';
    font-size:9.5px;
    color:var(--offwhite-dim);
    font-family:'Inter',sans-serif;
    font-weight:500;
  }

  /* Hydro toolbar */
  .hydro-toolbar{
    display:flex;
    gap:10px;
    margin:0 0 12px;
  }
  .hydro-tool-btn{
    flex:1;
    padding:11px 14px;
    border-radius:14px;
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:13.5px;
    letter-spacing:.2px;
    cursor:pointer;
    border:1px solid var(--navy-line);
    transition:filter .12s ease, background .15s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
  }
  .hydro-tool-btn.add{
    background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),linear-gradient(180deg,var(--brass-light),var(--brass));
    color:var(--on-brass);
    border:1px solid rgba(255,255,255,.4);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  }
  .hydro-tool-btn.add:hover{filter:brightness(1.06);}
  .hydro-tool-btn.delete{
    background:rgba(255,255,255,.04);
    color:#e89078;
    border-color:rgba(224,140,120,.4);
  }
  .hydro-tool-btn.delete:hover{background:rgba(224,140,120,.14);}

  /* Zoom bar */
  .hydro-zoom-bar{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 10px;
  }
  .hydro-main-zoom-bar{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    width:100%;
    gap:6px;
  }
  .trim-main-toolbar{grid-template-columns:repeat(6,minmax(0,1fr));}
  .hydro-zoom-btn{
    min-width:38px;
    height:34px;
    padding:0 10px;
    border-radius:12px;
    border:1px solid var(--navy-line);
    background:rgba(255,255,255,.06);
    color:var(--brass-light);
    font-family:'Inter',sans-serif;
    font-size:17px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .15s ease;
  }
  .hydro-zoom-btn:hover{background:rgba(242,200,120,.16);}
  .hydro-zoom-btn.fit{
    font-size:13px;
    letter-spacing:.3px;
    padding:0 14px;
  }
  .hydro-main-zoom-bar .hydro-zoom-btn{
    width:100%;
    min-width:0;
    padding:0;
  }
  .hydro-main-zoom-bar .hydro-zoom-btn.fit{padding:0;}
  .hydro-zoom-level{
    font-size:12.5px;
    font-weight:600;
    color:var(--offwhite-dim);
    font-family:'Inter',sans-serif;
    margin-left:2px;
    min-width:44px;
  }
  .hydro-control-area{position:relative;}
  .hydro-zoom-utilities{display:flex; align-items:center; gap:6px; margin-left:4px;}
  .hydro-zoom-actions{display:flex; align-items:center; gap:6px; margin-left:auto;}
  .hydro-zoom-btn.action{width:34px; min-width:34px; height:34px; padding:0; border-radius:10px;}
  .hydro-zoom-btn.action svg{width:16px; height:16px;}
  .hydro-zoom-btn.action-add{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),linear-gradient(180deg,var(--brass-light),var(--brass)); color:var(--on-brass); border-color:rgba(255,255,255,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.5);}
  .hydro-zoom-btn.action-add:hover{filter:brightness(1.06); background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),linear-gradient(180deg,var(--brass-light),var(--brass));}
  .hydro-zoom-btn.action-delete{color:#e89078; border-color:rgba(224,140,120,.4);}
  .hydro-zoom-btn.action-delete:hover{background:rgba(224,140,120,.14);}
  .hydro-zoom-btn.utility{width:34px; min-width:34px; height:34px; padding:0; border-radius:10px;}
  .hydro-zoom-btn.utility svg{width:16px; height:16px;}
  .hydro-main-zoom-bar .hydro-zoom-btn.action,
  .hydro-main-zoom-bar .hydro-zoom-btn.utility{width:100%; min-width:0; height:34px; border-radius:10px;}
  .hydro-main-zoom-bar .hydro-zoom-btn.action-add,
  .hydro-main-zoom-bar .hydro-zoom-btn.action-delete{
    background:rgba(255,255,255,.06);
    color:var(--brass-light);
    border-color:var(--navy-line);
    box-shadow:none;
  }
  .hydro-main-zoom-bar .hydro-zoom-btn.action-add:hover,
  .hydro-main-zoom-bar .hydro-zoom-btn.action-delete:hover{
    background:rgba(242,200,120,.16);
    filter:none;
  }
  .hydro-popup-panel{position:absolute; top:42px; right:0; z-index:78; width:min(320px,calc(100vw - 34px)); padding:12px; border:1px solid var(--navy-line); border-radius:14px; background:var(--popup-surface); box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi);}
  .hydro-popup-panel[hidden]{display:none;}
  .hydro-popup-header{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px;}
  .hydro-popup-title{margin:0; color:var(--brass-light); font-family:'Spectral',serif; font-size:16px; font-weight:700;}
  .hydro-popup-close{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:28px; height:28px; margin:-4px -4px -4px 0; padding:0; border:1px solid var(--navy-line); border-radius:8px; background:rgba(255,255,255,.05); color:var(--offwhite-dim); font:400 22px/1 'Inter',sans-serif; cursor:pointer;}
  .hydro-popup-close:hover{background:rgba(224,140,120,.14); border-color:rgba(224,140,120,.42); color:#f3a48d;}
  .hydro-popup-label{display:block; margin:0 0 5px; color:var(--offwhite-dim); font:700 10px 'Inter',sans-serif; letter-spacing:.04em; text-transform:uppercase;}
  .hydro-search-fields{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  .hydro-popup-panel select,.hydro-popup-panel input{width:100%; min-width:0; height:36px; padding:0 9px; border:1px solid var(--navy-line); border-radius:9px; background:var(--popup-field-surface); color:var(--offwhite); font:600 12px 'Inter',sans-serif; outline:none;}
  .hydro-popup-panel select:focus,.hydro-popup-panel input:focus{border-color:var(--brass); box-shadow:0 0 0 2px rgba(242,200,120,.18);}
  .hydro-search-calculate{width:100%; height:34px; margin-top:10px; border:1px solid rgba(255,255,255,.4); border-radius:9px; background:linear-gradient(180deg,var(--brass-light),var(--brass)); color:var(--on-brass); font:700 11px 'Inter',sans-serif; cursor:pointer;}
  .hydro-search-result{margin-top:10px; padding-top:10px; border-top:1px solid var(--navy-line);}
  .hydro-search-result p{margin:0; color:var(--offwhite-dim); font:600 11px/1.45 'Inter',sans-serif;}
  .hydro-search-result strong{color:var(--brass-light);}
  .hydro-search-result-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 10px; margin:8px 0 0;}
  .hydro-search-result-grid div{min-width:0;}
  .hydro-search-result-grid dt{margin:0; color:var(--offwhite-dim); font:700 9px 'Inter',sans-serif; text-transform:uppercase; letter-spacing:.04em;}
  .hydro-search-result-grid dd{margin:2px 0 0; color:var(--offwhite); font:600 11px 'JetBrains Mono',monospace;}
  .hydro-normal-view-btn{width:100%; height:34px; margin:0 0 10px; border:1px solid var(--brass); border-radius:9px; background:rgba(242,200,120,.12); color:var(--brass-light); font:700 11px 'Inter',sans-serif; cursor:pointer;}
  .hydro-column-options{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px;}
  .hydro-column-option{display:flex; align-items:center; gap:7px; min-width:0; padding:7px 8px; border:1px solid var(--navy-line); border-radius:9px; color:var(--offwhite-dim); font:600 11px 'Inter',sans-serif; cursor:pointer;}
  .hydro-column-option input{width:14px; height:14px; margin:0; accent-color:var(--brass);}
  .hydro-column-option:has(input:checked){background:rgba(242,200,120,.10); border-color:rgba(242,200,120,.36); color:var(--offwhite);}

  /* Hydrostatic Table — refined visual surface, aligned with the trimming-table workspace */
  #hydro-view .hydro-control-area{
    padding:10px;
    border:1px solid var(--navy-line);
    border-radius:15px;
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  }
  #hydro-view .hydro-main-zoom-bar{margin:0;}
  #hydro-view .hydro-main-zoom-bar .hydro-zoom-btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
#hydro-view .table-scroll{
    margin-top:12px;
    border:1px solid var(--navy-line);
    border-radius:15px;
    background:rgba(255,255,255,.03);
    backdrop-filter:var(--glass-blur-soft);
    -webkit-backdrop-filter:var(--glass-blur-soft);
    box-shadow:none;
  }
#hydro-view table.hydro-table{min-width:100%; font-size:13px;}
#hydro-view table.hydro-table thead th{
    position:sticky;
    top:0;
    z-index:2;
    padding:13px 12px;
    background:rgba(255,255,255,.06);
    border-bottom:1px solid var(--navy-line);
    box-shadow:none;
  }
  #hydro-view table.hydro-table tbody td{padding:11px 12px;}
  #hydro-view table.hydro-table tbody tr{transition:background .14s ease;}
  #hydro-view table.hydro-table tbody tr:hover{background:rgba(242,200,120,.085);}
  #hydro-view table.hydro-table tbody tr:has(input[type="checkbox"]:checked){background:rgba(242,200,120,.13);}
  #hydro-view .hydro-popup-panel{
    border-color:rgba(242,200,120,.30);
    box-shadow:0 16px 34px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
  }
  #hydro-view .hydro-popup-header{padding-bottom:9px; border-bottom:1px solid var(--navy-line);}
  #hydro-view .hydro-column-options{gap:8px;}

  /* Popup screens are opaque and follow the active day/night theme rather than showing content behind them. */
  .side-menu,
  .modal-box,
  .photo-sheet-box,
  .confirm-box,
  .hydro-popup-panel,
  .calc-sort-menu,
  .ship-sort-menu,
  .collection-sort-panel,
  .summary-type-panel,
  .collection-filter-panel{
    background:var(--popup-surface) !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  :root[data-theme="light"] .hydro-popup-panel{
    background:#FFFFFF !important;
    border-color:rgba(29,57,82,.18);
    box-shadow:0 16px 34px rgba(20,60,90,.16), inset 0 1px 0 rgba(255,255,255,.92);
  }
  :root[data-theme="light"] .hydro-popup-close{background:#F3F6F9;}
  :root[data-theme="light"] .hydro-column-option{background:#FFFFFF;}
  :root[data-theme="light"] .hydro-column-option:has(input:checked){background:rgba(185,121,30,.10);}

  /* Cargo Hold Capacity & 100 Ton Trimming Table — copy the approved Hydrostatic Table design */
  #cargo-trim-view .hydro-control-area{
    padding:10px;
    border:1px solid var(--navy-line);
    border-radius:15px;
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  }
  #cargo-trim-view .hydro-main-zoom-bar{margin:0;}
  #cargo-trim-view .hydro-main-zoom-bar .hydro-zoom-btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
  #cargo-trim-view .table-scroll{
    margin-top:12px;
    border:1px solid var(--navy-line);
    border-radius:15px;
    background:rgba(4,12,24,.48);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  }
  #cargo-trim-view table.hydro-table{min-width:100%; font-size:13px;}
  #cargo-trim-view table.hydro-table thead th{
    position:sticky;
    top:0;
    z-index:2;
    padding:13px 12px;
    background:linear-gradient(180deg,rgba(31,48,71,.98),rgba(18,32,51,.98));
    border-bottom:1px solid rgba(242,200,120,.24);
    box-shadow:0 2px 0 rgba(2,8,18,.22);
  }
  #cargo-trim-view table.hydro-table tbody td{padding:11px 12px;}
  #cargo-trim-view table.hydro-table tbody tr{transition:background .14s ease;}
  #cargo-trim-view table.hydro-table tbody tr:hover{background:rgba(242,200,120,.085);}
  #cargo-trim-view table.hydro-table tbody tr:has(input[type="checkbox"]:checked){background:rgba(242,200,120,.13);}
  #cargo-trim-view .hydro-popup-panel{
    border-color:rgba(242,200,120,.30);
    box-shadow:0 16px 34px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
  }
  #cargo-trim-view .hydro-popup-header{padding-bottom:9px; border-bottom:1px solid var(--navy-line);}
  #cargo-trim-view .hydro-column-options{gap:8px;}
  @media (max-width:480px){
    .hydro-main-zoom-bar{gap:4px;}
    .hydro-zoom-btn{min-width:30px; height:30px; padding:0 6px; border-radius:9px; font-size:15px;}
    .hydro-zoom-btn.fit{padding:0 8px; font-size:10px;}
    .hydro-zoom-level{min-width:32px; margin-left:0; font-size:10.5px;}
    .hydro-zoom-utilities,.hydro-zoom-actions{gap:4px; margin-left:0;}
    .hydro-zoom-btn.action,.hydro-zoom-btn.utility{width:30px; min-width:30px; height:30px; border-radius:9px;}
    .hydro-main-zoom-bar .hydro-zoom-btn{min-width:0; height:32px; padding:0; border-radius:9px;}
    .hydro-main-zoom-bar .hydro-zoom-btn.fit{padding:0; font-size:10px;}
    .hydro-main-zoom-bar .hydro-zoom-btn.action,.hydro-main-zoom-bar .hydro-zoom-btn.utility{width:100%; min-width:0; height:32px; border-radius:9px;}
    .hydro-popup-panel{top:38px; width:min(320px,calc(100vw - 28px));}
  }

  /* Checkbox + edit columns */
  th.hydro-check-col, td.hydro-check-cell{
    width:38px; text-align:center !important; padding-left:8px; padding-right:8px;
  }
  th.hydro-edit-col, td.hydro-edit-cell{
    width:44px; text-align:center !important;
  }
  .hydro-table input[type="checkbox"]{
    width:16px; height:16px; accent-color:var(--brass); cursor:pointer;
  }
  .hydro-row-edit{
    background:rgba(255,255,255,.05);
    border:1px solid var(--navy-line);
    color:var(--brass-light);
    border-radius:10px;
    font-size:14px;
    line-height:1;
    padding:5px 8px;
    cursor:pointer;
    transition:background .15s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .hydro-row-edit:hover{background:rgba(242,200,120,.16);}

  /* Row editor footer: equal-size Save / Save & Exit */
  #hydro-row-footer .btn-save-ship{
    flex:1;
    min-width:0;
    text-align:center;
    white-space:nowrap;
  }

  /* ---------- Custom confirm dialog ---------- */
  .confirm-overlay{
    display:none;
    /* Settings is a full-screen detail view at z-index:10030. Keep every
       confirmation above it so destructive actions remain visible and usable. */
    position:fixed; inset:0; z-index:10050;
    background:rgba(2,8,16,.38);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    align-items:center;
    justify-content:center;
    padding:20px;
  }
  .confirm-overlay.open{display:flex;}
  .confirm-box{
    background:var(--surface-strong);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--navy-line);
    border-radius:20px;
    padding:22px;
    max-width:340px;
    width:100%;
    box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
    animation:slideUp .2s ease;
  }
  .confirm-box p{
    margin:0 0 20px;
    font-size:14.5px;
    line-height:1.6;
    color:var(--offwhite);
  }
  .confirm-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
  }
  .btn-confirm-delete{
    background:#D9634A;
    color:var(--offwhite);
    border:1px solid rgba(255,255,255,.25);
    padding:10px 20px;
    border-radius:999px;
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
  }
  .btn-confirm-delete:hover{filter:brightness(1.1);}

  /* ---------- Voyage report color key (Port Schedule / Sea Passage / In Port tables) ---------- */
  .vc-legend{
    display:flex; flex-wrap:wrap; gap:10px 16px;
    margin:14px 0 18px;
    font-size:11.5px;
    color:var(--offwhite-dim);
  }
  .vc-legend-item{display:flex; align-items:center; gap:6px;}
  .vc-swatch{width:12px; height:12px; border-radius:4px; flex-shrink:0;}
  table.hydro-table.vc-table thead th{white-space:normal; line-height:1.3;}
  table.hydro-table.vc-table thead tr:first-child th{border-bottom:1px solid var(--navy-line);}
  .vc-freeze-first th:first-child,
  .vc-freeze-first td:first-child{
    position:sticky; left:0; z-index:3;
    box-shadow:2px 0 6px rgba(0,0,0,.35);
  }
  .vc-freeze-first thead th:first-child{z-index:4; background:var(--surface-strong);}
  .vc-freeze-first tbody td:first-child{background:var(--surface-strong);}
  .vc-th-dep,   .vc-swatch.dep  {background:rgba(120,170,220,.25); color:#bcd7f0;}
  .vc-th-arr,   .vc-swatch.arr  {background:rgba(140,200,150,.25); color:#bfe6c4;}
  .vc-th-pass,  .vc-swatch.pass {background:rgba(242,200,120,.30); color:var(--brass-light);}
  .vc-th-stay,  .vc-swatch.stay {background:rgba(190,150,220,.25); color:#dcc3ee;}
  .vc-th-final, .vc-swatch.final{background:rgba(242,200,120,.30); color:var(--brass-light);}
  table.hydro-table tr.ds-subtotal-row td{font-weight:700;}
  table.hydro-table tr.ds-final-row td{background:rgba(242,200,120,.10); color:var(--brass-light); font-weight:700;}
  table.hydro-table tr.ds-final-row td:first-child{background:rgba(242,200,120,.10);}
  .ds-pivot-table th:first-child,
  .ds-pivot-table td:first-child{
    white-space:normal;
    width:128px;
    max-width:128px;
    line-height:1.3;
  }
  table.ds-pivot-table{ width:100%; }
  .ds-pivot-table th:not(:first-child),
  .ds-pivot-table td:not(:first-child){
    text-align:center;
  }
  .vc-th-total, .vc-swatch.total{background:rgba(224,128,100,.26); color:#f0b8a0;}
  .vc-th-daily, .vc-swatch.daily{background:rgba(120,200,200,.25); color:#a8e6e0;}
  td.vc-td-dep  {background:rgba(120,170,220,.08);}
  td.vc-td-arr  {background:rgba(140,200,150,.08);}
  td.vc-td-stay {background:rgba(190,150,220,.08);}
  td.vc-td-final{background:rgba(242,200,120,.09);}
  td.vc-td-total{background:rgba(224,128,100,.09);}
  td.vc-td-daily{background:rgba(120,200,200,.08);}

  tr.es-highlight-row{background:rgba(242,200,120,.18);}
  tr.es-highlight-row td{color:var(--brass-light); font-weight:700;}
  tr.es-highlight-row td:first-child{color:var(--brass-light);}
  table.hydro-table.es-sens-table{ width:100%; font-size:11.5px; }
  table.hydro-table.es-sens-table th,
  table.hydro-table.es-sens-table td{ white-space:nowrap; }
/* Supabase authentication and profile onboarding preserve the existing SMART SEAMEN app behind secure gates. */
  #sc-auth-gate,
/* Supabase authentication and profile onboarding preserve the existing SMART SEAMEN app behind secure gates. */
  #sc-profile-gate,
/* Supabase authentication and profile onboarding preserve the existing SMART SEAMEN app behind secure gates. */
  #sc-approval-gate,
#sc-profile-gate,
#sc-admin-panel{position:fixed;inset:0;z-index:10000;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(24px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) calc(24px + env(safe-area-inset-left,0px));background:linear-gradient(155deg,rgba(4,15,28,.98),rgba(11,61,96,.96));color:#f6fbff;font-family:'Inter',sans-serif;}
  #sc-admin-panel{z-index:10020;background:rgba(2,10,18,.75);align-items:flex-end;}
#sc-auth-gate[hidden],
#sc-approval-gate[hidden],
#sc-profile-gate[hidden],
#sc-admin-panel[hidden]{display:none!important;}
  .sc-auth-card{width:min(100%,390px);margin:auto;padding:28px 24px 24px;border:1px solid rgba(140,221,248,.35);border-radius:24px;background:rgba(9,28,46,.96);box-shadow:0 22px 56px rgba(0,0,0,.36);}
  .sc-admin-card{width:min(100%,640px);max-height:min(78vh,640px);border-radius:24px 24px 0 0;overflow:auto;}
  .sc-auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px;}
  .sc-auth-brandmark{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;overflow:hidden;background:#2AABEE;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);}
  .sc-auth-brandmark img{display:block;width:100%;height:100%;object-fit:cover;}
  .sc-auth-brand p{margin:0;color:#8CDDF8;font-size:11px;font-weight:800;letter-spacing:.16em;}
  .sc-auth-brand small{display:block;margin-top:3px;color:#c1d6e4;font-size:12px;letter-spacing:0;}
  .sc-auth-card h2{margin:0;color:#fff;font-family:'Spectral',serif;font-size:28px;}
  .sc-auth-intro{margin:8px 0 22px;color:#c1d6e4;font-size:13px;line-height:1.55;}
  .sc-auth-field{display:block;margin:12px 0;color:#ddecf6;font-size:12px;font-weight:700;}
  .sc-auth-row{display:flex;gap:10px;}
  .sc-auth-row .sc-auth-field{flex:1;min-width:0;}
  .sc-auth-row .sc-auth-field input,.sc-auth-row .sc-auth-field select{width:100%;}
  .sc-auth-divider-line{border:0;border-top:1px solid rgba(140,221,248,.22);margin:20px 0;}
  .sc-auth-password-hint{margin:-4px 0 12px;font-size:11.5px;line-height:1.5;color:#9fb7c8;}
  .sc-auth-field input,.sc-auth-field select{scroll-margin-top:16px;scroll-margin-bottom:96px;}
  .sc-auth-message{scroll-margin-bottom:96px;}
  .sc-auth-password-wrap{position:relative;}
  .sc-auth-password-wrap input{padding-right:44px !important;}
  .sc-auth-toggle-visibility{position:absolute;top:50%;right:4px;transform:translateY(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;margin:0;color:#9fb7c8;cursor:pointer;}
  .sc-auth-toggle-visibility:hover{color:#fff;}
  .sc-auth-toggle-visibility svg{display:block;}
  .sc-auth-toggle-visibility svg[hidden]{display:none;}
  .sc-auth-field input[type="date"]{min-height:46px;}
  .sc-auth-field input{-webkit-appearance:none;appearance:none;}
  .sc-auth-field input,.sc-auth-field select{width:100%;margin-top:7px;padding:13px 14px;border:1px solid rgba(140,221,248,.26);border-radius:12px;background:#071b2c;color:#fff;font:inherit;outline:none;}
  .sc-auth-field input:focus,.sc-auth-field select:focus{border-color:#2AABEE;box-shadow:0 0 0 3px rgba(42,171,238,.16);}
  .sc-auth-field input:disabled{opacity:.72;cursor:not-allowed;color:#b5c8d5;}
  .sc-auth-submit,.sc-auth-google,.sc-admin-close{width:100%;min-height:46px;margin-top:16px;border-radius:12px;font:700 14px 'Inter',sans-serif;cursor:pointer;transition:transform .15s ease,opacity .15s ease;}
  .sc-auth-submit{border:0;background:#2AABEE;color:#06233a;}
  .sc-auth-google,.sc-admin-close{border:1px solid rgba(140,221,248,.35);background:transparent;color:#f6fbff;}
  .sc-auth-submit:active,.sc-auth-google:active,.sc-admin-close:active{transform:scale(.98);}
  .sc-auth-submit:disabled,.sc-auth-google:disabled{opacity:.6;cursor:wait;}
  .sc-auth-divider{display:flex;align-items:center;gap:10px;margin:18px 0 0;color:#8ba6b8;font-size:11px;letter-spacing:.12em;}
  .sc-auth-divider:before,.sc-auth-divider:after{content:'';height:1px;flex:1;background:rgba(140,221,248,.18);}
  .sc-auth-switch{display:block;width:100%;margin:18px 0 0;border:0;background:transparent;color:#8CDDF8;font:600 13px 'Inter',sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
  .sc-auth-message{min-height:20px;margin:14px 0 0;color:#ffbea9;font-size:12px;line-height:1.45;}
  .sc-auth-message.success{color:#9be5c0;}
  .sc-profile-note{padding:10px 12px;border:1px solid rgba(140,221,248,.2);border-radius:12px;background:rgba(42,171,238,.08);color:#cfeaf5;font-size:12px;line-height:1.5;}
  .sc-admin-list{display:grid;gap:10px;margin-top:16px;}
  .sc-admin-user{padding:12px;border:1px solid rgba(140,221,248,.2);border-radius:14px;background:#071b2c;}
  .sc-admin-user-name{font-weight:700;color:#fff;}.sc-admin-user-meta{margin-top:4px;color:#aac3d2;font-size:12px;line-height:1.45;}
  .sc-admin-user-actions{display:flex;gap:8px;margin-top:10px;}.sc-admin-user-actions button{flex:1;border:1px solid rgba(140,221,248,.32);border-radius:10px;background:transparent;color:#8CDDF8;padding:8px;font:700 12px 'Inter',sans-serif;cursor:pointer;}


/* Owner approval, duplicate alerts, and reliable mobile navigation. */
#sc-approval-gate{position:fixed;inset:0;z-index:10010;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(24px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) calc(24px + env(safe-area-inset-left,0px));background:linear-gradient(155deg,rgba(4,15,28,.98),rgba(11,61,96,.96));color:#f6fbff;font-family:'Inter',sans-serif;}
#sc-approval-gate[hidden]{display:none!important;}
.sc-admin-section-title{margin:22px 0 -6px;color:#8CDDF8;font:800 12px 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;}
.sc-admin-alert{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px;border:1px solid rgba(255,190,120,.34);border-radius:14px;background:rgba(168,105,32,.12);}
.sc-admin-alert strong{color:#ffe0ad;font:700 13px 'Inter',sans-serif;}
.sc-admin-alert p{margin:4px 0 0;color:#d8e7ef;font:12px/1.45 'Inter',sans-serif;}
.sc-admin-alert button{flex:0 0 auto;border:1px solid rgba(255,218,154,.45);border-radius:9px;background:transparent;color:#ffe0ad;padding:7px 9px;font:700 11px 'Inter',sans-serif;cursor:pointer;}
.sc-admin-user{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;}
.sc-admin-user-actions{flex:0 0 120px;flex-wrap:wrap;justify-content:flex-end;}
.sc-admin-user-actions button{flex:0 0 auto;min-width:54px;}
.sc-member-status{display:inline-flex;align-items:center;min-height:26px;padding:0 8px;border:1px solid rgba(140,221,248,.28);border-radius:999px;color:#cfeaf5;font:700 10px 'Inter',sans-serif;text-transform:capitalize;}
.sc-member-status.approved{border-color:rgba(119,230,165,.42);color:#9be5c0;}
.sc-member-status.rejected,.sc-member-status.suspended{border-color:rgba(255,146,128,.42);color:#ffbea9;}
.sc-member-status.pending{border-color:rgba(255,218,154,.4);color:#ffe0ad;}
.sc-ai-access-state{display:inline-flex;align-items:center;min-height:26px;padding:0 8px;border:1px solid rgba(140,221,248,.28);border-radius:999px;font:700 10px 'Inter',sans-serif;white-space:nowrap;}
.sc-ai-access-state.enabled{border-color:rgba(119,230,165,.42);color:#9be5c0;}
.sc-ai-access-state.disabled{border-color:rgba(255,146,128,.42);color:#ffbea9;}
.sc-admin-user-actions .sc-admin-ai-toggle.enabled{border-color:rgba(255,164,139,.52);color:#ffbea9;background:rgba(145,47,31,.12);}
.sc-admin-user-actions .sc-admin-ai-toggle.disabled{border-color:rgba(119,230,165,.52);color:#9be5c0;background:rgba(27,123,74,.12);}

/* Keep every primary tab visible and tappable even on compact mobile screens. */
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav{grid-template-columns:repeat(3,minmax(0,1fr));}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="ship"],
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="calc"],
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="results"]{display:flex!important;visibility:visible!important;min-width:0!important;width:100%!important;}
@media(max-width:360px){
  .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav{width:min(228px,calc(100vw - 68px));}
  .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button .tab-label{font-size:7px;}
}
@media(max-width:420px){
  .sc-admin-user{display:block;}
  .sc-admin-user-actions{margin-top:10px;justify-content:flex-start;}
}

/* Private cloud backup and restore controls */
.sc-cloud-backup-list{display:grid;gap:9px;padding:10px;border:1px solid rgba(104,196,245,.34);border-radius:14px;background:rgba(10,39,60,.54);}
.sc-cloud-backup-item{display:grid;gap:7px;padding:10px;border:1px solid rgba(164,220,248,.18);border-radius:11px;background:rgba(4,24,39,.5);}
.sc-cloud-backup-meta{color:#bedbec;font-size:12px;line-height:1.45;}
.sc-cloud-backup-actions{display:flex;gap:8px;flex-wrap:wrap;}
.sc-cloud-backup-actions button{flex:1 1 120px;min-height:36px;border:1px solid rgba(81,195,248,.55);border-radius:9px;background:rgba(24,128,184,.28);color:#eefaff;font-weight:700;}
.sc-cloud-backup-actions button.sc-cloud-delete{border-color:rgba(248,130,130,.45);background:rgba(146,41,41,.2);}
.sc-cloud-backup-actions button:disabled{opacity:.56;}

/* Compact Settings: Data Management */
.settings-data-intro{margin:0 0 12px!important;}
.settings-data-hub{display:grid;gap:10px;padding:0;border:0;border-radius:0;background:transparent;}
.settings-data-hub[hidden]{display:none!important;}
.settings-data-transfer-box{padding:7px 13px 13px;border-bottom:1px solid rgba(100,194,240,.2);}
.settings-data-action-list{display:grid;gap:8px;margin-top:5px;}
.settings-data-hub .settings-data-entry{border:1px solid rgba(67,172,223,.45);border-radius:16px;background:linear-gradient(135deg,rgba(22,109,154,.18),rgba(5,31,49,.24));box-shadow:inset 0 1px 0 var(--glass-hi-soft);}
.settings-data-storage-box{padding:13px;border:1px solid rgba(67,172,223,.28);border-radius:13px;background:rgba(8,28,43,.18);}
.settings-data-storage-box .settings-data-panel-heading{padding:0 0 4px;}
.settings-data-entry{display:flex;align-items:center;gap:12px;width:100%;min-height:76px;padding:13px 14px;border:1px solid rgba(67,172,223,.45);border-radius:16px;background:linear-gradient(135deg,rgba(22,109,154,.18),rgba(5,31,49,.24));color:var(--offwhite);text-align:left;box-shadow:inset 0 1px 0 var(--glass-hi-soft);}
.settings-data-entry:active{transform:scale(.98);}
.settings-data-entry-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:rgba(42,171,238,.16);color:var(--brass-light);font-size:21px;font-weight:800;}
.settings-data-entry-copy{display:grid;gap:4px;min-width:0;flex:1;}
.settings-data-entry-copy strong{color:var(--offwhite);font-size:15px;}
.settings-data-entry-copy small{color:var(--offwhite-dim);font-size:11.5px;line-height:1.35;}
.settings-data-entry-arrow{color:var(--brass-light);font-size:30px;font-weight:400;line-height:1;}
.settings-data-panel{display:grid;gap:11px;animation:settingsDataPanelIn .18s cubic-bezier(.23,1,.32,1) both;}
.settings-data-panel[hidden]{display:none!important;}
.settings-data-back{display:flex;align-items:center;gap:5px;width:max-content;padding:2px 0;border:0;background:transparent;color:var(--brass-light);font-weight:700;font-size:13px;}
.settings-data-panel-heading{display:flex;align-items:flex-start;gap:10px;padding:3px 0 4px;}
.settings-data-panel-heading .settings-data-entry-icon{margin-top:2px;}
.settings-data-panel-heading h3{margin:0;color:var(--offwhite);font-size:17px;}
.settings-data-panel-heading p{margin:4px 0 0;color:var(--offwhite-dim);font-size:12px;line-height:1.45;}
.settings-data-status{margin:7px 0 0!important;padding:10px 0;border-radius:0;background:transparent;border-top:1px solid rgba(100,194,240,.2);border-bottom:1px solid rgba(100,194,240,.2);}
.settings-data-danger{display:grid;gap:7px;margin-top:2px;padding:12px;border-radius:13px;background:rgba(135,47,47,.12);border:1px solid rgba(233,129,129,.22);}
.settings-data-danger strong{font-size:13px;color:var(--offwhite);}
.settings-data-danger span{font-size:11.5px;line-height:1.4;color:var(--offwhite-dim);}
.settings-data-danger .btn-cancel{margin-top:2px;}
@keyframes settingsDataPanelIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.settings-data-panel{animation:none;}}

/* ---------- Side menu footer and full-screen menu destinations ---------- */
.side-menu-list{flex:1;overflow-y:auto;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;}
.side-menu-footer{margin-top:auto;padding:10px;border-top:1px solid var(--navy-line);background:rgba(4,15,26,.12);}
.side-menu-footer-actions{display:grid;gap:4px;}
.side-menu-footer .side-menu-item{width:100%;}
.side-menu-signout{color:#ffb39f;}
.side-menu-signout:hover{background:rgba(218,101,75,.12);color:#ffc4b4;}
.side-menu-version-slot:not([hidden]){padding:6px 10px 10px;color:var(--offwhite-dim);font-size:11px;text-align:center;}
.settings-detail-view{z-index:10030;}
.settings-detail-body{width:min(100%,680px);margin:0 auto;padding:18px 18px calc(116px + env(safe-area-inset-bottom,0px));}
.settings-version{margin:22px 0 0;padding:12px 0 4px;border-top:1px solid var(--navy-line);color:var(--offwhite-dim);font:600 11px/1.3 'Inter',sans-serif;text-align:center;letter-spacing:.04em;}
.settings-detail-body .form-group-title:first-child{margin-top:0;}
#sc-admin-panel{position:fixed;inset:0;z-index:10030;display:block;overflow-y:auto;background:var(--navy-deep);padding:0;}
#sc-admin-panel[hidden]{display:none!important;}
#sc-admin-panel .sc-admin-card{width:min(100%,720px);min-height:100%;margin:0 auto;padding:24px 18px calc(116px + env(safe-area-inset-bottom,0px));border:0;border-radius:0;background:transparent;box-shadow:none;}

/* PWA certificate-expiry reminders */
.pwa-reminder-card{display:grid;gap:12px;margin:0 0 18px;padding:15px;border:1px solid rgba(67,172,223,.45);border-radius:16px;background:linear-gradient(135deg,rgba(22,109,154,.18),rgba(5,31,49,.24));box-shadow:inset 0 1px 0 var(--glass-hi-soft);}
.pwa-reminder-heading{display:flex;align-items:flex-start;gap:11px;}
.pwa-reminder-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:rgba(42,171,238,.16);color:var(--brass-light);font-size:28px;font-weight:800;line-height:1;}
.pwa-reminder-heading strong{display:block;color:var(--offwhite);font-size:15px;line-height:1.25;}
.pwa-reminder-heading p{margin:4px 0 0;color:var(--offwhite-dim);font-size:12px;line-height:1.45;}
.pwa-reminder-action{width:100%;min-height:42px;}
.pwa-reminder-action.is-enabled{background:rgba(173,214,62,.16);border-color:rgba(173,214,62,.62);color:#add63e;}
.pwa-reminder-status{margin:0;color:var(--offwhite-dim);font-size:11.5px;line-height:1.4;}
:root[data-theme="light"] .pwa-reminder-card{background:linear-gradient(135deg,rgba(228,246,255,.96),rgba(244,250,253,.96));border-color:rgba(27,118,166,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.9);}
:root[data-theme="light"] .pwa-reminder-heading strong{color:var(--navy-deep);}
:root[data-theme="light"] .pwa-reminder-heading p,:root[data-theme="light"] .pwa-reminder-status{color:rgba(8,48,71,.72);}
:root[data-theme="light"] .pwa-reminder-icon{background:rgba(26,143,202,.12);color:var(--brass-light);}
#sc-admin-panel .sc-auth-brand{padding-bottom:16px;border-bottom:1px solid var(--navy-line);}
#sc-admin-panel h2{margin-top:22px;}

/* ---------- Compact Import CV-style profile-photo action pocket ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.profile-photo-actions-overlay{
  align-items:center;
  padding:14px;
  z-index:425;
  box-sizing:border-box;
}
.profile-photo-actions-box{
  width:min(100%,310px);
  max-width:310px;
  max-height:none;
  overflow:hidden;
  border:1px solid var(--navy-line);
  border-bottom:1px solid var(--navy-line);
  border-radius:20px;
  box-shadow:0 12px 30px rgba(0,0,0,.22), inset 0 1px 0 var(--glass-hi);
}
.profile-photo-action-list{padding:5px 0;}
.profile-photo-actions-box .profile-photo-action-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  min-height:46px;
  gap:13px;
  padding:0 18px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--offwhite);
  font:500 15px/1.2 'Inter',sans-serif;
  text-align:left;
  transition:background .16s cubic-bezier(.23,1,.32,1),transform .16s cubic-bezier(.23,1,.32,1),color .16s cubic-bezier(.23,1,.32,1);
}
.profile-photo-actions-box .profile-photo-action-row:hover{background:rgba(140,221,248,.09);}
.profile-photo-actions-box .profile-photo-action-row:active{transform:scale(.985);}
.profile-photo-actions-box .profile-photo-action-row:focus-visible{outline:2px solid var(--brass-light);outline-offset:-4px;}
.profile-photo-actions-box .profile-photo-action-row[hidden]{display:none!important;}
.profile-photo-actions-box .photo-sheet-item-icon{
  width:22px;
  height:22px;
  flex:0 0 22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.profile-photo-actions-box .photo-sheet-item-remove{
  margin-top:0;
  padding-top:0;
  border-top:0;
  color:#d86d65;
}
.profile-photo-actions-box .photo-sheet-item-remove:hover{background:rgba(238,109,99,.10);}
.profile-photo-actions-box .profile-photo-action-row:disabled,
.profile-photo-actions-box .photo-sheet-item-remove:disabled{
  opacity:.42;
  cursor:not-allowed;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .profile-photo-actions-box .profile-photo-action-row{transition:none;}
}
@media (max-width:360px){
  .profile-photo-actions-overlay{padding:12px;}
  .profile-photo-actions-box{border-radius:18px;}
  .profile-photo-actions-box .profile-photo-action-row{min-height:44px;gap:12px;padding:0 16px;font-size:14px;}
  .profile-photo-actions-box .photo-sheet-item-icon{width:21px;height:21px;flex-basis:21px;}
}

/* ---------- Protect app labels and images from selection ---------- */
body{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
img,
svg,
button,
label,
.side-menu-title,
.side-menu-item,
.detail-header-title,
.profile-name,
.profile-rank{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-user-drag:none;
}
input,
textarea,
[contenteditable="true"],
[contenteditable=""],
select{
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}

/* ---------- Guided Cargo Trimming workflow ---------- */
.ctm-activity-panel{margin-top:22px;}
.ctm-activity-panel .form-group-title{margin-bottom:10px;}
.ctm-flow-back{margin:0 0 14px;padding:0;background:transparent;border:0;color:var(--brass-light);font:600 14px/1.2 'Inter',sans-serif;}
.ctm-choice-grid{display:grid;grid-template-columns:1fr;gap:10px;}
.ctm-choice-card{display:flex;align-items:flex-start;gap:13px;width:100%;min-height:82px;padding:14px;border:1px solid var(--navy-line);border-radius:14px;background:rgba(255,255,255,.035);color:var(--offwhite);text-align:left;transition:border-color .16s ease,background .16s ease,transform .16s ease;}
.ctm-choice-card:hover{border-color:var(--brass);background:rgba(140,221,248,.07);}
.ctm-choice-card:active{transform:scale(.99);}
.ctm-choice-card.selected{border-color:var(--brass-light);background:rgba(140,221,248,.12);box-shadow:inset 3px 0 0 var(--brass-light);}
.ctm-choice-card:focus-visible{outline:2px solid var(--brass-light);outline-offset:2px;}
.ctm-choice-card svg{width:25px;height:25px;flex:0 0 25px;margin-top:2px;color:var(--brass-light);}
.ctm-choice-card span{display:grid;gap:4px;min-width:0;}
.ctm-choice-card strong{font:600 15px/1.2 'Inter',sans-serif;}
.ctm-choice-card small{font:400 12px/1.35 'Inter',sans-serif;color:var(--offwhite-dim);}
.ctm-source-choice{margin-bottom:14px;}
#ctm-added-ship-fields,#ctm-custom-ship-fields{margin:4px 0 12px;}
#ctm-added-ship-summary,#ctm-workspace-ship-meta{margin:4px 0 14px;}
.ctm-setup-notice{min-height:36px;margin:8px 0 14px;padding:10px 12px;border-left:3px solid var(--brass);border-radius:6px;background:var(--well-bg);}
#ctm-open-workspace-btn[disabled]{opacity:.48;cursor:not-allowed;}
#ctm-workspace-title{margin-bottom:8px;}
@media (min-width:620px){.ctm-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.ctm-choice-card{min-height:104px;}}
@media (max-width:420px){.ctm-choice-card{min-height:76px;padding:12px;gap:11px;}.ctm-choice-card strong{font-size:14px;}.ctm-choice-card small{font-size:11px;}.ctm-choice-card svg{width:23px;height:23px;flex-basis:23px;}}

/* Trimming Step 1 — keep the unselected ship-source fields fully hidden. */
#ctm-added-ship-fields[hidden],
#ctm-custom-ship-fields[hidden]{display:none!important;}

/* Trimming Start Calculation — Sounding-style two-step wizard. */
#ctm-setup-panel{z-index:404;}
#ctm-setup-panel .modal-box{width:min(540px,calc(100vw - 28px));max-height:90dvh;}
#ctm-setup-panel .modal-body{padding-bottom:14px;}
.ctm-draft-results{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:-4px;padding:9px 10px;border:1px solid var(--navy-line);border-radius:12px;background:var(--well-bg);color:var(--offwhite-dim);font:700 10px/1.25 'Inter',sans-serif;letter-spacing:.035em;text-transform:uppercase;}
.ctm-draft-results strong{font-size:12px;letter-spacing:.025em;text-align:right;text-transform:uppercase;}
.ctm-draft-results strong.trim-head{color:#e34c52;}
.ctm-draft-results strong.trim-stern{color:#35c98b;}
.ctm-draft-results strong.trim-even,.ctm-draft-results strong.trim-empty{color:var(--offwhite-dim);}
#ctm-active-ship-fields[hidden],#ctm-custom-ship-fields[hidden]{display:none!important;}

/* Three-step Trimming setup — Mean Draft hydrostatics, hold selection and review */
#ctm-setup-panel .modal-box{max-height:92vh;}
.ctm-hydro-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 4px;}
.ctm-hydro-grid>div,.ctm-hydro-grid>label{background:var(--navy-line);border:1px solid var(--brass);border-radius:8px;padding:10px;min-width:0;}
.ctm-hydro-grid span{display:block;color:var(--offwhite-dim);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
.ctm-hydro-grid strong{display:block;margin-top:4px;color:var(--brass-light);font-size:13px;line-height:1.25;overflow-wrap:anywhere;}
.ctm-hydro-input-grid label{display:block;}
.ctm-hydro-input-grid input{width:100%;box-sizing:border-box;margin-top:6px;background:var(--navy-deep);border:1px solid var(--navy-line);border-radius:6px;color:var(--offwhite);padding:8px;font:inherit;}
.ctm-step-hold-list{display:grid;gap:8px;}
.ctm-step-hold{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--navy-line);border:1px solid var(--brass);border-radius:8px;cursor:pointer;}
.ctm-step-hold input[type="checkbox"]{width:18px;height:18px;accent-color:var(--brass-light);flex:none;}
.ctm-step-hold>span:not(.ctm-hold-tick){min-width:0;display:grid;gap:3px;}
.ctm-step-hold strong{font-size:14px;color:var(--offwhite);}
.ctm-step-hold small{color:var(--offwhite-dim);font-size:12px;}
.ctm-custom-hold{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto;align-items:end;cursor:default;}
.ctm-custom-hold .field{margin:0;min-width:0;}
.ctm-custom-hold .field label{font-size:10px;}
.ctm-custom-hold .field input{width:100%;box-sizing:border-box;}
.ctm-hold-tick{padding-bottom:9px;}
.ctm-review-error{margin:0 0 14px;padding:10px 12px;border-left:3px solid #C1502E;background:#C1502E22;border-radius:6px;color:#ff9b88;font-size:13px;}
#ctm-wizard-step-three .form-group-title{margin-top:18px;}
@media (max-width:430px){
  .ctm-hydro-grid{grid-template-columns:1fr 1fr;gap:6px;}
  .ctm-hydro-grid>div,.ctm-hydro-grid>label{padding:8px;}
  .ctm-custom-hold{grid-template-columns:auto 1fr auto;}
  .ctm-custom-hold .field:nth-of-type(2){grid-column:2;}
  .ctm-custom-hold .field:nth-of-type(3){grid-column:2;}
  .ctm-custom-hold .modal-close{grid-column:3;grid-row:1 / span 2;align-self:center;}
}

/* Active Ship Trimming Step 2 — compact reference and cargo-hold tables */
.ctm-hydro-table-wrap,.ctm-hold-table-wrap{overflow-x:auto;border:1px solid var(--navy-line);border-radius:8px;background:var(--well-bg);}
.ctm-hydro-table,.ctm-hold-table{width:100%;min-width:440px;border-collapse:collapse;font-size:11px;}
.ctm-hydro-table th,.ctm-hold-table th{padding:8px 7px;text-align:left;font-size:9px;letter-spacing:.04em;white-space:nowrap;}
.ctm-hydro-table td,.ctm-hold-table td{padding:8px 7px;white-space:nowrap;}
.ctm-hydro-table .ctm-hydro-reference{opacity:.72;}
.ctm-hydro-table .ctm-hydro-mean{background:rgba(42,171,238,.15);font-weight:700;color:var(--brass-light);}
.ctm-hold-table{min-width:0;table-layout:fixed;}
.ctm-hold-table th:nth-child(1),.ctm-hold-table td:nth-child(1){width:23%;}
.ctm-hold-table th:nth-child(2),.ctm-hold-table td:nth-child(2){width:53%;}
.ctm-hold-table th:nth-child(3),.ctm-hold-table td:nth-child(3){width:24%;text-align:right;}
.ctm-hold-type{display:inline-flex;padding:3px 6px;border-radius:99px;background:rgba(42,171,238,.14);color:var(--brass-light);font-size:9px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;}
.ctm-hold-select-cell{display:flex;align-items:center;gap:7px;min-width:0;cursor:pointer;}
.ctm-hold-select-cell input{width:15px;height:15px;flex:0 0 auto;accent-color:var(--brass-light);}
.ctm-hold-select-cell span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:430px){.ctm-hydro-table,.ctm-hold-table{font-size:10px;}.ctm-hydro-table th,.ctm-hold-table th,.ctm-hydro-table td,.ctm-hold-table td{padding:7px 5px;}.ctm-hydro-table{min-width:410px;}}

/* Trimming compact method selection, fit-to-screen tables and editable review */
.ctm-method-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:8px;}
.ctm-method-row .ctm-choice-card{min-height:0;padding:10px;gap:8px;align-items:center;}
.ctm-method-row .ctm-choice-card svg{width:20px;height:20px;flex-basis:20px;margin:0;}
.ctm-method-row .ctm-choice-card span{gap:2px;}
.ctm-method-row .ctm-choice-card strong{font-size:12px;line-height:1.2;}
.ctm-method-row .ctm-choice-card small{font-size:10px;line-height:1.25;}
.ctm-sign-key{display:flex;align-items:center;gap:7px;margin:8px 0 0;padding:7px 9px;border-radius:7px;background:var(--well-bg);color:var(--offwhite-dim);font:500 10px/1.25 'Inter',sans-serif;}
.ctm-sign-key strong{color:var(--brass-light);font-size:11px;letter-spacing:.04em;}
.ctm-sign-key b{color:var(--offwhite);}
.ctm-hydro-table-wrap,.ctm-hold-table-wrap{overflow:hidden;}
.ctm-hydro-table{min-width:0!important;table-layout:fixed;font-size:9px;}
.ctm-hydro-table th,.ctm-hydro-table td{padding:7px 3px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ctm-hydro-table th{font-size:8px!important;letter-spacing:.015em;}
.ctm-hydro-table th:nth-child(1),.ctm-hydro-table td:nth-child(1){width:13%;}
.ctm-hydro-table th:nth-child(2),.ctm-hydro-table td:nth-child(2){width:15%;}
.ctm-hydro-table th:nth-child(3),.ctm-hydro-table td:nth-child(3){width:20%;}
.ctm-hydro-table th:nth-child(4),.ctm-hydro-table td:nth-child(4){width:16%;}
.ctm-hydro-table th:nth-child(5),.ctm-hydro-table td:nth-child(5){width:16%;}
.ctm-hydro-table th:nth-child(6),.ctm-hydro-table td:nth-child(6){width:20%;}
.ctm-hold-table{font-size:10px;}
.ctm-hold-table th,.ctm-hold-table td{padding:7px 5px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ctm-hold-table th:nth-child(1),.ctm-hold-table td:nth-child(1){width:27%;}
.ctm-hold-table th:nth-child(2),.ctm-hold-table td:nth-child(2){width:45%;}
.ctm-hold-table th:nth-child(3),.ctm-hold-table td:nth-child(3){width:28%;}
.ctm-hold-select-cell{gap:5px;}
.ctm-hold-select-label{font-size:9px!important;color:var(--offwhite-dim);text-transform:uppercase;letter-spacing:.02em;}
.ctm-review-section{margin-top:16px;}
.ctm-review-section:first-of-type{margin-top:0;}
.ctm-review-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;}
.ctm-review-section-head .form-group-title{margin:0!important;}
.ctm-review-edit{display:inline-flex;align-items:center;gap:4px;padding:5px 7px;border:1px solid var(--brass);border-radius:6px;background:transparent;color:var(--brass-light);font:600 10px/1 'Inter',sans-serif;}
.ctm-review-edit svg{width:12px;height:12px;}
.ctm-review-rows{border:1px solid var(--navy-line);border-radius:8px;overflow:hidden;background:var(--well-bg);}
.ctm-review-row{display:grid;grid-template-columns:minmax(92px,38%) minmax(0,1fr);gap:8px;padding:8px 9px;border-bottom:1px solid var(--navy-line);font:500 11px/1.35 'Inter',sans-serif;}
.ctm-review-row:last-child{border-bottom:0;}
.ctm-review-label{color:var(--offwhite-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ctm-review-value{min-width:0;color:var(--offwhite);text-align:right;overflow-wrap:anywhere;word-break:break-word;}
#ctm-wizard-step-three .ctm-review-rows{margin:0;}
@media (max-width:360px){.ctm-method-row .ctm-choice-card{padding:8px 7px;gap:6px;}.ctm-method-row .ctm-choice-card svg{display:none;}.ctm-method-row .ctm-choice-card strong{font-size:11px;}.ctm-method-row .ctm-choice-card small{font-size:9px;}.ctm-hydro-table{font-size:8px;}.ctm-hydro-table th,.ctm-hydro-table td{padding:6px 2px!important;}.ctm-review-row{grid-template-columns:minmax(82px,37%) minmax(0,1fr);padding:7px 8px;font-size:10px;}}

/* Trimming Step 2 — compact, centered and horizontally scrollable tables */
.ctm-hydro-table-wrap,.ctm-hold-table-wrap{
  display:block;
  overflow-x:auto!important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  overscroll-behavior-x:contain;
}
.ctm-hydro-table{min-width:365px!important;table-layout:fixed;font-size:8.5px!important;}
.ctm-hydro-table th,.ctm-hydro-table td{padding:5px 3px!important;text-align:center!important;white-space:nowrap;}
.ctm-hydro-table th{font-size:7.5px!important;letter-spacing:.01em;}
.ctm-hydro-table th:nth-child(1),.ctm-hydro-table td:nth-child(1){width:17%;}
.ctm-hydro-table th:nth-child(2),.ctm-hydro-table td:nth-child(2){width:24%;}
.ctm-hydro-table th:nth-child(3),.ctm-hydro-table td:nth-child(3){width:18%;}
.ctm-hydro-table th:nth-child(4),.ctm-hydro-table td:nth-child(4){width:20%;}
.ctm-hydro-table th:nth-child(5),.ctm-hydro-table td:nth-child(5){width:21%;}
.ctm-hold-table{min-width:310px!important;table-layout:fixed;font-size:9px!important;}
.ctm-hold-table th,.ctm-hold-table td{padding:5px 4px!important;white-space:nowrap;}
.ctm-hold-table th{text-align:center!important;font-size:8px!important;letter-spacing:.01em;}
.ctm-hold-table th:nth-child(1),.ctm-hold-table td:nth-child(1){width:16%;text-align:center!important;}
.ctm-hold-table th:nth-child(2),.ctm-hold-table td:nth-child(2){width:55%;}
.ctm-hold-table th:nth-child(3),.ctm-hold-table td:nth-child(3){width:29%;text-align:center!important;}
.ctm-hold-select-cell{justify-content:center;gap:0;}
.ctm-hold-select-cell input{width:14px;height:14px;}
@media (max-width:360px){
  .ctm-hydro-table{min-width:340px!important;font-size:8px!important;}
  .ctm-hydro-table th,.ctm-hydro-table td,.ctm-hold-table th,.ctm-hold-table td{padding:4px 2px!important;}
  .ctm-hydro-table th{font-size:7px!important;}
}

/* Custom Ship Trim by Hold — editable Low/High hydrostatic and cargo-hold rows */
.ctm-custom-hydro-table{min-width:475px!important;}
.ctm-custom-hydro-table th:nth-child(1),.ctm-custom-hydro-table td:nth-child(1){width:13%;}
.ctm-custom-hydro-table th:nth-child(2),.ctm-custom-hydro-table td:nth-child(2){width:17%;}
.ctm-custom-hydro-table th:nth-child(3),.ctm-custom-hydro-table td:nth-child(3){width:23%;}
.ctm-custom-hydro-table th:nth-child(4),.ctm-custom-hydro-table td:nth-child(4){width:17%;}
.ctm-custom-hydro-table th:nth-child(5),.ctm-custom-hydro-table td:nth-child(5){width:14%;}
.ctm-custom-hydro-table th:nth-child(6),.ctm-custom-hydro-table td:nth-child(6){width:16%;}
.ctm-custom-hydro-table tbody th{color:var(--brass-light);font-size:9px;text-align:center;}
.ctm-custom-hydro-table input,.ctm-custom-hold-table input{width:100%;min-width:0;height:30px;padding:5px 6px;border:1px solid var(--navy-line);border-radius:7px;background:var(--popup-field-surface);color:var(--offwhite);font:500 10px/1 'Inter',sans-serif;text-align:right;}
.ctm-custom-hydro-table input:focus,.ctm-custom-hold-table input:focus{outline:0;border-color:var(--brass);box-shadow:0 0 0 2px rgba(42,171,238,.16);}
.ctm-custom-lbp-field{max-width:170px;margin:9px 0 0;}
.ctm-custom-lbp-field label{font-size:9px;}
.ctm-custom-lbp-field input{height:32px;font-size:11px;}
.ctm-custom-hold-table{min-width:330px!important;}
.ctm-custom-hold-table th:nth-child(1),.ctm-custom-hold-table td:nth-child(1){width:62%;text-align:left!important;}
.ctm-custom-hold-table th:nth-child(2),.ctm-custom-hold-table td:nth-child(2){width:38%;text-align:center!important;}
.ctm-custom-hold-table th:first-child{text-align:center!important;}
.ctm-custom-hold-table input{text-align:left;}
.ctm-custom-hold-table td:nth-child(2) input{text-align:right;}
.ctm-empty-table{color:var(--offwhite-dim);font-size:10px;text-align:center!important;}
@media (max-width:360px){
  .ctm-custom-hydro-table{min-width:445px!important;}
  .ctm-custom-hydro-table input,.ctm-custom-hold-table input{height:28px;padding:4px;font-size:9px;}
}

/* Custom Ship Cargo Hold row actions */
.ctm-custom-hold-table{min-width:365px!important;}
.ctm-custom-hold-table th:nth-child(1),.ctm-custom-hold-table td:nth-child(1){width:50%;}
.ctm-custom-hold-table th:nth-child(2),.ctm-custom-hold-table td:nth-child(2){width:31%;}
.ctm-custom-hold-table th:nth-child(3),.ctm-custom-hold-table td:nth-child(3){width:19%;text-align:right!important;}
.ctm-custom-hold-actions{white-space:nowrap!important;}
.ctm-hold-row-action{width:27px;height:27px;margin-left:3px;padding:0;border:1px solid var(--navy-line);border-radius:6px;background:var(--popup-field-surface);color:var(--brass-light);display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;}
.ctm-hold-row-action svg{width:13px;height:13px;}
.ctm-hold-row-action.delete{color:var(--danger);}
.ctm-hold-row-action:disabled{opacity:.38;cursor:not-allowed;}
@media (max-width:360px){.ctm-custom-hold-table{min-width:350px!important;}.ctm-hold-row-action{width:24px;height:24px;margin-left:2px;}}

/* Guided 100 Ton loading plan */
.ctm-table-total-field { margin: 10px 0 8px; }
.ctm-table-total-field label { display:block; margin-bottom:5px; font-size:12px; font-weight:700; color:var(--offwhite-dim); }
.ctm-table-cargo-summary { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 9px; padding:8px 10px; border:1px solid var(--navy-line); border-radius:10px; background:var(--well-bg); font-size:12px; color:var(--offwhite-dim); }
.ctm-table-cargo-summary strong { color:var(--offwhite); white-space:nowrap; }
.ctm-table-load-table th:nth-child(1) { width:48%; }
.ctm-table-load-table th:nth-child(2) { width:37%; }
.ctm-table-load-table th:nth-child(3) { width:15%; }
.ctm-table-load-table select,
.ctm-table-load-table input { width:100%; min-width:0; font-size:12px; padding:8px 7px; }
.ctm-table-load-actions { white-space:nowrap; text-align:right; }
.ctm-table-load-actions .ctm-hold-row-action { width:27px; height:27px; margin-left:2px; padding:3px; font-size:14px; }
.ctm-load-result-row { padding:8px 0; border-bottom:1px dashed var(--navy-line); }
.ctm-load-result-row:last-child { border-bottom:0; }
.ctm-load-result-after { padding-top:4px; font-size:11px; color:var(--offwhite-dim); line-height:1.35; }
@media (max-width:390px) {
  .ctm-table-load-table th,
  .ctm-table-load-table td { padding:6px 4px; }
  .ctm-table-load-table select,
  .ctm-table-load-table input { font-size:11px; padding:7px 5px; }
  .ctm-table-load-actions .ctm-hold-row-action { width:24px; height:25px; margin-left:1px; }
}

/* Custom Ship Trim by Hold — cargo amount rows with Low/High ΔA and ΔF references */
.ctm-custom-load-table{min-width:650px!important;table-layout:fixed;}
.ctm-custom-load-table th,.ctm-custom-load-table td{padding:6px 4px!important;text-align:center!important;vertical-align:middle;}
.ctm-custom-load-table th:nth-child(1),.ctm-custom-load-table td:nth-child(1){width:23%;text-align:left!important;}
.ctm-custom-load-table th:nth-child(2),.ctm-custom-load-table td:nth-child(2){width:13%;}
.ctm-custom-load-table th:nth-child(3),.ctm-custom-load-table td:nth-child(3){width:17%;}
.ctm-custom-load-table th:nth-child(4),.ctm-custom-load-table td:nth-child(4){width:10%;}
.ctm-custom-load-table th:nth-child(5),.ctm-custom-load-table td:nth-child(5),.ctm-custom-load-table th:nth-child(6),.ctm-custom-load-table td:nth-child(6){width:13%;}
.ctm-custom-load-table th:nth-child(7),.ctm-custom-load-table td:nth-child(7){width:11%;}
.ctm-custom-load-table input{width:100%;min-width:0;height:30px;padding:5px 6px;border:1px solid var(--navy-line);border-radius:7px;background:var(--popup-field-surface);color:var(--offwhite);font:500 10px/1 'Inter',sans-serif;}
.ctm-custom-load-table input:focus{outline:0;border-color:var(--brass);box-shadow:0 0 0 2px rgba(42,171,238,.16);}
.ctm-custom-load-table .ctm-custom-load-effect{color:var(--brass-light);font-size:9px;font-family:'JetBrains Mono',monospace;}
.ctm-custom-load-table .ctm-custom-load-da{background:rgba(42,171,238,.055);}
.ctm-custom-load-table .ctm-custom-load-df{background:rgba(255,255,255,.018);}
.ctm-custom-load-table .ctm-custom-load-metric{font:500 9px/1.2 'JetBrains Mono',monospace;color:var(--offwhite-dim);}
.ctm-custom-load-table .ctm-custom-hold-actions{white-space:normal!important;}
@media (max-width:430px){
  .ctm-custom-load-table{min-width:610px!important;}
  .ctm-custom-load-table th,.ctm-custom-load-table td{padding:5px 3px!important;}
  .ctm-custom-load-table input{height:28px;font-size:9px;}
}

/* Custom Ship 100 Ton — manual Low/High Change of Draft input rows */
.ctm-custom-load-table .ctm-custom-load-da,
.ctm-custom-load-table .ctm-custom-load-df{height:42px;}
.ctm-custom-load-table .ctm-custom-load-da>th,
.ctm-custom-load-table .ctm-custom-load-da>td,
.ctm-custom-load-table .ctm-custom-load-df>th,
.ctm-custom-load-table .ctm-custom-load-df>td{height:42px!important;min-height:42px;}
.ctm-custom-load-table .ctm-custom-load-metric input{height:26px;padding:4px 5px;text-align:right;font:500 9px/1 'JetBrains Mono',monospace;}
.ctm-custom-load-table .ctm-custom-load-effect{width:100%;min-height:26px;display:flex;align-items:center;justify-content:center;}
.ctm-custom-load-table .ctm-custom-hold-action-grid{display:grid;grid-template-columns:repeat(2,27px);gap:4px;justify-content:center;align-content:center;}
.ctm-custom-load-table .ctm-custom-hold-actions{padding:5px!important;}
@media (max-width:430px){
  .ctm-custom-load-table .ctm-custom-load-da,
  .ctm-custom-load-table .ctm-custom-load-df{height:40px;}
  .ctm-custom-load-table .ctm-custom-load-da>th,
  .ctm-custom-load-table .ctm-custom-load-da>td,
  .ctm-custom-load-table .ctm-custom-load-df>th,
  .ctm-custom-load-table .ctm-custom-load-df>td{height:40px!important;min-height:40px;}
  .ctm-custom-load-table .ctm-custom-load-metric input{height:25px;font-size:9px;}
  .ctm-custom-load-table .ctm-custom-hold-action-grid{grid-template-columns:repeat(2,24px);gap:3px;}
  .ctm-custom-load-table .ctm-custom-hold-action-grid .ctm-hold-row-action{width:24px;height:24px;margin:0;}
}

/* Step 2 cargo balance is carried from Step 1 and is intentionally read-only. */
.ctm-table-total-readonly{min-height:42px;display:flex;align-items:center;padding:9px 11px;border:1px solid var(--navy-line);border-radius:10px;background:var(--well-bg);color:var(--offwhite);font:600 14px/1 'Inter',sans-serif;letter-spacing:.01em;}
.ctm-table-total-source{display:block;margin-top:5px;color:var(--offwhite-dim);font:500 10px/1.25 'Inter',sans-serif;}

/* Trimming cards share the same first-row result summary in Activity Log and Report. */
.ship-card-info .name.ctm-entry-first-row{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.28;}

/* Report trimming entries: two compact result rows, then one Date / Ship metadata row. */
#activity-list .ship-card-info .name.ctm-entry-first-row{display:flex;flex-direction:column;max-height:2.56em;white-space:normal;overflow:hidden;text-overflow:clip;line-height:1.28;}
#activity-list .ctm-report-entry-method,#activity-list .ctm-report-entry-results{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#activity-list .ctm-report-entry-results{font-size:12px;font-weight:600;}
#activity-list .ship-card-info .meta.ctm-report-entry-meta{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Offline-first on-device workspace */
.settings-data-local-note{
  display:grid;
  gap:5px;
  padding:12px 0 1px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--offwhite-dim);
  font-size:12px;
  line-height:1.5;
}
.settings-data-local-note strong{color:var(--offwhite);font-size:13px;}
.settings-data-local-note span{display:block;}


/* ---------- Profile-trigger header and compact side-menu footer ---------- */
header#app-header{min-height:68px;box-sizing:border-box;}
.menu-btn{overflow:hidden;font-size:0;}
.header-profile-avatar{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-radius:50%;color:var(--offwhite);background:linear-gradient(145deg,var(--well-bg),rgba(31,112,159,.36));
  font:800 12px/1 'Inter',sans-serif;letter-spacing:.02em;
}
.header-profile-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.profile-initials{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  color:var(--offwhite);background:linear-gradient(145deg,#2788c1,#1d4e89);
  font:800 13px/1 'Inter',sans-serif;letter-spacing:.03em;
}
.profile-avatar .profile-initials{font-size:15px;}
.header-search-btn{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--navy-line);border-radius:50%;
  background:var(--well-bg);color:var(--offwhite);padding:0;cursor:pointer;transition:background .15s ease,transform .15s ease;
}
.header-search-btn:hover{background:rgba(255,255,255,.12);}
.header-search-btn:active{transform:translateY(-50%) scale(.94);}
.header-search-btn svg{width:19px;height:19px;}
.header-search-panel{
  position:absolute;inset:10px 12px;z-index:3;display:flex;align-items:center;gap:9px;
  padding:0 8px 0 13px;background:var(--surface-strong);border:1px solid var(--brass);border-radius:999px;
  box-shadow:var(--glass-shadow);
}
.header-search-panel[hidden]{display:none!important;}
.header-search-panel-icon{width:19px;height:19px;flex:0 0 auto;color:var(--offwhite-dim);}
#header-search-input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--offwhite);
  font:500 14px/1.2 'Inter',sans-serif;
}
#header-search-input::placeholder{color:var(--offwhite-dim);}
.header-search-close{
  width:29px;height:29px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  border:0;border-radius:50%;background:rgba(255,255,255,.10);color:var(--offwhite-dim);padding:0;cursor:pointer;
}
.header-search-close:active{transform:scale(.94);}
.header-search-close svg{width:16px;height:16px;}
.side-menu-header{justify-content:flex-end;padding:12px 14px 4px;border-bottom:0;min-height:42px;box-sizing:border-box;}
.side-menu-list{padding-top:8px;}
.side-menu-footer{padding:8px 10px 12px;background:transparent;border-top:0;}
.side-menu-footer-divider{height:1px;margin:0 8px 6px;background:var(--navy-line);}
.side-menu-settings-item{width:100%;}
.side-menu-line-icon{width:22px;height:22px;flex:0 0 22px;box-sizing:border-box;}
.side-menu-footer-actions{margin-top:2px;}
.side-menu-brand-bottom{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:12px 8px 2px;
  color:var(--offwhite-dim);opacity:.78;
}
.side-menu-brand-bottom .side-menu-brand-logo{width:25px;height:25px;border-radius:8px;filter:none;opacity:1;}
.side-menu-brand-bottom .side-menu-title{font:700 11px/1 'Inter',sans-serif;letter-spacing:.16em;color:inherit;}
.side-menu-version-slot:not([hidden]){padding:5px 10px 0;}
@media (prefers-reduced-motion:no-preference){
  .header-search-panel{animation:header-search-enter .18s cubic-bezier(.23,1,.32,1) both;}
  @keyframes header-search-enter{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
}
@media (max-width:420px){
  header#app-header{min-height:64px;}
  .side-menu{width:min(84%,318px);}
}

/* The global header search replaces the always-visible search row on primary tabs. */
.tab-panel > .tab-toolbar > .sr-search-wrap{display:none;}
.tab-panel > .tab-toolbar{justify-content:flex-end;gap:8px;margin-top:6px;}


/* ---------- Refined mobile header + integrated Notifications navigation ---------- */
header#app-header{
  min-height:72px;
  padding:10px 16px;
  border-bottom:1px solid var(--navy-line);
  background:color-mix(in srgb,var(--header-solid) 92%,transparent);
  box-shadow:0 8px 24px rgba(2,13,25,.08);
}
header#app-header .menu-btn{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:42px;height:42px;padding:0;border-radius:50%;
  background:var(--well-bg);border:1px solid var(--navy-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 5px 14px rgba(3,13,25,.11);
}
header#app-header .menu-btn:active{transform:translateY(-50%) scale(.94);}
header#app-header #page-title{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  max-width:calc(100% - 164px);margin:0;padding:9px 20px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border:1px solid var(--navy-line);border-radius:999px;background:var(--surface-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 5px 14px rgba(3,13,25,.08);
  font-size:16px;line-height:1.1;text-align:center;
}
header#app-header .header-search-btn{
  right:16px;width:42px;height:42px;
  border-color:var(--navy-line);background:var(--well-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 5px 14px rgba(3,13,25,.11);
}
header#app-header .header-search-panel{inset:12px 16px;min-height:44px;}

.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav{
  width:min(348px,calc(100vw - 24px));height:68px;padding:5px 6px;border-radius:34px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button{min-height:58px;height:58px;border-radius:29px;}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > .dock-notification-btn{
  position:relative!important;z-index:auto;inset:auto!important;
  width:100%!important;height:58px!important;min-height:58px!important;padding:0!important;
  display:flex!important;flex:1 1 auto;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border:0!important;border-radius:29px!important;background:transparent!important;color:inherit!important;
  box-shadow:none!important;text-align:center;transform:none!important;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > .dock-notification-btn:active{transform:scale(.97)!important;}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > .dock-notification-btn .tab-icon{
  width:34px;height:34px;flex:0 0 34px;box-sizing:border-box;padding:7px;overflow:hidden;
  border:1px solid rgba(34,45,61,.10);border-radius:50%;position:relative;top:2px;
  background:rgba(102,113,131,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.78);
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > .dock-notification-btn .tab-icon svg{
  width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > .dock-notification-btn .tab-label{
  margin:0;font-size:7px;line-height:8px;text-align:center;position:relative;top:2px;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > .dock-notification-btn .dock-notification-badge{
  top:5px;right:calc(50% - 23px);z-index:2;border-color:var(--page-bg);
}
:root[data-theme="dark"] .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > .dock-notification-btn .tab-icon{
  background:rgba(255,255,255,.07);border-color:rgba(140,221,248,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
#ai-fab-btn{bottom:calc(84px + env(safe-area-inset-bottom, 0px));}
@media(max-width:360px){
  header#app-header{min-height:68px;padding-inline:10px;}
  header#app-header .menu-btn,header#app-header .header-search-btn{width:38px;height:38px;}
  header#app-header .menu-btn{left:10px;}header#app-header .header-search-btn{right:10px;}
  header#app-header #page-title{max-width:calc(100% - 138px);font-size:14px;padding:8px 13px;}
  .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav{width:calc(100vw - 16px);}
  .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > .dock-notification-btn .tab-label{font-size:6.5px;}
  #ai-fab-btn{bottom:calc(84px + env(safe-area-inset-bottom, 0px));}
}


/* ---------- Report readability + clean mobile header correction ---------- */
/* Report cards have no right-side action, so list cards use the complete content width. */
#activity-list:not(.grid-mode) .ship-card-header{
  align-items:flex-start;
  padding-right:12px;
}
#activity-list:not(.grid-mode) .ship-card-info .name,
#activity-list:not(.grid-mode) .ship-card-info .meta{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
#activity-list:not(.grid-mode) .ship-card-info .name.ctm-entry-first-row{
  display:block;
  max-height:none;
  line-height:1.3;
}
#activity-list:not(.grid-mode) .ctm-report-entry-method,
#activity-list:not(.grid-mode) .ctm-report-entry-results,
#activity-list:not(.grid-mode) .ship-card-info .meta.ctm-report-entry-meta{
  display:block;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
#activity-list:not(.grid-mode) .ctm-report-entry-results{margin-top:2px;}

/* Report controls form one complete labelled row above the entry cards. */
#tab-results .results-toolbar{
  display:block;
  min-height:0;
  margin:8px 0 14px;
}
#tab-results .results-toolbar-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  gap:8px;
}
#tab-results .results-control-wrap{min-width:0;width:100%;}
#tab-results .results-control-btn{
  width:100%;
  min-height:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 8px;
  border-radius:12px;
  font:700 11px/1 'Inter',sans-serif;
  letter-spacing:.01em;
}
#tab-results .results-control-btn .collection-line-icon{width:17px;height:17px;flex:0 0 auto;}
#tab-results .results-control-btn span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#tab-results .results-control-wrap .calc-sort-menu{
  left:0;
  right:auto;
  min-width:132px;
}
#tab-results .results-control-wrap:last-child .calc-sort-menu{right:0;left:auto;}

/* Let the page background flow behind the header; only the intended controls retain their surfaces. */
header#app-header{
  min-height:64px;
  padding:10px 16px;
  background:transparent!important;
  border-bottom:0!important;
  box-shadow:none!important;
}
header#app-header .menu-btn{z-index:5;}
header#app-header #page-title{z-index:1;}
header#app-header .header-search-btn{z-index:5;}
/* The expanded field begins after the profile avatar, so neither control overlaps. */
header#app-header .header-search-panel{
  left:70px;
  right:16px;
  top:10px;
  bottom:10px;
  z-index:6;
  min-height:44px;
  padding-left:13px;
  padding-right:8px;
}
@media(max-width:360px){
  header#app-header{padding-inline:10px;}
  header#app-header .header-search-panel{left:58px;right:10px;}
  #tab-results .results-toolbar-actions{gap:6px;}
  #tab-results .results-control-btn{gap:4px;padding-inline:5px;font-size:10px;}
}

/* While searching, retain the profile avatar and show only the field's built-in close control. */
header#app-header.is-search-open #page-title,
header#app-header.is-search-open .header-search-btn{display:none;}


/* ---------- Unified full-width action rows for every tab toolbar ---------- */
.sr-toolbar.tab-toolbar{
  display:block;
  min-height:0;
  margin:8px 0 14px;
}
.sr-toolbar.tab-toolbar > .sr-search-wrap{
  width:100%;
  box-sizing:border-box;
  margin:0 0 8px;
}
.toolbar-action-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:100%;
  gap:8px;
}
.toolbar-action-row[data-columns="3"]{grid-template-columns:repeat(3,minmax(0,1fr));}
.toolbar-action-wrap{position:relative;min-width:0;width:100%;}
.toolbar-action-btn,
#tab-results .results-control-btn{
  width:100%;
  min-height:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 8px;
  border-radius:12px;
  font:700 11px/1 'Inter',sans-serif;
  letter-spacing:.01em;
}
.toolbar-action-btn .collection-line-icon,
#tab-results .results-control-btn .collection-line-icon{
  width:17px;
  height:17px;
  flex:0 0 auto;
}
.toolbar-action-btn > span:not(.toolbar-action-plus),
#tab-results .results-control-btn > span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.toolbar-action-btn-primary{color:var(--on-brass);}
.toolbar-action-plus{font:700 18px/1 'Inter',sans-serif;line-height:1;}
.toolbar-action-row .calc-sort-menu,
.toolbar-action-row .ship-sort-menu{
  left:0;
  right:auto;
  min-width:132px;
}
.tab-panel > .primary-tab-toolbar > .sr-search-wrap{display:none;}
@media(max-width:360px){
  .toolbar-action-row{gap:6px;}
  .toolbar-action-btn,
  #tab-results .results-control-btn{gap:4px;padding-inline:5px;font-size:10px;}
}

/* ---------- Opaque header safeguard: scrolling content must never bleed through ---------- */
/* Keep the complete top row crisp; translucent/blurred header pixels are
   particularly distracting beneath an iPhone status bar. */
header#app-header{
  background:#ffffff !important;
  border-bottom:1px solid rgba(26,44,63,.12) !important;
  box-shadow:0 2px 12px rgba(23,42,60,.08) !important;
  isolation:isolate;
}
header#app-header .header-search-panel{
  background:#ffffff !important;
  border-color:rgba(51,149,205,.62);
  box-shadow:0 6px 18px rgba(23,42,60,.13), inset 0 1px 0 rgba(255,255,255,.98);
}
header#app-header.is-search-open{
  background:#ffffff !important;
  box-shadow:0 3px 15px rgba(23,42,60,.11) !important;
}
:root[data-theme="dark"] header#app-header{
  background:#102033 !important;
  border-bottom-color:rgba(140,221,248,.16) !important;
  box-shadow:0 2px 14px rgba(0,0,0,.28) !important;
}
:root[data-theme="dark"] header#app-header .header-search-panel{
  background:#13283d !important;
  border-color:rgba(140,221,248,.52);
  box-shadow:0 6px 18px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.07);
}

/* ---------- One opaque app-header surface for crisp status-bar rendering ---------- */
/* A solid top surface avoids iOS compositing blur while the menu, title and
   utility controls keep their existing compact visual treatment. */
header#app-header{
  background:#ffffff!important;
  border-bottom:1px solid rgba(26,44,63,.12)!important;
  box-shadow:0 2px 12px rgba(23,42,60,.08)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  isolation:isolate;
}
header#app-header.is-search-open{
  background:#ffffff!important;
  box-shadow:0 3px 15px rgba(23,42,60,.11)!important;
}
header#app-header .menu-btn{
  z-index:5;
  background:#ffffff!important;
  border-color:rgba(26,44,63,.14)!important;
  box-shadow:0 4px 12px rgba(23,42,60,.13),inset 0 1px 0 rgba(255,255,255,.98)!important;
}
header#app-header #page-title{
  z-index:4;
  max-width:calc(100% - 196px);
  background:#ffffff!important;
  border-color:rgba(26,44,63,.14)!important;
  box-shadow:0 4px 12px rgba(23,42,60,.11),inset 0 1px 0 rgba(255,255,255,.98)!important;
}
header#app-header .header-utility-dock{
  position:absolute;
  right:16px;
  top:50%;
  z-index:5;
  display:flex;
  align-items:center;
  width:auto;
  min-width:84px;
  height:42px;
  overflow:hidden;
  transform:translateY(-50%);
  border:1px solid rgba(26,44,63,.14);
  border-radius:999px;
  background:#ffffff;
  box-shadow:0 4px 12px rgba(23,42,60,.13),inset 0 1px 0 rgba(255,255,255,.98);
}
header#app-header .header-search-btn,
header#app-header .header-utility-dock .dock-notification-btn{
  position:relative!important;
  inset:auto!important;
  display:flex!important;
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  align-items:center;
  justify-content:center;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--offwhite);
}
header#app-header .header-search-btn:active,
header#app-header .header-utility-dock .dock-notification-btn:active{transform:scale(.94)!important;}
header#app-header .header-utility-dock .dock-notification-btn{border-left:1px solid rgba(26,44,63,.11)!important;}
header#app-header .header-utility-dock .dock-notification-btn .tab-icon{
  position:static!important;
  display:flex;
  width:20px;
  height:20px;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
header#app-header .header-utility-dock .dock-notification-btn .tab-icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
header#app-header .header-utility-dock .dock-notification-btn .tab-label{display:none!important;}
header#app-header .header-utility-dock .dock-notification-btn .dock-notification-badge{
  top:5px!important;
  right:5px!important;
  z-index:2;
  border-color:#ffffff;
}
/* Opening search replaces only the title and utility dock; the profile dock remains reachable. */
header#app-header.is-search-open #page-title,
header#app-header.is-search-open .header-utility-dock{display:none!important;}
header#app-header .header-search-panel{
  z-index:6;
  background:#ffffff!important;
  border-color:rgba(51,149,205,.62)!important;
  box-shadow:0 6px 18px rgba(23,42,60,.13),inset 0 1px 0 rgba(255,255,255,.98)!important;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav{grid-template-columns:repeat(3,minmax(0,1fr));}

:root[data-theme="dark"] header#app-header .menu-btn,
:root[data-theme="dark"] header#app-header #page-title,
:root[data-theme="dark"] header#app-header .header-utility-dock,
:root[data-theme="dark"] header#app-header .header-search-panel{
  background:#13283d!important;
  border-color:rgba(140,221,248,.24)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.07)!important;
}
:root[data-theme="dark"] header#app-header .header-utility-dock .dock-notification-btn{border-left-color:rgba(140,221,248,.18)!important;}
:root[data-theme="dark"] header#app-header .header-utility-dock .dock-notification-btn .dock-notification-badge{border-color:#13283d;}

@media(max-width:360px){
  header#app-header .header-utility-dock{right:10px;min-width:76px;height:38px;}
  header#app-header .header-search-btn,
  header#app-header .header-utility-dock .dock-notification-btn{width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;}
  header#app-header #page-title{max-width:calc(100% - 180px);}
}

/* ---------- Dark-mode correction: opaque header and crisp individual docks ---------- */
:root[data-theme="dark"] header#app-header,
:root[data-theme="dark"] header#app-header.is-search-open{
  background:#102033!important;
  border-bottom:1px solid rgba(140,221,248,.16)!important;
  box-shadow:0 2px 14px rgba(0,0,0,.28)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
:root[data-theme="dark"] header#app-header button#menu-btn,
:root[data-theme="dark"] header#app-header #page-title,
:root[data-theme="dark"] header#app-header #header-utility-dock,
:root[data-theme="dark"] header#app-header #header-search-panel{
  background:#13283d!important;
  border-color:rgba(140,221,248,.24)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.07)!important;
}
:root[data-theme="dark"] header#app-header #header-utility-dock .dock-notification-btn{
  border-left-color:rgba(140,221,248,.18)!important;
}
:root[data-theme="dark"] header#app-header #header-utility-dock .dock-notification-badge{border-color:#13283d;}

/* ---------- Consistent line-style SVG icons for every side-menu action ---------- */
.side-menu-item > .side-menu-line-icon{
  display:block;
  box-sizing:border-box;
  width:23px;
  height:23px;
  flex:0 0 23px;
  color:currentColor;
}
.side-menu-item > .side-menu-line-icon path,
.side-menu-item > .side-menu-line-icon circle{vector-effect:non-scaling-stroke;}
.side-menu-footer-actions .side-menu-line-icon{margin-inline:0;}
.side-menu-close svg{display:block;width:22px;height:22px;}
.side-menu-close > svg{display:block!important;width:22px!important;height:22px!important;flex:0 0 22px;}

/* ---------- Refined side-menu icon language ---------- */
.side-menu .side-menu-item > .side-menu-line-icon{
  width:24px;
  height:24px;
  flex:0 0 24px;
  margin-inline:1px 2px;
  color:#2b6c8f;
  stroke-width:1.75;
  shape-rendering:geometricPrecision;
  transition:transform 160ms cubic-bezier(.23,1,.32,1),color 160ms cubic-bezier(.23,1,.32,1);
}
.side-menu .side-menu-item{column-gap:14px;}
.side-menu .side-menu-item:active > .side-menu-line-icon{transform:scale(.94);}
.side-menu .side-menu-signout > .side-menu-line-icon,
.side-menu .side-menu-signout > span{color:#2b6c8f;}
:root[data-theme="dark"] .side-menu .side-menu-item > .side-menu-line-icon,
:root[data-theme="dark"] .side-menu .side-menu-signout > .side-menu-line-icon,
:root[data-theme="dark"] .side-menu .side-menu-signout > span{color:#82d2ee;}
:root[data-theme="dark"] .side-menu-close{color:#bed1dc;}

/* ---------- Reference side-menu icon treatment ---------- */
.side-menu .side-menu-item > .side-menu-line-icon{
  width:26px!important;
  height:26px!important;
  flex:0 0 26px!important;
  margin:0!important;
  color:#2b6f95!important;
  stroke-width:1.8;
}
.side-menu .side-menu-item{column-gap:15px!important;}
.side-menu .side-menu-signout > .side-menu-line-icon,
.side-menu .side-menu-signout > span{color:#2b6f95!important;}
.side-menu-close > svg{width:24px!important;height:24px!important;flex-basis:24px!important;}
:root[data-theme="dark"] .side-menu .side-menu-item > .side-menu-line-icon,
:root[data-theme="dark"] .side-menu .side-menu-signout > .side-menu-line-icon,
:root[data-theme="dark"] .side-menu .side-menu-signout > span{color:#87d3ee!important;}

/* ---------- Side menu: overlay-local containment (never lock body) ---------- */
html.side-menu-open,
body.side-menu-open{
  overscroll-behavior:none;
}
.side-menu-overlay.open{
  overscroll-behavior:contain;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}
.side-menu-overlay.open .side-menu{
  overscroll-behavior:contain;
  touch-action:pan-y;
}

/* ---------- Bottom navigation: exact three-item dock geometry ---------- */
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav{
  box-sizing:border-box!important;
  height:68px!important;
  padding:4px 6px!important;
  border-radius:34px!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:minmax(0,1fr)!important;
  gap:0!important;
  overflow:hidden!important;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="calc"],
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="ship"],
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="results"]{
  box-sizing:border-box!important;
  align-self:stretch!important;
  width:100%!important;
  min-height:0!important;
  height:100%!important;
  margin:0!important;
  border-radius:29px!important;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav{isolation:isolate;}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav{
  grid-template-rows:54px!important;
  padding:2px 6px!important;
  align-content:center!important;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > .bottom-tabs-liquid-indicator{
  position:absolute;z-index:0;top:50%!important;translate:0 -50%;left:var(--liquid-indicator-left,0px);width:var(--liquid-indicator-width,0px);height:54px;
  box-sizing:border-box;border:1px solid rgba(86,132,163,.30);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.60),rgba(132,190,226,.30));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 3px 9px rgba(14,74,107,.09);backdrop-filter:blur(10px) saturate(145%);-webkit-backdrop-filter:blur(10px) saturate(145%);
  opacity:0;pointer-events:none;transform:scaleX(1) scaleY(1);transform-origin:center;will-change:left,width,transform,border-radius;transition:opacity .18s ease,left .42s cubic-bezier(.23,1,.32,1),width .42s cubic-bezier(.23,1,.32,1),transform .42s cubic-bezier(.23,1,.32,1),border-radius .42s cubic-bezier(.23,1,.32,1),filter .42s ease;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav.liquid-indicator-ready > .bottom-tabs-liquid-indicator{opacity:1;}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav.liquid-indicator-moving > .bottom-tabs-liquid-indicator{
  transform:scaleX(var(--liquid-indicator-scale,1.1)) scaleY(.92);border-radius:46% 54% 51% 49%;filter:saturate(1.08) brightness(1.04);
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button{z-index:1;}
:root[data-theme="dark"] .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > .bottom-tabs-liquid-indicator{border-color:rgba(140,221,248,.22);background:linear-gradient(135deg,rgba(140,221,248,.18),rgba(19,48,66,.22));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 5px 14px rgba(0,0,0,.18);}
@media(prefers-reduced-motion:reduce){.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > .bottom-tabs-liquid-indicator{transition:none!important;}.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav.liquid-indicator-moving > .bottom-tabs-liquid-indicator{transform:none;border-radius:999px;}}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button.active,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button.active:hover{
  background:transparent!important;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button .tab-icon,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="ship"] .tab-icon,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="calc"] .tab-icon,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="results"] .tab-icon{
  padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button .tab-icon-img img{border-radius:0!important;}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button{
  align-items:center!important;justify-content:center!important;
  padding:0!important;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button .tab-icon,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button .tab-label{
  position:static!important;top:auto!important;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button .tab-icon{
  top:auto!important;
  transform:none!important;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button .tab-icon-img img{
  opacity:.76!important;filter:grayscale(1)!important;transition:filter .24s ease,opacity .24s ease;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button.active .tab-icon-img img{
  opacity:1!important;filter:none!important;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="home"] .home-helm-icon{
  color:#5b3526;filter:grayscale(1);opacity:.76;transition:filter .24s ease,opacity .24s ease;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="home"].active .home-helm-icon{
  filter:none;opacity:1;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="home"] .home-helm-wood{stroke:#5b3526;}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="home"] .home-helm-brass{stroke:#a98245;}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button .tab-icon svg{
  transition:color .24s ease,opacity .24s ease;
}
@media(prefers-reduced-motion:reduce){.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button .tab-icon-img img,.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button .tab-icon svg{transition:none;}}

/* Keep the shared header search control fully removed when Home is active. */
header#app-header .header-search-btn[hidden]{display:none !important;}

/* ---------- Home dashboard: profile-derived, local-only career summary ---------- */
#tab-home{padding:14px 20px calc(98px + env(safe-area-inset-bottom, 0px));}
.home-dashboard{--home-card-gap:12px;display:grid;gap:var(--home-card-gap);max-width:700px;margin:0 auto;}
.home-welcome-card{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px;border-radius:18px;color:inherit;font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;}.home-welcome-card:active{transform:scale(.985);}.home-welcome-copy{min-width:0;flex:1;text-align:left;}
.home-welcome-icon,.home-mini-icon{display:grid;place-items:center;flex:0 0 auto;color:#1678b8;background:rgba(42,171,238,.12);border:1px solid rgba(42,171,238,.2);}
.home-welcome-icon{width:42px;height:42px;border-radius:14px;}
.home-welcome-icon svg{width:23px;height:23px;}
.home-profile-button{display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;margin:0;padding:2px;border-radius:15px;color:#1678b8;background:rgba(42,171,238,.1);box-shadow:0 2px 7px rgba(16,74,111,.12);}.home-welcome-avatar{display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border-radius:12px;color:#1678b8;background:rgba(42,171,238,.12);border:1px solid rgba(42,171,238,.22);}
.home-welcome-avatar img{display:block;width:100%;height:100%;object-fit:cover;}
.home-welcome-avatar .profile-initials{display:grid;place-items:center;width:100%;height:100%;color:#1678b8;font-family:'Inter',sans-serif;font-size:14px;font-weight:800;}
.home-welcome-avatar .profile-placeholder-svg{width:24px;height:24px;}
.home-eyebrow{margin:0 0 3px;color:#56809a;font-family:'Inter',sans-serif;font-size:9px;font-weight:800;letter-spacing:.12em;line-height:1.2;}
.home-welcome-name,.home-section-heading h2{display:block;margin:0;color:#183b55;font-family:'Lora',serif;font-size:18px;line-height:1.18;}
.home-welcome-copy,.home-active-ship-copy{text-align:left;}.home-welcome-copy>span{display:block;margin-top:4px;color:#618198;font-family:'Inter',sans-serif;font-size:11px;line-height:1.3;}
.home-career-card{padding:15px;border-radius:19px;}
.home-career-card-link{cursor:pointer;}
.home-career-card-link:focus-visible{outline:2px solid #1978b3;outline-offset:2px;}
.home-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.home-percent{display:grid;place-items:center;min-width:52px;height:31px;padding:0 9px;border-radius:999px;color:#0874b8;background:#e2f5ff;font-family:'Inter',sans-serif;font-size:14px;font-weight:800;line-height:1;}
.home-progress-copy,.home-history-summary{margin:9px 0 12px;color:#5b788c;font-family:'Inter',sans-serif;font-size:11px;line-height:1.48;}
.home-progress-row{display:flex;align-items:center;gap:9px;min-width:0;}
.home-progress-start-boat{position:absolute;left:var(--progress-position,0%);top:calc(50% - 5px);z-index:2;display:grid;place-items:center;width:24px;height:24px;color:#2aabee;transform:translate(-50%,-50%);pointer-events:none;}
.home-progress-start-boat svg{display:block;width:22px;height:22px;animation:home-progress-boat-sail 2.4s ease-in-out infinite;transform-origin:50% 70%;}
.home-progress-start-boat .home-boat-hull{fill:#e53935;stroke:#111;}
.home-progress-start-boat .home-boat-sail{fill:#a7adb3;stroke:#111;}
.home-progress-start-boat .home-boat-mast{fill:none;stroke:#000;}
.home-progress-start-boat .home-boat-wave{transform-box:fill-box;transform-origin:center;animation:home-progress-boat-wave 2.2s ease-in-out infinite;}
.home-progress-start-boat .home-boat-wave-two{animation-delay:-1.1s;opacity:.45;}
@keyframes home-progress-boat-wave{0%,100%{transform:translateX(-.45px);opacity:.45;}50%{transform:translateX(.55px);opacity:.95;}}
@keyframes home-progress-boat-sail{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-2px) rotate(3deg);}}
@media (prefers-reduced-motion:reduce){.home-progress-start-boat svg,.home-progress-start-boat .home-boat-wave{animation:none;}}
.home-progress-row .home-progress-track{flex:1;min-width:0;}
.home-progress-percent{flex:0 0 auto;min-width:42px;color:var(--brass-light);font-family:'Inter',sans-serif;font-size:14px;font-weight:800;line-height:1;text-align:right;}
.home-progress-track{position:relative;height:9px;overflow:visible;border:1px solid rgba(91,124,143,.24);border-radius:999px;background:linear-gradient(180deg,#d7e3ea 0%,#eef4f7 52%,#d3e0e7 100%);box-shadow:inset 0 2px 2px rgba(30,70,92,.16),inset 0 -1px 1px rgba(255,255,255,.82),0 1px 3px rgba(40,82,105,.12);}
.home-progress-fill{display:block;min-width:0;height:100%;border-radius:inherit;background:linear-gradient(180deg,#58d5ed 0%,#168fd0 56%,#0d5da8 100%);border:1px solid rgba(8,91,145,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.58),inset 0 -2px 1px rgba(5,67,116,.22),0 1px 3px rgba(22,92,137,.28);transition:width 220ms cubic-bezier(.23,1,.32,1);}
.home-progress-key{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;color:#668093;font-family:'Inter',sans-serif;font-size:9px;line-height:1.25;}
.home-progress-key-item{display:grid;min-width:0;gap:3px;text-align:center;}
.home-progress-key-label,.home-progress-key-value{display:flex;align-items:center;min-width:0;gap:3px;white-space:nowrap;}
.home-progress-key-label,.home-progress-key-value{justify-content:center;}
.home-progress-key-item:first-child{text-align:left;}
.home-progress-key-item:first-child .home-progress-key-label,.home-progress-key-item:first-child .home-progress-key-value{justify-content:flex-start;}
.home-progress-key-item:last-child{text-align:right;}
.home-progress-key-item:last-child .home-progress-key-label,.home-progress-key-item:last-child .home-progress-key-value{justify-content:flex-end;}
.home-progress-key em{display:inline-block;margin-left:1px;color:#7890a0;font-size:8px;font-style:normal;font-weight:700;white-space:nowrap;}
.home-progress-key strong{display:inline-block;margin:0;color:#24485f;font-size:10px;font-weight:800;white-space:nowrap;}
.home-progress-key small{display:inline-block;margin:0;color:#7890a0;font-size:8px;line-height:1.2;white-space:nowrap;}
.home-key-dot{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;vertical-align:baseline;}
.home-key-sea{background:var(--brass);}.home-key-life{background:#b9c8d3;}
.home-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--home-card-gap);}
.home-mini-card{display:flex;align-items:flex-start;gap:9px;min-width:0;padding:12px 10px;border-radius:16px;transition:transform .16s ease,box-shadow .16s ease;}
.home-mini-card:hover{transform:translateY(-2px);}
.home-mini-card:active{transform:translateY(1px);}
.home-mini-icon{width:32px;height:32px;border-radius:10px;box-shadow:inset 1px 1px 2px rgba(255,255,255,.95),inset -2px -2px 4px rgba(32,83,111,.12),3px 3px 6px rgba(40,82,105,.12);}.home-mini-icon svg{width:18px;height:18px;}.home-mini-icon-alert{color:#a46c16;background:#fff3d6;border-color:#f2d694;}
.home-mini-card div:last-child{min-width:0;}.home-mini-card span,.home-mini-card small{display:block;color:#678196;font-family:'Inter',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.home-mini-card span{font-size:10px;font-weight:700;}.home-mini-card strong{display:block;margin:3px 0 1px;color:#1c415b;font-family:'Inter',sans-serif;font-size:19px;line-height:1;font-weight:800;}.home-mini-card small{font-size:9px;line-height:1.35;}
.home-active-ship-section{margin:0;padding:0;background:transparent;border:0;box-shadow:none;}.home-active-ship-label{display:flex;align-items:center;margin:0 2px 7px;}.home-active-ship-label .home-eyebrow{margin:0;}.home-active-ship-dot{display:inline-block;width:7px;height:7px;flex:0 0 7px;margin-right:6px;border-radius:50%;background:#28b463;box-shadow:0 0 0 0 rgba(40,180,99,.52);animation:home-active-ship-pulse 1.45s ease-out infinite;}@keyframes home-active-ship-pulse{0%{box-shadow:0 0 0 0 rgba(40,180,99,.6);opacity:1;}70%{box-shadow:0 0 0 6px rgba(40,180,99,0);opacity:.45;}100%{box-shadow:0 0 0 0 rgba(40,180,99,0);opacity:1;}}.home-active-ship-card{display:flex;align-items:center;gap:10px;padding:10px;border-radius:13px;}.home-active-ship-photo{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;overflow:hidden;border-radius:11px;background:#e8f0f4;border:1px solid rgba(48,114,151,.14);}.home-active-ship-photo img{display:block;width:100%;height:100%;object-fit:cover;}.home-active-ship-photo .smart-seamen-placeholder{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.58;}.home-active-ship-copy{min-width:0;font-family:'Inter',sans-serif;}.home-active-ship-copy strong,.home-active-ship-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.home-active-ship-copy strong{display:flex;align-items:center;min-width:0;overflow:visible;color:#274c64;font-size:12px;line-height:1.35;}.home-active-ship-copy strong b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.home-active-ship-copy span{margin-top:2px;color:#7890a0;font-size:9px;line-height:1.3;}.home-history-section{padding:15px;border-radius:19px;}.home-history-heading{align-items:center;}.home-history-total{text-align:right;color:#658096;font-family:'Inter',sans-serif;line-height:1;}.home-history-total strong{display:block;color:#1978b3;font-size:19px;font-weight:800;}.home-history-total span{font-size:9px;}
.home-voyage-list{display:grid;gap:8px;}.home-voyage-card{display:flex;align-items:center;gap:10px;padding:10px;border-radius:13px;}.home-voyage-icon{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border-radius:10px;color:#2e84bc;background:#e1f4fd;}.home-voyage-icon svg{width:19px;height:19px;}.home-voyage-copy{min-width:0;font-family:'Inter',sans-serif;}.home-voyage-copy strong,.home-voyage-copy span,.home-voyage-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.home-voyage-copy strong{color:#274c64;font-size:11px;line-height:1.35;}.home-voyage-copy span{margin-top:1px;color:#568099;font-size:10px;line-height:1.3;}.home-voyage-copy small{margin-top:2px;color:#7890a0;font-size:9px;line-height:1.3;}.home-empty-state{padding:13px;border-radius:13px;color:#6d8596;background:#f5f9fb;border:1px dashed rgba(50,113,148,.26);font-family:'Inter',sans-serif;font-size:11px;line-height:1.4;text-align:center;}:root[data-theme="dark"] .home-progress-percent{color:#66ccf4;}:root[data-theme="dark"] .home-welcome-card h2,:root[data-theme="dark"] .home-section-heading
 h2,:root[data-theme="dark"] .home-mini-card strong,:root[data-theme="dark"] .home-progress-key strong,:root[data-theme="dark"] .home-voyage-copy strong{color:#ecf7fb;}:root[data-theme="dark"] .home-welcome-card span,:root[data-theme="dark"] .home-progress-copy,:root[data-theme="dark"] .home-history-summary,:root[data-theme="dark"] .home-mini-card span,:root[data-theme="dark"] .home-mini-card small,:root[data-theme="dark"] .home-voyage-copy span,:root[data-theme="dark"] .home-voyage-copy small,:root[data-theme="dark"] .home-history-total{color:#b4cdda;}:root[data-theme="dark"] .home-progress-percent{color:#66ccf4;}:root[data-theme="dark"] .home-progress-track{background:#163b54;}:root[data-theme="dark"] .home-empty-state{color:#b4cdda;}
/* Four equal controls preserve dock balance when Home is added. */
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="home"],
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="calc"],
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="ship"],
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="results"]{grid-column:auto!important;grid-row:auto!important;position:static!important;left:auto!important;top:auto!important;transform:none!important;}
@media(max-width:360px){.home-welcome-card,.home-career-card,.home-history-section{padding:12px;}.home-progress-key{font-size:9px;}.home-summary-grid{gap:var(--home-card-gap);}.home-mini-card{padding:10px 8px;gap:7px;}.home-mini-icon{width:29px;height:29px;}.home-mini-card strong{font-size:17px;}}

/* Life at Sea basis selector: local profile preference */
.home-basis-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:10px 0 8px;padding:4px;border-radius:12px;background:#edf5f8;border:1px solid rgba(50,113,148,.1);}
.home-basis-option{min-width:0;padding:7px 6px;border:0;border-radius:9px;color:#6a8496;background:transparent;font-family:'Inter',sans-serif;font-size:10px;font-weight:750;line-height:1.15;white-space:nowrap;transition:background .16s ease-out,color .16s ease-out,box-shadow .16s ease-out,transform .16s ease-out;}
.home-basis-option.active{color:#176eaa;background:#fff;box-shadow:0 2px 7px rgba(24,80,112,.12);}
.home-basis-option:active{transform:scale(.97);}
:root[data-theme="dark"] .home-basis-switch{background:#0f2a3f;border-color:rgba(140,221,248,.15);}
:root[data-theme="dark"] .home-basis-option{color:#b4cdda;}
:root[data-theme="dark"] .home-basis-option.active{color:#8fddff;background:#1b4059;box-shadow:0 2px 8px rgba(0,0,0,.22);}

/* Compact Home controls: the Life at Sea basis opens only from its top-right line button. */
.home-basis-control{position:relative;flex:0 0 auto;}
.home-life-basis-trigger{display:grid;place-items:center;width:52px;height:31px;padding:0;border:0;border-radius:999px;color:#1978b3;background:#e2f5ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.8);transition:background .16s ease-out,color .16s ease-out,transform .16s ease-out;}
.home-life-basis-trigger svg{width:20px;height:20px;transform-origin:center;will-change:transform;animation:home-sailing-boat 4.2s ease-in-out infinite;}.home-life-basis-trigger svg>path:nth-child(1){stroke:#000;}.home-life-basis-trigger svg>path:nth-child(2),.home-life-basis-trigger svg>path:nth-child(3){fill:#a7adb3;stroke:#000;}.home-life-basis-trigger svg>path:nth-child(4){fill:#e53935;stroke:#000;}.home-life-basis-trigger:active{transform:scale(.97);}.home-life-basis-trigger[aria-expanded="true"]{color:#fff;background:#1978b3;}@keyframes home-sailing-boat{0%,100%{transform:translate3d(-1px,0,0) rotate(-2deg);}25%{transform:translate3d(0,-1px,0) rotate(1deg);}50%{transform:translate3d(1px,0,0) rotate(2.5deg);}75%{transform:translate3d(0,1px,0) rotate(0deg);}}.home-life-basis-trigger .home-boat-wave{stroke-width:1.35;opacity:.7;transform-box:fill-box;transform-origin:center;animation:home-boat-wave 2.2s ease-in-out infinite;}.home-life-basis-trigger .home-boat-wave-two{opacity:.45;animation-delay:-1.1s;}@keyframes home-boat-wave{0%,100%{transform:translateX(-.45px);opacity:.45;}50%{transform:translateX(.55px);opacity:.95;}}@media(prefers-reduced-motion:reduce){.home-life-basis-trigger svg,.home-life-basis-trigger .home-boat-wave{animation:none;}}
.home-basis-menu{position:absolute;z-index:12;top:calc(100% + 7px);right:0;display:grid;min-width:148px;padding:5px;border:1px solid rgba(37,106,157,.16);border-radius:13px;background:#fff;box-shadow:0 10px 24px rgba(22,65,91,.18);transform-origin:top right;}.home-basis-menu[hidden]{display:none;}
.home-basis-menu-option{padding:9px 10px;border:0;border-radius:9px;color:#547186;background:transparent;text-align:left;font-family:'Inter',sans-serif;font-size:11px;font-weight:750;line-height:1.2;}.home-basis-menu-option.active{color:#176eaa;background:#edf8fe;}.home-basis-menu-option:active{transform:scale(.98);}
.home-history-see-all{width:100%;margin-top:9px;padding:9px 10px;border:1px solid rgba(31,120,179,.22);border-radius:11px;color:#176eaa;background:#f2faff;font-family:'Inter',sans-serif;font-size:11px;font-weight:800;line-height:1.2;transition:background .16s ease-out,transform .16s ease-out;}.home-history-see-all:active{transform:scale(.98);background:#e2f5ff;}
:root[data-theme="dark"] .home-life-basis-trigger{color:#8fddff;background:#1b4059;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}:root[data-theme="dark"] .home-life-basis-trigger[aria-expanded="true"]{color:#10263a;background:#8fddff;}:root[data-theme="dark"] .home-basis-menu{border-color:rgba(140,221,248,.2);background:#132b41;box-shadow:0 10px 24px rgba(0,0,0,.32);}:root[data-theme="dark"] .home-basis-menu-option{color:#b4cdda;}:root[data-theme="dark"] .home-basis-menu-option.active{color:#8fddff;background:#1b4059;}:root[data-theme="dark"] .home-history-see-all{border-color:rgba(140,221,248,.22);color:#8fddff;background:#10263a;}

/* Home has no header Search control: keep the notification bell as one compact, right-aligned control. */
header#app-header .header-utility-dock:has(.header-search-btn[hidden]){
  /* The two-control dock is 86px wide. With the right edge fixed, 44px keeps
     the Home bell centre aligned with its centre in the other primary tabs. */
  width:44px;
  min-width:44px;
}
header#app-header .header-utility-dock:has(.header-search-btn[hidden]) .dock-notification-btn{
  border-left:0!important;
}

/* Keep the notification bell on the exact same horizontal centre as Home when Search is present. */
header#app-header .header-utility-dock:has(.header-search-btn:not([hidden])) .dock-notification-btn{
  left:-0.5px!important;
}

/* Active Ship AIS third row */
.home-active-ship-copy{flex:1;}
.home-active-ship-ais{display:grid;grid-template-columns:.9fr 1.75fr 1.25fr .95fr;gap:6px;margin-top:6px;padding-top:6px;border-top:1px solid rgba(48,114,151,.13);font-family:'Inter',sans-serif;}
.home-active-ship-ais>span{display:block;min-width:0;overflow:hidden;}
.home-active-ship-ais b,.home-active-ship-ais i{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;}
.home-active-ship-ais b{color:#7890a0;font-size:7px;font-weight:800;letter-spacing:.055em;line-height:1.15;text-transform:uppercase;}
.home-active-ship-ais i{margin-top:2px;color:#355b73;font-size:8px;font-weight:700;line-height:1.2;}
.home-active-ship-ais.is-unavailable{display:block;margin-top:5px;padding-top:5px;border-top:1px solid rgba(48,114,151,.13);color:#7890a0;font-family:'Inter',sans-serif;font-size:8px;font-weight:650;line-height:1.25;}
:root[data-theme="dark"] .home-active-ship-ais{border-top-color:rgba(140,221,248,.16);}
:root[data-theme="dark"] .home-active-ship-ais b,:root[data-theme="dark"] .home-active-ship-ais.is-unavailable{color:#8eabbb;}
:root[data-theme="dark"] .home-active-ship-ais i{color:#d8edf5;}
@media(max-width:360px){.home-active-ship-ais{grid-template-columns:.85fr 1.45fr 1.15fr .85fr;gap:4px;}.home-active-ship-ais i{font-size:7.5px;}}

/* ---------- SMART AI dog FAB ---------- */
#ai-fab-btn.ai-fab{
  position:fixed;
  z-index:340;
  left:auto;
  right:calc(24px + env(safe-area-inset-right, 0px));
  top:auto;
  bottom:calc(86px + env(safe-area-inset-bottom, 0px));
  width:56px;
  height:56px;
  padding:0;
  overflow:visible;
  isolation:isolate;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.96);
  background:#d9f2fb;
  color:var(--navy-deep);
  box-shadow:0 8px 0 #177da9, 0 15px 24px rgba(10,49,70,.30), inset 0 2px 0 rgba(255,255,255,.96), inset 0 -3px 0 rgba(6,64,95,.20);
  transform:none;
  transition:transform 170ms cubic-bezier(.22,1,.36,1), box-shadow 170ms cubic-bezier(.22,1,.36,1);
}
#ai-fab-btn.ai-fab::before{
  content:'';
  position:absolute;
  z-index:2;
  inset:2px;
  border-radius:50%;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.78);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.72);
}
#ai-fab-btn .ai-fab-avatar{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  object-position:center;
}
#ai-fab-btn.ai-fab:hover{
  transform:translateY(-4px) scale(1.035);
  box-shadow:0 12px 0 #177da9, 0 20px 28px rgba(10,49,70,.34), inset 0 2px 0 rgba(255,255,255,.96), inset 0 -3px 0 rgba(6,64,95,.20);
}
#ai-fab-btn.ai-fab:active{
  transform:translateY(4px) scale(.985);
  box-shadow:0 3px 0 #177da9, 0 7px 13px rgba(10,49,70,.22), inset 0 2px 0 rgba(255,255,255,.92), inset 0 -2px 0 rgba(6,64,95,.18);
}
@media(max-width:360px){
  #ai-fab-btn.ai-fab{right:16px; bottom:calc(80px + env(safe-area-inset-bottom, 0px)); width:50px; height:50px;}
}

/* Keep the complete dog-and-sparkles artwork visible without a blue FAB disc behind it. */
#ai-fab-btn.ai-fab{
  width:62px;
  height:62px;
  background:transparent;
  border:0;
  box-shadow:0 10px 16px rgba(8,37,53,.28);
}
#ai-fab-btn.ai-fab::before{display:none;}
#ai-fab-btn .ai-fab-avatar{
  width:88%;
  height:88%;
  margin:auto;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 2px 1px rgba(255,255,255,.36));
}
#ai-fab-btn.ai-fab:hover{
  transform:translateY(-4px) scale(1.035);
  box-shadow:0 15px 22px rgba(8,37,53,.34);
}
#ai-fab-btn.ai-fab:active{
  transform:translateY(2px) scale(.985);
  box-shadow:0 5px 9px rgba(8,37,53,.22);
}
@media(max-width:360px){
  #ai-fab-btn.ai-fab{width:56px; height:56px;}
}

/* ---------- Ask Baby raised FAB ---------- */
#ai-fab-wrap{
  position:fixed;
  z-index:340;
  right:calc(22px + env(safe-area-inset-right, 0px));
  bottom:calc(86px + env(safe-area-inset-bottom, 0px));
  width:56px;
  height:56px;
  pointer-events:none;
}
#ai-fab-wrap #ai-fab-btn.ai-fab{
  position:absolute;
  inset:0;
  width:56px;
  height:56px;
  padding:0;
  overflow:hidden;
  pointer-events:auto;
  isolation:isolate;
  border:0;
  border-radius:50%;
  background:radial-gradient(circle at 32% 25%,#fff 0 7%,#eff8fb 34%,#b7d5df 100%);
  box-shadow:0 10px 22px rgba(8,37,53,.30), 0 3px 8px rgba(8,37,53,.15);
  transform:none;
}
#ai-fab-wrap #ai-fab-btn.ai-fab::before{
  display:none;
  inset:1.5px;
  z-index:3;
  border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(0,0,0,.20);
}
#ai-fab-wrap #ai-fab-btn .ai-fab-art{
  position:absolute;
  z-index:2;
  inset:0;
  display:grid;
  place-items:center;
}
#ai-fab-wrap #ai-fab-btn .ai-fab-avatar{
  width:70%;
  height:70%;
  margin:0;
  object-fit:contain;
  object-position:center;
  filter:none;
}
#ai-fab-wrap #ai-fab-btn.ai-fab:hover{
  transform:translateY(-3px) scale(1.035);
  box-shadow:0 16px 30px rgba(8,37,53,.34), 0 4px 10px rgba(8,37,53,.16);
}
#ai-fab-wrap #ai-fab-btn.ai-fab:active{
  transform:translateY(1px) scale(.985);
  box-shadow:0 5px 11px rgba(8,37,53,.22);
}
#ai-fab-wrap #ai-fab-btn.ai-fab{
  border:0;
  border-radius:50%;
  background:radial-gradient(circle at 32% 25%,#fff 0 7%,#eff8fb 34%,#b7d5df 100%);
  box-shadow:0 10px 22px rgba(8,37,53,.30), 0 3px 8px rgba(8,37,53,.15);
}
#ai-fab-wrap #ai-fab-btn.ai-fab::before{display:none;}
#ai-fab-wrap #ai-fab-btn .ai-fab-art{inset:0;}
#ai-fab-wrap #ai-fab-btn .ai-fab-avatar{width:100%;height:100%;object-fit:contain;filter:none;}
#ai-fab-label{
  position:absolute;
  right:72px;
  bottom:14px;
  z-index:5;
  display:block;
  width:max-content;
  max-width:150px;
  padding:8px 11px;
  border:1px solid rgba(15,59,78,.16);
  border-radius:999px;
  background:rgba(255,255,255,.96);
  color:#173949;
  box-shadow:0 7px 16px rgba(7,43,60,.20), inset 0 1px 0 rgba(255,255,255,.96);
  font:800 11px/1 'Inter',sans-serif;
  letter-spacing:.1px;
  white-space:nowrap;
  opacity:0;
  transform:translateX(8px) scale(.94);
  pointer-events:none;
  transition:opacity 180ms ease, transform 180ms cubic-bezier(.22,1,.36,1);
}
#ai-fab-wrap.is-label-visible #ai-fab-label{
  opacity:1;
  transform:translateX(0) scale(1);
}
html[data-theme="dark"] #ai-fab-wrap #ai-fab-btn.ai-fab{
  border-color:rgba(2,3,4,.55);
  background:radial-gradient(circle at 32% 25%,#385b6c 0 7%,#203f4e 36%,#122833 100%);
  box-shadow:0 10px 22px rgba(0,0,0,.34), 0 3px 8px rgba(0,0,0,.18);
}
html[data-theme="dark"] #ai-fab-wrap #ai-fab-btn.ai-fab::before{
  border-color:rgba(232,250,255,.28);
  box-shadow:inset 0 1px 0 rgba(220,250,255,.20), inset 0 -1px 0 rgba(0,0,0,.42);
}
html[data-theme="dark"] #ai-fab-label{
  border-color:rgba(184,231,245,.18);
  background:rgba(20,47,61,.97);
  color:#e8f8fd;
  box-shadow:0 7px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(215,247,255,.12);
}
@media(max-width:360px){
  #ai-fab-wrap{right:14px; bottom:calc(80px + env(safe-area-inset-bottom, 0px)); width:56px; height:56px;}
  #ai-fab-wrap #ai-fab-btn.ai-fab{width:56px; height:56px;}
  #ai-fab-label{right:62px; bottom:12px;}
}
@media(prefers-reduced-motion:reduce){
  #ai-fab-wrap #ai-fab-btn.ai-fab,
  #ai-fab-label{transition:none;}
}

/* ---------- Settings: six-category workspace hub ---------- */
.settings-category-hub{display:grid;gap:10px;margin-bottom:25px;}
.settings-category-card{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:12px 13px;border:1px solid rgba(67,172,223,.38);border-radius:16px;background:linear-gradient(135deg,rgba(13,75,108,.22),rgba(5,31,49,.22));color:var(--offwhite);text-align:left;cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1),border-color .16s ease,background .16s ease;}
.settings-category-card:hover{border-color:rgba(140,221,248,.72);background:linear-gradient(135deg,rgba(20,107,147,.3),rgba(5,31,49,.25));}
.settings-category-card:active{transform:scale(.98);}
.settings-category-card:focus-visible,.settings-action-row:focus-visible,.settings-data-entry:focus-visible{outline:2px solid var(--brass-light);outline-offset:2px;}
.settings-category-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;border:1px solid rgba(140,221,248,.18);border-radius:13px;background:rgba(42,171,238,.13);color:var(--brass-light);}
.settings-category-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.settings-icon-security{color:#a9e3bf;background:rgba(67,185,122,.12);}
.settings-icon-sync{color:#9bdcff;background:rgba(71,154,224,.13);}
.settings-icon-notifications{color:#f4cc89;background:rgba(218,155,50,.13);}
.settings-icon-appearance{color:#e5c5ff;background:rgba(161,101,219,.13);}
.settings-icon-language{color:#aee9e1;background:rgba(50,180,162,.12);}
.settings-icon-data{color:#abc8ff;background:rgba(89,133,222,.14);}
.settings-icon-about{color:#b8d9ff;background:rgba(79,145,219,.14);}
:root[data-theme="light"] .settings-category-icon{border-color:rgba(27,118,166,.28);color:#145b78;}
:root[data-theme="light"] .settings-icon-security{color:#176e42;background:rgba(61,164,100,.14);}
:root[data-theme="light"] .settings-icon-sync{color:#17618a;background:rgba(71,154,224,.16);}
:root[data-theme="light"] .settings-icon-notifications{color:#8a5b09;background:rgba(218,155,50,.16);}
:root[data-theme="light"] .settings-icon-appearance{color:#70429a;background:rgba(161,101,219,.16);}
:root[data-theme="light"] .settings-icon-language{color:#176e68;background:rgba(50,180,162,.16);}
:root[data-theme="light"] .settings-icon-data{color:#315da8;background:rgba(89,133,222,.16);}
:root[data-theme="light"] .settings-icon-about{color:#245d91;background:rgba(79,145,219,.16);}
.settings-category-copy{display:grid;gap:4px;min-width:0;flex:1;}
.settings-category-copy strong{color:var(--offwhite);font-size:15px;line-height:1.2;}
.settings-category-copy small{color:var(--offwhite-dim);font-size:11.5px;line-height:1.35;}
.settings-category-arrow{color:var(--brass-light);font-size:29px;font-weight:300;line-height:1;}
:root[data-theme="light"] .settings-category-arrow,:root[data-theme="light"] .settings-about-row b{color:#8a5b09;}
.settings-about-list{display:grid;gap:0;border:0;border-radius:0;overflow:visible;background:transparent;}
.settings-about-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 4px;border:0;border-bottom:1px solid var(--navy-line);color:var(--offwhite);background:transparent;text-align:left;font:600 13px/1.25 'Inter',sans-serif;cursor:pointer;}
.settings-about-row:last-child{border-bottom:0;}
.settings-about-row:hover{background:rgba(42,171,238,.08);color:var(--brass-light);}
.settings-about-row b{color:var(--brass-light);font-size:22px;font-weight:400;line-height:1;}
:root:not([data-theme="light"]) #settings-feedback-row{background:rgba(255,255,255,.055);color:#f5f3ec;}
:root:not([data-theme="light"]) #settings-feedback-row b{color:#8cddf8;}
.settings-about-footer{display:grid;gap:5px;margin-top:28px;padding-top:16px;border-top:1px solid var(--navy-line);color:rgba(255,255,255,.62);font:500 11px/1.35 'Inter',sans-serif;text-align:center;letter-spacing:.03em;}
:root[data-theme="light"] .settings-about-footer{color:#87939c;}
.settings-panel{display:grid;gap:13px;margin-bottom:25px;animation:settingsPanelIn .2s cubic-bezier(.23,1,.32,1) both;}
.settings-panel[hidden]{display:none!important;}
.settings-panel-heading{display:flex;align-items:center;gap:11px;padding:2px 0 4px;}
.settings-panel > .settings-panel-heading{display:flex;align-items:center;padding:0 0 4px;}
.settings-panel > .settings-panel-heading .settings-category-icon{margin-top:0;}
.settings-panel > .settings-panel-heading h2{display:none;}
.settings-panel > .settings-panel-heading p{margin:0;}
.settings-panel-heading .settings-category-icon{margin-top:1px;}
.settings-panel-heading h2{margin:0;color:var(--offwhite);font:700 19px/1.2 'Spectral',serif;}
.settings-panel-heading p{margin:4px 0 0;color:var(--offwhite-dim);font-size:11.5px;line-height:1.45;}
.settings-control-list{display:grid;gap:8px;}
.settings-push-heading{margin-top:4px;margin-bottom:7px;}
.settings-push-types-heading{margin-top:12px;margin-bottom:6px;font-size:11px;}
.settings-push-type-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.settings-push-type-list .settings-toggle-row{min-height:54px;padding:8px 7px;gap:5px;align-items:center;}
.settings-push-type-list .settings-toggle-row > span:first-child{gap:2px;}
.settings-push-type-list .settings-toggle-row strong{font-size:11px;}
.settings-push-type-list .settings-toggle-row small{font-size:8.5px;line-height:1.2;}
.settings-push-type-list .settings-switch-ui{flex-basis:35px;width:35px;height:21px;}
.settings-push-type-list .settings-switch-ui::after{top:2px;left:2px;width:15px;height:15px;}
.settings-push-type-list .settings-switch:checked + .settings-switch-ui::after{transform:translateX(14px);}
.settings-push-type-list .settings-toggle-row.is-disabled{cursor:not-allowed;opacity:.48;}
.settings-control-divider{height:1px;margin:6px 4px;background:var(--navy-line);}
.settings-action-row,.settings-info-row,.settings-toggle-row,.settings-select-row{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 13px;border:1px solid rgba(67,172,223,.3);border-radius:14px;background:rgba(7,35,55,.25);color:var(--offwhite);text-align:left;}
.settings-action-row{cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease;}
.settings-action-row:hover{border-color:rgba(140,221,248,.6);background:rgba(14,82,115,.3);}
.settings-action-row:active{transform:scale(.985);}
.settings-action-row > span,.settings-info-row > span,.settings-toggle-row > span:first-child,.settings-select-row > span:first-child{display:grid;gap:4px;min-width:0;flex:1;}
.settings-action-row strong,.settings-info-row strong,.settings-toggle-row strong,.settings-select-row strong{color:var(--offwhite);font-size:13px;line-height:1.25;}
.settings-action-row small,.settings-info-row small,.settings-toggle-row small,.settings-select-row small{color:var(--offwhite-dim);font-size:11px;line-height:1.35;}
.settings-action-row > b{color:var(--brass-light);font-size:25px;font-weight:400;line-height:1;}
.settings-action-danger{border-color:rgba(225,124,100,.32);}
.settings-action-danger strong{color:#ffc0ab;}
.settings-info-row > b{max-width:48%;overflow:hidden;color:var(--brass-light);font-size:11px;font-weight:700;text-align:right;text-overflow:ellipsis;white-space:nowrap;}
.settings-toggle-row,.settings-select-row{cursor:pointer;}
.settings-switch{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;}
.settings-switch-ui{position:relative;display:inline-block;flex:0 0 43px;width:43px;height:25px;border:1px solid rgba(190,218,230,.3);border-radius:999px;background:rgba(12,42,61,.85);transition:background .16s ease,border-color .16s ease;}
.settings-switch-ui::after{content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#b7c7cf;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:transform .16s cubic-bezier(.23,1,.32,1),background .16s ease;}
.settings-switch:checked + .settings-switch-ui{border-color:rgba(140,221,248,.72);background:rgba(30,150,201,.62);}
.settings-switch:checked + .settings-switch-ui::after{transform:translateX(18px);background:#fff5d6;}
.settings-switch:focus-visible + .settings-switch-ui{outline:2px solid var(--brass-light);outline-offset:2px;}
.settings-select-row select{min-width:132px;max-width:45%;padding:8px 25px 8px 9px;border:1px solid rgba(140,221,248,.32);border-radius:9px;background:var(--well-bg);color:var(--offwhite);font:600 11px 'Inter',sans-serif;}
.settings-select-row select:focus-visible{outline:2px solid var(--brass-light);outline-offset:2px;}
.settings-password-overlay{z-index:10060;align-items:center;padding:18px;background:rgba(2,12,24,.66);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}
.settings-password-modal{width:min(100%,520px);max-height:min(760px,calc(100dvh - 32px));border-radius:22px;border-bottom:1px solid var(--navy-line);overflow:hidden;}
.settings-password-header{align-items:flex-start;padding:18px 20px 16px;}
.settings-password-header > div{min-width:0;}
.settings-modal-eyebrow{display:block;margin-bottom:4px;color:var(--brass-light);font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;}
.settings-password-header h2{font-size:20px;}
.settings-password-form{display:grid;gap:14px;padding:18px 20px 20px;overflow-y:auto;}
.settings-password-description{margin:0;color:var(--offwhite-dim);font-size:12px;line-height:1.5;}
.settings-password-field{display:grid;gap:7px;}
.settings-password-field label{color:var(--offwhite-dim);font-size:11px;font-weight:800;letter-spacing:.02em;}
.settings-password-input-wrap{position:relative;display:flex;align-items:center;}
.settings-password-form input{width:100%;min-height:44px;padding:10px 68px 10px 12px;border:1px solid rgba(140,221,248,.3);border-radius:11px;background:rgba(1,16,28,.62);color:var(--offwhite);font:600 13px 'Inter',sans-serif;letter-spacing:.01em;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;}
.settings-password-form input::placeholder{color:var(--offwhite-dim);font-weight:500;}
.settings-password-form input:focus-visible{outline:2px solid var(--brass-light);outline-offset:2px;border-color:var(--brass-light);box-shadow:0 0 0 4px rgba(242,200,120,.12);}
.settings-password-form input.is-valid{border-color:rgba(119,230,165,.7);}
.settings-password-form input.is-invalid{border-color:rgba(231,129,111,.85);box-shadow:0 0 0 3px rgba(231,129,111,.1);}
.settings-password-visibility{position:absolute;right:7px;min-width:52px;padding:7px 8px;border:0;border-radius:8px;background:transparent;color:var(--brass-light);font:800 10px 'Inter',sans-serif;cursor:pointer;}
.settings-password-visibility:hover{background:rgba(242,200,120,.12);}
.settings-password-visibility:focus-visible{outline:2px solid var(--brass-light);outline-offset:2px;}
.settings-password-strength{display:grid;gap:7px;padding:11px 12px;border:1px solid rgba(140,221,248,.18);border-radius:12px;background:rgba(5,31,49,.24);}
.settings-password-strength-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--offwhite-dim);font-size:11px;}
.settings-password-strength-heading strong{color:var(--offwhite);font-size:11px;}
.settings-password-strength-track{height:6px;overflow:hidden;border-radius:999px;background:rgba(190,218,230,.16);}
.settings-password-strength-track span{display:block;width:0;height:100%;border-radius:inherit;background:#e6816f;transition:width .18s ease,background .18s ease;}
.settings-password-strength[data-strength="fair"] .settings-password-strength-track span{background:#f2c878;}
.settings-password-strength[data-strength="good"] .settings-password-strength-track span{background:#77d7a0;}
.settings-password-strength[data-strength="strong"] .settings-password-strength-track span{background:#62e5b0;}
.settings-password-requirements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin:0;padding:0;list-style:none;}
.settings-password-requirements li{display:flex;align-items:center;gap:7px;min-width:0;color:var(--offwhite-dim);font-size:10.5px;line-height:1.3;}
.settings-password-rule-mark{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:0 0 16px;border:1px solid rgba(190,218,230,.32);border-radius:50%;color:transparent;font-size:11px;font-weight:900;}
.settings-password-requirements li.is-met{color:#aee8c6;}
.settings-password-requirements li.is-met .settings-password-rule-mark{border-color:rgba(119,230,165,.72);background:rgba(61,164,100,.18);color:#77e6a5;}
.settings-password-status{min-height:18px;margin:0;color:var(--offwhite-dim);font-size:11px;line-height:1.45;}
.settings-password-status[data-state="error"]{color:#ffb3a2;}
.settings-password-status[data-state="success"]{color:#aee8c6;}
.settings-password-actions{display:flex;gap:10px;justify-content:flex-end;padding:14px 0 0;border-top:1px solid var(--navy-line);}
.settings-password-actions button{min-width:132px;}
.settings-password-actions .btn-save-ship:disabled{opacity:.48;cursor:not-allowed;filter:saturate(.4);box-shadow:none;}
.settings-password-actions .btn-save-ship:disabled:hover{filter:saturate(.4);}
.settings-inline-status{min-height:16px;margin:0;color:var(--offwhite-dim);font-size:11px;line-height:1.4;}
.settings-account-identity{display:grid;justify-items:center;gap:9px;padding:4px 0 2px;text-align:center;}
.settings-account-avatar{display:flex;align-items:center;justify-content:center;width:72px;height:72px;overflow:hidden;border:1px solid rgba(140,221,248,.28);border-radius:24px;background:linear-gradient(135deg,#2b9fd2,#0d5273);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 28px rgba(0,0,0,.2);color:#fff;font:700 24px 'Spectral',serif;}
.settings-account-avatar img{width:100%;height:100%;object-fit:cover;}
.settings-account-identity strong{max-width:100%;overflow:hidden;color:var(--offwhite);font:700 20px/1.2 'Spectral',serif;text-overflow:ellipsis;white-space:nowrap;}
.settings-account-status{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border:1px solid rgba(140,221,248,.24);border-radius:16px;background:linear-gradient(135deg,rgba(25,112,151,.18),rgba(6,30,48,.2));box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 28px rgba(0,0,0,.12);}
.settings-account-status-dot{width:10px;height:10px;flex:0 0 10px;margin-top:4px;border-radius:50%;background:#f0b45a;box-shadow:0 0 0 4px rgba(240,180,90,.13);}
.settings-account-status-dot[data-state="approved"]{background:#5fd49b;box-shadow:0 0 0 4px rgba(95,212,155,.13);}
.settings-account-status-dot[data-state="attention"]{background:#f07878;box-shadow:0 0 0 4px rgba(240,120,120,.13);}
.settings-account-status-copy{display:grid;gap:2px;min-width:0;}
.settings-account-status-copy>span{color:var(--offwhite-dim);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.settings-account-status-copy strong{color:var(--offwhite);font-size:14px;line-height:1.25;}
.settings-account-status-copy small{color:var(--offwhite-dim);font-size:12px;line-height:1.35;}
.settings-account-card{display:grid;overflow:hidden;border:1px solid rgba(140,221,248,.24);border-radius:16px;background:linear-gradient(135deg,rgba(25,112,151,.18),rgba(6,30,48,.2));box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 28px rgba(0,0,0,.16);}
.settings-account-field{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:57px;padding:12px 14px;}
.settings-account-value-action{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;max-width:74%;}
.settings-account-value-action strong{max-width:100%;}
.settings-copy-btn{border:1px solid rgba(140,221,248,.32);border-radius:8px;background:rgba(140,221,248,.09);color:var(--offwhite);padding:5px 8px;font:700 10px/1 inherit;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease;}
.settings-copy-btn:hover:not(:disabled),.settings-copy-btn:focus-visible{border-color:rgba(140,221,248,.7);background:rgba(140,221,248,.18);}
.settings-copy-btn:active:not(:disabled){transform:scale(.97);}
.settings-copy-btn:disabled{cursor:not-allowed;opacity:.45;}
.settings-copy-btn[data-state="copied"]{border-color:rgba(95,212,155,.55);background:rgba(95,212,155,.14);color:#8de4b8;}
.settings-account-field + .settings-account-field{border-top:1px solid rgba(140,221,248,.13);}
.settings-account-field span{color:var(--offwhite-dim);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.settings-account-field strong{max-width:68%;color:var(--offwhite);font-size:13px;font-weight:600;line-height:1.35;text-align:right;overflow-wrap:anywhere;}
.settings-sync-status{display:flex;align-items:center;gap:11px;padding:13px;border:1px solid rgba(119,230,165,.3);border-radius:15px;background:rgba(28,127,86,.12);}
.settings-sync-dot{width:11px;height:11px;border-radius:50%;background:#7de3a4;box-shadow:0 0 0 5px rgba(125,227,164,.1);}
.settings-sync-status div{display:grid;gap:3px;}
.settings-sync-status strong{color:#b7f0c9;font-size:13px;}
.settings-sync-status small{color:var(--offwhite-dim);font-size:11px;}
.settings-offline-callout{display:grid;gap:4px;padding:12px 13px;border:1px solid rgba(140,221,248,.2);border-radius:13px;background:rgba(16,83,119,.14);}
.settings-offline-callout strong{color:var(--brass-light);font-size:12px;}
.settings-offline-callout span{color:var(--offwhite-dim);font-size:11px;line-height:1.45;}
@keyframes settingsPanelIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
:root[data-theme="light"] .settings-category-card,:root[data-theme="light"] .settings-account-card,:root[data-theme="light"] .settings-account-status{background:linear-gradient(135deg,rgba(228,246,255,.96),rgba(244,250,253,.96));border-color:rgba(27,118,166,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 12px 30px rgba(21,76,105,.08);}
:root[data-theme="light"] .settings-account-status-copy>span,:root[data-theme="light"] .settings-account-status-copy small{color:rgba(8,48,71,.68);}
:root[data-theme="light"] .settings-account-status-copy strong,:root[data-theme="light"] .settings-copy-btn{color:#083047;}
:root[data-theme="light"] .settings-copy-btn{border-color:rgba(27,118,166,.3);background:rgba(27,118,166,.07);}
:root[data-theme="light"] .settings-category-copy strong,:root[data-theme="light"] .settings-panel-heading h2,:root[data-theme="light"] .settings-action-row strong,:root[data-theme="light"] .settings-info-row strong,:root[data-theme="light"] .settings-toggle-row strong,:root[data-theme="light"] .settings-select-row strong,:root[data-theme="light"] .settings-account-identity strong,:root[data-theme="light"] .settings-account-field strong{color:#083047;}
:root[data-theme="light"] .settings-category-copy small,:root[data-theme="light"] .settings-panel-heading p,:root[data-theme="light"] .settings-action-row small,:root[data-theme="light"] .settings-info-row small,:root[data-theme="light"] .settings-toggle-row small,:root[data-theme="light"] .settings-select-row small,:root[data-theme="light"] .settings-account-field span,:root[data-theme="light"] .settings-inline-status{color:rgba(8,48,71,.68);}
:root[data-theme="light"] .settings-action-row,:root[data-theme="light"] .settings-info-row,:root[data-theme="light"] .settings-toggle-row,:root[data-theme="light"] .settings-select-row{background:rgba(248,252,254,.88);border-color:rgba(27,118,166,.19);}
:root[data-theme="light"] .settings-select-row select,:root[data-theme="light"] .settings-password-form input{background:#fff;color:#083047;}
:root[data-theme="light"] .settings-password-overlay{background:rgba(222,239,247,.72);}
:root[data-theme="light"] .settings-password-description,:root[data-theme="light"] .settings-password-strength-heading,:root[data-theme="light"] .settings-password-requirements li,:root[data-theme="light"] .settings-password-status{color:rgba(8,48,71,.7);}
:root[data-theme="light"] .settings-password-strength{background:rgba(238,248,252,.92);border-color:rgba(27,118,166,.16);}
:root[data-theme="light"] .settings-password-strength-heading strong{color:#083047;}
:root[data-theme="light"] .settings-password-form input::placeholder{color:rgba(8,48,71,.52);}
:root[data-theme="light"] .settings-password-requirements li.is-met{color:#176e42;}
:root[data-theme="light"] .settings-password-status[data-state="error"]{color:#a53f32;}
:root[data-theme="light"] .settings-password-status[data-state="success"]{color:#176e42;}
:root[data-theme="light"] .settings-sync-status{background:rgba(61,164,100,.09);}
:root[data-theme="light"] .settings-sync-status strong{color:#176e42;}
@media (max-width:520px){.settings-category-card{min-height:68px}.settings-category-icon{flex-basis:39px;width:39px;height:39px}.settings-select-row{align-items:flex-start}.settings-select-row select{min-width:116px;max-width:43%;margin-top:1px}.settings-action-row,.settings-info-row,.settings-toggle-row,.settings-select-row{min-height:61px;padding:11px}.settings-action-row strong,.settings-info-row strong,.settings-toggle-row strong,.settings-select-row strong{font-size:12.5px}.settings-account-field{min-height:54px;padding:11px 12px}.settings-account-field strong{max-width:64%;font-size:12px}.settings-account-value-action{max-width:72%;gap:6px}.settings-copy-btn{padding:5px 7px;font-size:9px;}.settings-account-status{padding:12px}.settings-password-modal{max-height:calc(100dvh - 24px);}.settings-password-form{padding:16px 15px 15px;gap:13px;}.settings-password-header{padding:16px 15px 14px;}.settings-password-requirements{gap:7px 8px;}.settings-password-actions{padding-top:12px;}.settings-password-actions button{min-width:0;flex:1;}}
@media (prefers-reduced-motion:reduce){.settings-category-card,.settings-action-row,.settings-panel,.settings-switch-ui,.settings-switch-ui::after{animation:none!important;transition:none!important;}}
:root[data-settings-font="small"] .settings-detail-body{font-size:14px;}
:root[data-settings-font="large"] .settings-detail-body{font-size:17px;}
:root[data-settings-font="small"] body{zoom:.9;}
:root[data-settings-font="large"] body{zoom:1.1;}
:root[data-reduce-motion="true"] *,:root[data-reduce-motion="true"] *::before,:root[data-reduce-motion="true"] *::after{animation:none!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important;transition-duration:0s!important;}
.settings-category-hub[hidden]{display:none!important;}

/* ---------- Final navigation, profile-action, and dark-mode corrections ---------- */
.menu-btn{
  width:40px;height:40px;display:grid;place-items:center;overflow:visible;
  border:0;border-radius:0;background:transparent;color:var(--offwhite);padding:0;
}
.menu-btn:hover,.menu-btn:focus-visible{background:transparent;box-shadow:none;}
.menu-hamburger-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* Keep the fixed Profile header above all cards while the list scrolls. */
#profile-view > .detail-header{z-index:40!important;isolation:isolate;background:var(--header-solid)!important;}
#profile-view > .detail-header .detail-header-title{position:absolute;left:50%;transform:translateX(-50%);max-width:calc(100% - 152px);text-align:center;}
.settings-detail-view > .detail-header .detail-header-title{position:absolute;left:50%;transform:translateX(-50%);max-width:calc(100% - 152px);text-align:center;}
#profile-view > .detail-body{position:relative;z-index:0;}
#profile-view .profile-doc-card,#profile-view .profile-ss-card{position:relative;z-index:0;}
.profile-detail-head{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:start!important;gap:10px!important;padding-right:0!important;}
.profile-detail-actions{display:flex!important;align-items:center;justify-content:flex-end;gap:6px;flex:0 0 auto;position:relative!important;z-index:0!important;}
.profile-detail-actions .detail-action-btn{position:relative!important;z-index:0!important;transform:none!important;margin:0!important;}
:root[data-theme="dark"] .home-welcome-name{color:#f7fcff!important;text-shadow:0 1px 1px rgba(0,0,0,.28);}
:root[data-theme="dark"] .home-welcome-copy>span{color:#d4e9f2!important;}

/* iPhone full-screen Profile view: reserve the system safe area inside the
   opaque Profile header so content never begins beneath the status bar. */
#profile-view{
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}
#profile-view .detail-header{
  position:sticky;
  top:0;
  z-index:8;
  flex:0 0 auto;
  min-height:calc(58px + env(safe-area-inset-top, 0px));
  padding:calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  box-sizing:border-box;
  background:var(--header-solid);
  border-bottom:1px solid var(--navy-line);
  box-shadow:0 6px 18px rgba(2,13,25,.10);
}
#profile-view .detail-body{
  width:min(100%, 720px);
  margin:0 auto;
  padding:0 16px calc(116px + env(safe-area-inset-bottom, 0px));
}
#profile-view .profile-view-header{
  gap:6px;
  padding:18px 0 20px;
  margin-bottom:14px;
}
#profile-view .profile-photo-card{
  width:120px;
  min-height:120px;
  padding:10px;
}
#profile-view .profile-view-avatar{
  width:98px;
  height:98px;
}
#profile-view .profile-view-avatar img{
  display:block;
  object-position:center 30%;
}
@media(max-width:380px){
  #profile-view .detail-header{padding-inline:12px;}
  #profile-view .detail-body{padding-inline:14px;}
}

/* Safari can expose the root canvas around an installed PWA. Match that
   canvas to the active design theme so neither light nor dark mode shows a
   disconnected blank band outside the application surface. */
html,
body{
  background-color:var(--bg-base);
  overflow-x:hidden;
  overscroll-behavior-x:none;
  max-width:100%;
}
:root[data-theme="dark"],
:root[data-theme="dark"] body{
  background-color:#050b14;
}
#sc-auth-gate,
#sc-approval-gate,
#sc-profile-gate{
  min-height:100dvh;
  min-height:-webkit-fill-available;
  padding-top:max(24px, calc(16px + env(safe-area-inset-top, 0px)));
  padding-bottom:max(24px, calc(16px + env(safe-area-inset-bottom, 0px)));
  background:
    radial-gradient(ellipse 920px 620px at 6% -10%, var(--blob1), transparent 60%),
    radial-gradient(ellipse 720px 520px at 104% 4%, var(--blob2), transparent 58%),
    radial-gradient(ellipse 820px 720px at 12% 108%, var(--blob3), transparent 60%),
    radial-gradient(ellipse 640px 520px at 92% 96%, var(--blob4), transparent 58%),
    #050b14;
  background-attachment:fixed;
}
@supports (-webkit-touch-callout:none){
  html{background:var(--bg-base);}
  html[data-theme="dark"]{background:#050b14;}
  body{min-height:-webkit-fill-available;}
}

/* Installed iPhone PWA: Safari's browser chrome is absent, so reserve the
   physical status-bar inset inside the shared header before the page begins. */
@media all and (display-mode:standalone){
  /* One source of truth for every screen that begins below the iPhone status
     bar. The 36px floor protects installed PWAs if a browser reports a zero
     inset during launch; modern iPhones use their larger physical inset. */
  :root{
    --sc-ios-top-inset:max(36px, env(safe-area-inset-top, 0px));
    --sc-ios-bottom-inset:env(safe-area-inset-bottom, 0px);
    /* iOS can report its visual viewport above the home-indicator region.
       Extend the paint-only layer into that physical region without adding
       scroll height or moving the dock. */
    --sc-ios-bottom-paint-extension:max(56px, env(safe-area-inset-bottom, 0px));
    --sc-ios-edge-bg:#EEF4F8;
  }
  :root[data-theme="dark"]{
    --sc-ios-edge-bg:#050b14;
  }
  .app-background-fixed-layer{
    bottom:calc(0px - var(--sc-ios-bottom-paint-extension));
    min-height:calc(100dvh + var(--sc-ios-bottom-paint-extension));
    background-color:var(--sc-ios-edge-bg);
  }
  /* Paint one continuous surface to the physical screen edges. Safe insets
     are applied by headers and the dock below, never by an outer wrapper. */
  html,
  body{
    width:100%;
    /* Root is content-driven: only overlays receive a fixed dynamic viewport.
       This prevents a closing keyboard from leaving the underlying page stuck
       at its reduced visual-viewport height. */
    min-height:100dvh;
    height:auto;
    background-color:var(--sc-ios-edge-bg);
  }
  header#app-header{
    min-height:calc(64px + var(--sc-ios-top-inset));
    padding-top:calc(10px + var(--sc-ios-top-inset));
    padding-bottom:10px;
  }
  /* The Home controls are absolutely positioned and must use the visible
     control row, not the full safe-area-inclusive header midpoint. */
  header#app-header .menu-btn,
  header#app-header #page-title,
  header#app-header .header-utility-dock{
    top:calc(32px + var(--sc-ios-top-inset));
  }
  header#app-header .header-search-panel{
    top:calc(10px + var(--sc-ios-top-inset));
    bottom:10px;
  }
  /* All fixed detail screens reserve their top area inside the opaque header,
     so the heading and Back action remain visible below the status bar. */
  .detail-view{
    min-height:100dvh;
    height:100dvh;
  }
  .detail-view > .detail-header,
  #profile-view > .detail-header{
    min-height:calc(58px + var(--sc-ios-top-inset));
    padding:calc(10px + var(--sc-ios-top-inset)) 16px 10px;
    flex:0 0 auto;
    z-index:40;
  }
  /* Chat uses the same physical top inset as every other full-screen view;
     this keeps its header clear of the iPhone status bar while the keyboard
     resizes only the message/input region. */
  .ai-chat-header{
    padding-top:calc(16px + var(--sc-ios-top-inset));
    min-height:calc(72px + var(--sc-ios-top-inset));
  }
  /* The menu has no separate header element. Its own full-height container
     holds the safe inset so the Profile identity never starts beneath it. */
  .side-menu-overlay{
    min-height:100dvh;
    height:100dvh;
  }
  .side-menu{
    top:0;
    bottom:auto;
    min-height:100dvh;
    height:100dvh;
    max-height:100dvh;
    padding-top:var(--sc-ios-top-inset);
    overflow:hidden;
    /* Draw a single opaque drawer from the physical top edge. */
    background:var(--header-solid);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .side-menu-profile{
    flex:0 0 auto;
  }
  .side-menu-list{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
  }
  .side-menu-footer{
    flex:0 0 auto;
  }
  /* Keep the visual dock inside the home-indicator area without creating a
     second footer surface below it. The page/root background remains visible
     continuously behind the inset. */
  .bottom-dock-cluster{
    bottom:var(--sc-ios-bottom-inset);
  }
  #ai-fab-btn{
    bottom:calc(72px + var(--sc-ios-bottom-inset));
  }
}


/* ---------- iPhone PWA final opaque surfaces ---------- */
/* Keep every physical top edge deliberate. The light surface is blue-white,
   not a translucent browser-like white layer; dark mode is an opaque navy. */
:root{
  --sc-top-surface:var(--bg-base);
  --sc-assistant-surface:#102033;
}
:root[data-theme="light"]{
  --sc-top-surface:var(--bg-base);
  --sc-assistant-surface:#EAF3F7;
}
:root[data-theme="dark"]{
  --sc-top-surface:var(--bg-base);
  --sc-assistant-surface:#102033;
}

/* All persistent app headers paint the exact same fixed-attachment page
   artwork as the body, instead of a flat colour, so there is never a
   visible seam between the header/status-bar area and the page below it. */
header#app-header,
header#app-header.is-search-open,
.detail-view > .detail-header,
#profile-view > .detail-header,
#profile-view .detail-header{
  background:var(--sc-top-surface)!important;
  background-attachment:fixed!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
:root[data-theme="light"] header#app-header,
:root[data-theme="light"] header#app-header.is-search-open{
  border-bottom-color:rgba(31,73,97,.16)!important;
  box-shadow:0 2px 10px rgba(31,73,97,.07)!important;
}
:root[data-theme="dark"] header#app-header,
:root[data-theme="dark"] header#app-header.is-search-open{
  background:var(--sc-top-surface)!important;
  background-attachment:fixed!important;
}
/* The Post screens scroll their header's own ancestor (not a separate body
   element), so a fixed-attachment gradient header here is prone to iOS
   Safari compositing glitches that flash the previous frame through during
   scroll. A plain solid colour matching the panel's own background avoids
   that entirely and keeps it genuinely opaque. */
#sc-post-panel > .detail-header,
#sc-post-compose-panel > .detail-header{
  background:var(--navy-deep)!important;
  background-attachment:scroll!important;
}

/* Ask Baby is an actual opaque application surface, not a decorative glass
   layer. It is placed above every page, drawer, dock and floating control. */
.ai-chat-view{
  z-index:1600!important;
  background:var(--sc-assistant-surface)!important;
  background-image:none!important;
  opacity:1!important;
  isolation:isolate;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.ai-chat-header,
.ai-chat-inputbar{
  background:var(--sc-assistant-surface)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
/* Avoid iOS compositing surprises: once the assistant is open, all background
   app siblings are made non-visible but retain their layout for a clean close. */
body.ai-chat-open > :not(#ai-chat-view):not(#confirm-overlay):not(.app-background-fixed-layer){
  visibility:hidden!important;
  pointer-events:none!important;
}

@media all and (display-mode:standalone){
  :root{
    --sc-ios-edge-bg:var(--sc-top-surface);
  }
  .app-background-fixed-layer{
    background-color:var(--sc-top-surface)!important;
  }
  /* This paints the physical status-bar inset even during an iOS viewport
     transition. App headers sit above it and share the exact same colour. */
  body::before{
    content:'';
    position:fixed;
    z-index:30;
    inset:0 0 auto;
    height:var(--sc-ios-top-inset);
    background:var(--sc-top-surface);
    pointer-events:none;
  }
  .ai-chat-view{
    /* min-height:100dvh used to win over the keyboard-aware height set on the
       element, so opening the keyboard left the view taller than the visible
       viewport and the browser scrolled its header off the top of the screen.
       Both bounds now follow the same measured height. */
    min-height:var(--sc-ai-chat-viewport-height, 100dvh);
    max-height:var(--sc-ai-chat-viewport-height, 100dvh);
    background:var(--sc-assistant-surface)!important;
  }
  .ai-chat-header{
    background:var(--sc-assistant-surface)!important;
  }
}


/* ---------- Ask Baby conversation experience ---------- */
.ai-chat-usage{
  flex:0 0 auto;
  display:grid;
  gap:7px;
  padding:10px 16px 11px;
  color:var(--offwhite);
  background:var(--sc-assistant-surface, var(--navy-deep));
  border-bottom:1px solid var(--navy-line);
}
.ai-chat-usage-topline,.ai-chat-usage-details{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  font:600 10.5px/1.2 'Inter',sans-serif;
}
.ai-chat-usage-title{font-weight:800;letter-spacing:.06em;text-transform:uppercase;}
.ai-chat-usage-access{color:var(--brass-light);font-weight:750;text-align:right;white-space:nowrap;}
.ai-chat-usage-meter{height:6px;overflow:hidden;border-radius:999px;background:var(--well-bg);box-shadow:inset 0 1px 2px rgba(0,0,0,.18);}
.ai-chat-usage-meter-fill{display:block;width:0%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#26a9e8,#8cddf8);transition:width .32s cubic-bezier(.23,1,.32,1);}
.ai-chat-usage-meter.is-unlimited .ai-chat-usage-meter-fill{background:linear-gradient(90deg,#42c89c,#8fe1bf);}
.ai-chat-usage-details{color:var(--offwhite-dim);font-size:10px;}
.ai-chat-usage-details span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.ai-message-row{display:flex;align-items:flex-end;gap:7px;max-width:88%;}
.ai-message-row-assistant{align-self:flex-start;}
.ai-message-baby-avatar{width:24px;height:24px;flex:0 0 24px;object-fit:contain;border:1px solid var(--navy-line);border-radius:50%;background:var(--popup-field-surface);}
.ai-chat-profile{border-radius:12px;}
.ai-message-row .ai-msg.assistant{align-self:auto;max-width:calc(100% - 31px);margin:0;}
.ai-msg-text{display:block;}
.ai-msg-text p{margin:0 0 8px;}
.ai-msg-text p:last-child{margin-bottom:0;}
.ai-msg-text h3{margin:0 0 7px;color:inherit;font:700 14px/1.35 'Spectral',serif;}
.ai-msg-text ul,.ai-msg-text ol{margin:2px 0 8px;padding-left:18px;}
.ai-msg-text li{margin:3px 0;}
.ai-msg-text strong{font-weight:750;}
.ai-table-wrap{width:100%;overflow-x:auto;overscroll-behavior-x:contain;margin:2px 0 8px;border:1px solid rgba(140,221,248,.24);border-radius:10px;background:rgba(4,24,40,.38);}
.ai-table-wrap table{width:max-content;min-width:100%;border-collapse:collapse;font:600 11.5px/1.42 'Inter',sans-serif;}
.ai-table-wrap th,.ai-table-wrap td{min-width:120px;padding:8px 9px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(140,221,248,.16);overflow-wrap:anywhere;}
.ai-table-wrap .ai-table-cell-text{display:-webkit-box;max-width:220px;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.42;white-space:normal;}
.ai-table-wrap th{color:var(--brass-light);font-size:10px;letter-spacing:.055em;text-transform:uppercase;background:rgba(10,45,68,.6);}
.ai-table-wrap th:first-child,.ai-table-wrap td:first-child{width:34%;white-space:normal;}
.ai-table-wrap th:last-child,.ai-table-wrap td:last-child{width:24%;}
.ai-table-wrap .ai-item-image{display:block;width:72px;height:52px;object-fit:contain;border-radius:7px;background:#fff;border:1px solid rgba(140,221,248,.22);}
.ai-table-wrap tr:last-child td{border-bottom:0;}
:root[data-theme="light"] .ai-table-wrap{border-color:rgba(31,73,97,.18);background:#f7fbfd;}
:root[data-theme="light"] .ai-table-wrap th{background:#e8f4f9;color:#175777;}
:root[data-theme="light"] .ai-table-wrap th,:root[data-theme="light"] .ai-table-wrap td{border-bottom-color:rgba(31,73,97,.13);}
.ai-msg-presence{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:8px 11px;color:var(--offwhite-dim);font-size:11.5px;font-style:normal;}
.ai-presence-dots{display:inline-flex;align-items:center;gap:3px;height:12px;}
.ai-presence-dots i{display:block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.32;animation:ai-presence-pulse 1.05s ease-in-out infinite;}
.ai-presence-dots i:nth-child(2){animation-delay:.15s;}
.ai-presence-dots i:nth-child(3){animation-delay:.30s;}
@keyframes ai-presence-pulse{0%,65%,100%{transform:translateY(0);opacity:.28;}30%{transform:translateY(-3px);opacity:1;}}
:root[data-theme="light"] .ai-chat-usage{border-bottom-color:rgba(31,73,97,.14);}
:root[data-theme="light"] .ai-chat-usage-meter{background:rgba(24,78,103,.12);}
:root[data-theme="light"] .ai-message-baby-avatar{background:#fff;border-color:rgba(31,73,97,.18);}
:root[data-theme="light"] .ai-msg.assistant{background:transparent;border-color:transparent;box-shadow:none;}
@media(max-width:390px){
  .ai-chat-usage{padding-inline:14px;}
  .ai-chat-usage-details{font-size:9.5px;}
  .ai-message-row{max-width:92%;}
}
@media(prefers-reduced-motion:reduce){
  .ai-chat-usage-meter-fill,.ai-presence-dots i{transition:none;animation:none;}
}


/* ---------- Owner member-management table ---------- */
#sc-admin-panel .sc-admin-list{margin-top:14px;}
.sc-admin-table-scroll{overflow-x:auto;overscroll-behavior-x:contain;border:1px solid rgba(140,221,248,.2);border-radius:15px;background:rgba(5,25,41,.76);}
.sc-admin-table{width:100%;border-collapse:separate;border-spacing:0 7px;table-layout:fixed;color:#f6fbff;font:12px/1.35 'Inter',sans-serif;}
.sc-admin-table caption{padding:11px 12px 4px;text-align:left;color:#8CDDF8;font-weight:800;letter-spacing:.07em;text-transform:uppercase;font-size:10px;}
.sc-admin-table th{padding:7px 10px 4px;color:#a8c8d8;text-align:left;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;}
.sc-admin-table th:nth-child(1){width:43%;}.sc-admin-table th:nth-child(2){width:24%;}.sc-admin-table th:nth-child(3){width:33%;}
.sc-admin-member-row{background:#071b2c;}
.sc-admin-member-row td{padding:11px 10px;border-top:1px solid rgba(140,221,248,.16);border-bottom:1px solid rgba(140,221,248,.16);vertical-align:middle;overflow-wrap:anywhere;}
.sc-admin-member-row td:first-child{border-left:1px solid rgba(140,221,248,.16);border-radius:11px 0 0 11px;}
.sc-admin-member-row td:last-child{border-right:1px solid rgba(140,221,248,.16);border-radius:0 11px 11px 0;}
.sc-admin-member-cell,.sc-admin-approval-cell,.sc-admin-ai-cell{display:table-cell;}
.sc-admin-user-name{display:block;color:#fff;font:700 13px/1.3 'Inter',sans-serif;}
.sc-admin-user-meta{display:block;margin-top:4px;color:#aac3d2;font-size:10.5px;line-height:1.45;}
.sc-admin-approval-cell .sc-member-status{margin-bottom:7px;}
.sc-admin-status-select{width:100%;min-height:34px;padding:0 27px 0 9px;border:1px solid rgba(140,221,248,.34);border-radius:9px;background:#0b2a42;color:#f6fbff;font:700 11px 'Inter',sans-serif;cursor:pointer;}
.sc-admin-status-select:focus-visible,.sc-admin-ai-switch input:focus-visible + .sc-admin-switch-track{outline:2px solid #8CDDF8;outline-offset:2px;}
.sc-admin-status-select:disabled,.sc-admin-ai-switch input:disabled + .sc-admin-switch-track{opacity:.56;cursor:wait;}
.sc-admin-ai-switch{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:7px;cursor:pointer;}
.sc-admin-ai-switch input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none;}
.sc-admin-switch-track{position:relative;display:block;width:34px;height:20px;border:1px solid rgba(255,185,165,.62);border-radius:999px;background:rgba(132,54,37,.52);transition:background .18s var(--ease-out,cubic-bezier(.23,1,.32,1)),border-color .18s var(--ease-out,cubic-bezier(.23,1,.32,1));}
.sc-admin-switch-thumb{position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.36);transition:transform .18s var(--ease-out,cubic-bezier(.23,1,.32,1));}
.sc-admin-ai-switch input:checked + .sc-admin-switch-track{border-color:rgba(119,230,165,.75);background:rgba(34,137,85,.72);}
.sc-admin-ai-switch input:checked + .sc-admin-switch-track .sc-admin-switch-thumb{transform:translateX(14px);}
.sc-admin-ai-copy{display:grid;gap:2px;min-width:0;color:#cfeaf5;font-size:10px;line-height:1.2;}
.sc-admin-ai-copy strong{color:#f6fbff;font-size:11px;}.sc-admin-ai-copy small{color:#aac3d2;font-size:9.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sc-admin-ai-awaiting{display:block;color:#aac3d2;font-size:10px;line-height:1.35;}
:root[data-theme="light"] .sc-admin-table-scroll{border-color:rgba(31,73,97,.18);background:rgba(255,255,255,.78);}
:root[data-theme="light"] .sc-admin-member-row{background:#fff;}
:root[data-theme="light"] .sc-admin-member-row td{border-color:rgba(31,73,97,.15);}
:root[data-theme="light"] .sc-admin-user-name{color:#14354a;}
:root[data-theme="light"] .sc-admin-user-meta,:root[data-theme="light"] .sc-admin-ai-copy,:root[data-theme="light"] .sc-admin-ai-awaiting{color:#587080;}
:root[data-theme="light"] .sc-admin-ai-copy strong{color:#173b52;}
:root[data-theme="light"] .sc-admin-status-select{border-color:rgba(31,73,97,.24);background:#f5fbfe;color:#173b52;}
@media(max-width:460px){
  .sc-admin-table th{padding-inline:7px;font-size:8.5px;}.sc-admin-member-row td{padding:9px 7px;}
  .sc-admin-table th:nth-child(1){width:42%;}.sc-admin-table th:nth-child(2){width:25%;}.sc-admin-table th:nth-child(3){width:33%;}
  .sc-admin-user-name{font-size:11.5px;}.sc-admin-user-meta{font-size:9px;word-break:break-word;}
  .sc-member-status{min-height:22px;padding-inline:6px;font-size:8.5px;}.sc-admin-status-select{min-height:31px;padding-left:6px;font-size:9.5px;}
  .sc-admin-ai-switch{grid-template-columns:31px minmax(0,1fr);gap:4px;}.sc-admin-switch-track{width:29px;height:18px;}.sc-admin-switch-thumb{top:2px;left:2px;width:12px;height:12px;}.sc-admin-ai-switch input:checked + .sc-admin-switch-track .sc-admin-switch-thumb{transform:translateX(11px);}
  .sc-admin-ai-copy strong{font-size:9.5px;}.sc-admin-ai-copy small{font-size:8.5px;}.sc-admin-ai-awaiting{font-size:8.5px;}
}
@media(prefers-reduced-motion:reduce){.sc-admin-switch-track,.sc-admin-switch-thumb{transition:none;}}


/* ---------- Detail dialogs: stable right-side action row ---------- */
#collection-doc-detail-overlay .collection-doc-detail-modal .modal-header,
#collection-voyage-detail-overlay .collection-voyage-detail-modal .modal-header{
  display:block;
  min-width:0;
  overflow:hidden;
}
#collection-doc-detail-overlay .collection-doc-detail-modal .collection-doc-title-row,
#collection-voyage-detail-overlay .collection-voyage-detail-modal .collection-doc-title-row{
  min-width:0;
  max-width:100%;
  flex-wrap:nowrap;
}
#collection-doc-detail-overlay .collection-doc-detail-modal .collection-doc-title-row h2,
#collection-voyage-detail-overlay .collection-voyage-detail-modal .collection-doc-title-row h2{
  display:block;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  -webkit-line-clamp:unset;
}
#collection-doc-detail-overlay .collection-doc-detail-modal .profile-detail-actions,
#collection-voyage-detail-overlay .collection-voyage-detail-modal .profile-detail-actions{
  display:flex!important;
  flex:0 0 auto!important;
  flex-flow:row nowrap!important;
  align-items:center;
  justify-content:flex-end;
  gap:2px;
  width:auto!important;
  min-width:0!important;
  white-space:nowrap;
}
#collection-doc-detail-overlay .collection-doc-detail-modal .profile-detail-actions .detail-action-btn,
#collection-voyage-detail-overlay .collection-voyage-detail-modal .profile-detail-actions .detail-action-btn{
  display:inline-flex!important;
  flex:0 0 29px!important;
  width:29px!important;
  min-width:29px!important;
  height:29px!important;
  min-height:29px!important;
  margin:0!important;
  padding:6px!important;
}
#collection-doc-detail-overlay .collection-doc-detail-modal .modal-header{min-height:62px;padding:16px 142px 16px 18px;}
#collection-doc-detail-overlay .collection-doc-detail-modal .modal-header .profile-detail-actions{right:48px;}
#collection-doc-detail-overlay .collection-doc-detail-modal .modal-close{flex:0 0 29px;width:29px;height:29px;right:13px;}
#collection-voyage-detail-overlay .collection-voyage-detail-modal .modal-header{min-height:62px;padding:16px 142px 16px 18px;}
#collection-voyage-detail-overlay .collection-voyage-detail-modal .modal-header .profile-detail-actions{right:12px;}
@media(max-width:390px){
  #collection-doc-detail-overlay .collection-doc-detail-modal .modal-header{padding-left:14px;padding-right:132px;}
  #collection-voyage-detail-overlay .collection-voyage-detail-modal .modal-header{padding-left:14px;padding-right:132px;}
  #collection-doc-detail-overlay .collection-doc-detail-modal .profile-detail-actions .detail-action-btn,
  #collection-voyage-detail-overlay .collection-voyage-detail-modal .profile-detail-actions .detail-action-btn{flex-basis:27px!important;width:27px!important;min-width:27px!important;height:27px!important;min-height:27px!important;padding:5px!important;}
  #collection-doc-detail-overlay .collection-doc-detail-modal .modal-header .profile-detail-actions{right:45px;}
}


/* ---------- Admin Approval: use the same solid surface as the side menu ---------- */
#sc-admin-panel{
  background:var(--header-solid)!important;
  color:var(--offwhite);
}
#sc-admin-panel .sc-admin-card{
  background:var(--header-solid)!important;
  color:var(--offwhite);
}
#sc-admin-panel .sc-auth-brand{border-color:var(--navy-line);}
#sc-admin-panel .sc-auth-brand p,#sc-admin-panel .sc-admin-section-title{color:var(--brass-light);}
#sc-admin-panel .sc-auth-brand small,#sc-admin-panel .sc-auth-intro{color:var(--offwhite-dim);}
#sc-admin-panel .sc-auth-card h2{color:var(--offwhite);}
#sc-admin-panel .sc-profile-note{
  border-color:var(--navy-line);
  background:var(--well-bg);
  color:var(--offwhite-dim);
}
#sc-admin-panel .sc-admin-table-scroll{
  border-color:var(--navy-line);
  background:var(--well-bg);
}
#sc-admin-panel .sc-admin-table{color:var(--offwhite);}
#sc-admin-panel .sc-admin-table th{color:var(--offwhite-dim);}
#sc-admin-panel .sc-admin-member-row{background:var(--well-bg);}
#sc-admin-panel .sc-admin-member-row td{border-color:var(--navy-line);}
#sc-admin-panel .sc-admin-user-name,#sc-admin-panel .sc-admin-ai-copy strong{color:var(--offwhite);}
#sc-admin-panel .sc-admin-user-meta,#sc-admin-panel .sc-admin-ai-copy,#sc-admin-panel .sc-admin-ai-copy small,#sc-admin-panel .sc-admin-ai-awaiting{color:var(--offwhite-dim);}
#sc-admin-panel .sc-admin-status-select{border-color:var(--navy-line);background:var(--popup-field-surface);color:var(--offwhite);}
#sc-admin-panel .sc-admin-alert{background:var(--well-bg);border-color:var(--navy-line);}
#sc-admin-panel .sc-admin-alert strong{color:var(--offwhite);}
#sc-admin-panel .sc-admin-alert p{color:var(--offwhite-dim);}
#sc-admin-panel .sc-admin-alert button{border-color:var(--navy-line);color:var(--brass-light);}
#sc-admin-panel .sc-admin-close{border-color:var(--navy-line);background:var(--well-bg);color:var(--offwhite);}
:root[data-theme="light"] #sc-admin-panel .sc-admin-table-scroll,
:root[data-theme="light"] #sc-admin-panel .sc-admin-member-row{background:var(--well-bg);}
:root[data-theme="light"] #sc-admin-panel .sc-admin-member-row td{border-color:var(--navy-line);}
:root[data-theme="light"] #sc-admin-panel .sc-admin-user-name,
:root[data-theme="light"] #sc-admin-panel .sc-admin-ai-copy strong{color:var(--offwhite);}
:root[data-theme="light"] #sc-admin-panel .sc-admin-user-meta,
:root[data-theme="light"] #sc-admin-panel .sc-admin-ai-copy,
:root[data-theme="light"] #sc-admin-panel .sc-admin-ai-copy small,
:root[data-theme="light"] #sc-admin-panel .sc-admin-ai-awaiting{color:var(--offwhite-dim);}


/* Certificate and sea-service tools share one explicit right-edge header toolbar. */
#collection-doc-detail-overlay .collection-doc-detail-modal .modal-header,
#collection-voyage-detail-overlay .collection-voyage-detail-modal .modal-header{padding-right:142px;}
#collection-doc-detail-overlay .collection-doc-detail-modal .modal-header .profile-detail-actions,
#collection-voyage-detail-overlay .collection-voyage-detail-modal .modal-header .profile-detail-actions{
  top:50%;
  right:12px!important;
  transform:translateY(-50%);
}
#collection-doc-detail-overlay .collection-doc-detail-modal .modal-header .profile-detail-actions{right:12px!important;}
#collection-doc-detail-overlay .collection-doc-detail-modal .modal-close{display:none!important;}
@media(max-width:390px){
  #collection-doc-detail-overlay .collection-doc-detail-modal .modal-header,
  #collection-voyage-detail-overlay .collection-voyage-detail-modal .modal-header{padding-right:132px;}
  #collection-doc-detail-overlay .collection-doc-detail-modal .modal-header .profile-detail-actions,
  #collection-voyage-detail-overlay .collection-voyage-detail-modal .modal-header .profile-detail-actions{right:10px!important;}
}

/* Final anchor: late generic profile rules must not return these popup tools to normal flow. */
#collection-doc-detail-overlay .collection-doc-detail-modal .modal-header .profile-detail-actions,
#collection-voyage-detail-overlay .collection-voyage-detail-modal .modal-header .profile-detail-actions{
  position:absolute!important;
  left:auto!important;
  right:12px!important;
}
@media(max-width:390px){
  #collection-doc-detail-overlay .collection-doc-detail-modal .modal-header .profile-detail-actions,
  #collection-voyage-detail-overlay .collection-voyage-detail-modal .modal-header .profile-detail-actions{right:10px!important;}
}


/* ---------- Home Life at Sea: compact one-tap basis badge ---------- */
.home-life-basis-trigger.home-life-basis-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:auto;
  min-width:0;
  min-height:30px;
  height:30px;
  padding:0 10px;
  border:1px solid rgba(25,120,179,.22);
  color:#176c9f;
  background:#e2f5ff;
  font:800 10.5px 'Inter',sans-serif;
  letter-spacing:.015em;
  line-height:1;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.home-life-basis-trigger.home-life-basis-badge svg{
  flex:0 0 16px;
  width:16px;
  height:16px;
  animation:home-sailing-boat 4.2s ease-in-out infinite;
}
.home-life-basis-trigger.home-life-basis-badge .home-boat-wave{animation:home-boat-wave 2.2s ease-in-out infinite;}
.home-life-basis-trigger.home-life-basis-badge .home-boat-wave-two{animation-delay:-1.1s;}
.home-life-basis-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.home-life-basis-trigger.home-life-basis-badge:active{transform:scale(.97);}
:root[data-theme="dark"] .home-life-basis-trigger.home-life-basis-badge{
  border-color:rgba(143,221,255,.24);
  color:#9be3ff;
  background:#1b4059;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
@media(max-width:390px){
  .home-life-basis-trigger.home-life-basis-badge{gap:5px;padding:0 8px;font-size:10px;}
  .home-life-basis-trigger.home-life-basis-badge svg{flex-basis:15px;width:15px;height:15px;}
}


/* ---------- Home navigation and Active Ship certificate summary ---------- */
.home-career-history-trigger{
  display:block;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  color:inherit;
  background:transparent;
  text-align:left;
  font:inherit;
}
.home-career-history-trigger .home-eyebrow,
.home-career-history-trigger h2{margin-left:0;margin-right:0;}
.home-career-history-trigger:active{transform:scale(.985);transform-origin:left center;}
.home-career-history-trigger:focus-visible,
.home-summary-action:focus-visible,
.home-active-ship-card:focus-visible{
  outline:2px solid #1978b3;
  outline-offset:3px;
}
.home-summary-action{
  width:100%;
  border:1px solid transparent;
  color:inherit;
  text-align:left;
  font:inherit;
  cursor:pointer;
  transition:transform .16s ease-out,background .16s ease-out,border-color .16s ease-out;
}
.home-summary-action:active{transform:scale(.985);}
.home-certificate-status-card{display:block;position:relative;overflow:hidden;}
.home-certificate-status-card::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:currentColor;opacity:.72;}
.home-certificate-status-valid{color:#197a55;}
.home-certificate-status-soon{color:#b06b08;}
.home-certificate-status-expired{color:#b33f48;}
.home-certificate-status-card .home-mini-icon{position:absolute;top:50%;left:50%;right:auto;bottom:auto;z-index:0;width:56px;height:56px;padding:0;border:0;border-radius:0;color:currentColor;background:transparent;opacity:.14;transform:translate(-50%,-50%);pointer-events:none;}
.home-certificate-status-card .home-mini-icon svg{width:42px;height:42px;}
.home-certificate-status-card>div:last-child{position:relative;z-index:1;}
.home-certificate-status-card small{width:auto;margin-left:0;text-align:left;}
:root[data-theme="dark"] .home-certificate-status-valid{color:#67d39d;}
:root[data-theme="dark"] .home-certificate-status-soon{color:#f5c36a;}
:root[data-theme="dark"] .home-certificate-status-expired{color:#ff8d98;}
.home-active-ship-card{
  width:100%;
  color:inherit;
  text-align:left;
  font:inherit;
  cursor:pointer;
  transition:transform .16s ease-out,background .16s ease-out,border-color .16s ease-out;
}
.home-active-ship-card:active{transform:scale(.99);}
.home-active-ship-cert-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid rgba(48,114,151,.13);
  font-family:'Inter',sans-serif;
}
.home-active-ship-cert-summary>span{
  position:relative;
  display:block;
  min-width:0;
  margin-top:0;
  padding:4px 3px;
  overflow:hidden;
  border-radius:7px;
  color:#547186;
  background:#eaf4f8;
  text-align:center;
  white-space:normal;
}
.home-active-ship-cert-summary>span.home-active-ship-cert-total{color:#2876a1;background:#e6f4fb;}
.home-active-ship-cert-summary>span.home-active-ship-cert-soon{color:#9a6919;background:#fff3d7;}
.home-active-ship-cert-summary>span.home-active-ship-cert-expired{color:#a44850;background:#fde8e9;}
.home-active-ship-cert-icon{position:absolute;top:50%;left:50%;z-index:0;width:31px;height:31px;color:currentColor;opacity:.16;transform:translate(-50%,-50%);pointer-events:none;}
.home-active-ship-cert-summary b,
.home-active-ship-cert-summary i{
  position:relative;
  z-index:1;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-style:normal;
}
.home-active-ship-cert-summary b{
  color:#7890a0;
  font-size:6.7px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.home-active-ship-cert-summary i{
  margin-top:2px;
  color:#24516d;
  font-size:12px;
  font-weight:850;
  line-height:1;
}
:root[data-theme="dark"] .home-summary-action{border-color:rgba(140,221,248,.2);}
:root[data-theme="dark"] .home-active-ship-cert-summary{border-top-color:rgba(140,221,248,.16);}
:root[data-theme="dark"] .home-active-ship-cert-summary>span.home-active-ship-cert-total{color:#9bdfff;background:#163d56;}
:root[data-theme="dark"] .home-active-ship-cert-summary>span.home-active-ship-cert-soon{color:#f5cf7a;background:#4a3b20;}
:root[data-theme="dark"] .home-active-ship-cert-summary>span.home-active-ship-cert-expired{color:#ff9da5;background:#4a2830;}
:root[data-theme="dark"] .home-active-ship-cert-summary b{color:#8eabbb;}
:root[data-theme="dark"] .home-active-ship-cert-summary i{color:#dff4fb;}
@media(max-width:360px){
  .home-active-ship-cert-summary{gap:4px;}
  .home-active-ship-cert-summary>span{padding:4px 2px;}
  .home-active-ship-cert-summary b{font-size:6.2px;letter-spacing:.015em;}
}
@media(prefers-reduced-motion:reduce){
  .home-career-history-trigger,
  .home-summary-action,
  .home-active-ship-card{transition:none;}
}


/* Home cards deliberately have NO shadow rules of their own. They share the
   one app-wide card elevation defined further down, so every card in the
   app - Home, Ships, Calculation, Report, Settings - looks identical. */
.home-history-see-all:hover{
  transform:translateY(-1px);
}
@media(max-width:520px){
  /* No overflow clipping here. Clipping the column - hidden or clip - slices
     each card's shadow off flat at x=0 and x=100% instead of letting it fade,
     which draws a grey vertical line down both edges and a bar across every
     card gap. min-width:0 plus the max-width:100% rules below already stop the
     grid from overflowing, so nothing needs to be clipped. */
  #home-dashboard{min-width:0;}
  .home-welcome-card,.home-career-card,.home-history-section,.home-live-gps-card{max-width:100%;}
  .home-summary-grid{min-width:0;}
  .home-mini-card,.home-life-value,.home-active-ship-card,.home-voyage-card{min-width:0;}
}
@media(max-width:420px){
  .home-dashboard{gap:var(--home-card-gap);}
  .home-welcome-card{padding:12px;border-radius:16px;}
  .home-career-card{padding:13px;border-radius:17px;}
  .home-summary-grid{gap:var(--home-card-gap);}
  .home-mini-card{padding:10px 8px;border-radius:14px;}
  .home-active-ship-card,.home-voyage-card{border-radius:12px;}
}
@media(prefers-reduced-motion:reduce){
  .home-welcome-card,
  .home-career-card,
  .home-mini-card,
  .home-history-section,
  .home-active-ship-card,
  .home-voyage-card,
  .home-live-gps-card{transition:none;}
  .home-welcome-card:hover,
  .home-career-card-link:hover,
  .home-summary-action:hover,
  .home-active-ship-card:hover,
  .home-voyage-card:hover,
  .home-live-gps-card:hover,
  .home-history-see-all:hover{transform:none;}
}

/* Home cards use a restrained raised 3D surface: centered depth plus a soft
   top highlight, without the earlier wide left/right glow. */
#tab-home > .home-dashboard > .home-welcome-card,
#tab-home > .home-dashboard > .home-career-card,
#tab-home > .home-dashboard > .home-history-section,
#tab-home > .home-dashboard > .home-active-ship-section > .home-active-ship-card,
#tab-home > .home-dashboard > .home-voyage-card,
#tab-home > .home-dashboard > .home-live-gps-card,
#tab-home > .home-dashboard > .home-empty-state{
  border-radius:18px;
  overflow:hidden;
}


#tab-home .home-active-ship-cert-icon{display:none!important;animation:none!important;}
@media(max-width:420px){
  #tab-home > .home-dashboard > .home-welcome-card,
  #tab-home > .home-dashboard > .home-career-card,
  #tab-home > .home-dashboard > .home-history-section,
  #tab-home > .home-dashboard > .home-active-ship-section > .home-active-ship-card,
  #tab-home > .home-dashboard > .home-voyage-card,
  #tab-home > .home-dashboard > .home-live-gps-card,
  #tab-home > .home-dashboard > .home-empty-state{border-radius:16px;}
}


/* ---------- iPhone Add-to-Home-Screen: opaque edge-to-edge app surface ---------- */
/* iOS may expose standalone mode through navigator.standalone before its
   display-mode media query updates. theme-init adds .sc-ios-standalone early,
   so installed apps always receive the same safe-area treatment. */
@supports (-webkit-touch-callout:none){
  html.sc-ios-standalone{
    --sc-ios-top-inset:max(36px, env(safe-area-inset-top, 0px));
    --sc-ios-bottom-inset:env(safe-area-inset-bottom, 0px);
    --sc-ios-bottom-paint-extension:max(96px, calc(56px + env(safe-area-inset-bottom, 0px)));
    background:var(--sc-top-surface)!important;
    min-height:-webkit-fill-available;
  }
  html.sc-ios-standalone body{
    min-height:100dvh;
    min-height:-webkit-fill-available;
    background:var(--sc-top-surface)!important;
  }
  /* Extend the normal app artwork beneath the dock and home indicator. */
  html.sc-ios-standalone .app-background-fixed-layer{
    inset:0 0 calc(0px - var(--sc-ios-bottom-paint-extension)) 0!important;
    min-height:calc(100dvh + var(--sc-ios-bottom-paint-extension))!important;
    opacity:1!important;
    filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  /* The status-bar inset receives the exact opaque header colour; it never
     samples content behind it, so iOS cannot render a translucent/blurred band. */
  html.sc-ios-standalone body::before{
    z-index:70!important;
    height:var(--sc-ios-top-inset)!important;
    background:var(--sc-top-surface)!important;
    opacity:1!important;
    filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html.sc-ios-standalone header#app-header,
  html.sc-ios-standalone header#app-header.is-search-open{
    position:sticky;
    top:0;
    z-index:80!important;
    min-height:calc(64px + var(--sc-ios-top-inset))!important;
    padding-top:calc(10px + var(--sc-ios-top-inset))!important;
    padding-bottom:10px!important;
    background:var(--sc-top-surface)!important;
    opacity:1!important;
    filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html.sc-ios-standalone header#app-header .menu-btn,
  html.sc-ios-standalone header#app-header #page-title,
  html.sc-ios-standalone header#app-header .header-utility-dock{
    top:calc(32px + var(--sc-ios-top-inset))!important;
  }
  html.sc-ios-standalone header#app-header .header-search-panel{
    top:calc(10px + var(--sc-ios-top-inset))!important;
    bottom:10px!important;
  }
  /* Fill the physical lower inset with the app surface, without adding any
     document height or covering interactive controls. */
  html.sc-ios-standalone body::after{
    content:'';
    position:fixed;
    z-index:0;
    inset:auto 0 0;
    height:var(--sc-ios-bottom-paint-extension);
    background:var(--sc-ios-edge-bg, var(--sc-top-surface));
    opacity:1;
    pointer-events:none;
  }
  html.sc-ios-standalone .bottom-dock-cluster{
    z-index:90!important;
    bottom:var(--sc-ios-bottom-inset)!important;
  }
  html.sc-ios-standalone #ai-fab-btn{
    z-index:91!important;
    bottom:calc(72px + var(--sc-ios-bottom-inset))!important;
  }
  html.sc-ios-standalone .tab-panel{
    padding-bottom:calc(120px + var(--sc-ios-bottom-inset));
  }
}

/* ---------- iPhone PWA dock backdrop removal and final opaque header ---------- */
/* Keep the navigation capsule itself. Remove only the separate paint layer that
   extended behind/below it in installed iPhone mode; it created a tall blank
   footer-like area even though the dock was already fixed independently. */
@supports (-webkit-touch-callout:none){
  html.sc-ios-standalone{
    --sc-ios-bottom-paint-extension:0px!important;
  }
  html.sc-ios-standalone .app-background-fixed-layer{
    bottom:0!important;
    min-height:100dvh!important;
  }
  html.sc-ios-standalone body::after{
    content:none!important;
    display:none!important;
  }
  /* The header is a solid app surface, never a composited backdrop. */
  html.sc-ios-standalone header#app-header,
  html.sc-ios-standalone header#app-header.is-search-open,
  html.sc-ios-standalone body::before{
    background:#E6F0F5!important;
    background-image:none!important;
    opacity:1!important;
    filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  /* The header's own children were still translucent (78% white), so page
     content scrolled through them and showed as a haze across the top of
     every screen. They must be solid too. */
  html.sc-ios-standalone header#app-header #page-title,
  html.sc-ios-standalone header#app-header .header-utility-dock{
    background:#ffffff!important;
    background-image:none!important;
    opacity:1!important;
    filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html.sc-ios-standalone[data-theme="dark"] header#app-header #page-title,
  html.sc-ios-standalone[data-theme="dark"] header#app-header .header-utility-dock{
    background:#16283d!important;
    background-image:none!important;
  }
  html.sc-ios-standalone header#app-header,
  html.sc-ios-standalone header#app-header.is-search-open{
    isolation:isolate;
    box-shadow:0 1px 0 rgba(31,73,97,.16)!important;
  }
  html.sc-ios-standalone[data-theme="dark"] header#app-header,
  html.sc-ios-standalone[data-theme="dark"] header#app-header.is-search-open,
  html.sc-ios-standalone[data-theme="dark"] body::before{
    background:#102033!important;
    background-image:none!important;
  }
}

/* Confirmation-based metadata sync is a safe update action, never a delete. */
.btn-confirm-delete.btn-confirm-sync{
  background:linear-gradient(180deg,#2eaee8,#1778c2);
  border-color:rgba(255,255,255,.5);
  color:#fff;
  box-shadow:0 6px 16px rgba(23,120,194,.28), inset 0 1px 0 rgba(255,255,255,.38);
}
.btn-confirm-delete.btn-confirm-sync:hover{filter:brightness(1.06);}


/* ---------- iPhone Add-to-Home-Screen: full-bleed page background ---------- */
/* The installed app owns both physical safe areas. Its status-bar and
   home-indicator pixels use the exact same page artwork as the document; no
   separate white or blue-white chrome layer is painted. */
@supports (-webkit-touch-callout:none){
  html.sc-ios-standalone{
    --sc-ios-top-inset:env(safe-area-inset-top, 0px)!important;
    --sc-ios-bottom-inset:env(safe-area-inset-bottom, 0px)!important;
    --sc-ios-page-background:
      radial-gradient(ellipse 920px 620px at 6% -10%, var(--blob1), transparent 60%),
      radial-gradient(ellipse 720px 520px at 104% 4%, var(--blob2), transparent 58%),
      radial-gradient(ellipse 820px 720px at 12% 108%, var(--blob3), transparent 60%),
      radial-gradient(ellipse 640px 520px at 92% 96%, var(--blob4), transparent 58%),
      var(--bg-base);
    background:var(--sc-ios-page-background)!important;
    background-attachment:fixed!important;
  }
  html.sc-ios-standalone body,
  html.sc-ios-standalone .app-background-fixed-layer{
    background:var(--sc-ios-page-background)!important;
    background-attachment:fixed!important;
  }
  html.sc-ios-standalone .app-background-fixed-layer{
    inset:0!important;
    min-height:100dvh!important;
    bottom:0!important;
  }
  /* Keep the transparent iOS status bar over the same fixed page artwork. */
  html.sc-ios-standalone body::before{
    height:var(--sc-ios-top-inset)!important;
    background:var(--sc-ios-page-background)!important;
    background-attachment:fixed!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }
  /* The header paints the page artwork rather than a separate white surface,
     while its controls remain 12px below the physical status-bar inset. */
  html.sc-ios-standalone header#app-header,
  html.sc-ios-standalone header#app-header.is-search-open{
    min-height:calc(66px + var(--sc-ios-top-inset))!important;
    padding-top:calc(12px + var(--sc-ios-top-inset))!important;
    background:var(--sc-ios-page-background)!important;
    background-attachment:fixed!important;
    border-bottom-color:transparent!important;
    box-shadow:none!important;
  }
  html.sc-ios-standalone header#app-header .menu-btn,
  html.sc-ios-standalone header#app-header #page-title,
  html.sc-ios-standalone header#app-header .header-utility-dock{
    top:calc(33px + var(--sc-ios-top-inset))!important;
  }
  html.sc-ios-standalone header#app-header .header-search-panel{
    top:calc(12px + var(--sc-ios-top-inset))!important;
    bottom:10px!important;
  }
  html.sc-ios-standalone .detail-view > .detail-header,
  html.sc-ios-standalone #profile-view > .detail-header{
    min-height:calc(60px + var(--sc-ios-top-inset))!important;
    padding:calc(12px + var(--sc-ios-top-inset)) 16px 10px!important;
    background:var(--sc-ios-page-background)!important;
    background-attachment:fixed!important;
    border-bottom-color:transparent!important;
    box-shadow:none!important;
  }
  html.sc-ios-standalone .ai-chat-header{
    min-height:calc(68px + var(--sc-ios-top-inset))!important;
    padding-top:calc(12px + var(--sc-ios-top-inset))!important;
    background:var(--sc-ios-page-background)!important;
    background-attachment:fixed!important;
    border-bottom-color:transparent!important;
    box-shadow:none!important;
  }
  html.sc-ios-standalone .side-menu{
    padding-top:calc(12px + var(--sc-ios-top-inset))!important;
  }
  /* Keep the navigation capsule, but move it eight pixels above the physical
     gesture area. The uninterrupted page artwork remains visible beneath it. */
  html.sc-ios-standalone .bottom-dock-cluster{
    bottom:calc(8px + var(--sc-ios-bottom-inset))!important;
  }
  html.sc-ios-standalone #ai-fab-btn{
    bottom:calc(80px + var(--sc-ios-bottom-inset))!important;
  }
  html.sc-ios-standalone .tab-panel{
    padding-bottom:calc(128px + var(--sc-ios-bottom-inset))!important;
  }
  html.sc-ios-standalone body::after{
    content:none!important;
    display:none!important;
  }
}


/* ---------- Authentication screens: dark edge-to-edge iPhone surface ---------- */
/* Before a member enters the workspace, every physical edge belongs to the
   dark authentication surface. This prevents iOS from showing its light root
   canvas through the status bar or below the home indicator. */
@supports (-webkit-touch-callout:none){
  html.sc-ios-standalone.sc-auth-surface,
  html.sc-ios-standalone:has(#sc-auth-gate:not([hidden])),
  html.sc-ios-standalone:has(#sc-profile-gate:not([hidden])),
  html.sc-ios-standalone:has(#sc-approval-gate:not([hidden])){
    --sc-auth-edge-background:
      radial-gradient(ellipse 920px 620px at 6% -10%, rgba(28,123,184,.34), transparent 60%),
      radial-gradient(ellipse 720px 520px at 104% 4%, rgba(155,104,34,.20), transparent 58%),
      linear-gradient(155deg,#0B121E 0%,#0D2033 52%,#07111C 100%);
    background:var(--sc-auth-edge-background)!important;
    background-attachment:fixed!important;
  }
  html.sc-ios-standalone.sc-auth-surface body,
  html.sc-ios-standalone:has(#sc-auth-gate:not([hidden])) body,
  html.sc-ios-standalone:has(#sc-profile-gate:not([hidden])) body,
  html.sc-ios-standalone:has(#sc-approval-gate:not([hidden])) body,
  html.sc-ios-standalone.sc-auth-surface .app-background-fixed-layer,
  html.sc-ios-standalone:has(#sc-auth-gate:not([hidden])) .app-background-fixed-layer,
  html.sc-ios-standalone:has(#sc-profile-gate:not([hidden])) .app-background-fixed-layer,
  html.sc-ios-standalone:has(#sc-approval-gate:not([hidden])) .app-background-fixed-layer{
    background:var(--sc-auth-edge-background)!important;
    background-attachment:fixed!important;
  }
  html.sc-ios-standalone.sc-auth-surface .app-background-fixed-layer,
  html.sc-ios-standalone:has(#sc-auth-gate:not([hidden])) .app-background-fixed-layer,
  html.sc-ios-standalone:has(#sc-profile-gate:not([hidden])) .app-background-fixed-layer,
  html.sc-ios-standalone:has(#sc-approval-gate:not([hidden])) .app-background-fixed-layer{
    inset:calc(0px - env(safe-area-inset-top, 0px)) 0 calc(0px - env(safe-area-inset-bottom, 0px)) 0!important;
    min-height:calc(100dvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))!important;
  }
  html.sc-ios-standalone.sc-auth-surface body::before,
  html.sc-ios-standalone:has(#sc-auth-gate:not([hidden])) body::before,
  html.sc-ios-standalone:has(#sc-profile-gate:not([hidden])) body::before,
  html.sc-ios-standalone:has(#sc-approval-gate:not([hidden])) body::before{
    background:var(--sc-auth-edge-background)!important;
    background-attachment:fixed!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html.sc-ios-standalone #sc-auth-gate,
  html.sc-ios-standalone #sc-profile-gate,
  html.sc-ios-standalone #sc-approval-gate{
    top:calc(0px - env(safe-area-inset-top, 0px))!important;
    right:0!important;
    bottom:calc(0px - env(safe-area-inset-bottom, 0px))!important;
    left:0!important;
    min-height:calc(100dvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))!important;
    padding-top:calc(24px + env(safe-area-inset-top, 0px))!important;
    padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px))!important;
    background:var(--sc-auth-edge-background)!important;
    background-attachment:fixed!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}


/* ---------- Theme-aware native safe-area canvas ---------- */
/* The workspace edge colour follows the saved app theme; dark is reserved for
   the authentication overlays that intentionally have a dark visual surface. */
:root{
  --sc-native-edge-color:#E6F0F5;
}
:root[data-theme="light"]{
  --sc-native-edge-color:#E6F0F5;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --sc-native-edge-color:#0B121E;
  color-scheme:dark;
}
html,
body{
  background-color:var(--sc-native-edge-color)!important;
}
html.sc-auth-surface{
  --sc-native-edge-color:#0B121E;
  color-scheme:dark;
}
@supports (-webkit-touch-callout:none){
  /* The workspace artwork itself reaches both physical iPhone edges; headers,
     views and the retained dock own only their content-safe padding. */
  html.sc-ios-standalone,
  html.sc-ios-standalone body{
    background-color:var(--sc-native-edge-color)!important;
  }
  html.sc-ios-standalone .app-background-fixed-layer{
    inset:calc(0px - env(safe-area-inset-top, 0px)) 0 calc(0px - env(safe-area-inset-bottom, 0px)) 0!important;
    min-height:calc(100dvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))!important;
  }
}


/* ---------- iOS standalone touch-coordinate alignment ---------- */
/* Safari 26 can keep the document viewport and fixed/sticky hit-testing in
   different vertical coordinate spaces after the standalone viewport changes.
   Make the root a stable viewport and let body own the page scroll; this keeps
   the visible safe-area surface intact while aligning taps with controls. The
   early standalone class is used instead of a feature query so this also works
   in iOS PWA shells whose WebKit feature detection is inconsistent. */
html.sc-ios-standalone{
  height:100%!important;
  overflow:hidden!important;
}
html.sc-ios-standalone body{
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
}


/* ---------- Reference iPhone surface: flat header + dock-only lower edge ---------- */
/* The header is part of the page artwork; only its controls remain tactile. */
html.sc-ios-standalone{
  --sc-ios-bottom-inset:env(safe-area-inset-bottom, 0px);
}
html.sc-ios-standalone header#app-header,
html.sc-ios-standalone header#app-header.is-search-open{
  /* This was background:transparent, which let the page scroll visibly behind
     the header: section headings appeared in the gaps between the capsules and
     collided with the page title, so the top of the screen looked scrambled.
     The header now paints the same surface as the status-bar strip above it,
     so scrolled content is hidden while the capsules still read as separate
     controls on top of it. */
  background:var(--header-solid,#ffffff)!important;
  background-image:none!important;
  border-bottom:1px solid rgba(31,73,97,.14)!important;
  box-shadow:none!important;
  isolation:auto!important;
}
/* Keep the controls as separate white capsules; only the full-width header
   container is flattened into the page artwork. */
html.sc-ios-standalone header#app-header .menu-btn,
html.sc-ios-standalone header#app-header #page-title,
html.sc-ios-standalone header#app-header .header-utility-dock,
html.sc-ios-standalone header#app-header .header-search-panel{
  /* Was var(--surface-strong) = rgba(255,255,255,.78). At 78% opacity the
     page scrolled visibly through these capsules, which is the haze that
     appeared across the top of every screen in the installed app. They are
     opaque now; --header-solid already tracks the light/dark theme. */
  background:var(--header-solid,#ffffff)!important;
  background-image:none!important;
  border-color:rgba(26,44,63,.14)!important;
  box-shadow:0 4px 12px rgba(23,42,60,.13),inset 0 1px 0 rgba(255,255,255,.98)!important;
}
html.sc-ios-standalone header#app-header #page-title{
  padding-inline:12px!important;
}
html.sc-ios-standalone header#app-header .header-search-btn,
html.sc-ios-standalone header#app-header .header-utility-dock .dock-notification-btn{
  box-shadow:none!important;
}
/* No independent white/blank footer paint layer: the page artwork continues
   right down to the gesture area, while the dock is the sole lower capsule. */
html.sc-ios-standalone body::after{
  content:none!important;
  display:none!important;
}
html.sc-ios-standalone .app-background-fixed-layer{
  bottom:0!important;
  min-height:100dvh!important;
  background:var(--sc-ios-page-background, var(--sc-top-surface))!important;
}
html.sc-ios-standalone .bottom-dock-cluster{
  bottom:calc(8px + var(--sc-ios-bottom-inset))!important;
}

/* Theme-specific rules above use higher specificity; repeat the flat-header
   decision with the theme attribute so no light-mode shadow or divider can
   reintroduce the outer header container. */
html.sc-ios-standalone[data-theme="light"] header#app-header,
html.sc-ios-standalone[data-theme="light"] header#app-header.is-search-open,
html.sc-ios-standalone[data-theme="dark"] header#app-header,
html.sc-ios-standalone[data-theme="dark"] header#app-header.is-search-open{
  background:transparent!important;
  border-bottom-color:transparent!important;
  box-shadow:none!important;
}


/* ---------- Reference lower navigation position ---------- */
html.sc-ios-standalone .bottom-dock-cluster{
  left:28px!important;
  right:28px!important;
  width:auto!important;
  max-width:none!important;
  bottom:calc(16px + var(--sc-ios-bottom-inset, 0px))!important;
}
html.sc-ios-standalone .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav{
  width:100%!important;
  height:76px!important;
  padding:5px 7px!important;
  border-radius:38px!important;
}
html.sc-ios-standalone .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button{
  border-radius:32px!important;
}

/* ---------- Ask Baby table export actions ---------- */
.ai-export-toolbar{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid rgba(31,73,97,.12);
}
.ai-export-btn{
  min-width:0;
  min-height:28px;
  padding:5px 4px;
  border:1px solid rgba(31,120,179,.24);
  border-radius:8px;
  color:#176eaa;
  background:#f2faff;
  font-family:'Inter',sans-serif;
  font-size:9px;
  font-weight:800;
  line-height:1.15;
  white-space:nowrap;
  transition:transform .14s ease-out,background .14s ease-out;
}
.ai-export-btn-save{color:#fff;background:#1978b3;border-color:#1978b3;}
.ai-export-btn:active{transform:scale(.96);}
:root[data-theme="dark"] .ai-export-toolbar{border-top-color:rgba(140,221,248,.16);}
:root[data-theme="dark"] .ai-export-btn{color:#8fddff;background:#10263a;border-color:rgba(140,221,248,.25);}
:root[data-theme="dark"] .ai-export-btn-save{color:#102033;background:#8fddff;border-color:#8fddff;}
@media(max-width:360px){
  .ai-export-toolbar{gap:3px;}
  .ai-export-btn{font-size:8px;padding-inline:2px;}
}


/* ---------- iPhone safe-area stack: edge strip below artwork, dock centered ---------- */
/* Keep the native edge canvas at the bottom of the stack. The page artwork is
   painted by the fixed background layer above it; interactive content and the
   dock remain in the normal positive/auto painting order. */
html.sc-ios-standalone{
  position:relative!important;
  isolation:isolate!important;
  background:var(--sc-native-edge-color)!important;
}
html.sc-ios-standalone body{
  position:relative!important;
  isolation:isolate!important;
  background:transparent!important;
}
html.sc-ios-standalone .app-background-fixed-layer{
  z-index:-1!important;
  inset:0 0 var(--sc-ios-bottom-inset, 0px) 0!important;
  min-height:calc(100dvh - var(--sc-ios-bottom-inset, 0px))!important;
  pointer-events:none!important;
}
html.sc-ios-standalone body::before{
  z-index:-2!important;
  background:transparent!important;
  background-image:none!important;
  pointer-events:none!important;
}
html.sc-ios-standalone body::after{
  content:''!important;
  position:fixed!important;
  z-index:-3!important;
  inset:auto 0 0 0!important;
  height:var(--sc-ios-bottom-inset, 0px)!important;
  background:var(--sc-native-edge-color)!important;
  pointer-events:none!important;
}
/* Restore canonical centering. The earlier left/right override plus the base
   translateX(-50%) caused the capsule to render half off-screen. */
html.sc-ios-standalone .bottom-dock-cluster{
  z-index:100!important;
  left:50%!important;
  right:auto!important;
  width:calc(100% - 56px)!important;
  max-width:660px!important;
  margin:0!important;
  transform:translateX(-50%)!important;
  bottom:calc(16px + var(--sc-ios-bottom-inset, 0px))!important;
}
html.sc-ios-standalone .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav{
  width:100%!important;
}

/* Auth mode visibility: sign-in must never show the sign-up confirmation field. */
.sc-auth-field[hidden]{display:none !important;}


/* ---------- Smartseamen targeted safe-area/status-bar/scrollbar update ---------- */
/* Keep the original application rules intact; these final rules only correct
   viewport edge painting and hide scrollbar chrome while preserving scrolling. */
html{
  padding-bottom:env(safe-area-inset-bottom, 0px) !important;
  min-height:calc(100dvh + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing:border-box !important;
}
.app-background-fixed-layer{
  top:-300px !important;
  left:-300px !important;
  right:-300px !important;
  bottom:-300px !important;
  width:calc(100% + 600px) !important;
  height:calc(100% + 600px) !important;
  min-height:0 !important;
}
header#app-header,
header#app-header.is-search-open{
  background-attachment:scroll !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
@supports (-webkit-touch-callout:none){
  html.sc-ios-standalone header#app-header,
  html.sc-ios-standalone header#app-header.is-search-open{
    background:transparent !important;
    background-image:none !important;
    border-bottom:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  html.sc-ios-standalone .app-background-fixed-layer{
    top:-300px !important;
    left:-300px !important;
    right:-300px !important;
    bottom:-300px !important;
    width:calc(100% + 600px) !important;
    height:calc(100% + 600px) !important;
    min-height:0 !important;
  }
}
/* Scrolling remains enabled; only the visual scrollbar tracks/thumbs disappear. */
*, *::before, *::after{
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
*::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}

/* ---------- Final floating navigating dock position ---------- */
/* Keep the dock at the bottom edge while respecting the device home-indicator inset. */
.bottom-dock-cluster{
  bottom:env(safe-area-inset-bottom, 0px) !important;
}
@supports (-webkit-touch-callout:none){
  html.sc-ios-standalone .bottom-dock-cluster{
    bottom:env(safe-area-inset-bottom, 0px) !important;
  }
}

/* ---------- Final Home dock icon size alignment ---------- */
/* The Home control uses an inline SVG while the other dock controls use image
   assets. Keep the shared circular container unchanged and reduce only the
   Home glyph so its visual weight matches the other three icons. */
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button[data-tab="home"] .tab-icon svg{
  width:22px !important;
  height:22px !important;
  flex:0 0 22px !important;
  display:block !important;
}
/* ---------- Final lock-in screen: permanent light/white design ---------- */
/* This applies only to the authentication lock-in screen and is independent
   of the workspace light/dark theme. */
#sc-auth-gate,
/* ---------- Final lock-in screen: permanent light/white design ---------- */
/* This applies only to the authentication lock-in screen and is independent
   of the workspace light/dark theme. */
#sc-profile-gate,
/* ---------- Final lock-in screen: permanent light/white design ---------- */
/* This applies only to the authentication lock-in screen and is independent
   of the workspace light/dark theme. */
#sc-approval-gate,
html.sc-auth-surface #sc-auth-gate,
html.sc-auth-surface #sc-profile-gate,
html.sc-auth-surface #sc-approval-gate{
  background:#ffffff !important;
  color:#1b2a3a !important;
}
/* Standalone (Home Screen) mode must stay theme-aware: without this split,
the selector above (scoped only to html.sc-ios-standalone) always won on
   specificity and forced a white #sc-auth-gate background even when
   data-theme="dark",
the selector above (scoped only to html.sc-ios-standalone) always won on
   specificity and forced a white #sc-profile-gate background even when
   data-theme="dark",
the selector above (scoped only to html.sc-ios-standalone) always won on
   specificity and forced a white #sc-approval-gate background even when
   data-theme="dark",
leaving the login card white in night mode only on
   installed/standalone launches. */
html.sc-ios-standalone:not([data-theme="dark"]):has(#sc-auth-gate:not([hidden])) #sc-auth-gate,
leaving the login card white in night mode only on
   installed/standalone launches. */
html.sc-ios-standalone:not([data-theme="dark"]):has(#sc-profile-gate:not([hidden])) #sc-profile-gate,
leaving the login card white in night mode only on
   installed/standalone launches. */
html.sc-ios-standalone:not([data-theme="dark"]):has(#sc-approval-gate:not([hidden])) #sc-approval-gate{
  background:#ffffff !important;
  color:#1b2a3a !important;
}
html.sc-ios-standalone[data-theme="dark"]:has(#sc-auth-gate:not([hidden])) #sc-auth-gate,
html.sc-ios-standalone[data-theme="dark"]:has(#sc-profile-gate:not([hidden])) #sc-profile-gate,
html.sc-ios-standalone[data-theme="dark"]:has(#sc-approval-gate:not([hidden])) #sc-approval-gate{
  background:linear-gradient(155deg,#07140f 0%,#0d2a20 54%,#06110d 100%) !important;
  color:#e9fff4 !important;
}
#sc-auth-gate .sc-auth-card,
#sc-profile-gate .sc-auth-card,
#sc-approval-gate .sc-auth-card{
  background:#ffffff !important;
  border-color:rgba(31,73,97,.16) !important;
  box-shadow:0 18px 48px rgba(31,73,97,.14) !important;
}
#sc-auth-gate .sc-auth-brand p,
#sc-profile-gate .sc-auth-brand p,
#sc-approval-gate .sc-auth-brand p{color:#176eaa !important;}
#sc-auth-gate .sc-auth-brand small,
#sc-profile-gate .sc-auth-brand small,
#sc-approval-gate .sc-auth-brand small,
#sc-auth-gate .sc-auth-intro,
#sc-profile-gate .sc-auth-intro,
#sc-approval-gate .sc-auth-intro{color:#5f7484 !important;}
#sc-auth-gate .sc-auth-card h2,
#sc-profile-gate .sc-auth-card h2,
#sc-approval-gate .sc-auth-card h2{color:#183247 !important;}
#sc-auth-gate .sc-auth-field,
#sc-profile-gate .sc-auth-field,
#sc-approval-gate .sc-auth-field{color:#29475d !important;}
#sc-auth-gate .sc-auth-field input,
#sc-profile-gate .sc-auth-field input,
#sc-approval-gate .sc-auth-field input,
#sc-auth-gate .sc-auth-field select,
#sc-profile-gate .sc-auth-field select,
#sc-approval-gate .sc-auth-field select{
  background:#ffffff !important;
  color:#183247 !important;
  border-color:rgba(31,73,97,.24) !important;
}
#sc-auth-gate .sc-auth-google,
#sc-profile-gate .sc-auth-google,
#sc-approval-gate .sc-auth-google{
  background:#ffffff !important;
  color:#176eaa !important;
  border-color:rgba(31,73,97,.24) !important;
}
#sc-auth-gate .sc-auth-divider,
#sc-profile-gate .sc-auth-divider,
#sc-approval-gate .sc-auth-divider{color:#79909f !important;}
#sc-auth-gate .sc-auth-divider:before,
#sc-profile-gate .sc-auth-divider:before,
#sc-approval-gate .sc-auth-divider:before,
#sc-auth-gate .sc-auth-divider:after,
#sc-profile-gate .sc-auth-divider:after,
#sc-approval-gate .sc-auth-divider:after{background:rgba(31,73,97,.16) !important;}
#sc-auth-gate .sc-auth-switch,
#sc-profile-gate .sc-auth-switch,
#sc-approval-gate .sc-auth-switch{color:#176eaa !important;}
#sc-auth-gate .sc-auth-message,
#sc-profile-gate .sc-auth-message,
#sc-approval-gate .sc-auth-message{color:#b44f3d !important;}
#sc-auth-gate .sc-auth-message.success,
#sc-profile-gate .sc-auth-message.success,
#sc-approval-gate .sc-auth-message.success{color:#218052 !important;}

/* ---------- Site menu brand slogan ---------- */
.side-menu-brand-bottom{
  display:grid !important;
  grid-template-columns:auto 1fr !important;
  grid-template-rows:auto auto !important;
  column-gap:8px !important;
  align-items:center !important;
}
.side-menu-brand-bottom .side-menu-brand-logo{
  grid-row:1 / span 2 !important;
}
.side-menu-brand-bottom .side-menu-title{
  align-self:end !important;
}
.side-menu-brand-bottom .side-menu-slogan{
  grid-column:2 !important;
  grid-row:2 !important;
  display:block !important;
  align-self:start !important;
  max-width:190px !important;
  margin-top:2px !important;
  color:#6f8796 !important;
  font-family:'Inter',sans-serif !important;
  font-size:8px !important;
  font-weight:600 !important;
  font-style:italic !important;
  line-height:1.25 !important;
  letter-spacing:0 !important;
}
:root[data-theme="dark"] .side-menu-brand-bottom .side-menu-slogan{
  color:#9fb9c7 !important;
}
/* ---------- Final slogan-only correction ---------- */
/* These last rules intentionally leave the Login card,
logo,
and surrounding
   layout unchanged. They only constrain the slogan text itself. */
#sc-auth-gate .sc-auth-brand small,
and surrounding
   layout unchanged. They only constrain the slogan text itself. */
#sc-profile-gate .sc-auth-brand small,
and surrounding
   layout unchanged. They only constrain the slogan text itself. */
#sc-approval-gate .sc-auth-brand small{
  display:block !important;
  margin-top:3px !important;
  max-width:100% !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:clip !important;
  font-size:6px !important;
  line-height:1.2 !important;
  letter-spacing:-0.05em !important;
  font-style:italic !important;
}
.side-menu-brand-bottom .side-menu-slogan{
  grid-column:2 !important;
  grid-row:2 !important;
  display:block !important;
  max-width:none !important;
  overflow:visible !important;
  white-space:nowrap !important;
  font-size:5px !important;
  line-height:1.2 !important;
  letter-spacing:-0.04em !important;
  font-style:italic !important;
}
/* ---------- Final Lock-in Day/Night theme sync ---------- */
/* Light/Day mode: green-and-white lock screen and matching edge/status area. */
:root:not([data-theme="dark"]) #sc-auth-gate,
/* ---------- Final Lock-in Day/Night theme sync ---------- */
/* Light/Day mode: green-and-white lock screen and matching edge/status area. */
:root:not([data-theme="dark"]) #sc-profile-gate,
/* ---------- Final Lock-in Day/Night theme sync ---------- */
/* Light/Day mode: green-and-white lock screen and matching edge/status area. */
:root:not([data-theme="dark"]) #sc-approval-gate{
  background:linear-gradient(155deg,#f7fffb 0%,#effbf4 54%,#ffffff 100%) !important;
  color:#19352a !important;
}
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-card,
:root:not([data-theme="dark"]) #sc-profile-gate .sc-auth-card,
:root:not([data-theme="dark"]) #sc-approval-gate .sc-auth-card{
  background:#ffffff !important;
  border-color:rgba(36,132,91,.22) !important;
  box-shadow:0 18px 48px rgba(36,132,91,.14) !important;
}
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-brand p,
:root:not([data-theme="dark"]) #sc-profile-gate .sc-auth-brand p,
:root:not([data-theme="dark"]) #sc-approval-gate .sc-auth-brand p{color:#218b5b !important;}
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-card h2,
:root:not([data-theme="dark"]) #sc-profile-gate .sc-auth-card h2,
:root:not([data-theme="dark"]) #sc-approval-gate .sc-auth-card h2{color:#19352a !important;}
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-brand small,
:root:not([data-theme="dark"]) #sc-profile-gate .sc-auth-brand small,
:root:not([data-theme="dark"]) #sc-approval-gate .sc-auth-brand small,
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-intro,
:root:not([data-theme="dark"]) #sc-profile-gate .sc-auth-intro,
:root:not([data-theme="dark"]) #sc-approval-gate .sc-auth-intro{color:#5d776b !important;}
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-field,
:root:not([data-theme="dark"]) #sc-profile-gate .sc-auth-field,
:root:not([data-theme="dark"]) #sc-approval-gate .sc-auth-field{color:#315848 !important;}
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-field input,
:root:not([data-theme="dark"]) #sc-profile-gate .sc-auth-field input,
:root:not([data-theme="dark"]) #sc-approval-gate .sc-auth-field input,
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-field select,
:root:not([data-theme="dark"]) #sc-profile-gate .sc-auth-field select,
:root:not([data-theme="dark"]) #sc-approval-gate .sc-auth-field select{
  background:#ffffff !important;
  color:#19352a !important;
  border-color:rgba(36,132,91,.24) !important;
}
/* Dark/Night mode: use the same deep green family for the screen and edge. */
:root[data-theme="dark"] #sc-auth-gate,
/* Dark/Night mode: use the same deep green family for the screen and edge. */
:root[data-theme="dark"] #sc-profile-gate,
/* Dark/Night mode: use the same deep green family for the screen and edge. */
:root[data-theme="dark"] #sc-approval-gate{
  background:linear-gradient(155deg,#07140f 0%,#0d2a20 54%,#06110d 100%) !important;
  color:#e9fff4 !important;
}
:root[data-theme="dark"] #sc-auth-gate .sc-auth-card,
:root[data-theme="dark"] #sc-profile-gate .sc-auth-card,
:root[data-theme="dark"] #sc-approval-gate .sc-auth-card{
  background:#0d241b !important;
  border-color:rgba(116,224,166,.28) !important;
  box-shadow:0 22px 56px rgba(0,0,0,.38) !important;
}
:root[data-theme="dark"] #sc-auth-gate .sc-auth-brand p,
:root[data-theme="dark"] #sc-profile-gate .sc-auth-brand p,
:root[data-theme="dark"] #sc-approval-gate .sc-auth-brand p{color:#83e0ad !important;}
:root[data-theme="dark"] #sc-auth-gate .sc-auth-card h2,
:root[data-theme="dark"] #sc-profile-gate .sc-auth-card h2,
:root[data-theme="dark"] #sc-approval-gate .sc-auth-card h2{color:#f1fff7 !important;}
:root[data-theme="dark"] #sc-auth-gate .sc-auth-brand small,
:root[data-theme="dark"] #sc-profile-gate .sc-auth-brand small,
:root[data-theme="dark"] #sc-approval-gate .sc-auth-brand small,
:root[data-theme="dark"] #sc-auth-gate .sc-auth-intro,
:root[data-theme="dark"] #sc-profile-gate .sc-auth-intro,
:root[data-theme="dark"] #sc-approval-gate .sc-auth-intro{color:#b8d9c8 !important;}
:root[data-theme="dark"] #sc-auth-gate .sc-auth-field,
:root[data-theme="dark"] #sc-profile-gate .sc-auth-field,
:root[data-theme="dark"] #sc-approval-gate .sc-auth-field{color:#d4f0e0 !important;}
:root[data-theme="dark"] #sc-auth-gate .sc-auth-field input,
:root[data-theme="dark"] #sc-profile-gate .sc-auth-field input,
:root[data-theme="dark"] #sc-approval-gate .sc-auth-field input,
:root[data-theme="dark"] #sc-auth-gate .sc-auth-field select,
:root[data-theme="dark"] #sc-profile-gate .sc-auth-field select,
:root[data-theme="dark"] #sc-approval-gate .sc-auth-field select{
  background:#081a13 !important;
  color:#f1fff7 !important;
  border-color:rgba(116,224,166,.24) !important;
}
:root[data-theme="dark"] #sc-auth-gate .sc-auth-google,
:root[data-theme="dark"] #sc-profile-gate .sc-auth-google,
:root[data-theme="dark"] #sc-approval-gate .sc-auth-google{
  color:#b8f0ce !important;
  border-color:rgba(116,224,166,.28) !important;
}

/* iOS standalone safe-area/status-bar edge follows the active mode. */
@supports (-webkit-touch-callout:none){
html.sc-ios-standalone:not([data-theme="dark"]):has(#sc-auth-gate:not([hidden])),
html.sc-ios-standalone:not([data-theme="dark"]):has(#sc-profile-gate:not([hidden])),
html.sc-ios-standalone:not([data-theme="dark"]):has(#sc-approval-gate:not([hidden])){
    --sc-auth-edge-background:linear-gradient(155deg,#f7fffb 0%,#effbf4 54%,#ffffff 100%);
  }
html.sc-ios-standalone[data-theme="dark"]:has(#sc-auth-gate:not([hidden])),
html.sc-ios-standalone[data-theme="dark"]:has(#sc-profile-gate:not([hidden])),
html.sc-ios-standalone[data-theme="dark"]:has(#sc-approval-gate:not([hidden])){
    --sc-auth-edge-background:linear-gradient(155deg,#07140f 0%,#0d2a20 54%,#06110d 100%);
  }
}
/* ---------- Final brand sizing: original title + responsive no-wrap slogan ---------- */
/* Restore the original SMART SEAMEN title treatment; only the slogan scales. */
#sc-auth-gate .sc-auth-brand p,
/* ---------- Final brand sizing: original title + responsive no-wrap slogan ---------- */
/* Restore the original SMART SEAMEN title treatment; only the slogan scales. */
#sc-profile-gate .sc-auth-brand p,
/* ---------- Final brand sizing: original title + responsive no-wrap slogan ---------- */
/* Restore the original SMART SEAMEN title treatment; only the slogan scales. */
#sc-approval-gate .sc-auth-brand p{
  margin:0 !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.16em !important;
  line-height:normal !important;
}
#sc-auth-gate .sc-auth-brand small,
#sc-profile-gate .sc-auth-brand small,
#sc-approval-gate .sc-auth-brand small{
  display:block !important;
  margin-top:3px !important;
  max-width:100% !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:clip !important;
  font-size:clamp(5.5px, 2vw, 8px) !important;
  line-height:1.15 !important;
  letter-spacing:-0.045em !important;
  font-style:italic !important;
}

/* Site menu title remains original; only its slogan is responsive and one line. */
.side-menu-brand-bottom .side-menu-title{
  font:700 11px/1 'Inter',sans-serif !important;
  letter-spacing:.16em !important;
  white-space:nowrap !important;
}
.side-menu-brand-bottom .side-menu-slogan{
  display:block !important;
  max-width:calc(100vw - 90px) !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:clip !important;
  font-size:clamp(4.5px, 1.25vw, 7px) !important;
  line-height:1.15 !important;
  letter-spacing:-0.04em !important;
  font-style:italic !important;
}
/* ---------- Final brand color and slightly larger slogan ---------- */
/* Light mode keeps the original black SMART SEAMEN title. */
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-brand p,
/* ---------- Final brand color and slightly larger slogan ---------- */
/* Light mode keeps the original black SMART SEAMEN title. */
:root:not([data-theme="dark"]) #sc-profile-gate .sc-auth-brand p,
/* ---------- Final brand color and slightly larger slogan ---------- */
/* Light mode keeps the original black SMART SEAMEN title. */
:root:not([data-theme="dark"]) #sc-approval-gate .sc-auth-brand p{
  color:#111111 !important;
}
/* Dark mode keeps the title readable against the dark lock-in surface. */
:root[data-theme="dark"] #sc-auth-gate .sc-auth-brand p,
/* Dark mode keeps the title readable against the dark lock-in surface. */
:root[data-theme="dark"] #sc-profile-gate .sc-auth-brand p,
/* Dark mode keeps the title readable against the dark lock-in surface. */
:root[data-theme="dark"] #sc-approval-gate .sc-auth-brand p{
  color:#f1fff7 !important;
}
/* Increase the slogan slightly while keeping it on one line. */
#sc-auth-gate .sc-auth-brand small,
/* Increase the slogan slightly while keeping it on one line. */
#sc-profile-gate .sc-auth-brand small,
/* Increase the slogan slightly while keeping it on one line. */
#sc-approval-gate .sc-auth-brand small{
  font-size:clamp(6px, 2.2vw, 9px) !important;
  white-space:nowrap !important;
  font-style:italic !important;
}
.side-menu-brand-bottom .side-menu-slogan{
  font-size:clamp(5px, 1.45vw, 8px) !important;
  white-space:nowrap !important;
  font-style:italic !important;
}
/* ---------- Final title hierarchy ---------- */
/* SMART SEAMEN remains the primary title; the slogan is always smaller. */
#sc-auth-gate .sc-auth-brand small,
/* ---------- Final title hierarchy ---------- */
/* SMART SEAMEN remains the primary title; the slogan is always smaller. */
#sc-profile-gate .sc-auth-brand small,
/* ---------- Final title hierarchy ---------- */
/* SMART SEAMEN remains the primary title; the slogan is always smaller. */
#sc-approval-gate .sc-auth-brand small{
  font-size:clamp(5px, 1.5vw, 7px) !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  font-style:italic !important;
}
.side-menu-brand-bottom .side-menu-slogan{
  font-size:clamp(4.5px, 1.1vw, 6px) !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  font-style:italic !important;
}
/* ---------- Final slogan visibility adjustment ---------- */
/* Larger than the previous slogan size,
but still smaller than SMART SEAMEN. */
#sc-auth-gate .sc-auth-brand small,
but still smaller than SMART SEAMEN. */
#sc-profile-gate .sc-auth-brand small,
but still smaller than SMART SEAMEN. */
#sc-approval-gate .sc-auth-brand small{
  font-size:clamp(7px, 2.4vw, 10px) !important;
  line-height:1.12 !important;
  white-space:nowrap !important;
  font-style:italic !important;
}
.side-menu-brand-bottom .side-menu-slogan{
  font-size:clamp(6px, 1.65vw, 9px) !important;
  line-height:1.12 !important;
  white-space:nowrap !important;
  font-style:italic !important;
}

/* ---------- Final side-menu brand alignment ---------- */
/* Keep the logo on the left and stack the title/slogan beside it. */
.side-menu-brand-bottom{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  column-gap:8px !important;
  align-items:center !important;
}
.side-menu-brand-bottom .side-menu-brand-logo{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
}
.side-menu-brand-bottom .side-menu-title{
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:end !important;
  margin:0 !important;
  font:700 11px/1 'Inter',sans-serif !important;
  letter-spacing:.16em !important;
  white-space:nowrap !important;
}
.side-menu-brand-bottom .side-menu-slogan{
  grid-column:2 !important;
  grid-row:2 !important;
  align-self:start !important;
  margin:2px 0 0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  font-size:clamp(6px, 1.65vw, 9px) !important;
  line-height:1.12 !important;
  letter-spacing:-.04em !important;
  font-style:italic !important;
}
:root:not([data-theme="dark"]) .side-menu-brand-bottom .side-menu-title{color:#111111 !important;}
:root[data-theme="dark"] .side-menu-brand-bottom .side-menu-title{color:#f1fff7 !important;}

/* ---------- Final side-menu label vertical centering ---------- */
/* Center the two-line label block against the logo, like the login brand. */
.side-menu-brand-bottom{
  align-items:center !important;
}
.side-menu-brand-bottom .side-menu-title,
.side-menu-brand-bottom .side-menu-slogan{
  align-self:center !important;
}
.side-menu-brand-bottom .side-menu-title{
  line-height:1 !important;
}
.side-menu-brand-bottom .side-menu-slogan{
  margin-top:1px !important;
  line-height:1.12 !important;
}

/* ---------- Final side-menu compact brand centering ---------- */
/* Make the logo a little larger and keep the two-line label centered as one block. */
.side-menu-brand-bottom{
  grid-template-rows:max-content max-content !important;
  align-content:center !important;
  align-items:center !important;
}
.side-menu-brand-bottom .side-menu-brand-logo{
  width:34px !important;
  height:34px !important;
  border-radius:10px !important;
}
.side-menu-brand-bottom .side-menu-title,
.side-menu-brand-bottom .side-menu-slogan{
  align-self:center !important;
  transform:none !important;
}
.side-menu-brand-bottom .side-menu-title{
  line-height:1 !important;
}
.side-menu-brand-bottom .side-menu-slogan{
  margin-top:1px !important;
  line-height:1.1 !important;
}

/* ---------- TRUE FINAL: side-menu brand matches login (.sc-auth-brand) alignment ---------- */
/* Login uses a plain flex row: logo box + text block, vertically centered, gap:12px.
   The side-menu footer has logo/title/slogan as siblings (no wrapper div), so a grid
   is used to reproduce the exact same visual result: logo on the left spanning both
   text rows, title+slogan stacked and centered as one block against the logo — same
   relationship as login's flex align-items:center. This block wins the cascade since
   it is the last rule for these selectors in the file. */
.side-menu-brand-bottom{
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) !important;
  grid-template-rows:max-content max-content !important;
  column-gap:12px !important;
  row-gap:0 !important;
  align-content:center !important;
  align-items:center !important;
  justify-content:flex-start !important;
  justify-items:start !important;
  text-align:left !important;
  width:100% !important;
}
.side-menu-brand-bottom .side-menu-brand-logo{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  width:34px !important;
  height:34px !important;
  border-radius:10px !important;
  margin:0 !important;
  align-self:center !important;
  justify-self:start !important;
}
.side-menu-brand-bottom .side-menu-title{
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:end !important;
  justify-self:start !important;
  margin:0 !important;
  padding:0 !important;
  font:700 11px/1 'Inter',sans-serif !important;
  letter-spacing:.16em !important;
  white-space:nowrap !important;
}
.side-menu-brand-bottom .side-menu-slogan{
  grid-column:2 !important;
  grid-row:2 !important;
  align-self:start !important;
  justify-self:start !important;
  margin:1px 0 0 !important;
  padding:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:clip !important;
  font-family:'Inter',sans-serif !important;
  font-style:italic !important;
  font-size:clamp(6px, 1.65vw, 9px) !important;
  line-height:1.1 !important;
  letter-spacing:-.04em !important;
}
:root:not([data-theme="dark"]) .side-menu-brand-bottom .side-menu-title{color:#111111 !important;}
:root[data-theme="dark"] .side-menu-brand-bottom .side-menu-title{color:#f1fff7 !important;}

/* ---------- Gate status-bar cover ----------
   These gates scroll, so without an opaque strip the card slides under the
   status bar. The strip inherits the gate's own background (colour AND
   gradient, pinned to the viewport) so it can never appear as a mismatched
   band. With no notch the inset is 0 and the strip collapses to nothing. */
#sc-auth-gate::before,
#sc-profile-gate::before,
#sc-approval-gate::before{
  content:'';
  position:fixed;
  top:0; left:0; right:0;
  height:env(safe-area-inset-top, 0px);
  background:inherit;
  background-attachment:fixed;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  pointer-events:none;
  z-index:5;
}


/* ---------- Header capsules must land on whole pixels ----------
   The title and side buttons were centred with top/left:50% plus
   transform:translate(-50%,-50%). With an odd container height and a
   fractional capsule height (16px font x line-height 1.1 = 17.6px) that
   resolved to half-pixel offsets, so text and borders were painted across
   pixel boundaries and looked soft. Fixed offsets and an integer line-height
   keep every capsule on the pixel grid, and all three share one vertical
   centre line (32px) so they stay aligned. */
/* :not(.sc-ios-standalone) added after this fix broke the installed
   (Home Screen) app: the app already had correct, safe-area-aware
   positioning for standalone mode further down this file
   (top: calc(32px + var(--sc-ios-top-inset))). This block originally applied
   unconditionally with a flat top value, which overrode that safe-area math
   on a real notch and pushed the menu button and notification bell up into
   the notch/status-bar region -- invisible on a real iPhone even though a
   later patch made them technically "visible" in the DOM (z-index, opacity).
   The bug only ever showed up after adding to the Home Screen, never in a
   normal browser tab, because only standalone mode has a nonzero inset. */
html:not(.sc-ios-standalone) header#app-header #page-title{
  position:absolute!important;
  top:13px!important;              /* 13 + 38/2 = 32, same centre as buttons */
  left:0!important;
  right:0!important;
  margin-inline:auto!important;
  width:fit-content!important;
  transform:none!important;
  line-height:18px!important;      /* 18 + 9 + 9 + 2 borders = 38px, integer */
  padding-block:9px!important;
}
html:not(.sc-ios-standalone) header#app-header .menu-btn,
html:not(.sc-ios-standalone) header#app-header #menu-btn,
html:not(.sc-ios-standalone) header#app-header .header-utility-dock,
html:not(.sc-ios-standalone) header#app-header #header-utility-dock,
html:not(.sc-ios-standalone) header#app-header .header-search-btn{
  top:11px!important;              /* 11 + 42/2 = 32 */
  transform:none!important;
}

/* v117: controls-only visibility fix; does not change header height or document flow. */
html.sc-ios-standalone header#app-header{
  z-index:1000!important;
}
html.sc-ios-standalone header#app-header .menu-btn,
html.sc-ios-standalone header#app-header .header-utility-dock,
html.sc-ios-standalone header#app-header .header-utility-dock .dock-notification-btn{
  visibility:visible!important;
  opacity:1!important;
  z-index:1001!important;
}
html.sc-ios-standalone header#app-header .menu-btn{
  color:#8fddff!important;
  background:#16283d!important;
}
html.sc-ios-standalone header#app-header .header-utility-dock{
  background:#16283d!important;
}
html.sc-ios-standalone header#app-header .header-utility-dock .dock-notification-btn{
  color:#8fddff!important;
}
html.sc-ios-standalone[data-theme="light"] header#app-header .menu-btn,
html.sc-ios-standalone[data-theme="light"] header#app-header .header-utility-dock{
  background:#ffffff!important;
}
html.sc-ios-standalone[data-theme="light"] header#app-header .header-utility-dock .dock-notification-btn{
  color:#176eaa!important;
}

/* The open drawer must cover every fixed standalone-PWA control, including
   the AI FAB and the header utility buttons. Keep this late in the cascade so
   platform-specific z-index rules cannot place those controls above the menu. */
.side-menu-overlay.open{
  z-index:2000!important;
}
.side-menu-overlay.open .side-menu{
  z-index:2001!important;
}

/* Profile, Certificates, and Sea Service are full-screen destinations. The
   global Home header (including its AI FAB, hamburger, and bell) must not sit
   above these pages in standalone PWA stacking contexts. */
html.sc-detail-page-open header#app-header{
  display:none!important;
  pointer-events:none!important;
}
body:has(.detail-view.open) > header#app-header{
  display:none!important;
  pointer-events:none!important;
}

/* Keep browser tabs aligned with standalone PWA: search always precedes bell,
   and the utility dock stays vertically centered even when compact media rules
   change the control height. */
html:not(.sc-ios-standalone) header#app-header .header-utility-dock{
  top:50%!important;
  transform:translateY(-50%)!important;
  flex-direction:row!important;
  justify-content:flex-start!important;
}
html:not(.sc-ios-standalone) header#app-header .header-search-btn{order:1!important;top:auto!important;}
html:not(.sc-ios-standalone) header#app-header .header-utility-dock .dock-notification-btn{order:2!important;left:auto!important;}

/* Owner member manager: dense, horizontally scrollable control table. */
#sc-admin-panel .sc-admin-table{min-width:980px;table-layout:auto;}
#sc-post-panel,#sc-post-compose-panel,#sc-post-detail-panel{position:fixed;inset:0;z-index:10030;padding:0;background:var(--navy-deep);color:var(--offwhite);font-family:'Inter',sans-serif;isolation:isolate;transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform;}
#sc-post-panel[hidden],#sc-post-compose-panel[hidden],#sc-post-detail-panel[hidden]{display:none!important;}
#sc-post-panel,#sc-post-detail-panel{display:flex;flex-direction:column;overflow:hidden;}
#sc-post-panel > .detail-header,#sc-post-detail-panel > .detail-header{position:relative;top:auto;flex:0 0 auto;}
#sc-post-panel > .sc-post-page,#sc-post-detail-panel > .sc-post-page{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;box-sizing:border-box;}
#sc-post-panel .sc-feed-post-header,#sc-post-detail-panel .sc-feed-post-header{position:static;top:auto;z-index:auto;background:transparent;border-bottom:0;}
#sc-post-compose-panel{display:flex;flex-direction:column;overflow:hidden;}
#sc-post-compose-panel > .detail-header{flex:0 0 auto;}
#sc-post-panel[hidden],#sc-post-compose-panel[hidden]{display:none!important;}
#sc-post-panel .sc-post-page,#sc-post-detail-panel .sc-post-page,#sc-post-compose-panel .sc-post-page{width:100%;max-width:none;min-height:100%;box-sizing:border-box;margin:0;padding:24px 18px calc(116px + env(safe-area-inset-bottom,0px));border:0;border-radius:0;background:transparent;box-shadow:none;}
.sc-post-page{width:min(100%,760px);margin:0 auto;}
.sc-post-compose-page{width:100%;max-width:none;}
.sc-post-role-badge{padding:6px 9px;border:1px solid rgba(140,221,248,.28);border-radius:999px;color:#8cddf8;font-size:10px;font-weight:800;}
.sc-post-intro{margin:16px 0;color:#9fb8c6;font:500 12px/1.5 'Inter',sans-serif;}.sc-post-composer{padding:16px;border:1px solid rgba(140,221,248,.22);border-radius:14px;background:rgba(10,42,64,.72);box-shadow:0 8px 24px rgba(0,0,0,.16);}
.sc-post-quick-create{display:block;width:100%;box-sizing:border-box;margin:18px 0;padding:16px;border:1px solid rgba(140,221,248,.18);border-radius:14px;background:rgba(10,42,64,.68);box-shadow:0 8px 22px rgba(0,0,0,.12);color:#9fb8c6;text-align:left;font:500 14px 'Inter',sans-serif;cursor:text;}
.sc-post-composer-heading{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;color:#f6fbff;font-size:13px;}.sc-post-composer-heading textarea{min-height:76px;margin:0;padding:11px 13px;border:0;border-radius:20px;background:rgba(255,255,255,.08);resize:none;font-size:14px;}.sc-post-avatar{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,#2aabee,#1b739f);color:#fff;font-size:11px;font-weight:900;box-shadow:0 0 0 3px rgba(140,221,248,.12);}
.sc-post-full-editor{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:0 0 max(0px, calc(100lvh - 100dvh));border:0;border-radius:0;background:transparent;box-shadow:none;}
.sc-post-compose-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column;padding:16px 18px 12px;box-sizing:border-box;}
.sc-post-compose-scroll>textarea{flex:1;width:100%;min-height:200px;box-sizing:border-box;padding:0;border:0;outline:0;resize:none;background:transparent;color:var(--offwhite);font:500 18px/1.6 'Inter',sans-serif;}
.sc-post-compose-scroll>textarea::placeholder{color:#8faab8;}
.sc-post-composer-actions{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:10px 18px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(140,221,248,.14);background:var(--navy-deep);box-sizing:border-box;}.sc-post-composer-actions .btn-save-ship{width:auto;min-width:82px;margin-left:auto;padding-inline:18px;}.sc-post-photo-button{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:10px;color:#8cddf8;cursor:pointer;}.sc-post-photo-button svg{width:22px;height:22px;}.sc-post-photo-button:active{background:rgba(140,221,248,.16);}.sc-admin-post-image-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);padding:0!important;opacity:0;}
.sc-post-composer .btn-save-ship{width:100%;}.sc-post-feed-heading{display:flex;align-items:center;margin:24px 0 10px;}.sc-post-feed-heading h3{margin:0;color:#f6fbff;font:800 18px 'Spectral',serif;}.sc-feed-post{display:block;margin:12px 0 16px;padding:0;overflow:hidden;border:1px solid rgba(140,221,248,.18);border-radius:14px;background:rgba(10,42,64,.72);box-shadow:0 8px 22px rgba(0,0,0,.14);}.sc-feed-post-header{display:flex;align-items:center;gap:10px;padding:13px 14px;}.sc-feed-post-header>div{min-width:0;flex:1;}.sc-feed-post-header strong{display:block;color:#f6fbff;font:800 12px 'Inter',sans-serif;}.sc-feed-post-header small{display:block;margin-top:3px;color:#91adbc;font:500 10px 'Inter',sans-serif;}.sc-feed-post-content{padding:0 14px 12px;}.sc-feed-post-content h3{margin:0 0 6px;color:#f6fbff;font:800 18px/1.25 'Spectral',serif;}.sc-feed-post-content p{margin:0;color:#d4e4eb;font:500 13px/1.55 'Inter',sans-serif;overflow-wrap:anywhere;}.sc-feed-post .sc-admin-post-image{width:100%;max-height:420px;border:0;border-radius:0;object-fit:cover;}.sc-feed-post-footer{display:flex;justify-content:space-between;padding:10px 14px;color:#8cabb9;border-top:1px solid rgba(140,221,248,.12);font:700 10px 'Inter',sans-serif;}.sc-post-see-more{display:inline-block;margin-top:8px;padding:0;border:0;background:transparent;color:#8cddf8;font:700 12px 'Inter',sans-serif;cursor:pointer;}
:root[data-theme="light"] #sc-post-panel{color:#173b52;}:root[data-theme="light"] .sc-post-feed-heading h3,:root[data-theme="light"] .sc-feed-post-header strong,:root[data-theme="light"] .sc-feed-post-content h3{color:#173b52;}:root[data-theme="light"] .sc-post-composer,:root[data-theme="light"] .sc-feed-post{background:#fff;border-color:rgba(31,73,97,.18);}:root[data-theme="light"] .sc-post-intro,:root[data-theme="light"] .sc-feed-post-header small{color:#5d788b;}:root[data-theme="light"] .sc-feed-post-content p{color:#315467;}:root[data-theme="light"] .sc-post-composer-heading{color:#173b52;}
.sc-admin-post-form{display:grid;gap:9px;margin-bottom:14px;}
.sc-admin-post-form input,.sc-admin-post-form textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid rgba(140,221,248,.28);border-radius:9px;background:#0b2236;color:#f6fbff;font:600 12px 'Inter',sans-serif;}
.sc-admin-post-form textarea{resize:vertical;line-height:1.45;}
.sc-admin-post-image-label{display:flex;align-items:baseline;gap:8px;color:#c7dae4;font:700 12px 'Inter',sans-serif;}
.sc-admin-post-image-label small{color:#8eabba;font-size:10px;font-weight:500;}
.sc-admin-post-image-preview{display:flex;flex-wrap:wrap;gap:8px;}
#sc-admin-post-status:empty{display:none;}
.sc-post-image-thumb{position:relative;width:76px;height:76px;flex:0 0 auto;border-radius:10px;overflow:hidden;border:1px solid rgba(140,221,248,.24);}
.sc-post-image-thumb img{display:block;width:100%;height:100%;object-fit:cover;}
.sc-post-image-remove{position:absolute;top:3px;right:3px;width:20px;height:20px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(9,26,38,.72);color:#fff;font-size:14px;line-height:1;cursor:pointer;}
.sc-feed-post-images{display:grid;gap:2px;}
.sc-feed-post-images-1{grid-template-columns:1fr;}
.sc-feed-post-images-1 .sc-feed-post-image-cell{aspect-ratio:4/3;}
.sc-feed-post-images-2{grid-template-columns:1fr 1fr;}
.sc-feed-post-images-2 .sc-feed-post-image-cell{aspect-ratio:1/1;}
/* Facebook's three-photo arrangement: one tall photo on the left, two
   stacked beside it, together forming a single clean rectangle. */
.sc-feed-post-images-3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:3/2;}
.sc-feed-post-images-3 .sc-feed-post-image-cell:first-child{grid-row:1 / span 2;}
.sc-feed-post-image-cell{position:relative;overflow:hidden;min-height:0;}
.sc-feed-post .sc-feed-post-images .sc-admin-post-image{display:block;width:100%;height:100%;max-height:none;object-fit:cover;}
.sc-feed-post-image-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(6,18,28,.56);color:#fff;font:800 26px 'Inter',sans-serif;pointer-events:none;}
.sc-post-detail-body{padding-top:6px;}
.sc-post-detail-body .sc-feed-post-content{padding:0 0 14px;}
.sc-post-detail-body .sc-feed-post-content p{font-size:15px;line-height:1.65;}
.sc-feed-post-images-more-full{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;margin-top:10px;}
.sc-feed-post-images-more-full img{display:block;width:100%;border-radius:10px;object-fit:cover;max-height:260px;}
.sc-job-thumb{width:30px;height:30px;border-radius:10px;object-fit:cover;flex:0 0 auto;}
.sc-post-toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px);z-index:10050;padding:12px 22px;border-radius:999px;background:linear-gradient(180deg,#2eaee8,#1778c2);color:#fff;font:700 13px 'Inter',sans-serif;box-shadow:0 10px 28px rgba(0,0,0,.28);opacity:0;transition:opacity .2s ease,transform .2s ease;pointer-events:none;}
.sc-post-toast.is-visible{opacity:1;transform:translate(-50%,0);}
.sc-admin-post-form input::placeholder,.sc-admin-post-form textarea::placeholder{color:#8eabba;}
.sc-admin-post{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:8px;padding:11px;border:1px solid rgba(140,221,248,.16);border-radius:10px;background:rgba(10,42,64,.72);}
.sc-admin-post strong{display:block;color:#f6fbff;font:800 13px 'Inter',sans-serif;}
.sc-admin-post p{margin:5px 0;color:#c7dae4;font:500 12px/1.45 'Inter',sans-serif;white-space:normal;overflow-wrap:anywhere;}
.sc-admin-post small{color:#8eabba;font:500 10px 'Inter',sans-serif;}
.sc-admin-post-delete{flex:0 0 auto;padding:7px 10px;border:1px solid rgba(230,129,111,.5);border-radius:8px;background:transparent;color:#f1a99b;font:700 11px 'Inter',sans-serif;cursor:pointer;}
:root[data-theme="light"] #sc-post-panel,:root[data-theme="light"] #sc-post-detail-panel{background:rgb(239,249,253);}
:root[data-theme="light"] #sc-post-detail-panel{color:#173b52;}
:root[data-theme="light"] .sc-post-quick-create{background:#fff;border-color:rgba(31,73,97,.18);color:#5d788b;}
:root[data-theme="light"] .sc-admin-post-form input,:root[data-theme="light"] .sc-admin-post-form textarea{background:#fff;color:#173b52;border-color:rgba(31,73,97,.24);}
:root[data-theme="light"] .sc-admin-post{background:#f8fcfe;border-color:rgba(31,73,97,.16);}
:root[data-theme="light"] .sc-admin-post strong{color:#173b52;}
:root[data-theme="light"] .sc-admin-post p{color:#3d5d70;}
:root[data-theme="light"] .sc-admin-post-image-label{color:#3d5d70;}
#sc-admin-panel .sc-admin-table th,
#sc-admin-panel .sc-admin-table td{white-space:nowrap;vertical-align:middle;}
#sc-admin-panel .sc-admin-table th{ text-align:center; }
#sc-admin-panel .sc-admin-table td{padding:8px 9px;}
#sc-admin-panel .sc-admin-select-col,
#sc-admin-panel .sc-admin-select-cell{width:42px;text-align:center;}
#sc-admin-panel .sc-admin-member-cell{min-width:150px;}
#sc-admin-panel .sc-admin-email-cell{min-width:190px;}
#sc-admin-panel .sc-admin-ai-cell{min-width:142px;}
#sc-admin-panel .sc-admin-ai-unit-cell{min-width:108px;}
#sc-admin-panel .sc-admin-member-select,
#sc-admin-panel #sc-admin-select-all{width:17px;height:17px;accent-color:#28a9e8;cursor:pointer;}
#sc-admin-panel .sc-admin-ai-unit-select{min-height:34px;min-width:92px;padding:0 24px 0 8px;border:1px solid rgba(140,221,248,.34);border-radius:9px;background:#0b2a42;color:#f6fbff;font:700 11px 'Inter',sans-serif;cursor:pointer;}
#sc-admin-panel .sc-admin-ai-unit-select:disabled{opacity:.56;cursor:not-allowed;}
:root[data-theme="light"] #sc-admin-panel .sc-admin-ai-unit-select{border-color:rgba(31,73,97,.24);background:#f5fbfe;color:#173b52;}
@media(max-width:760px){#sc-admin-panel .sc-admin-table-scroll{margin-inline:-4px;border-radius:12px;}#sc-admin-panel .sc-admin-table{min-width:980px;}}
#sc-admin-panel .sc-admin-signup-cell{min-width:118px;}

/* Owner manager table: visible dividers plus frozen header and member-name column. */
#sc-admin-panel .sc-admin-table{border-collapse:separate;border-spacing:0;}
#sc-admin-panel .sc-admin-table th,
#sc-admin-panel .sc-admin-table td{border-right:1px solid var(--navy-line);border-bottom:1px solid var(--navy-line);}
#sc-admin-panel .sc-admin-table th:last-child,
#sc-admin-panel .sc-admin-table td:last-child{border-right:0;}
#sc-admin-panel .sc-admin-table thead th{position:sticky;top:0;z-index:8;background:var(--header-solid);box-shadow:0 1px 0 var(--navy-line);}
#sc-admin-panel .sc-admin-table th:first-child,
#sc-admin-panel .sc-admin-table td:first-child{position:sticky;left:0;z-index:9;background:var(--header-solid);}
#sc-admin-panel .sc-admin-table th:nth-child(2),
#sc-admin-panel .sc-admin-table td:nth-child(2){position:sticky;left:42px;z-index:7;background:var(--well-bg);box-shadow:2px 0 0 var(--navy-line);}
#sc-admin-panel .sc-admin-table thead th:first-child,
#sc-admin-panel .sc-admin-table thead th:nth-child(2){z-index:12;background:var(--header-solid);}
#sc-admin-panel .sc-admin-approval-cell .sc-member-status{display:block;width:max-content;margin:0 auto 5px;}
#sc-admin-panel .sc-admin-ai-copy strong{display:block;}
#sc-admin-panel .sc-admin-ai-copy small{display:block;}
:root[data-theme="light"] #sc-admin-panel .sc-admin-table thead th,
:root[data-theme="light"] #sc-admin-panel .sc-admin-table th:first-child,
:root[data-theme="light"] #sc-admin-panel .sc-admin-table td:first-child{background:var(--header-solid);}
:root[data-theme="light"] #sc-admin-panel .sc-admin-table th:nth-child(2),
:root[data-theme="light"] #sc-admin-panel .sc-admin-table td:nth-child(2){background:var(--well-bg);}

/* Owner manager table: centered data, fully opaque frozen surfaces, and one minimum column size. */
#sc-admin-panel .sc-admin-table th,
#sc-admin-panel .sc-admin-table td{text-align:center;min-width:108px;}
#sc-admin-panel .sc-admin-table .sc-admin-select-col,
#sc-admin-panel .sc-admin-table .sc-admin-select-cell{min-width:108px;width:108px;}
#sc-admin-panel .sc-admin-table .sc-admin-member-cell{text-align:center;min-width:150px;}
#sc-admin-panel .sc-admin-table .sc-admin-email-cell{min-width:190px;}
#sc-admin-panel .sc-admin-table .sc-admin-ai-cell{min-width:142px;}
#sc-admin-panel .sc-admin-table .sc-admin-ai-unit-cell{min-width:108px;width:108px;}
#sc-admin-panel .sc-admin-table thead th{background:#102033!important;background-image:none!important;}
#sc-admin-panel .sc-admin-table th:first-child,
#sc-admin-panel .sc-admin-table td:first-child{left:0;background:#102033!important;background-image:none!important;}
#sc-admin-panel .sc-admin-table th:nth-child(2),
#sc-admin-panel .sc-admin-table td:nth-child(2){left:108px;background:#0b2236!important;background-image:none!important;}
#sc-admin-panel .sc-admin-table th:nth-child(2){background:#102033!important;}
#sc-admin-panel .sc-admin-table .sc-admin-status-select,
#sc-admin-panel .sc-admin-table .sc-admin-ai-unit-select{margin-inline:auto;text-align:center;}
html[data-theme="light"] #sc-admin-panel .sc-admin-table thead th,
html[data-theme="light"] #sc-admin-panel .sc-admin-table th:first-child{background:#ffffff!important;}
html[data-theme="light"] #sc-admin-panel .sc-admin-table th:nth-child(2){background:#f5fbfe!important;}
html[data-theme="light"] #sc-admin-panel .sc-admin-table td:first-child{background:#ffffff!important;}
html[data-theme="light"] #sc-admin-panel .sc-admin-table td:nth-child(2){background:#f5fbfe!important;}

/* Manager table controls: compact selection column and fixed opaque title. */
#sc-admin-panel .sc-admin-table caption{position:sticky;top:0;z-index:13;display:table-caption;min-width:100%;padding:11px 12px 7px;background:#102033!important;background-image:none!important;}
#sc-admin-panel .sc-admin-table thead th{top:30px!important;background:#102033!important;background-image:none!important;}
#sc-admin-panel .sc-admin-table .sc-admin-select-col,
#sc-admin-panel .sc-admin-table .sc-admin-select-cell{min-width:38px;width:38px;max-width:38px;padding-inline:4px;}
#sc-admin-panel .sc-admin-table th:first-child,
#sc-admin-panel .sc-admin-table td:first-child{background:#102033!important;background-image:none!important;}
#sc-admin-panel .sc-admin-table th:nth-child(2),
#sc-admin-panel .sc-admin-table td:nth-child(2){left:38px!important;}
#sc-admin-panel .sc-admin-table thead th:first-child,
#sc-admin-panel .sc-admin-table thead th:nth-child(2){z-index:15;}
#sc-admin-panel .sc-admin-table caption{color:#8fddff;text-align:left;}
html[data-theme="light"] #sc-admin-panel .sc-admin-table caption,
html[data-theme="light"] #sc-admin-panel .sc-admin-table thead th,
html[data-theme="light"] #sc-admin-panel .sc-admin-table th:first-child{background:#ffffff!important;color:#176eaa;}
html[data-theme="light"] #sc-admin-panel .sc-admin-table td:first-child{background:#ffffff!important;}
html[data-theme="light"] #sc-admin-panel .sc-admin-table th:nth-child(2),
html[data-theme="light"] #sc-admin-panel .sc-admin-table td:nth-child(2){background:#f5fbfe!important;}

/* Manager title is outside the horizontal scroller, so it never moves sideways. */
#sc-admin-panel .sc-admin-table-title{position:sticky;top:0;z-index:20;padding:11px 12px 8px;border:1px solid var(--navy-line);border-bottom:0;border-radius:15px 15px 0 0;background:#102033!important;background-image:none!important;color:#8fddff;text-align:left;font:800 11px/1.2 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;}
#sc-admin-panel .sc-admin-table-title + .sc-admin-table-scroll{border-radius:0 0 15px 15px;}
#sc-admin-panel .sc-admin-table thead th{top:0!important;}
#sc-admin-panel .sc-admin-table .sc-admin-ai-cell{min-width:68px;width:68px;padding-inline:5px;}
#sc-admin-panel .sc-admin-ai-switch{display:flex;justify-content:center;align-items:center;gap:0;}
#sc-admin-panel .sc-admin-ai-switch .sc-admin-switch-track{margin:0;}
#sc-admin-panel .sc-admin-ai-copy{display:none!important;}
html[data-theme="light"] #sc-admin-panel .sc-admin-table-title{background:#ffffff!important;color:#176eaa;}

/* Keep the manager title as one stable line; it is not part of the horizontal scroller. */
#sc-admin-panel .sc-admin-table-title{display:block;width:100%;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:18px;min-height:38px;}

/* ---------- Standalone header must be opaque ----------
   The installed app previously painted the header transparent in several
   places, including a WebKit-only @supports block that wins on iPhone. The
   header is position:sticky, so page content scrolled underneath it and was
   visible in the gaps between the capsules: section headings such as
   "Certificates & Documents" appeared behind and across the page title, and
   the top of the screen looked scrambled. These rules come last and cover the
   theme-scoped and @supports variants, so the header always paints a solid
   surface. --header-solid already follows the light/dark theme. */
html.sc-ios-standalone header#app-header,
html.sc-ios-standalone header#app-header.is-search-open,
html.sc-ios-standalone[data-theme="light"] header#app-header,
html.sc-ios-standalone[data-theme="light"] header#app-header.is-search-open,
html.sc-ios-standalone[data-theme="dark"] header#app-header,
html.sc-ios-standalone[data-theme="dark"] header#app-header.is-search-open{
  background:var(--header-solid,#ffffff)!important;
  background-image:none!important;
  background-attachment:scroll!important;
}
@supports (-webkit-touch-callout:none){
  html.sc-ios-standalone header#app-header,
  html.sc-ios-standalone header#app-header.is-search-open,
  html.sc-ios-standalone[data-theme="light"] header#app-header,
  html.sc-ios-standalone[data-theme="dark"] header#app-header{
    background:var(--header-solid,#ffffff)!important;
    background-image:none!important;
  }
}

/* ---------- Owner: member directory + detail popup ----------
   The directory table is read-only; every control lives in the popup that
   opens from a member ID, so a stray tap on a table row can no longer change
   somebody's approval or AI budget by accident. */
.sc-admin-code-btn{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;font-weight:700;letter-spacing:.02em;
  background:none;border:0;padding:2px 0;cursor:pointer;
  color:#2AABEE;text-decoration:underline;text-underline-offset:3px;
}
.sc-admin-code-btn:hover{opacity:.8;}
.sc-admin-status-chip{
  display:inline-block;padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:700;white-space:nowrap;
  background:rgba(120,140,160,.16);
}
.sc-admin-status-chip.is-approved{background:rgba(46,160,110,.18);color:#1c7a52;}
.sc-admin-status-chip.is-pending{background:rgba(230,170,60,.20);color:#8a6212;}
.sc-admin-status-chip.is-rejected,
.sc-admin-status-chip.is-suspended{background:rgba(214,90,80,.18);color:#9c3128;}

.sc-admin-usage-cell{min-width:132px;}
.sc-admin-usage-row{display:flex;align-items:center;gap:6px;margin:2px 0;}
.sc-admin-usage-label{font-size:10px;font-weight:700;opacity:.65;min-width:13px;}
.sc-admin-usage-track{
  flex:1;min-width:44px;height:6px;border-radius:3px;
  background:rgba(120,140,160,.22);overflow:hidden;
}
.sc-admin-usage-fill{display:block;height:100%;border-radius:3px;background:#2AABEE;}
.sc-admin-usage-fill.is-warning{background:#e0a13a;}
.sc-admin-usage-fill.is-critical{background:#d65a50;}
.sc-admin-usage-value{font-size:10px;font-weight:700;opacity:.7;min-width:30px;text-align:right;}

.sc-admin-detail{position:fixed;inset:0;z-index:10040;display:flex;align-items:center;justify-content:center;padding:20px;isolation:isolate;touch-action:none;}
.sc-admin-detail[hidden]{display:none!important;}
.sc-admin-detail-backdrop{position:absolute;inset:0;z-index:0;background:rgba(4,15,28,.6);pointer-events:auto;}
.sc-admin-detail-card{
  position:relative;z-index:1;width:min(100%,440px);max-height:86vh;overflow:auto;touch-action:pan-y;
  padding:22px;border-radius:20px;background:var(--header-solid,#fff);
  box-shadow:0 24px 60px rgba(0,0,0,.34);
}
.sc-admin-detail-title{margin:0 0 2px;font-size:19px;}
.sc-admin-detail-code{
  margin:0 0 16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;font-weight:700;opacity:.7;
}
.sc-admin-detail-grid{display:grid;gap:7px;margin-bottom:16px;}
.sc-admin-detail-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;}
.sc-admin-detail-row span{opacity:.65;}
.sc-admin-detail-usage{margin-bottom:16px;}
.sc-admin-detail-usage h4{margin:0 0 8px;font-size:13px;}
.sc-admin-detail-usage small{display:block;margin:-1px 0 9px;font-size:11px;opacity:.6;}
.sc-admin-detail-controls{display:grid;gap:10px;margin-bottom:18px;}
.sc-admin-detail-field{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:600;}
.sc-admin-detail-field select{
  flex:0 0 auto;min-width:132px;padding:9px 11px;border-radius:11px;font:inherit;
  border:1px solid rgba(120,140,160,.34);background:transparent;color:inherit;
}
.sc-admin-detail-actions{position:relative;z-index:1;display:flex;gap:10px;}
.sc-admin-detail-reset-row{position:relative;z-index:1;margin:0 0 12px;}
.sc-admin-detail-reset{width:100%;border:1px solid rgba(224,177,92,.45);border-radius:9px;padding:9px 12px;background:rgba(224,177,92,.10);color:var(--brass-light);font:700 11px/1.2 'Inter',sans-serif;cursor:pointer;}
.sc-admin-detail-reset:hover{background:rgba(224,177,92,.18);}
.sc-admin-detail-reset:disabled{opacity:.6;cursor:default;}
.sc-admin-detail-actions button{
  position:relative;z-index:2;flex:1;min-height:44px;padding:12px;border-radius:13px;font:inherit;font-weight:700;cursor:pointer;border:0;pointer-events:auto;touch-action:manipulation;
}
.sc-admin-detail-cancel{background:rgba(120,140,160,.18);color:inherit;}
.sc-admin-detail-confirm{background:#2AABEE;color:#04121f;}
.sc-admin-detail-confirm:disabled{opacity:.6;cursor:default;}

/* ---------- Owner member directory: layout + frozen header and ID column ----------
   The width rules further up (43%/24%/33% on the first three columns) were
   written when this table had three columns. It now has eleven, and with
   table-layout:fixed those percentages squeezed everything into an unreadable
   mess. Columns are sized by content here instead, and the table is allowed to
   exceed the panel width so it scrolls sideways.

   The header row and the Member ID column stay pinned while scrolling, so it
   is always clear which member and which field a cell belongs to. */
#sc-admin-panel .sc-admin-table-scroll{
  overflow:auto;
  max-height:min(62vh, 560px);
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#sc-admin-panel .sc-admin-table{
  table-layout:auto;
  width:max-content;
  min-width:100%;
  border-collapse:separate;
  border-spacing:0;
}
/* Neutralise the old three-column percentages. */
#sc-admin-panel .sc-admin-table th:nth-child(1),
#sc-admin-panel .sc-admin-table th:nth-child(2),
#sc-admin-panel .sc-admin-table th:nth-child(3){width:auto;}

#sc-admin-panel .sc-admin-table th,
#sc-admin-panel .sc-admin-table td{
  white-space:nowrap;
  padding:10px 12px;
  vertical-align:middle;
}
#sc-admin-panel .sc-admin-table td.sc-admin-usage-cell{white-space:normal;min-width:150px;}
#sc-admin-panel .sc-admin-table td.sc-admin-email-cell{max-width:210px;overflow:hidden;text-overflow:ellipsis;}

/* Frozen header row. */
#sc-admin-panel .sc-admin-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#0a2136;
  box-shadow:inset 0 -1px 0 rgba(140,221,248,.22);
}
/* Frozen Member ID column. */
#sc-admin-panel .sc-admin-table th:first-child,
#sc-admin-panel .sc-admin-table td:first-child{
  position:sticky;
  left:0;
  z-index:1;
  background:#071b2c;
  box-shadow:inset -1px 0 0 rgba(140,221,248,.22);
}
/* The top-left cell is frozen in both directions, so it must sit above both. */
#sc-admin-panel .sc-admin-table thead th:first-child{
  z-index:3;
  background:#0a2136;
}
#sc-admin-panel .sc-admin-table tbody td{
  border-top:1px solid rgba(140,221,248,.14);
  border-bottom:0;
}

:root[data-theme="light"] #sc-admin-panel .sc-admin-table thead th,
:root[data-theme="light"] #sc-admin-panel .sc-admin-table thead th:first-child{
  background:#eef4f8;
  box-shadow:inset 0 -1px 0 rgba(31,73,97,.18);
}
:root[data-theme="light"] #sc-admin-panel .sc-admin-table td:first-child{
  background:#ffffff;
  box-shadow:inset -1px 0 0 rgba(31,73,97,.18);
}
:root[data-theme="light"] #sc-admin-panel .sc-admin-table tbody td{
  border-top-color:rgba(31,73,97,.14);
}
/* The caption is for screen readers only; a visible one collides with the
   newly frozen header row. The generic .sc-admin-table caption rule above
   re-introduces padding and colour, so hide it explicitly here. */
#sc-admin-panel .sc-admin-table caption.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0!important;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* ---------- Security controls: functional MFA and local device lock ---------- */
.settings-mfa-overlay,.settings-lock-overlay{z-index:10060;}
.settings-lock-overlay{z-index:10070;}
.settings-mfa-modal{width:min(100% - 28px,480px);max-height:calc(100dvh - 32px);overflow:auto;}
.settings-mfa-header{align-items:flex-start;}
.settings-mfa-body{display:grid;gap:14px;padding:18px 20px 20px;}
.settings-mfa-body>p:first-child{margin:0;color:var(--offwhite-dim);font-size:13px;line-height:1.55;}
.settings-mfa-step{display:flex;align-items:flex-start;gap:10px;}
.settings-mfa-step>span{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:rgba(140,221,248,.15);color:var(--brass-light);font-weight:800;font-size:12px;}
.settings-mfa-step>div{display:grid;gap:2px;}
.settings-mfa-step strong{color:var(--offwhite);font-size:13px;}
.settings-mfa-step small{color:var(--offwhite-dim);font-size:11px;line-height:1.4;}
.settings-mfa-qr-wrap{display:grid;place-items:center;gap:12px;min-height:190px;padding:14px;border:1px solid rgba(140,221,248,.25);border-radius:14px;background:#fff;}
.settings-mfa-qr-wrap img{display:block;width:min(100%,180px);height:auto;aspect-ratio:1;}
.settings-mfa-download{padding:8px 13px;border:1px solid rgba(8,48,71,.22);border-radius:8px;background:#edf7fb;color:#083047;font:700 12px/1 'Inter',sans-serif;cursor:pointer;transition:background .16s ease,transform .16s ease,border-color .16s ease;}
.settings-mfa-download:hover,.settings-mfa-download:focus-visible{background:#d8eef6;border-color:#176e9d;}
.settings-mfa-download:active{transform:scale(.97);}
.settings-mfa-download:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.settings-mfa-secret{padding:10px 12px;border:1px solid var(--navy-line);border-radius:10px;background:var(--well-bg);color:var(--offwhite-dim);font-size:12px;}
.settings-mfa-secret-value{display:flex;align-items:center;gap:8px;margin-top:8px;}
.settings-mfa-secret code{display:block;min-width:0;flex:1;color:var(--brass-light);font-size:12px;letter-spacing:.12em;overflow-wrap:anywhere;}
.settings-mfa-secret-copy{flex:0 0 32px;}
.settings-mfa-code-field{display:grid;gap:6px;}
.settings-mfa-code-field label{color:var(--offwhite-dim);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.settings-mfa-code-field input{width:100%;padding:12px 14px;border:1px solid var(--navy-line);border-radius:10px;background:var(--popup-field-surface);color:var(--offwhite);font:700 20px/1 'Inter',sans-serif;letter-spacing:.22em;text-align:center;}
.settings-mfa-code-field input:focus-visible{outline:2px solid var(--brass-light);outline-offset:2px;}
.settings-mfa-actions{padding:0;}
.settings-lock-modal{width:min(100% - 28px,390px);padding:30px 24px;text-align:center;}
.settings-lock-modal h2{margin:0;color:var(--offwhite);font:700 23px/1.2 'Spectral',serif;}
.settings-lock-modal>p{margin:9px 0 18px;color:var(--offwhite-dim);font-size:13px;line-height:1.5;}
.settings-lock-modal .btn-save-ship{width:100%;}
.settings-lock-modal .settings-password-status{margin-top:12px;}
:root[data-theme="light"] .settings-mfa-step strong,:root[data-theme="light"] .settings-lock-modal h2{color:#083047;}
:root[data-theme="light"] .settings-mfa-body>p:first-child,:root[data-theme="light"] .settings-mfa-step small,:root[data-theme="light"] .settings-mfa-code-field label,:root[data-theme="light"] .settings-lock-modal>p{color:rgba(8,48,71,.68);}
@media(max-width:520px){.settings-mfa-modal{width:calc(100% - 20px);max-height:calc(100dvh - 20px);}.settings-mfa-body{padding:16px 14px 14px;}.settings-mfa-qr-wrap{min-height:164px;}.settings-lock-modal{width:calc(100% - 24px);padding:26px 18px;}}
@media(prefers-reduced-motion:reduce){.settings-mfa-overlay *,.settings-lock-overlay *{animation:none!important;transition:none!important;}}

/* ---------- OAuth password-management guidance ---------- */
.settings-google-account-link{display:flex;text-decoration:none;align-items:center;}
.settings-google-account-link:focus-visible{outline:2px solid var(--brass-light);outline-offset:2px;}
.settings-google-account-link strong{color:var(--offwhite);}
.settings-google-account-link small{color:var(--offwhite-dim);}
:root[data-theme="light"] .settings-google-account-link strong{color:#083047;}
:root[data-theme="light"] .settings-google-account-link small{color:rgba(8,48,71,.68);}

/* ---------- Account User ID: single-line copy control ---------- */
.settings-account-value-action{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;max-width:76%;}
.settings-account-value-action strong{display:block;min-width:0;max-width:none!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;}
.settings-copy-btn{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:0;border:1px solid rgba(174,145,83,.42);border-radius:9px;background:rgba(174,145,83,.12);color:var(--brass-light);cursor:pointer;transition:background .16s ease,transform .16s ease,border-color .16s ease,color .16s ease;}
.settings-copy-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.settings-copy-btn:hover,.settings-copy-btn:focus-visible{background:rgba(174,145,83,.24);border-color:var(--brass-light);color:#fff;}
.settings-copy-btn:active{transform:scale(.94);}
.settings-copy-btn:disabled{opacity:.42;cursor:not-allowed;transform:none;}
.settings-copy-btn[data-state="copied"]{background:rgba(61,164,100,.2);border-color:rgba(116,214,147,.72);color:#9be6ae;}
.settings-copy-toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));z-index:10120;max-width:calc(100vw - 32px);padding:9px 14px;border:1px solid rgba(174,145,83,.48);border-radius:999px;background:rgba(8,24,36,.96);box-shadow:0 10px 26px rgba(0,0,0,.28);color:#f4fbff;font-size:12px;font-weight:700;letter-spacing:.01em;opacity:0;pointer-events:none;transform:translate(-50%,10px);transition:opacity .18s ease,transform .18s ease;white-space:nowrap;}
.settings-copy-toast.is-visible{opacity:1;transform:translate(-50%,0);}
.settings-copy-toast[data-state="error"]{border-color:rgba(218,107,88,.65);color:#ffd4ca;}
:root[data-theme="light"] .settings-copy-btn{background:rgba(27,118,166,.08);border-color:rgba(27,118,166,.28);color:#176e9d;}
:root[data-theme="light"] .settings-copy-btn:hover,:root[data-theme="light"] .settings-copy-btn:focus-visible{background:rgba(27,118,166,.15);border-color:#176e9d;color:#083047;}
:root[data-theme="light"] .settings-copy-btn[data-state="copied"]{background:rgba(61,164,100,.12);border-color:rgba(23,110,66,.45);color:#176e42;}
:root[data-theme="light"] .settings-copy-toast{background:rgba(255,255,255,.97);border-color:rgba(27,118,166,.32);color:#083047;box-shadow:0 10px 26px rgba(8,48,71,.16);}
@media (max-width:520px){.settings-account-value-action{max-width:76%;gap:5px}.settings-copy-btn{flex-basis:30px;width:30px;height:30px;border-radius:8px}.settings-copy-btn svg{width:15px;height:15px}.settings-copy-toast{bottom:calc(14px + env(safe-area-inset-bottom));}}

/* ---------- Biometric fallback brandmark ---------- */
.settings-lock-brandmark{display:grid;place-items:center;width:86px;height:86px;margin:0 auto 12px;border:1px solid rgba(140,221,248,.3);border-radius:24px;background:rgba(255,255,255,.96);box-shadow:0 12px 28px rgba(0,0,0,.2),inset 0 0 0 5px rgba(255,255,255,.7);overflow:hidden;}
.settings-lock-brandmark img{display:block;width:100%;height:100%;object-fit:cover;}
:root[data-theme="light"] .settings-lock-brandmark{border-color:rgba(27,118,166,.28);box-shadow:0 10px 24px rgba(8,48,71,.14),inset 0 0 0 5px rgba(255,255,255,.86);}
@media(max-width:520px){.settings-lock-brandmark{width:78px;height:78px;border-radius:21px;margin-bottom:10px;}}


/* ---------- Home Life at Sea averages ---------- */
.home-life-metrics{margin:10px 0 12px;}
.home-life-values,.home-life-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
.home-life-value{display:flex;flex-direction:column;align-items:center;min-width:0;padding:8px 5px 7px;border:1px solid transparent;border-radius:12px;background:linear-gradient(145deg,#fff 0%,#edf4f8 100%);font-family:'Inter',sans-serif;}
.home-life-donut{--donut-color:var(--life-day);--donut-center:#f7fafc;--life-indicator:#e53935;--life-tick:#7d8790;position:relative;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9) 0 8%,transparent 25%),radial-gradient(circle at center,var(--donut-center) 0 62%,transparent 64%),conic-gradient(var(--donut-color) var(--donut-progress),color-mix(in srgb,var(--donut-color) 14%,transparent) 0);box-shadow:inset 2px 2px 5px rgba(255,255,255,.8),inset -3px -3px 6px rgba(38,87,113,.2),4px 5px 11px rgba(40,82,105,.2),0 0 0 1px rgba(91,124,143,.18);}
.home-life-donut::before{content:'';position:absolute;inset:-4px;border:3px solid rgba(113,145,163,.52);border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(166,190,203,.3));box-shadow:3px 4px 9px rgba(40,82,105,.24),-3px -3px 7px rgba(255,255,255,.86);pointer-events:none;z-index:0;}
.home-life-donut::after{content:'';position:absolute;inset:7px;border:1px solid rgba(105,137,154,.34);border-radius:50%;background:radial-gradient(circle at 34% 27%,rgba(255,255,255,.4),transparent 38%),radial-gradient(circle at 65% 72%,rgba(44,91,116,.1),transparent 58%);box-shadow:inset 2px 2px 4px rgba(255,255,255,.68),inset -2px -2px 5px rgba(38,87,113,.16);pointer-events:none;z-index:0;}
.home-life-ring-ticks{position:absolute;z-index:1;inset:0;width:100%;height:100%;display:block;overflow:visible;pointer-events:none;}
.home-life-ring-ticks line{stroke:var(--life-tick);stroke-width:.75;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.home-life-ring-ticks text{fill:var(--life-tick);font-family:'Inter',sans-serif;font-size:5.5px;font-weight:800;letter-spacing:0;text-anchor:middle;dominant-baseline:middle;}
.home-life-donut-pointer{position:absolute;z-index:2;inset:0;width:100%;height:100%;display:block;overflow:visible;pointer-events:none;transform:rotate(var(--donut-angle,0deg));transform-origin:50% 50%;will-change:transform;animation:home-life-donut-pointer-vibrate 1.35s ease-in-out infinite;}
.home-life-donut-pointer polygon{fill:var(--life-indicator);filter:drop-shadow(1px 1px 1px rgba(38,60,70,.32));}
@keyframes home-life-donut-pointer-vibrate{
  0%,100%{transform:rotate(var(--donut-angle,0deg)) translate3d(0,0,0);}
  18%{transform:rotate(calc(var(--donut-angle,0deg) - .7deg)) translate3d(-.22px,.12px,0);}
  36%{transform:rotate(calc(var(--donut-angle,0deg) + .8deg)) translate3d(.28px,-.1px,0);}
  54%{transform:rotate(calc(var(--donut-angle,0deg) - .55deg)) translate3d(-.16px,0,0);}
  72%{transform:rotate(calc(var(--donut-angle,0deg) + .45deg)) translate3d(.18px,.1px,0);}
}
.home-life-metric-day .home-life-donut-pointer{animation-delay:0s;}
.home-life-metric-month .home-life-donut-pointer{animation-delay:-.45s;}
.home-life-metric-year .home-life-donut-pointer{animation-delay:-.9s;}
@media (prefers-reduced-motion:reduce){.home-life-donut-pointer{animation:none;}}

.home-life-donut strong,.home-life-donut span{position:absolute;z-index:2;line-height:1;}
.home-life-donut strong{top:28px;color:var(--donut-color);font-size:15px;font-weight:800;}
.home-life-donut span{top:45px;color:#5d788b;font-size:7px;font-weight:650;letter-spacing:0;}
.home-life-metric-dot,.home-life-legend-dot{display:inline-block;width:9px;height:9px;flex:0 0 9px;margin-right:4px;border-radius:3px;vertical-align:middle;}
.home-life-value>strong{display:flex;align-items:center;justify-content:center;min-width:0;margin:0;color:#1c415b;font-size:13px;font-weight:800;line-height:1.1;text-align:center;white-space:nowrap;}
.home-life-labels{margin-top:10px;padding-top:9px;border-top:1px solid rgba(37,106,157,.14);}
.home-life-label{display:flex;align-items:flex-start;justify-content:center;min-width:0;margin-top:10px;color:#5d788b;font-family:'Inter',sans-serif;font-size:9px;font-weight:700;line-height:1.25;text-align:center;}
.home-life-value.home-life-metric-day{border-color:color-mix(in srgb,var(--life-day) 28%,transparent);background:color-mix(in srgb,var(--life-day) 8%,white);}
.home-life-value.home-life-metric-month{border-color:color-mix(in srgb,var(--life-month) 28%,transparent);background:color-mix(in srgb,var(--life-month) 8%,white);}
.home-life-value.home-life-metric-year{border-color:color-mix(in srgb,var(--life-year) 32%,transparent);background:color-mix(in srgb,var(--life-year) 10%,white);}
.home-life-donut.home-life-donut{--donut-center:#f7fafc;}
.home-life-metric-month .home-life-donut{--donut-color:var(--life-month);}
.home-life-metric-year .home-life-donut{--donut-color:var(--life-year);}
.home-life-metric-dot.home-life-metric-day,.home-life-legend-dot.home-life-metric-day{background:var(--life-day);}
.home-life-metric-dot.home-life-metric-month,.home-life-legend-dot.home-life-metric-month{background:var(--life-month);}
.home-life-metric-dot.home-life-metric-year,.home-life-legend-dot.home-life-metric-year{background:var(--life-year);}
.home-life-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:10px;padding-top:9px;border-top:1px solid rgba(37,106,157,.12);color:#6a8394;font-family:'Inter',sans-serif;font-size:9px;font-weight:700;line-height:1.25;}
.home-life-legend span{min-width:0;white-space:nowrap;}
:root[data-theme="dark"] .home-life-value.home-life-metric-day{border-color:color-mix(in srgb,var(--life-day) 42%,transparent);background:color-mix(in srgb,var(--life-day) 14%,transparent);}
:root[data-theme="dark"] .home-life-value.home-life-metric-month{border-color:color-mix(in srgb,var(--life-month) 42%,transparent);background:color-mix(in srgb,var(--life-month) 15%,transparent);}
:root[data-theme="dark"] .home-life-value.home-life-metric-year{border-color:color-mix(in srgb,var(--life-year) 46%,transparent);background:color-mix(in srgb,var(--life-year) 16%,transparent);}
:root[data-theme="dark"] .home-life-value{box-shadow:none;}
:root[data-theme="dark"] .home-life-donut{--donut-center:#10283a!important;background:radial-gradient(circle at center,#10283a 0 62%,transparent 64%),conic-gradient(var(--donut-color) var(--donut-progress),color-mix(in srgb,var(--donut-color) 14%,transparent) 0)!important;box-shadow:inset 2px 2px 5px rgba(255,255,255,.08),inset -3px -3px 6px rgba(0,0,0,.24),4px 5px 9px rgba(0,0,0,.22)!important;}
:root[data-theme="dark"] .home-life-donut::before{border-color:rgba(255,255,255,.16);background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(0,0,0,.2));box-shadow:3px 4px 8px rgba(0,0,0,.3),-3px -3px 7px rgba(255,255,255,.08);}
:root[data-theme="dark"] .home-life-donut::after{border-color:rgba(255,255,255,.14);background:radial-gradient(circle at 34% 27%,rgba(255,255,255,.1),transparent 38%),radial-gradient(circle at 65% 72%,rgba(0,0,0,.18),transparent 58%);box-shadow:inset 2px 2px 4px rgba(255,255,255,.08),inset -2px -2px 5px rgba(0,0,0,.2);}
:root[data-theme="dark"] .home-life-label,:root[data-theme="dark"] .home-life-legend{color:#b4cdda;}
:root[data-theme="dark"] .home-life-donut strong{color:var(--donut-color);}
:root[data-theme="dark"] .home-life-labels{border-top-color:rgba(140,221,248,.18);}
:root[data-theme="dark"] .home-life-legend{border-top-color:rgba(140,221,248,.16);}
@media(max-width:420px){
  .home-life-values,.home-life-labels{gap:5px;}
  .home-life-value{padding-inline:3px;}
  .home-life-donut{width:68px;height:68px;}
  .home-life-donut strong{top:25px;font-size:13px;}
  .home-life-donut span{top:40px;font-size:7px;}
  .home-life-label{margin-top:8px;font-size:8px;}
  .home-life-legend{font-size:8px;}
}
@media(max-width:360px){
  .home-life-value{padding:8px 5px 7px;}
  .home-life-donut{width:62px;height:62px;}
  .home-life-donut strong{top:23px;font-size:12px;}
  .home-life-donut span{top:36px;font-size:7px;}
  .home-life-label{margin-top:7px;font-size:7.5px;}
  .home-life-legend{gap:3px;font-size:7.5px;}
}

/* ---------- Home Life at Sea continuous year bars ---------- */
.home-life-chart{width:100%;box-sizing:border-box;margin-top:11px;padding:10px 8px 8px;border:1px solid rgba(37,106,157,.14);border-radius:13px;background:linear-gradient(145deg,rgba(242,249,252,.94),rgba(255,255,255,.78));overflow:hidden;}
.home-life-chart-matrix{width:100%;max-width:100%;min-width:0;}
.home-life-chart-head,.home-life-chart-body{display:grid;grid-template-columns:25px repeat(var(--life-chart-years, 1), minmax(0,1fr));width:100%;min-width:0;}
.home-life-chart-head{height:26px;}
.home-life-chart-head>span{height:26px;}
.home-life-chart-body{position:relative;grid-template-rows:repeat(12,17px);}
.home-life-chart-year-label{display:flex;align-items:center;justify-content:center;justify-self:center;min-width:0;overflow:visible;height:26px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:rgba(28,65,91,.56);font:700 6.5px/1 'Inter',sans-serif;white-space:nowrap;position:relative;z-index:2;transform:rotate(-90deg);transform-origin:center;outline:0;cursor:pointer;transition:color .24s ease,opacity .24s ease,transform .24s ease,font-size .24s ease,font-weight .24s ease;}
.home-life-chart-year-label.is-selected{border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#1c415b;opacity:1;font-size:7.5px;font-weight:900;transform:rotate(-90deg);outline:0;text-shadow:0 0 7px rgba(25,118,166,.16);}
.home-life-chart-year-label:hover,.home-life-chart-year-label:focus-visible{color:#1976a6;outline:0;}
.home-life-chart-month-label{display:flex;align-items:center;min-width:0;color:#6a8394;font:800 7px/1 'Inter',sans-serif;}
.home-life-year-bar{display:block;align-self:stretch;justify-self:center;width:calc(100% - 2px);height:100%;min-width:4px;margin:0;padding:0;border:1px solid rgba(64,112,137,.24);border-radius:3px;background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(213,229,237,.38));box-shadow:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -1px 0 rgba(40,82,105,.16),1px 2px 3px rgba(40,82,105,.16);z-index:1;cursor:pointer;transform-origin:top center;animation:home-life-year-bar-reveal .62s cubic-bezier(.23,1,.32,1) var(--home-life-bar-delay,0ms) both;}.home-life-year-bar.is-at-sea{background:linear-gradient(180deg,#e45e5e 0%,#e2a13e 52%,#359b61 100%);border-color:rgba(63,105,109,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.58),inset 0 -2px 1px rgba(49,90,75,.2),1px 2px 3px rgba(36,77,94,.2);}
@keyframes home-life-year-bar-reveal{from{opacity:0;transform:translateX(var(--home-life-bar-offset,0px)) scaleY(.08)}to{opacity:1;transform:translateX(var(--home-life-bar-offset,0px)) scaleY(1)}}
@media (prefers-reduced-motion:reduce){.home-life-year-bar{animation:none;}}
.home-life-chart-legend{display:flex;align-items:center;gap:5px;margin-top:7px;padding-top:6px;color:#6a8394;font-size:8px;font-weight:700;}
.home-life-chart-legend i{width:7px;height:7px;border-radius:2px;background:linear-gradient(180deg,#d94b4b 0%,#e2a13e 50%,#45a968 100%);}
:root[data-theme="dark"] .home-progress-track{border-color:rgba(140,221,248,.22);background:linear-gradient(180deg,#15384e 0%,#1b4861 52%,#102d42 100%);box-shadow:inset 0 2px 2px rgba(0,0,0,.3),inset 0 -1px 1px rgba(255,255,255,.08),0 1px 3px rgba(0,0,0,.2);}
:root[data-theme="dark"] .home-progress-fill{border-color:rgba(140,221,248,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -2px 1px rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.3);}
:root[data-theme="dark"] .home-life-chart{border-color:rgba(140,221,248,.18);background:linear-gradient(145deg,rgba(19,48,66,.94),rgba(12,35,50,.9));}
:root[data-theme="dark"] .home-life-year-bar.is-at-sea{border-color:rgba(140,221,248,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 1px rgba(0,0,0,.3),1px 2px 3px rgba(0,0,0,.28);}
:root[data-theme="dark"] .home-life-chart-year-label{color:rgba(236,247,251,.58);border:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
:root[data-theme="dark"] .home-life-chart-month-label{color:#b4cdda;}
@media(max-width:420px){.home-life-chart{padding-inline:6px}.home-life-chart-head,.home-life-chart-body{grid-template-columns:23px repeat(var(--life-chart-years, 1), minmax(0,1fr))}.home-life-chart-head,.home-life-chart-head>span{height:25px}.home-life-chart-year-label{height:25px;padding:0;font-size:5.5px;transform:rotate(-90deg);}.home-life-chart-year-label.is-selected{height:25px;padding:0;font-size:6.5px;transform:rotate(-90deg);}.home-life-chart-body{grid-template-rows:repeat(12,16px);}.home-life-year-bar{width:calc(100% - 1px);}}
/* Detailed Settings > About information */
#confirm-message{
  white-space:pre-line;
  text-align:left;
  line-height:1.55;
  max-height:min(68vh,620px);
  overflow-y:auto;
  overscroll-behavior:contain;
  overflow-wrap:anywhere;
  padding-right:3px;
}
@media (max-width:480px){
  #confirm-message{max-height:62vh;font-size:13px;line-height:1.6;}
}

/* Dedicated Settings > About detail page */
.settings-about-detail-view{
  z-index:10040;
  background:
    radial-gradient(ellipse 900px 600px at 8% -8%, var(--blob1), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, var(--blob2), transparent 55%),
    var(--navy-deep);
}
.settings-about-detail-view[hidden]{display:none!important;}
.settings-about-detail-back{display:flex;align-items:center;gap:3px;}
.settings-about-detail-back > span:first-child{font-size:24px;font-weight:400;line-height:1;}
.settings-about-detail-back > span:last-child{line-height:1.2;}
.settings-about-detail-body{width:min(100%,760px);margin:0 auto;padding:24px 20px calc(116px + env(safe-area-inset-bottom,0px));}
.settings-about-article{display:grid;gap:14px;}
.settings-about-article h2{margin:12px 0 -5px;color:var(--brass-light);font:700 15px/1.3 'Inter',sans-serif;letter-spacing:.01em;}
.settings-about-article h2:first-child{margin-top:0;}
.settings-about-article p{margin:0;color:var(--offwhite);font:400 14px/1.75 'Inter',sans-serif;white-space:normal;overflow-wrap:anywhere;}
.settings-about-article p + h2{margin-top:20px;}
.about-screenshot{margin:0;display:flex;justify-content:center;overflow:hidden;border-radius:24px;background:rgba(8,28,48,.45);box-shadow:0 12px 28px rgba(0,0,0,.24);}
.about-screenshot img{display:block;width:min(100%,420px);height:auto;border-radius:24px;}
@media (max-width:480px){
  .settings-about-detail-body{padding:20px 17px calc(106px + env(safe-area-inset-bottom,0px));}
  .settings-about-article{gap:12px;}
  .settings-about-article h2{font-size:14px;}
  .settings-about-article p{font-size:13.5px;line-height:1.8;}
}

/* ---------- Dock visibility and chart layering lock ---------- */
.bottom-dock-cluster{display:flex!important;visibility:visible!important;opacity:1!important;z-index:1000!important;}
html.sc-ios-standalone .bottom-dock-cluster{display:flex!important;visibility:visible!important;opacity:1!important;z-index:1000!important;}

/* ---------- Standalone navigation dock visibility lock ---------- */
.bottom-dock-cluster{display:flex!important;visibility:visible!important;opacity:1!important;z-index:1000!important;}
html.sc-ios-standalone .bottom-dock-cluster{display:flex!important;visibility:visible!important;visibility:visible!important;opacity:1!important;z-index:1000!important;}
html.sc-ios-standalone .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav{display:grid!important;visibility:visible!important;opacity:1!important;}

/* ---------- Interactive Life at Sea chart ---------- */
.home-life-chart{cursor:zoom-in;}
.home-life-chart-modal-box{width:min(100% - 24px,980px);max-height:min(92vh,860px);overflow:auto;padding:0;border-radius:20px;background:var(--surface-strong,#fff);box-shadow:0 24px 70px rgba(3,22,35,.28);}
.home-life-chart-modal-overlay{z-index:10060;}
.home-life-chart-modal-body{padding:14px 16px 18px;}
.home-life-chart-modal-body .home-life-chart{margin-top:0;cursor:default;}
.home-life-year-bar{appearance:none;-webkit-appearance:none;transition:filter .16s ease,transform .16s ease;}
.home-life-year-bar:hover,.home-life-year-bar:focus-visible{filter:brightness(1.08);transform:translateX(var(--home-life-bar-offset,0px)) scaleX(1.03);outline:2px solid rgba(25,118,166,.35);outline-offset:1px;}
.home-life-year-bar.is-dimmed{opacity:.48;filter:saturate(.72);}
.home-life-year-bar.is-selected{opacity:1;filter:saturate(1.08) brightness(1.06);outline:2px solid rgba(25,118,166,.58);outline-offset:1px;}
.home-life-voyage-popup-overlay{z-index:10080;}
.home-life-voyage-popup-box{width:min(100% - 28px,430px);}
.home-life-voyage-detail{display:grid;gap:4px;padding:11px 0;border-bottom:1px solid rgba(37,106,157,.12);color:#5d788b;font:600 12px/1.4 'Inter',sans-serif;}
.home-life-voyage-detail:last-child{border-bottom:0;}
.home-life-voyage-detail strong{color:#1c415b;font-size:14px;}
:root[data-theme="dark"] .home-life-chart-modal-box{background:#132b41;}
:root[data-theme="dark"] .home-life-voyage-detail{color:#b4cdda;border-bottom-color:rgba(140,221,248,.15);}
:root[data-theme="dark"] .home-life-voyage-detail strong{color:#ecf7fb;}

/* ---------- Centered chart modal and trading-style activity box ---------- */
html.home-life-modal-open,body.home-life-modal-open{overflow:hidden!important;overscroll-behavior:none!important;touch-action:none!important;}
.home-life-chart-modal-overlay,.home-life-voyage-popup-overlay{align-items:center!important;justify-content:center!important;padding:12px;box-sizing:border-box;touch-action:auto;}
.home-life-chart-modal-box{width:min(100%,980px);height:min(92dvh,860px);max-height:none;margin:auto;overflow:auto;border-radius:20px;animation:none;}
.home-life-chart-modal-body{overflow:auto;overscroll-behavior:contain;}
.home-life-voyage-popup-box{width:min(100%,430px);max-height:min(76dvh,600px);margin:auto;border-radius:18px;animation:none;}
.home-life-voyage-detail{gap:7px;margin:0 14px;padding:12px 0;border-bottom:1px solid rgba(37,106,157,.12);}
.home-life-voyage-detail strong{display:block;margin-bottom:3px;}
.home-life-voyage-detail span{display:flex;justify-content:space-between;gap:14px;font-size:11px;}
.home-life-voyage-detail span b{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#7c94a4;}
.home-life-voyage-detail span em{font-style:normal;color:#244f68;font-weight:800;text-align:right;}
:root[data-theme="dark"] .home-life-voyage-detail span b{color:#8da9b9;}
:root[data-theme="dark"] .home-life-voyage-detail span em{color:#e2f1f7;}

/* ---------- Life at Sea activity table ---------- */
.home-life-activity-table-wrap{margin-top:14px;padding:12px;border:1px solid rgba(37,106,157,.14);border-radius:14px;background:rgba(255,255,255,.7);}
.home-life-activity-table-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;color:#1c415b;font:800 12px/1.2 'Inter',sans-serif;}
.home-life-activity-table-heading span{color:#7890a0;font-size:9px;font-weight:700;}
.home-life-activity-table-scroll{width:100%;overflow:hidden;}
.home-life-activity-table{width:100%;min-width:0;table-layout:fixed;border-collapse:collapse;color:#41677d;font:600 9px/1.25 'Inter',sans-serif;}
.home-life-activity-table th{padding:7px 4px;background:rgba(37,106,157,.08);color:#54788c;font-size:7px;letter-spacing:.03em;text-align:left;text-transform:uppercase;white-space:nowrap;}
.home-life-activity-table td{padding:7px 4px;border-bottom:1px solid rgba(37,106,157,.1);white-space:normal;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;}
.home-life-activity-table tbody tr:last-child td{border-bottom:0;}
.home-life-activity-table td:first-child,.home-life-activity-table th:first-child{text-align:center;width:8%;}.home-life-activity-table th:nth-child(2){width:30%;}.home-life-activity-table th:nth-child(3){width:16%;}.home-life-activity-table th:nth-child(4),.home-life-activity-table th:nth-child(5){width:23%;}.home-life-activity-table td:nth-child(4),.home-life-activity-table td:nth-child(5){font-size:8px;white-space:nowrap;}
.home-life-activity-table tbody tr.is-selected td{background:linear-gradient(90deg,rgba(217,75,75,.11),rgba(226,161,62,.09),rgba(69,169,104,.11));color:#1c5878;font-weight:800;}
.home-life-activity-empty{margin:0;padding:12px;text-align:center;color:#7890a0;font-size:10px;}
:root[data-theme="dark"] .home-life-activity-table-wrap{border-color:rgba(140,221,248,.18);background:rgba(16,38,58,.8);}
:root[data-theme="dark"] .home-life-activity-table-heading{color:#ecf7fb;}
:root[data-theme="dark"] .home-life-activity-table-heading span,:root[data-theme="dark"] .home-life-activity-empty{color:#b4cdda;}
:root[data-theme="dark"] .home-life-activity-table{color:#b4cdda;}
:root[data-theme="dark"] .home-life-activity-table th{background:rgba(140,221,248,.12);color:#d8edf5;}
:root[data-theme="dark"] .home-life-activity-table td{border-bottom-color:rgba(140,221,248,.14);}
:root[data-theme="dark"] .home-life-chart-year-label{color:#ecf7fb;}
:root[data-theme="dark"] .home-life-chart-year-label.is-selected{color:#ecf7fb;border-color:rgba(140,221,248,.46);background:linear-gradient(180deg,rgba(140,221,248,.24),rgba(19,48,66,.34));text-shadow:0 0 8px rgba(102,204,244,.26);}
:root[data-theme="dark"] .home-life-chart-year-label:hover,:root[data-theme="dark"] .home-life-chart-year-label:focus-visible{color:#66ccf4;}
:root[data-theme="dark"] .home-life-year-bar.is-selected{outline-color:rgba(140,221,248,.7);}
:root[data-theme="dark"] .home-life-activity-table tbody tr.is-selected td{background:linear-gradient(90deg,rgba(217,75,75,.16),rgba(226,161,62,.13),rgba(69,169,104,.16));color:#ecf7fb;}

.home-life-chart-modal-body .home-life-activity-table-wrap{width:100%;box-sizing:border-box;}

/* ---------- Anchored year breakdown tooltip ---------- */
.home-life-chart-body{overflow:visible;}
.home-life-year-tooltip{position:absolute;z-index:5;left:0;top:4px;min-width:150px;max-width:min(240px,calc(100% - 16px));box-sizing:border-box;padding:9px 10px;border:1px solid rgba(37,106,157,.22);border-radius:10px;background:rgba(255,255,255,.97);box-shadow:0 8px 22px rgba(19,68,94,.2);color:#315d75;font:600 9px/1.3 'Inter',sans-serif;pointer-events:auto;transform:translateX(-50%);}
.home-life-year-tooltip::after{content:'';position:absolute;left:50%;bottom:-5px;width:9px;height:9px;background:rgba(255,255,255,.97);border-right:1px solid rgba(37,106,157,.22);border-bottom:1px solid rgba(37,106,157,.22);transform:translateX(-50%) rotate(45deg);}
.home-life-year-tooltip>strong{display:block;margin-bottom:5px;color:#1976a6;font-size:11px;}
.home-life-year-tooltip span{display:block;padding:4px 0;border-top:1px solid rgba(37,106,157,.1);}
.home-life-year-tooltip span b,.home-life-year-tooltip span small{display:block;}
.home-life-year-tooltip span b{color:#1c415b;font-size:9px;}
.home-life-year-tooltip span small{margin-top:2px;color:#6a8394;font-size:8px;}
:root[data-theme="dark"] .home-life-year-tooltip{border-color:rgba(140,221,248,.25);background:rgba(19,43,65,.98);color:#b4cdda;}
:root[data-theme="dark"] .home-life-year-tooltip::after{background:rgba(19,43,65,.98);border-color:rgba(140,221,248,.25);}
:root[data-theme="dark"] .home-life-year-tooltip>strong{color:#66ccf4;}
:root[data-theme="dark"] .home-life-year-tooltip span{border-top-color:rgba(140,221,248,.14);}
:root[data-theme="dark"] .home-life-year-tooltip span b{color:#ecf7fb;}
:root[data-theme="dark"] .home-life-year-tooltip span small{color:#b4cdda;}

.home-life-voyage-detail strong small{font-size:10px;font-weight:700;color:#6a8394;}
:root[data-theme="dark"] .home-life-voyage-detail strong small{color:#b4cdda;}

.home-life-year-tooltip-close{position:absolute;top:4px;right:5px;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:transparent;color:#6a8394;font:700 16px/16px Arial,sans-serif;cursor:pointer;}
.home-life-year-tooltip-close:hover{background:rgba(37,106,157,.1);color:#1c415b;}
.home-life-year-tooltip>strong{padding-right:18px;}
:root[data-theme="dark"] .home-life-year-tooltip-close{color:#b4cdda;}
:root[data-theme="dark"] .home-life-year-tooltip-close:hover{background:rgba(140,221,248,.14);color:#ecf7fb;}

.home-life-year-tooltip span small{display:block;margin-top:3px;}


/* ---------- Home standalone safe-area dock clearance ---------- */
/* Home has an ID-specific base padding rule, so the shared standalone
   .tab-panel padding cannot override it. Match the other primary tabs here;
   this keeps the dashboard scrollable content clear of the fixed dock and
   preserves the physical home-indicator inset without changing other tabs. */
@supports (-webkit-touch-callout:none){
  html.sc-ios-standalone #tab-home{
    padding-bottom:calc(128px + var(--sc-ios-bottom-inset, 0px)) !important;
  }
}

/* Keep the final Home content clear of the raised AI Assistance button. */
#tab-home{padding-bottom:calc(154px + env(safe-area-inset-bottom, 0px));}
@supports (-webkit-touch-callout:none){
  html.sc-ios-standalone #tab-home{
    padding-bottom:calc(154px + var(--sc-ios-bottom-inset, 0px)) !important;
  }
}

/* ---------- Home Life at Sea: clearer sailing motion ---------- */
/* Keep the badge calm, but make the boat's travel and rocking readable at a glance. */
.home-life-basis-trigger.home-life-basis-badge svg{
  animation:home-sailing-boat-clearer 3.6s ease-in-out infinite;
}
.home-life-basis-trigger.home-life-basis-badge .home-boat-wave{
  animation:home-boat-wave-clearer 2.5s ease-in-out infinite;
}
.home-life-basis-trigger.home-life-basis-badge .home-boat-wave-two{
  animation-delay:-1.25s;
}
@keyframes home-sailing-boat-clearer{
  0%,100%{transform:translate3d(-7px,0,0) rotate(-6deg);}
  25%{transform:translate3d(-2px,-2px,0) rotate(2deg);}
  50%{transform:translate3d(7px,0,0) rotate(6deg);}
  75%{transform:translate3d(2px,2px,0) rotate(-1deg);}
}
@keyframes home-boat-wave-clearer{
  0%,100%{transform:translateX(-1.5px);opacity:.35;}
  50%{transform:translateX(1.5px);opacity:1;}
}

/* ---------- Home Live GPS position card ---------- */
.home-live-gps-card{margin:0;padding:18px;border-radius:18px;color:var(--text-main,#f3f7fb)}
.home-live-gps-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.home-live-gps-heading h2{margin:0;font-size:18px}.home-live-gps-status{margin:5px 0 0;color:var(--text-muted,#9fb2c4);font-size:12px}.home-live-gps-enable{border:1px solid rgba(214,170,83,.7);border-radius:999px;background:rgba(214,170,83,.12);color:var(--brass,#e5bb68);padding:8px 12px;font:inherit;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}.home-live-gps-enable:active{transform:scale(.97)}
.home-live-gps-map{position:relative;overflow:hidden;min-height:190px;border:1px solid rgba(127,184,207,.22);border-radius:14px;background:radial-gradient(circle at 50% 45%,rgba(36,101,128,.25),rgba(3,16,27,.95) 72%)}.home-live-gps-grid{position:absolute;inset:0;background:linear-gradient(rgba(117,184,207,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(117,184,207,.12) 1px,transparent 1px);background-size:12.5% 25%;opacity:.6}.home-live-gps-worldmap{position:absolute;inset:5% 2%;width:96%;height:90%;fill:rgba(117,184,207,.28);stroke:rgba(155,220,232,.45);stroke-width:2;stroke-linejoin:round}.home-live-gps-marker{position:absolute;z-index:2;width:28px;height:28px;border-radius:50%;background:#e5bb68;box-shadow:0 0 0 5px rgba(229,187,104,.18),0 0 22px rgba(229,187,104,.85);transition:left .7s ease,top .7s ease,transform .35s ease}.home-live-gps-marker svg{width:100%;height:100%;padding:5px;fill:#07141f;stroke:#07141f;stroke-width:1}.home-live-gps-map:not(.is-active) .home-live-gps-marker{display:none}.home-live-gps-values{display:grid;grid-template-columns:1.65fr .8fr .8fr;gap:10px;margin-top:13px}.home-live-gps-values>div{min-width:0;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.055)}.home-live-gps-values span{display:block;color:var(--text-muted,#9fb2c4);font-size:11px}.home-live-gps-values strong{display:block;margin-top:4px;overflow:hidden;color:var(--text-main,#f3f7fb);font-size:13px;text-overflow:ellipsis;white-space:nowrap}@media(max-width:520px){.home-live-gps-card{padding:14px}.home-live-gps-map{min-height:160px}.home-live-gps-values{grid-template-columns:1fr 1fr}.home-live-gps-values>div:first-child{grid-column:1/-1}.home-live-gps-heading{gap:8px}.home-live-gps-heading h2{font-size:16px}}
html[data-theme="light"] .home-live-gps-card{color:#15303c}html[data-theme="light"] .home-live-gps-map{background:linear-gradient(145deg,#d5eaf1,#bcdce6);border-color:rgba(19,72,91,.42)}html[data-theme="light"] .home-live-gps-grid{background:linear-gradient(rgba(19,72,91,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(19,72,91,.16) 1px,transparent 1px)}html[data-theme="light"] .home-live-gps-worldmap{fill:rgba(28,104,124,.48);stroke:rgba(13,65,82,.72)}html[data-theme="light"] .home-live-gps-values>div{background:rgba(255,255,255,.7)}html[data-theme="light"] .home-live-gps-values strong{color:#15303c}html[data-theme="light"] .home-live-gps-marker{background:#a85c00;box-shadow:0 0 0 5px rgba(168,92,0,.2),0 0 20px rgba(168,92,0,.62)}
.home-live-gps-map{border-color:rgba(111,207,225,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}.home-live-gps-worldmap{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}.home-live-gps-marker{border:2px solid #fff}.home-live-gps-marker svg{fill:#07141f;stroke:#07141f}/* Keep only the map interior blue; the Live Position outer card matches Home surfaces. */


/* ---------- Live GPS map interaction controls ---------- */
.home-live-gps-map{touch-action:none;cursor:grab}.home-live-gps-map.is-dragging{cursor:grabbing}.home-live-gps-world-layer{position:absolute;inset:0;transform-origin:center center;transition:transform .22s ease}.home-live-gps-map.is-dragging .home-live-gps-world-layer{transition:none}.home-live-gps-map-controls{position:absolute;z-index:5;right:12px;bottom:12px;display:flex;gap:6px}.home-live-gps-map-controls button{width:34px;height:34px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid rgba(255,255,255,.4);border-radius:9px;background:rgba(5,18,29,.82);color:#fff;font:700 20px/1 Inter,sans-serif;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.25)}.home-live-gps-map-controls button:hover{background:rgba(33,82,103,.95)}.home-live-gps-overlay{position:absolute;z-index:4;left:14px;right:14px;top:12px;display:none;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:10px 13px;border:1px solid rgba(255,255,255,.24);border-radius:12px;background:rgba(5,18,29,.82);backdrop-filter:blur(8px);color:#f5fbff;pointer-events:none}.home-live-gps-overlay strong{font-size:15px}.home-live-gps-overlay span,.home-live-gps-overlay small{font-size:12px;color:#d5e9f0}.home-live-gps-overlay b{color:#f1c86f}.home-live-gps-overlay small{width:100%}.home-live-gps-map.is-fullscreen{position:fixed;z-index:1000;inset:0;width:100vw;height:100vh;min-height:0;border:0;border-radius:0;background:#071923}.home-live-gps-map.is-fullscreen .home-live-gps-overlay{display:flex}.home-live-gps-map.is-fullscreen .home-live-gps-map-controls{right:20px;bottom:20px}.home-live-gps-map.is-fullscreen .home-live-gps-marker{width:36px;height:36px}.home-gps-fullscreen-open{overflow:hidden}.home-live-gps-map.is-fullscreen .home-live-gps-worldmap{inset:0;width:100%;height:100%}
html[data-theme="light"] .home-live-gps-map-controls button{background:rgba(255,255,255,.9);border-color:rgba(19,72,91,.35);color:#15303c}html[data-theme="light"] .home-live-gps-overlay{background:rgba(240,248,250,.9);border-color:rgba(19,72,91,.25);color:#15303c}html[data-theme="light"] .home-live-gps-overlay span,html[data-theme="light"] .home-live-gps-overlay small{color:#315d6b}

/* Fullscreen map controls and telemetry sit above the app chrome. */
.home-live-gps-map-controls{display:none}.home-live-gps-map.is-fullscreen .home-live-gps-map-controls{display:flex}.home-live-gps-overlay-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;gap:8px}.home-live-gps-overlay-grid span{display:flex;flex-direction:column;gap:3px}.home-live-gps-overlay-grid b{font-weight:700}.home-live-gps-map.is-fullscreen{z-index:2147483000!important}.home-live-gps-map.is-fullscreen .home-live-gps-overlay{z-index:2147483002}.home-live-gps-map.is-fullscreen .home-live-gps-map-controls{z-index:2147483003}
@media(max-width:620px){.home-live-gps-overlay-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-live-gps-overlay-grid span:last-child{grid-column:1/-1}}

.home-live-gps-map-controls{display:flex}.home-live-gps-map-controls [data-map-action="zoom-in"],.home-live-gps-map-controls [data-map-action="zoom-out"],.home-live-gps-map-controls [data-map-action="recenter"]{display:none}.home-live-gps-map.is-fullscreen .home-live-gps-map-controls [data-map-action="zoom-in"],.home-live-gps-map.is-fullscreen .home-live-gps-map-controls [data-map-action="zoom-out"],.home-live-gps-map.is-fullscreen .home-live-gps-map-controls [data-map-action="recenter"]{display:block}

.home-live-gps-map.map-is-hidden{display:none}.home-live-gps-map.map-hide-countries .world-map-base-layer{display:none}.home-live-gps-map.map-hide-marine .world-map-marine-layer{display:none}.home-live-gps-map.map-hide-labels .world-map-label-layer{display:none}

/* Fullscreen map owns the entire viewport; keep every app chrome layer beneath it. */
body.home-gps-fullscreen-open header#app-header,body.home-gps-fullscreen-open .bottom-dock-cluster,body.home-gps-fullscreen-open #ai-fab-btn,body.home-gps-fullscreen-open .side-menu-overlay,body.home-gps-fullscreen-open #dock-notification-overlay{display:none!important;visibility:hidden!important;pointer-events:none!important}body.home-gps-fullscreen-open .home-live-gps-map.is-fullscreen{display:block!important;visibility:visible!important;pointer-events:auto!important}

/* Google Maps-like fullscreen surface: opaque, isolated, and clear of browser safe areas. */
.home-live-gps-map.is-fullscreen{background:#071923!important;isolation:isolate;box-sizing:border-box;overflow:hidden}.home-live-gps-map.is-fullscreen::before{content:'';position:absolute;z-index:-1;inset:0;background:#071923}.home-live-gps-map.is-fullscreen .home-live-gps-overlay{top:calc(12px + env(safe-area-inset-top,0px));grid-template-columns:1fr}.home-live-gps-overlay-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.home-live-gps-map.is-fullscreen .home-live-gps-map-controls{bottom:calc(20px + env(safe-area-inset-bottom,0px));right:calc(20px + env(safe-area-inset-right,0px))}.home-live-gps-map.is-fullscreen .home-live-gps-map-controls button{position:relative;z-index:1}.home-live-gps-map.is-fullscreen .home-live-gps-overlay-grid span{min-width:0}.home-live-gps-map.is-fullscreen .home-live-gps-overlay-grid b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:620px){.home-live-gps-overlay-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.home-live-gps-overlay-grid span{font-size:10px}.home-live-gps-overlay-grid b{font-size:11px}}

/* Profile avatar location marker. The avatar stays upright; the small pointer shows heading. */
.home-live-gps-marker{display:grid;place-items:center;width:42px;height:42px;border:3px solid #fff;border-radius:50%;background:#e5bb68;box-shadow:0 0 0 5px rgba(229,187,104,.28),0 0 24px rgba(229,187,104,.85)}.home-live-gps-avatar{display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border-radius:50%;background:#1d7da3;color:#fff;font:700 13px/1 Inter,sans-serif}.home-live-gps-avatar img{display:block;width:100%;height:100%;object-fit:cover}.home-live-gps-avatar .profile-initials{color:#fff}.home-live-gps-avatar .profile-placeholder-svg{width:58%;height:58%;color:#fff}.home-live-gps-heading-indicator{position:absolute;left:50%;top:-15px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:13px solid #e5bb68;transform:translateX(-50%) rotate(var(--gps-heading,0deg));transform-origin:50% 36px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}.home-live-gps-map.is-fullscreen .home-live-gps-marker{width:52px;height:52px}.home-live-gps-map.is-fullscreen .home-live-gps-heading-indicator{top:-17px;transform-origin:50% 43px}html[data-theme="light"] .home-live-gps-marker{border-color:#fff;background:#a85c00;box-shadow:0 0 0 5px rgba(168,92,0,.22),0 0 20px rgba(168,92,0,.6)}

.home-live-gps-overlay-grid b{white-space:normal;overflow-wrap:anywhere}.home-live-gps-map.is-fullscreen .home-live-gps-overlay-grid b{white-space:normal;overflow-wrap:anywhere}

/* Life at Sea chart is a modal: only its own body may scroll, never Home behind it. */
html.home-life-modal-open,body.home-life-modal-open{overflow:hidden!important;overscroll-behavior:none!important}body.home-life-modal-open{position:fixed!important;left:0;right:0;width:100%;touch-action:none}body.home-life-modal-open .home-life-chart-modal-overlay,body.home-life-modal-open .home-life-voyage-popup-overlay{touch-action:auto}

/* Life at Sea chart/detail pages use a solid modal surface; the Home page must not show through. */
.home-life-chart-modal-overlay.open,.home-life-voyage-popup-overlay.open{background:#f4f8fa!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.home-life-chart-modal-overlay.open .home-life-chart-modal-box,.home-life-voyage-popup-overlay.open .home-life-voyage-popup-box{background:#fff!important}:root[data-theme="dark"] .home-life-chart-modal-overlay.open,:root[data-theme="dark"] .home-life-voyage-popup-overlay.open{background:#071923!important}:root[data-theme="dark"] .home-life-chart-modal-overlay.open .home-life-chart-modal-box,:root[data-theme="dark"] .home-life-voyage-popup-overlay.open .home-life-voyage-popup-box{background:#132b41!important}

/* Clear map mode: only country outlines and coastlines are visible. */
.home-live-gps-grid{display:none!important}
/* Flat Posts feed: posts sit directly on the page and are separated by dividers. */
#sc-post-panel .sc-feed-post{margin:0;padding:18px 0;overflow:visible;border:0;border-bottom:2px solid rgba(140,221,248,.42);border-radius:0;background:transparent;box-shadow:none;}
#sc-post-panel .sc-feed-post:first-child{padding-top:0;}
#sc-post-panel .sc-feed-post:last-child{border-bottom:0;}
#sc-post-panel .sc-feed-post-header{padding:0 0 10px;}
#sc-post-panel .sc-feed-post-content{padding:0 0 12px;}
#sc-post-panel .sc-feed-post .sc-admin-post-image,#sc-post-detail-panel .sc-feed-post-images-more-full img{cursor:zoom-in;}
:root[data-theme="light"] #sc-post-panel .sc-feed-post{border-bottom-color:rgba(31,73,97,.32);background:transparent;}
.sc-feed-post-header>.sc-post-options{position:relative;flex:0 0 auto;margin-left:auto;}
.sc-post-options-trigger{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:#8cabb9;cursor:pointer;}
.sc-post-options-trigger svg{width:20px;height:20px;}
.sc-post-options-trigger:hover,.sc-post-options-trigger:focus-visible{background:rgba(140,221,248,.12);color:#8cddf8;outline:0;}
.sc-feed-post{overflow:visible;}
  .sc-feed-post .sc-feed-post-images{overflow:hidden;border-bottom-left-radius:0;border-bottom-right-radius:0;}
.sc-post-options-menu{position:absolute;top:34px;right:0;z-index:60;display:grid;min-width:92px;padding:5px;border:1px solid rgba(140,221,248,.24);border-radius:10px;background:#102c42;box-shadow:0 10px 24px rgba(0,0,0,.28);}
.sc-post-options-menu[hidden]{display:none;}
.sc-post-options-menu button{padding:8px 10px;border:0;border-radius:6px;background:transparent;color:#e2f0f5;text-align:left;font:600 12px 'Inter',sans-serif;cursor:pointer;}
.sc-post-options-menu button:hover,.sc-post-options-menu button:focus-visible{background:rgba(140,221,248,.14);color:#8cddf8;outline:0;}
.sc-feed-post.is-hidden{opacity:.52;filter:grayscale(.35);}
.sc-post-hidden-note{padding:0 14px 8px;color:#8cabb9;font:600 11px 'Inter',sans-serif;font-style:italic;}
:root[data-theme="light"] .sc-post-options-menu{background:#fff;border-color:rgba(31,73,97,.2);box-shadow:0 10px 24px rgba(31,73,97,.18);}
:root[data-theme="light"] .sc-post-options-menu button{color:#315467;}


/* ---------- Hide the floating dock inside tab content/detail pages ---------- */
/* The dock is a top-level tab navigator. Once a full-screen inner page is open,
   keep the content unobstructed and return the dock when the user goes back. */
html.sc-detail-page-open .bottom-dock-cluster,
body:has(.detail-view.open) .bottom-dock-cluster{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}


/* Keep the floating dock behind full-screen modals and wizard overlays too. */
body:has(.modal-overlay.open) .bottom-dock-cluster{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Preserve comfortable touch targets across compact and full-width layouts. */
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button{
  width:100%!important;
  min-width:0!important;
  max-width:none;
  height:100%!important;
  min-height:0!important;
  aspect-ratio:1 / 1;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  align-self:stretch!important;
  justify-self:stretch!important;
}


/* ---------- AI Assistance: restore the distinct dark-mode treatment ---------- */
/* Keep Light mode bright, but make the Dark mode FAB read as a dark surface even
   when earlier generic FAB rules or cached theme styles have higher priority. */
:root[data-theme="dark"] #ai-fab-wrap #ai-fab-btn.ai-fab{
  background:radial-gradient(circle at 32% 25%,#45697c 0 7%,#243f4e 34%,#0d1e29 100%) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.48), 0 3px 8px rgba(0,0,0,.30) !important;
}
:root[data-theme="dark"] #ai-fab-wrap #ai-fab-btn .ai-fab-avatar{
  filter:brightness(.86) saturate(.82) contrast(1.06) !important;
}
:root[data-theme="dark"] #ai-fab-wrap #ai-fab-btn.ai-fab:hover{
  box-shadow:0 16px 30px rgba(0,0,0,.56), 0 4px 10px rgba(0,0,0,.34) !important;
}
:root[data-theme="dark"] #ai-fab-wrap #ai-fab-btn.ai-fab:active{
  box-shadow:0 5px 11px rgba(0,0,0,.42) !important;
}

/* ---- Active ship card layout ----
   The photo is pinned to the top-left in its own header row, and the AIS
   report and certificate tiles are laid out beneath it across the full width
   of the card instead of being squeezed into the narrow text column. */
.home-active-ship-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
}
.home-active-ship-head{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.home-active-ship-head .home-active-ship-photo{
  width:56px;
  height:56px;
  flex:0 0 56px;
  border-radius:14px;
}
.home-active-ship-head .home-active-ship-copy{flex:1;min-width:0;}
.home-active-ship-copy strong{display:flex;align-items:center;gap:7px;min-width:0;font-size:13px;}
.home-active-ship-copy strong b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.home-active-ship-badge{display:inline-flex;align-items:center;flex:0 0 auto;margin-left:auto;padding:3px 7px;border:1px solid rgba(40,180,99,.38);border-radius:999px;background:rgba(40,180,99,.14);color:#168347;font:800 8px/1 'Inter',sans-serif;letter-spacing:.07em;white-space:nowrap;}
:root[data-theme="dark"] .home-active-ship-badge{border-color:rgba(95,212,155,.42);background:rgba(95,212,155,.16);color:#7de3a4;}
/* Type, IMO, MMSI and call sign no longer fit on one line, and truncating them
   with an ellipsis would hide the identifier the owner most needs to check, so
   allow a second line instead. */
.home-active-ship-head .home-active-ship-copy span{
  margin-top:3px;
  font-size:9.5px;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  white-space:normal;
  text-overflow:clip;
  line-height:1.35;
}

/* Five readings on a six-column grid, so the coordinate line gets the room it
   needs rather than the same width as a one-word label, and nothing is left
   orphaned on a row of its own. Row 1: status + position. Row 2: updated,
   next port, ETA. */
.home-active-ship-ais{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px 8px;
  margin-top:9px;
  padding-top:9px;
}
.home-active-ship-ais>span:nth-child(1){grid-column:span 2;}
.home-active-ship-ais>span:nth-child(2){grid-column:span 4;}
.home-active-ship-ais>span:nth-child(3){grid-column:span 2;}
.home-active-ship-ais>span:nth-child(4){grid-column:span 2;}
.home-active-ship-ais>span:nth-child(5){grid-column:span 2;}
.home-active-ship-ais b{font-size:7.4px;}
.home-active-ship-ais i{margin-top:3px;font-size:9.6px;}

/* Larger certificate tiles, filling the width of the card. */
.home-active-ship-cert-summary{
  gap:7px;
  margin-top:10px;
  padding-top:10px;
}
.home-active-ship-cert-summary>span{
  padding:10px 5px;
  border-radius:11px;
}
.home-active-ship-cert-icon{width:40px;height:40px;}
.home-active-ship-cert-summary b{font-size:7.6px;letter-spacing:.03em;}
.home-active-ship-cert-summary i{margin-top:4px;font-size:18px;}

@media(max-width:360px){
  .home-active-ship-head .home-active-ship-photo{width:48px;height:48px;flex:0 0 48px;}
  .home-active-ship-ais{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;}
  .home-active-ship-ais i{font-size:9px;}
  .home-active-ship-cert-summary{gap:5px;}
  .home-active-ship-cert-summary>span{padding:8px 3px;}
  .home-active-ship-cert-summary b{font-size:7px;letter-spacing:.015em;}
  .home-active-ship-cert-summary i{font-size:16px;}
}

/* ---- Home world map (Natural Earth 50m, single SVG coordinate system) ----
   Base map and markers share one viewBox, so panning and zooming transform
   both together and a marker can never drift off the land it sits on. All
   strokes use non-scaling-stroke so coastlines stay hairline-thin at every
   zoom level instead of turning into fat slabs.

   Colours follow a Google-Maps-like scheme and are defined as tokens, so the
   light and dark themes are genuinely separate palettes rather than one dark
   map with a filter over it. data-theme is always set by theme-init.js
   (system preference resolves to light or dark), so these two blocks cover
   every case. */
/* The light palette is the bare :root default rather than being locked
   behind [data-theme="light"]. If the theme attribute is ever missing -
   theme-init.js failing, or the first paint beating it - the map still
   renders properly instead of falling back to undefined vars, which paint
   every landmass solid black. */
:root{
  --map-water:#aadaff;
  --map-water-deep:#9ccdf5;
  --map-land:#f2efe9;
  --map-border:#c8c2b6;
  --map-coast:#8ab4cc;
  --map-grid:rgba(60,64,67,.10);
  --map-equator:rgba(180,120,40,.28);
  --map-city:#8d8d8d;
  --map-label:#4a4f54;
  --map-label-halo:rgba(255,255,255,.9);
  --map-sea-label:#5b8ba8;
  --map-reef:#4fb3a5;
  --map-airport:#8a6d3b;
  --map-panel:rgba(255,255,255,.94);
  --map-port:#1f7a5a;
  --map-road:#e8a33d;
  --map-tz:#9b7bb8;
  --map-bath-1:#9fd3f2;--map-bath-2:#89c6ec;--map-bath-3:#72b8e6;--map-bath-4:#5aa9df;--map-bath-5:#4599d6;
}
:root[data-theme="dark"]{
  --map-water:#17263c;
  --map-water-deep:#122032;
  --map-land:#2b3b4e;
  --map-border:#3f5468;
  --map-coast:#54708c;
  --map-grid:rgba(156,165,179,.12);
  --map-equator:rgba(224,176,96,.24);
  --map-city:#8f9aa8;
  --map-label:#9ca5b3;
  --map-label-halo:rgba(10,20,32,.85);
  --map-sea-label:#7f9bb5;
  --map-reef:#5fc7b6;
  --map-airport:#c9a86a;
  --map-panel:rgba(14,28,44,.94);
  --map-port:#4ecfa0;
  --map-road:#d9963a;
  --map-tz:#b295cc;
  --map-bath-1:#16273c;--map-bath-2:#132234;--map-bath-3:#101d2d;--map-bath-4:#0d1825;--map-bath-5:#0a131d;
}
.home-live-gps-map{background:var(--map-water)!important;}
.home-live-gps-svg{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;background:var(--map-water);}
.home-live-gps-svg #m-marine path{fill:var(--map-water-deep);stroke:none;}
.home-live-gps-svg #m-countries path{fill:var(--map-land);stroke:none;}
.home-live-gps-svg #m-borders path{fill:none;stroke:var(--map-border);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;}
.home-live-gps-svg #m-coast path{fill:none;stroke:var(--map-coast);stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-linejoin:round;}
.home-live-gps-svg #m-grid path{fill:none;stroke:var(--map-grid);stroke-width:1;vector-effect:non-scaling-stroke;}
.home-live-gps-svg #m-equator path{fill:none;stroke:var(--map-equator);stroke-width:1.2;vector-effect:non-scaling-stroke;}
.home-live-gps-svg #m-places circle{fill:var(--map-city);r:var(--map-dot-r,3px);}
.home-live-gps-svg #m-labels text{fill:var(--map-label);font-family:'Inter',sans-serif;font-weight:600;paint-order:stroke;stroke:var(--map-label-halo);stroke-width:2.5px;vector-effect:non-scaling-stroke;}
.home-live-gps-map.map-hide-countries .home-live-gps-svg #m-borders,
.home-live-gps-map.map-hide-marine .home-live-gps-svg #m-marine,
.home-live-gps-map.map-hide-labels .home-live-gps-svg #m-labels,
.home-live-gps-map.map-hide-labels .home-live-gps-svg #m-places{display:none;}
.home-live-gps-map.map-is-hidden .home-live-gps-svg #ss-map-base{display:none;}
/* City dots and names are only useful once the map is zoomed past the whole
   world; at world view they collapse into unreadable clutter. */
/* Each label is tagged with the tier it belongs to; anything above the
   current tier stays hidden. */
.home-live-gps-svg[data-zoom-tier="1"] .lv2,
.home-live-gps-svg[data-zoom-tier="1"] .lv3,
.home-live-gps-svg[data-zoom-tier="1"] .lv4,
.home-live-gps-svg[data-zoom-tier="2"] .lv3,
.home-live-gps-svg[data-zoom-tier="2"] .lv4,
.home-live-gps-svg[data-zoom-tier="3"] .lv4{display:none;}
.home-live-gps-svg text.is-collided{display:none;}
/* Lakes read as water, not as another country. */
.home-live-gps-svg #m-lakes path{fill:var(--map-water);stroke:var(--map-coast);stroke-width:.8;vector-effect:non-scaling-stroke;}
/* Sea and ocean names: italic and letter-spaced, the way charts label water. */
.home-live-gps-svg #m-sea-labels text{fill:var(--map-sea-label);font-family:'Inter',sans-serif;font-style:italic;font-weight:600;letter-spacing:.08em;paint-order:stroke;stroke:var(--map-label-halo);stroke-width:2.5px;vector-effect:non-scaling-stroke;}
.home-live-gps-map.map-hide-labels .home-live-gps-svg #m-sea-labels{display:none;}

/* Markers are counter-scaled in script, so these sizes are effectively CSS
   pixels no matter how far the map is zoomed. */
.ss-map-node.is-hidden,.ss-map-node .is-hidden{display:none;}
.ss-map-node-halo{fill:rgba(66,133,244,.16);}
/* You: the saved profile photo, clipped into the pin. */
.ss-map-node-gps .ss-map-node-halo{fill:rgba(66,133,244,.18);}
.ss-map-node-gps .ss-map-node-avatar-bg{fill:#1a73e8;}
.ss-map-node-gps .ss-map-node-ring{fill:none;stroke:#fff;stroke-width:3;vector-effect:non-scaling-stroke;}
.ss-map-node-gps .ss-map-node-initials{fill:#fff;font:700 13px 'Inter',sans-serif;}
.ss-map-node-gps .ss-map-node-arrow{fill:#1a73e8;stroke:#fff;stroke-width:1.4;vector-effect:non-scaling-stroke;}
/* Ship: the same sailing boat used by Life at Sea. */
.ss-map-node-ship .ss-map-node-halo{fill:rgba(229,57,53,.16);}
.ss-boat{stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.ss-boat path{vector-effect:non-scaling-stroke;}
.ss-boat .ss-boat-hull{fill:#e53935;stroke:#111;}
.ss-boat .ss-boat-sail{fill:#eceff1;stroke:#111;}
.ss-boat .ss-boat-mast{fill:none;stroke:#111;}
.ss-map-node-ship .ss-map-node-label{fill:var(--map-label);font:700 11px 'Inter',sans-serif;paint-order:stroke;stroke:var(--map-label-halo);stroke-width:3px;vector-effect:non-scaling-stroke;}
/* A last known fix is drawn faded, so it is never mistaken for a live one. */
.ss-map-node-ship.is-stale .ss-boat{opacity:.55;}
.ss-map-node-ship.is-stale .ss-map-node-halo{fill:rgba(229,57,53,.08);}

.home-live-gps-legend{position:absolute;z-index:4;left:12px;bottom:12px;display:flex;gap:10px;padding:5px 9px;border-radius:9px;background:var(--map-label-halo);pointer-events:none;}
.home-live-gps-legend span{display:flex;align-items:center;gap:5px;color:var(--map-label);font:600 9.5px 'Inter',sans-serif;}
.home-live-gps-legend span::before{content:"";width:8px;height:8px;border-radius:50%;}
.home-live-gps-legend .is-you::before{background:#1a73e8;}
.home-live-gps-legend .is-ship::before{background:#e53935;}

@media(max-width:520px){
  .home-live-gps-legend{left:10px;bottom:10px;padding:4px 7px;gap:8px;}
}

/* ---- Map layers: new data layers and the on-map layer picker ---- */
.home-live-gps-svg #m-islands path{fill:var(--map-land);stroke:var(--map-coast);stroke-width:.7;vector-effect:non-scaling-stroke;}
.home-live-gps-svg #m-reefs path{fill:none;stroke:var(--map-reef);stroke-width:1.2;stroke-dasharray:3 2;vector-effect:non-scaling-stroke;}
.home-live-gps-svg #m-states path{fill:none;stroke:var(--map-border);stroke-width:.7;stroke-dasharray:4 3;opacity:.75;vector-effect:non-scaling-stroke;}
.home-live-gps-svg #m-lake-labels text{fill:var(--map-sea-label);font-family:'Inter',sans-serif;font-style:italic;font-weight:600;paint-order:stroke;stroke:var(--map-label-halo);stroke-width:2.5px;vector-effect:non-scaling-stroke;}
.home-live-gps-svg #m-airports circle{fill:var(--map-airport);stroke:var(--map-label-halo);stroke-width:1.2;vector-effect:non-scaling-stroke;r:var(--map-dot-r,3px);}
.home-live-gps-svg #m-airport-labels text{fill:var(--map-airport);font-family:'Inter',sans-serif;font-weight:700;paint-order:stroke;stroke:var(--map-label-halo);stroke-width:2.5px;vector-effect:non-scaling-stroke;}

/* One class per layer, so toggling is a single class on the container rather
   than touching thousands of nodes. */
.home-live-gps-map.layer-off-cities .home-live-gps-svg #m-places,
.home-live-gps-map.layer-off-cities .home-live-gps-svg #m-labels,
.home-live-gps-map.layer-off-sea .home-live-gps-svg #m-sea-labels,
.home-live-gps-map.layer-off-lakes .home-live-gps-svg #m-lakes,
.home-live-gps-map.layer-off-lakes .home-live-gps-svg #m-lake-labels,
.home-live-gps-map.layer-off-islands .home-live-gps-svg #m-islands,
.home-live-gps-map.layer-off-reefs .home-live-gps-svg #m-reefs,
.home-live-gps-map.layer-off-airports .home-live-gps-svg #m-airports,
.home-live-gps-map.layer-off-airports .home-live-gps-svg #m-airport-labels,
.home-live-gps-map.layer-off-borders .home-live-gps-svg #m-borders,
.home-live-gps-map.layer-off-states .home-live-gps-svg #m-states,
.home-live-gps-map.layer-off-grid .home-live-gps-svg #m-grid,
.home-live-gps-map.layer-off-grid .home-live-gps-svg #m-equator{display:none;}

.home-map-layers{position:absolute;z-index:6;right:12px;bottom:54px;display:flex;flex-direction:column;gap:2px;min-width:168px;padding:10px 12px;border:1px solid var(--map-border);border-radius:12px;background:var(--map-panel);backdrop-filter:blur(10px);box-shadow:0 8px 26px rgba(0,0,0,.28);}
.home-map-layers[hidden]{display:none;}
.home-map-layers strong{margin-bottom:5px;color:var(--map-label);font:800 9px 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;}
.home-map-layer-row{display:flex;align-items:center;gap:8px;padding:3px 0;color:var(--map-label);font:600 11.5px 'Inter',sans-serif;cursor:pointer;}
.home-map-layer-row input{width:15px;height:15px;margin:0;accent-color:#1a73e8;cursor:pointer;}
.home-live-gps-map.is-fullscreen .home-map-layers{right:20px;bottom:62px;}

/* ---- Ports, maritime limits, roads, time zones ---- */
.home-live-gps-svg #m-ports circle{fill:var(--map-port);stroke:var(--map-label-halo);stroke-width:1.2;vector-effect:non-scaling-stroke;r:var(--map-dot-r,3px);}
.home-live-gps-svg #m-port-labels text{fill:var(--map-port);font-family:'Inter',sans-serif;font-weight:700;paint-order:stroke;stroke:var(--map-label-halo);stroke-width:2.5px;vector-effect:non-scaling-stroke;}
.home-live-gps-svg #m-maritime path{fill:none;stroke:var(--map-sea-label);stroke-width:1;stroke-dasharray:5 4;opacity:.8;vector-effect:non-scaling-stroke;}
.home-live-gps-svg #m-roads path{fill:none;stroke:var(--map-road);stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;}
.home-live-gps-svg #m-timezones path{fill:none;stroke:var(--map-tz);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke;}
.home-live-gps-svg #m-tz-labels text{fill:var(--map-tz);font-family:'Inter',sans-serif;font-weight:700;text-anchor:middle;paint-order:stroke;stroke:var(--map-label-halo);stroke-width:2.5px;vector-effect:non-scaling-stroke;}

.home-live-gps-map.layer-off-ports .home-live-gps-svg #m-ports,
.home-live-gps-map.layer-off-ports .home-live-gps-svg #m-port-labels,
.home-live-gps-map.layer-off-maritime .home-live-gps-svg #m-maritime,
.home-live-gps-map.layer-off-roads .home-live-gps-svg #m-roads,
.home-live-gps-map.layer-off-timezones .home-live-gps-svg #m-timezones,
.home-live-gps-map.layer-off-timezones .home-live-gps-svg #m-tz-labels{display:none;}

/* ---- Rivers, geographic lines, bathymetry ---- */
.home-live-gps-svg #m-rivers path{fill:none;stroke:var(--map-water-deep);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;}
.home-live-gps-svg #m-geolines path{fill:none;stroke:var(--map-equator);stroke-width:1.2;stroke-dasharray:7 5;vector-effect:non-scaling-stroke;}
/* Nested depth bands: each deeper contour sits on the one above it, so opacity
   stacks into the familiar darker-is-deeper shading. */
.home-live-gps-svg #m-bathymetry .bath path{stroke:none;}
.home-live-gps-svg #m-bathymetry .b1 path{fill:var(--map-bath-1);}
.home-live-gps-svg #m-bathymetry .b2 path{fill:var(--map-bath-2);}
.home-live-gps-svg #m-bathymetry .b3 path{fill:var(--map-bath-3);}
.home-live-gps-svg #m-bathymetry .b4 path{fill:var(--map-bath-4);}
.home-live-gps-svg #m-bathymetry .b5 path{fill:var(--map-bath-5);}
.home-live-gps-map.layer-off-rivers .home-live-gps-svg #m-rivers,
.home-live-gps-map.layer-off-geolines .home-live-gps-svg #m-geolines,
.home-live-gps-map.layer-off-bathymetry .home-live-gps-svg #m-bathymetry{display:none;}

/* ---- Map: country names, controls and the marker popup (v10) ---- */
/* Country names read as land labels: upright, spaced, with a halo so they stay
   legible over coastlines and borders. The map had no country names at all -
   only oceans - which made it hard to tell where you were looking. */
.home-live-gps-svg #m-country-labels text{fill:var(--map-label);font-family:'Inter',sans-serif;font-weight:600;letter-spacing:.06em;paint-order:stroke;stroke:var(--map-label-halo);stroke-width:2.6px;vector-effect:non-scaling-stroke;}
.home-live-gps-map.map-hide-labels .home-live-gps-svg #m-country-labels{display:none;}
.home-live-gps-map.layer-off-countries .home-live-gps-svg #m-country-labels{display:none;}

/* The layers switchboard belongs to full screen. In the small card it covered
   most of the map it was meant to configure. */
.home-live-gps-map-controls [data-map-action="layers"]{display:none;}
.home-live-gps-map.is-fullscreen .home-live-gps-map-controls [data-map-action="layers"]{display:block;}
/* Full screen raises the control buttons to the top of the stack; the panel
   they open kept its ordinary z-index and so opened UNDERNEATH them. */
.home-live-gps-map.is-fullscreen .home-map-layers{z-index:2147483004;}

/* Icon buttons (recenter) need to size their glyph like the text ones. */
.home-live-gps-map-controls button svg{display:block;width:21px;height:21px;margin:0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:transform .18s ease,stroke-width .18s ease}.home-live-gps-map-controls button:hover svg{transform:scale(1.08);stroke-width:2}.home-live-gps-map-controls button:active svg{transform:scale(.94)}.home-live-gps-map-controls button:focus-visible{outline:2px solid rgba(111,207,225,.9);outline-offset:2px}

/* Coordinates appear at the marker that was tapped. */
.home-map-node-popup{position:absolute;z-index:2147483005;display:flex;flex-direction:column;gap:1px;max-width:200px;padding:7px 10px;border:1px solid var(--map-border);border-radius:10px;background:var(--map-panel);backdrop-filter:blur(10px);box-shadow:0 8px 22px rgba(0,0,0,.3);pointer-events:none;}
.home-map-node-popup[hidden]{display:none;}
.home-map-node-popup strong{color:var(--map-label);font:700 11.5px 'Inter',sans-serif;}
.home-map-node-popup span{color:var(--map-label);font:600 11px/1.35 'Inter',sans-serif;font-variant-numeric:tabular-nums;}
.home-map-node-popup em{margin-top:2px;color:var(--map-sea-label);font:600 9.5px 'Inter',sans-serif;font-style:normal;}
.home-map-node-popup::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;margin-left:-5px;border-right:1px solid var(--map-border);border-bottom:1px solid var(--map-border);background:var(--map-panel);transform:rotate(45deg);}
.home-map-node-popup.is-below::after{top:-6px;bottom:auto;border:0;border-top:1px solid var(--map-border);border-left:1px solid var(--map-border);}
.ss-map-node{cursor:pointer;}

/* Full screen keeps only what a watchkeeper reads at a glance. */
.home-live-gps-map.is-fullscreen .home-live-gps-overlay{left:auto;right:14px;width:auto;max-width:min(280px,60vw);}
.home-live-gps-map.is-fullscreen .home-live-gps-overlay-grid{grid-template-columns:repeat(2,minmax(0,1fr));}

/* ---- Map: wrapping world and the full-width readout (v12) ---- */
/* The two repeated copies of the world are decoration only: taps must reach
   the real markers in the middle copy, never a clone. */
.home-live-gps-svg .ss-map-wrap{pointer-events:none;}

/* Heading and speed read as a header across the top of the full-screen map,
   one at each end, rather than a floating card in the corner. */
.home-live-gps-map.is-fullscreen .home-live-gps-overlay{left:0;right:0;top:0;width:auto;max-width:none;padding:calc(9px + env(safe-area-inset-top,0px)) 16px 9px;border:0;border-bottom:1px solid var(--map-border);border-radius:0;}
.home-live-gps-map.is-fullscreen .home-live-gps-overlay-grid{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%;}
.home-live-gps-map.is-fullscreen .home-live-gps-overlay-grid span{flex-direction:row;align-items:baseline;gap:7px;white-space:nowrap;}
.home-live-gps-map.is-fullscreen .home-live-gps-overlay-grid span:last-child{justify-content:flex-end;}
.home-live-gps-map.is-fullscreen .home-live-gps-overlay-grid b{white-space:nowrap;}
/* Small lakes carried a label rank that put them on screen at world zoom, so
   "Ozero Yambuto" appeared while whole countries did not. Hold them back until
   the view is regional. */
.home-live-gps-svg[data-zoom-tier="1"] #m-lake-labels{display:none;}
.home-live-gps-svg[data-zoom-tier="2"] #m-lake-labels .lv2{display:none;}

/* ---- Map: the small card is a status view, not a chart table (v14) ---- */
/* Place names are unreadable at card size and only crowd out the two markers
   that matter, so the small map carries no lettering at all. Full screen keeps
   every label. */
.home-live-gps-map:not(.is-fullscreen) .home-live-gps-svg text{display:none;}
/* No panning or pinching until it is opened full screen. */
.home-live-gps-map:not(.is-fullscreen){cursor:default;touch-action:auto;}
.home-live-gps-map:not(.is-fullscreen) .home-live-gps-svg{touch-action:auto;}

/* ---- Owner member directory: search, filters, sortable columns (v15) ---- */
.sc-admin-toolbar{display:flex;flex-direction:column;gap:8px;margin:10px 0 8px;}
.sc-admin-search{width:100%;padding:9px 12px;border:1px solid var(--navy-line,rgba(127,184,207,.28));border-radius:10px;background:rgba(255,255,255,.06);color:inherit;font:500 13px 'Inter',sans-serif;}
.sc-admin-search::placeholder{color:var(--text-muted,#9fb2c4);}
.sc-admin-filter-row{display:flex;flex-wrap:wrap;gap:6px;}
.sc-admin-filter{flex:1 1 auto;min-width:0;}
.sc-admin-filter select{width:100%;padding:7px 9px;border:1px solid var(--navy-line,rgba(127,184,207,.28));border-radius:9px;background:rgba(255,255,255,.06);color:inherit;font:600 12px 'Inter',sans-serif;}
.sc-admin-filter-reset{flex:0 0 auto;padding:7px 13px;border:1px solid var(--navy-line,rgba(127,184,207,.28));border-radius:9px;background:transparent;color:inherit;font:600 12px 'Inter',sans-serif;cursor:pointer;}
.sc-admin-filter-reset:hover{background:rgba(255,255,255,.08);}
html[data-theme="light"] .sc-admin-search,
html[data-theme="light"] .sc-admin-filter select{background:rgba(255,255,255,.85);border-color:rgba(19,72,91,.25);}
/* Sortable headers stay looking like headers; the arrow carries the state. */
.sc-admin-table th .sc-admin-sort{display:inline-flex;align-items:center;gap:3px;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;}
.sc-admin-table th .sc-admin-sort:hover{text-decoration:underline;}
.sc-admin-table th .sc-admin-sort.is-active{color:var(--accent,#6fcfe1);}
.sc-admin-sort-mark{opacity:.55;font-size:9px;}
.sc-admin-sort.is-active .sc-admin-sort-mark{opacity:1;}
.sc-admin-empty{padding:18px 10px;color:var(--text-muted,#9fb2c4);font:500 12.5px 'Inter',sans-serif;text-align:center;}
/* A control that cannot apply yet should read as unavailable, not as broken. */
.sc-admin-detail-field.is-disabled{opacity:.5;}
.sc-admin-detail-field.is-disabled select{cursor:not-allowed;}

/* ---- Live Position Map: headings, switches and shared member nodes (v16) ---- */
/* The card heading used to be a flex row with the GPS button on the right, so
   the title's position depended on whether that button was showing. The title
   is a title: it starts at the left edge and stays there. */
.home-live-gps-heading{display:block;text-align:left;}
.home-live-gps-heading-copy{display:block;text-align:left;}
.home-live-gps-card h2,.home-live-gps-status{text-align:left;}

/* Switches sit on the map, which means they are still there in full screen. */
.home-live-gps-switches{position:absolute;z-index:6;left:12px;top:12px;display:flex;flex-wrap:wrap;gap:6px;}
.home-live-gps-map.is-fullscreen .home-live-gps-switches{left:calc(14px + env(safe-area-inset-left,0px));top:calc(58px + env(safe-area-inset-top,0px));}
.home-gps-switch{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 7px;border:1px solid var(--map-border);border-radius:999px;background:var(--map-panel);backdrop-filter:blur(10px);box-shadow:0 3px 12px rgba(0,0,0,.22);cursor:pointer;user-select:none;}
.home-gps-switch input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.home-gps-switch-track{position:relative;flex:0 0 auto;width:32px;height:18px;border-radius:999px;background:rgba(128,150,165,.45);transition:background .18s ease;}
.home-gps-switch-thumb{position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .18s ease;}
.home-gps-switch input:checked + .home-gps-switch-track{background:#1a73e8;}
.home-gps-switch input:checked + .home-gps-switch-track .home-gps-switch-thumb{transform:translateX(14px);}
.home-gps-switch input:focus-visible + .home-gps-switch-track{outline:2px solid #1a73e8;outline-offset:2px;}
.home-gps-switch-label{color:var(--map-label);font:700 11px 'Inter',sans-serif;white-space:nowrap;}
.home-gps-switch-label small{display:block;font:600 9px 'Inter',sans-serif;opacity:.7;}
.home-gps-switch.is-disabled{opacity:.45;cursor:not-allowed;}
.home-gps-switch.is-disabled .home-gps-switch-track{background:rgba(128,150,165,.35);}

/* A shared member reads as a third kind of marker: not you, not your ship. */
.ss-map-node-member .ss-map-node-halo{fill:rgba(46,160,102,.18);}
.ss-map-node-member-dot{fill:#2ea066;stroke:#fff;stroke-width:2.5;vector-effect:non-scaling-stroke;}
.ss-map-node-member .ss-map-node-label{fill:var(--map-label);font:600 10.5px 'Inter',sans-serif;paint-order:stroke;stroke:var(--map-label-halo);stroke-width:3px;vector-effect:non-scaling-stroke;}
.home-live-gps-legend .is-member::before{background:#2ea066;}

/* ---- Post photos, chat header and the opening screen (v17) ---- */
/* A single photo was forced into a 4:3 cell and cropped to fill it, so a
   portrait picture lost its top and bottom in the feed. One photo now keeps
   its own shape; collages of two or more still crop, which is what makes a
   grid read as a grid. */
.sc-feed-post-images-1 .sc-feed-post-image-cell{aspect-ratio:auto;}
.sc-feed-post .sc-feed-post-images-1 .sc-admin-post-image{width:100%;height:auto;max-height:72vh;object-fit:contain;background:rgba(4,20,31,.6);}
.sc-feed-post-images-more-full img{width:100%;height:auto;max-height:80vh;object-fit:contain;background:rgba(4,20,31,.6);}

/* The assistant header must stay put while the keyboard is open. */
.ai-chat-header{position:sticky;top:0;z-index:3;}

/* The opening screen. Styles live here as well as inline in the document head
   so the card keeps its look if it is still on screen once the stylesheet has
   loaded. */
.sc-splash{position:fixed;inset:0;z-index:2147483600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#0B121E;transition:opacity .38s ease;}
.sc-splash img{width:112px;height:112px;border-radius:26px;box-shadow:0 18px 40px rgba(0,0,0,.45);}
.sc-splash-name{color:#f3f7fb;font:800 17px/1 'Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase;}
.sc-splash-tag{margin-top:-8px;color:#8fb0c4;font:600 11px/1 'Inter',sans-serif;letter-spacing:.06em;}
.sc-splash.is-leaving{opacity:0;pointer-events:none;}

/* ---- Skeleton placeholders (v18) ----
   Shown in the markup itself, so the Home screen has its own shape on the very
   first paint instead of an empty column that snaps into place a moment later.
   renderHomeDashboard() replaces the whole container, which removes these. */
@keyframes sc-skeleton-sweep{0%{background-position:180% 0;}100%{background-position:-80% 0;}}
.sk{position:relative;overflow:hidden;border-radius:8px;
    background:linear-gradient(90deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.13) 45%,rgba(255,255,255,.05) 90%);
    background-size:220% 100%;animation:sc-skeleton-sweep 1.5s ease-in-out infinite;}
html[data-theme="light"] .sk{background:linear-gradient(90deg,rgba(16,42,66,.06) 0%,rgba(16,42,66,.13) 45%,rgba(16,42,66,.06) 90%);background-size:220% 100%;}
@media (prefers-reduced-motion:reduce){.sk{animation:none;}}

.sc-skeleton-home{display:flex;flex-direction:column;gap:14px;}
.sc-skeleton-home .sk-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:16px;
  border:1px solid rgba(127,184,207,.14);background:rgba(255,255,255,.03);}
html[data-theme="light"] .sc-skeleton-home .sk-card{border-color:rgba(31,75,91,.12);background:rgba(255,255,255,.55);}
.sc-skeleton-home .sk-line{height:12px;}
.sc-skeleton-home .sk-line.sk-sm{height:9px;}
.sc-skeleton-home .sk-w-35{width:35%;}
.sc-skeleton-home .sk-w-40{width:40%;}
.sc-skeleton-home .sk-w-45{width:45%;}
.sc-skeleton-home .sk-w-55{width:55%;}
.sc-skeleton-home .sk-w-65{width:65%;}
.sc-skeleton-home .sk-w-70{width:70%;}
.sc-skeleton-home .sk-w-75{width:75%;}
.sc-skeleton-home .sk-welcome{padding-right:76px;}
.sc-skeleton-home .sk-avatar{position:absolute;right:16px;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;}
.sc-skeleton-home .sk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.sc-skeleton-home .sk-mini{gap:8px;padding:13px 12px;}
.sc-skeleton-home .sk-chip{width:26px;height:26px;border-radius:9px;}
.sc-skeleton-home .sk-donuts{display:flex;justify-content:space-between;gap:12px;margin:4px 0 2px;}
.sc-skeleton-home .sk-donut{flex:1 1 0;aspect-ratio:1/1;max-width:78px;border-radius:50%;}
.sc-skeleton-home .sk-bar{height:14px;border-radius:999px;}
.sc-skeleton-home .sk-ship{flex-direction:row;align-items:center;gap:13px;}
.sc-skeleton-home .sk-thumb{width:74px;height:74px;flex:0 0 auto;border-radius:12px;}
.sc-skeleton-home .sk-ship-copy{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0;}
.sc-skeleton-home .sk-map{height:170px;border-radius:14px;}
@media(max-width:520px){.sc-skeleton-home .sk-map{height:150px;}}

/* Feed and table loading states. */
.sc-skeleton-feed{display:flex;flex-direction:column;gap:14px;margin-top:12px;}
.sc-skeleton-feed .sk-post{display:flex;flex-direction:column;gap:9px;padding:14px;border-radius:14px;
  border:1px solid rgba(140,221,248,.16);background:rgba(10,42,64,.5);}
html[data-theme="light"] .sc-skeleton-feed .sk-post{border-color:rgba(31,75,91,.12);background:rgba(255,255,255,.55);}
.sc-skeleton-feed .sk-post-head{display:flex;align-items:center;gap:10px;}
.sc-skeleton-feed .sk-avatar{width:34px;height:34px;flex:0 0 auto;border-radius:50%;}
.sc-skeleton-feed .sk-post-meta{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0;}
.sc-skeleton-feed .sk-line{height:11px;}
.sc-skeleton-feed .sk-line.sk-sm{height:8px;}
.sc-skeleton-feed .sk-w-30{width:30%;}
.sc-skeleton-feed .sk-w-45{width:45%;}
.sc-skeleton-feed .sk-w-55{width:55%;}
.sc-skeleton-feed .sk-w-70{width:70%;}
.sc-skeleton-feed .sk-w-85{width:85%;}
.sc-skeleton-feed .sk-photo{height:190px;border-radius:12px;margin-top:3px;}

.sc-skeleton-rows{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.sc-skeleton-rows .sk-row{display:flex;align-items:center;gap:12px;padding:14px 12px;border-radius:12px;
  border:1px solid rgba(127,184,207,.14);background:rgba(255,255,255,.03);}
html[data-theme="light"] .sc-skeleton-rows .sk-row{border-color:rgba(31,75,91,.12);background:rgba(255,255,255,.55);}
.sc-skeleton-rows .sk-line{height:11px;}
.sc-skeleton-rows .sk-w-20{width:20%;}
.sc-skeleton-rows .sk-w-25{width:25%;}
.sc-skeleton-rows .sk-w-45{width:45%;}

/* A post opened on its own page is the page - it should not also be drawn as a
   card floating on that page. The card chrome came from .sc-feed-post, which
   the detail view reuses for its markup; in dark mode that left a visible box
   around the text the design asks to be flat. */
#sc-post-detail-panel .sc-feed-post{margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;}
#sc-post-detail-panel .sc-feed-post-header{padding:0 0 6px;}
#sc-post-detail-panel .sc-feed-post-footer{border-top:0;padding-left:0;padding-right:0;}

/* ---- Help Center: topic index (v21) ---- */
.about-topic-list{display:flex;flex-direction:column;gap:1px;margin:16px 0 4px;border-radius:12px;overflow:hidden;}
.about-topic-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 15px;
  border:0;border-bottom:1px solid var(--navy-line,rgba(127,184,207,.16));background:rgba(255,255,255,.04);
  color:inherit;font:600 13.5px/1.35 'Inter',sans-serif;text-align:left;cursor:pointer;}
.about-topic-row:last-child{border-bottom:0;}
.about-topic-row:hover,.about-topic-row:focus-visible{background:rgba(255,255,255,.09);outline:none;}
.about-topic-row b{flex:0 0 auto;opacity:.5;font-size:16px;}
html[data-theme="light"] .about-topic-row{background:rgba(16,42,66,.045);border-bottom-color:rgba(31,75,91,.12);}
html[data-theme="light"] .about-topic-row:hover,html[data-theme="light"] .about-topic-row:focus-visible{background:rgba(16,42,66,.09);}
.about-topic-back{margin-top:22px;padding:10px 15px;border:1px solid var(--navy-line,rgba(127,184,207,.22));border-radius:999px;
  background:transparent;color:inherit;font:600 12.5px 'Inter',sans-serif;cursor:pointer;}
.about-topic-back:hover{background:rgba(255,255,255,.07);}
html[data-theme="light"] .about-topic-back{border-color:rgba(31,75,91,.2);}
html[data-theme="light"] .about-topic-back:hover{background:rgba(16,42,66,.06);}

/* Help Center: procedures and diagrams (v22) */
.about-steps{margin:10px 0 4px;padding-left:0;list-style:none;counter-reset:about-step;}
.about-steps li{position:relative;margin:0 0 9px;padding-left:32px;font:500 13.5px/1.6 'Inter',sans-serif;counter-increment:about-step;}
.about-steps li::before{content:counter(about-step);position:absolute;left:0;top:1px;display:grid;place-items:center;
  width:21px;height:21px;border-radius:50%;background:var(--sc-help-accent,#2aabee);color:#04121c;
  font:800 11px 'Inter',sans-serif;}
.about-diagram{--sc-help-accent:#2aabee;--sc-help-warm:#e0b15c;
  margin:4px 0 20px;padding:12px;border:1px solid var(--navy-line,rgba(127,184,207,.18));border-radius:14px;
  background:rgba(255,255,255,.035);}
.about-diagram svg{display:block;width:100%;height:auto;color:inherit;}
html[data-theme="light"] .about-diagram{background:rgba(16,42,66,.035);border-color:rgba(31,75,91,.14);}
html[data-theme="light"] .about-steps li::before{background:#1778c2;color:#fff;}

/* ---------- v25: owner diagnostics ---------- */
.sc-admin-error{align-items:flex-start;}
.sc-admin-error>div{min-width:0;flex:1;}
.sc-admin-error strong{display:block;word-break:break-word;line-height:1.35;}
.sc-admin-error-meta{margin:4px 0 0;font-size:12px;opacity:.7;}
.sc-admin-error-where{margin:2px 0 0;font-size:12px;opacity:.55;word-break:break-all;}
.sc-admin-error-stack{margin-top:6px;}
.sc-admin-error-stack summary{font-size:12px;opacity:.65;cursor:pointer;list-style:none;}
.sc-admin-error-stack summary::-webkit-details-marker{display:none;}
.sc-admin-error-stack summary::before{content:'\25B8 ';}
.sc-admin-error-stack[open] summary::before{content:'\25BE ';}
.sc-admin-error-stack pre{margin:6px 0 0;padding:8px 10px;border-radius:8px;font-size:11px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;max-height:220px;overflow:auto;
  background:color-mix(in srgb, currentColor 7%, transparent);}

/* ---------- v28: feedback dialog + audit list ---------- */
.sc-feedback-overlay[hidden]{display:none !important;}
.sc-feedback-overlay{position:fixed;inset:0;z-index:2147483400;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(6,10,18,.62);backdrop-filter:blur(3px);}
.sc-feedback-card{width:100%;max-width:440px;display:flex;flex-direction:column;gap:12px;padding:20px;
  border-radius:16px;background:var(--popup-surface);color:var(--offwhite);
  box-shadow:0 24px 60px rgba(0,0,0,.35);max-height:90dvh;overflow:auto;}
.sc-feedback-card h2{margin:0;font-size:18px;}
.sc-feedback-intro{margin:0;font-size:13px;line-height:1.5;opacity:.72;}
.sc-feedback-kinds{display:flex;gap:8px;flex-wrap:wrap;}
.sc-feedback-kinds label{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;padding:0 12px;border-radius:10px;cursor:pointer;font-size:13px;
  border:1px solid color-mix(in srgb, currentColor 18%, transparent);}
.sc-feedback-kinds input{accent-color:currentColor;}
.sc-feedback-kinds label:has(input:checked){border-color:currentColor;
  background:color-mix(in srgb, currentColor 9%, transparent);font-weight:600;}
#sc-feedback-message{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;font:inherit;
  color:inherit;background:color-mix(in srgb, currentColor 5%, transparent);resize:vertical;
  border:1px solid color-mix(in srgb, currentColor 18%, transparent);}
#sc-feedback-message::placeholder{color:var(--offwhite-dim);opacity:1;}
.sc-feedback-message{min-height:18px;font-size:12.5px;line-height:1.45;opacity:.8;}
.sc-feedback-message.is-error{color:#d6455d;opacity:1;}
.sc-feedback-actions{display:flex;gap:10px;justify-content:flex-end;}
.sc-feedback-actions button{min-height:44px;padding:0 18px;border-radius:10px;font:inherit;font-weight:600;cursor:pointer;}
.sc-feedback-cancel{background:none;color:inherit;border:1px solid color-mix(in srgb, currentColor 20%, transparent);}
.sc-feedback-send{border:0;background:#2AABEE;color:#06233a;}
.sc-feedback-send:active{transform:scale(.98);}
.sc-feedback-send:disabled{opacity:.6;cursor:wait;}

.sc-admin-audit{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;
  max-height:280px;overflow:auto;}
.sc-admin-audit li{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:8px;font-size:12.5px;}
.sc-admin-audit li:nth-child(odd){background:color-mix(in srgb, currentColor 5%, transparent);}
.sc-admin-audit code{font-size:12px;font-weight:600;}
.sc-admin-audit span{font-size:11.5px;opacity:.62;}

/* ---------- v31: build tag ---------- */
#settings-build-tag{font-variant-numeric:tabular-nums;opacity:.7;}
#settings-build-tag.is-mismatch{opacity:1;color:#d6455d;font-weight:600;}

/* ---------- v33: authenticator code field ---------- */
/* letter-spacing also adds a gap AFTER the last digit, so centred text sits
   left of true centre and the caret appears to stand outside the digits.
   Indenting by the same amount cancels the trailing gap. */
.settings-mfa-code-field input{text-indent:.22em;}

/* Live map fullscreen portal: explicit viewport geometry avoids mobile fixed-position containment. */
.home-live-gps-map.is-fullscreen{position:fixed!important;z-index:2147483000!important;top:0!important;right:0!important;bottom:0!important;left:0!important;width:100vw!important;height:100vh!important;min-height:0!important;}

  .learning-hub-tutor-composer{display:flex;align-items:center;min-width:0;}
  .learning-hub-tutor-composer textarea{order:1;display:block;width:auto;min-width:0;min-height:30px;height:30px;max-height:118px;flex:1 1 auto;margin:0;padding:4px 6px;border:0;border-radius:8px;background:transparent;color:var(--offwhite);font:500 13px/1.45 'Inter',sans-serif;resize:none;overflow-y:auto;outline:0;box-shadow:none;}
  .learning-hub-tutor-composer textarea:focus{border:0;outline:0;box-shadow:none;}
  .learning-hub-tutor-composer .learning-hub-tutor-level-badge{order:0;}
  .learning-hub-tutor-composer .learning-hub-tutor-send{order:2;}
  .learning-hub-tutor-composer:focus-within{min-height:48px;}

  .learning-hub-slide-card{padding:18px 16px;border:1px solid rgba(140,221,248,.2);border-radius:16px;background:linear-gradient(145deg,rgba(42,171,238,.08),rgba(224,177,92,.045));color:var(--offwhite);}
  .learning-hub-slide-title{margin:0;color:var(--offwhite);font-family:'Spectral',serif;font-size:25px;line-height:1.22;}
  .learning-hub-slide-body{margin-top:14px;color:var(--offwhite);font-size:15px;line-height:1.7;overflow-wrap:anywhere;}
  .learning-hub-slide-visual{margin:-2px -2px 16px;overflow:hidden;border-radius:12px;background:var(--well-bg);}
  .learning-hub-slide-visual img{display:block;width:100%;height:auto;max-height:300px;object-fit:cover;}
  .learning-hub-slide-section{margin:18px 0 0;padding:12px 13px;border-left:3px solid var(--brass-light);border-radius:0 10px 10px 0;background:var(--well-bg);}
  .learning-hub-slide-section strong{display:block;margin-bottom:5px;color:var(--brass-light);font-size:11px;letter-spacing:.04em;text-transform:uppercase;}
  .learning-hub-slide-section p{margin:0;color:var(--offwhite);font-size:13px;line-height:1.6;overflow-wrap:anywhere;}
  .learning-hub-slide-section.is-safety{border-left-color:#e17d69;}
  .learning-hub-slide-section.is-takeaway{border-left-color:#62d69a;}
  @media(max-width:680px){.learning-hub-slide-card{padding:15px 13px;}.learning-hub-slide-title{font-size:23px;}.learning-hub-slide-body{font-size:14px;}.learning-hub-slide-visual img{max-height:240px;}}

/* Phase E-2: compact visual slide progress and touch-friendly navigation. */
.learning-hub-slide-progress-wrap{display:flex;align-items:center;gap:8px;margin-top:8px;max-width:320px}
.learning-hub-slide-progress{height:7px;flex:1;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(140,221,248,.22)}
.learning-hub-slide-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8cddf8,#e0b15c);transition:width .2s ease}
.learning-hub-slide-progress-label{min-width:38px;color:var(--offwhite);font-size:12px;font-weight:700;text-align:right}
.learning-hub-slide-card{touch-action:pan-y}
.learning-hub-reader-nav{display:flex;gap:10px;margin:16px 0 20px}
.learning-hub-reader-nav button{min-height:44px;flex:1;padding:10px 14px;border:1px solid rgba(140,221,248,.28);border-radius:12px;background:rgba(19,58,76,.72);color:var(--offwhite);font:700 14px/1.2 Inter,sans-serif;cursor:pointer}
.learning-hub-reader-nav button:last-child{background:linear-gradient(135deg,rgba(44,141,184,.9),rgba(183,132,56,.88))}
.learning-hub-reader-nav button:disabled{cursor:not-allowed;opacity:.45}
@media(max-width:680px){.learning-hub-reader-nav{position:relative;margin:14px 0 18px}.learning-hub-reader-nav button{font-size:13px;padding-inline:10px}}

/* Phase E-3: published quiz-pool eligibility cards. */
.learning-hub-quiz-pools{margin:20px 0}
.learning-hub-quiz-pool-list{display:grid;gap:10px}
.learning-hub-quiz-pool-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px solid var(--navy-line);border-radius:14px;background:var(--well-bg)}
.learning-hub-quiz-pool-card.is-ready{border-color:rgba(140,221,248,.5);background:rgba(42,171,238,.08)}
.learning-hub-quiz-pool-card strong{color:var(--offwhite);font-size:14px}
.learning-hub-quiz-pool-card p{margin:4px 0 0;color:var(--offwhite-dim);font-size:12px}
.learning-hub-quiz-pool-card button{min-width:76px;min-height:40px;padding:8px 12px;border:1px solid rgba(140,221,248,.35);border-radius:10px;background:rgba(19,58,76,.72);color:var(--offwhite);font:700 12px/1 Inter,sans-serif;cursor:pointer}
.learning-hub-quiz-pool-card.is-ready button{background:linear-gradient(135deg,rgba(44,141,184,.9),rgba(183,132,56,.88))}
.learning-hub-quiz-pool-card button:disabled{cursor:not-allowed;opacity:.5}

/* v1.41.1 Learning Hub responsive corrections: keep title/progress rows inside cards. */
.learning-hub-course-title-row,.learning-hub-category-title-row{min-width:0;align-items:center;}
.learning-hub-course-title-row h2,.learning-hub-category-title-row h2{flex:1 1 auto;min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
.learning-hub-course-progress,.learning-hub-category-progress{flex:0 1 auto;min-width:0;}
.learning-hub-course-progress .learning-hub-inline-progress-track,.learning-hub-category-progress .learning-hub-inline-progress-track{width:clamp(28px,9vw,42px);}
.learning-hub-reader-nav .btn-cancel,.learning-hub-reader-nav .btn-save-ship,.learning-hub-quiz-pool-card .btn-cancel,.learning-hub-quiz-pool-card .btn-save-ship,.learning-quiz-cta .btn-save-ship{font:700 12px 'Inter',sans-serif;}
.learning-hub-reader-nav .btn-cancel,.learning-hub-quiz-pool-card .btn-cancel{background:rgba(255,255,255,.05);border:1px solid var(--navy-line);color:var(--offwhite-dim);}
.learning-hub-reader-nav .btn-save-ship,.learning-hub-quiz-pool-card .btn-save-ship,.learning-quiz-cta .btn-save-ship{background:var(--brass);border:1px solid var(--brass);color:var(--on-brass);box-shadow:none;}
.learning-hub-reader-nav button:hover:not(:disabled),.learning-hub-quiz-pool-card button:hover:not(:disabled),.learning-quiz-cta button:hover:not(:disabled){filter:brightness(1.06);}
.learning-hub-reader-nav button:focus-visible,.learning-hub-quiz-pool-card button:focus-visible,.learning-quiz-cta button:focus-visible{outline:2px solid var(--brass-light);outline-offset:2px;}
.learning-hub-quiz-pool-card button{background:rgba(255,255,255,.05);border:1px solid var(--navy-line);color:var(--offwhite-dim);}
.learning-hub-quiz-pool-card.is-ready button{background:var(--brass);border-color:var(--brass);color:var(--on-brass);box-shadow:none;}
@media(max-width:420px){.learning-hub-course-title-row,.learning-hub-category-title-row{gap:5px;}.learning-hub-course-progress .learning-hub-inline-progress-track,.learning-hub-category-progress .learning-hub-inline-progress-track{width:24px;}.learning-hub-inline-progress{gap:3px;font-size:9px;}.learning-hub-inline-progress b{font-size:9px;}.learning-hub-lesson-row{grid-template-columns:30px minmax(0,1fr) auto;gap:6px;padding-inline:9px;}.learning-hub-lesson-progress .learning-hub-inline-progress-track{width:24px;}}

/* v1.45.0 Lesson AI Tutor: concise, lesson-derived suggestion chips. */
.learning-hub-tutor-suggestions{display:grid;gap:7px;padding:10px 0 2px;}
.learning-hub-tutor-suggestions strong{color:var(--offwhite-dim);font-size:10px;letter-spacing:.04em;text-transform:uppercase;}
.learning-hub-tutor-suggestion-list{display:flex;flex-wrap:wrap;gap:7px;}
.learning-hub-tutor-suggestion{max-width:100%;padding:8px 10px;border:1px solid rgba(140,221,248,.28);border-radius:999px;background:var(--well-bg);color:var(--offwhite);font:600 11px/1.25 'Inter',sans-serif;text-align:left;overflow-wrap:anywhere;cursor:pointer;}
.learning-hub-tutor-suggestion:hover:not(:disabled){border-color:var(--brass-light);background:rgba(42,171,238,.12);}
.learning-hub-tutor-suggestion:disabled{opacity:.55;cursor:not-allowed;}
@media(max-width:680px){.learning-hub-tutor-suggestion{font-size:10px;padding:8px 9px;}}
:root{
  /* Global card system: the Calculation card is the visual baseline. */
  --sc-card-radius:16px;
  --sc-card-surface:var(--surface-strong,var(--well-bg,#ffffff));
  --sc-card-border:var(--navy-line,rgba(31,75,91,.14));
  /* The Calculation / Report / Ship card values live here now, so the whole
     app has exactly one card elevation. */
  --sc-card-shadow:0 8px 22px rgba(10,49,70,.12),0 2px 6px rgba(10,49,70,.06),inset 0 1px 0 rgba(255,255,255,.72);
  --sc-card-shadow-hover:0 13px 28px rgba(10,49,70,.16),0 4px 10px rgba(10,49,70,.08),inset 0 1px 0 rgba(255,255,255,.8);
}
:root[data-theme="dark"]{
  --sc-card-surface:var(--surface-strong,var(--well-bg,#10263a));
  --sc-card-border:var(--navy-line,rgba(140,221,248,.18));
  --sc-card-shadow:0 9px 24px rgba(0,0,0,.24),0 3px 8px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.05);
  --sc-card-shadow-hover:0 14px 30px rgba(0,0,0,.3),0 5px 12px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.07);
}

/* ---------- Global Card Design System ----------
   These are content surfaces only. Navigation, controls, inputs, and modal
   shells intentionally remain outside the shared card language. */
:where(
  .home-welcome-card,.home-career-card,.home-mini-card,.home-history-section,
  .home-active-ship-card,.home-voyage-card,.home-live-gps-card,.home-empty-state,
  .ship-card,.calc-card,.cargo-calc-card,
  .profile-ss-card,.profile-doc-card,.profile-doc-list-row,.profile-doc-grid-card,
  .profile-service-list-row,.profile-service-grid-card,.profile-photo-card,
  .tank-item,.cert-category-card,.ship-certificate-card,
  .settings-category-card,.settings-account-card,.settings-account-summary,
  .settings-action-row,.settings-info-row,.settings-toggle-row,.settings-select-row,
  .settings-sync-status,.settings-password-form,.settings-offline-callout,
  .tw-overview-card,.tw-wizard-card,.tw-recent-card,.tw-weather-card,
  .ctm-choice-card,.ds-draft-sketch-card,.cg-metric-card,.squat-table-card,
  .squat-table-result-card,.learning-hub-category-card,.learning-hub-course-card,
  .learning-hub-quiz-pool-card,.learning-hub-slide-card,.learning-hub-tutor-card,
  .sc-feedback-card
){
  background:var(--sc-card-surface);
  border:1px solid var(--sc-card-border);
  border-radius:var(--sc-card-radius);
  box-shadow:var(--sc-card-shadow);
  transition:transform .18s ease-out,box-shadow .18s ease-out,background .18s ease-out,border-color .18s ease-out;
}

:where(
  .home-welcome-card,.home-career-card,.home-active-ship-card,.home-voyage-card,
  .home-live-gps-card,.ship-card,.profile-doc-list-row,.profile-doc-grid-card,
  .profile-service-list-row,.settings-category-card,.settings-action-row,
  .settings-toggle-row,.settings-select-row,.ctm-choice-card
):is(:hover,:focus-within){
  transform:translateY(-2px);
  box-shadow:var(--sc-card-shadow-hover);
}
:where(
  .home-welcome-card,.home-career-card,.home-active-ship-card,.home-voyage-card,
  .home-live-gps-card,.ship-card,.profile-doc-list-row,.profile-doc-grid-card,
  .profile-service-list-row,.settings-category-card,.settings-action-row,
  .settings-toggle-row,.settings-select-row,.ctm-choice-card
):active{
  transform:translateY(0) scale(.99);
}

:where(
  .home-welcome-card,.home-career-card,.home-mini-card,.home-history-section,
  .home-active-ship-card,.home-voyage-card,.home-live-gps-card,.home-empty-state,
  .ship-card,.calc-card,.cargo-calc-card,.profile-ss-card,.profile-doc-card,
  .profile-doc-list-row,.profile-doc-grid-card,.profile-service-list-row,
  .profile-service-grid-card,.profile-photo-card,.tank-item,.cert-category-card,
  .ship-certificate-card,.settings-category-card,.settings-account-card,
  .settings-account-summary,.settings-action-row,.settings-info-row,
  .settings-toggle-row,.settings-select-row,.settings-sync-status,
  .settings-password-form,.settings-offline-callout,.tw-overview-card,
  .tw-wizard-card,.tw-recent-card,.tw-weather-card,.ctm-choice-card,
  .ds-draft-sketch-card,.cg-metric-card,.squat-table-card,.squat-table-result-card,
  .learning-hub-category-card,.learning-hub-course-card,.learning-hub-quiz-pool-card,
  .learning-hub-slide-card,.learning-hub-tutor-card,.sc-feedback-card
):focus-visible{
  outline:2px solid color-mix(in srgb,var(--brass-light,#8cddf8) 65%,transparent);
  outline-offset:2px;
}


@media(max-width:420px){
  :where(.home-welcome-card,.home-career-card,.home-history-section,.home-active-ship-card,.home-voyage-card,.home-live-gps-card,.home-empty-state){border-radius:14px;}
}
@media(prefers-reduced-motion:reduce){
  :where(.home-welcome-card,.home-career-card,.home-mini-card,.home-history-section,.home-active-ship-card,.home-voyage-card,.home-live-gps-card,.home-empty-state,.ship-card,.calc-card,.cargo-calc-card,.profile-ss-card,.profile-doc-card,.profile-doc-list-row,.profile-doc-grid-card,.profile-service-list-row,.profile-service-grid-card,.profile-photo-card,.tank-item,.cert-category-card,.ship-certificate-card,.settings-category-card,.settings-account-card,.settings-account-summary,.settings-action-row,.settings-info-row,.settings-toggle-row,.settings-select-row,.settings-sync-status,.settings-password-form,.settings-offline-callout,.tw-overview-card,.tw-wizard-card,.tw-recent-card,.tw-weather-card,.ctm-choice-card,.ds-draft-sketch-card,.cg-metric-card,.squat-table-card,.squat-table-result-card,.learning-hub-category-card,.learning-hub-course-card,.learning-hub-quiz-pool-card,.learning-hub-slide-card,.learning-hub-tutor-card,.sc-feedback-card){transition:none;}
  :where(.home-welcome-card,.home-career-card,.home-active-ship-card,.home-voyage-card,.home-live-gps-card,.ship-card,.profile-doc-list-row,.profile-doc-grid-card,.profile-service-list-row,.settings-category-card,.settings-action-row,.settings-toggle-row,.settings-select-row,.ctm-choice-card):is(:hover,:focus-within){transform:none;}
}

/* ---------- Bottom dock: one geometry, derived from the square ----------
   The select container used to be as wide as its grid cell, so it framed the
   icon+label loosely and by a different amount on every tab. It is now a 1:1
   box, and the whole dock is sized from it so that the space around it is the
   same on all four sides - top, bottom, and the outer edge at the first and
   last tab - and its corner radius is concentric with the dock's own.

     S = square, I = gap on every side, G = gap between squares, B = border
     nav height = 2B + 2(I-B) + S          -> the gap above and below is I
     nav side padding = I - B - G/2        -> the gap outside the end squares is I
     nav width  = 2B + 2(I-B-G/2) + 4(S+G)
     square radius = nav radius - I        -> concentric corners

   The JS is untouched: it still publishes the active tab's real left/width,
   and the square is centred on those two values here.                       */
.bottom-dock-cluster{
  --sc-dock-square:58px;
  --sc-dock-inset:9px;
  --sc-dock-gap:10px;
  --sc-dock-border:1px;
  --sc-dock-height:calc(var(--sc-dock-square) + 2 * var(--sc-dock-inset));
  --sc-dock-radius:calc(var(--sc-dock-height) / 2);
  --sc-dock-pad-y:calc(var(--sc-dock-inset) - var(--sc-dock-border));
  --sc-dock-pad-x:calc(var(--sc-dock-inset) - var(--sc-dock-border) - var(--sc-dock-gap) / 2);
  --sc-dock-width:calc(2 * var(--sc-dock-border) + 2 * var(--sc-dock-pad-x) + 4 * (var(--sc-dock-square) + var(--sc-dock-gap)));
}
.bottom-dock-cluster,
html.sc-ios-standalone .bottom-dock-cluster{
  left:50%!important;
  right:auto!important;
  width:min(var(--sc-dock-width), calc(100% - 32px))!important;
  max-width:none!important;
  transform:translateX(-50%)!important;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav,
html.sc-ios-standalone .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav{
  height:var(--sc-dock-height)!important;
  padding:var(--sc-dock-pad-y) var(--sc-dock-pad-x)!important;
  grid-template-rows:var(--sc-dock-square)!important;
  align-content:center!important;
  border-radius:var(--sc-dock-radius)!important;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button,
html.sc-ios-standalone .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button{
  height:var(--sc-dock-square)!important;
  min-height:var(--sc-dock-square)!important;
  border-radius:calc(var(--sc-dock-radius) - var(--sc-dock-inset))!important;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > .bottom-tabs-liquid-indicator{
  width:var(--sc-dock-square)!important;
  height:var(--sc-dock-square);
  left:calc(var(--liquid-indicator-left,0px) + (var(--liquid-indicator-width,0px) - var(--sc-dock-square)) / 2);
  border-radius:calc(var(--sc-dock-radius) - var(--sc-dock-inset));
  /* One ring, not three: a 1px border plus an inset top highlight plus a drop
     shadow rendered as three concentric arcs on a 3x screen, which is what
     read as a second grey box behind the bubble in dark mode. */
  border:0;
  box-shadow:inset 0 0 0 1px rgba(86,132,163,.34);
}
:root[data-theme="dark"] .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > .bottom-tabs-liquid-indicator{
  box-shadow:inset 0 0 0 1px rgba(140,221,248,.30);
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav.liquid-indicator-moving > .bottom-tabs-liquid-indicator{
  border-radius:42% 58% 54% 46%;
}

/* The square is the only selected-state surface. The tab button behind it is
   its grid cell - wider than the square and with its own corner radius - so
   any background, border or shadow it picks up from an older rule draws a
   second, larger rounded box just outside the square. Neutralise the button's
   own box, and the leftover decorative ring on the icon, inside the dock. */
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button:hover,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button:focus,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button:focus-visible,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button:active,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button.active,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button.active:hover{
  background:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button .tab-icon,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button.active .tab-icon{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button .tab-icon::before,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button .tab-icon::after,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button::before,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > button::after{
  display:none!important;
}

/* Same neutralisation reached through the class the markup actually carries,
   so it holds no matter which selector an older rule used to paint the cell. */
.bottom-dock-cluster .tab-btn,
.bottom-dock-cluster .tab-btn:hover,
.bottom-dock-cluster .tab-btn:focus,
.bottom-dock-cluster .tab-btn:focus-visible,
.bottom-dock-cluster .tab-btn:active,
.bottom-dock-cluster .tab-btn.active,
.bottom-dock-cluster .tab-btn.active:hover,
.bottom-dock-cluster .tab-btn[aria-current],
.bottom-dock-cluster .tab-btn[aria-current="page"]{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
}
.bottom-dock-cluster .tab-btn::before,
.bottom-dock-cluster .tab-btn::after,
.bottom-dock-cluster .tab-btn .tab-icon::before,
.bottom-dock-cluster .tab-btn .tab-icon::after,
.bottom-dock-cluster .tab-btn .tab-label::before,
.bottom-dock-cluster .tab-btn .tab-label::after{
  content:none!important;
  display:none!important;
}
.bottom-dock-cluster .tab-btn .tab-icon,
.bottom-dock-cluster .tab-btn.active .tab-icon,
.bottom-dock-cluster .tab-btn .tab-icon-img{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

/* iOS Safari draws a soft halo about one blur-radius outside a small element
   that carries its own backdrop-filter, so the 58px square came with a ~78px
   disc around it that no element-level rule could remove - it is not an
   element. The dock bar already provides the glass; the square only needs to
   be translucent enough to read as a lens sitting in it. */
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > .bottom-tabs-liquid-indicator{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(132,190,226,.34))!important;
}
:root[data-theme="dark"] .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > .bottom-tabs-liquid-indicator{
  background:linear-gradient(180deg,rgba(140,221,248,.24),rgba(19,48,66,.30))!important;
}

/* ---------- Bottom dock: flat, no glass ----------
   Every glass effect is gone from the dock: no backdrop-filter on the bar or
   on the selection, no gloss overlays, no scale/morph on tab change. The bar
   is a solid rounded surface and the selected tab is a flat tinted rounded
   rectangle behind its icon and label - the pattern used by mainstream mobile
   apps. This also ends the iOS halo for good: a backdrop-filter is what Safari
   was drawing a soft disc around, and the dock no longer has one anywhere.

     P = pill (the selected-tab surface)   I = gap on every side   B = border
     nav height = 2B + 2(I-B) + P   nav side padding = I - B   cell = P
     nav width  = 2B + 2(I-B) + 4P  pill radius = nav radius - I          */
.bottom-dock-cluster{
  --sc-dock-square:58px;                       /* pill height */
  --sc-dock-pill-w:64px;                       /* pill width = one cell */
  --sc-dock-inset:9px;
  --sc-dock-border:1px;
  --sc-dock-height:calc(var(--sc-dock-square) + 2 * var(--sc-dock-inset));
  --sc-dock-radius:calc(var(--sc-dock-height) / 2);
  --sc-dock-pad-y:calc(var(--sc-dock-inset) - var(--sc-dock-border));
  --sc-dock-pad-x:calc(var(--sc-dock-inset) - var(--sc-dock-border));
  --sc-dock-width:calc(2 * var(--sc-dock-border) + 2 * var(--sc-dock-pad-x) + 4 * var(--sc-dock-pill-w));
  --sc-dock-surface:#ffffff;
  --sc-dock-line:rgba(21,30,43,.10);
  --sc-dock-shadow:0 6px 18px rgba(17,24,39,.12);
  --sc-dock-selected:rgba(42,171,238,.14);
}
:root[data-theme="dark"] .bottom-dock-cluster{
  --sc-dock-surface:#16222f;
  --sc-dock-line:rgba(140,221,248,.14);
  --sc-dock-shadow:0 6px 18px rgba(0,0,0,.34);
  --sc-dock-selected:rgba(140,221,248,.16);
}
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav,
html.sc-ios-standalone .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav{
  padding:var(--sc-dock-pad-y) var(--sc-dock-pad-x)!important;
  background:var(--sc-dock-surface)!important;
  border:var(--sc-dock-border) solid var(--sc-dock-line)!important;
  box-shadow:var(--sc-dock-shadow)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
/* the two gloss overlays the glass bar needed */
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav::before,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav::after{
  content:none!important;
  display:none!important;
}
/* the selected tab: a flat tinted rounded rectangle over its whole cell */
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > .bottom-tabs-liquid-indicator{
  left:var(--liquid-indicator-left,0px)!important;
  width:var(--liquid-indicator-width,0px)!important;
  height:var(--sc-dock-square)!important;
  border-radius:calc(var(--sc-dock-radius) - var(--sc-dock-inset))!important;
  background:var(--sc-dock-selected)!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
  transform:none!important;
  will-change:left,width!important;
  transition:left .22s ease,width .22s ease,opacity .16s ease!important;
}
:root[data-theme="dark"] .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav > .bottom-tabs-liquid-indicator{
  background:var(--sc-dock-selected)!important;
  border:0!important;
  box-shadow:none!important;
}
/* no droplet morph on tab change */
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav.liquid-indicator-moving > .bottom-tabs-liquid-indicator{
  transform:none!important;
  border-radius:calc(var(--sc-dock-radius) - var(--sc-dock-inset))!important;
  filter:none!important;
}
/* The dock is centred by .bottom-dock-cluster, so the bar itself must never
   carry a transform. translateX(-50%) here shifted it half its own width to
   the left the moment a touch landed on it. There is no press animation now:
   the touch states only need to leave the bar exactly where it is. */
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav.liquid-touching,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav.liquid-hover,
.bottom-dock-cluster nav.bottom-tabs.telegram-style-nav.liquid-dragging,
html.sc-ios-standalone .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav.liquid-touching,
html.sc-ios-standalone .bottom-dock-cluster nav.bottom-tabs.telegram-style-nav.liquid-hover{
  transform:none!important;
  left:auto!important;
  right:auto!important;
  box-shadow:var(--sc-dock-shadow)!important;
  border-color:var(--sc-dock-line)!important;
}

/* ---------- Compact certificate summary ---------- */
.certificate-summary-card{
  --certificate-summary-valid:#d9f7df;
  --certificate-summary-soon:#fff0df;
  --certificate-summary-expired:#ffe1e1;
  --certificate-summary-none:#e5e7eb;
  box-sizing:border-box;
  width:100%;
  margin:14px 0 14px;
  padding:12px 14px;
  overflow:hidden;
  clip-path:inset(0 round 12px);
  background:var(--well-bg);
  border:1px solid var(--navy-line);
  border-radius:12px;
  box-shadow:var(--glass-shadow);
}
.certificate-summary-heading{
  margin-bottom:10px;
  color:var(--offwhite);
  font:700 12px/1.2 'Inter',sans-serif;
  letter-spacing:.01em;
}
.certificate-summary-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:12px;height:150px;min-width:0;overflow:hidden;}
.certificate-summary-chart-wrap{position:relative;align-self:center;width:min(136px,100%);aspect-ratio:1;margin:auto;border-radius:50%;background:var(--well-bg);}
.certificate-summary-chart{position:absolute;inset:0;border-radius:50%;background:var(--certificate-summary-chart);box-shadow:0 9px 0 rgba(5,20,34,.24),0 12px 20px rgba(5,20,34,.16),inset 0 8px 0 rgba(255,255,255,.22),inset 0 -9px 0 rgba(5,20,34,.26);filter:drop-shadow(0 1px 0 rgba(255,255,255,.12));-webkit-mask:radial-gradient(circle at center,transparent 0 36px,#000 37px);mask:radial-gradient(circle at center,transparent 0 36px,#000 37px);}
.certificate-summary-chart::after{content:'';position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(255,255,255,.16);pointer-events:none;}
.certificate-summary-segment-layer{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;-webkit-tap-highlight-color:transparent;}
.certificate-summary-segment-target{fill:var(--certificate-summary-segment-fill);stroke:transparent;cursor:pointer;pointer-events:all;-webkit-tap-highlight-color:transparent;transition:opacity .16s ease,filter .16s ease,stroke .16s ease;}
.certificate-summary-segment-layer:has(.certificate-summary-segment-target.is-selected) .certificate-summary-segment-target:not(.is-selected){opacity:.42;}
.certificate-summary-segment-target.is-selected{filter:brightness(1.16) saturate(1.18) drop-shadow(0 0 2px rgba(22,111,186,.75));stroke:var(--brass-light);stroke-width:2.4;paint-order:stroke fill;}
.certificate-summary-segment-target:active{fill:var(--certificate-summary-segment-fill);stroke:transparent;}
.certificate-summary-segment-target:focus-visible{fill:var(--certificate-summary-segment-fill);stroke:var(--brass);stroke-width:1.5;outline:none;}
.certificate-summary-donut{position:absolute;inset:50% auto auto 50%;z-index:3;display:flex;align-items:center;justify-content:center;width:53%;height:53%;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;text-align:center;cursor:pointer;transform:translate(-50%,-50%);appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;outline:none;}
.certificate-summary-donut:active{background:transparent;}
.certificate-summary-donut:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}
.certificate-summary-donut strong{color:var(--offwhite);font:800 31px/1 'Inter',sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.18);}
.certificate-summary-names{position:relative;display:block;min-width:0;min-height:0;overflow:hidden;padding:2px 0;overscroll-behavior:contain;touch-action:pan-x;cursor:grab;}
.certificate-summary-name-pagination{position:absolute;top:2px;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:5px;min-height:8px;}
.certificate-summary-name-pagination[hidden]{display:none;}
.certificate-summary-name-page-dot{width:5px;height:5px;padding:0;border:0;border-radius:50%;background:var(--offwhite-dim);opacity:.42;cursor:pointer;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;}
.certificate-summary-name-page-dot.is-active{background:var(--brass-light);opacity:1;transform:scale(1.25);}
.certificate-summary-name-page-dot:focus-visible{outline:1px solid var(--brass-light);outline-offset:2px;}
.certificate-summary-names.has-pagination .certificate-summary-name-items{top:14px;}
.certificate-summary-names:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:5px;}
.certificate-summary-watermark{position:absolute;inset:50% 0 auto;z-index:0;overflow:hidden;color:var(--offwhite);font:950 clamp(88px,18vw,150px)/.72 'Inter',sans-serif;letter-spacing:-.1em;opacity:.14;pointer-events:none;text-align:center;transform:translateY(-50%);user-select:none;}
.certificate-summary-name-items{position:absolute;inset:0;z-index:1;min-width:0;min-height:0;}
.certificate-summary-names-track{display:flex;width:100%;height:100%;transition:transform .22s ease-out;will-change:transform;}
.certificate-summary-name-page{display:flex;flex:0 0 100%;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;min-width:0;min-height:0;}
.certificate-summary-names:active{cursor:grabbing;}
.certificate-summary-name{display:flex;align-items:flex-start;gap:6px;min-width:0;color:color-mix(in srgb,var(--offwhite) 78%,transparent);font:600 10px/1.2 'Inter',sans-serif;}
.certificate-summary-name>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.certificate-summary-status{width:8px;height:8px;flex:0 0 8px;margin-top:2px;border:1.5px solid #687687;border-radius:2px;background:#aeb8c4;box-shadow:0 0 0 1px rgba(255,255,255,.42);}
.certificate-summary-status.valid{background:#35b86b;border-color:#14713e;}
.certificate-summary-status.soon{background:#f0a13b;border-color:#9a5a0d;}
.certificate-summary-status.expired{background:#e35d6a;border-color:#8f2634;}
.certificate-summary-status.none{background:#9aa6b3;border-color:#5c6875;}
.certificate-summary-empty{grid-column:1 / -1;color:var(--offwhite-dim);font:600 10px/1.3 'Inter',sans-serif;}
.sea-service-summary-card{box-sizing:border-box;width:100%;margin:14px 0;padding:12px 14px;overflow:hidden;clip-path:inset(0 round 12px);background:var(--well-bg);border:1px solid var(--navy-line);border-radius:12px;box-shadow:var(--glass-shadow);}
.sea-service-summary-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:12px;height:150px;min-width:0;overflow:hidden;}
.sea-service-summary-chart-wrap{position:relative;align-self:center;width:min(136px,100%);aspect-ratio:1;margin:auto;border-radius:50%;background:var(--well-bg);}
.sea-service-summary-chart{position:absolute;inset:0;border-radius:50%;box-shadow:0 9px 0 rgba(5,20,34,.24),0 12px 20px rgba(5,20,34,.16),inset 0 8px 0 rgba(255,255,255,.22),inset 0 -9px 0 rgba(5,20,34,.26);filter:drop-shadow(0 1px 0 rgba(255,255,255,.12));}
.sea-service-summary-segment-layer{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;-webkit-tap-highlight-color:transparent;}
.sea-service-summary-segment-target{cursor:pointer;pointer-events:all;stroke:transparent;transition:filter .16s ease,stroke .16s ease;}
.sea-service-summary-segment-target.command{fill:url(#sea-service-command-gradient);}.sea-service-summary-segment-target.officer{fill:url(#sea-service-officer-gradient);}.sea-service-summary-segment-target.engineer{fill:url(#sea-service-engineer-gradient);}.sea-service-summary-segment-target.crew{fill:url(#sea-service-crew-gradient);}.sea-service-summary-segment-target.other{fill:url(#sea-service-other-gradient);}
.sea-service-summary-segment-target.is-selected{filter:brightness(1.16) saturate(1.18) drop-shadow(0 0 2px rgba(22,111,186,.75));stroke:var(--brass-light);stroke-width:2.4;paint-order:stroke fill;}
.sea-service-summary-segment-target:focus-visible{stroke:var(--brass);stroke-width:1.5;outline:none;}
.sea-service-summary-chart .sea-service-command-light{stop-color:#fff4bd;}.sea-service-summary-chart .sea-service-command-base{stop-color:#ffd45c;}.sea-service-summary-chart .sea-service-command-deep{stop-color:#e39b16;}.sea-service-summary-chart .sea-service-officer-light{stop-color:#e2f2ff;}.sea-service-summary-chart .sea-service-officer-base{stop-color:#72bfff;}.sea-service-summary-chart .sea-service-officer-deep{stop-color:#2f83d4;}.sea-service-summary-chart .sea-service-engineer-light{stop-color:#f0e5ff;}.sea-service-summary-chart .sea-service-engineer-base{stop-color:#bd8cff;}.sea-service-summary-chart .sea-service-engineer-deep{stop-color:#7c4ec2;}.sea-service-summary-chart .sea-service-crew-light{stop-color:#e1ffec;}.sea-service-summary-chart .sea-service-crew-base{stop-color:#70df9a;}.sea-service-summary-chart .sea-service-crew-deep{stop-color:#29965a;}.sea-service-summary-chart .sea-service-other-light{stop-color:#ffffff;}.sea-service-summary-chart .sea-service-other-base{stop-color:#d6dee7;}.sea-service-summary-chart .sea-service-other-deep{stop-color:#8f9dad;}
.sea-service-summary-donut{position:absolute;inset:50% auto auto 50%;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;width:53%;height:53%;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;transform:translate(-50%,-50%);appearance:none;-webkit-appearance:none;}
.sea-service-summary-donut strong{color:var(--offwhite);font:800 20px/1 'Inter',sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.18);}.sea-service-summary-donut small{margin-top:3px;color:var(--offwhite-dim);font:700 8px/1 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.08em;}
.sea-service-summary-records{position:relative;display:block;min-width:0;min-height:0;overflow:hidden;padding:2px 0;overscroll-behavior:contain;touch-action:pan-x;cursor:grab;}.sea-service-summary-pagination{position:absolute;top:2px;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:5px;min-height:8px;}.sea-service-summary-pagination[hidden]{display:none;}.sea-service-summary-records.has-pagination .sea-service-summary-record-items{top:14px;}.sea-service-summary-record-items{position:absolute;inset:0;z-index:1;min-width:0;min-height:0;}.sea-service-summary-record-track{display:flex;width:100%;height:100%;transition:transform .22s ease-out;will-change:transform;}.sea-service-summary-record-page{display:flex;flex:0 0 100%;flex-direction:column;gap:6px;min-width:0;min-height:0;}.sea-service-summary-record{display:block;min-width:0;overflow:hidden;color:var(--offwhite);font:600 10px/1.2 'Inter',sans-serif;text-overflow:ellipsis;white-space:nowrap;}.sea-service-summary-record-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.sea-service-summary-record-rank{font-size:9px;}.sea-service-summary-record-rank.command{color:#f8e2ae;}.sea-service-summary-record-rank.officer{color:#d9eaff;}.sea-service-summary-record-rank.engineer{color:#eadcff;}.sea-service-summary-record-rank.crew{color:#d9f3e2;}.sea-service-summary-record-rank.other{color:#e5e7eb;}.sea-service-summary-record-duration{color:var(--offwhite-dim);font-size:9px;white-space:nowrap;}.sea-service-summary-records:active{cursor:grabbing;}
@media(max-width:480px){.sea-service-summary-card{padding:11px 12px;}.sea-service-summary-content{gap:9px;height:132px;}.sea-service-summary-chart-wrap{width:min(116px,100%);}.sea-service-summary-donut strong{font-size:17px;}.sea-service-summary-record{font-size:9px;gap:2px 5px;}.sea-service-summary-record-rank,.sea-service-summary-record-duration{font-size:8px;}}
@media(max-width:340px){.sea-service-summary-content{gap:7px;height:122px;}.sea-service-summary-chart-wrap{width:min(100px,100%);}.sea-service-summary-donut strong{font-size:15px;}.sea-service-summary-record{font-size:8.5px;}.sea-service-summary-record-rank,.sea-service-summary-record-duration{font-size:7.5px;}}
.profile-collection-sticky-header{
  position:sticky;
  top:52px;
  z-index:7;
  margin:0 -1px;
  padding:0 1px 1px;
  background:transparent;
}
#profile-view-body .profile-doc-list-row,
#profile-view-body .profile-doc-grid-card{
  --sc-card-shadow:0 8px 22px rgba(10,49,70,.12),0 2px 6px rgba(10,49,70,.06);
  --sc-card-shadow-hover:0 13px 28px rgba(10,49,70,.16),0 4px 10px rgba(10,49,70,.08);
}
:root[data-theme="dark"] #profile-view-body .profile-doc-list-row,
:root[data-theme="dark"] #profile-view-body .profile-doc-grid-card{
  --sc-card-shadow:0 9px 24px rgba(0,0,0,.24),0 3px 8px rgba(0,0,0,.12);
  --sc-card-shadow-hover:0 14px 30px rgba(0,0,0,.3),0 5px 12px rgba(0,0,0,.16);
}
@media(max-width:480px){
  .profile-collection-sticky-header{top:calc(58px + env(safe-area-inset-top,0px));}
  .certificate-summary-card{padding:11px 12px;}
  .certificate-summary-content{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;height:132px;}
  .certificate-summary-chart-wrap{width:min(116px,100%);}
  .certificate-summary-chart{-webkit-mask:radial-gradient(circle at center,transparent 0 31px,#000 32px);mask:radial-gradient(circle at center,transparent 0 31px,#000 32px);}
  .certificate-summary-donut strong{font-size:27px;}
  .certificate-summary-names{gap:6px;}
  .certificate-summary-name{gap:5px;font-size:9px;}
}
@media(max-width:340px){
  .certificate-summary-content{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;height:122px;}
  .certificate-summary-chart-wrap{width:min(100px,100%);}
  .certificate-summary-chart{-webkit-mask:radial-gradient(circle at center,transparent 0 27px,#000 28px);mask:radial-gradient(circle at center,transparent 0 27px,#000 28px);}
  .certificate-summary-donut strong{font-size:24px;}
  .certificate-summary-names{gap:5px;}
  .certificate-summary-name{font-size:8.5px;}
}

/* Sea Service Summary follows the Certificate Summary visual system exactly. */
.sea-service-summary-card{--certificate-summary-valid:#b7f5c5;--certificate-summary-soon:#ffe39a;--certificate-summary-expired:#ffb0b8;--certificate-summary-none:#dbe2e9;box-sizing:border-box;width:100%;margin:14px 0 14px;padding:12px 14px;overflow:hidden;clip-path:inset(0 round 12px);background:var(--well-bg);border:1px solid var(--navy-line);border-radius:12px;box-shadow:var(--glass-shadow);}
.sea-service-summary-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:12px;height:150px;min-width:0;overflow:hidden;}
.sea-service-summary-chart-wrap{position:relative;align-self:center;width:min(136px,100%);aspect-ratio:1;margin:auto;border-radius:50%;background:var(--well-bg);}
.sea-service-summary-chart{position:absolute;inset:0;border-radius:50%;box-shadow:0 9px 0 rgba(5,20,34,.24),0 12px 20px rgba(5,20,34,.16),inset 0 8px 0 rgba(255,255,255,.22),inset 0 -9px 0 rgba(5,20,34,.26);filter:drop-shadow(0 1px 0 rgba(255,255,255,.12));}
.sea-service-summary-donut strong{color:var(--offwhite);font:800 31px/1 'Inter',sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.18);}
.sea-service-summary-donut small{display:none;}
.sea-service-summary-records{position:relative;display:block;min-width:0;min-height:0;overflow:hidden;padding:2px 0;overscroll-behavior:contain;touch-action:pan-x;cursor:grab;}
.sea-service-summary-record-page{display:flex;flex:0 0 100%;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;min-width:0;min-height:0;}
.sea-service-summary-record{display:block;min-width:0;overflow:hidden;color:color-mix(in srgb,var(--offwhite) 78%,transparent);font:600 10px/1.2 'Inter',sans-serif;text-overflow:ellipsis;white-space:nowrap;}
.sea-service-summary-record-rank,.sea-service-summary-record-duration{font-size:10px;}
.sea-service-summary-pagination{position:absolute;top:2px;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:5px;min-height:8px;}
.sea-service-summary-records.has-pagination .sea-service-summary-record-items{top:14px;}
@media(max-width:480px){.sea-service-summary-card{padding:11px 12px;}.sea-service-summary-content{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;height:132px;}.sea-service-summary-chart-wrap{width:min(116px,100%);}.sea-service-summary-chart{-webkit-mask:radial-gradient(circle at center,transparent 0 31px,#000 32px);mask:radial-gradient(circle at center,transparent 0 31px,#000 32px);}.sea-service-summary-donut strong{font-size:27px;}.sea-service-summary-record{font-size:9px;}.sea-service-summary-record-rank,.sea-service-summary-record-duration{font-size:9px;}}
@media(max-width:340px){.sea-service-summary-content{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;height:122px;}.sea-service-summary-chart-wrap{width:min(100px,100%);}.sea-service-summary-chart{-webkit-mask:radial-gradient(circle at center,transparent 0 27px,#000 28px);mask:radial-gradient(circle at center,transparent 0 27px,#000 28px);}.sea-service-summary-donut strong{font-size:24px;}.sea-service-summary-record{font-size:8.5px;}.sea-service-summary-record-rank,.sea-service-summary-record-duration{font-size:8.5px;}}

/* Final parity details: Certificate Summary center label and list rhythm. */
.sea-service-summary-donut{gap:3px;}
.sea-service-summary-donut small{display:block;margin:0;color:var(--offwhite-dim);font:700 8px/1 'Inter',sans-serif;letter-spacing:.01em;text-transform:none;}
.sea-service-summary-donut strong{font-size:27px;}
.sea-service-summary-record-page{gap:8px;}
.sea-service-summary-record{display:flex;align-items:flex-start;gap:6px;min-height:18px;color:color-mix(in srgb,var(--offwhite) 78%,transparent);font:600 10px/1.2 'Inter',sans-serif;}
.sea-service-summary-rank-dot{width:8px;height:8px;flex:0 0 8px;margin-top:2px;border:1.5px solid #687687;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.42);}
.sea-service-summary-rank-dot.command{background:#f8e2ae;border-color:#d9ad4c;}.sea-service-summary-rank-dot.officer{background:#d9eaff;border-color:#8bbce8;}.sea-service-summary-rank-dot.engineer{background:#eadcff;border-color:#b99be0;}.sea-service-summary-rank-dot.crew{background:#d9f3e2;border-color:#8bc9a2;}.sea-service-summary-rank-dot.other{background:#e5e7eb;border-color:#cbd0d8;}
.sea-service-summary-record-copy{min-width:0;overflow:hidden;color:color-mix(in srgb,var(--offwhite) 78%,transparent);text-overflow:ellipsis;white-space:nowrap;}
.sea-service-summary-record-name,.sea-service-summary-record-rank,.sea-service-summary-record-duration{color:inherit;font-size:10px;}
@media(max-width:480px){.sea-service-summary-donut strong{font-size:24px;}.sea-service-summary-record{gap:5px;}.sea-service-summary-record-name,.sea-service-summary-record-rank,.sea-service-summary-record-duration{font-size:9px;}}
@media(max-width:340px){.sea-service-summary-donut strong{font-size:21px;}.sea-service-summary-record-name,.sea-service-summary-record-rank,.sea-service-summary-record-duration{font-size:8.5px;}}

/* Certificate Summary interaction treatment: base ring first, selected segment gains luminous depth. */
.sea-service-summary-chart{background:var(--sea-service-summary-chart);-webkit-mask:radial-gradient(circle at center,transparent 0 36px,#000 37px);mask:radial-gradient(circle at center,transparent 0 36px,#000 37px);}
.sea-service-summary-segment-target{fill:transparent!important;stroke:rgba(255,255,255,.34);stroke-width:.55;}
.sea-service-summary-segment-target.is-selected{fill:var(--sea-service-segment-fill)!important;stroke:var(--brass-light);stroke-width:2.4;filter:brightness(1.16) saturate(1.18) drop-shadow(0 0 2px rgba(22,111,186,.75));}
.sea-service-summary-segment-target.command{--sea-service-segment-fill:url(#sea-service-command-gradient);}.sea-service-summary-segment-target.officer{--sea-service-segment-fill:url(#sea-service-officer-gradient);}.sea-service-summary-segment-target.engineer{--sea-service-segment-fill:url(#sea-service-engineer-gradient);}.sea-service-summary-segment-target.crew{--sea-service-segment-fill:url(#sea-service-crew-gradient);}.sea-service-summary-segment-target.other{--sea-service-segment-fill:url(#sea-service-other-gradient);}
@media(max-width:480px){.sea-service-summary-chart{-webkit-mask:radial-gradient(circle at center,transparent 0 31px,#000 32px);mask:radial-gradient(circle at center,transparent 0 31px,#000 32px);}}
@media(max-width:340px){.sea-service-summary-chart{-webkit-mask:radial-gradient(circle at center,transparent 0 27px,#000 28px);mask:radial-gradient(circle at center,transparent 0 27px,#000 28px);}}

/* Restore the visible base ring with the existing rank palette. */
.sea-service-summary-card{--sea-service-summary-command:#f8e2ae;--sea-service-summary-officer:#d9eaff;--sea-service-summary-engineer:#eadcff;--sea-service-summary-crew:#d9f3e2;--sea-service-summary-other:#e5e7eb;}

/* Keep both summary donuts flat when viewed from directly above. */
.certificate-summary-chart,.sea-service-summary-chart{box-shadow:none!important;filter:none!important;}
.certificate-summary-segment-target.is-selected,.sea-service-summary-segment-target.is-selected{filter:none!important;}

/* Compact center value only; keep it fully inside the donut hole. */
.sea-service-summary-donut strong{font-size:18px;line-height:1;white-space:nowrap;}
@media(max-width:480px){.sea-service-summary-donut strong{font-size:16px;}}
@media(max-width:340px){.sea-service-summary-donut strong{font-size:14px;}}

/* Learning Progress Summary: four independent blue donuts in the existing summary-card language. */
.learning-progress-summary-card{box-sizing:border-box;width:100%;margin:14px 0;padding:12px 14px;overflow:hidden;clip-path:inset(0 round 12px);background:var(--well-bg);border:1px solid var(--navy-line);border-radius:12px;box-shadow:var(--glass-shadow);}
.learning-progress-summary-heading{margin-bottom:12px;color:var(--offwhite);font:700 12px/1.2 'Inter',sans-serif;letter-spacing:.01em;}
.learning-progress-summary-donuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:12px;}
.learning-progress-summary-donut-item{display:flex;min-width:0;align-items:center;gap:6px;flex-direction:column;color:var(--offwhite-dim);font:700 9px/1.2 'Inter',sans-serif;text-align:center;}
.learning-progress-summary-donut{position:relative;width:min(84px,100%);aspect-ratio:1;border-radius:50%;background:conic-gradient(#2aa7e8 var(--learning-progress-percent),rgba(42,167,232,.16) 0);box-shadow:0 7px 0 rgba(5,20,34,.2),0 10px 16px rgba(5,20,34,.12),inset 0 6px 0 rgba(255,255,255,.2),inset 0 -7px 0 rgba(5,20,34,.22);-webkit-mask:radial-gradient(circle at center,transparent 0 25px,#000 26px);mask:radial-gradient(circle at center,transparent 0 25px,#000 26px);}
.learning-progress-summary-donut::after{content:'';position:absolute;inset:7px;border:1px solid rgba(255,255,255,.16);border-radius:50%;}
.learning-progress-summary-donut strong{position:absolute;inset:50% auto auto 50%;z-index:1;width:76%;color:var(--offwhite);font:800 13px/1 'Inter',sans-serif;font-variant-numeric:tabular-nums;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.18);transform:translate(-50%,-50%);}
.learning-progress-summary-donut-item>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media(max-width:480px){.learning-progress-summary-card{padding:11px 12px;}.learning-progress-summary-donuts{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 9px;}.learning-progress-summary-donut{width:min(78px,100%);}.learning-progress-summary-donut strong{font-size:12px;}}
@media(max-width:340px){.learning-progress-summary-donuts{gap:12px 7px;}.learning-progress-summary-donut{width:min(68px,100%);}.learning-progress-summary-donut strong{font-size:10px;}}

.learning-progress-summary-donut{background:transparent;-webkit-mask:none;mask:none;}
.learning-progress-summary-donut::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(#2aa7e8 var(--learning-progress-percent),rgba(42,167,232,.16) 0);box-shadow:0 7px 0 rgba(5,20,34,.2),0 10px 16px rgba(5,20,34,.12),inset 0 6px 0 rgba(255,255,255,.2),inset 0 -7px 0 rgba(5,20,34,.22);-webkit-mask:radial-gradient(circle at center,transparent 0 25px,#000 26px);mask:radial-gradient(circle at center,transparent 0 25px,#000 26px);}
.learning-progress-summary-donut::after{z-index:1;}

/* Learning donuts show only earned progress; the unfilled remainder stays invisible. */
.learning-progress-summary-donut::before{background:conic-gradient(#2aa7e8 var(--learning-progress-percent),transparent 0);box-shadow:none;}
.learning-progress-summary-donut::after{display:none;}

/* Learning summary hierarchy: Overall is the primary centered donut; the three detail donuts sit below. */
.learning-progress-summary-overall-donut{display:flex;justify-content:center;margin:2px 0 14px;}
.learning-progress-summary-donut-item.is-overall{gap:7px;}
.learning-progress-summary-donut-item.is-overall .learning-progress-summary-donut{width:132px;}
.learning-progress-summary-donut-item.is-overall .learning-progress-summary-donut strong{font-size:22px;}
.learning-progress-summary-donuts{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:390px;margin:0 auto;}
.learning-progress-summary-donut-item:not(.is-overall) .learning-progress-summary-donut{width:72px;}
.learning-progress-summary-donut-item:not(.is-overall) .learning-progress-summary-donut strong{font-size:11px;}
@media(max-width:480px){.learning-progress-summary-overall-donut{margin-bottom:13px;}.learning-progress-summary-donut-item.is-overall .learning-progress-summary-donut{width:116px;}.learning-progress-summary-donut-item.is-overall .learning-progress-summary-donut strong{font-size:20px;}.learning-progress-summary-donuts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}.learning-progress-summary-donut-item:not(.is-overall) .learning-progress-summary-donut{width:62px;}}
@media(max-width:340px){.learning-progress-summary-donut-item.is-overall .learning-progress-summary-donut{width:100px;}.learning-progress-summary-donuts{gap:5px;}.learning-progress-summary-donut-item:not(.is-overall) .learning-progress-summary-donut{width:54px;}}

/* Flat 2D Learning Progress donuts: no 3D lift, inset shading, or drop shadows. */
.learning-progress-summary-donut{background:transparent;box-shadow:none;filter:none;}
.learning-progress-summary-donut::before{box-shadow:none;background:conic-gradient(#2aa7e8 var(--learning-progress-percent),transparent 0);}
.learning-progress-summary-donut strong{ text-shadow:none; }

/* Learning Hub totals retain the full background track; completed progress remains solid blue. */
.learning-progress-summary-donut::before{background:conic-gradient(#2aa7e8 var(--learning-progress-percent),rgba(42,167,232,.16) 0);}

/* Donut treatment: the complete metric is an outline; only completed progress is filled blue. */
.learning-progress-summary-donut{border:4px solid rgba(42,167,232,.3);}
.learning-progress-summary-donut::before{background:conic-gradient(#2aa7e8 var(--learning-progress-percent),transparent 0);-webkit-mask:radial-gradient(circle at center,transparent 0 22px,#000 27px);mask:radial-gradient(circle at center,transparent 0 22px,#000 27px);}
.learning-progress-summary-donut-item.is-overall .learning-progress-summary-donut{border-width:5px;}
.learning-progress-summary-donut-item.is-overall .learning-progress-summary-donut::before{-webkit-mask:radial-gradient(circle at center,transparent 0 42px,#000 47px);mask:radial-gradient(circle at center,transparent 0 42px,#000 47px);}
@media(max-width:480px){.learning-progress-summary-donut{border-width:3px;}.learning-progress-summary-donut::before{-webkit-mask:radial-gradient(circle at center,transparent 0 19px,#000 23px);mask:radial-gradient(circle at center,transparent 0 19px,#000 23px);}.learning-progress-summary-donut-item.is-overall .learning-progress-summary-donut{border-width:4px;}.learning-progress-summary-donut-item.is-overall .learning-progress-summary-donut::before{-webkit-mask:radial-gradient(circle at center,transparent 0 36px,#000 41px);mask:radial-gradient(circle at center,transparent 0 36px,#000 41px);}}
@media(max-width:340px){.learning-progress-summary-donut::before{-webkit-mask:radial-gradient(circle at center,transparent 0 17px,#000 21px);mask:radial-gradient(circle at center,transparent 0 17px,#000 21px);}.learning-progress-summary-donut-item.is-overall .learning-progress-summary-donut::before{-webkit-mask:radial-gradient(circle at center,transparent 0 31px,#000 36px);mask:radial-gradient(circle at center,transparent 0 31px,#000 36px);}}

/* Blue progress fill with a distinct dark-gray outer stroke, not a blue-only outline. */
.learning-progress-summary-donut{border:3px solid #687687;}
.learning-progress-summary-donut::before{inset:3px;background:conic-gradient(#2aa7e8 var(--learning-progress-percent),transparent 0);}
.learning-progress-summary-donut-item.is-overall .learning-progress-summary-donut{border-width:4px;}
.learning-progress-summary-donut-item.is-overall .learning-progress-summary-donut::before{inset:4px;}
@media(max-width:480px){.learning-progress-summary-donut{border-width:2px;}.learning-progress-summary-donut::before{inset:2px;}.learning-progress-summary-donut-item.is-overall .learning-progress-summary-donut{border-width:3px;}.learning-progress-summary-donut-item.is-overall .learning-progress-summary-donut::before{inset:3px;}}

/* Muted reference-style track: blue is the only vivid color; gray remains intentionally subtle. */
.learning-progress-summary-donut{border-color:rgba(104,118,135,.22);}
.learning-progress-summary-donut::before{background:conic-gradient(#2aa7e8 var(--learning-progress-percent),rgba(104,118,135,.18) 0);}

/* Reference ring: one dark-muted track, with the completed arc filled blue. */
.learning-progress-summary-donut{border:0;}
.learning-progress-summary-donut::before{inset:0;background:conic-gradient(#2aa7e8 var(--learning-progress-percent),rgba(48,62,82,.72) 0);-webkit-mask:radial-gradient(circle at center,transparent 0 22px,#000 27px);mask:radial-gradient(circle at center,transparent 0 22px,#000 27px);}
.learning-progress-summary-donut-item.is-overall .learning-progress-summary-donut::before{-webkit-mask:radial-gradient(circle at center,transparent 0 42px,#000 47px);mask:radial-gradient(circle at center,transparent 0 42px,#000 47px);}
@media(max-width:480px){.learning-progress-summary-donut::before{-webkit-mask:radial-gradient(circle at center,transparent 0 19px,#000 23px);mask:radial-gradient(circle at center,transparent 0 19px,#000 23px);}.learning-progress-summary-donut-item.is-overall .learning-progress-summary-donut::before{-webkit-mask:radial-gradient(circle at center,transparent 0 36px,#000 41px);mask:radial-gradient(circle at center,transparent 0 36px,#000 41px);}}
@media(max-width:340px){.learning-progress-summary-donut::before{-webkit-mask:radial-gradient(circle at center,transparent 0 17px,#000 21px);mask:radial-gradient(circle at center,transparent 0 17px,#000 21px);}.learning-progress-summary-donut-item.is-overall .learning-progress-summary-donut::before{-webkit-mask:radial-gradient(circle at center,transparent 0 31px,#000 36px);mask:radial-gradient(circle at center,transparent 0 31px,#000 36px);}}

/* Theme-aware muted track: adapts to both light and dark mode without becoming dark. */
.learning-progress-summary-donut{border-color:color-mix(in srgb,var(--offwhite-dim) 32%,transparent);}
.learning-progress-summary-donut::before{background:conic-gradient(#2aa7e8 var(--learning-progress-percent),color-mix(in srgb,var(--offwhite-dim) 24%,transparent) 0);}