/* luizPHT — cores da marca: preto, dourado/bronze, areia */
:root{--bg:#080706;--panel:#121010;--panel2:#1b1816;--line:#2f2a25;--txt:#f3ece2;--mut:#a0958a;--gold:#b8864b;--sand:#f6c98c;--bronze:#d6a868;--amber:#ffb35c;--ink:#120d08}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{background:radial-gradient(1200px 600px at 70% -10%,#4a3218 0%,transparent 60%),radial-gradient(900px 500px at 0% 110%,#2a1d10 0%,transparent 60%),var(--bg);color:var(--txt);font-family:"Space Grotesk",system-ui,sans-serif;font-size:13px}
.mono{font-family:"JetBrains Mono",monospace}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}

/* topo */
.top{height:44px;display:flex;align-items:center;gap:22px;padding:0 16px;border-bottom:1px solid var(--line);background:#0b0a09cc;backdrop-filter:blur(8px);position:relative;z-index:20}
.brand img{height:18px;width:auto}
.menu{display:flex;gap:4px}
.menu button{color:var(--mut);padding:5px 10px;border-radius:6px}
.menu button:hover{color:var(--txt)}
.menu button.on{color:var(--ink);background:var(--sand)}
.rec{margin-left:auto;display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,var(--gold),var(--bronze));color:var(--ink);padding:7px 14px;border-radius:20px;font-weight:700;box-shadow:0 0 20px #d6a86855;white-space:nowrap}
.rec i{width:8px;height:8px;border-radius:50%;background:var(--ink);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}

/* área de trabalho */
.desk{position:relative;height:calc(100vh - 44px - 210px)}
.panel{position:absolute;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 50px #0009;overflow:hidden;display:flex;flex-direction:column}
.bar{flex:none;height:28px;display:flex;align-items:center;gap:6px;padding:0 10px;background:var(--panel2);border-bottom:1px solid var(--line);cursor:grab;color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.08em;user-select:none;white-space:nowrap;overflow:hidden}
.bar b{flex:none;width:8px;height:8px;border-radius:50%;background:var(--line)}
.bar b:first-child{background:var(--bronze)}
.bar .count,.bar .ratio{margin-left:auto;color:var(--sand);text-transform:none;flex:none;padding-left:8px}
#vname{min-width:0;overflow:hidden;text-overflow:ellipsis}
.bar .x{display:none;margin-left:auto;font-size:14px;color:var(--txt)}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{50%{translate:0 -6px}}

/* media pool */
#bin{left:16px;top:16px;bottom:200px;width:250px}
.clips{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.clip{border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:transform .2s,border-color .2s;background:var(--panel2);position:relative}
.clip:hover{transform:translateY(-2px)}
.clip.on{border-color:var(--sand);box-shadow:0 0 18px #f6c98c44}
.clip.off{display:none}
.clip .th{aspect-ratio:16/10;width:100%;object-fit:cover;background:#000}
.clip h3{font-size:11px;font-weight:500;padding:4px 6px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip p{font-size:9px;padding:0 6px 5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip p.d{display:none}
.clip em{position:absolute;right:4px;top:4px;font:600 8px "JetBrains Mono",monospace;font-style:normal;background:#000b;padding:1px 4px;border-radius:3px;color:var(--sand)}

/* program monitor: 16:9 ou 9:16 conforme o vídeo */
#viewer{left:50%;top:16px;transform:translateX(-50%);--w:min(calc(100vw - 640px),860px);--h:min(calc(var(--w) * 9 / 16),calc(100vh - 360px));width:calc(var(--h) * 16 / 9);transition:width .5s cubic-bezier(.2,.8,.2,1);z-index:2}
#viewer.vert{--h:calc(100vh - 360px);width:calc(var(--h) * 9 / 16)}
.screen{position:relative;height:var(--h);background:#000;overflow:hidden;transition:height .5s cubic-bezier(.2,.8,.2,1)}
.screen img,.screen iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.shade{position:absolute;inset:0;background:linear-gradient(transparent 45%,#000c);pointer-events:none}
.safe{position:absolute;inset:7%;border:1px dashed #ffffff22;pointer-events:none}
.tag{position:absolute;left:6%;top:7%;font-size:10px;padding:3px 7px;border-radius:4px;background:#000a;border:1px solid var(--sand);color:var(--sand)}
.cap{position:absolute;left:6%;right:6%;bottom:9%;pointer-events:none}
.cap h2{font-size:clamp(20px,3vw,42px);line-height:1.05;text-shadow:0 4px 30px #000}
.cap p{color:#e6dccd;margin-top:6px;max-width:520px;text-shadow:0 2px 10px #000}
.vert .cap h2{font-size:clamp(18px,2vw,28px)}
.vert .cap p{font-size:12px}
.play{position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:50%;background:#ffffff1f;border:1px solid #ffffff66;backdrop-filter:blur(6px);display:grid;place-items:center;font-size:20px;transition:.2s;color:#fff}
.play:hover{transform:scale(1.1);background:var(--gold)}
.playing .play,.playing .shade,.playing .cap,.playing .tag,.playing .safe,.playing #poster{display:none}
.transport{flex:none;display:flex;align-items:center;gap:12px;padding:8px 12px;color:var(--mut)}
.transport .tc{color:var(--sand);font-size:13px}
.transport .btn:hover{color:#fff}
.transport .cta{margin-left:auto;white-space:nowrap;color:var(--txt);background:var(--panel2);border:1px solid var(--bronze);padding:5px 12px;border-radius:6px}
.transport .cta:hover{background:var(--bronze);color:var(--ink)}
.vert .transport{gap:10px}.vert .transport .tc{display:none}.vert .transport .cta{padding:5px 8px;font-size:11px}

/* inspector / sobre */
#about{right:16px;top:16px;bottom:150px;width:290px}
.ins{padding:14px;display:grid;gap:12px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.me{position:relative;margin:-14px -14px 0;height:190px;flex:none;overflow:hidden}
.me img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.me:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,var(--panel))}
.me .who{position:absolute;left:14px;bottom:6px;z-index:1;display:grid}
.me .who b{font-size:20px}.me small{color:var(--sand)}
.recb{position:absolute;top:10px;right:10px;z-index:1;font-size:10px;padding:2px 6px;border-radius:4px;background:#000a;color:var(--amber)}
.ins h1{font-size:16px;line-height:1.2;color:var(--sand)}
.ins .desc{color:#d9cfc2;line-height:1.5}
.ins .h{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);font-weight:500}
.svc{list-style:none;display:grid;gap:4px;margin-top:-6px}
.svc li:before{content:"▸ ";color:var(--bronze)}
.row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--mut)}
.slider{height:4px;background:var(--line);border-radius:4px;position:relative;margin-top:6px}
.slider i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,var(--gold),var(--sand))}
.slider i:after{content:"";position:absolute;right:-5px;top:-4px;width:12px;height:12px;border-radius:50%;background:#fff}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:11px;padding:3px 8px;border-radius:20px;border:1px solid var(--line);background:#ffffff08}

/* contato */
#contact{left:16px;bottom:14px;width:250px;height:170px}
.chat{padding:10px;display:grid;gap:7px;overflow-y:auto}
.bubble{background:var(--panel2);padding:8px 10px;border-radius:10px 10px 10px 2px;color:#e2d8ca;font-size:12px}
.job{display:none;align-items:center;gap:10px;padding:10px;border-radius:10px;background:var(--panel2);border:1px solid var(--line)}
.job i{font-style:normal;font-size:18px}.job span{display:grid}.job small{color:var(--mut)}
.go{display:block;text-align:center;padding:9px;border-radius:8px;font-weight:700;color:var(--ink);background:linear-gradient(90deg,var(--gold),var(--bronze));box-shadow:0 0 20px #d6a86844}

/* audio meter */
#meter{right:16px;bottom:14px;width:290px}
.wave{height:96px;padding:8px;display:flex;align-items:flex-end;gap:2px}
.wave i{flex:1;border-radius:2px 2px 0 0;background:linear-gradient(var(--sand),var(--gold));opacity:.85;transform-origin:bottom;animation:bar 1.2s ease-in-out infinite alternate}
@keyframes bar{to{transform:scaleY(.35)}}

/* timeline */
.tl{position:absolute;left:0;right:0;bottom:0;height:210px;background:#0b0a09;border-top:1px solid var(--line)}
.tlhead{height:30px;display:flex;align-items:center;gap:14px;padding:0 12px;border-bottom:1px solid var(--line);color:var(--mut)}
.tlhead b{color:var(--txt)}
.tracks{position:relative;height:calc(100% - 30px);display:grid;grid-template-columns:120px 1fr}
.labels div{height:38px;display:flex;align-items:center;padding-left:12px;border-bottom:1px solid #1d1a17;color:var(--mut);font-size:11px}
.labels div:first-child{height:22px}
.lanes{position:relative;overflow:hidden}
.ruler{height:22px;border-bottom:1px solid var(--line);background:repeating-linear-gradient(90deg,#3a332c 0 1px,transparent 1px 40px)}
.lane{position:relative;height:38px;border-bottom:1px solid #1d1a17}
.seg{position:absolute;top:4px;bottom:4px;border-radius:5px;padding:0 8px;display:flex;align-items:center;font-size:11px;font-weight:500;cursor:pointer;overflow:hidden;white-space:nowrap;border:1px solid #ffffff22;transition:filter .2s;background-size:cover;background-position:center}
.seg:hover{filter:brightness(1.3)}
.seg.on{outline:2px solid var(--sand);z-index:1}
.seg.v{background-color:#6b4a22;text-shadow:0 1px 4px #000}
.seg.v:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#6b4a22ee,#b8864b66);z-index:-1}
.seg.v{isolation:isolate}
.tx{background:#2b2520}
.au{background:repeating-linear-gradient(90deg,#3a2c1c 0 2px,#5a4228 2px 4px);color:var(--sand);cursor:default}
.ph{position:absolute;top:0;bottom:0;width:2px;background:var(--amber);box-shadow:0 0 10px var(--amber);pointer-events:none;left:0}
.ph:before{content:"";position:absolute;top:0;left:-6px;border:7px solid transparent;border-top:9px solid var(--amber)}

.tabs,.scrim{display:none}

/* telas médias: esconde o medidor */
@media (max-height:760px){#meter{display:none}#about{bottom:14px}}

/* ===== CELULAR / TABLET ===== */
@media (max-width:999px){
  body{display:flex;flex-direction:column;height:100dvh}
  .top{height:48px;gap:10px;padding:0 12px;flex:none}
  .menu{display:none}
  .rec{padding:6px 12px;font-size:12px}
  .desk{flex:1;min-height:0;height:auto;display:flex;flex-direction:column;padding:10px 0 0}
  .float{animation:none}
  .panel{position:static;transform:none!important;box-shadow:none}
  .bar{cursor:default}
  /* no celular o monitor ocupa sempre a largura toda; vídeo vertical fica com faixas laterais, como no editor */
  #viewer,#viewer.vert{width:calc(100vw - 24px);align-self:center;flex:none;margin:auto;transition:none}
  #viewer{--h:calc((100vw - 24px) * 9 / 16)}
  #viewer.vert{--h:max(calc((100vw - 24px) * 9 / 16),calc(100dvh - 400px))}
  .vert .screen #poster{object-fit:contain}
  .screen{transition:height .4s ease}
  .lbl{display:none}
  .tag{font-size:9px;top:5%}
  .cap{bottom:6%;left:5%;right:5%}
  .cap h2,.vert .cap h2{font-size:clamp(17px,5.4vw,24px)}
  .cap p,.vert .cap p{font-size:11.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .play{width:52px;height:52px;font-size:16px;margin:0;left:50%;top:40%;transform:translate(-50%,-50%)}
  .play:hover{transform:translate(-50%,-50%) scale(1.1)}
  .transport,.vert .transport{gap:6px;padding:8px 10px}
  .transport .tc,.vert .transport .tc{display:block;font-size:11px}
  .transport .btn{padding:4px 6px;font-size:15px}
  .transport .cta,.vert .transport .cta{font-size:11px;padding:6px 9px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  #bin{order:2;width:auto;border-radius:0;border-left:0;border-right:0;background:transparent;border:0;flex:none}
  #bin .bar{background:transparent;border:0}
  .clips{display:flex;overflow-x:auto;overflow-y:hidden;padding:0 12px 8px;gap:6px;scroll-snap-type:x proximity}
  .clip{flex:none;width:auto;scroll-snap-align:center}
  .clip .th{height:116px;width:auto;aspect-ratio:16/9}
  .clip[data-o=v] .th{aspect-ratio:9/16}
  .clip h3,.clip p{display:none}
  #about,#contact{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:auto;max-height:82dvh;z-index:40;border-radius:18px 18px 0 0;transform:translateY(105%)!important;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  #about.show,#contact.show{transform:none!important}
  .sheet .bar .x{display:block}
  #contact .job{display:flex}
  .chat{padding:14px 14px 24px;gap:10px}
  .go{padding:14px}
  #meter,.tl{display:none}
  .scrim{display:block;position:fixed;inset:0;background:#000b;opacity:0;pointer-events:none;transition:.25s;z-index:30}
  .sheet-open .scrim{opacity:1;pointer-events:auto}
  .tabs{display:flex;flex:none;justify-content:space-around;padding:8px 6px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#0b0a09}
  .tabs button{color:var(--mut);font-size:10px;display:grid;gap:2px;justify-items:center}
  .tabs b{font-size:17px;font-weight:400}
  .tabs .on{color:var(--txt)}.tabs .on b{color:var(--sand);text-shadow:0 0 10px var(--sand)}
}