/* Piattaforma multi-utente: aggiunte rispetto allo stile dell'app originale (app.css) */
a { color:inherit; }
.logo { text-decoration:none; color:var(--text); }
.crumb { font-family:'DM Mono',monospace; font-size:11px; color:var(--text-mid); display:flex; align-items:center; gap:6px; min-width:0; }
.crumb b { font-weight:500; color:var(--text); }
.crumb .sep { color:var(--text-soft); }
.header-left { display:flex; align-items:center; gap:22px; min-width:0; }
.top-link { font-family:'DM Mono',monospace; font-size:11px; color:var(--text-mid); text-decoration:none; padding:4px 10px; border-radius:6px; border:1px solid transparent; background:none; cursor:pointer; }
.top-link:hover { border-color:var(--border); background:var(--bg); color:var(--text); }
.user-name { color:var(--text); font-weight:500; }

/* indicatore di salvataggio, sempre visibile */
.save-ind { padding:3px 10px; border-radius:20px; font-size:11px; border:1px solid var(--border); background:var(--bg); color:var(--text-mid); white-space:nowrap; }
.save-ind.saved  { background:#e8f5ee; border-color:#a8d8b9; color:#2d7a4f; }
.save-ind.saving { background:var(--review-bg); border-color:var(--review-border); color:var(--review-accent); }
.save-ind.failed { background:var(--bleed-bg); border-color:var(--bleed-border); color:#b03030; }
.save-ind.readonly { background:var(--surface2); color:var(--text-soft); }

/* editor bloccato finché il caricamento non riesce; sola lettura */
body.locked .right .section button,
body.locked .controls button { pointer-events:none; opacity:.4; }
body.readonly .edit-only { display:none; }
body:not(.readonly) .readonly-only { display:none; }
.readonly-note { font-size:12px; color:var(--text-mid); line-height:1.6; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; }

.nav-row { display:flex; gap:7px; margin-top:7px; }
.nav-row .btn-json { flex:1; }
.btn-json:disabled { opacity:.35; cursor:not-allowed; }

/* finestre di dialogo */
.banner-card.wide { max-width:520px; text-align:left; }
.banner-card .banner-body { font-size:13px; color:var(--text-mid); line-height:1.6; }
.sum-grid { display:grid; grid-template-columns:1fr auto; gap:5px 16px; font-size:13px; margin:4px 0; }
.sum-grid span:nth-child(odd) { color:var(--text-mid); }
.sum-grid span:nth-child(even) { font-family:'DM Mono',monospace; font-size:12px; color:var(--text); text-align:right; }
.gap-list { display:flex; flex-direction:column; gap:4px; max-height:170px; overflow-y:auto; margin-top:6px; }
.gap-item { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 10px; border-radius:7px; background:var(--bleed-bg); border:1px solid var(--bleed-border); font-family:'DM Mono',monospace; font-size:11px; color:#b03030; cursor:pointer; text-align:left; width:100%; }
.gap-item:hover { background:#f8dada; }
.warn-line { color:#b03030; font-size:12px; margin-top:8px; }
.note-line { color:var(--review-accent); font-size:12px; margin-top:8px; }
.banner-dl:disabled { opacity:.3; cursor:not-allowed; }

/* revisione: striscia delle modifiche sotto la timeline, e timeline di confronto */
.tl-changes { position:relative; height:6px; margin-top:5px; background:var(--bg); border-radius:3px; overflow:hidden; }
.tl-changes div { position:absolute; top:0; height:100%; min-width:3px; }
.tl-changes .modified, .lg.modified { background:var(--review-accent); }
.tl-changes .added,    .lg.added    { background:#2d9e62; }
.tl-changes .removed,  .lg.removed  { background:var(--bleed); }
.tl-legend { display:flex; gap:14px; align-items:center; font-family:'DM Mono',monospace; font-size:10px; color:var(--text-soft); margin-top:5px; }
.tl-legend .lg { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
.tl-legend .lg.gap { background:rgba(224,85,85,.12); border:1.5px dashed var(--bleed); }
.rev-seg-item.is-gap { background:var(--bleed-bg); border-left-style:dashed; border-left-color:var(--bleed) !important; }
.rev-seg-item.is-gap .rev-seg-phase { color:#b03030; font-style:italic; font-weight:500; }
.btn-review-restore { background:var(--surface2); border-color:var(--border2); color:var(--text-mid); }
.btn-review-restore:hover { background:var(--bg); color:var(--text); }
.time-range-row .btn-goto-time { padding:4px 6px; }
.gap-row { display:flex; gap:6px; align-items:stretch; }
.gap-row .gap-item { flex:1; }
.gap-fill { padding:6px 10px; border-radius:7px; background:var(--surface); border:1px solid var(--border2); color:var(--text); font-size:11px; font-family:'DM Sans',sans-serif; cursor:pointer; white-space:nowrap; }
.gap-fill:hover { border-color:var(--text-mid); }
.tl-compare { margin-top:10px; }
.tl-compare .tl-track-wrap { height:18px; cursor:default; }
.tl-compare .phase-seg { cursor:default; }
.change-counts { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.toggle-row { display:flex; gap:6px; }
.toggle-row .btn-json { flex:1; padding:7px; }
.toggle-row .btn-json.on { background:var(--text); color:#fff; border-color:var(--text); }
.rev-seg-item .seg-badge { font-size:9px; padding:0 6px; }

/* tratti non annotati evidenziati in timeline */
.tl-gap { position:absolute; top:-5px; height:calc(100% + 10px); border:1.5px dashed var(--bleed); background:rgba(224,85,85,.12); border-radius:3px; pointer-events:none; }

/* login */
body.page { height:auto; min-height:100vh; overflow:auto; }
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:32px 34px; width:100%; max-width:360px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px; }
.login-card h1 { font-size:22px; font-weight:600; letter-spacing:-0.3px; }
.login-card h1 em { font-style:normal; color:var(--text-soft); font-weight:400; }
.login-card p { font-size:12px; color:var(--text-mid); line-height:1.6; }
.field { display:flex; flex-direction:column; gap:5px; }
.field label { font-size:10px; font-family:'DM Mono',monospace; text-transform:uppercase; letter-spacing:.8px; color:var(--text-soft); }
.field input { padding:10px 12px; border-radius:9px; border:1.5px solid var(--border); background:var(--surface2); font-family:'DM Sans',sans-serif; font-size:14px; color:var(--text); }
.field input:focus { outline:none; border-color:var(--text-mid); background:var(--surface); }
.form-error { font-size:12px; color:#b03030; background:var(--bleed-bg); border:1px solid var(--bleed-border); border-radius:8px; padding:8px 10px; display:none; }
.form-error.show { display:block; }
[hidden] { display:none !important; }

/* le mie procedure */
.page-main { max-width:860px; margin:0 auto; padding:28px 24px 60px; display:flex; flex-direction:column; gap:14px; }
.page-main h2 { font-size:20px; font-weight:600; letter-spacing:-0.3px; }
.page-sub { font-size:10px; font-family:'DM Mono',monospace; text-transform:uppercase; letter-spacing:1px; color:var(--text-soft); margin-top:14px; }
.empty-note { font-size:13px; color:var(--text-mid); background:var(--surface); border:1px dashed var(--border2); border-radius:12px; padding:22px; text-align:center; }
.proc-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-sm); overflow:hidden; }
.proc-card.done { opacity:.62; box-shadow:none; }
.proc-head { display:flex; align-items:center; gap:16px; padding:16px 18px; }
.proc-title { flex:1; min-width:0; }
.proc-title .id { font-size:15px; font-weight:600; }
.proc-title .meta { font-size:11px; font-family:'DM Mono',monospace; color:var(--text-soft); margin-top:4px; display:flex; gap:14px; flex-wrap:wrap; }
.progress { width:150px; flex-shrink:0; }
.progress .bar { height:6px; background:var(--bg); border:1px solid var(--border); border-radius:4px; overflow:hidden; }
.progress .bar div { height:100%; background:#2d9e62; }
.progress .lbl { font-size:11px; color:var(--text-mid); margin-top:5px; text-align:right; }
.btn-primary { padding:9px 18px; border-radius:9px; background:var(--text); border:none; color:#fff; font-size:13px; font-family:'DM Sans',sans-serif; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn-primary:hover { opacity:.85; }
.btn-primary:disabled { opacity:.4; cursor:not-allowed; }
.btn-primary.block { width:100%; padding:11px; }
.btn-ghost { padding:8px 12px; border-radius:9px; background:none; border:1px solid var(--border); color:var(--text-mid); font-size:12px; font-family:'DM Sans',sans-serif; cursor:pointer; }
.btn-ghost:hover { border-color:var(--border2); color:var(--text); }
.video-list { border-top:1px solid var(--border); display:none; }
.proc-card.open .video-list { display:block; }
.video-row { display:flex; align-items:center; gap:14px; padding:10px 18px; font-size:13px; border-bottom:1px solid var(--border); text-decoration:none; color:var(--text); }
.video-row:last-child { border-bottom:none; }
.video-row:hover { background:var(--surface2); }
.video-row .vname { flex:1; font-weight:500; }
.video-row .vmeta { font-family:'DM Mono',monospace; font-size:11px; color:var(--text-soft); }
.st { padding:2px 9px; border-radius:20px; font-size:10px; font-family:'DM Mono',monospace; border:1px solid var(--border); background:var(--bg); color:var(--text-mid); white-space:nowrap; }
.st.in_annotazione { background:var(--action-bg); border-color:var(--action-border); color:var(--action-color); }
.st.in_revisione   { background:#f3eefb; border-color:#cdb8ee; color:#6b3fb0; }
.st.annotato, .st.revisionato { background:#e8f5ee; border-color:#a8d8b9; color:#2d7a4f; }

/* revisione: strumenti sotto la timeline */
.tl-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; flex-wrap:wrap; }
.tl-tools .tl-legend { margin-top:0; }
.tl-buttons { display:flex; gap:6px; flex-wrap:wrap; }
.btn-tool { padding:4px 10px; border-radius:7px; background:var(--surface2); border:1px solid var(--border); color:var(--text-mid); font-size:11px; font-family:'DM Sans',sans-serif; cursor:pointer; white-space:nowrap; max-width:230px; overflow:hidden; text-overflow:ellipsis; }
.btn-tool:hover:not(:disabled) { border-color:var(--border2); color:var(--text); }
.btn-tool:disabled { opacity:.4; cursor:not-allowed; }
.btn-tool.on { background:var(--text); color:#fff; border-color:var(--text); }
#undoBtn:not(:disabled) { background:var(--review-bg); border-color:var(--review-border); color:var(--review-accent); font-weight:600; }
.link-btn { background:none; border:none; padding:0; font-family:'DM Mono',monospace; font-size:10px; color:var(--review-accent); cursor:pointer; text-transform:none; letter-spacing:0; }
.link-btn:hover { text-decoration:underline; }
.keys-hint { font-family:'DM Mono',monospace; font-size:10px; color:var(--text-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* confini con un click sul frame mostrato */
.here-row { display:flex; gap:7px; margin-bottom:8px; }
.btn-here { flex:1; padding:11px 8px; border-radius:9px; background:var(--review-accent); border:none; color:#fff; font-size:13px; font-family:'DM Sans',sans-serif; font-weight:600; cursor:pointer; }
.btn-here:hover { opacity:.88; }
.exact-times { margin-bottom:10px; }
.exact-times summary { font-size:11px; color:var(--text-soft); cursor:pointer; font-family:'DM Mono',monospace; }
.exact-times summary:hover { color:var(--text-mid); }
#editor { margin-top:10px; background:var(--review-bg); border:1px solid var(--review-border); border-radius:9px; padding:10px 12px; }

/* segmento nuovo non ancora confermato; spunta dei segmenti controllati */
.phase-seg.draft { outline:2px dashed var(--text); outline-offset:1px; opacity:.6; z-index:3; background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.18) 0 4px, transparent 4px 8px); }
.seg-check { width:15px; height:15px; border-radius:4px; border:1.5px solid var(--border2); display:inline-flex; align-items:center; justify-content:center; font-size:10px; color:transparent; flex-shrink:0; cursor:pointer; background:var(--surface); }
.seg-check.on { background:#2d9e62; border-color:#2d9e62; color:#fff; }
.seg-check.none { visibility:hidden; }
body.readonly .seg-check { cursor:default; }
.review-seg-list { max-height:190px; }
.muted-mono { margin-left:auto; font-family:'DM Mono',monospace; font-size:10px; color:var(--text-soft); }
.bleed-item { cursor:pointer; }
.bleed-item:hover { border-color:var(--bleed); }
.bleed-item .bdel { margin-left:8px; }
/* punto di bleeding sul fotogramma esatto: pieno e più grande */
.rv-bleed-dot.exact { width:24px; height:24px; background:rgba(224,85,85,.9); box-shadow:0 0 0 4px rgba(224,85,85,.4), 0 0 14px rgba(224,85,85,.8); }

/* zoom della timeline */
.tl-right { display:flex; align-items:center; gap:10px; }
.zoom-btns { display:flex; gap:3px; }
.zoom-btn { min-width:24px; height:20px; padding:0 7px; border-radius:5px; background:var(--surface2); border:1px solid var(--border); color:var(--text-mid); font-size:12px; line-height:1; font-family:'DM Mono',monospace; cursor:pointer; text-transform:none; letter-spacing:0; }
.zoom-btn:hover:not(:disabled) { border-color:var(--border2); color:var(--text); }
.zoom-btn:disabled { opacity:.35; cursor:default; }
.tl-label { align-items:center; }

/* ingrandimento della pagina: l'altezza viene da --page-h, calcolata in api.js */
body { height:var(--page-h, 100vh); }
.workspace { height:calc(var(--page-h, 100vh) - 52px); }
body.page { height:auto; min-height:var(--page-h, 100vh); }
.page-zoom { display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.pz-btn, .pz-level { background:var(--surface2); border:none; color:var(--text-mid); cursor:pointer; font-family:'DM Sans',sans-serif; height:26px; }
.pz-btn { width:30px; font-size:12px; font-weight:600; }
.pz-level { padding:0 6px; font-size:10px; font-family:'DM Mono',monospace; border-left:1px solid var(--border); border-right:1px solid var(--border); min-width:42px; }
.pz-btn:hover, .pz-level:hover { background:var(--bg); color:var(--text); }