:root {
    --abis:      #0A1116;
    --panel:     #121E25;
    --panel-hi:  #1A2B34;
    --panel-top: #22343E;
    --line:    #243945;
    --line-jc: #33505F;
    --foam:     #E2EDF1;
    --shallow:    #85A0AC;
    --shallow-dark: #5C7885;
    --coral:     #F2724A;
    --coral-dark:  #8E3A22;
    --turquoise:    #45C9BD;

    --st-free:  #516975;
    --st-wip:      #DFA93F;
    --st-annotated: #45C9BD;
    --st-reviewed:#5FC17E;
    --st-rejected:  #DF5C52;

    --sans: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
    --serif: "IBM Plex Serif", Georgia, serif;

    --r: 3px;
    --bar: 46px;
  }

  * { box-sizing: border-box; }

  /* Request a 100% text-size adjustment in browsers supporting this property. */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* The hidden attribute must override classes that set display. */
  [hidden] { display: none !important; }

  body {
    margin: 0;
    background: var(--abis);
    color: var(--foam);
    font-family: var(--sans);
    font-size: 13.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  button, input, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  :focus-visible { outline: 2px solid var(--coral); outline-offset: 1px; }

  .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .lat  { font-family: var(--serif); font-style: italic; color: var(--shallow); }

  .label {
    font-size: 10px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--shallow-dark);
  }

  /* Sign in */
  #login {
    min-height: 100vh; display: grid; place-items: center; padding: 24px;
    background:
      radial-gradient(120% 90% at 50% 0%, #16303B 0%, transparent 60%),
      var(--abis);
  }
  .card {
    width: 100%; max-width: 380px; background: var(--panel);
    border: 1px solid var(--line); border-radius: var(--r); padding: 30px 28px 26px;
  }
  .mark { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
  .mark svg { flex: none; }
  .mark b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
  .mark span { font-size: 11px; color: var(--shallow-dark); display: block; letter-spacing: .04em; }

  .field { margin-bottom: 13px; }
  .field label { display: block; margin-bottom: 5px; }
  .field input {
    width: 100%; padding: 8px 10px; background: var(--abis);
    border: 1px solid var(--line); border-radius: var(--r); color: var(--foam);
  }
  .field input:focus { border-color: var(--line-jc); outline: none; }

  .primary {
    width: 100%; padding: 9px; margin-top: 8px; background: var(--coral);
    color: #1A0A04; border: 0; border-radius: var(--r); font-weight: 600;
  }
  .primary:hover { background: #FF8560; }


  /* Application layout */
  #app { display: none; height: 100vh; grid-template-rows: var(--bar) 1fr; }
  /* Tino: was .vidljiv; app.js sets "visible" since the English rename, so the app stayed hidden after login. */
  #app.visible { display: grid; }

  .bar {
    display: flex; align-items: stretch; gap: 0;
    background: var(--panel); border-bottom: 1px solid var(--line);
    padding-left: 14px; padding-right: 12px;
  }
  /* Keep the logo padding intact when positioning it in the header. */
  .bar > .mark { margin: 0; align-self: center; }
  .bar > .mark b { font-size: 13px; }
  .bar > .mark .subtitle { display: none; }

  .tabs { display: flex; }
  .tab {
    padding: 0 15px; background: none; border: 0; border-bottom: 2px solid transparent;
    color: var(--shallow); font-size: 12.5px; display: flex; align-items: center; gap: 7px;
  }
  .tab:hover { color: var(--foam); }
  .tab[aria-selected="true"] { color: var(--foam); border-bottom-color: var(--coral); }
  .tab .count {
    font-family: var(--mono); font-size: 10.5px; padding: 1px 5px; border-radius: 8px;
    background: var(--panel-top); color: var(--shallow);
  }
  .tab[data-role] { display: none; }
  body[data-role="mentor"] .tab[data-role="mentor"],
  body[data-role="admin"]  .tab[data-role="mentor"],
  body[data-role="admin"]  .tab[data-role="admin"] { display: flex; }

  /* Apply role visibility to dedicated classes, not the body role attribute. */
  .only-admin, .only-mentor-el { display: none; }
  body[data-role="admin"] .only-admin,
  body[data-role="admin"] .only-mentor-el,
  body[data-role="mentor"] .only-mentor-el { display: flex; }

  .bar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
  .link { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--shallow-dark); }
  .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--st-reviewed); }
  .user-chip {
    display: flex; align-items: center; gap: 8px; padding: 4px 9px 4px 4px;
    background: var(--panel-hi); border: 1px solid var(--line); border-radius: 20px; font-size: 12px;
  }
  .avatar {
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    font-size: 10.5px; font-weight: 600; color: #0A1116; background: var(--turquoise);
  }
  .user-chip i { font-style: normal; font-size: 10px; color: var(--shallow-dark); }

  /* Screens */
  .screen { display: none; overflow: hidden; min-height: 0; }
  /* Tino: was .aktivan, renamed to match app.js and index.html. */
  .screen.active { display: block; }
  .screen.active.stupci { display: grid; }
  .scroll { height: 100%; overflow-y: auto; }

  .header { padding: 22px 26px 0; }
  .header h1 {
    margin: 0 0 3px; font-size: 19px; font-weight: 600; letter-spacing: -.015em;
    text-wrap: balance;
  }
  .header p { margin: 0; color: var(--shallow-dark); font-size: 12.5px; }

  /* Class overview */
  .counters {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px; margin: 20px 26px 0; background: var(--line);
    border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  }
  .counter { background: var(--panel); padding: 13px 15px; }
  .counter .v { font-family: var(--mono); font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
  .counter .v small { font-size: 12px; color: var(--shallow-dark); }
  .counter .o { margin-top: 1px; }

  .scale { display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: var(--panel-top); }
  .scale span { display: block; }

  .legend { display: flex; flex-wrap: wrap; gap: 15px; margin: 18px 26px 0; }
  .legend div { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--shallow); }
  .square { width: 8px; height: 8px; border-radius: 2px; }

  .table { width: 100%; border-collapse: collapse; margin-top: 12px; }
  .table th {
    position: sticky; top: 0; z-index: 1; background: var(--abis);
    text-align: left; padding: 8px 12px; font-size: 10px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--shallow-dark);
    border-bottom: 1px solid var(--line);
  }
  .table th.d, .table td.d { text-align: right; }
  .table td { padding: 7px 12px; border-bottom: 1px solid rgba(36,57,69,.55); }
  .table tbody tr { cursor: pointer; }
  .table tbody tr:hover { background: var(--panel); }
  .table .kind-name { font-weight: 500; }
  .table .lat { font-size: 11.5px; margin-left: 7px; }
  .wrapped { padding: 0 26px 26px; }
  .wrapped > .table { min-width: 520px; }      /* Scroll inside the table container below this width. */
  .table-frame { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .badge {
    display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10.5px;
    font-weight: 500; border: 1px solid;
  }

  /* Gallery */
  .toolbar {
    display: flex; align-items: center; gap: 9px; padding: 13px 26px;
    border-bottom: 1px solid var(--line); flex-wrap: wrap;
  }
  .cip {
    padding: 4px 11px; background: var(--panel); border: 1px solid var(--line);
    border-radius: 20px; font-size: 11.5px; color: var(--shallow);
    display: flex; align-items: center; gap: 6px;
  }
  .cip:hover { border-color: var(--line-jc); color: var(--foam); }
  .cip[aria-pressed="true"] { background: var(--panel-top); border-color: var(--line-jc); color: var(--foam); }
  .cip .n { font-family: var(--mono); font-size: 10.5px; color: var(--shallow-dark); }

  .grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 12px; padding: 18px 26px 26px;
  }
  .plate {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
    overflow: hidden; text-align: left; padding: 0; display: flex; flex-direction: column;
  }
  .plate:hover { border-color: var(--line-jc); }
  .plate .sl { position: relative; aspect-ratio: 16/9; background: var(--abis); overflow: hidden; }
  .plate .sl img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .plate .sl .n-box {
    position: absolute; right: 5px; bottom: 5px; font-family: var(--mono); font-size: 10px;
    padding: 1px 5px; border-radius: 2px; background: rgba(10,17,22,.82); color: var(--foam);
  }
  .plate .bar-st { height: 2px; }
  .plate .text { padding: 7px 9px 8px; }
  .plate .name {
    font-family: var(--mono); font-size: 10.5px; color: var(--shallow);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .plate .row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }
  .plate .kdo { font-size: 10.5px; color: var(--shallow-dark); display: flex; align-items: center; gap: 4px; }
  .mini-av {
    width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center;
    font-size: 8px; font-weight: 600; color: #0A1116;
  }

  /* Annotation editor */
  #workspace { grid-template-columns: 126px 1fr 292px; }

  .rail {
    border-right: 1px solid var(--line); background: var(--panel);
    overflow-y: auto; overflow-x: hidden; min-width: 0;
  }
  .rail-head {
    padding: 9px 11px; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; background: var(--panel); z-index: 1;
  }
  .film { padding: 8px; display: flex; flex-direction: column; gap: 7px; }
  .frame {
    position: relative; padding: 0; border: 1px solid var(--line); border-radius: 2px;
    overflow: hidden; background: var(--abis); aspect-ratio: 16/9;
  }
  .frame img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .68; }
  .frame:hover img { opacity: .95; }
  .frame[aria-current="true"] { border-color: var(--coral); }
  .frame[aria-current="true"] img { opacity: 1; }
  .frame .st { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; }
  .frame .br {
    position: absolute; right: 2px; bottom: 2px; font-family: var(--mono); font-size: 9px;
    padding: 0 3px; background: rgba(10,17,22,.85); border-radius: 2px; color: var(--shallow);
  }

  .center {
    display: grid; grid-template-rows: auto 1fr auto;
    min-width: 0; min-height: 0; overflow: hidden;
  }

  .frame-head {
    display: flex; align-items: center; gap: 12px; padding: 9px 16px;
    border-bottom: 1px solid var(--line); background: var(--panel);
    min-width: 0;
  }
  .frame-head .title {
    font-family: var(--mono); font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .frame-head .dim, .frame-head .badge, .frame-head .saving { flex: none; }
  .frame-head .dim { font-family: var(--mono); font-size: 11px; color: var(--shallow-dark); }
  .frame-head .right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }

  .canvas-frame {
    position: relative; overflow: auto; background:
      repeating-conic-gradient(#0C141A 0% 25%, #0A1116 0% 50%) 50% / 18px 18px;
    min-height: 0; padding: 18px;
    display: flex;
    align-items: center; justify-content: center;            /* fallback */
    align-items: safe center; justify-content: safe center;   /* Keep zoomed edges reachable by scrolling. */
  }
  .canvas {
    position: relative; line-height: 0; box-shadow: 0 0 0 1px var(--line);
    width: max-content; flex: none;   /* Wrap the image so the SVG matches its dimensions. */
  }
  .canvas img { display: block; max-width: none; height: auto; }
  .canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
  /* Tino: were .mozes-vuci and .hvata, renamed to match app.js. */
  .canvas-frame.can-drag svg,
  .canvas-frame.can-drag { cursor: grab; }
  .canvas-frame.grab svg,
  .canvas-frame.grab { cursor: grabbing; }
  .canvas svg rect.bx { fill: transparent; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
  .canvas svg rect.pog { fill: rgba(226,237,241,.07); }
  .canvas svg rect.odabran { stroke-width: 2.6; }
  .canvas svg rect.crtanje {
    stroke: var(--coral); stroke-width: 1.6; stroke-dasharray: 5 4;
    fill: rgba(242,114,74,.1);
    vector-effect: non-scaling-stroke;   /* Keep the draft stroke width independent of zoom. */
  }
  .canvas svg .ru {
    fill: var(--coral); stroke: #0A1116; stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }
  .canvas .caption {
    position: absolute; transform: translateY(-100%); font-family: var(--mono); font-size: 9.5px;
    line-height: 1.35; padding: 0 4px; white-space: nowrap; color: #0A1116; font-weight: 500;
    pointer-events: none;
  }

  .footer {
    display: flex; align-items: center; gap: 10px; padding: 9px 16px;
    border-top: 1px solid var(--line); background: var(--panel);
    flex-wrap: wrap; min-width: 0;
  }
  .footer > .button { flex: none; }
  .keys {
    display: flex; gap: 10px 12px; margin-left: auto;
    flex-wrap: wrap; justify-content: flex-end;
  }
  .keys span { font-size: 10.5px; color: var(--shallow-dark); display: flex; align-items: center; gap: 4px; }
  kbd {
    font-family: var(--mono); font-size: 9.5px; padding: 1px 4px; border-radius: 2px;
    background: var(--panel-top); border: 1px solid var(--line-jc); color: var(--shallow);
  }

  .button {
    padding: 6px 12px; background: var(--panel-hi); border: 1px solid var(--line);
    border-radius: var(--r); font-size: 12px; color: var(--foam);
  }
  .button:hover { border-color: var(--line-jc); background: var(--panel-top); }
  .button.akcija { background: var(--coral); border-color: var(--coral); color: #1A0A04; font-weight: 600; }
  .button.akcija:hover { background: #FF8560; border-color: #FF8560; }
  .button.dobra { background: transparent; border-color: #35604A; color: var(--st-reviewed); }
  .button.dobra:hover { background: rgba(95,193,126,.12); }
  .button.losa { background: transparent; border-color: #6A3A36; color: var(--st-rejected); }
  .button.losa:hover { background: rgba(223,92,82,.12); }
  .button:disabled { opacity: .4; cursor: not-allowed; }
  .button.sitna { padding: 3px 8px; font-size: 11px; }

  /* Inspector */
  .inspector {
    border-left: 1px solid var(--line); background: var(--panel);
    display: grid; grid-template-rows: auto auto minmax(80px, 1fr) auto;
    min-height: 0; min-width: 0; overflow: hidden;
  }
  .section {
    padding: 11px 13px; border-bottom: 1px solid var(--line);
    min-height: 0; min-width: 0; overflow: hidden;
  }
  .section.rast { overflow-y: auto; }
  .section > .label { display: block; margin-bottom: 9px; }

  .search { position: relative; margin-bottom: 8px; }
  .search input {
    width: 100%; padding: 6px 9px; background: var(--abis); border: 1px solid var(--line);
    border-radius: var(--r); font-size: 12px;
  }
  .search input:focus { border-color: var(--line-jc); outline: none; }

  .classes {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 28vh; overflow-y: auto; overflow-x: hidden;
  }
  .class {
    display: flex; align-items: center; gap: 8px; padding: 4px 7px; background: none;
    border: 1px solid transparent; border-radius: 2px; text-align: left; font-size: 12px;
  }
  .class:hover { background: var(--panel-hi); }
  .class[aria-pressed="true"] { background: var(--panel-top); border-color: var(--line-jc); }
  .class .colour { width: 8px; height: 8px; border-radius: 2px; flex: none; }
  .class .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .class .kb { font-family: var(--mono); font-size: 9.5px; color: var(--shallow-dark); }

  .boxes { display: flex; flex-direction: column; gap: 3px; }
  .bred {
    display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 2px;
    background: none; border: 1px solid transparent; text-align: left; width: 100%;
  }
  .bred:hover { background: var(--panel-hi); }
  .bred[aria-pressed="true"] { background: var(--panel-top); border-color: var(--line-jc); }
  .bred .colour { width: 3px; align-self: stretch; border-radius: 2px; flex: none; }
  .bred .nm { flex: 1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bred .ko { font-family: var(--mono); font-size: 9.5px; color: var(--shallow-dark); }
  .bred .x { opacity: 0; padding: 0 3px; background: none; border: 0; color: var(--shallow-dark); font-size: 13px; }
  .bred:hover .x { opacity: 1; }
  .bred .x:hover { color: var(--st-rejected); }

  .empty { color: var(--shallow-dark); font-size: 12px; padding: 6px 0; }

  /* Review */
  #review { grid-template-columns: 320px 1fr; }
  .row-review {
    display: flex; gap: 10px; padding: 10px 13px; width: 100%; background: none;
    border: 0; border-bottom: 1px solid var(--line); text-align: left; align-items: center;
  }
  .row-review:hover { background: var(--panel); }
  .row-review[aria-current="true"] { background: var(--panel-hi); box-shadow: inset 2px 0 0 var(--coral); }
  .row-review img { width: 62px; aspect-ratio: 16/9; object-fit: cover; border-radius: 2px; flex: none; }
  .row-review .tk { min-width: 0; flex: 1; }
  .row-review .nm { font-family: var(--mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row-review .mt { font-size: 10.5px; color: var(--shallow-dark); margin-top: 2px; }

  /* Statistics */
  .cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
    gap: 12px; padding: 20px 26px 0;
  }
  .tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 15px; }
  .tile-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
  .tile-head .name { font-weight: 500; }
  .tile-head .rl { font-size: 10.5px; color: var(--shallow-dark); }
  .pair { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; font-size: 12px; }
  .pair span { color: var(--shallow); }
  .pair b { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }

  .column { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
  .column .nm { width: 118px; flex: none; font-size: 12px; }
  .column .tr { flex: 1; height: 14px; background: var(--panel); border-radius: 2px; overflow: hidden; }
  .column .tr i { display: block; height: 100%; border-radius: 2px; }
  .column .v { width: 58px; text-align: right; font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }

  .note {
    margin: 22px 26px 26px; padding: 12px 14px; background: var(--panel);
    border: 1px solid var(--line); border-left: 2px solid var(--coral-dark);
    border-radius: var(--r); font-size: 12px; color: var(--shallow);
  }
  .note b { color: var(--foam); font-weight: 500; }

  .message {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(14px);
    background: var(--panel-top); border: 1px solid var(--line-jc); border-radius: var(--r);
    padding: 8px 15px; font-size: 12.5px; opacity: 0; pointer-events: none;
    transition: opacity .16s, transform .16s; z-index: 50;
  }
  /* Tino: was .tu, renamed to match app.js. */
  .message.here { opacity: 1; transform: translateX(-50%) translateY(0); }

  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }

  @media (max-width: 1100px) {
    #workspace { grid-template-columns: 1fr 262px; }
    #workspace .rail { display: none; }
    #review { grid-template-columns: 250px 1fr; }
  }

  /* Save indicator */
  .saving { font-size: 11px; color: var(--shallow-dark); min-width: 92px; }
  .saving.radi   { color: var(--st-wip); }
  .saving.gotovo { color: var(--st-reviewed); }
  .saving.pukla  { color: var(--st-rejected); }

  /* Errors */
  .error {
    margin: 4px 0 0; padding: 7px 10px; font-size: 12px;
    color: #FFC9C4; background: rgba(223,92,82,.12);
    border: 1px solid #6A3A36; border-radius: var(--r);
  }

  /* People panel */
  .add-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .add-row input, .add-row select {
    padding: 7px 10px; background: var(--abis); border: 1px solid var(--line);
    border-radius: var(--r); color: var(--foam); font-size: 12.5px;
  }
  .add-row input { min-width: 168px; }
  .add-row input:focus, .add-row select:focus { border-color: var(--line-jc); outline: none; }

  #new-password:empty { display: none; }
  #new-password {
    margin-top: 12px; padding: 12px 14px; background: var(--panel);
    border: 1px solid var(--line); border-left: 2px solid var(--st-reviewed);
    border-radius: var(--r); font-size: 12.5px;
  }
  #new-password .lz {
    font-family: var(--mono); font-size: 14px; color: var(--foam);
    background: var(--panel-top); padding: 2px 8px; border-radius: 2px;
    user-select: all;
  }

  tr.ugasen td { opacity: .45; }
  .actions-row { display: flex; gap: 6px; justify-content: flex-end; }

  /* Empty states */
  .loading { padding: 26px; color: var(--shallow-dark); font-size: 12.5px; }

  /* Hide review statistics from annotators */
  body[data-role="anotator"] .only-mentor { display: none; }

  /* Emphasize available image counts for annotators. */
  .table td.za-rad { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .table td.za-rad b { font-weight: 500; color: var(--coral); }
  .table td.za-rad.nema { color: var(--shallow-dark); }

  /* BlueDataB logo */
  /* Use a dark background to keep the logo text legible. */
  .mark-plate {
    display: inline-flex; align-items: center; gap: 9px;
    background: #0F1B2E; border-radius: 4px; padding: 5px 12px;
    text-decoration: none; flex: none;
  }
  .bar a.znak { text-decoration: none; }
  .mark .mark-drawn {
    display: inline-flex; align-items: center; gap: 8px;
    flex-shrink: 0; white-space: nowrap;
  }
  .mark .bd { flex-shrink: 0; white-space: nowrap; }
  .mark .bd span { display: inline; font-size: inherit; letter-spacing: inherit; }
  .mark .bd-blue { color: #3C82E8; }
  .mark .bd-zuto { color: #FFC629; }
  .bar .tab { flex-shrink: 0; white-space: nowrap; }
  .logo { display: block; height: 26px; width: auto; }
  #login .logo { height: 40px; }
  #login .mark { flex-direction: column; align-items: flex-start; gap: 9px; }
  #login .mark .subtitle { font-size: 11px; color: var(--shallow-dark); letter-spacing: .04em; }

  .mark .riba { width: 34px; height: 21px; flex: none; }
  #login .mark .riba { width: 44px; height: 27px; }

  .bd { letter-spacing: -.015em; font-weight: 600; }
  .bd-blue { color: #3C82E8; }
  .bd-zuto { color: #FFC629; }
  .mark-login span { margin-top: 3px; }

  /* Keep logo text compact and prevent the logo from shrinking beside the tabs. */
  .bar .mark { flex: none; }
  .bar .mark .bd { font-size: 21px; line-height: 1; display: block; }
  .bar .tabs { min-width: 0; }
  #login .mark .bd { font-size: 27px; line-height: 1.05; display: block; }

  /* Responsive review layout. The annotation editor is restricted to desktop. */

  .only-desktop { display: none; }
  .preview-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 262px;
    gap: 20px; align-items: start;
  }
  .preview-actions { display: flex; gap: 8px; margin-top: 13px; flex-wrap: wrap; }

  /* Larger touch targets for coarse pointers. */
  @media (hover: none) and (pointer: coarse) {
    .button { min-height: 36px; padding: 7px 12px; }
    .button.sitna { min-height: 30px; padding: 4px 9px; }
    .cip { min-height: 30px; }
    .table td { padding: 9px 8px; }
    .row-review { padding: 10px 11px; }
  }

  @media (max-width: 820px) {
    /* Wrap the header and scroll navigation tabs horizontally. */
    :root { --bar: auto; }
    .bar {
      flex-wrap: wrap; padding: 8px 12px; gap: 8px 10px;
      align-items: center; row-gap: 6px;
    }
    .bar > .mark { padding-right: 0; }
    .bar .mark .bd { font-size: 18px; }
    .mark .riba { width: 28px; height: 18px; }

    .bar-right { margin-left: auto; gap: 8px; }
    .link .mono { display: none; }             /* Keep only the connection indicator. */
    .user-chip i { display: none; }

    .tabs {
      order: 3; width: 100%;
      overflow-x: auto; overflow-y: hidden;
      scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { padding: 8px 12px; white-space: nowrap; border-bottom-width: 2px; }

    /* Reduce whitespace. */
    .header { padding: 16px 14px 0; }
    .header h1 { font-size: 17px; }
    .wrapped { padding: 0 14px 20px; }
    .counters { margin: 14px 14px 0; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
    .counter { padding: 10px 12px; }
    .counter .v { font-size: 18px; }
    .legend { margin: 14px 14px 0; gap: 10px; }
    .toolbar { padding: 11px 14px; }
    .grid { padding: 14px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .cards { padding: 16px 14px 0; }

    /* Hide secondary table columns on small screens. */
    .only-large { display: none; }
    .table th, .table td { padding: 9px 8px; }
    .table .lat { display: none; }

    /* Place the review queue above the preview. */
    #review { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
    #review .rail {
      border-right: 0; border-bottom: 1px solid var(--line);
      max-height: 33vh; overflow-y: auto;
    }
    .preview-grid { grid-template-columns: 1fr; gap: 14px; }
    #review-content { padding: 14px !important; }
    .preview-actions .button { flex: 1 1 auto; justify-content: center; text-align: center; }
    .only-desktop-inline { display: none; }   /* Hide the desktop editor link. */

    /* Wrap statistics rows inside their container. */
    .column { flex-wrap: wrap; gap: 4px 10px; }
    .column .nm { width: auto; flex: 1 1 100%; font-weight: 500; }
    .column .tr { flex: 1 1 auto; }
    .column .v { width: 52px; }
    .column > span:last-child { flex: 1 1 100%; width: auto !important; }

    /* Show the desktop requirement message instead of the editor. */
    #workspace { grid-template-columns: 1fr; }
    #workspace .rail, #workspace .center, #workspace .inspector { display: none; }
    #workspace .only-desktop {
      display: grid; place-items: center; padding: 24px 16px; min-height: 0;
    }

    /* People */
    .add-row { flex-direction: column; align-items: stretch; }
    .add-row input, .add-row select { min-width: 0; width: 100%; }
    .actions-row { flex-wrap: wrap; justify-content: flex-start; }
  }

  @media (max-width: 520px) {
    .bar .mark .bd { font-size: 16px; }
    .plate { padding: 3px 8px; gap: 6px; }
    .counters { grid-template-columns: repeat(2, 1fr); }
    .grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .cards { grid-template-columns: 1fr; }
    #review .rail { max-height: 28vh; }
    .user-chip span:not(.avatar) { display: none; }   /* Keep only the avatar. */
  }

  /* Prevent horizontal page overflow in portrait mode. */
  @media (max-width: 820px) {
    body { overflow-x: hidden; }               /* Wide content has its own scroll container. */

    /* Scroll the table inside its container. */
    .wrapped { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .wrapped > .table { min-width: 460px; }

    /* Use 16px input text to avoid automatic focus zoom on iOS. */
    input, select, textarea { font-size: 16px !important; }

    .card { padding: 24px 20px 22px; }
    #login { padding: 18px; }
  }


  /* Compact phone layout */
  @media (max-width: 480px) {
    body { font-size: 12.5px; }

    .bar { padding: 6px 10px; row-gap: 4px; }
    .bar-right { gap: 6px; }
    .bar .mark .bd { font-size: 14px; }
    .mark .riba { width: 22px; height: 15px; }
    .plate { padding: 2px 6px; gap: 5px; }
    .avatar { width: 20px; height: 20px; font-size: 9.5px; }
    .user-chip { padding: 3px 4px; }
    .tab { padding: 6px 9px; font-size: 11.5px; }

    .header { padding: 12px 12px 0; }
    .header h1 { font-size: 15.5px; }
    .header p { font-size: 11.5px; }
    .wrapped { padding: 0 12px 18px; }
    .wrapped > .table { min-width: 360px; }
    .counters { margin: 12px 12px 0; }
    .counter { padding: 8px 10px; }
    .counter .v { font-size: 16px; }
    .label { font-size: 9px; }
    .legend { margin: 12px 12px 0; }
    .legend div { font-size: 10.5px; }
    .square { width: 7px; height: 7px; }

    .table th { font-size: 9.5px; letter-spacing: .06em; }
    .table th, .table td { padding: 8px 6px; }

    .grid { padding: 12px; gap: 8px; }
    .cards { padding: 12px 12px 0; }
    .tile { padding: 11px 12px; }
    .pair { font-size: 11.5px; }

    #review-content { padding: 12px !important; }
    .row-review { padding: 9px 10px; }
    .row-review img { width: 54px; }
    .row-review .nm { font-size: 10.5px; }
  }

  /* Browser uploads */
  .transfer {
    margin: 0 26px; padding: 10px 14px; font-size: 12.5px;
    background: var(--panel); border: 1px solid var(--line);
    border-left: 2px solid var(--coral); border-radius: var(--r);
  }
  .transfer b { font-weight: 500; }
  .transfer .bar-progress {
    margin-top: 8px; height: 4px; border-radius: 2px;
    background: var(--panel-top); overflow: hidden;
  }
  .transfer .bar-progress i {
    display: block; height: 100%; background: var(--coral);
    transition: width .2s;
  }
  .transfer ul { margin: 7px 0 0; padding-left: 18px; color: var(--shallow-dark); font-size: 11.5px; }

  .drop-here {
    position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
    background: rgba(10, 17, 22, .82);
    outline: 2px dashed var(--coral); outline-offset: -14px;
    pointer-events: none;
  }
  .drop-here div { text-align: center; }
  .drop-here b { display: block; font-size: 19px; font-weight: 600; }
  .drop-here span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--shallow); }

  @media (max-width: 820px) {
    .transfer { margin: 0 14px; }
  }

  /* Legacy project-selector styles. The current header uses navigation tabs
     and the account menu; projects are selected on the Projects screen. */
  .pickerp {
    display: flex; flex-direction: column; justify-content: center; gap: 1px;
    align-self: center; flex: none;
    margin: 0 18px 0 16px; padding-left: 16px;
    border-left: 1px solid var(--line);
  }
  .pickerp-label {
    font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--shallow-dark); line-height: 1;
  }
  .pickerp-field { display: flex; align-items: center; gap: 7px; }
  .pickerp select {
    background: var(--panel-hi); color: var(--foam);
    border: 1px solid var(--line-jc); border-radius: var(--r);
    padding: 3px 7px; font: inherit; font-size: 13px; font-weight: 500;
    max-width: 220px; cursor: pointer;
  }
  .pickerp select:hover { border-color: var(--coral); }
  .pickerp select:focus { outline: none; border-color: var(--coral); }
  .rolap {
    font-size: 9.5px; color: var(--shallow-dark); letter-spacing: .04em;
    border: 1px solid var(--line); border-radius: 8px; padding: 0 6px;
  }

  .tiny-picker {
    background: var(--panel-hi); color: var(--foam);
    border: 1px solid var(--line); border-radius: var(--r);
    padding: 4px 7px; font: inherit; font-size: 11.5px;
  }
  .tiny-picker:focus { outline: none; border-color: var(--coral); }

  /* Currently selected project. */
  .table tr.tekuci td { background: var(--panel-hi); }
  .table tr.tekuci .kind-name { color: var(--coral); }

  /* Inline class editing. */
  .table input[type="color"] {
    width: 38px; height: 24px; padding: 0; background: none;
    border: 1px solid var(--line); border-radius: var(--r);
  }
  .table input.uredi-ime {
    background: transparent; color: var(--foam); font: inherit; font-size: 12.5px;
    border: 1px solid transparent; border-radius: var(--r); padding: 3px 6px;
  }
  .table input.uredi-ime:hover { border-color: var(--line); }
  .table input.uredi-ime:focus {
    outline: none; border-color: var(--coral); background: var(--abis);
  }

  @media (max-width: 820px) {
    .pickerp { padding-right: 10px; order: 2; }
    .pickerp select { max-width: 150px; font-size: 12px; }
    .rolap { display: none; }
  }

.only-mentor-block{display:none;margin:20px 26px} body[data-role="admin"] .only-mentor-block,body[data-role="mentor"] .only-mentor-block{display:block} .bar .tabs{overflow-x:auto} .bar{column-gap:8px} details summary{cursor:pointer;padding:12px;font-weight:600}

/* Keep the account menu available on every panel. */
.account { margin-left:auto; position:relative; flex-shrink:0; }
#account-popup { position:absolute; right:0; top:calc(100% + 8px); z-index:100;
  width:300px; max-width:calc(100vw - 24px); padding:18px; background:var(--panel);
  color:var(--foam); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 8px 30px #0003; max-height:calc(100dvh - 80px); overflow-y:auto; }
#account-popup > .button { display:block; margin-top:14px; width:100%; }
#account-role { font-size:12px; margin-top:4px; }
#form-password label { display:block; margin-top:12px; font-size:12px; }
#form-password input { display:block; width:100%; margin-top:4px; }
#form-password p { font-size:12px; }
#account-error { color:#b42318; margin:8px 0; }
.project-row { cursor:pointer; }
.project-row:hover, .project-row:focus-visible { background:#3c82e810; outline:2px solid #3c82e8; outline-offset:-2px; }
@media(max-width:760px) { .bar .tabs { order:3; width:100%; } }

/* Role visibility overrides form layout styles. */
body:not([data-role="admin"]) .only-admin { display:none !important; }

/* Tino: was .tu, renamed to match app.js. */
.message.here { pointer-events:auto; cursor:pointer; }

.film-group { margin-bottom:16px; }
.film-title { margin:0 0 9px; padding:9px 3px; font-size:11px; color:var(--shallow-dark); border-bottom:1px solid var(--line); }
.film-title span { font-weight:400; }
.film-rework .film-title { color:var(--coral); border-color:var(--coral); }