/* High-contrast monochrome UI; colored statuses remain */
    :root{
      --bg:#0a0a0a;                /* deep black */
      --ink:#ffffff;               /* white text */
      --muted:#b9bec8;             /* secondary text */
      --line:rgba(255,255,255,.14);/* medium hairline */
      --hair:rgba(255,255,255,.10);/* ultra subtle lines */
      --panel:rgba(255,255,255,.07);/* surfaces */
      --panel-2:rgba(255,255,255,.045);/* hovers/inputs */
      --fs-ctrl-h: 64px;            /* fullscreen controls height */
      --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    }
    *{box-sizing:border-box}
    :root{ --radius:0px; }
    *{ transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease; }
    html,body{height:100%}
    body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 ui-sans-serif,system-ui,-apple-system,"SF Pro Text",Segoe UI,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

    /* layout */
    .wrap{min-height:100%;display:grid;place-items:center;padding:40px}
    .shell{max-width:1100px;width:100%;margin:0 auto;padding:16px 0 0}
    /* === Unified content width & centering === */
    .shell{ display:flex; flex-direction:column; align-items:center; }
    .shell {
      padding-bottom: 40px; /* add bottom space to match top spacing */
    }
    .wide{ width:100%; max-width:100%; box-sizing:border-box; }
    .portal-footer{
      width:100%;
      margin:24px 0 6px;
      padding-top:12px;
      color:var(--muted);
      opacity:.46;
      font-size:12px;
      letter-spacing:0;
      text-align:center;
      font-variant-numeric:tabular-nums;
    }

    /* login card */
    .authed #app .card{ display:none !important; }
    .card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--hair);border-radius:0;padding:22px 20px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
    h1{margin:0 0 6px;font-size:16px;font-weight:700;letter-spacing:.2px}
    .muted{color:var(--muted)}
    input{width:100%;background:var(--panel-2);color:var(--ink);border:1px solid var(--hair);border-radius:0;padding:12px 14px;outline:none}
    input:focus{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
    .row{display:flex;flex-direction:column;gap:12px}
    .btn, a.btn{cursor:pointer;color:var(--ink);background:transparent;border:1px solid var(--hair);border-radius:0;padding:8px 12px;font-size:14px;line-height:1.2;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
    .btn:hover, a.btn:hover{border-color:#ffffff33}

    /* topbar */
    .topbar{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:10px;           /* smaller bottom margin */
      background:var(--panel);
      border:1px solid var(--hair);
      border-radius:0;
      padding:6px 10px;             /* reduced padding */
      min-height:40px;              /* keep it slim */
    }
    .brand{font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:11px;opacity:.9}
    .btn.logout{background:var(--panel-2)}
    .btn.logout:hover{border-color:#ffffff33;background:rgba(255,255,255,.07)}

    /* filters */
    .controls{display:flex;gap:10px;align-items:center;margin:12px 0 16px}
    .search{flex:1;min-width:220px}

    /* Elegant select (override Safari glossy look) */
    .select{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:1px solid var(--hair);background:var(--panel-2);color:var(--ink);padding:10px 40px 10px 12px;border-radius:0;line-height:1.2;position:relative}
    .select:focus{outline:none;border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
    .select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffffff' d='M5.5 7.5L10 12l4.5-4.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:14px}

    /* table */
    .table{width:100%;border-collapse:separate;border-spacing:0;background:transparent;border:1px solid var(--hair);border-radius:0;overflow:hidden}
    .table thead th {
      font-weight:700;
      color:#f0f2f5;
      background:var(--panel);
      padding:6px 8px;
      line-height:1.2;
      font-size:13px;
    }
    .table thead tr{height:40px}
    .table th,.table td{padding:8px 10px;border-bottom:1px solid var(--hair);text-align:left;vertical-align:middle}
    .table tr { height:auto; }
    /* --- kompaktni shotlist tabulka --- */
    .table tr {
      height: 60px; /* menší výška řádku */
    }
    .table td {
      padding: 6px 10px; /* menší padding, kompaktnější */
    }
    /* --- Typographic hierarchy & numeric alignment --- */
    .table tbody td {
      font-size: 13px;
      line-height: 1.4;
      font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", Segoe UI, Roboto, Arial, sans-serif;
      font-weight: 400;
      font-variant-numeric: tabular-nums;
    }

    /* Shot column: match Updated numeric spacing */
    .table td:nth-child(2){
      font-variant-numeric: tabular-nums;
    }

    /* Numeric columns: Version (3) and Updated (7) right-aligned, tabular monospace */
    .table th:nth-child(3), .table td:nth-child(3),
    .table th:nth-child(7), .table td:nth-child(7){
      text-align:right;
      font-variant-numeric: tabular-nums;
    }

    /* Status column centered for stable badges */
    .table th:nth-child(5), .table td:nth-child(5){ text-align:center; }

    /* --- Kompozice tabulky: sloupce a proporce --- */
    .table th:nth-child(1), .table td:nth-child(1){ width:160px; }  /* Preview column fixed */
    .table th:nth-child(2), .table td:nth-child(2){ width:90px; }   /* Shot ID */
    .table th:nth-child(3), .table td:nth-child(3){ width:80px; }   /* Version */
    .table th:nth-child(4), .table td:nth-child(4){ width:auto; max-width:260px; } /* Description flexible */
    .table th:nth-child(5), .table td:nth-child(5){ width:120px; }  /* Status */
    .table th:nth-child(6), .table td:nth-child(6){ width:160px; }  /* Delivery file */
    .table th:nth-child(7), .table td:nth-child(7){ width:160px; }  /* Updated */
    .table th:nth-child(8), .table td:nth-child(8){ width:40px; }   /* Delete icon */

    /* Ensure description wraps gracefully */
    .table td:nth-child(4){
      overflow-wrap: break-word;
      white-space: normal;
      max-width: 260px;
    }
    /* jednotný náhled pro IMG i placeholder (černý obdélník) */
    .table td.preview .thumb,
    .thumb{
      width:140px;
      height:90px;
      display:block;
      background:#000;
      object-fit:cover;
      border-radius:0;
      margin:0;
      padding:0;
      transform:none !important;   /* přebije staré pravidlo pro img v tabulce */
    }
    /* keep certain columns single-line and ellipsize description */
    .td-desc{white-space:normal;width:55%}
    .td-status,.td-updated,.td-ver,.td-output{white-space:nowrap}
    /* Admin flag: project still has no delivery URL */
    .needs-url{display:inline-block;margin-right:6px;color:#f87171;font-weight:700;text-decoration:none;cursor:pointer}
    .needs-url:hover{color:#fca5a5}
    .status{white-space:nowrap}
    .table .select{white-space:nowrap}
    .table .status{padding:2px 8px}
    .table tbody tr:last-child td{border-bottom:0}

    /* status: decentní badge místo čistého textu */
    .status{
      font-weight:400;
      font-size:14px;
      display:inline-block;
      padding:3px 12px;
      border-radius:0;
      background:rgba(255,255,255,.06);
      min-width:90px;
      text-align:center;
    }
    .s-Todo{color:#94a3b8;background:rgba(148,163,184,.15)}
    .s-In\ Progress{color:#1e90ff;background:rgba(30,144,255,.18)}
    .s-Review{color:#eab308;background:rgba(255,215,0,.20)}
    .s-Approved{color:#34d399;background:rgba(52,211,153,.15)}
    .s-On\ Hold{color:#f87171;background:rgba(248,113,113,.15)}
    .s-Bid{color:#eab308;background:rgba(255,215,0,.20)}
    .status-select{
      appearance:none;-webkit-appearance:none;-moz-appearance:none;
      border:0;
      border-radius:0;
      min-width:110px;
      text-align:center;
      font-size:14px;
      font-weight:400;
      line-height:1.2;
      padding:4px 28px 4px 10px;
      cursor:pointer;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffffff' d='M5.5 7.5L10 12l4.5-4.5'/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position:right 8px center;
      background-size:12px;
    }
    .status-select:focus{outline:1px solid rgba(255,255,255,.35);outline-offset:0}
    .status-select option{background:#111;color:#fff}
    .status-select.status-Todo{color:#94a3b8;background:rgba(148,163,184,.15)}
    .status-select.status-In-Progress{color:#1e90ff;background:rgba(30,144,255,.18)}
    .status-select.status-Review{color:#eab308;background:rgba(255,215,0,.20)}
    .status-select.status-Approved{color:#34d399;background:rgba(52,211,153,.15)}
    .status-select.status-On-Hold{color:#f87171;background:rgba(248,113,113,.15)}
    .status-select.status-Bid{color:#eab308;background:rgba(255,215,0,.20)}

    /* Row tints by status (subtle, monochrome-friendly) */
    .table tbody tr{ transition: background-color .15s ease, opacity .15s ease; }
    .table tbody tr.st-Todo{ background: rgba(148,163,184,.05); }
    /* In Progress — lighter, cleaner blue */
    .table tbody tr.st-In-Progress{ background: rgba(30,144,255,.12); }
    /* Review — gentle gold instead of brown */
    .table tbody tr.st-Review{ background: rgba(255,215,0,.12); }
    /* Approved — keep pleasant green, slightly more present */
    .table tbody tr.st-Approved{ background: rgba(52,211,153,.12); }
    /* On Hold — keep visibly de‑emphasized */
    .table tbody tr.st-On-Hold{ background: rgba(125,125,125,.10); opacity:.60; }
    /* Bid — same de‑emphasis as On Hold */
    .table tbody tr.st-Bid{ background: rgba(125,125,125,.10); opacity:.60; }
    /* zrušíme staré zvětšování náhledů v celé tabulce */
    .table td img{ transform:none; width:auto; height:auto; }
    .table td img:hover{ transform:none; box-shadow:none; }

    /* small buttons in table */
    .btn-ghost{background:transparent;border:1px solid var(--hair);border-radius:0;padding:6px 10px}

    /* Remove blue color from admin shot name/description links */
    a, a:visited, a:active { color: var(--muted); text-decoration: underline; }
    a:hover { color: var(--ink); }

    /* admin panel */
    .admin-panel{margin:24px 0 0 0;padding:18px 16px;background:var(--panel);border-radius:0;border:1px solid var(--hair);}
    .admin-panel h2{font-size:16px;margin:0 0 10px 0;}
    .admin-panel .admin-block + .admin-block{margin-top:28px;}
    .admin-panel .admin-landing .muted{max-width:56ch;line-height:1.45;}
    .admin-panel table{width:100%;border-collapse:collapse;}
    .admin-panel th,.admin-panel td{padding:8px 10px;border-bottom:1px solid var(--line);}
    .admin-panel tr:last-child td{border-bottom:0;}
    .admin-panel .btn{font-size:13px;padding:4px 10px;}
    .admin-panel .danger{color:#f87171;}
    .admin-panel .btn-sm{font-size:12px;padding:5px 9px;}
    .admin-panel .pm-table{table-layout:fixed;}
    .admin-panel .pm-table th:nth-child(1){width:84px;}
    .admin-panel .pm-table th:nth-child(2){width:250px;}
    .admin-panel .pm-table th:nth-child(3){width:130px;}
    .admin-panel .pm-table th:nth-child(4){width:auto;}
    .admin-panel .pm-table th:nth-child(5){width:80px;text-align:center;}
    .admin-panel .pm-table th:nth-child(6){width:300px;}
    .admin-panel .pm-code{font-family:var(--mono);font-weight:700;letter-spacing:.03em;}
    .admin-panel .pm-name{font-size:15px;color:#f0f2f5;font-weight:600;}
    .admin-panel .pm-login{font-family:var(--mono);font-size:14px;}
    .admin-panel .pm-note{display:block;font-size:11px;opacity:.75;margin-top:2px;}
    .admin-panel .pm-url{display:flex;flex-direction:column;gap:6px;min-width:0;}
    .admin-panel .pm-url-text{
      display:block;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:100%;
      text-decoration:none;
      color:var(--ink);
      opacity:.88;
    }
    .admin-panel .pm-url-text:hover{opacity:1;text-decoration:underline;}
    .admin-panel .pm-url-actions{display:flex;gap:6px;flex-wrap:wrap;}
    .admin-panel .pm-shots{text-align:center;font-family:var(--mono);font-size:18px;}
    .admin-panel .pm-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
    .admin-panel .pm-actions .btn-pass{grid-column:1 / -1;}
    @media (max-width: 1120px){
      .admin-panel .pm-table{table-layout:auto;}
      .admin-panel .pm-url-text{white-space:normal;word-break:break-all;}
      .admin-panel .pm-actions{grid-template-columns:1fr;}
      .admin-panel .pm-actions .btn-pass{grid-column:auto;}
    }

    /* Video modal & custom controls */
    .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.75);z-index:9999;padding:16px;overflow:auto}
    .modal.show{display:flex}
    .player{
      display:inline-block;                 /* shrink-wrap to its contents (video) */
      background:#0b0b0b;
      border:1px solid var(--hair);
      border-radius:0;                      /* sharp corners so the video is not rounded */
      overflow:hidden;                      /* keep any bleed inside the frame */
      box-shadow:0 20px 60px rgba(0,0,0,.6);
      width:auto;                           /* no forced viewport-based width */
      max-width:none;
      height:auto;                          /* grow by content height */
    }
    .player .viewer{
      display:block;                        /* simple block wrapper */
      position:relative;                    /* so loading overlay covers only the video area */
      width:auto;                           /* follow video width */
      min-width:0;
      min-height:0;
      height:auto;
    }
    .player video{
      display:block;
      width:100%;                           /* follow viewer width to avoid jumps */
      height:auto;                          /* keep aspect ratio */
      max-width:calc(100vw - 48px);         /* fit viewport inside modal padding */
      max-height:86vh;                      /* keep clear of top/bottom */
      background:#000;
      object-fit:contain;                   /* letterbox when needed */
      flex:0 0 auto;
    }

	    /* === Player loading state (prevents broken UI on slow networks) === */
	    .player{ position:relative; }
	    /* keep controls visible; size them to match placeholder width while loading */
	    .player.loading #pvCtrls{ width:min(92vw, 980px); max-width:min(92vw, 980px); margin:12px auto 0; }
	    .player .viewer .loading-indicator{ display:none; position:absolute; inset:0; place-items:center; background:rgba(0,0,0,.65); z-index:5; }
	    .player .loading-indicator::after{
	      content:''; width:38px; height:38px; border-radius:50%; border:3px solid #fff; border-top-color: transparent; animation: spin 1s linear infinite; opacity:.9;
	    }
	    .player.loading .viewer .loading-indicator{ display:grid; }
	    /* reserve a stable frame before metadata is loaded to avoid layout jump */
	    .player.loading .viewer{ width:min(92vw, 980px); aspect-ratio:16/9; background:#000; }
	    /* Buffering after first frame: keep frame visible, show spinner without forcing black placeholder */
	    .player.buffering .viewer .loading-indicator{ display:grid; background:rgba(0,0,0,.12); }
	    .player.buffering .loading-indicator::after{ width:28px; height:28px; border-width:3px; opacity:.85; }
	    @keyframes spin{ to{ transform: rotate(360deg); } }

    /* === Player controls – base layout (non‑fullscreen) === */
    #pvCtrls{
      display:flex;
      align-items:center;
      gap:12px;
      background:rgba(0,0,0,.84);
      border:1px solid #ffffff22;
      border-radius:0;
      padding:12px 20px;
      margin:12px auto 0;
      width:auto;                 /* shrink-wrap by default */
      max-width:100%;
      box-shadow:0 8px 26px rgba(0,0,0,.55);
    }
    /* player control buttons — match app_with_comments look */
    #pvCtrls button{
      border:1px solid #3a3a3a;
      background:#121212;
      color:#f5f7fa;
      border-radius:0;
      padding:10px 14px;
      cursor:pointer;
      font-weight:700;
      letter-spacing:.2px;
      line-height:1;
      box-shadow:0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(0,0,0,.35);
      height:40px;
    }
    /* Player version select – match fullscreen/close button dimensions and style */
    #pvCtrls .ctrl-select{
      appearance:none; -webkit-appearance:none; -moz-appearance:none;
      border:1px solid #3a3a3a;
      background:#121212;
      color:#f5f7fa;
      border-radius:0;
      height:40px;
      padding:10px 30px 10px 12px;        /* compact width, keep room for arrow */
      font-weight:700;
      letter-spacing:.2px;
      line-height:1;
      box-shadow:0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(0,0,0,.35);
      min-width:86px;
      text-align-last:center;             /* center the text in Firefox */
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%23f5f7fa' d='M5.5 7.5L10 12l4.5-4.5'/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position:right 12px center;
      background-size:14px;
    }
    #pvCtrls .ctrl-select:focus-visible{
      outline:2px solid #60a5fa;
      outline-offset:2px;
    }
    #pvCtrls button:hover{
      border-color:#5a5a5a;
      background:#171717;
    }
    #pvCtrls button:focus-visible{
      outline:2px solid #60a5fa;
      outline-offset:2px;
    }
    /* Icon-only buttons for player */
    #pvCtrls .icon-btn{
      width:40px; height:40px;
      padding:0; border-radius:0;
      display:grid; place-items:center;
    }
    #pvCtrls .icon-btn svg{ width:20px; height:20px; display:block; fill:currentColor; }
    #pvCtrls .icon-btn:hover{ filter:brightness(1.05); }
    #pvCtrls .icon-btn:active{ transform:translateY(1px); }
    #pvCtrls .left,
    #pvCtrls .center,
    #pvCtrls .right{
      display:flex;
      align-items:center;
      gap:12px;
    }
    #pvCtrls .center{
      flex:1;
      min-width:0;
    }
    #pvCtrls input[type="range"]{
      flex:1;
      min-width:280px;
    }



    /* -- timeline (range) – visible track + SQUARE thumb */
    #pvCtrls input[type="range"]{
      appearance:none; -webkit-appearance:none; -moz-appearance:none;
      height: 18px;                          /* larger hit area */
    }
    #pvCtrls input[type="range"]:focus{ outline:none; }

    /* WebKit */
    #pvCtrls input[type="range"]::-webkit-slider-runnable-track{
      height: 8px;
      background:#2b2b2b;
      border:1px solid #3d3d3d;
      border-radius:4px;
    }
    #pvCtrls input[type="range"]::-webkit-slider-thumb{
      -webkit-appearance:none;
      width:18px;
      height:18px;
      background:#fff;
      border:1px solid #000;
      border-radius:0;                      /* SQUARE */
      margin-top:-7px;                        /* center on track */
      box-shadow:0 1px 0 rgba(255,255,255,.05);
    }

    /* Firefox */
    #pvCtrls input[type="range"]::-moz-range-track{
      height:8px;
      background:#2b2b2b;
      border:1px solid #3d3d3d;
      border-radius:4px;
    }
    #pvCtrls input[type="range"]::-moz-range-thumb{
      width:18px;
      height:18px;
      background:#fff;
      border:1px solid #000;
      border-radius:0;                      /* SQUARE */
    }

    /* IE/Edge (old) */
    #pvCtrls input[type="range"]::-ms-track{
      height: 6px;
      background: transparent;
      border-color: transparent;
      color: transparent;
    }
    #pvCtrls input[type="range"]::-ms-fill-lower,
    #pvCtrls input[type="range"]::-ms-fill-upper{
      background:#2b2b2b;
      border:1px solid #3d3d3d;
      border-radius:4px;
    }
    #pvCtrls input[type="range"]::-ms-thumb{
      width:18px;
      height:18px;
      background:#fff;
      border:1px solid #000;
      border-radius:0;                      /* SQUARE */
    }

    /* clearer time label */
    #pvCtrls .time{
      display:none;
    }

    /* fullscreen: keep timeline large enough */
    .player.fs #pvCtrls input[type="range"]{
      height: 16px;
    }
    .player.fs #pvCtrls input[type="range"]::-webkit-slider-thumb{ width:18px; height:18px; margin-top:-7px; }
    .player.fs #pvCtrls input[type="range"]::-moz-range-thumb{ width:18px; height:18px; }
    .player.fs #pvCtrls input[type="range"]::-ms-thumb{ width:18px; height:18px; }

    /* === Fullscreen player layout === */
    .player.fs{                        /* applied by JS on fullscreenchange */
      width:100vw; height:100vh;
      max-width:none; max-height:none;
      border:none; border-radius:0;
      box-shadow:none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .player.fs .viewer{
      position:relative;
      width:100vw;
      height:100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding:0;
    }
    .player.fs .video-wrap{
      width:100vw;
      height:100vh; /* allow full viewport height; controls overlay on top */
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      margin:0;
      padding:0;
    }
    .player.fs video{
      position:fixed;           /* pin to viewport */
      left:0; top:0; width:100vw; height:100vh;
      max-width:100vw; max-height:100vh;
      object-fit:contain;       /* fill width when possible, preserve aspect */
      object-position: 50% calc(50% - (var(--fs-ctrl-h) / 2)); /* lift image so it’s not glued to the controls */
      display:block; margin:0; padding:0; border:none;
    }
    .player.fs #pvCtrls{
      position:fixed;
      left:0; right:0; bottom:0;
      width:100vw;
      max-width:100vw;
      margin:0;
      padding:12px 24px;
      background:rgba(0,0,0,.84);
      border-top:1px solid #ffffff22;
      backdrop-filter:saturate(120%) blur(2px);
      z-index:9999;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      box-sizing:border-box;
      height:var(--fs-ctrl-h); /* explicit so video doesn't go under */
    }

    /* === Center rail to unify widths === */
    .rail{ width:fit-content; max-width:none; margin:0 auto; }
    
    /* === Mobile: simplify player controls (show only Play + Version) === */
    @media (max-width: 768px){
      #pvCtrls{ gap:12px; padding:10px 12px; }
      #pvCtrls .center{ display:none !important; }              /* hide seek, frame, time */
      #pvCtrls #pvPrevVer,
      #pvCtrls #pvNextVer,
      #pvCtrls #pvDownload,
      #pvCtrls #pvFull,
      #pvCtrls #pvClose{ display:none !important; }            /* hide extra controls */
      #pvCtrls .right{ margin-left:auto; }                     /* keep version select on the right */
      #pvCtrls .ver{ gap:0; }                                  /* tighten spacing around select */
      #pvCtrls .ctrl-select{ min-width: 92px; }                /* compact version dropdown */
    }

    /* Toast shown when a poll finds a newer delivery while the tab was open. */
    .update-notice{
      position:fixed; left:50%; bottom:24px; transform:translate(-50%, 16px);
      display:flex; flex-direction:column; gap:2px;
      max-width:min(520px, calc(100vw - 32px));
      padding:12px 16px; background:#101010; color:var(--ink);
      border:1px solid var(--line); box-shadow:0 8px 32px rgba(0,0,0,.55);
      font-size:13px; line-height:1.45; z-index:9999;
      opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
    }
    .update-notice.is-visible{ opacity:1; transform:translate(-50%, 0); }
    .update-notice strong{ font-weight:600; }
    .update-notice span{ color:var(--muted); }

    /* Delivery version picker: invisible until a shot actually has history. */
    .ver-picker{ position:relative; display:inline-block; margin-left:6px; }
    .ver-toggle{
      display:inline-flex; align-items:center; justify-content:center;
      /* Height matches the status control in the same row (.status-select:
         14px text at line-height 1.2 plus 4px padding = ~25px, border-box). */
      width:26px; height:26px; padding:0; margin-left:6px; vertical-align:middle;
      background:none; border:1px solid var(--hair); cursor:pointer;
      color:var(--muted); font-size:15px; line-height:1;
    }
    .ver-toggle:hover, .ver-toggle:focus-visible{
      color:var(--ink); border-color:var(--line); background:var(--panel-2); outline:none;
    }
    .ver-menu{
      display:none; position:absolute; right:0; top:calc(100% + 6px); z-index:50;
      min-width:170px; padding:4px 0; background:#101010;
      border:1px solid var(--line); box-shadow:0 8px 28px rgba(0,0,0,.55);
    }
    .ver-menu.is-open{ display:block; }
    .ver-item{
      display:flex; align-items:baseline; gap:10px; padding:6px 12px;
      color:var(--ink); text-decoration:none; white-space:nowrap; font-size:13px;
    }
    .ver-item:hover{ background:var(--panel-2); }
    .ver-num{ font-variant-numeric:tabular-nums; min-width:34px; }
    .ver-date{ color:var(--muted); font-size:12px; }
    .ver-latest{ margin-left:auto; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }