/* Paleta FreeKlip, presa dels fitxers de marca (no a ull):
   teal #1c6e6b i taronja #db4a24. Dues correccions mesurades:
   · el taronja pur dona 4,19:1 sobre blanc — per sota del mínim per a text petit. Per a interfície
     fem servir #d24723 (96% del to, visualment igual) que arriba just a 4,50.
   · taronja sobre teal dona 1,44:1: MAI el posis com a accent damunt del fons corporatiu. */
:root{
  --bg:#f4f6f6; --panel:#ffffff; --panel2:#eef1f1; --line:rgba(16,40,40,.10); --line-2:rgba(16,40,40,.17);
  --txt:#17211f; --mut:#69736f; --acc:#1c6e6b; --acc-2:#14524f; --acc-soft:#e2efee;
  --ok:#16a34a; --warn:#b45309; --rec:#d24723; --rec-2:#b83e1e; --rec-pure:#db4a24;
  /* escala de radis */
  --r-xs:6px; --r-sm:9px; --radius:12px; --r-lg:16px; --r-xl:20px; --pill:999px;
  --shadow:0 1px 1px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.06);
  --shadow-lg:0 2px 4px rgba(16,24,40,.04), 0 12px 32px rgba(16,24,40,.10);
  --shadow-xl:0 8px 20px rgba(16,24,40,.10), 0 32px 64px rgba(16,24,40,.14);
  --ease:cubic-bezier(.32,.72,0,1);
  --t:.22s var(--ease);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--txt);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.app{max-width:1560px;margin:0 auto;padding:26px 22px 64px}
header.top{display:flex;align-items:center;gap:13px;margin-bottom:22px}
.logo{width:38px;height:38px;border-radius:10px;overflow:hidden;display:block;box-shadow:0 2px 8px rgba(28,110,107,.30);flex:none}
.logo img{width:100%;height:100%;object-fit:cover;display:block}
h1{font-size:20px;margin:0;font-weight:650;letter-spacing:-.022em}
.tag{color:var(--mut);font-size:12.5px;letter-spacing:-.005em}

/* control segmentat, estil iOS */
.lang{display:flex;background:var(--panel2);border-radius:var(--r-sm);padding:2px;gap:2px}
.lang button{background:none;border:0;color:var(--mut);padding:6px 12px;font:inherit;font-weight:600;cursor:pointer;font-size:12.5px;border-radius:7px;transition:var(--t)}
.lang button:hover{color:var(--txt)}
.lang button.active{background:var(--panel);color:var(--txt);box-shadow:0 1px 3px rgba(16,24,40,.12)}

.grid{display:grid;grid-template-columns:1fr 348px;gap:20px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
body.big .grid{grid-template-columns:1fr}
body.big #sidebar{display:none}
body.big .stage{height:min(86vh,1400px)}
body.big .app{max-width:1900px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow)}
.card h2{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin:0 0 14px;font-weight:650}

.stage{position:relative;background:#0b0d10;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;height:min(72vh,1000px);display:grid;place-items:center;transition:height var(--t)}
/* Pantalla completa: va sobre #stagewrap (no sobre .stage) perque els controls hi entrin.
   Res d'aixo es grava: enregistrem el canvas, no la pagina. */
#stagewrap:fullscreen{background:#0b0d10;border:0;border-radius:0;padding:0;box-shadow:none;display:flex;flex-direction:column}
#stagewrap:fullscreen .stage{flex:1;height:auto;min-height:0;border:0;border-radius:0}
#stagewrap:fullscreen #result{display:none}
/* Barra clara a posta: .btn.ghost es transparent i el text es fosc, aixi que sobre fons negre
   els botons secundaris i els desactivats desapareixien. Amb fons clar valen els estils de sempre. */
#stagewrap:fullscreen #mainControls{margin:0;padding:12px 16px;justify-content:center;background:var(--panel);border-top:1px solid var(--line)}
.stage.dragover{outline:2px dashed var(--acc);outline-offset:-10px}
.dropmsg{position:absolute;inset:0;display:none;place-items:center;background:rgba(245,245,247,.94);z-index:8;color:var(--txt);font-size:18px;font-weight:650;text-align:center;padding:20px}
.stage.dragover .dropmsg{display:grid}
#preview{width:100%;height:100%;display:block;object-fit:contain;touch-action:none;cursor:crosshair}
.stage.no-draw #preview{cursor:default}
.placeholder{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:#a9b0ba;line-height:1.6}
.placeholder b{color:#fff;font-size:17px;display:block;margin-bottom:8px;font-weight:600;letter-spacing:-.02em}
.placeholder .accent{color:#66d6d0}

/* CAP capa de dins de l'escenari pot dur backdrop-filter: en pantalla completa Chromium
   el propaga a tot el fons i sembla que s'hagi difuminat el video sencer. */
.teleprompter{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;width:min(760px,92%);max-height:42%;background:rgba(255,255,255,.97);border:1px solid rgba(16,24,40,.10);border-radius:var(--r-lg);padding:12px 18px;overflow:hidden;display:none;box-shadow:var(--shadow-xl);cursor:move;touch-action:none}
.teleprompter.on{display:block}
/* quan l'usuari l'ha mogut, mana la posicio propia (left/top) */
.teleprompter.moved{transform:none;bottom:auto}
.teleprompter.dragging{user-select:none;border-color:var(--acc);box-shadow:0 18px 48px rgba(16,24,40,.30)}
.tp-scroll{overflow:hidden;height:100%}
.tp-text{white-space:pre-wrap;font-weight:550;color:var(--txt);text-align:center;will-change:transform;letter-spacing:-.015em}
.tp-badge{position:absolute;top:8px;right:12px;font-size:9.5px;color:var(--acc);letter-spacing:.06em;font-weight:700;text-transform:uppercase}

/* Recordatori que l'escenari es un mirall del que es grava, no l'app: no s'hi pot clicar. */
.mirror{position:absolute;top:12px;right:12px;z-index:4;pointer-events:none;background:rgba(11,13,16,.62);color:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.16);border-radius:var(--pill);padding:5px 11px;font-size:10px;font-weight:650;letter-spacing:.04em;text-transform:uppercase}
/* selector de disposicio sobre l'escenari (capa HTML: no surt al video) */
.layouts{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:2px;background:rgba(11,13,16,.66);border:1px solid rgba(255,255,255,.14);border-radius:var(--pill);padding:3px;box-shadow:0 6px 20px rgba(0,0,0,.28)}
.layouts button{border:0;background:none;color:rgba(255,255,255,.72);font:inherit;font-size:12px;font-weight:600;padding:7px 15px;border-radius:var(--pill);cursor:pointer;white-space:nowrap;transition:var(--t);letter-spacing:-.01em}
.layouts button:hover{color:#fff}
.layouts button.active{background:#fff;color:#1d1d1f;box-shadow:0 1px 3px rgba(0,0,0,.2)}

.recbar{position:absolute;top:12px;left:12px;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:var(--pill);padding:7px 13px;box-shadow:var(--shadow-lg)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--rec);flex:none}
.rec .dot{animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(219,74,36,.55)}70%{box-shadow:0 0 0 9px rgba(219,74,36,0)}100%{box-shadow:0 0 0 0 rgba(219,74,36,0)}}
.time{font-variant-numeric:tabular-nums;font-weight:650;font-size:13px;letter-spacing:-.01em}
.markbtn{border:1px solid var(--line);background:var(--panel);border-radius:var(--pill);padding:4px 11px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:var(--t)}
.markbtn:hover{background:var(--panel2)}
.countdown{position:absolute;inset:0;display:none;place-items:center;background:rgba(11,13,16,.62);z-index:5}
.countdown.on{display:grid}
.countdown b{font-size:120px;font-weight:700;color:#fff;letter-spacing:-.04em;text-shadow:0 8px 48px rgba(28,110,107,.7)}

.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.row + .row{margin-top:11px}
#mainControls{margin-top:14px}
#stagewrap{padding:14px}

label.fld{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--mut);flex:1;min-width:120px;font-weight:500}
select,input[type=text],input[type=password]{background:var(--panel);border:1px solid var(--line-2);color:var(--txt);border-radius:var(--r-sm);padding:10px 12px;font:inherit;font-size:14px;width:100%;transition:var(--t);letter-spacing:-.01em}
select:hover,input[type=text]:hover{border-color:rgba(16,24,40,.26)}
select:focus,input[type=text]:focus,input[type=password]:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3.5px var(--acc-soft)}
textarea{background:var(--panel);border:1px solid var(--line-2);color:var(--txt);border-radius:var(--r-sm);padding:12px;font:inherit;font-size:14px;width:100%;resize:vertical;min-height:96px;transition:var(--t);line-height:1.5}
textarea:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3.5px var(--acc-soft)}
input[type=range]{width:100%;accent-color:var(--acc)}

.btn{appearance:none;border:1px solid var(--line-2);background:var(--panel);color:var(--txt);border-radius:var(--r-sm);padding:10px 15px;font:inherit;font-size:14px;font-weight:590;cursor:pointer;display:inline-flex;gap:8px;align-items:center;justify-content:center;transition:var(--t);user-select:none;text-decoration:none;letter-spacing:-.012em}
.btn:hover{background:var(--panel2);border-color:rgba(16,24,40,.22)}
.btn:active{transform:scale(.975)}
.btn:focus-visible{outline:0;box-shadow:0 0 0 3.5px var(--acc-soft)}
.btn:disabled{opacity:.38;cursor:not-allowed;transform:none}
.btn.primary{background:var(--acc);border-color:transparent;color:#fff;box-shadow:0 1px 3px rgba(28,110,107,.32)}
.btn.primary:hover{background:var(--acc-2);border-color:transparent}
.btn.rec{background:var(--rec);border-color:transparent;color:#fff;box-shadow:0 1px 3px rgba(210,71,35,.32)}
.btn.rec:hover{background:var(--rec-2);border-color:transparent}
.btn.stop{background:var(--panel2);border-color:transparent}
.btn.stop:hover{background:#e7e9ec}
.btn.ghost{background:transparent;border-color:transparent;color:var(--mut)}
.btn.ghost:hover{background:var(--panel2);color:var(--txt);border-color:transparent}

.chip{border:1px solid var(--line-2);background:var(--panel);border-radius:var(--pill);padding:7px 13px;font-size:12.5px;cursor:pointer;font-weight:600;transition:var(--t);letter-spacing:-.01em}
.chip:hover{background:var(--panel2)}
.chip.active{background:var(--acc);border-color:transparent;color:#fff;box-shadow:0 1px 3px rgba(28,110,107,.30)}
.chip.guest{display:inline-flex;align-items:center;gap:7px;cursor:default}
.chip.guest button{border:0;background:none;cursor:pointer;color:var(--mut);font-weight:600;padding:0 2px;font-size:12px;border-radius:var(--r-xs);transition:var(--t)}
.chip.guest button:hover{color:var(--rec)}

/* pagina del convidat */
.jself{width:100%;max-width:220px;aspect-ratio:1;object-fit:cover;border-radius:26%;background:#0b0d10;margin:0 auto 14px;display:block;border:1px solid var(--line)}
.jcall{position:relative;background:#0b0d10;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.jhost{width:100%;display:block;aspect-ratio:16/9;object-fit:contain;background:#0b0d10}
.jme{position:absolute;right:14px;bottom:14px;width:22%;max-width:150px;aspect-ratio:1;object-fit:cover;border-radius:24%;border:2px solid rgba(255,255,255,.9);box-shadow:0 8px 24px rgba(0,0,0,.5);background:#20252e}
.reacts{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px;justify-content:center}
.rbtn{border:1px solid var(--line);background:var(--panel);border-radius:50%;width:48px;height:48px;font-size:22px;line-height:1;cursor:pointer;transition:transform .18s var(--ease),background .18s,border-color .18s;box-shadow:var(--shadow)}
.rbtn:hover{transform:translateY(-3px) scale(1.04);border-color:var(--acc)}
.rbtn:active{transform:scale(.94)}
.rbtn.sent{transform:scale(1.32);border-color:var(--acc);background:var(--acc-soft)}

/* interruptor estil iOS */
.switch{display:flex;align-items:center;gap:11px;cursor:pointer;font-size:13.5px;letter-spacing:-.01em}
.switch input{display:none}
.track{width:46px;height:27px;border-radius:var(--pill);background:#d8d8dc;position:relative;transition:background .25s var(--ease);flex:none}
.knob{position:absolute;top:2px;left:2px;width:23px;height:23px;border-radius:50%;background:#fff;transition:transform .25s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.18),0 3px 8px rgba(0,0,0,.12)}
.switch input:checked + .track{background:var(--acc)}
.switch input:checked + .track .knob{transform:translateX(19px)}

.hint{font-size:12px;color:var(--mut);margin-top:10px;line-height:1.55}
.hint b{color:var(--warn)}
#sourceNote{margin-top:12px;padding:10px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel2)}
#sourceNote.warn{background:#fff8f0;border-color:#f5d5b0}

.result{margin-top:16px;display:none}
.result.on{display:block}
video.playback{width:100%;border-radius:var(--radius);border:1px solid var(--line);background:#000;margin-bottom:12px}
.meta{font-size:12px;color:var(--mut);margin:8px 0 12px}
.subcard{margin-top:14px;padding:15px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.subhead{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:650;margin-bottom:10px}
.trimrow{display:flex;align-items:center;gap:11px}
.trimrow input[type=range]{flex:1}
.chaplist{display:flex;flex-direction:column;gap:7px}
.chapitem{display:flex;align-items:center;gap:9px}
.chapitem .t{font-variant-numeric:tabular-nums;font-weight:650;font-size:12px;color:var(--acc);min-width:44px}
.chapitem input{flex:1;font-size:13px}
.chapitem button{border:1px solid var(--line-2);background:var(--panel);border-radius:var(--r-xs);cursor:pointer;padding:7px 10px;font-weight:600;color:var(--mut);transition:var(--t)}
.chapitem button:hover{color:var(--rec);border-color:var(--rec)}

.drawtools{position:absolute;bottom:16px;right:16px;display:none;gap:7px;align-items:center;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--pill);padding:7px 9px;box-shadow:var(--shadow-lg)}
.drawtools.on{display:flex}
.swatch{width:22px;height:22px;border-radius:50%;border:2px solid #fff;outline:1px solid var(--line-2);cursor:pointer;transition:transform .18s var(--ease)}
.swatch:hover{transform:scale(1.14)}
.swatch.active{outline:2px solid var(--acc);transform:scale(1.1)}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(8px);background:rgba(29,29,31,.94);color:#fff;padding:12px 18px;border-radius:var(--pill);font-size:13.5px;font-weight:500;opacity:0;transition:opacity .28s var(--ease),transform .28s var(--ease);pointer-events:none;z-index:50;box-shadow:var(--shadow-xl);letter-spacing:-.01em}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.foot{margin-top:26px;color:var(--mut);font-size:12px;text-align:center}
kbd{background:var(--panel2);border:1px solid var(--line-2);border-radius:var(--r-xs);padding:2px 7px;font-size:11px;font-family:inherit;font-weight:600}

/* galeria */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.clip{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.clip:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.clip .del{position:absolute;top:10px;right:10px;z-index:2;border:1px solid var(--line);background:rgba(255,255,255,.96);border-radius:var(--pill);padding:5px 10px;font-size:13px;line-height:1;cursor:pointer;opacity:0;transition:var(--t);box-shadow:var(--shadow)}
.clip:hover .del,.clip .del:focus{opacity:1}
.clip .del:hover{border-color:var(--rec);color:var(--rec)}
.clip .thumb{width:100%;aspect-ratio:16/9;object-fit:cover;background:#0b0d10;display:block}
/* etiqueta de propietari: només surt al superadmin, sobre clips que no són seus */
.clip .owner{position:absolute;top:10px;left:10px;z-index:2;background:rgba(11,13,16,.72);color:#fff;border-radius:var(--pill);padding:4px 10px;font-size:10.5px;font-weight:600;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clip .body{padding:12px 14px 14px}
.clip .ct{font-weight:600;font-size:14px;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.015em}
.clip .cm{font-size:12px;color:var(--mut)}
.empty{text-align:center;color:var(--mut);padding:72px 20px}

/* watch */
.watchwrap{width:min(960px,100%);margin:0 auto}
.wtitle{font-size:26px;font-weight:650;margin:0 0 7px;letter-spacing:-.028em}
.wmeta{font-size:13px;color:var(--mut);margin-bottom:14px}
video.player{width:100%;border-radius:var(--r-lg);border:1px solid var(--line);background:#000;box-shadow:var(--shadow-xl)}
.chaprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chaprow .c{border:1px solid var(--line-2);background:var(--panel);border-radius:var(--pill);padding:7px 13px;cursor:pointer;font-size:13px;font-weight:590;transition:var(--t);letter-spacing:-.01em}
.chaprow .c:hover{background:var(--panel2);border-color:var(--acc)}
.chaprow .c .t{color:var(--acc);font-variant-numeric:tabular-nums;margin-right:7px}
.comments{margin-top:24px}
.comment{border-top:1px solid var(--line);padding:12px 0}
.comment .who{font-weight:650;font-size:13px;letter-spacing:-.01em}
.comment .who .ct{color:var(--acc);cursor:pointer;font-variant-numeric:tabular-nums;margin-left:7px;font-weight:600}
.comment .bd{font-size:14px;margin-top:2px}
.gate{max-width:440px;margin:64px auto;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);padding:34px 30px;box-shadow:var(--shadow-lg)}

/* ---------- landing ---------- */
body.lp{background:var(--panel)}
.lp-hero{background:linear-gradient(160deg,#1c6e6b 0%,#123f3e 55%,#19625f 100%);color:#ffffff;padding:0 22px 84px;position:relative;overflow:hidden}
.lp-hero::after{content:"";position:absolute;left:50%;top:-30%;width:120vw;height:90vh;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(127,212,207,.26),rgba(127,212,207,0));pointer-events:none}
.lp-inner{max-width:1100px;margin:0 auto;position:relative;z-index:1}
.lp-top{display:flex;align-items:center;gap:12px;padding:22px 0 76px}
.lp-mark{height:38px;width:auto;object-fit:contain;flex:none}
.lp-top .lang{margin-left:auto;background:rgba(255,255,255,.14)}
.lp-top .lang button{color:rgba(255,255,255,.75)}
.lp-top .lang button:hover{color:#fff}
.lp-top .lang button.active{background:rgba(255,255,255,.94);color:#123f3e;box-shadow:none}
.lp-enter{color:#ffffff;text-decoration:none;font-weight:590;font-size:14px;border:1px solid rgba(255,255,255,.34);border-radius:var(--r-sm);padding:9px 16px;transition:var(--t)}
.lp-enter:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55)}
.lp-h1{font-size:clamp(34px,5.6vw,60px);line-height:1.05;letter-spacing:-.035em;font-weight:650;margin:0 0 20px;max-width:16ch}
.lp-sub{font-size:clamp(16px,2vw,20px);line-height:1.5;color:rgba(255,255,255,.84);margin:0 0 34px;max-width:52ch;letter-spacing:-.012em}
.lp-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
/* Especificitat: .btn.primary són dues classes i guanyava a .lp-big, o sigui que el botó
   sortia teal damunt del degradat teal, gairebé invisible. Cal igualar-la. */
.btn.primary.lp-big{padding:14px 28px;font-size:15px;background:#ffffff;color:#123f3e;border:0;box-shadow:0 10px 30px rgba(0,0,0,.24)}
.btn.primary.lp-big:hover{background:#e9f7f6;color:#0e3230}
.lp-note{font-size:13px;color:rgba(255,255,255,.72)}
.lp-body{padding-top:0;margin-top:-46px}
.lp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:16px}
.lp-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-lg)}
.lp-ico{font-size:21px;margin-bottom:12px;width:42px;height:42px;border-radius:12px;background:var(--acc-soft);color:var(--acc);display:grid;place-items:center}
.lp-card h3{margin:0 0 7px;font-size:15.5px;font-weight:620;letter-spacing:-.018em}
.lp-card p{margin:0;font-size:13.5px;color:var(--mut);line-height:1.55}
.lp-foot{margin-top:52px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.lp-by{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--mut);font-size:14px;font-weight:500;
  border:1px solid var(--line);border-radius:var(--pill);padding:8px 16px;transition:var(--t)}
.lp-by:hover{color:var(--txt);border-color:var(--line-2);background:var(--panel2)}
.lp-by-mark{height:19px;width:auto;object-fit:contain;filter:grayscale(1) brightness(.55)}
.lp-by:hover .lp-by-mark{filter:grayscale(1) brightness(.3)}
.lp-by-name{font-weight:600;color:var(--acc)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}