:root { --bg:#f4f5fa; --panel:#fff; --line:#e3e6ef; --txt:#1d2130; --mut:#7b8196; --acc:#6c5ce7; --acc2:#efecff; --ok:#16a34a; --bad:#dc2626; --warn:#f59e0b; --r:14px; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--txt); font:14px/1.45 Inter,system-ui,"Segoe UI",Roboto,sans-serif; }
.hidden { display:none !important; }
a { color:var(--acc); cursor:pointer; text-decoration:none; }
h2 { margin:0; font-size:26px; letter-spacing:-.02em; } h3 { margin:0 0 10px; font-size:16px; }
.sub { color:var(--mut); margin:4px 0 22px; max-width:720px; }
.muted { color:var(--mut); } small { color:var(--mut); }

/* layout */
#app { display:flex; min-height:100vh; }
aside.nav { width:230px; background:var(--panel); border-right:1px solid var(--line); padding:20px 14px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; flex:none; }
.brand { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:800; padding:0 8px 22px; letter-spacing:-.02em; }
.brand i { width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#6c5ce7,#a29bfe); display:grid; place-items:center; font-style:normal; color:#fff; }
nav a { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:11px; color:#444b63; margin-bottom:3px; font-weight:500; }
nav a span { width:22px; text-align:center; font-size:17px; }
nav a:hover { background:#f4f5fb; } nav a.on { background:var(--acc2); color:var(--acc); font-weight:700; }
.logout { margin-top:auto; padding:10px 12px; color:var(--mut); }
main { flex:1; padding:34px 40px 60px; max-width:1240px; min-width:0; }
.head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }

/* controles */
.btn { display:inline-flex; align-items:center; gap:7px; background:#fff; color:var(--txt); border:1px solid var(--line); padding:9px 15px; border-radius:11px; cursor:pointer; font:inherit; font-weight:600; transition:.15s; }
.btn:hover { border-color:#c9cde0; background:#fafbff; } .btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.primary { background:var(--acc); border-color:var(--acc); color:#fff; box-shadow:0 4px 14px rgba(108,92,231,.3); } .btn.primary:hover { background:#5b4bd6; }
.btn.danger { color:var(--bad); } .btn.sm { padding:5px 10px; font-size:12px; border-radius:9px; } .btn.big { padding:13px 22px; font-size:15px; }
input, select, textarea { background:#fff; color:var(--txt); border:1px solid var(--line); border-radius:10px; padding:9px 11px; font:inherit; width:100%; }
input:focus, select:focus, textarea:focus { outline:2px solid #cfc8ff; border-color:var(--acc); }
input[type=color] { padding:2px; height:36px; cursor:pointer; } input[type=checkbox], input[type=range] { width:auto; }
label { display:block; margin:12px 0 5px; color:var(--mut); font-size:12px; font-weight:600; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .row > * { flex:1; min-width:120px; } .row > .btn { flex:none; }
.chips { display:flex; gap:6px; flex-wrap:wrap; } .chip { padding:7px 14px; border-radius:99px; border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:600; color:#555c75; } .chip.on { background:var(--acc); border-color:var(--acc); color:#fff; }
.tag { display:inline-block; font-size:11px; padding:3px 9px; border-radius:99px; background:#eef0f7; color:#5b6280; font-weight:600; } .tag.ok { background:#dcfce7; color:#15803d; } .tag.off { background:#fee2e2; color:#b91c1c; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:#c7cad6; margin-right:8px; } .dot.on { background:var(--ok); box-shadow:0 0 0 4px #dcfce7; }
.empty { padding:50px 20px; text-align:center; color:var(--mut); background:var(--panel); border:2px dashed var(--line); border-radius:var(--r); }
.empty b { color:var(--txt); font-size:16px; display:block; margin-bottom:6px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:20px; }
.warn { background:#fff8e6; border:1px solid #fde4a1; color:#8a5a00; padding:12px 16px; border-radius:12px; margin-bottom:18px; }

/* home */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-bottom:24px; }
.step { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px; display:flex; flex-direction:column; gap:6px; }
.step .n { width:30px; height:30px; border-radius:50%; background:var(--acc2); color:var(--acc); font-weight:800; display:grid; place-items:center; }
.step.done .n { background:var(--ok); color:#fff; } .step b { font-size:15px; } .step p { margin:0 0 8px; color:var(--mut); font-size:13px; flex:1; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; } .stat b { display:block; font-size:30px; letter-spacing:-.03em; } .stat span { color:var(--mut); }

/* TVs */
.tvgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px; }
.tv { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px; display:flex; flex-direction:column; gap:12px; }
.tv .top { display:flex; align-items:center; justify-content:space-between; } .tv .nm { font-size:17px; font-weight:700; display:flex; align-items:center; }
.tv .now { background:#f6f7fb; border-radius:10px; padding:9px 12px; color:#555c75; font-size:13px; }
.tv .ctl { display:flex; gap:6px; flex-wrap:wrap; } .tv .ctl .btn { flex:1; justify-content:center; }
.tv label { margin:0 0 4px; }

/* conteúdo */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:.15s; position:relative; }
.card:hover { box-shadow:0 8px 28px rgba(40,40,90,.1); transform:translateY(-2px); }
.thumb { aspect-ratio:16/9; background:#e9ebf3; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:34px; cursor:pointer; }
.thumb img, .thumb video { width:100%; height:100%; object-fit:cover; }
.card .meta { padding:11px 13px; } .card .meta b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card .acts { display:flex; gap:5px; margin-top:9px; }
.badge { position:absolute; top:8px; left:8px; background:rgba(20,20,40,.75); color:#fff; font-size:11px; padding:2px 8px; border-radius:99px; font-weight:600; z-index:3; }
.drop { border:2px dashed #cfd3e3; border-radius:var(--r); padding:22px; text-align:center; color:var(--mut); margin-bottom:18px; background:#fbfbfe; }
.drop.over { border-color:var(--acc); background:var(--acc2); color:var(--acc); }
.tplgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px; }
.tpl { border:2px solid var(--line); border-radius:12px; overflow:hidden; cursor:pointer; background:#fff; } .tpl:hover, .tpl.on { border-color:var(--acc); }
.tpl .pv { aspect-ratio:16/9; position:relative; } .tpl span { display:block; padding:7px 10px; font-weight:600; font-size:13px; }
.seg { display:flex; border:1px solid var(--line); border-radius:11px; overflow:hidden; } .seg button { flex:1; padding:9px; border:0; background:#fff; cursor:pointer; font:inherit; font-weight:600; border-right:1px solid var(--line); color:#555c75; } .seg button:last-child { border:0; } .seg button.on { background:var(--acc); color:#fff; }

/* playlists */
.split { display:grid; grid-template-columns:240px minmax(0,1fr); gap:22px; align-items:start; }
.split > * { min-width:0; }
.list { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.list a { display:block; padding:13px 16px; color:var(--txt); border-bottom:1px solid var(--line); font-weight:600; } .list a:last-child { border:0; } .list a.on { background:var(--acc2); color:var(--acc); } .list a small { display:block; font-weight:400; }
.plhead { display:flex; gap:10px; align-items:center; margin-bottom:6px; } .plhead input { font-size:18px; font-weight:700; border-color:transparent; padding-left:0; background:transparent; } .plhead input:hover, .plhead input:focus { border-color:var(--line); padding-left:11px; background:#fff; }
.pitem { display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px; background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:10px 12px; margin-bottom:10px; cursor:grab; }
.pitem.drag { opacity:.4; } .pitem.over { border-color:var(--acc); box-shadow:0 0 0 3px var(--acc2); }
.pitem .grip { color:#b5bace; font-size:18px; letter-spacing:-3px; } .pitem .pth { width:104px; aspect-ratio:16/9; border-radius:8px; overflow:hidden; position:relative; background:#e9ebf3; flex:none; display:flex; align-items:center; justify-content:center; font-size:22px; }
.pth img, .pth video { width:100%; height:100%; object-fit:cover; } .pitem .nm { flex:1; min-width:0; } .pitem .nm b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.step-n { display:flex; align-items:center; gap:4px; } .step-n input { width:62px; text-align:center; padding:6px; } .step-n .btn { padding:4px 9px; }
.pitem .sch { display:flex; gap:6px; align-items:center; font-size:12px; color:var(--mut); } .pitem .sch { flex-wrap:wrap; } .pitem .sch input { padding:4px 6px; width:128px; font-size:12px; }
.addbar { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.savebar { position:sticky; top:0; z-index:5; display:flex; gap:10px; align-items:center; background:var(--bg); padding:6px 0 14px; }
.libgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; max-height:55vh; overflow:auto; padding:2px; }
.libgrid .it { border:2px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer; background:#fff; } .libgrid .it:hover { border-color:var(--acc); }
.libgrid .it .th { aspect-ratio:16/9; position:relative; background:#e9ebf3; display:flex; align-items:center; justify-content:center; } .libgrid .it .th img, .libgrid .it .th video { width:100%; height:100%; object-fit:cover; }
.libgrid .it span { display:block; font-size:11px; padding:4px 7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tabs { display:flex; gap:6px; margin-bottom:14px; }

/* instagram */
.igcards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.igcard { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px; display:flex; flex-direction:column; gap:12px; }
.igav { width:54px; height:54px; border-radius:50%; background:linear-gradient(45deg,#f09433,#dc2743,#bc1888); display:grid; place-items:center; color:#fff; font-weight:800; font-size:22px; overflow:hidden; flex:none; } .igav img { width:100%; height:100%; object-fit:cover; }
.igcard .who { display:flex; gap:12px; align-items:center; } .igcard .who b { font-size:16px; display:block; }
.code { font:600 13px ui-monospace,monospace; background:#f4f5fb; padding:9px 11px; border-radius:10px; word-break:break-all; border:1px solid var(--line); }
.igprev { aspect-ratio:16/9; border-radius:12px; overflow:hidden; position:relative; border:1px solid var(--line); margin-bottom:6px; }
.sw { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .sw button { width:30px; height:30px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #d6d9e6; cursor:pointer; }
table { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
th, td { text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); } th { color:var(--mut); font-size:12px; text-transform:uppercase; letter-spacing:.05em; } tr:last-child td { border:0; } td .btn { margin-right:4px; }

#login { display:grid; place-items:center; min-height:100vh; background:linear-gradient(135deg,#eef0ff,#f9f1ff); }
.login-box { width:340px; background:#fff; border:1px solid var(--line); padding:32px; border-radius:20px; display:grid; gap:12px; box-shadow:0 20px 60px rgba(60,40,140,.12); }
.login-box .brand { justify-content:center; padding:0 0 8px; font-size:22px; } .err { color:var(--bad); min-height:18px; }

dialog { background:#fff; color:var(--txt); border:1px solid var(--line); border-radius:18px; padding:24px; width:min(560px,94vw); box-shadow:0 30px 90px rgba(20,20,60,.25); max-height:92vh; overflow:auto; }
dialog::backdrop { background:rgba(20,22,40,.5); }
dialog.wide { width:min(900px,96vw); }
.actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#1d2130; color:#fff; padding:12px 20px; border-radius:12px; opacity:0; transition:opacity .25s; pointer-events:none; z-index:99; font-weight:500; }
#toast.show { opacity:1; } #toast.bad { background:#b91c1c; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.sbs { display:grid; grid-template-columns:260px 1fr; gap:22px; }

@media (max-width:860px) {
  #app { flex-direction:column; } aside.nav { width:auto; height:auto; position:static; flex-direction:row; flex-wrap:wrap; align-items:center; padding:10px; }
  .brand { padding:0 10px 0 0; } nav { display:flex; flex-wrap:wrap; } nav a { padding:8px 10px; } .logout { margin:0 0 0 auto; }
  main { padding:20px 16px 50px; } .split, .two, .sbs { grid-template-columns:1fr; } table { display:block; overflow-x:auto; }
}