/* 1Kilo REC UI V2 — visual layer only. Safe rollback: remove body.ui-v2 or this file. */
:root{
  --v2-bg:#0a0b0d;--v2-s1:#101216;--v2-s2:#15181c;--v2-s3:#1b1f24;--v2-s4:#22272e;
  --v2-line:#252a31;--v2-line2:#323840;--v2-text:#f3efe9;--v2-muted:#aaa69f;--v2-muted2:#7e828a;
  --v2-accent:#ed552d;--v2-accent2:#ff6b43;--v2-accent-soft:rgba(237,85,45,.13);
  --v2-green:#63c87e;--v2-blue:#75a8ff;--v2-purple:#b98cff;--v2-amber:#efb64a;--v2-danger:#ee6b6b;
  --v2-r:10px;--v2-r2:14px;--v2-ease:cubic-bezier(.2,.7,.2,1);--v2-side:240px;
}
body.ui-v2{background:radial-gradient(circle at 75% -15%,rgba(237,85,45,.045),transparent 32%),var(--v2-bg)!important;color:var(--v2-text)!important;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important}
body.ui-v2 ::selection{background:rgba(237,85,45,.36);color:white}
body.ui-v2 *{scrollbar-width:thin;scrollbar-color:#343941 transparent}
body.ui-v2 ::-webkit-scrollbar{width:8px;height:8px} body.ui-v2 ::-webkit-scrollbar-thumb{background:#343941;border-radius:999px}
body.ui-v2 #app>.topbar{height:60px!important;padding:0 18px!important;background:rgba(10,11,13,.91)!important;border-bottom:1px solid rgba(255,255,255,.035)!important;backdrop-filter:blur(14px);box-shadow:none!important}
body.ui-v2 #app>.topbar .whoami{color:var(--v2-text)} body.ui-v2 #app>.topbar .whoami .rl,body.ui-v2 #app>.topbar .whoami .sesst{color:var(--v2-muted2)!important}
body.ui-v2 .shell{grid-template-columns:var(--v2-side) minmax(0,1fr)!important;background:transparent!important}
body.ui-v2 .nav{background:linear-gradient(180deg,#0c0e11,#0b0d0f)!important;border-right:1px solid var(--v2-line)!important;padding:12px!important;gap:3px!important}
body.ui-v2 .navitem{min-height:39px!important;border-radius:8px!important;color:#afb3ba!important;padding:0 11px!important;gap:11px!important;font-size:13px!important;transition:background .13s var(--v2-ease),color .13s var(--v2-ease)!important}
body.ui-v2 .navitem:hover{background:#14171b!important;color:#fff!important} body.ui-v2 .navitem.active,body.ui-v2 .navitem.sel{background:#191c21!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)!important}
body.ui-v2 .navitem .ic{width:17px!important;height:17px!important;stroke-width:1.75!important} body.ui-v2 .navbadge{background:var(--v2-accent)!important;color:#fff!important}
body.ui-v2 .navdiv{border-color:rgba(255,255,255,.055)!important;margin:10px 8px!important} body.ui-v2 .navfoot{color:#646972!important}
body.ui-v2 .main{padding:22px 26px 34px!important;background:transparent!important;overflow-x:hidden!important}
body.ui-v2 .view{max-width:1600px;margin:0 auto}
body.ui-v2 .eyebrow{font-size:10px!important;letter-spacing:.12em!important;color:#71767f!important;font-weight:750!important}
body.ui-v2 .vhead{margin-bottom:16px!important;align-items:flex-start!important} body.ui-v2 .vhead h2{font-size:27px!important;line-height:1.05!important;letter-spacing:-.04em!important;font-weight:650!important;margin:2px 0 0!important} body.ui-v2 .desc{font-size:12.5px!important;color:var(--v2-muted2)!important;margin-top:6px!important}
body.ui-v2 .btn{border-radius:7px!important;min-height:36px!important;border:1px solid var(--v2-line2)!important;background:#15181c!important;color:#dad8d3!important;box-shadow:none!important;transition:.14s var(--v2-ease)!important}
body.ui-v2 .btn:hover{background:#1b1f24!important;border-color:#3a414b!important} body.ui-v2 .btn-primary{background:linear-gradient(180deg,#f1643d,#d84b27)!important;border-color:#ec613d!important;color:#fff!important;box-shadow:inset 0 1px rgba(255,255,255,.14)!important} body.ui-v2 .btn-primary:hover{background:linear-gradient(180deg,#ff6c45,#e14d27)!important}
body.ui-v2 .btn:focus-visible,body.ui-v2 .navitem:focus-visible,body.ui-v2 input:focus-visible,body.ui-v2 select:focus-visible,body.ui-v2 textarea:focus-visible{outline:2px solid #ff9278!important;outline-offset:2px!important}
body.ui-v2 .segmented{background:#0f1215!important;border:1px solid var(--v2-line)!important;border-radius:9px!important;padding:3px!important} body.ui-v2 .segbtn{border-radius:7px!important;color:#91969e!important} body.ui-v2 .segbtn.active{background:#1a1e23!important;color:#fff!important;box-shadow:none!important}
body.ui-v2 .input,body.ui-v2 input,body.ui-v2 select,body.ui-v2 textarea{border-color:var(--v2-line)!important;background:#101317!important;color:var(--v2-text)!important;border-radius:8px!important} body.ui-v2 input::placeholder,body.ui-v2 textarea::placeholder{color:#656a72!important}
body.ui-v2 .search{border-color:var(--v2-line)!important;background:#101317!important;border-radius:8px!important}
body.ui-v2 table{font-variant-numeric:tabular-nums} body.ui-v2 th{color:#747982!important;font-size:10px!important;letter-spacing:.08em!important;text-transform:uppercase!important;font-weight:750!important;background:#0f1114!important;border-color:#20242a!important} body.ui-v2 td{border-color:#1e2227!important;color:#d8d6d1!important} body.ui-v2 tbody tr{transition:.12s var(--v2-ease)!important} body.ui-v2 tbody tr:hover{background:#15181c!important}
body.ui-v2 .listcard,body.ui-v2 .card,body.ui-v2 .panel,body.ui-v2 .box{background:linear-gradient(180deg,#121519,#101317)!important;border-color:var(--v2-line)!important;border-radius:var(--v2-r)!important;box-shadow:none!important}
body.ui-v2 .badge{border-radius:999px!important;font-size:11px!important;font-weight:650!important}
body.ui-v2 .modal{background:#111419!important;border:1px solid var(--v2-line2)!important;border-radius:14px!important;box-shadow:0 26px 70px rgba(0,0,0,.48)!important} body.ui-v2 .mhead,body.ui-v2 .mfoot{border-color:var(--v2-line)!important;background:transparent!important}
body.ui-v2 .overlay{backdrop-filter:blur(8px);background:rgba(3,4,6,.66)!important}
body.ui-v2 .empty{color:#838890!important;background:transparent!important;border-color:var(--v2-line)!important}
/* Tickets / inbox keeps its own grammar but adopts the same skin */
body.ui-v2 .tkside,body.ui-v2 .tklist,body.ui-v2 .tkread{background:#101317!important;border-color:var(--v2-line)!important} body.ui-v2 .tknav.on,body.ui-v2 .tkitem.on{background:#191d22!important} body.ui-v2 .tkitem:hover{background:#15191e!important}
/* Social */
body.ui-v2 .ppbar,body.ui-v2 .pphead,body.ui-v2 .ppwrap,body.ui-v2 .ppside,body.ui-v2 .ppmain{border-color:var(--v2-line)!important}
/* PACOTE B — Social Media: somente posição/geométrico. */
@media (min-width:901px){
  body.ui-v2 #view-postagens{padding-top:4px}
  body.ui-v2 #view-postagens .social-pos-row1{
    min-height:74px;
    margin-bottom:12px!important;
    align-items:flex-start!important;
  }
  body.ui-v2 #view-postagens .social-pos-row2{
    height:42px;
    min-height:42px;
    margin:0 0 10px;
    display:flex;
    align-items:flex-start;
    gap:8px;
    flex-wrap:nowrap;
  }
  body.ui-v2 #view-postagens .social-pos-row2 #ppSearch{
    height:42px!important;
    min-height:42px!important;
    box-sizing:border-box!important;
    margin:0!important;
  }
  body.ui-v2 #view-postagens .social-pos-row2 #ppBar{
    margin:0!important;
    min-height:42px;
    align-items:flex-start;
    flex:1 1 auto;
  }
  body.ui-v2 #view-postagens .social-pos-row2 #btnPpFields{
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    flex:0 0 auto;
  }
}
/* Calendar */
body.ui-v2 .calday,body.ui-v2 .agmday,body.ui-v2 .agcday{border-color:#20252b!important;background:#101317!important} body.ui-v2 .calday:hover,body.ui-v2 .agmday:hover{background:#15191e!important}
/* Dense desktop production/release tables */
@media (min-width:901px){body.ui-v2 #view-producoes tbody tr,body.ui-v2 #view-lancamentos tbody tr{height:46px!important}body.ui-v2 #view-producoes td,body.ui-v2 #view-lancamentos td{font-size:13px!important}body.ui-v2 #view-producoes .vhead,body.ui-v2 #view-lancamentos .vhead{position:sticky;top:-22px;z-index:3;background:linear-gradient(180deg,var(--v2-bg) 80%,rgba(10,11,13,0));padding-top:4px;padding-bottom:9px}}
/* Responsive shell — mobile is a real product view, not the desktop sidebar squashed */
.v2-mobilebar,.v2-moresheet,.v2-command{display:none}
@media (max-width:900px){
  body.ui-v2 #app>.topbar{height:58px!important;padding:0 12px!important} body.ui-v2 #app>.topbar .whoami{display:none!important} body.ui-v2 #app>.topbar .splitwrap{display:none!important}
  body.ui-v2 .shell{display:block!important;height:calc(100% - 58px)!important} body.ui-v2 .nav{display:none!important} body.ui-v2 .main{padding:14px 14px 92px!important;height:100%!important;overflow-x:hidden!important}
  body.ui-v2 .vhead{display:flex!important;gap:10px!important;flex-wrap:wrap!important} body.ui-v2 .vhead h2{font-size:24px!important} body.ui-v2 .vhead>div:last-child{width:100%;overflow:auto!important;justify-content:flex-start!important;padding-bottom:2px}
  body.ui-v2 .prodmodebar{overflow:auto!important} body.ui-v2 .bigseg{width:max-content!important}
  body.ui-v2 table{min-width:760px!important} body.ui-v2 .faixaCards{display:block!important}
  .v2-mobilebar{display:flex;position:fixed;left:12px;right:12px;bottom:10px;height:68px;padding:6px;background:rgba(16,18,22,.90);border:1px solid rgba(255,255,255,.07);border-radius:20px;backdrop-filter:blur(16px);z-index:9998;box-shadow:0 18px 40px rgba(0,0,0,.35)}
  .v2-mobilebar button{flex:1;border:0;background:transparent;color:#858a92;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:700;cursor:pointer}.v2-mobilebar button.on{background:#191d22;color:#fff}.v2-mobilebar svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
  .v2-moresheet{position:fixed;inset:0;z-index:10000;background:rgba(4,5,7,.62);backdrop-filter:blur(8px);align-items:flex-end}.v2-moresheet.open{display:flex}.v2-morepanel{width:100%;max-height:76vh;overflow:auto;background:#111419;border:1px solid var(--v2-line);border-radius:22px 22px 0 0;padding:14px 14px 26px;box-shadow:0 -20px 60px rgba(0,0,0,.45)}.v2-morehandle{width:38px;height:4px;border-radius:999px;background:#343941;margin:0 auto 14px}.v2-moreitem{min-height:50px;border-bottom:1px solid #1e2329;display:flex;align-items:center;gap:12px;color:#d5d2cd}.v2-moreitem:last-child{border-bottom:0}.v2-moreitem svg{width:18px;height:18px;stroke:#9da2aa;fill:none;stroke-width:1.8}
  body.ui-v2 .modal{max-width:calc(100vw - 20px)!important;max-height:calc(100vh - 24px)!important;border-radius:16px!important} body.ui-v2 .formrow,body.ui-v2 .frow2{grid-template-columns:1fr!important}
}
@media (prefers-reduced-motion:reduce){body.ui-v2 *,body.ui-v2 *::before,body.ui-v2 *::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* =========================================================
   PILOTO — PRODUÇÃO MUSICAL / COLLECTION → DETAIL
   Escopo deliberado: apenas lista desktop de Produção Musical.
   ========================================================= */
@media (min-width:901px){
  body.ui-v2 #view-producoes .prod-v2-head{
    display:flex;align-items:flex-start;gap:20px;margin:0 0 14px;
  }
  body.ui-v2 #view-producoes .prod-v2-titleblock{min-width:0}
  body.ui-v2 #view-producoes .prod-v2-titleblock h2{
    margin:3px 0 0;font-size:28px;line-height:1.04;font-weight:670;letter-spacing:-.045em;color:var(--v2-text)
  }
  body.ui-v2 #view-producoes .prod-v2-titleblock .desc{margin:6px 0 0;color:var(--v2-muted2);font-size:12.5px}
  body.ui-v2 #view-producoes .prod-v2-head-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
  body.ui-v2 #view-producoes .prod-v2-modebar{margin:0 0 12px;padding:0;border:0;background:transparent}
  body.ui-v2 #view-producoes .prod-v2-modebar .bigseg{padding:3px}
  body.ui-v2 #view-producoes .prod-v2-viewbar{
    display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:0;background:transparent;border:0;min-height:40px
  }
  body.ui-v2 #view-producoes .prod-v2-search{height:38px;min-width:300px;max-width:520px;flex:1;position:relative;padding-right:38px}
  body.ui-v2 #view-producoes .prod-v2-search .input{border:0!important;background:transparent!important;padding-left:0!important;box-shadow:none!important}
  body.ui-v2 #view-producoes .prod-v2-search-kbd{
    position:absolute;right:9px;top:50%;transform:translateY(-50%);min-width:20px;height:20px;padding:0 6px;border:1px solid #323841;border-radius:5px;background:#171a1f;color:#777d85;font:600 10px/18px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:center
  }
  body.ui-v2 #view-producoes .prod-v2-filter{width:180px!important;max-width:180px!important;height:38px!important}
  body.ui-v2 #view-producoes .prod-v2-sort{width:205px!important;max-width:205px!important;height:38px!important}
  body.ui-v2 #view-producoes .prod-v2-density{height:38px!important;min-height:38px!important;font-size:12px!important;color:#979ca4!important}
  body.ui-v2 #view-producoes .prod-v2-count{margin-left:auto;white-space:nowrap;color:#777c84;background:transparent;border:0;padding:0;font-size:11.5px}

  body.ui-v2 #view-producoes .prod-v2-tablewrap{
    border:1px solid var(--v2-line)!important;border-radius:10px!important;overflow:auto!important;background:#0f1215!important;box-shadow:0 1px 0 rgba(255,255,255,.015) inset
  }
  body.ui-v2 #view-producoes .prod-v2-table{width:100%!important;min-width:980px!important;table-layout:fixed;border-collapse:collapse;background:transparent!important}
  body.ui-v2 #view-producoes .prod-v2-table thead{position:sticky;top:0;z-index:2}
  body.ui-v2 #view-producoes .prod-v2-table th{height:36px!important;padding:0 13px!important;text-align:left!important;white-space:nowrap}
  body.ui-v2 #view-producoes .prod-v2-table th:nth-child(1){width:28%}
  body.ui-v2 #view-producoes .prod-v2-table th:nth-child(2){width:13%}
  body.ui-v2 #view-producoes .prod-v2-table th:nth-child(3){width:13%}
  body.ui-v2 #view-producoes .prod-v2-table th:nth-child(4){width:12%}
  body.ui-v2 #view-producoes .prod-v2-table th:nth-child(5){width:15%}
  body.ui-v2 #view-producoes .prod-v2-table th:nth-child(6){width:11%}
  body.ui-v2 #view-producoes .prod-v2-table th:nth-child(7){width:8%;text-align:right!important}
  body.ui-v2 #view-producoes .prod-v2-table td{height:52px!important;padding:6px 13px!important;vertical-align:middle!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.ui-v2 #view-producoes .prod-v2-row{cursor:pointer;outline:none}
  body.ui-v2 #view-producoes .prod-v2-row:hover{background:#15191e!important}
  body.ui-v2 #view-producoes .prod-v2-row:focus-visible{outline:2px solid #ff9278!important;outline-offset:-2px;background:#171b20!important}
  body.ui-v2 #view-producoes .prod-v2-row.v2-kbd-current{background:#171b20!important;box-shadow:inset 2px 0 var(--v2-accent)}

  body.ui-v2 #view-producoes .prod-v2-song{display:flex;align-items:center;gap:10px;min-width:0;overflow:visible!important}
  body.ui-v2 #view-producoes .prod-v2-cover{width:34px;height:34px;flex:0 0 34px;border-radius:6px;background:linear-gradient(145deg,#4a1711 0%,#c5482d 46%,#151112 100%);box-shadow:0 5px 12px rgba(0,0,0,.26);position:relative;overflow:hidden}
  body.ui-v2 #view-producoes .prod-v2-cover:after{content:"";position:absolute;right:4px;top:-3px;width:15px;height:42px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.35));transform:skewX(-13deg)}
  body.ui-v2 #view-producoes .prod-v2-songcopy{display:flex;flex-direction:column;min-width:0;line-height:1.15;overflow:hidden}
  body.ui-v2 #view-producoes .prod-v2-songname{font-size:13.5px;font-weight:640;color:#eeeae4;overflow:hidden;text-overflow:ellipsis}
  body.ui-v2 #view-producoes .prod-v2-songmeta{font-size:10.5px;color:#686e76;margin-top:4px;overflow:hidden;text-overflow:ellipsis}
  body.ui-v2 #view-producoes .prod-v2-song>.lancbadge,body.ui-v2 #view-producoes .prod-v2-song>.lancselotag{flex:0 0 auto}
  body.ui-v2 #view-producoes .prod-v2-artist .artlink{font-weight:540;color:#c9c7c2;text-decoration:none}
  body.ui-v2 #view-producoes .prod-v2-artist .artlink:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

  body.ui-v2 #view-producoes .prod-v2-state{height:24px;display:inline-flex;align-items:center;gap:7px;padding:0 9px;border-radius:999px;border:1px solid transparent;font-size:11px;font-weight:650}
  body.ui-v2 #view-producoes .prod-v2-state-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
  body.ui-v2 #view-producoes .prod-v2-state-work{color:#8fb7ff;background:rgba(117,168,255,.10);border-color:rgba(117,168,255,.16)}
  body.ui-v2 #view-producoes .prod-v2-state-artist{color:#f0c46a;background:rgba(239,182,74,.10);border-color:rgba(239,182,74,.18)}
  body.ui-v2 #view-producoes .prod-v2-state-attention{color:#f08b73;background:rgba(237,85,45,.11);border-color:rgba(237,85,45,.19)}
  body.ui-v2 #view-producoes .prod-v2-state-done{color:#7fd99a;background:rgba(99,200,126,.10);border-color:rgba(99,200,126,.17)}
  body.ui-v2 #view-producoes .prod-v2-stage{line-height:1.12;color:#d4d1cb}
  body.ui-v2 #view-producoes .prod-v2-stage>span{display:block;font-size:12.5px}
  body.ui-v2 #view-producoes .prod-v2-stage>small{display:block;font-size:10px;color:#646a72;margin-top:4px;overflow:hidden;text-overflow:ellipsis}
  body.ui-v2 #view-producoes .prod-v2-owner{color:#b9b6b0}
  body.ui-v2 #view-producoes .prod-v2-updated{color:#777d85;font-size:11.5px;font-variant-numeric:tabular-nums}
  body.ui-v2 #view-producoes .prod-v2-actions{text-align:right;overflow:visible!important}
  body.ui-v2 #view-producoes .prod-v2-actions .rowact{display:flex;justify-content:flex-end;align-items:center;gap:5px}
  body.ui-v2 #view-producoes .prod-v2-rowbtn,body.ui-v2 #view-producoes .prod-v2-morebtn{height:30px;border:1px solid transparent;border-radius:7px;background:transparent;color:#858a92;cursor:pointer;font:600 11px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:0 8px;opacity:.22;transition:opacity .12s var(--v2-ease),background .12s var(--v2-ease),color .12s var(--v2-ease),border-color .12s var(--v2-ease)}
  body.ui-v2 #view-producoes .prod-v2-morebtn{width:30px;padding:0;font-size:10px;letter-spacing:1px}
  body.ui-v2 #view-producoes .prod-v2-row:hover .prod-v2-rowbtn,body.ui-v2 #view-producoes .prod-v2-row:hover .prod-v2-morebtn,body.ui-v2 #view-producoes .prod-v2-row:focus-within .prod-v2-rowbtn,body.ui-v2 #view-producoes .prod-v2-row:focus-within .prod-v2-morebtn{opacity:1}
  body.ui-v2 #view-producoes .prod-v2-rowbtn:hover,body.ui-v2 #view-producoes .prod-v2-morebtn:hover{background:#1c2025;border-color:#30363f;color:#f1ede7}

  /* density is presentation only and persists locally */
  body.ui-v2 #view-producoes.prod-density-compact .prod-v2-table td{height:44px!important;padding-top:4px!important;padding-bottom:4px!important}
  body.ui-v2 #view-producoes.prod-density-compact .prod-v2-cover{width:30px;height:30px;flex-basis:30px}
  body.ui-v2 #view-producoes.prod-density-compact .prod-v2-songmeta{display:none}
  body.ui-v2 #view-producoes.prod-density-comfortable .prod-v2-table td{height:58px!important}

  body.ui-v2 #view-producoes .empty{margin-top:28px;padding:34px 20px!important;text-align:center;border:0!important}
  body.ui-v2 #view-producoes .empty .big{font-size:14px;font-weight:650;color:#d8d5cf;margin-bottom:8px}
  body.ui-v2 #view-producoes .prod-v2-empty-copy{font-size:12px;color:#737982}
  body.ui-v2 #view-producoes .empty .btn{margin-top:12px}
  body.ui-v2 #view-producoes .prod-v2-tablewrap.is-loading{position:relative;pointer-events:none}
  body.ui-v2 #view-producoes .prod-v2-tablewrap.is-loading:after{content:"Atualizando…";position:absolute;top:8px;right:12px;height:24px;padding:0 9px;border-radius:999px;display:flex;align-items:center;background:#191d22;border:1px solid #2a3038;color:#969ba3;font-size:10.5px;box-shadow:0 5px 18px rgba(0,0,0,.2)}
  body.ui-v2 #view-producoes .prod-v2-tablewrap.is-loading tbody{opacity:.48}
}

/* PACOTE A — Produções: contrato geométrico de posição (sem skin nova). */
@media (min-width:901px){
  body.ui-v2 #view-producoes{
    padding-top:4px; /* .main está em 22px no piloto atual => Row 1 começa a 26px */
  }
  body.ui-v2 #view-producoes .prod-pos-row1{
    min-height:52px;
    margin-bottom:12px!important;
    align-items:flex-start;
  }
  body.ui-v2 #view-producoes .prod-pos-row1 .prod-v2-modebar{
    margin:0;
    padding:0;
    flex:0 0 auto;
  }
  body.ui-v2 #view-producoes .prod-pos-row2{
    min-height:42px;
    margin-top:0;
    align-items:flex-start!important;
  }
  body.ui-v2 #view-producoes .prod-pos-row2 .prod-v2-search,
  body.ui-v2 #view-producoes .prod-pos-row2 .prod-v2-filter,
  body.ui-v2 #view-producoes .prod-pos-row2 .prod-v2-sort,
  body.ui-v2 #view-producoes .prod-pos-row2 .prod-v2-density,
  body.ui-v2 #view-producoes .prod-pos-row2 #faixaViewToggle{
    height:42px!important;
    min-height:42px!important;
    box-sizing:border-box!important;
    margin-top:0!important;
    align-self:flex-start!important;
  }
  body.ui-v2 #view-producoes .prod-pos-row2 #faixaViewToggle{
    display:flex;
    align-items:stretch;
  }
  body.ui-v2 #view-producoes .prod-pos-row2 #faixaViewToggle .segbtn{
    height:100%;
  }
  body.ui-v2 #view-producoes .prod-pos-row2 .prod-v2-count{
    height:42px;
    display:flex;
    align-items:center;
  }
}

/* ========================================================================
   V2-1 — PELE BASE GLOBAL
   Escopo: aparência. Não altera grids de domínio, master-detail, árvores,
   calendários, composição de linhas ou fluxos. Rollback: remover body.ui-v2.
   ======================================================================== */

body.ui-v2{
  --v21-bg:#090a0c;
  --v21-s0:#0c0e11;
  --v21-s1:#101317;
  --v21-s2:#14181d;
  --v21-s3:#1a1f25;
  --v21-line:#232930;
  --v21-line-strong:#303740;
  --v21-text:#f3f0eb;
  --v21-text-2:#b5b1aa;
  --v21-text-3:#7d828a;
  --v21-accent:#f05a34;
  --v21-accent-hi:#ff6d47;
  --v21-accent-soft:rgba(240,90,52,.13);
  --v21-shadow:0 16px 42px rgba(0,0,0,.24);
  background:
    radial-gradient(900px 520px at 78% -18%,rgba(240,90,52,.055),transparent 58%),
    var(--v21-bg)!important;
  color:var(--v21-text)!important;
  font-size:13px!important;
}
body.ui-v2 *, body.ui-v2 *::before, body.ui-v2 *::after{box-sizing:border-box}

/* App shell: mesma estrutura, nova pele. */
body.ui-v2 #app>.topbar{
  background:rgba(9,10,12,.92)!important;
  border-bottom-color:rgba(255,255,255,.055)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.015)!important;
}
body.ui-v2 .nav{
  background:linear-gradient(180deg,#0c0e11 0%,#090b0e 100%)!important;
  border-right-color:#20252b!important;
}
body.ui-v2 .navitem{
  position:relative;
  color:#9ea3aa!important;
  border:1px solid transparent!important;
}
body.ui-v2 .navitem:hover{
  background:#14181d!important;
  color:#f0eee9!important;
}
body.ui-v2 .navitem.active,
body.ui-v2 .navitem.sel{
  background:#171b20!important;
  border-color:#252b32!important;
  color:#fff!important;
}
body.ui-v2 .navitem.active::before,
body.ui-v2 .navitem.sel::before{
  content:"";
  position:absolute;
  left:-1px;
  top:8px;
  bottom:8px;
  width:2px;
  border-radius:2px;
  background:var(--v21-accent);
}
body.ui-v2 .navdiv{background:#1f242a!important;border:0!important;opacity:1!important}
body.ui-v2 .navfoot{color:#5f656e!important}

/* Tipografia/hierarquia de tela. Sem reposicionar conteúdo. */
body.ui-v2 .eyebrow{
  color:#6f747c!important;
  letter-spacing:.11em!important;
}
body.ui-v2 .vhead h2{
  color:var(--v21-text)!important;
  font-weight:650!important;
}
body.ui-v2 .desc,
body.ui-v2 .hint,
body.ui-v2 .meta{color:var(--v21-text-3)!important}

/* Controles globais. */
body.ui-v2 .btn{
  min-height:36px!important;
  border-radius:7px!important;
  border-color:var(--v21-line-strong)!important;
  background:#14181d!important;
  color:#dad7d2!important;
  box-shadow:0 1px 0 rgba(255,255,255,.025) inset!important;
}
body.ui-v2 .btn:hover{
  background:#1a1f25!important;
  border-color:#3a424c!important;
  color:#fff!important;
}
body.ui-v2 .btn-primary{
  background:linear-gradient(180deg,#f56842 0%,#dc4d29 100%)!important;
  border-color:#ef603b!important;
  color:#fff!important;
  box-shadow:inset 0 1px rgba(255,255,255,.15),0 4px 12px rgba(240,90,52,.10)!important;
}
body.ui-v2 .btn-primary:hover{
  background:linear-gradient(180deg,#ff724c 0%,#e6512b 100%)!important;
  border-color:#ff7955!important;
}
body.ui-v2 .btn-danger{
  background:rgba(239,106,106,.055)!important;
  border-color:rgba(239,106,106,.28)!important;
  color:#ef8b8b!important;
}
body.ui-v2 .btn-ghost{background:transparent!important}
body.ui-v2 .btn-sm{min-height:32px!important}
body.ui-v2 .btn-xs{border-radius:6px!important}

body.ui-v2 .input,
body.ui-v2 input.input,
body.ui-v2 select.input,
body.ui-v2 textarea.input{
  background:#0f1216!important;
  border-color:#282e35!important;
  color:#eeeae5!important;
  box-shadow:0 1px 0 rgba(255,255,255,.015) inset!important;
}
body.ui-v2 .input:hover,
body.ui-v2 input.input:hover,
body.ui-v2 select.input:hover,
body.ui-v2 textarea.input:hover{border-color:#343b44!important}
body.ui-v2 .input:focus,
body.ui-v2 input.input:focus,
body.ui-v2 select.input:focus,
body.ui-v2 textarea.input:focus{
  border-color:#7b4a3e!important;
  box-shadow:0 0 0 3px rgba(240,90,52,.09)!important;
}
body.ui-v2 .search{
  background:#0f1216!important;
  border-color:#282e35!important;
  box-shadow:0 1px 0 rgba(255,255,255,.015) inset!important;
}
body.ui-v2 .segmented{
  background:#0d1013!important;
  border-color:#252b32!important;
}
body.ui-v2 .segbtn{color:#8b9199!important}
body.ui-v2 .segbtn:hover{color:#c9ccd0!important}
body.ui-v2 .segbtn.active{
  background:#1a1f25!important;
  color:#fff!important;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset!important;
}

/* Superfícies: pele apenas, sem grid/layout. */
body.ui-v2 .card,
body.ui-v2 .listcard,
body.ui-v2 .panel,
body.ui-v2 .box,
body.ui-v2 .cfgtheme,
body.ui-v2 .logroup,
body.ui-v2 .trashgroup{
  background:linear-gradient(180deg,#111418 0%,#0f1216 100%)!important;
  border-color:var(--v21-line)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.018) inset!important;
}
body.ui-v2 .listcard .lhead,
body.ui-v2 .logrouphd{
  background:#0e1114!important;
  border-color:#20262c!important;
  color:#8b9098!important;
}
body.ui-v2 .listrow{
  border-color:#1e242a!important;
  transition:background .12s ease!important;
}
body.ui-v2 .listrow:hover{background:#15191e!important}

/* Tabelas. Não altera colunas, larguras ou composição. */
body.ui-v2 .tablewrap{
  background:#0f1216!important;
  border-color:#252b32!important;
  box-shadow:0 1px 0 rgba(255,255,255,.018) inset!important;
}
body.ui-v2 table{background:transparent!important}
body.ui-v2 th{
  background:#0d1013!important;
  border-color:#20262c!important;
  color:#717780!important;
}
body.ui-v2 td{border-color:#1d2329!important}
body.ui-v2 tbody tr:hover{background:#15191e!important}

/* Badges/chips: unifica acabamento sem reinterpretar estado. */
body.ui-v2 .badge,
body.ui-v2 .roletag,
body.ui-v2 .bmtag,
body.ui-v2 .catbadge,
body.ui-v2 .clipchip,
body.ui-v2 .tag{
  border-radius:999px!important;
  box-shadow:none!important;
}

/* Modais — mesma estrutura e mesmos formulários. */
body.ui-v2 .overlay{background:rgba(3,4,6,.70)!important;backdrop-filter:blur(9px)!important}
body.ui-v2 .modal{
  background:linear-gradient(180deg,#12161a 0%,#0f1216 100%)!important;
  border-color:#2c333b!important;
  box-shadow:0 28px 76px rgba(0,0,0,.52)!important;
}
body.ui-v2 .modal .mhead,
body.ui-v2 .modal .mfoot{
  background:rgba(255,255,255,.008)!important;
  border-color:#22282f!important;
}
body.ui-v2 .modal .mhead h3{letter-spacing:-.015em!important}
body.ui-v2 .modal .x{
  color:#8a9098!important;
  border-radius:7px!important;
}
body.ui-v2 .modal .x:hover{background:#1b2026!important;color:#fff!important}

/* Avisos/empty states. */
body.ui-v2 .notice{
  border-radius:9px!important;
  box-shadow:none!important;
}
body.ui-v2 .notice.info{
  background:rgba(114,167,255,.075)!important;
  border-color:rgba(114,167,255,.22)!important;
}
body.ui-v2 .notice.warn{
  background:rgba(240,184,75,.075)!important;
  border-color:rgba(240,184,75,.24)!important;
}
body.ui-v2 .empty{
  background:rgba(255,255,255,.012)!important;
  border-color:#242a31!important;
}

/* Utilitário de minimizar: ação secundária, nunca faixa acima do cabeçalho. */
body.ui-v2 .cl-minbtn{
  align-self:flex-start!important;
  width:fit-content!important;
  min-width:0!important;
  flex:0 0 auto!important;
  margin:0!important;
  background:transparent!important;
  color:#7e848c!important;
  border-color:#282e35!important;
}
body.ui-v2 .cl-minbtn:hover{background:#15191e!important;color:#d9d6d1!important}

/* ------------------------------------------------------------------------
   EXCEÇÕES AUDITADAS — apenas para impedir que a pele global atropele
   estruturas especiais. Nenhuma destas regras cria/redefine grid de domínio.
   ------------------------------------------------------------------------ */

/* 1) PRODUÇÕES — preserva composição local do piloto; global só pinta primitives. */
body.ui-v2 #view-producoes .prod-v2-tablewrap{background:#0f1216!important}
body.ui-v2 #view-producoes .prod-v2-row:hover{background:#15191e!important}

/* 2) LANÇAMENTOS — mantém toolbar/lista/calendário existentes; só acabamento. */
body.ui-v2 #view-lancamentos .toolbar{background:transparent!important}
body.ui-v2 #view-lancamentos .lancfilterbar{
  border-color:#252b32!important;
  background:#0f1216!important;
}

/* 3) SOCIAL MEDIA — mockup é linguagem visual, não redução de capacidade. */
body.ui-v2 #view-postagens .ppbar,
body.ui-v2 #view-postagens .ppcrumb,
body.ui-v2 #view-postagens .pppres{
  border-color:#252b32!important;
}
body.ui-v2 #view-postagens .ppbar{background:#0f1216!important}
body.ui-v2 #view-postagens .ppcard,
body.ui-v2 #view-postagens .pprow,
body.ui-v2 #view-postagens .ppfolder{
  border-color:#242a31!important;
}

/* 4) TICKETS — master-detail é preservado integralmente. */
body.ui-v2 #view-tickets .tkside,
body.ui-v2 #view-tickets .tklist,
body.ui-v2 #view-tickets .tkread{
  background:#0f1216!important;
  border-color:#252b32!important;
}
body.ui-v2 #view-tickets .tklistbar{
  background:#0d1013!important;
  border-color:#232930!important;
}
body.ui-v2 #view-tickets .tkitem,
body.ui-v2 #view-tickets .tknav{border-color:transparent!important}
body.ui-v2 #view-tickets .tkitem:hover,
body.ui-v2 #view-tickets .tknav:hover{background:#15191e!important}
body.ui-v2 #view-tickets .tkitem.on,
body.ui-v2 #view-tickets .tknav.on{background:#191e24!important}

/* 5) AGENDA — não toca grid/calendário; somente células e controles. */
body.ui-v2 #view-agenda .calday,
body.ui-v2 #view-agenda .agmday,
body.ui-v2 #view-agenda .agcday{
  background:#0f1216!important;
  border-color:#22282f!important;
}
body.ui-v2 #view-agenda .calnavbtn{
  background:#12161a!important;
  border-color:#292f37!important;
}

/* 6) CATÁLOGO — há três .vhead na mesma view; somente a primeira é page header. */
body.ui-v2 #view-catalogo > .vhead ~ .vhead h2{
  font-size:16px!important;
  letter-spacing:-.015em!important;
  line-height:1.2!important;
}
body.ui-v2 #view-catalogo > .vhead ~ .vhead .desc{font-size:12px!important}

/* 7) VAGAS — também possui múltiplos .vhead internos. */
body.ui-v2 #view-vagas > .vhead ~ .vhead h2{
  font-size:16px!important;
  letter-spacing:-.015em!important;
  line-height:1.2!important;
}
body.ui-v2 #view-vagas > .vhead ~ .vhead .desc{font-size:12px!important}

/* 8) MONTAR PITCHING — editor próprio: não forçamos superfície/layout interno. */
body.ui-v2 #view-montarpitching #mpHost{
  color:inherit;
}

/* 9) FINANCEIRO — domínio híbrido: só primitives globais, sem tocar grids/tabs. */
body.ui-v2 #view-financeiro .finbox,
body.ui-v2 #view-financeiro .fincard,
body.ui-v2 #view-financeiro .finpanel{
  border-color:#252b32!important;
}

/* 10) RELATÓRIO — barra própria mantém dimensões/fluxo. */
body.ui-v2 #view-relatorio .repbar{
  background:#0f1216!important;
  border-color:#252b32!important;
}

/* Split view e embed: preservam a mecânica existente. */
body.ui-v2 .spane-head{
  background:#0f1216!important;
  border-color:#252b32!important;
}
body.ui-v2 .pickmenu,
body.ui-v2 .notifpanel{
  background:#0d1013!important;
  border-color:#303740!important;
  box-shadow:var(--v21-shadow)!important;
}

/* Foco coerente. */
body.ui-v2 :is(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid rgba(255,132,98,.92)!important;
  outline-offset:2px!important;
}

/* Reduced motion sem alterar comportamento. */
@media (prefers-reduced-motion:reduce){
  body.ui-v2 *,body.ui-v2 *::before,body.ui-v2 *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ========================================================================
   V2-2 — CONTRATO DE POSIÇÃO
   Page header: .eyebrow + exatamente um .vhead direto por view.
   Exceções documentadas: Início e Montar Pitching.
   ======================================================================== */

@media (min-width:901px){

  /* A origem vertical do conteúdo passa a ser única. */
  body.ui-v2 .view:not(#view-inicio):not(#view-montarpitching){
    padding-top:0!important;
  }

  /* Row 1 — mesma altura-base nas views contratuais. */
  body.ui-v2 .view:not(#view-inicio):not(#view-montarpitching) > .vhead{
    height:54px!important;
    min-height:54px!important;
    margin-top:0!important;
    margin-bottom:12px!important;
    align-items:flex-start!important;
    flex-wrap:nowrap!important;
  }

  body.ui-v2 .view:not(#view-inicio):not(#view-montarpitching) > .vhead > *{
    min-width:0;
  }

  /* Produções deixa de ser exceção geométrica. */
  body.ui-v2 #view-producoes > .prod-v2-head{
    height:54px!important;
    min-height:54px!important;
    margin-bottom:12px!important;
  }

  /* Row 2 — altura previsível e única onde existir. */
  body.ui-v2 .page-query-row{
    min-height:42px!important;
    height:42px!important;
    margin-top:0!important;
    margin-bottom:12px!important;
    align-items:flex-start!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
  }

  body.ui-v2 .page-query-row :is(.input,input,select,button,.btn,.segmented,.search,.tkmsearch,.agsbox){
    min-height:42px!important;
    box-sizing:border-box!important;
  }

  body.ui-v2 .page-query-row > :is(.search,.tkmsearch,.agsbox){
    height:42px!important;
    margin-top:0!important;
  }

  /* Ajuda: a Row 2 é um host simples, não uma toolbar legada. */
  body.ui-v2 #ajudaQueryRow{
    display:flex;
  }
  body.ui-v2 #ajudaQueryRow #ajudaSearch{
    height:42px!important;
    margin:0!important;
  }

  /* Planner: preserva todos os controles que o renderer injeta. */
  body.ui-v2 #plnFilters.page-query-row{
    display:flex!important;
    overflow:visible!important;
  }

  /* Agenda: busca estática; calendário continua intacto abaixo. */
  body.ui-v2 #agendaQueryRow{
    display:flex;
  }
  body.ui-v2 #agendaQueryRow .agsbox{
    height:42px!important;
    min-height:42px!important;
  }
  body.ui-v2 #agendaQueryRow #agSearchInput{
    height:100%!important;
  }

  /* Social: só ocupa altura quando ppSetHeader já decide exibi-la. */
  body.ui-v2 #ppPosRow2.page-query-row[style*="display: none"]{
    display:none!important;
  }

  /* Tickets: Row 2 pertence à coluna master, sem perder causalidade espacial. */
  body.ui-v2 #view-tickets .tklistbar.page-query-row{
    height:42px!important;
    min-height:42px!important;
    padding:0 12px!important;
    flex-wrap:nowrap!important;
    overflow:hidden!important;
  }
  body.ui-v2 #view-tickets .tklistbar .tkmsearch{
    flex:1 1 180px!important;
    min-width:150px!important;
  }
  body.ui-v2 #view-tickets .tklistbar .tkmsub{
    display:flex!important;
    flex:0 0 auto!important;
    flex-wrap:nowrap!important;
    white-space:nowrap!important;
  }
  body.ui-v2 #view-tickets .tklistbar .tkmrootp{
    flex:0 0 auto!important;
  }

  /* Remove o azul saturado do estado ativo sem reinterpretar o status. */
  body.ui-v2 #view-tickets .tkmsub .on,
  body.ui-v2 #view-tickets .tkmsub [aria-current="true"],
  body.ui-v2 #view-tickets .tkmsub .active{
    background:var(--v21-accent-soft)!important;
    border-color:rgba(240,90,52,.34)!important;
    color:#f4b19e!important;
  }

  /* Minimizar é ação da Row 1; nunca faixa estrutural. */
  body.ui-v2 .view > .vhead .cl-minbtn{
    align-self:flex-start!important;
    width:fit-content!important;
    flex:0 0 auto!important;
    margin:0!important;
  }

  /* Subcabeçalho de seção: semântica separada de page header. */
  body.ui-v2 .sechead{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
  }

  /* Lançamentos e Produções: segmented de visualização fica no extremo direito. */
  body.ui-v2 #view-lancamentos .page-query-row #lancViewToggle,
  body.ui-v2 #view-producoes .page-query-row #faixaViewToggle{
    margin-left:auto!important;
    flex:0 0 auto!important;
  }
}

/* ------------------------------------------------------------------------
   CORRECAO DE AUDITORIA V2-2 (Claude, 21/08) — origem vertical de
   Lancamentos e Producoes.
   A regra "Dense desktop production/release tables" aplica padding-top:4px
   ao .vhead sticky de #view-producoes e #view-lancamentos. Com o V2-2,
   Producoes voltou a usar .vhead, entao a regra passou a atingir as DUAS:
   titulo em 115px contra 111px das outras 20 views contratuais.
   Medido antes: 20 views em 111 e 2 em 115. Meta do contrato: um unico valor.
   ------------------------------------------------------------------------ */
@media (min-width:901px){
  body.ui-v2 #view-producoes > .vhead,
  body.ui-v2 #view-lancamentos > .vhead{ padding-top:0!important }
}

/* ========================================================================
   FICHA DA MUSICA (view-musica) — 5.39
   A musica como centro. Segue o contrato de posicao: .vhead na Row 1.
   ======================================================================== */
body.ui-v2 #view-musica .fm-titleblock{min-width:0}
body.ui-v2 #view-musica .fm-head-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex:0 0 auto}

body.ui-v2 .fm-states{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 16px}
body.ui-v2 .fmstate{background:#0E1013;border:1px solid #1E2229;border-radius:11px;padding:12px 14px;cursor:pointer}
body.ui-v2 .fmstate:hover{border-color:#2b3138}
body.ui-v2 .fmsl{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#6E747C}
body.ui-v2 .fmsv{margin-top:6px;font-size:16px;font-weight:600;letter-spacing:-.015em}
body.ui-v2 .fmss{margin-top:3px;font-size:12px;color:#9AA0A8}

body.ui-v2 .fm-cols{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
body.ui-v2 .fmblock{background:#0E1013;border:1px solid #1E2229;border-radius:12px;margin-bottom:13px;overflow:hidden}
body.ui-v2 .fmbhead{display:flex;align-items:center;gap:10px;padding:12px 15px;border-bottom:1px solid #1E2229}
body.ui-v2 .fmbt{font-size:13px;font-weight:600;display:flex;align-items:center;gap:9px}
body.ui-v2 .fmbt i{width:7px;height:7px;border-radius:50%;display:inline-block}
body.ui-v2 .fmbright{margin-left:auto;display:flex;align-items:center;gap:11px}
body.ui-v2 .fmowner{font-size:11.5px;color:#6E747C}
body.ui-v2 .fmowner b{color:#9AA0A8;font-weight:500}
body.ui-v2 .fmlock{font-size:11.5px;color:#6E747C}
body.ui-v2 .fmbbody{padding:2px 15px 12px}
body.ui-v2 .fmrow{display:grid;grid-template-columns:1.1fr 1fr .9fr auto;gap:12px;padding:9px 0;border-bottom:1px solid #1E2229;align-items:center;font-size:13.5px}
body.ui-v2 .fmrow:last-child{border-bottom:0}
body.ui-v2 .fmk{color:#9AA0A8}
body.ui-v2 .fmd{color:#9AA0A8;font-variant-numeric:tabular-nums}
body.ui-v2 .fmb{font-size:11.5px;padding:3px 9px;border-radius:999px;display:inline-block;white-space:nowrap}
body.ui-v2 .fmb-ok{background:rgba(63,178,127,.14);color:#6FD0A5}
body.ui-v2 .fmb-info{background:rgba(91,141,239,.14);color:#8FB2F5}
body.ui-v2 .fmb-idle{background:rgba(120,128,140,.14);color:#98A0AC}
body.ui-v2 .fmempty{padding:10px 0;font-size:13px;color:#6E747C}
body.ui-v2 .fmletra{padding:10px 0;font-size:13.5px;white-space:pre-line;color:#C9CDD3;max-height:260px;overflow:auto}

body.ui-v2 .fmcard{background:#0E1013;border:1px solid #1E2229;border-radius:12px;padding:14px 15px;margin-bottom:13px}
body.ui-v2 .fmch{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#6E747C;font-weight:600;margin-bottom:10px}
body.ui-v2 .fmp{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #1E2229}
body.ui-v2 .fmp:last-child{border-bottom:0}
body.ui-v2 .fmav{width:30px;height:30px;border-radius:50%;background:#121418;border:1px solid #282E35;display:grid;place-items:center;font-size:11.5px;font-weight:600;color:#9AA0A8;flex:0 0 auto}
body.ui-v2 .fmpn{font-size:13.5px}
body.ui-v2 .fmpr{font-size:11.5px;color:#6E747C}
@media (max-width:1080px){ body.ui-v2 .fm-cols{grid-template-columns:1fr} body.ui-v2 .fm-states{grid-template-columns:1fr 1fr} }

/* migalha navegavel da ficha — o caminho de volta e a propria migalha, sem botao "Voltar" */
body.ui-v2 #view-musica .fmcr{color:#6E747C;text-decoration:none;border-bottom:1px solid transparent}
body.ui-v2 #view-musica .fmcr:hover{color:#F5F1EB;border-bottom-color:#282E35}
body.ui-v2 #view-musica .fmcr-atual{color:#9AA0A8}

/* grade das linhas: colunas fixas, tudo no mesmo eixo. Antes valor e data caiam
   em eixos diferentes e a leitura ziguezagueava. */
body.ui-v2 .fmrow{grid-template-columns:168px minmax(0,1fr);gap:18px;align-items:baseline}
body.ui-v2 .fmv{color:#F5F1EB;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
body.ui-v2 .fmvtxt{flex:0 1 auto;min-width:208px}
body.ui-v2 .fmsep{color:#3A4048;padding:0 3px}
body.ui-v2 .fmvazio{color:#4A515A;font-size:12.5px}
body.ui-v2 .fms{text-align:left;flex:0 0 auto}
@media (max-width:1080px){ body.ui-v2 .fmrow{grid-template-columns:120px minmax(0,1fr);gap:12px}
                           body.ui-v2 .fmvtxt{min-width:132px} }

/* ---- player da faixa ---- */
body.ui-v2 .fm-audio{margin:0 0 16px}
body.ui-v2 .fmaud{background:#0E1013;border:1px solid #1E2229;border-radius:12px;padding:14px 15px}
body.ui-v2 .fmaud-load{color:#6E747C;font-size:13px}
body.ui-v2 .fmaudmsg{font-size:13.5px;color:#9AA0A8;margin-bottom:10px}
body.ui-v2 .fmaudsub{font-size:11.5px;color:#6E747C;margin-top:8px;word-break:break-all}
body.ui-v2 .fmaudhd{display:flex;align-items:center;gap:12px;margin-bottom:10px}
body.ui-v2 .fmaudt{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#6E747C;font-weight:600}
body.ui-v2 .fmaudp{font-size:11.5px;color:#6E747C;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
body.ui-v2 .fmaudbtn{flex:0 0 auto}
body.ui-v2 #fmPlayer{margin:2px 0 10px;filter:invert(.92) hue-rotate(180deg);border-radius:8px}
body.ui-v2 .fmvers-wrap{display:flex;flex-wrap:wrap;gap:8px}
body.ui-v2 .fmver{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px;border-radius:9px;
  border:1px solid #282E35;background:transparent;color:#9AA0A8;cursor:pointer;text-align:left;max-width:100%}
body.ui-v2 .fmver:hover{background:#15191E;color:#F5F1EB}
body.ui-v2 .fmver.on{border-color:#ED552D;background:rgba(237,85,45,.10);color:#F5F1EB}
body.ui-v2 .fmvern{font-size:12.5px;font-weight:500;max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.ui-v2 .fmvers{font-size:11px;color:#6E747C}


/* ======================================================================
   FICHA DA MUSICA — hero, faixa de estado e player, no padrao do mockup
   Medidas tiradas do proprio mockup: capa 158, titulo serifa 34px,
   rail 92px numa caixa so, player 62px com waveform de 150 barras.
   ====================================================================== */
body.ui-v2 .fm-hero{display:grid;grid-template-columns:158px minmax(0,1fr);gap:20px;padding:2px 0 16px}
body.ui-v2 .fmh-cover{width:158px;height:158px;border-radius:7px;position:relative;overflow:hidden;
  background:linear-gradient(145deg,#35120f 0%,#cf472d 43%,#190d0d 100%);
  background-size:cover;background-position:center;box-shadow:0 20px 38px rgba(0,0,0,.35)}
body.ui-v2 .fmh-covertxt{position:absolute;left:14px;right:14px;bottom:15px;font-size:15px;font-weight:800;
  letter-spacing:-.04em;color:#efc2a6;line-height:1.1;max-height:52px;overflow:hidden}
body.ui-v2 .fmh-cover.temfoto .fmh-covertxt{display:none}
body.ui-v2 .fmh-cover.temfoto{background-color:#15181c}
body.ui-v2 .fmh-body{min-width:0;padding-top:4px}
body.ui-v2 .fmh-kind{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:#ED552D;font-weight:700}
body.ui-v2 .fmh-title{font-family:Georgia,"Times New Roman",serif;font-size:34px;line-height:1;font-weight:600;
  letter-spacing:-.04em;margin:7px 0 0;color:#F5F1EB}
body.ui-v2 .fmh-meta{margin-top:10px;color:#A2A5AB;font-size:13.5px}
body.ui-v2 .fmh-art{color:#F5F1EB;font-weight:500}
body.ui-v2 .fmh-dot{color:#3A4048;padding:0 3px}
body.ui-v2 .fmh-chips{margin-top:12px;display:flex;gap:7px;flex-wrap:wrap}
body.ui-v2 .fmh-chip{font-size:11.5px;padding:3px 10px;border-radius:999px;border:1px solid #2b3138;color:#9AA0A8}
body.ui-v2 .fmh-chip-novo{border-style:dashed;border-color:#ED552D;color:#ED552D;cursor:default}
body.ui-v2 .fmh-people{margin-top:14px;display:flex;gap:18px;flex-wrap:wrap}
body.ui-v2 .fmh-p{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center}
body.ui-v2 .fmh-av{grid-row:1/3;width:32px;height:32px;border-radius:50%;background:#171B20;border:1px solid #2b3138;
  display:grid;place-items:center;font-size:11.5px;font-weight:600;color:#9AA0A8}
body.ui-v2 .fmh-pn{font-size:13px;color:#F5F1EB;line-height:1.2}
body.ui-v2 .fmh-pr{font-size:11px;color:#6E747C;line-height:1.2}

/* faixa de estado: UMA caixa de 92px com quatro divisoes */
body.ui-v2 .fm-states{display:grid;grid-template-columns:repeat(3,1fr);height:92px;margin:0 0 12px;
  border:1px solid #1E2229;border-radius:10px;background:linear-gradient(180deg,#14171B,#111418);overflow:hidden}
body.ui-v2 .fmstate{padding:15px 17px;border-right:1px solid #23272D;cursor:pointer}
body.ui-v2 .fmstate:last-child{border-right:0}
body.ui-v2 .fmstate:hover{background:#171B20}
body.ui-v2 .fmsl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
body.ui-v2 .fmr-ok{color:#3FB27F} body.ui-v2 .fmr-info{color:#5B8DEF}
body.ui-v2 .fmr-roxo{color:#A26BF0} body.ui-v2 .fmr-amb{color:#D8A13A}
body.ui-v2 .fmsv{font-size:16px;margin-top:8px;color:#F5F1EB;font-weight:500}
body.ui-v2 .fmss{font-size:11.5px;color:#6E747C;margin-top:3px}

/* player: 62px, botao branco redondo, waveform */
body.ui-v2 .fm-audio{margin:0 0 12px}
body.ui-v2 .fmplayer{height:62px;border:1px solid #1E2229;border-radius:10px;
  background:linear-gradient(180deg,#14171B,#111418);display:flex;align-items:center;padding:0 14px}
body.ui-v2 .fmplay{width:36px;height:36px;border-radius:50%;border:0;background:#F7F7F4;color:#0C0D0F;
  display:grid;place-items:center;font-size:15px;cursor:pointer;flex:0 0 auto;padding:0;line-height:1}
body.ui-v2 .fmplay:hover{background:#fff}
body.ui-v2 .fmptime{margin-left:14px;color:#90949B;font-size:11px;font-variant-numeric:tabular-nums;flex:0 0 auto}
body.ui-v2 .fmwave{height:28px;flex:1;margin:0 16px;display:flex;align-items:center;gap:2px;overflow:hidden;cursor:pointer}
body.ui-v2 .fmbar{width:2px;border-radius:1px;background:#656A70;opacity:.75;flex:0 0 auto}
body.ui-v2 .fmbar.on{background:#ED552D;opacity:1}
body.ui-v2 .fmpmais{margin-left:8px;background:transparent;border:0;color:#90949B;cursor:pointer;font-size:15px;
  width:28px;height:28px;border-radius:7px;flex:0 0 auto}
body.ui-v2 .fmpmais:hover{background:#171B20;color:#F5F1EB}
body.ui-v2 #fmPlayer{display:none}
body.ui-v2 .fmaudmeta{display:flex;align-items:center;gap:12px;margin-top:9px}
body.ui-v2 .fmaudp{font-size:11px;color:#6E747C;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
body.ui-v2 .fmvers-wrap{margin-top:9px}
@media (max-width:1080px){ body.ui-v2 .fm-hero{grid-template-columns:1fr} body.ui-v2 .fm-states{height:auto;grid-template-columns:1fr 1fr} }
body.ui-v2 #view-musica .fm-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.ui-v2 #view-musica > .eyebrow{margin-bottom:12px}

/* ---- 3) busca de Producoes: o texto passava por baixo da lupa ---- */
body.ui-v2 #view-producoes .prod-v2-search{padding-left:0}
body.ui-v2 #view-producoes .prod-v2-search > svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.65}
body.ui-v2 #view-producoes .prod-v2-search .input{padding-left:34px!important}

/* ---- versoes do audio: linha com download ---- */
body.ui-v2 .fmver{display:flex;align-items:center;gap:12px;width:100%;max-width:100%;padding:9px 12px;margin-bottom:7px;
  border-radius:9px;border:1px solid #282E35;background:transparent;color:#9AA0A8;text-align:left}
body.ui-v2 .fmver.on{border-color:#ED552D;background:rgba(237,85,45,.08)}
body.ui-v2 .fmvplay{width:28px;height:28px;border-radius:50%;border:1px solid #3A4048;background:transparent;color:#9AA0A8;
  cursor:pointer;flex:0 0 auto;font-size:10px;display:grid;place-items:center;padding:0}
body.ui-v2 .fmvplay:hover{background:#171B20;color:#F5F1EB}
body.ui-v2 .fmvinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
body.ui-v2 .fmvern{font-size:12.5px;font-weight:500;color:#F5F1EB;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.ui-v2 .fmvers{font-size:11px;color:#6E747C}
body.ui-v2 .fmvdl{flex:0 0 auto}

/* ---- generos ---- */
body.ui-v2 .fmgens{display:flex;flex-wrap:wrap;gap:8px}
body.ui-v2 .fmgen{padding:6px 13px;border-radius:999px;border:1px solid #282E35;background:transparent;color:#9AA0A8;cursor:pointer;font-size:13px}
body.ui-v2 .fmgen:hover{background:#171B20;color:#F5F1EB}
body.ui-v2 .fmgen.on{border-color:#ED552D;background:rgba(237,85,45,.12);color:#F5F1EB}
body.ui-v2 button.fmh-chip{cursor:pointer;font-family:inherit}
body.ui-v2 button.fmh-chip:hover{border-color:#ED552D;color:#F5F1EB}

/* ---- navegador de pastas do Dropbox ---- */
body.ui-v2 .fmnav-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:10px;font-size:12px}
body.ui-v2 .fmnav-cr{background:transparent;border:0;color:#9AA0A8;cursor:pointer;padding:2px 4px;border-radius:5px;font-size:12px}
body.ui-v2 .fmnav-cr:hover{background:#171B20;color:#F5F1EB}
body.ui-v2 .fmnav-sep{color:#3A4048}
body.ui-v2 .fmnav-lista{max-height:340px;overflow:auto;border:1px solid #1E2229;border-radius:9px;padding:6px}
body.ui-v2 .fmnav-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 10px;border:0;
  background:transparent;color:#F5F1EB;cursor:pointer;border-radius:7px;font-size:13.5px}
body.ui-v2 .fmnav-item:hover{background:#171B20}
body.ui-v2 .fmnav-up{color:#9AA0A8}
body.ui-v2 .fmnav-ico{opacity:.85}
body.ui-v2 .fmnav-arqs{margin-top:8px;padding:8px 10px;border-top:1px solid #1E2229;font-size:12px;color:#6FD0A5}
body.ui-v2 .fmnav-vazio{color:#6E747C}
body.ui-v2 .fmnav-atual{margin-top:10px;font-size:11.5px;color:#6E747C;word-break:break-all}

/* a regra antiga de .fmver era flex-direction:column e continuava vencendo por herança —
   a linha da versao precisa ser em LINHA: nome a esquerda, download a direita. */
body.ui-v2 .fmver{flex-direction:row!important;align-items:center!important;text-align:left!important;max-width:100%!important}
body.ui-v2 .fmvinfo{align-items:flex-start}

/* A waveform tinha 150 barras de 2px = 598px dentro de um container de 1390px:
   sobravam 792px vazios e o clique era calculado sobre a largura TOTAL, entao
   caia num ponto diferente do que se ve. As barras passam a preencher tudo. */
body.ui-v2 .fmbar{flex:1 1 auto;min-width:1px;width:auto}

/* ---- navegador: agora escolhe o ARQUIVO, nao a pasta ---- */
body.ui-v2 .fmnav-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.ui-v2 .fmnav-titulo{margin:10px 6px 4px;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#6E747C;font-weight:600}
body.ui-v2 .fmnav-arq{border:1px solid transparent}
body.ui-v2 .fmnav-arq .fmnav-ico{color:#6FD0A5}
body.ui-v2 .fmnav-arq.on{border-color:#ED552D;background:rgba(237,85,45,.10)}
body.ui-v2 .fmnav-mb{font-size:11px;color:#6E747C;flex:0 0 auto;margin-left:8px;font-variant-numeric:tabular-nums}
body.ui-v2 .fmnav-check{opacity:0;color:#ED552D;flex:0 0 auto;margin-left:8px;font-size:13px}
body.ui-v2 .fmnav-arq.on .fmnav-check{opacity:1}
body.ui-v2 .fmnav-ok{color:#6FD0A5;font-weight:600}
body.ui-v2 .fmnav-aviso{color:#D8A13A}
body.ui-v2 .fmnav-atual{margin-top:11px;font-size:11.5px;color:#6E747C;word-break:break-all;line-height:1.5}
body.ui-v2 .fmvmain{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#ED552D;border:1px solid rgba(237,85,45,.4);
  border-radius:999px;padding:2px 8px;flex:0 0 auto}

/* ---- subsecao dentro de um bloco (o Clipe mora no Lancamento) ---- */
body.ui-v2 .fmsub{display:flex;align-items:center;gap:10px;margin:14px 0 2px;padding-top:12px;border-top:1px solid #1E2229}
body.ui-v2 .fmsubt{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#A26BF0;font-weight:700}
body.ui-v2 .fmsubx{margin-left:0}
body.ui-v2 .fmsubbtn{margin-left:auto;padding:4px 10px!important;font-size:11.5px!important}
body.ui-v2 .btn-xs{padding:4px 10px;font-size:11.5px;border-radius:7px}
/* sem "Quem edita": o cabecalho do bloco fica so com o titulo e o botao */
body.ui-v2 .fmbright:empty{display:none}
body.ui-v2 .fmh-dur[hidden], body.ui-v2 .fmh-dot[hidden]{display:none}

/* ---- avatar com foto ---- */
body.ui-v2 .fmh-av.comfoto, body.ui-v2 .fmav.comfoto{background-size:cover;background-position:center;color:transparent;border-color:#2b3138}
body.ui-v2 .fmh-p-troca{cursor:pointer;border-radius:9px;padding:3px 6px;margin:-3px -6px}
body.ui-v2 .fmh-p-troca:hover{background:#15191E}
body.ui-v2 .fmh-p-troca:hover .fmh-av{outline:2px solid #ED552D;outline-offset:1px}

/* Estado = status real (opcao A). Cores seguindo a legenda que a equipe ja conhece:
   Guia azul · Fazer Mixagem ambar · Regravar roxo · Concluido verde ·
   Alteracao Solicitada vermelho · Aguardando artista azul claro. */
@media (min-width:901px){
  body.ui-v2 #view-producoes .prod-v2-state-mix{color:#f0c46a;background:rgba(239,182,74,.10);border-color:rgba(239,182,74,.18)}
  body.ui-v2 #view-producoes .prod-v2-state-redo{color:#c79bf5;background:rgba(162,107,240,.11);border-color:rgba(162,107,240,.20)}
  body.ui-v2 #view-producoes .prod-v2-state-artist{color:#7fc4f5;background:rgba(91,164,239,.11);border-color:rgba(91,164,239,.19)}
}
/* a capinha da lista de Producoes mostra a foto do artista */
body.ui-v2 #view-producoes .prod-v2-cover.comfoto{background-size:cover;background-position:center;background-image:inherit}

/* ------------------------------------------------------------------
   Linha da tabela de Producoes sumindo pela metade (5.39)
   A tela do Paulo e 1.75x: com border-collapse:collapse, 1px CSS vira
   0,571px por celula e o Chrome arredonda cada uma por conta propria —
   umas desenham, outras nao, e a linha parece "quebrada" no meio.
   Com separate + spacing 0 cada td desenha a sua e a linha fecha inteira.
   ------------------------------------------------------------------ */
body.ui-v2 #view-producoes .prod-v2-table{border-collapse:separate;border-spacing:0}
body.ui-v2 #view-producoes .prod-v2-table td{border-bottom:1px solid #1D2329}
body.ui-v2 #view-producoes .prod-v2-table tbody tr:last-child td{border-bottom:0}
/* a capinha nao herda fundo do pai — a foto vem inline pelo JS */
body.ui-v2 #view-producoes .prod-v2-cover.comfoto{background-size:cover;background-position:center;background-repeat:no-repeat}

/* A borda por celula continuava sub-pixel (0,571px) e o Chrome apagava trechos.
   A linha passa a ser um gradiente pintado na propria linha: e rasterizada de
   uma vez so, sem arredondamento celula a celula. */
body.ui-v2 #view-producoes .prod-v2-table td{border-bottom:0!important}
body.ui-v2 #view-producoes .prod-v2-table tbody tr{
  background-image:linear-gradient(to top,#1D2329 1px,transparent 1px);
  background-repeat:no-repeat;background-size:100% 100%;
}
body.ui-v2 #view-producoes .prod-v2-table tbody tr:last-child{background-image:none}
body.ui-v2 #view-producoes .prod-v2-table tbody tr:hover{
  background-image:linear-gradient(to top,#1D2329 1px,transparent 1px),linear-gradient(#15191E,#15191E);
}

/* O modal de editar artista abre POR CIMA da janela do artista — sem z-index
   maior ele nasce atras e fica invisivel (bug recorrente ja registrado). */
body.ui-v2 #artistaModal, #artistaModal{z-index:300}
/* coluna Gravacao (data informada pelo produtor) */
body.ui-v2 #view-producoes .prod-v2-grav{color:#9AA0A8;white-space:nowrap}
body.ui-v2 #view-producoes .prod-v2-semdata{color:#41474F}

/* pilula de participacao, ao lado do nome da faixa */
body.ui-v2 #view-producoes .featpill{display:inline-block;margin-left:9px;font-size:10.5px;font-weight:600;
  padding:2px 9px;border-radius:999px;color:#8FB2F5;background:rgba(91,141,239,.12);
  border:1px solid rgba(91,141,239,.22);vertical-align:middle;white-space:nowrap;
  max-width:280px;overflow:hidden;text-overflow:ellipsis}
/* a pilula acompanha o nome na MESMA linha e nao empurra a altura da faixa */
body.ui-v2 #view-producoes .prod-v2-songname{display:flex;align-items:center;gap:0;min-width:0}
body.ui-v2 #view-producoes .featpill{flex:0 0 auto;line-height:1.5}
/* 6.17 — a pilula de feat fica ALINHADA a esquerda, logo abaixo do nome (sem indentar) */
body.ui-v2 #view-producoes .prod-v2-songcopy .featpill{margin-left:0;margin-top:4px;align-self:flex-start}


/* 5.42 — editar no lugar. A afordância é discreta: o valor só se revela
   clicável quando o ponteiro passa por cima. Em repouso a ficha continua
   sendo uma ficha, não um formulário. */
body.ui-v2 .fmed{display:inline-block;border-radius:6px;padding:1px 6px;margin:-1px -6px;
  cursor:pointer;border-bottom:1px dashed transparent;transition:background .12s,border-color .12s}
body.ui-v2 .fmed:hover{background:rgba(255,255,255,.05);border-bottom-color:#3A4048}
body.ui-v2 .fmed:focus-visible{outline:2px solid #5B8DEF;outline-offset:1px}
body.ui-v2 .fmed.editando{background:none;border-bottom-color:transparent;padding:0;margin:0}
body.ui-v2 .fmpor{color:#5A616B;font-size:12.5px}
body.ui-v2 .fmed:hover .fmpor{color:#9AA0A8}
body.ui-v2 .fmedin{background:#0A0B0D;border:1px solid #ED552D;border-radius:7px;
  color:#F5F1EB;font:inherit;font-size:13.5px;padding:4px 8px;min-width:172px;max-width:280px}
body.ui-v2 .fmedin:focus{outline:none;box-shadow:0 0 0 3px rgba(237,85,45,.18)}

/* 5.44 — Produções: o par Lista/Calendário mora na barra de cima. No calendário
   a barra continua onde estava; some só o que é da lista. Assim o caminho de
   volta nunca desaparece junto com o conteúdo. */
body.ui-v2 #faixaListaWrap.so-barra #prodLanc,
body.ui-v2 #faixaListaWrap.so-barra #faixaTableWrap,
body.ui-v2 #faixaListaWrap.so-barra #faixaCards,
body.ui-v2 #faixaListaWrap.so-barra #faixaEmpty{display:none!important}
body.ui-v2 #faixaListaWrap.so-barra .prod-v2-search,
body.ui-v2 #faixaListaWrap.so-barra .prod-v2-filter,
body.ui-v2 #faixaListaWrap.so-barra .prod-v2-sort,
body.ui-v2 #faixaListaWrap.so-barra .prod-v2-density,
body.ui-v2 #faixaListaWrap.so-barra .prod-v2-count{display:none!important}
body.ui-v2 #faixaListaWrap.so-barra .prod-v2-viewbar{justify-content:flex-end}

/* 5.44 — marca do calendário: a etapa escrita, a cor só reforçando */
body.ui-v2 #view-producoes .calpill{white-space:normal;line-height:1.25;padding:3px 6px}
body.ui-v2 #view-producoes .cpnome{display:block;font-weight:600;font-size:11px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.ui-v2 #view-producoes .cpmeta{display:block;font-size:9.5px;opacity:.72;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.ui-v2 #view-producoes .callegend .calleghint b{color:var(--v2-text,#F5F1EB);font-weight:600}

/* 5.45 — botão vazando a caixa do seletor Lista/Calendário.
   A regra de altura do contrato (Row 2 = 42px) usa seletor de DESCENDENTE:
   `.page-query-row :is(...,button,.segmented,...)`. Ela acertava a caixa
   (.segmented) E as peças de dentro (.segbtn) com o mesmo min-height:42px.
   Como a caixa tem 3px de folga de cada lado, a peça de 42px dentro de uma
   caixa de 42px sobrava 3,57px e escapava por baixo.
   O contrato de 42px vale para o CONTROLE, não para as peças dentro dele. */
body.ui-v2 .page-query-row .segmented > .segbtn{
  min-height:0!important;
  height:auto!important;
  align-self:stretch!important;
}

/* 5.46 — a tela inteira escorregava ~5px para a direita ao trocar Lista→Calendário.
   Não era layout: a .main é quem rola (overflow-y:auto). Na Lista o conteúdo é
   alto, a barra de rolagem aparece e come ~5px da largura útil; no Calendário a
   página cabe, a barra some e tudo se alarga de volta. Toda guia curta fazia o
   mesmo salto — só era visível aqui porque os dois modos ficam lado a lado.
   scrollbar-gutter:stable reserva o corredor da barra SEMPRE, role ou não. */
.main{scrollbar-gutter:stable}

/* 5.48 — Cadastro completo em seções. Antes eram 24 campos numa pilha só; o
   olho não tinha onde descansar e nada dizia o que ia junto com o quê. */
body.ui-v2 #faixaModal .fsec{border:1px solid #1E2229;border-radius:12px;padding:14px 15px 4px;margin:0 0 14px;background:#0C0E11}
body.ui-v2 #faixaModal .fsec:last-child{margin-bottom:2px}
body.ui-v2 #faixaModal .fsech{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#9AA0A8;font-weight:700;margin:0 0 12px;display:flex;align-items:baseline;gap:9px}
body.ui-v2 #faixaModal .fsecd{font-size:10.5px;letter-spacing:0;text-transform:none;color:#5A616B;font-weight:400}
body.ui-v2 #faixaModal .fsec .formrow{margin-bottom:12px}
body.ui-v2 #faixaModal .fsec .frow2{margin-bottom:12px}

/* 5.51 — aviso de salvamento do editor de letra do ticket */
.tkletrasv{font-size:11px;font-weight:400;color:#5A616B;margin-left:8px;letter-spacing:0;text-transform:none}
.tkletrasv.ok{color:#6FD0A5}
.tkletrasv.err{color:#ff8b8b}

/* 5.54 — Responsável é quem mixa. Sem mixagem definida, o vazio vira aviso:
   a coluna aponta as faixas que ainda precisam de alguém, em vez de mostrar
   o beatmaker no lugar de um responsável que não existe. */
body.ui-v2 #view-producoes .prod-v2-semdef{color:#5A616B;font-style:normal}

/* 5.58 — tela "Dados para lançamento": ver antes de baixar */
body.ui-v2 #fmModalWrap .dlhead{padding:0 0 14px;border-bottom:1px solid #1E2229;margin-bottom:4px}
body.ui-v2 #fmModalWrap .dlmus{font-family:Georgia,'Times New Roman',serif;font-size:24px;color:#F5F1EB;letter-spacing:-.01em}
body.ui-v2 #fmModalWrap .dlsub{font-size:12.5px;color:#9AA0A8;margin-top:5px}
body.ui-v2 #fmModalWrap .dlsec{padding:14px 0;border-bottom:1px solid #16191E}
body.ui-v2 #fmModalWrap .dlsec:last-child{border-bottom:0}
body.ui-v2 #fmModalWrap .dlsect{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#71767f;font-weight:700;margin-bottom:9px}
body.ui-v2 #fmModalWrap .dlrow{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;padding:5px 0;align-items:baseline;font-size:13.5px}
body.ui-v2 #fmModalWrap .dlk{color:#F5F1EB}
body.ui-v2 #fmModalWrap .dlv{color:#9AA0A8}
body.ui-v2 #fmModalWrap .dlvazio{color:#4A515A;font-size:12.5px}
body.ui-v2 #fmModalWrap .dltag{font-size:10.5px;color:#8FB2F5;background:rgba(91,141,239,.14);border-radius:999px;padding:1px 7px;margin-left:7px}
body.ui-v2 #fmModalWrap .dlsp{color:#6FD0A5;text-decoration:none}
body.ui-v2 #fmModalWrap .dlsp:hover{text-decoration:underline}
body.ui-v2 #fmModalWrap .dlletra{white-space:pre-line;color:#C9CDD3;font-size:13px;max-height:220px;overflow:auto;
  background:#0A0B0D;border:1px solid #1E2229;border-radius:9px;padding:11px 13px}

/* ===================================================================
   5.60 — AVISO FICA SEMPRE NA FRENTE.
   O #toasts nasceu com z-index:120, escolhido quando o .overlay valia 80.
   Depois disso vieram modais com camada propria — #artistaModal e
   #profileGate em 300, #meetInviteModal e #pushBigModal em 260,
   #meetModal 250, #agappPlanModal/#pressPitModal/#pressClipModal em 200,
   #confirmModal em 100000 — e o aviso passou a nascer ATRAS deles.
   Era o caso do "Editar artista": o toast aparecia por tras da janela.
   Aviso e a camada mais alta da interface, por definicao: se ele nao pode
   ser lido, nao serve para nada.
   =================================================================== */
#toasts{z-index:2147483647!important}
#sttip{z-index:2147483646!important}     /* dica de campo, idem */
.ppcopybln{z-index:2147483645!important} /* balao de "copiado" */

/* =====================================================================
   5.64 · CELULAR — quatro cortes medidos a 390px de largura.
   ===================================================================== */

/* 1. A tela inteira perdia 38px à direita.
   #app é display:grid; .topbar e .shell são itens de grid e herdam
   min-width:auto, então a coluna esticava até o min-content (428px) dentro
   de uma tela de 390. Como o body tem overflow-x:hidden, o excedente era
   CORTADO, não rolável — o sino de notificações ficava fora da tela.
   Só vale abaixo de 901px: no desktop a coluna de 240px do menu depende
   da largura natural. */
@media (max-width:900px){
  body.ui-v2 .topbar, body.ui-v2 .shell{ min-width:0!important; }

  /* 2. O atalho "/" da busca escapava da caixa.
     .prod-v2-search-kbd só era posicionado dentro do @media(min-width:901px);
     abaixo disso voltava a ser inline e caía EMBAIXO do campo, empurrando a
     caixa de 40 para 59px. No celular não existe teclado físico: some. */
  body.ui-v2 .prod-v2-search-kbd{ display:none!important; }

  /* 3. Rodapé de modal cortava botão.
     .mfoot é flex sem flex-wrap. No Cadastro completo (4 botões) o primeiro
     era empurrado para x=-48 — metade de "Dados para lançamento" ficava fora
     da tela, inalcançável. Agora quebra a linha e mantém tudo clicável. */
  body.ui-v2 .mfoot{ flex-wrap:wrap!important; }

  /* 4. Rótulo comprido não pode alargar o botão da barra de baixo. */
  .v2-mobilebar button span{
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  /* iPhone: a barra encostava na faixa do gesto de início. */
  .v2-mobilebar{ bottom:calc(10px + env(safe-area-inset-bottom,0px))!important; }

  /* Painel "Mais": separadores e item ativo, na mesma ordem do menu grande. */
  .v2-moresep{ height:1px; background:#22282f; margin:8px 2px; }
  .v2-moreitem.on{ color:#fff; }
  .v2-moreitem.on svg{ stroke:#fff; }
  .v2-moreempty{ color:#8a9098; font-size:13px; padding:14px 2px; }
}

/* =====================================================================
   5.65 · FAIXAS SÓ-HORIZONTAIS — touch-action: pan-x
   Do handoff `handoff-ux-rolagem-e-atualizacao.md`.

   Onde a faixa rola SÓ na horizontal e a rolagem vertical pertence a um
   ancestral (o corpo do modal, a página), `pan-x` faz o navegador rotear o
   gesto vertical para o pai — que rola nativo, com inércia — e manter o
   horizontal aqui. Sem isso a faixa "sacode como página web".

   ⚠️ NUNCA em contêiner que rola nos 2 eixos: `pan-x` mata a vertical dele.
   Esse caso é o scroller JS do premium-ui.js.
   Conferido nesta cópia: `.tkmsub` NÃO entra — aqui ela é flex-wrap:wrap,
   quebra linha em vez de rolar.
   ===================================================================== */

/* Abas da ficha do artista: 6 abas com rótulos longos ("Brainstorm de
   Planejamento", "Planejamento de lançamento") num flex sem rolagem — no
   celular elas se espremiam, os rótulos quebravam e as últimas ficavam
   cortadas. Agora deslizam. */
body.ui-v2 .awtabs{
  overflow-x:auto;
  flex-wrap:nowrap;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  overscroll-behavior:contain;
  touch-action:pan-x;
}
body.ui-v2 .awtabs::-webkit-scrollbar{ display:none; }
body.ui-v2 .awtab{ white-space:nowrap; flex:0 0 auto; }
/* texto comprido (link, e-mail) não empurra a caixa */
body.ui-v2 .awfield .v{ overflow-wrap:anywhere; }

@media (max-width:900px){
  /* Produção Musical / Produção de Clipe e a fileira de ações do cabeçalho
     das guias já são `overflow:auto` no celular — são só-horizontais. */
  body.ui-v2 .prodmodebar,
  body.ui-v2 .vhead>div:last-child{
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior:contain;
    touch-action:pan-x;
  }
  body.ui-v2 .prodmodebar::-webkit-scrollbar,
  body.ui-v2 .vhead>div:last-child::-webkit-scrollbar{ display:none; }
}

/* =====================================================================
   5.67 · Dois cortes vistos no iPhone do Paulo.
   ===================================================================== */

/* 1. A barra de baixo some enquanto houver janela aberta — senão ela cobre o
   rodapé do modal, que é onde moram "⬇ Baixar PDF", "Salvar" e "Cancelar".
   A classe é posta pelo premium-ui.js, que observa as `.overlay`. */
body.ui-v2.v2-modal-aberto .v2-mobilebar{ display:none!important; }

@media (max-width:900px){
  /* 2. O nome do arquivo passava POR CIMA do botão "Fazer download".
     `.fmvinfo` é um flex em coluna com `align-items:flex-start` (linha 947,
     posta para alinhar à esquerda). Nesse arranjo os filhos são medidos pelo
     CONTEÚDO, não pela largura do pai — então o nome, que é `white-space:nowrap`,
     assumia a largura inteira do arquivo e o `text-overflow:ellipsis` nunca
     tinha contra o que cortar. No desktop passava batido porque a caixa tem
     1390px e o nome cabia; a 390px, vazava por cima do botão.
     Limitar os filhos a 100% devolve o corte com "…" sem desfazer o alinhamento. */
  body.ui-v2 .fmvinfo>.fmvern,
  body.ui-v2 .fmvinfo>.fmvers{ max-width:100%; }
}

/* 5.68 · iOS: `100vh` no Safari do iPhone é MAIOR que a área realmente visível
   (não desconta a barra do navegador), então o rodapé do modal ficava embaixo
   dela. `100dvh` mede o viewport de verdade. A linha antiga fica como reserva
   para navegador que não conheça `dvh`. */
@media (max-width:900px){
  body.ui-v2 .modal{ max-height:calc(100dvh - 24px)!important; }
}

/* =====================================================================
   5.75 · A ARVORE LATERAL DO SOCIAL MEDIA FOI REMOVIDA.
   Ela existiu do 5.69 ao 5.74 numa faixa fixa de 238px a esquerda.
   Veredito do Paulo: entregava o mesmo que o modo lista ja entrega,
   so que cobrando largura o tempo todo — nao compensava. A navegacao
   volta a ser o indice de paginas (#ppWrap) mais a migalha do topo.
   O CSS de .smlayout/.smtree/.smitem saiu inteiro daqui.
   ===================================================================== */

/* =====================================================================
   5.70 · A TABELA DO PLANNER DISTRIBUI A LARGURA POR TIPO DE CAMPO.
   Medido no app antes: "Referência" 377px com 35 de 40 células vazias
   (as poucas cheias trazem nome de arquivo do Dropbox sem corte), e
   "Conteúdo" — o título — espremido em 131px, quebrando em 3 linhas.
   A tabela tinha 1667px num palco de 1350: 317px de rolagem lateral.
   As larguras vão por TIPO, não por posição, porque quais colunas
   aparecem depende do "⚙ Campos" de cada um.
   ===================================================================== */
@media (min-width:901px){
  body.ui-v2 #view-postagens .pptb,
  body.ui-v2 #view-postagens table{ table-layout:fixed; width:100%; }

  body.ui-v2 #view-postagens th.pptbcksel{ width:34px }
  body.ui-v2 #view-postagens th.ppsolic{ width:132px }
  body.ui-v2 #view-postagens th.ppacts{ width:112px }

  /* o título fica sem largura declarada de propósito: ele herda o que sobra.
     2ª passada: as colunas de data estavam apertadas e quebravam a data em
     várias linhas, esticando a LINHA inteira. Data cabe inteira agora, e o
     que sobrou do aperto foi para o título. */
  body.ui-v2 #view-postagens th[data-ft="person"]{ width:130px }
  body.ui-v2 #view-postagens th[data-ft="date"],
  body.ui-v2 #view-postagens th[data-ft="datetime"]{ width:156px }
  body.ui-v2 #view-postagens th[data-ft="status"],
  body.ui-v2 #view-postagens th[data-ft="select"]{ width:150px }
  body.ui-v2 #view-postagens th[data-ft="multiselect"]{ width:200px }
  body.ui-v2 #view-postagens th[data-ft="url"]{ width:180px }
  body.ui-v2 #view-postagens th[data-ft="longtext"],
  body.ui-v2 #view-postagens th[data-ft="text"]:not([data-ft="title"]){ width:150px }
  body.ui-v2 #view-postagens th[data-ft="number"]{ width:96px }
  body.ui-v2 #view-postagens th[data-ft="checkbox"]{ width:80px }

  /* Com largura fixa a célula precisa saber se corta ou se quebra.
     O título quebra (é o conteúdo); o resto corta com reticências e
     o texto inteiro continua no title= para o passar do mouse. */
  body.ui-v2 #view-postagens td{ overflow:hidden }
  body.ui-v2 #view-postagens td.ppcellopen{ white-space:normal; overflow-wrap:anywhere }
  body.ui-v2 #view-postagens td.ppcelledit{ text-overflow:ellipsis }
  body.ui-v2 #view-postagens td.ppcelledit .dbxlink,
  body.ui-v2 #view-postagens td.ppcelledit a{
    display:inline-block; max-width:100%; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom;
  }
  /* as pílulas de multiselect podem empilhar em vez de esticar a coluna */
  body.ui-v2 #view-postagens td.ppcelledit .ppchip{ max-width:100%; overflow:hidden; text-overflow:ellipsis }
  /* data e hora não quebram no meio: ou cabem, ou cortam com reticências */
  body.ui-v2 #view-postagens td.ppcelledit[data-ft="date"],
  body.ui-v2 #view-postagens td.ppcelledit[data-ft="datetime"]{ white-space:nowrap; text-overflow:ellipsis }
  /* o cabeçalho também não pode cortar o próprio nome no meio de uma palavra */
  body.ui-v2 #view-postagens thead th{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
}

/* ========================================================================
   PORTAGEM V2 — passo 1: HARMONIZAR AS VARIAVEIS DO PROPRIO APP
   ------------------------------------------------------------------------
   Descoberta ao portar o 360k: as telas exclusivas dele (Financeiro,
   Clientes, Catalogo, Fornecedores, Administrativo — e a mensalidade) NAO
   usam classes genericas. Sao classes proprias (.fin-stat, .forn-card,
   .admpermcard, .admseg...) e TODAS ja tem CSS proprio construido em cima
   das variaveis do app:

       .fin-stat{background:var(--panel);border:1px solid var(--line);...}

   A pele V2 definia so as suas proprias (--v2-*, --v21-*) e sobrescrevia
   componente por componente com !important. Resultado: essas telas ficavam
   com a paleta ANTIGA (--panel #15151A, --line #2A2A33) dentro de uma
   pagina V2 (#101317 / #232930) — perto, mas fora do tom.

   Em vez de escrever regra para cada classe dessas — que fragmentaria o
   arquivo e nunca alcancaria as telas que eu ainda nem vi — o certo e
   remapear as VARIAVEIS. Um bloco resolve todas as telas dos DOIS apps de
   uma vez, inclusive as que ainda serao portadas.

   A escada de luminosidade e preservada (panel mais claro que o fundo,
   line visivel sobre panel); o que muda e o tom: sai o roxo-acinzentado,
   entra o neutro-frio da V2. Onde a pele ja sobrescreve com !important
   (.listcard, .card, .panel, .btn, table...), nada muda.

   Rollback: apagar este bloco.
   ======================================================================== */
body.ui-v2{
  --panel:      #14181d;   /* era #15151A */
  --panel2:     #1a1f25;   /* era #1E1E25 */
  --line:       #232930;   /* era #2A2A33 */
  --line2:      #303740;   /* era #373742 */
  --radius:     10px;      /* era 12px — mesmo raio dos cards da V2 */
  --radius-sm:  8px;
  --shadow:     0 16px 42px rgba(0,0,0,.24);
}

/* ========================================================================
   PORTAGEM V2 — passo 2: CARD DE JUROS-A-LANCAR (ficha do mensalista, 360k)
   ------------------------------------------------------------------------
   O card ja existia na oficial 5.46, montado com style="" embutido — e
   estilo embutido ganha de qualquer folha. Por isso o markup passou a usar
   classes (a estrutura, os textos, a ordem, as classes dos botoes e os
   data-* continuam identicos; nenhuma logica de juros foi tocada).

   O guardrail do chat de integracao manda o tom: e ALERTA DE ATENCAO, nao
   erro de bloqueio. O acesso do mensalista nunca e travado por causa disto
   — e informacao para o Root decidir. Entao: ambar, nao vermelho; cartao
   no fluxo da ficha, nao modal; "Lancar" primario, "Perdoar" leve (abrir
   mao nao e acao destrutiva).

   Estas classes so existem no 360k — no index da 1Kilo nao ha markup que
   as case, entao aqui elas sao inertes. E o motivo de nao gatear por
   STUDIO_MODE.
   ======================================================================== */
body.ui-v2 .mens-jcard{
  border:1px solid rgba(239,182,74,.30);
  background:linear-gradient(180deg,rgba(239,182,74,.085),rgba(239,182,74,.028));
  border-radius:var(--v2-r,10px);
  margin-bottom:14px;
  overflow:hidden;
}
body.ui-v2 .mens-jcard-hd{
  display:flex; align-items:center; gap:9px;
  padding:11px 14px;
  border-bottom:1px solid rgba(239,182,74,.18);
  background:rgba(239,182,74,.05);
}
body.ui-v2 .mens-jcard-hd .ic{font-size:15px;line-height:1;flex:none}
body.ui-v2 .mens-jcard-hd b{font-size:13.5px;font-weight:650;color:#f2d79b;letter-spacing:-.01em}
body.ui-v2 .mens-jcard-bd{padding:12px 14px}
body.ui-v2 .mens-jcard-tl{
  font-size:12.5px; line-height:1.55; margin-bottom:10px;
  color:var(--v2-muted2,#7e828a);
}
body.ui-v2 .mens-jcard-tl b{color:var(--v2-text,#f3efe9);font-weight:600}
body.ui-v2 .mens-jcard-tl b.dias{color:var(--v2-amber,#efb64a);font-weight:700}
body.ui-v2 .mens-jcard-acts{
  display:flex; gap:8px; flex-wrap:wrap;
  justify-content:flex-end; margin-top:12px;
}
/* "Perdoar" e abrir mao, nao destruir: fica leve, sem vermelho. */
body.ui-v2 .mens-jcard-acts .mens-jperdoar{color:var(--v2-muted,#aaa69f)!important}
body.ui-v2 .mens-jcard-acts .mens-jperdoar:hover{color:var(--v2-text,#f3efe9)!important}
body.ui-v2 .mens-jcard-note{
  color:var(--v2-muted2,#7e828a); font-size:11px;
  margin-top:9px; line-height:1.55;
}
/* a conta, dentro do card, herda o tom de aviso na linha do total */
body.ui-v2 .mens-jcard .mens-jbox{background:rgba(10,11,13,.42);border-color:rgba(239,182,74,.16)}
body.ui-v2 .mens-jcard .mens-calcline{border-bottom-color:rgba(239,182,74,.14)}
body.ui-v2 .mens-jcard .mens-calcline.total{
  border-top-color:rgba(239,182,74,.28);
  color:var(--v2-amber,#efb64a);
}

@media (max-width:600px){
  body.ui-v2 .mens-jcard-acts{justify-content:stretch}
  body.ui-v2 .mens-jcard-acts .btn{flex:1 1 auto}
}

/* ========================================================================
   PORTAGEM V2 — passo 3: acertos de CELULAR nas telas do 360k
   ------------------------------------------------------------------------
   Medido em viewport de 390px (Chromium com toque, emulando iPhone), com o
   markup e o CSS reais das telas, num banco de ensaio no meu conteiner.
   Nada vazava na horizontal; os dois problemas eram de LEITURA, e so
   aparecem no estreito:

   1) Na conta do card de juros, o valor quebrava no meio — "R$" numa linha
      e "250,00" na outra. Dinheiro partido ao meio nao se le.
   2) Na linha de cobranca, os botoes "Link" e "Baixa" seguravam a direita e
      espremiam o texto numa coluna de ~110px: a explicacao da conta virava
      SETE linhas. Agora eles descem e o texto usa a tela toda (3 linhas).
   3) Os tres quadros do resumo de Mensalistas empilhavam em coluna unica,
      gastando meia tela de rolagem antes da lista. Dois por linha le melhor.

   So mira classes que existem no 360k — inerte no index da 1Kilo.
   ======================================================================== */
@media (max-width:600px){
  body.ui-v2 .mens-calcline{gap:14px}
  body.ui-v2 .mens-calcline>span:last-child{white-space:nowrap;text-align:right;flex:none}
  body.ui-v2 .mens-calcline>span:first-child{min-width:0}

  /* o div do texto tem style="flex:1" embutido, que ganha da folha —
     por isso o !important aqui, e so aqui. */
  body.ui-v2 .mens-cbrow>div:first-child{flex:1 1 100%!important;min-width:0!important}
  body.ui-v2 .mens-cbrow .btn{flex:1 1 auto;justify-content:center}
  body.ui-v2 .mens-cbmeta{line-height:1.5}

  body.ui-v2 .mens-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  body.ui-v2 .mens-tile{padding:10px 12px}
  body.ui-v2 .mens-tilebig{font-size:22px}
}


/* ==========================================================================
   5.87 — ACABAMENTO DA FICHA DA MUSICA  (arquivo compartilhado: vale para os
   dois apps, 1Kilo REC e 360k Estudio)
   ========================================================================== */

/* 1) A duracao carrega o PROPRIO separador. Antes o "•" era emitido pelo join
      da linha do hero e so sumia quando o player carregava os metadados — no
      360k, que nao tem audio, isso nunca acontecia e sobrava um "•" solto no
      fim da linha. Agora o ponto nasce e morre junto com a duracao. */
body.ui-v2 .fmh-dur.fmh-dursep::before{content:"\2022";color:#3A4048;padding:0 3px}

/* 2) Pessoas do hero: cada pessoa e um BLOCO que quebra inteiro. Avatar, nome
      e papel nunca se separam, e nome comprido corta com reticencias em vez de
      empurrar o bloco do lado. No celular, uma pessoa por linha. */
body.ui-v2 .fmh-p{min-width:0}
body.ui-v2 .fmh-pn, body.ui-v2 .fmh-pr{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:600px){
  body.ui-v2 .fmh-people{gap:12px}
  body.ui-v2 .fmh-p{flex:1 1 100%;max-width:100%}
}

/* 3) Faixa de estado: sao TRES quadros (Producao / Stream / Clipe). Em duas
      colunas o Clipe ficava orfao na segunda linha, com metade da caixa vazia.
      Ate 1080px os tres seguem lado a lado; no celular viram uma coluna, um por
      linha. Cada quadro guarda a mesma moldura do desktop — o mesmo item, do
      mesmo jeito, em qualquer largura. */
@media (max-width:1080px){
  body.ui-v2 .fm-states{grid-template-columns:repeat(3,1fr)}
  body.ui-v2 .fmstate{padding:13px 12px}
  body.ui-v2 .fmsv{font-size:15px}
}
@media (max-width:600px){
  body.ui-v2 .fm-states{grid-template-columns:1fr}
  body.ui-v2 .fmstate{padding:13px 15px}
}


/* ==========================================================================
   5.88 — coluna ESTADO da Producao musical (V2) carrega o tempo no status
   Importado do 5.50 oficial. Na V2 a coluna Status virou ESTADO, e o td da
   tabela redesenhada e nowrap + overflow:hidden + 52px fixos — que engoliria
   em silencio o chip e a linha "mudou em". So esta coluna passa a respirar;
   as outras seguem com a mesma disciplina de uma linha so.
   (Fica no mesmo @media da tabela: a partir de 901px. Abaixo disso a lista e
   de cards, que ja recebem o chip pelo proprio HTML.)
   ========================================================================== */
@media (min-width:901px){
  body.ui-v2 #view-producoes .prod-v2-table td{height:auto!important;min-height:52px}
  body.ui-v2 #view-producoes .prod-v2-table td:nth-child(3){
    white-space:normal!important;overflow:visible!important;line-height:1.35;
    padding-top:9px!important;padding-bottom:9px!important;
  }
  body.ui-v2 #view-producoes .prod-v2-table td:nth-child(3) .cev{white-space:normal;margin-top:4px}
  body.ui-v2 #view-producoes .prod-v2-table td:nth-child(3) .tchip{white-space:normal}
  /* Estado precisa de mais espaco agora; sai de Musica e de Responsavel. */
  body.ui-v2 #view-producoes .prod-v2-table th:nth-child(1){width:25%}
  body.ui-v2 #view-producoes .prod-v2-table th:nth-child(3){width:19%}
  body.ui-v2 #view-producoes .prod-v2-table th:nth-child(4){width:11%}
  body.ui-v2 #view-producoes .prod-v2-table th:nth-child(5){width:13%}
}

/* ==========================================================================
   5.88 — card do clipe no celular
   O card e uma grade de 3 colunas (data 70px | conteudo 1fr | acoes auto).
   A 390px sobravam ~150px para o meio, e o rodape novo de 3 linhas do 5.50
   quebrava palavra por palavra. No estreito a coluna de acoes desce para uma
   faixa propria, e o conteudo fica com a largura inteira.
   ========================================================================== */
@media (max-width:600px){
  body.ui-v2 .clipcard{grid-template-columns:58px minmax(0,1fr);gap:12px}
  body.ui-v2 .clipcard>*{min-width:0}
  body.ui-v2 .clipcard .cact{
    grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;
    align-items:center;justify-content:flex-start;gap:8px;
    padding-top:10px;border-top:1px solid var(--line,#2A2A33);
  }
  body.ui-v2 .clipcard .cmeta{gap:6px}
  body.ui-v2 .clipcard .cev{margin-top:6px;line-height:1.4}
}


/* =====================================================================
   FIX DIAGRAMACAO (Claude) — logo do topo cabendo na barra + botao
   "Minimizar" fora da faixa acima do cabecalho. Visual only, sem bump.
   ===================================================================== */

/* FIX 1 — Logo do topo vazava a barra.
   A pele reduziu a topbar para 60px (58px no mobile), mas o .logostack img
   seguia 80px do base — o logo era cortado em cima e atravessava a linha
   inferior. Ajusta a altura do logo para caber com folga na barra premium. */
body.ui-v2 #app>.topbar .logostack,
body.ui-v2 #app>.topbar .logostack img{ height:40px!important; }
@media (max-width:900px){
  body.ui-v2 #app>.topbar .logostack,
  body.ui-v2 #app>.topbar .logostack img{ height:38px!important; }
}

/* FIX 2 — "— Minimizar" nascia como FAIXA acima do cabeçalho.
   No app o botão é injetado como PRIMEIRO filho da view (antes do .eyebrow),
   então colava por cima de "SOLICITAÇÕES". Reancora como ação secundária no
   canto superior direito da Row 1, sem empurrar/colar no cabeçalho.
   .tkmail já é position:relative, então o drawer mobile dos tickets não é
   afetado por tornar a view relativa. */
body.ui-v2 #view-tickets,
body.ui-v2 #view-postagens{ position:relative!important; }
body.ui-v2 #view-tickets>.cl-minbtn,
body.ui-v2 #view-postagens>.cl-minbtn{
  position:absolute!important;
  top:0!important; right:0!important;
  margin:0!important;
  z-index:5!important;
}
@media (max-width:900px){
  body.ui-v2 #view-tickets>.cl-minbtn,
  body.ui-v2 #view-postagens>.cl-minbtn{ top:2px!important; }
}
/* FIX 3 — cabeçalho de página (contrato) com altura FIXA de 54px atropelava
   a legenda quando ela quebrava em 2 linhas, colando no conteúdo de baixo
   (ex.: "Por lançamento" em Produções). Vira altura automática com mínimo de
   54px: fica 54px quando a legenda cabe em 1 linha (mantém o alinhamento) e
   cresce só quando quebra, sem sobrepor. */
@media (min-width:901px){
  body.ui-v2 .view:not(#view-inicio):not(#view-montarpitching) > .vhead,
  body.ui-v2 #view-producoes > .prod-v2-head,
  body.ui-v2 #view-lancamentos > .vhead{
    height:auto!important;
    min-height:54px!important;
  }
}


/* ==========================================================================
   6.02 — CAMADA GLOBAL DE RESPONSIVIDADE MOBILE (arquivo compartilhado)
   Auditoria: markup real das 27 views medido a 414px e 360px. Objetivo: nenhuma
   tela corta na horizontal; controles se ajustam a largura; tabela larga rola
   DENTRO da caixa. Ver claude/mobile-responsivo-global-6.02.md.
   ========================================================================== */
/* ============ Camada global de responsividade mobile ============
   Vale para TODAS as views. Nada corta na horizontal; os controles se ajustam
   à largura; conteúdo largo (tabelas) rola DENTRO da própria caixa. */
@media (max-width:900px){
  /* 0. A página nunca rola/corta na horizontal. */
  html,body{max-width:100%;overflow-x:hidden!important}

  /* 1. Abas/toggles (segmented) cabem na largura, sem cortar nem sumir. */
  body.ui-v2 .main .segmented{display:flex!important;width:100%!important;max-width:100%!important}
  body.ui-v2 .main .segmented>.segbtn{flex:1 1 0!important;min-width:0!important;justify-content:center!important;white-space:normal!important;line-height:1.15!important;text-align:center}
  body.ui-v2 .main .musswitch{overflow:visible!important}
  body.ui-v2 .main .bigseg{width:100%!important}

  /* 2. Tabelas: as pequenas cabem na tela; as de dados largas rolam DENTRO da
        caixa (nunca cortam a página). Anula o min-width:760 geral que empurrava
        até tabelas de poucas colunas (relatório, fornecedores) para fora. */
  body.ui-v2 .main table{min-width:0!important}
  body.ui-v2 .main .prod-v2-tablewrap table,
  body.ui-v2 .main #view-postagens .listcard table,
  body.ui-v2 .main #view-planner table{min-width:720px!important}
  body.ui-v2 .main .tablewrap,
  body.ui-v2 .main .listcard,
  body.ui-v2 .main .prod-v2-tablewrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}

  /* 3. Mídia nunca ultrapassa a largura. */
  body.ui-v2 .main img,body.ui-v2 .main video,body.ui-v2 .main canvas{max-width:100%!important;height:auto}

  /* 4. Folha "Mais": último item nunca fica atrás da barra do iPhone. */
  .v2-morepanel{padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))!important;max-height:82vh!important}
}


/* ==========================================================================
   6.02 — Filtro de situação dos Tickets como LISTA SUSPENSA (Em aberto /
   Respondido / Encerrado). Antes eram botões fixos que ocupavam espaço no
   celular; agora é um seletor "Todos ▾" compacto, alinhado na barra de busca.
   ========================================================================== */
.tkmstatussel{
  background:var(--panel2,#0f1215);border:1px solid var(--line,#232830);border-radius:10px;
  color:var(--text,#e9ecf2);font:inherit;font-size:13.5px;padding:9px 32px 9px 12px;min-height:38px;
  max-width:200px;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b93a2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center
}
.tkmstatussel:focus{outline:none;border-color:#5a8cff}
body.ui-v2 .tkmstatussel{background-color:#0f1215;border-color:var(--v2-line,#232830)}
@media (max-width:900px){ body.ui-v2 .main .tklistbar .tkmstatussel{flex:1 1 auto;max-width:100%} }


/* ==========================================================================
   6.02 — FIX: barra de filtro dos Tickets em LINHA (busca + seletor lado a
   lado). A .tklistbar era flex-direction:column com height:42px/overflow:hidden
   no desktop, então o filtro caía na 2ª linha e era cortado (o usuário "não via
   filtro"). Agora fica em linha e aparece em qualquer largura.
   ========================================================================== */
body.ui-v2 #view-tickets .tklistbar{flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;gap:8px!important}
body.ui-v2 #view-tickets .tklistbar .tkmsearch{flex:1 1 auto!important;width:auto!important;min-width:0!important}
body.ui-v2 #view-tickets .tklistbar .tkmstatussel{flex:0 0 auto!important;max-width:180px}
body.ui-v2 #view-tickets .tklistbar .tkmrootp{flex:0 0 auto!important}


/* ==========================================================================
   6.02 — FIX: no mobile a waveform do player tinha 150 barras com min-width:1px
   + gap:2px (~448px) e estourava o container estreito (overflow:hidden), então
   a barra de progresso não batia com o ponto tocado. Agora as barras dividem
   EXATAMENTE a largura visível (flex-basis 0, sem min-width) e o gap encolhe —
   o clique/toque cai exatamente onde se vê, igual ao desktop.
   ========================================================================== */
@media (max-width:900px){
  body.ui-v2 .fmwave{gap:1px!important}
  body.ui-v2 .fmbar{flex:1 1 0!important;min-width:0!important;width:auto!important}
}