/* =====================================================================
   VISUAL MODERNO — ícones, cartões com hover, biblioteca e linha do tempo
   (carregado depois de admin.css; sobrescreve o visual base)
   ===================================================================== */
:root { --bg:#f3f4fb; --shadow:0 1px 2px rgba(30,30,70,.04), 0 8px 24px rgba(30,30,70,.06); --shadow-lg:0 14px 40px rgba(60,40,140,.16); --grad:linear-gradient(135deg,#6c5ce7,#a855f7); }
body { background: radial-gradient(900px 500px at 85% -10%, #e6e1ff 0, transparent 60%), radial-gradient(700px 400px at -5% 110%, #ffe6f3 0, transparent 55%), var(--bg); background-attachment: fixed; }
.ic { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-4px; flex:none; }
nav a span { display:grid; place-items:center; } nav a .ic { width:20px; height:20px; }
aside.nav { background:rgba(255,255,255,.75); backdrop-filter:blur(14px); }
nav a.on { background:var(--grad); color:#fff; box-shadow:0 6px 18px rgba(108,92,231,.35); }
.btn { border-radius:12px; box-shadow:0 1px 2px rgba(30,30,70,.05); } .btn.primary { background:var(--grad); border-color:transparent; }
.btn.primary:hover { filter:brightness(1.07); background:var(--grad); }
.hero { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.hero h2 { font-size:30px; }

/* busca */
.search { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:0 14px; margin:0; min-width:260px; box-shadow:var(--shadow); color:var(--mut); }
.search input { border:0; background:transparent; padding:11px 0; outline:0 !important; } .search:focus-within { border-color:var(--acc); box-shadow:0 0 0 3px #e4dfff; }
.search.sm { min-width:0; margin-bottom:12px; box-shadow:none; } .search.sm input { padding:9px 0; }

/* cartões de criação */
.create-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-bottom:24px; }
.create { position:relative; overflow:hidden; text-align:left; border:0; border-radius:20px; padding:20px; color:#fff; cursor:pointer; display:flex; flex-direction:column; gap:3px; min-height:118px; font:inherit; transition:.2s; box-shadow:var(--shadow); }
.create:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.create::after { content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.14); }
.create .ci { width:42px; height:42px; border-radius:13px; background:rgba(255,255,255,.22); display:grid; place-items:center; margin-bottom:auto; } .create .ci .ic { width:22px; height:22px; }
.create b { font-size:17px; } .create small { color:rgba(255,255,255,.85); font-size:12.5px; }
.create.c1 { background:linear-gradient(135deg,#6c5ce7,#a855f7); } .create.c2 { background:linear-gradient(135deg,#0ea5e9,#6366f1); } .create.c3 { background:linear-gradient(135deg,#f97316,#ec4899); }

.chips .chip { display:inline-flex; align-items:center; gap:7px; box-shadow:var(--shadow); } .chip em { font-style:normal; font-size:11px; background:rgba(120,120,160,.15); padding:1px 7px; border-radius:99px; } .chip.on { background:var(--grad); border-color:transparent; } .chip.on em { background:rgba(255,255,255,.25); }
.pillsel { width:auto; margin-left:auto; border-radius:99px; padding:9px 16px; box-shadow:var(--shadow); font-weight:600; }

/* grade de conteúdo */
.mgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; }
.mcard { background:#fff; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); transition:.2s; border:1px solid rgba(225,228,240,.8); }
.mcard:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.mth { position:relative; aspect-ratio:16/9; background:#e9ebf3; display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; font-size:34px; }
.mth img, .mth video { width:100%; height:100%; object-fit:cover; transition:transform .4s; } .mcard:hover .mth img, .mcard:hover .mth video { transform:scale(1.05); }
.mtype { position:absolute; left:10px; top:10px; z-index:3; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 9px; border-radius:99px; background:rgba(255,255,255,.88); color:#333a55; backdrop-filter:blur(6px); } .mtype .ic { width:13px; height:13px; }
.mdur { position:absolute; right:10px; bottom:10px; z-index:3; font-size:11px; font-weight:700; padding:3px 8px; border-radius:8px; background:rgba(15,18,35,.7); color:#fff; }
.mov { position:absolute; inset:0; z-index:2; display:grid; place-items:center; background:linear-gradient(180deg,rgba(15,18,40,0),rgba(15,18,40,.45)); opacity:0; transition:.2s; } .mcard:hover .mov { opacity:1; }
.rbtn { width:54px; height:54px; border-radius:50%; border:0; background:#fff; color:#6c5ce7; cursor:pointer; display:grid; place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.3); transition:.15s; } .rbtn:hover { transform:scale(1.1); } .rbtn .ic { width:22px; height:22px; fill:currentColor; }
.mbody { padding:13px 15px 12px; } .mname { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .msub { color:var(--mut); font-size:12px; margin-top:2px; }
.mact { display:flex; gap:4px; margin-top:10px; align-items:center; }
.ibtn { display:inline-flex; align-items:center; gap:3px; height:32px; min-width:32px; justify-content:center; border-radius:10px; border:0; background:#f1f2f9; color:#555c75; cursor:pointer; font:inherit; font-size:11px; font-weight:700; transition:.15s; padding:0 8px; }
.ibtn:hover { background:#e6e3ff; color:var(--acc); } .ibtn.danger:hover { background:#fee2e2; color:var(--bad); } .ibtn.on { background:#e6e3ff; color:var(--acc); } .ibtn.lg { height:42px; min-width:42px; border-radius:12px; }
.mact [data-ren] .ic { display:none; } .mact [data-ren] span { font-size:12px; }
.empty.fancy { background:rgba(255,255,255,.7); border:2px dashed #d3d0f2; padding:70px 20px; } .empty .emo { width:68px; height:68px; margin:0 auto 14px; border-radius:22px; background:var(--grad); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-lg); } .emo .ic { width:30px; height:30px; }
.dropov { position:fixed; inset:0; z-index:60; background:rgba(108,92,231,.88); display:grid; place-items:center; color:#fff; text-align:center; backdrop-filter:blur(4px); } .dropov > div { display:flex; flex-direction:column; gap:6px; align-items:center; } .dropov .ic { width:56px; height:56px; } .dropov b { font-size:26px; }

/* lightbox */
.lb { position:fixed; inset:0; z-index:70; background:rgba(12,14,30,.88); backdrop-filter:blur(8px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; animation:lbin .2s; }
@keyframes lbin { from { opacity:0; } } .lb-box { position:relative; background:#000; border-radius:16px; overflow:hidden; box-shadow:0 30px 100px rgba(0,0,0,.6); }
.lb-x { position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.15); color:#fff; cursor:pointer; display:grid; place-items:center; } .lb-x:hover { background:rgba(255,255,255,.3); }
.lb-bar { display:flex; gap:12px; align-items:center; min-height:40px; } .lb-lbl { color:#fff; font-weight:600; min-width:200px; text-align:center; }

/* playlists */
.pl-layout { display:grid; grid-template-columns:270px minmax(0,1fr); gap:24px; align-items:start; }
.rail { display:flex; flex-direction:column; gap:12px; position:sticky; top:24px; max-height:calc(100vh - 48px); overflow:auto; padding:4px; margin:-4px; }
.plc { display:flex; gap:12px; background:#fff; border-radius:18px; padding:10px; cursor:pointer; box-shadow:var(--shadow); border:2px solid transparent; transition:.15s; color:var(--txt); }
.plc:hover { transform:translateY(-2px); } .plc.on { border-color:var(--acc); box-shadow:0 0 0 4px #e6e3ff, var(--shadow); }
.mosaic { width:74px; height:74px; flex:none; display:grid; grid-template-columns:1fr 1fr; gap:2px; border-radius:12px; overflow:hidden; background:#e9ebf3; }
.mosaic .mo { position:relative; background:linear-gradient(135deg,#eceefa,#dfe2f2); overflow:hidden; }
.th-fill { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; } .th-fill img, .th-fill video { width:100%; height:100%; object-fit:cover; }
.th-fill.ig { background:linear-gradient(45deg,#f09433,#dc2743,#bc1888); color:#fff; } .th-fill.clock { background:linear-gradient(135deg,#243b6b,#0b1020); color:#fff; } .th-fill .ic { width:22px; height:22px; }
.plc .pi { min-width:0; display:flex; flex-direction:column; justify-content:center; gap:1px; } .plc b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plc .pi span { font-size:12px; color:var(--mut); } .plc .tvs { display:flex; align-items:center; gap:4px; } .plc .tvs .ic { width:13px; height:13px; }

.pl-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.pl-title { flex:1; min-width:260px; } .pl-title input { font-size:26px; font-weight:800; letter-spacing:-.02em; border:2px solid transparent; background:transparent; padding:2px 8px; margin-left:-8px; border-radius:12px; }
.pl-title input:hover { background:rgba(255,255,255,.7); } .pl-title input:focus { background:#fff; border-color:var(--acc); outline:0; }
.pl-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; } .chip2 { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 11px; border-radius:99px; background:#fff; color:#555c75; box-shadow:var(--shadow); }
.chip2 .ic { width:14px; height:14px; } .chip2.ok { background:#dcfce7; color:#15803d; } .chip2.warn { background:#fff3d6; color:#9a6200; }
.pl-actions { display:flex; gap:8px; align-items:center; }
.pl-cols { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:20px; align-items:start; }
.seqwrap { background:rgba(255,255,255,.55); border-radius:22px; padding:16px; border:1px solid rgba(225,228,240,.9); min-height:320px; }
.seq-head { font-weight:800; margin:2px 4px 12px; } .seq-head small { font-weight:500; color:var(--mut); margin-left:6px; }
.seqlist { position:relative; display:flex; flex-direction:column; gap:10px; min-height:200px; }
.seq-empty { border:2px dashed #cfc9f5; border-radius:18px; padding:50px 20px; text-align:center; color:var(--mut); display:flex; flex-direction:column; align-items:center; gap:6px; background:rgba(255,255,255,.6); } .seq-empty .ic { width:34px; height:34px; color:#a99bf5; } .seq-empty b { color:var(--txt); font-size:16px; }
.seq { position:relative; display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:#fff; border-radius:16px; padding:10px 12px; box-shadow:var(--shadow); border:1px solid rgba(225,228,240,.9); transition:box-shadow .15s, transform .15s; }
.seq:hover { box-shadow:var(--shadow-lg); } .seq.drag { opacity:.35; } .seq.added { animation:pop .5s; }
@keyframes pop { 0% { transform:scale(.96); background:#efecff; } 100% { transform:none; } }
.seq.ins-before::before, .seqlist.ins-end::after { content:""; position:absolute; left:0; right:0; height:4px; border-radius:4px; background:var(--acc); box-shadow:0 0 0 3px #e6e3ff; z-index:4; }
.seq.ins-before::before { top:-8px; } .seqlist.ins-end::after { bottom:-8px; }
.seq-grip { color:#b7bccf; cursor:grab; display:grid; place-items:center; } .seq-grip:hover { color:var(--acc); }
.seq-n { width:26px; height:26px; border-radius:50%; background:#f1f2f9; color:#6b7390; font-size:12px; font-weight:800; display:grid; place-items:center; flex:none; }
.seq-th { width:120px; aspect-ratio:16/9; position:relative; border-radius:10px; overflow:hidden; background:#e9ebf3; flex:none; }
.seq-info { flex:1; min-width:140px; display:flex; flex-direction:column; gap:2px; } .seq-info b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seq-info span { display:flex; align-items:center; gap:5px; color:var(--mut); font-size:12px; } .seq-info span .ic { width:13px; height:13px; }
.sch-chip { font-style:normal; display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:#9a6200; background:#fff3d6; padding:2px 8px; border-radius:99px; width:max-content; } .sch-chip .ic { width:12px; height:12px; }
.dstep { display:flex; align-items:center; background:#f1f2f9; border-radius:12px; padding:3px; } .dstep button { width:28px; height:28px; border:0; border-radius:9px; background:#fff; cursor:pointer; font-weight:800; color:#555c75; box-shadow:0 1px 2px rgba(0,0,0,.08); } .dstep button:hover { color:var(--acc); }
.dstep input { width:42px; border:0; background:transparent; text-align:center; font-weight:700; padding:4px 0; outline:0 !important; -moz-appearance:textfield; } .dstep i { font-style:normal; color:var(--mut); font-size:12px; margin-right:6px; }
.dpill.fixed { font-size:12px; font-weight:700; background:#f1f2f9; color:#6b7390; padding:8px 12px; border-radius:12px; }
.mini { display:flex; align-items:center; gap:6px; margin:0; background:#f1f2f9; border-radius:12px; padding:3px 10px; color:#6b7390; } .mini input { width:38px; border:0; background:transparent; font-weight:700; padding:4px 0; text-align:center; outline:0 !important; }
.seq-act { display:flex; gap:4px; }
.seq-sch { flex-basis:100%; display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:#fffaf0; border:1px solid #fde4a1; border-radius:12px; padding:8px 12px; font-size:13px; color:#8a5a00; margin-left:38px; }
.seq-sch input { width:auto; padding:5px 8px; } .seq-sch small { color:#b08430; margin-left:auto; }

/* biblioteca lateral */
.libp { position:sticky; top:24px; background:#fff; border-radius:22px; box-shadow:var(--shadow); padding:14px; border:1px solid rgba(225,228,240,.9); max-height:calc(100vh - 48px); display:flex; flex-direction:column; }
.libp-tabs { display:flex; background:#f1f2f9; border-radius:13px; padding:4px; margin-bottom:12px; } .libp-tabs button { flex:1; border:0; background:transparent; padding:8px; border-radius:10px; cursor:pointer; font:inherit; font-weight:700; color:#6b7390; } .libp-tabs button.on { background:#fff; color:var(--acc); box-shadow:0 2px 8px rgba(0,0,0,.08); }
#libBody { overflow:auto; padding:2px; margin:-2px; }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .tiles.one { grid-template-columns:1fr; }
.tile { cursor:grab; border-radius:14px; background:#f7f8fc; border:2px solid transparent; transition:.15s; overflow:hidden; } .tile:hover { border-color:var(--acc); transform:translateY(-2px); box-shadow:var(--shadow); }
.tile .tth { position:relative; aspect-ratio:16/9; background:#e9ebf3; display:flex; align-items:center; justify-content:center; overflow:hidden; } .tile .tth img, .tile .tth video { width:100%; height:100%; object-fit:cover; }
.tile > span { display:block; padding:6px 9px; font-size:11.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tplus { position:absolute; right:7px; bottom:7px; width:26px; height:26px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; opacity:0; transform:scale(.7); transition:.15s; } .tplus .ic { width:15px; height:15px; stroke-width:3; } .tile:hover .tplus { opacity:1; transform:none; }
.tile.ig { display:flex; align-items:center; gap:12px; padding:10px 12px; position:relative; } .tile.ig .tplus.static { position:static; margin-left:auto; opacity:1; transform:none; flex:none; }
.tile.ig b { display:block; } .tile.ig small { color:var(--mut); }
.igav.sm { width:42px; height:42px; font-size:17px; flex:none; color:#fff; }

@media (max-width:1180px) { .pl-cols { grid-template-columns:1fr; } .libp { position:static; max-height:none; } }
@media (max-width:860px) { .pl-layout { grid-template-columns:1fr; } .rail { position:static; flex-direction:row; max-height:none; overflow-x:auto; } .plc { min-width:240px; } }

/* ajustes de largura da linha do tempo */
main { max-width:1440px; }
.pl-layout { grid-template-columns:250px minmax(0,1fr); gap:22px; }
.pl-cols { grid-template-columns:minmax(0,1fr) 300px; }
.seq { gap:10px; } .seq-th { width:104px; } .seq-info { min-width:120px; }
.dstep input { width:36px; }