:root {
  color-scheme: dark;
  --bg: #061210;
  --bg2: #0b1f1c;
  --card: rgba(11, 31, 28, 0.6);
  --card2: #0f2926;
  --line: #17342f;
  --line2: #20463f;
  --ink: #f5f7f6;
  --ink2: #a4b8b4;
  --ink3: #6f8a85;
  --pink: #01e5c4;
  --on-primary: #03231f;
  --pink2: #00b89c;
  --pink-soft: rgba(1, 229, 196, 0.16);
  --pink-ink: #01e5c4;
  --sel: rgba(1, 229, 196, 0.1);
  --vice-grad: linear-gradient(135deg, #01e5c4, #00b89c);
  --vice-grad-hover: linear-gradient(135deg, #2cf0d3, #01c9ad);
  --vice-glow: 0 2px 14px rgba(1, 229, 196, 0.28);
  --ok: #3ccf91;
  --ok-soft: rgba(60, 207, 145, 0.14);
  --warn: #f2c14e;
  --warn-soft: rgba(242, 193, 78, 0.14);
  --bad: #ff7a8f;
  --bad-soft: rgba(255, 122, 143, 0.14);
  --radius: 16px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.22);
  --track: #12302b;
  --sk-base: rgba(255, 255, 255, .06); --sk-shine: rgba(255, 255, 255, .09);
  /* vidro (sidebar): valores do tema escuro */
  --g-side-bg: linear-gradient(165deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .035) 42%, rgba(255, 255, 255, .06) 100%);
  --g-border: rgba(1, 229, 196, .16);
  --g-inset: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(255, 255, 255, .05), inset 1px 0 0 rgba(255, 255, 255, .06);
  --g-drop: 0 24px 60px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .25);
  --g-drop-open: 0 30px 80px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .25);
  --g-ring: linear-gradient(150deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 68%, rgba(1, 229, 196, .38));
  --g-shine: radial-gradient(300px 140px at 18% 0%, rgba(255, 255, 255, .16), transparent 70%), radial-gradient(240px 200px at 100% 100%, rgba(0, 184, 156, .14), transparent 70%);
  --g-field-bg: rgba(8, 6, 14, .34); --g-field-border: rgba(255, 255, 255, .08); --g-field-shadow: inset 0 2px 8px rgba(0, 0, 0, .28);
  --g-hover: rgba(255, 255, 255, .075);
  --g-active-bg: linear-gradient(90deg, rgba(1, 229, 196, .24), rgba(0, 184, 156, .08) 70%, rgba(255, 255, 255, .03));
  --g-active-border: rgba(255, 255, 255, .09);
  --g-active-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 20px rgba(1, 229, 196, .10);
  --g-foot-bg: rgba(255, 255, 255, .045); --g-foot-border: rgba(255, 255, 255, .09); --g-foot-inset: inset 0 1px 0 rgba(255, 255, 255, .12);
  --g-chev-bg: rgba(11, 31, 28, .6); --g-chev-border: rgba(255, 255, 255, .22); --g-chev-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .2);
  --g-sep: rgba(255, 255, 255, .12);
  --g-solid: rgba(9, 27, 24, .94);
  --blobs:
    radial-gradient(620px 520px at 9% 8%, rgba(32, 214, 182, .38), transparent 70%),
    radial-gradient(700px 560px at 20% 55%, rgba(22, 170, 150, .32), transparent 70%),
    radial-gradient(760px 620px at 6% 100%, rgba(12, 120, 138, .44), transparent 70%),
    radial-gradient(520px 420px at 92% 6%, rgba(12, 120, 138, .14), transparent 70%);
  /* chave de tema (neumórfica) */
  --nm-bg: #1b1e2b; --nm-hi: rgba(255, 255, 255, .07); --nm-lo: rgba(0, 0, 0, .55); --nm-knob: #222637; --nm-hole: #0b0d14; --nm-man: #f3f0fa;
  font-family: 'Sora', 'Space Grotesk', system-ui, sans-serif;
  color: var(--ink);
}

/* ---- Tema claro: mesma identidade (degradê Vice, rosa, Sora, vidro), sobre base lavanda ---- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e4f4f1; --bg2: #d8eeea; --card: #ffffff; --card2: #f1faf8;
  --line: #cfe6e1; --line2: #b7d6cf;
  --ink: #0e2420; --ink2: #3d5b55; --ink3: #6c8a84;
  --pink: #00b89c; --pink2: #009d86; --pink-soft: rgba(0, 184, 156, .12); --pink-ink: #007a68;
  --sel: #dff5f1;
  --vice-glow: 0 4px 16px rgba(0, 184, 156, .30);
  --ok: #138a5c; --ok-soft: rgba(19, 138, 92, .12);
  --warn: #9a6200; --warn-soft: rgba(214, 150, 20, .16);
  --bad: #d02c4b; --bad-soft: rgba(208, 44, 75, .10);
  --shadow: 0 1px 2px rgba(10, 60, 52, .06), 0 10px 28px rgba(10, 60, 52, .09);
  --track: #e4e0f0;
  --sk-base: rgba(20, 100, 90, .10); --sk-shine: rgba(255, 255, 255, .85);
  --g-side-bg: linear-gradient(165deg, rgba(255, 255, 255, .74) 0%, rgba(255, 255, 255, .46) 45%, rgba(255, 255, 255, .62) 100%);
  --g-border: rgba(255, 255, 255, .85);
  --g-inset: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(20, 110, 98, .10), inset 1px 0 0 rgba(255, 255, 255, .6);
  --g-drop: 0 24px 60px rgba(10, 70, 62, .20), 0 2px 8px rgba(10, 70, 62, .10);
  --g-drop-open: 0 30px 80px rgba(10, 70, 62, .28), 0 2px 8px rgba(10, 70, 62, .12);
  --g-ring: linear-gradient(150deg, #fff, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 68%, rgba(1, 229, 196, .35));
  --g-shine: radial-gradient(300px 140px at 18% 0%, rgba(255, 255, 255, .9), transparent 70%), radial-gradient(240px 200px at 100% 100%, rgba(0, 184, 156, .10), transparent 70%);
  --g-field-bg: rgba(255, 255, 255, .68); --g-field-border: rgba(20, 110, 98, .16); --g-field-shadow: inset 0 2px 6px rgba(15, 90, 80, .10);
  --g-hover: rgba(20, 110, 98, .08);
  --g-active-bg: linear-gradient(90deg, rgba(1, 229, 196, .16), rgba(0, 184, 156, .07) 70%, rgba(255, 255, 255, .4));
  --g-active-border: rgba(1, 229, 196, .20);
  --g-active-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 20px rgba(1, 229, 196, .12);
  --g-foot-bg: rgba(255, 255, 255, .62); --g-foot-border: rgba(20, 110, 98, .14); --g-foot-inset: inset 0 1px 0 rgba(255, 255, 255, .9);
  --g-chev-bg: rgba(255, 255, 255, .85); --g-chev-border: rgba(20, 110, 98, .25); --g-chev-shadow: 0 6px 18px rgba(10, 70, 62, .22), inset 0 1px 0 #fff;
  --g-sep: rgba(20, 110, 98, .18);
  --g-solid: rgba(255, 255, 255, .96);
  --blobs:
    radial-gradient(620px 520px at 9% 8%, rgba(32, 214, 182, .30), transparent 70%),
    radial-gradient(700px 560px at 20% 55%, rgba(22, 170, 150, .22), transparent 70%),
    radial-gradient(760px 620px at 6% 100%, rgba(12, 120, 138, .28), transparent 70%),
    radial-gradient(520px 420px at 92% 6%, rgba(12, 120, 138, .10), transparent 70%);
  --nm-bg: #eceaf6; --nm-hi: rgba(255, 255, 255, .95); --nm-lo: rgba(120, 100, 170, .30); --nm-knob: #f4f2fb; --nm-hole: #cfcae3; --nm-man: #2a2540;
}
/* troca de tema suave (a classe só existe durante a animação) */
html.theming, html.theming *, html.theming *::before, html.theming *::after { transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease, fill .45s ease, stroke .45s ease !important; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body { font-size: 14px; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; padding: 18px 12px 14px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); background: var(--card); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; padding: 4px 10px 16px; }
.brand b { width: 26px; height: 26px; border-radius: 8px; background: var(--vice-grad); display: block; flex: none; }
#nav { display: flex; flex-direction: column; gap: 2px; }
#nav .grp { color: var(--ink3); font-size: 12px; padding: 16px 10px 5px; }
#nav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--ink2); font-weight: 500; font-size: 13.5px; }
#nav a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#nav a:hover { background: var(--card2); color: var(--ink); }
#nav a.active { background: var(--card2); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--pink); }
#nav a.active svg { color: var(--pink); }
.side-foot { margin-top: auto; font-size: 12px; color: var(--ink3); padding: 10px; border-top: 1px solid var(--line); }
main { padding: 24px 28px 80px; min-width: 0; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; }
.card + .card { margin-top: 16px; }
.head { display: flex; align-items: center; gap: 16px; }
.head .icon { width: 44px; height: 44px; border-radius: 12px; background: var(--vice-grad); color: var(--on-primary); display: grid; place-items: center; font-size: 20px; flex: none; }
.head h1 { font-size: 22px; margin: 0; }
.head p { margin: 0; color: var(--ink2); font-size: 13px; max-width: 640px; }
.head .right { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
h2 { font-size: 17px; margin: 0 0 4px; }
h3 { font-size: 15px; margin: 0 0 4px; }
.muted { color: var(--ink2); }
.small { font-size: 12px; }
.tiny { font-size: 11px; color: var(--ink3); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.spacer { flex: 1; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

.btn { border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 9px 16px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; }
.btn:hover { border-color: var(--line2); }
.btn.primary { background: var(--vice-grad); border-color: transparent; color: var(--on-primary); box-shadow: var(--vice-glow); transition: box-shadow .15s, filter .15s; }
.btn.primary:hover { background: var(--vice-grad-hover); box-shadow: 0 2px 6px rgba(0, 184, 156, 0.22); }
.btn.primary:disabled { box-shadow: none; }
.btn.soft { background: var(--pink-soft); border-color: transparent; color: var(--pink-ink); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.danger { color: var(--bad); }
.btn.sm { padding: 6px 11px; font-size: 12px; border-radius: 10px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.iconbtn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); display: inline-grid; place-items: center; cursor: pointer; }
.iconbtn.pink { background: var(--vice-grad); color: var(--on-primary); border-color: transparent; box-shadow: var(--vice-glow); }

.input, select.input, textarea.input { width: 100%; border: 1px solid var(--line); background: var(--card2); border-radius: 12px; padding: 10px 12px; outline: none; }
.input:focus { border-color: var(--pink); background: var(--card); box-shadow: 0 0 0 3px var(--pink-soft); }
textarea.input { resize: vertical; min-height: 72px; }
label.lbl { font-size: 13px; font-weight: 600; display: block; margin-bottom: 6px; }

.seg { display: inline-flex; padding: 4px; gap: 4px; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; }
.seg button { border: 0; background: transparent; border-radius: 10px; padding: 7px 12px; cursor: pointer; font-weight: 600; color: var(--ink2); font-size: 13px; }
.seg button.on { background: var(--vice-grad); color: var(--on-primary); }
.seg.outline button.on { background: var(--pink-soft); color: var(--pink-ink); outline: 1.5px solid var(--pink); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--bg2); color: var(--ink2); }
.chip.pink { background: var(--pink-soft); color: var(--pink-ink); }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.solid { background: var(--vice-grad); color: var(--on-primary); }

.toggle { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--line2); border: 0; cursor: pointer; flex: none; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.toggle.on { background: var(--vice-grad); }
.toggle.on::after { left: 21px; background: #fff; }

.slider { display: flex; flex-direction: column; gap: 6px; }
.slider .top { display: flex; justify-content: space-between; font-size: 13px; }
.slider .top b { font-weight: 500; color: var(--ink2); font-size: 12px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: var(--line); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--vice-grad); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--pink); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--vice-grad); border: 2px solid #fff; }

/* ViceScrap */
.result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-top: 16px; }
.post { position: relative; border-radius: 14px; overflow: hidden; background: #111; aspect-ratio: 9/14; cursor: pointer; border: 2px solid transparent; }
.post img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post.sel { border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-soft); }
.post .stats { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; background: linear-gradient(transparent, rgba(0,0,0,0.85)); color: #fff; font-size: 11px; display: flex; gap: 8px; flex-wrap: wrap; }
.post .check { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 8px; background: rgba(255,255,255,0.9); display: grid; place-items: center; font-weight: 700; color: var(--pink); }
.post.sel .check { background: var(--vice-grad); color: var(--on-primary); }
.post .badge { position: absolute; top: 8px; left: 8px; }

/* Templates */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 16px; }
.tcard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 10px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.tcard .thumb { position: relative; border-radius: 12px; overflow: hidden; background: #111; aspect-ratio: 9/16; }
.tcard .thumb canvas, .tcard .thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.tcard .thumb .st { position: absolute; top: 10px; left: 10px; }
.tcard .foot { display: flex; align-items: center; gap: 8px; padding: 0 4px 4px; }
.tcard .foot .name { font-weight: 700; }

.modal-back { position: fixed; inset: 0; background: rgba(15,16,20,0.45); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 50; padding: 20px; }
.modal { background: var(--card); border-radius: 22px; padding: 22px 24px; max-width: 920px; width: 100%; max-height: 92vh; overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,0.25); }
.modal.narrow { max-width: 520px; }
.modal h2 { margin-bottom: 14px; }
.choose { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.choose .opt { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.choose .opt canvas { width: 100%; aspect-ratio: 9/16; border-radius: 12px; display: block; }
.choose .opt .t { text-align: center; font-weight: 600; }

/* Wizard */
.wiz-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.steps { display: flex; gap: 4px; padding: 5px; background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; margin-left: auto; flex-wrap: wrap; }
.steps button { border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--ink2); font-size: 13px; }
.steps button.on { background: var(--vice-grad); color: var(--on-primary); }
.steps button:disabled { color: var(--ink3); cursor: default; }
.namebox { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; background: var(--card); }
.namebox input { border: 0; outline: none; background: transparent; font-weight: 600; width: 180px; }
.wiz { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; margin-top: 16px; align-items: start; }
.preview { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.preview canvas { width: 100%; max-width: 340px; aspect-ratio: 9/16; border-radius: 18px; background: #000; box-shadow: 0 12px 40px rgba(0,0,0,0.18); }
.zone-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg2); }
.zone-row .num { width: 28px; height: 28px; border-radius: 50%; background: var(--vice-grad); color: var(--on-primary); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.zone-row .handle { cursor: grab; color: var(--ink3); user-select: none; }
.zone-add { border: 1.5px dashed var(--line2); border-radius: 14px; padding: 12px; text-align: center; cursor: pointer; color: var(--ink2); background: transparent; width: 100%; }
.presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.preset { display: flex; gap: 12px; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px; cursor: pointer; background: var(--card); text-align: left; }
.preset.on { border-color: var(--ink); }
.preset .mini { width: 52px; height: 92px; border-radius: 8px; border: 1px solid var(--line); flex: none; display: flex; flex-direction: column; overflow: hidden; }
.preset .mini div { flex: 1; background: var(--vice-grad); border-top: 1px solid #fff; }
.preset .mini div.img { background: linear-gradient(160deg, #00b89c 0%, #00cdb0 60%, #01e5c4 100%); }
.preset .mini div.top { flex: 0 0 18px; background: var(--card); }
.preset h4 { margin: 0 0 4px; font-size: 13px; }
.preset p { margin: 0; font-size: 11.5px; color: var(--ink2); }
.phrase { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.phrase.added { background: var(--pink-soft); border-color: var(--pink); }
.phrase .txt { flex: 1; }
.media-list { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow: auto; padding-right: 4px; }
.media-list.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.media-item { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--card); }
.media-item.sel { border-color: var(--pink); background: var(--sel); }
.media-item img, .media-item .ph { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: #222; flex: none; }
.media-list.grid .media-item { flex-direction: column; align-items: stretch; }
.media-list.grid .media-item img { width: 100%; height: 120px; }
.trim { position: relative; height: 34px; border-radius: 8px; background: var(--card2); margin: 6px 0 2px; }
.trim .bar { position: absolute; top: 0; bottom: 0; background: var(--vice-grad); border-radius: 6px; }
.trim .h { position: absolute; top: -2px; bottom: -2px; width: 10px; background: var(--ink); border-radius: 4px; cursor: ew-resize; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sw { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; }
.sw.on { outline: 2px solid var(--pink); outline-offset: 2px; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.opt-tile { position: relative; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--line); cursor: pointer; background: var(--card); }
.opt-tile img { width: 100%; height: 76px; object-fit: cover; display: block; background: #222; }
.opt-tile .lb { padding: 6px 8px; font-size: 12px; font-weight: 600; }
.opt-tile .ck { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; font-size: 12px; }
.opt-tile.on { border-color: var(--ink); }
.opt-tile.on .ck { background: var(--pink); color: #fff; border-color: var(--pink); }
.checkline { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--card); }
.checkline.on { border-color: var(--ink); }
.cb { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--ink3); display: grid; place-items: center; font-size: 11px; flex: none; }
.checkline.on .cb { background: var(--pink); border-color: var(--pink); color: #fff; }

.progress { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.progress div { height: 100%; background: var(--vice-grad); width: 0; transition: width 0.4s; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-top: 16px; }
.rcard { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.rcard .media { aspect-ratio: 9/16; background: #121214; position: relative; display: grid; place-items: center; color: #b9bcc6; text-align: center; font-size: 12px; }
.rcard .media video, .rcard .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcard .cap { position: absolute; left: 10px; right: 10px; bottom: 10px; text-align: left; color: #fff; font-size: 11px; }
.rcard .actions { display: flex; gap: 8px; padding: 10px; }
.rcard .actions .btn { flex: 1; justify-content: center; }
.palm { font-size: 34px; color: var(--pink); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: 0.4; transform: scale(0.92); } }

table.list { width: 100%; border-collapse: collapse; }
table.list th { text-align: left; font-size: 12px; color: var(--ink3); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.list td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }

.integr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.integr .card { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.integr .card.dim { opacity: 0.55; }

.blocks { display: flex; flex-direction: column; gap: 10px; }
.block { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--card); display: grid; grid-template-columns: 32px 1fr; gap: 10px; }
.block .n { width: 28px; height: 28px; border-radius: 9px; background: var(--bg2); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.block textarea { min-height: 54px; }
.block .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.thumbs img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
pre.log { background: #111; color: var(--line2); border-radius: 12px; padding: 12px; max-height: 240px; overflow: auto; font-size: 11px; white-space: pre-wrap; }

#toasts { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast { background: var(--card2); border: 1px solid var(--line2); color: var(--ink); padding: 11px 14px; border-radius: 12px; max-width: 420px; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); white-space: pre-wrap; }
.toast.err { background: var(--bad); }
.toast.ok { background: var(--ok); }
.empty { text-align: center; padding: 40px 20px; color: var(--ink2); }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.lib-item { position: relative; border-radius: 12px; overflow: hidden; background: var(--card); border: 1.5px solid var(--line); cursor: pointer; }
.lib-item img, .lib-item .ph { width: 100%; height: 150px; object-fit: cover; display: block; background: #1b1c20; }
.lib-item .ph { display: grid; place-items: center; color: var(--ink3); font-size: 26px; }
.lib-item .info { padding: 6px 8px; font-size: 11px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-item.on { border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-soft); }
.lib-item .kind { position: absolute; top: 6px; left: 6px; }
.lib-item .del { position: absolute; top: 6px; right: 6px; }

@media (max-width: 1100px) {
  .wiz { grid-template-columns: 1fr; }
  .preview { position: static; }
  .presets, .choose, .integr, .grid3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; }
  .brand { padding: 0 8px 0 0; }
  #nav { flex-direction: row; align-items: center; }
  #nav .grp, .side-foot { display: none; }
  #nav a { white-space: nowrap; }
  .grid2, .presets, .choose, .integr, .grid3 { grid-template-columns: 1fr; }
}

/* login e status do PC */
body.logged-out .shell { display: none; }
.login { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: var(--bg); }
.pc { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink2); }
.pc .dot { width: 9px; height: 9px; border-radius: 50%; background: #c3c7cf; }
.pc.on { color: var(--ok); }
.pc.on .dot { background: #1fb565; box-shadow: 0 0 0 3px #d4f3e1; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice .opt2 { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--card); display: flex; flex-direction: column; gap: 8px; }
.choice .opt2 h4 { margin: 0; font-size: 13px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- editor de cortes 9:16 ---------- */
.clip-grid { display: flex; flex-direction: column; gap: 10px; }
.clip-card { display: flex; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 14px; }
.clip-card img, .clip-card .ph { width: 120px; height: 68px; object-fit: cover; border-radius: 10px; background: #111; display: grid; place-items: center; color: #fff; }
.clip-editor { display: flex; flex-direction: column; gap: 14px; }
.stage { display: flex; gap: 14px; background: #121216; border-radius: var(--radius); padding: 14px; align-items: flex-start; }
.stage-src { flex: 1; min-width: 0; }
.src-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; user-select: none; }
.src-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; }
.crop-overlay { position: absolute; inset: 0; }
.cbox { position: absolute; border: 2px solid #ff4fa3; box-shadow: 0 0 0 9999px rgba(0,0,0,.28); cursor: move; touch-action: none; }
.cbox.bottom { border-color: #8b6cff; }
.cbox + .cbox { box-shadow: none; }
.cbox-lbl { position: absolute; top: -2px; left: -2px; transform: translateY(-100%); background: #ff4fa3; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px 6px 6px 0; }
.cbox.bottom .cbox-lbl { background: #8b6cff; top: auto; bottom: -2px; transform: translateY(100%); border-radius: 0 6px 6px 6px; }
.hdl { position: absolute; width: 12px; height: 12px; background: var(--card); border: 2px solid #ff4fa3; border-radius: 50%; }
.cbox.bottom .hdl { border-color: #8b6cff; }
.hdl.nw { left: -7px; top: -7px; cursor: nwse-resize; } .hdl.ne { right: -7px; top: -7px; cursor: nesw-resize; }
.hdl.sw { left: -7px; bottom: -7px; cursor: nesw-resize; } .hdl.se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.fit-hint, .removed-hint { position: absolute; left: 12px; bottom: 12px; right: 12px; color: #fff; background: rgba(0,0,0,.55); padding: 8px 10px; border-radius: 10px; font-size: 12px; }
.removed-hint { top: 12px; bottom: auto; background: rgba(179,38,59,.85); }
.stage-prev { width: 230px; flex: none; color: var(--ink2); }
.preview916 { width: 100%; aspect-ratio: 9 / 16; border-radius: 12px; background: #000; display: block; margin-bottom: 6px; }
.tl-card .row { gap: 12px; }
.play-btn { width: 38px; height: 38px; border-radius: 12px; border: 0; background: var(--vice-grad); color: var(--on-primary); font-size: 14px; cursor: pointer; flex: none; }
.scrub { flex: 1; accent-color: var(--pink); }
.time { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 92px; text-align: right; }
kbd { background: var(--bg2); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; font-size: 11px; font-family: inherit; }
.tl-wrap { position: relative; }
.tl-track { position: relative; height: 54px; background: var(--bg2); border-radius: 12px; cursor: pointer; overflow: hidden; touch-action: none; }
.tl-seg { position: absolute; top: 4px; bottom: 4px; background: #9b7bff; border-radius: 9px; border: 2px solid transparent; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; overflow: hidden; white-space: nowrap; box-sizing: border-box; margin: 0 1px; }
.tl-seg.l-full { background: var(--vice-grad); } .tl-seg.l-fit { background: #3a9bd6; }
.tl-seg.sel { border-color: var(--ink); box-shadow: 0 0 0 2px #fff inset; }
.tl-seg.removed { background: repeating-linear-gradient(45deg, var(--line), var(--line) 6px, var(--line2) 6px, var(--line2) 12px); color: var(--ink3); }
.tl-head { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); pointer-events: none; transform: translateX(-1px); }
.tl-head::before { content: ''; position: absolute; top: -5px; left: -5px; width: 12px; height: 12px; background: var(--ink); border-radius: 3px; transform: rotate(45deg); }
.render-box { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.render-box .bar { height: 6px; background: var(--bg2); border-radius: 6px; overflow: hidden; }
.render-box .bar i { display: block; height: 100%; background: var(--vice-grad); }
@media (max-width: 900px) { .stage { flex-direction: column; } .stage-prev { width: 200px; align-self: center; } }

.engine-opt { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; }
.engine-opt:hover { border-color: var(--pink); }
.engine-opt.last { border-color: var(--pink); background: var(--pink-soft); }
.engine-opt.off { opacity: .55; cursor: not-allowed; }

/* ViceScrap: entrada gradual e prévia ao passar o mouse */
.post.enter { animation: postIn .4s ease both; }
@keyframes postIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.post video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.post .badge, .post .check, .post .stats { z-index: 1; }

/* Degradê Vice City onde antes era só rosa */
.media-item.sel { border-color: transparent; background: linear-gradient(var(--sel), var(--sel)) padding-box, var(--vice-grad) border-box; }
.lib-item.on { border-color: transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--vice-grad) border-box; }
.engine-opt.last { border-color: transparent; background: linear-gradient(var(--pink-soft), var(--pink-soft)) padding-box, var(--vice-grad) border-box; }
.post.sel { border-color: transparent; background: linear-gradient(#111, #111) padding-box, var(--vice-grad) border-box; }
.zone-row .num, .play-btn { box-shadow: none; }

/* Editor de cortes: palco com dois monitores da mesma altura, centralizados */
.clip-editor { --mon-h: min(54vh, 540px); }
.clip-editor .stage { justify-content: center; align-items: flex-start; gap: 36px; padding: 20px 24px 14px; }
.clip-editor .stage-src { flex: 0 0 auto; min-width: 0; }
.clip-editor .stage-prev { width: calc(var(--mon-h) * 9 / 16); flex: none; }
.clip-editor .preview916 { margin-bottom: 0; }
.mon-cap { margin-top: 8px; font-size: 12px; color: var(--ink3); }
.mon-cap b { color: var(--ink); font-weight: 600; }
.props-tabs { padding: 2px 2px 0; }
.props-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; align-items: start; }
@media (max-width: 900px) { .clip-editor { --mon-h: 46vh; } .clip-editor .stage { flex-direction: column; align-items: center; gap: 18px; } .props-grid { grid-template-columns: 1fr; } }

.src-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--bg2); }

.part-note { position: absolute; left: 10px; right: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(20,20,26,.78); color: #fff; font-size: 12px; cursor: pointer; border: 1.5px solid #ff4fa3; }
.part-note.top { top: 10px; } .part-note.bottom { bottom: 10px; border-color: #8b6cff; }
.aux-bar { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; color: var(--ink2); }

/* Camadas Topo / Base na timeline do editor de cortes */
.tl-lanes { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tl-lane { position: relative; height: 34px; background: var(--bg2); border-radius: 10px; overflow: hidden; }
.tl-lane .lane-tag { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 700; color: var(--ink3); pointer-events: none; }
.lane-blk { position: absolute; top: 3px; bottom: 3px; border-radius: 8px; display: flex; align-items: center; padding: 0 8px; font-size: 11px; font-weight: 600; color: #fff; cursor: ew-resize; overflow: hidden; white-space: nowrap; touch-action: none; user-select: none; border: 2px solid transparent; }
.lane-blk > span { overflow: hidden; text-overflow: ellipsis; }
.lane-blk.top { background: linear-gradient(135deg, #ff4fa3, #00cdb0); }
.lane-blk.bottom { background: linear-gradient(135deg, #8b6cff, #6c5ce7); }
.lane-blk.sync { opacity: .5; }
.lane-blk.off { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.lane-blk.sel { border-color: var(--ink); }
.lane-blk.nosplit { background: transparent; color: var(--ink3); border: 1px dashed var(--line); cursor: default; }
.lane-blk.removed { background: repeating-linear-gradient(45deg, var(--line), var(--line) 6px, var(--line2) 6px, var(--line2) 12px); color: var(--ink3); cursor: default; }
.src-card { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; }
.src-card:hover { border-color: var(--line2); }
.src-card.on { border-color: transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--vice-grad) border-box; }
.src-card b { display: block; margin-bottom: 2px; }

/* Editor multifaixa */
.clip-editor .stage-src2 { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.clip-editor .stage-src2 .stage-src { margin: 0 auto; }
.src-empty { color: var(--ink3); font-size: 13px; padding: 60px 20px; text-align: center; }
.src-bar { width: 100%; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; color: var(--ink2); }
.src-bar .mono { font-variant-numeric: tabular-nums; color: var(--ink); }
.sb-track { position: relative; height: 34px; background: var(--track); border-radius: 10px; cursor: pointer; touch-action: none; user-select: none; }
.sb-range { position: absolute; top: 3px; bottom: 3px; background: linear-gradient(135deg, #01e5c4, #00cdb0 55%, #00b89c); border-radius: 8px; opacity: .92; cursor: grab; }
.sb-h { position: absolute; top: 0; bottom: 0; width: 10px; margin-left: -5px; background: var(--card); border-radius: 5px; cursor: ew-resize; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
.sb-play { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--card); margin-left: -1px; pointer-events: none; }
.tl2 { display: flex; }
.tl2-heads { width: 92px; flex: none; }
.tl2-corner { height: 26px; }
.tl2-head-lane { height: 56px; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 8px; background: var(--bg2); border-radius: 10px; }
.tl2-head-lane.top b { color: #00cdb0; } .tl2-head-lane.bottom b { color: #6c5ce7; }
.spk { border: 0; background: transparent; font-size: 16px; cursor: pointer; opacity: .55; } .spk.on { opacity: 1; }
.tl2-scroll { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; }
.tl2-inner { position: relative; }
.tl2-ruler { position: relative; height: 26px; border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; }
.tl2-ruler .tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); font-size: 10px; color: var(--ink3); padding-left: 4px; padding-top: 7px; pointer-events: none; }
.tl2-lane { position: relative; height: 56px; margin-top: 6px; background: var(--bg2); border-radius: 10px; }
.tl2-head { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); pointer-events: none; z-index: 5; margin-left: -1px; }
.tl2-head::before { content: ''; position: absolute; top: -1px; left: -5px; width: 12px; height: 12px; background: var(--ink); border-radius: 3px; transform: rotate(45deg); }
.clip-blk { position: absolute; top: 4px; bottom: 4px; border-radius: 9px; color: #fff; overflow: hidden; cursor: grab; display: flex; flex-direction: column; justify-content: center; padding: 0 12px; border: 2px solid transparent; user-select: none; touch-action: none; }
.clip-blk.top { background: linear-gradient(135deg, #ff4fa3, #00cdb0); }
.clip-blk.bottom { background: linear-gradient(135deg, #8b6cff, #6c5ce7); }
.clip-blk.sel { border-color: var(--ink); box-shadow: 0 0 0 2px #fff inset; }
.clip-blk .lbl { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.clip-blk .sub { font-size: 10px; opacity: .85; pointer-events: none; }
.clip-blk .edge { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; background: rgba(255,255,255,.28); }
.clip-blk .edge.l { left: 0; } .clip-blk .edge.r { right: 0; }
@media (max-width: 900px) { .clip-editor .stage-src2 { width: 100%; } }

/* Monitor de origem: barra com miniaturas */
.sb-track { height: 58px !important; overflow: visible; }
.sb-strip { position: absolute; inset: 0; display: flex; border-radius: 10px; overflow: hidden; background: var(--track); }
.sb-strip img, .sb-strip .ph { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; display: block; background: #2a2f3d; }
.sb-range { pointer-events: none; background: rgba(232,80,127,.22) !important; border: 2px solid #ff7ab6; opacity: 1 !important; top: 0 !important; bottom: 0 !important; border-radius: 6px !important; }
.sb-h { top: -4px !important; bottom: -4px !important; width: 12px !important; margin-left: -6px !important; background: var(--card); }
.sb-play { top: -6px !important; bottom: -6px !important; width: 3px !important; background: var(--card); box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.src-hint { font-size: 12px; color: var(--ink3); }
.src-now { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); font-size: 13px; }
.src-cliplbl { font-size: 12px; color: var(--ink3); }

.clip-blk.hid { opacity: .6; background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.18) 0 8px, transparent 8px 16px), linear-gradient(135deg, #ff4fa3, #00cdb0); }
.clip-blk.bottom.hid { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.18) 0 8px, transparent 8px 16px), linear-gradient(135deg, #8b6cff, #6c5ce7); }

.pair-media { width: 62px; height: 92px; border-radius: 10px; border: 1.5px dashed var(--line2); background: var(--card); cursor: pointer; padding: 0; overflow: hidden; display: grid; place-items: center; color: var(--ink2); font-size: 11px; font-weight: 600; flex: none; }
.pair-media:hover { border-color: var(--pink); }
.pair-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Publicar: várias redes de uma vez */
.net-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.net-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); font-weight: 600; cursor: pointer; }
.net-chip .ck { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--ink3); display: grid; place-items: center; font-size: 11px; color: #fff; }
.net-chip.on { border-color: transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--vice-grad) border-box; }
.net-chip.on .ck { background: var(--vice-grad); border-color: transparent; }
.net-chip.off { opacity: .6; }
.net-box { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--bg2); }

.tl2-lane.off { opacity: .5; background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 8px, transparent 8px 16px); }
.tl2-head-lane.off { opacity: .55; }
.tl2-head-lane.off { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
.lane-off-note { position: absolute; right: 10px; top: 4px; z-index: 6; font-size: 10px; color: var(--ink2); background: rgba(24,21,33,.94); padding: 2px 8px; border-radius: 8px; pointer-events: none; }


.src-status { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 14px; color: #c9cbd3; font-size: 12px; background: rgba(0,0,0,.45); pointer-events: none; z-index: 2; }
.hdl.n { left: calc(50% - 6px); top: -7px; cursor: ns-resize; } .hdl.s { left: calc(50% - 6px); bottom: -7px; cursor: ns-resize; }
.hdl.e { right: -7px; top: calc(50% - 6px); cursor: ew-resize; } .hdl.w { left: -7px; top: calc(50% - 6px); cursor: ew-resize; }
.tl2-lane.gone, .tl2-head-lane.gone { display: none; }

/* Editor de cortes: layout de aplicativo (tudo cabe na tela, sem rolar a página) */
@media (min-width: 1100px) {
  .clip-editor { display: flex; flex-direction: column; gap: 10px; height: calc(100vh - 40px); margin-bottom: -64px; min-height: 520px; --mon-h: clamp(200px, calc(100vh - 520px), 640px); }
  .clip-editor > .card.row { flex: none; padding: 8px 14px; }
  .ed-main { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 12px; }
  .clip-editor .stage { min-height: 0; overflow: hidden; padding: 12px 16px; gap: 24px; }
  .ed-props { min-height: 0; overflow-y: auto; padding-right: 4px; }
  .ed-props .presets { grid-template-columns: 1fr 1fr; }
  .ed-props .props-grid { grid-template-columns: 1fr; }
  .clip-editor .tl-card { flex: none; max-height: 252px; overflow-y: auto; padding: 10px 14px; }
  .clip-editor .src-hint { display: none; }
}
.prev-wrap { position: relative; }
.prev-wrap .src-status { border-radius: 12px; }

/* áudios importados na timeline */
.tl2-lane.sound { background: var(--bg2); }
.tl2-head-lane.sound b { color: #1fa971; }
.tl2-lane.sound.gone, .tl2-head-lane.sound.gone { display: none; }
.clip-blk.sound { background: linear-gradient(135deg, #3ccf91, #1fa971); border-color: #178a5b; }
.clip-blk.sound.sel { box-shadow: 0 0 0 2px #0f6b47; }

/* Chat de ideias */
.ideias h1 { font-size: 22px; margin: 0; }
.id-steps { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0; }
.id-step { display: flex; gap: 8px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--ink2); cursor: pointer; }
.id-step:disabled { opacity: .5; cursor: default; }
.id-step .n { font-size: 11px; opacity: .8; }
.id-step.on { color: var(--ink); border: 1.5px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--vice-grad) border-box; }
.id-step.done .n::after { content: ' ✓'; color: var(--ok); }
.id-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .id-grid { grid-template-columns: 1fr; } }
.id-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card.id-panel + .card.id-panel { margin-top: 0; }
.id-panel h2 { margin: 0; font-size: 18px; }
.id-msg { max-width: 92%; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; }
.id-msg.me { align-self: flex-end; background: var(--bg2); border: 1px solid var(--line); }
.id-msg.ai { align-self: flex-start; background: var(--pink-soft); }
.id-msg small { display: block; font-size: 11px; color: var(--pink-ink); margin-bottom: 2px; }
.id-lbl { font-size: 12px; color: var(--ink3); text-transform: uppercase; letter-spacing: .06em; margin: 6px 0; }
.id-chip { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 7px 13px; font-size: 14px; cursor: pointer; }
.id-chip:hover { border-color: var(--ink3); }
.id-chip.on { border: 1.5px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--vice-grad) border-box; font-weight: 600; }
.id-brief { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.id-brief div { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: var(--bg2); }
.id-brief span { display: block; font-size: 11px; color: var(--ink3); text-transform: uppercase; letter-spacing: .05em; }
.id-brief b { font-size: 14px; }
.id-list { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--ink2); }
.id-list.warn { color: var(--warn); }
.id-idea { text-align: left; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--card); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.id-idea:hover { border-color: var(--ink3); }
.id-idea.on { border: 1.5px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--vice-grad) border-box; }
.id-idea span { font-size: 13px; color: var(--ink2); }
.id-idea em { font-style: normal; font-size: 12px; color: var(--ok); }
.id-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.id-tpl { text-align: left; border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 0; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; }
.id-tpl:hover { border-color: var(--ink3); }
.id-tpl.on { border: 1.5px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--vice-grad) border-box; }
.id-cover { aspect-ratio: 9 / 13; background: #14151a; position: relative; overflow: hidden; display: grid; place-items: center; }
.id-cover .bg { position: absolute; inset: 0; opacity: .85; }
.id-cover .t { position: relative; font-weight: 700; color: #fff; text-align: center; font-size: 13px; padding: 0 10px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.id-cover .dur { position: absolute; right: 8px; bottom: 8px; font-size: 10px; background: rgba(0,0,0,.55); color: #fff; padding: 2px 6px; border-radius: 6px; }
.id-tpl:hover .bg { animation: idpan 4s linear infinite; }
@keyframes idpan { from { background-position: 0 0; } to { background-position: 300px 0; } }
@media (prefers-reduced-motion: reduce) { .id-tpl:hover .bg { animation: none; } }
.id-meta { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 2px; }
.id-meta b { font-size: 14px; }
.id-meta span { font-size: 12px; color: var(--ink2); }
.id-why { border-radius: 12px; padding: 12px 14px; background: var(--pink-soft); display: flex; flex-direction: column; gap: 4px; }
.id-why p { margin: 0; font-size: 14px; }
.id-scene { display: grid; grid-template-columns: 30px 1fr 70px; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); }
.id-scene .k { font-size: 12px; color: var(--ink3); padding-top: 9px; }
.id-scene .sec { display: flex; align-items: center; gap: 4px; padding-top: 4px; }
.id-scene .sec input { width: 54px; }
.id-lock { background: var(--bg2); border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; font-size: 13px; color: var(--ink2); margin-top: 8px; }
.id-lock b { color: var(--ink); }
.id-phone-wrap { display: grid; place-items: center; padding: 6px 0; }
.id-phone { width: min(230px, 100%); aspect-ratio: 9 / 16; background: linear-gradient(160deg, #2b1740, #0e0f14 60%, #3d1d2c); border-radius: 22px; border: 6px solid var(--ink); position: relative; overflow: hidden; display: grid; place-items: center; }
.id-phone .cap { padding: 0 16px; text-align: center; color: #fff; font-weight: 700; font-size: 16px; line-height: 1.25; text-shadow: 0 2px 8px rgba(0,0,0,.7); text-wrap: balance; }
.id-phone .sc { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; justify-content: space-between; font-size: 10px; color: #cfd2dd; }

/* ===== Início (direção B com as cores da A) ===== */
.home { max-width: 1040px; margin: 0 auto; padding-top: 28px; display: flex; flex-direction: column; gap: 44px; }
.home-hero { max-width: 760px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.home-hero h1 { margin: 0; font-size: 38px; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.home-ask { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; }
.home-ask:focus-within { border-color: var(--line2); box-shadow: 0 0 0 3px var(--pink-soft), var(--shadow); }
textarea.input.home-ta { background: transparent; border: 0; padding: 2px; min-height: 76px; font-size: 15px; line-height: 1.5; box-shadow: none; }
textarea.input.home-ta:focus { background: transparent; box-shadow: none; }
.home-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--card2); color: var(--ink2); border-radius: 99px; padding: 7px 12px; font-size: 13px; font-weight: 500; text-decoration: none; }
.home-pill:hover { color: var(--ink); border-color: var(--line2); }
.ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.home-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; }
.home h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.home-list { display: flex; flex-direction: column; }
.home-item { display: flex; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.home-item:hover .home-go { color: var(--pink-ink); }
.home-item b { display: block; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.home-item small { color: var(--ink3); font-size: 12.5px; }
.home-thumb { width: 44px; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; flex: none; background: var(--card2); }
.home-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-go { color: var(--pink); font-weight: 600; font-size: 13px; white-space: nowrap; }
.home-when { width: 92px; flex: none; color: var(--ink2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.home-empty { border-top: 1px solid var(--line); padding: 16px 0; color: var(--ink3); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 900px) { .home-cols { grid-template-columns: 1fr; } .home-hero h1 { font-size: 28px; } .home { padding-top: 8px; } }

/* Botão excluir animado: a lixeira come o texto. Degradê da marca (--vice-grad). */
.btn.gulp { position: relative; overflow: hidden; background: var(--vice-grad); border-color: transparent; color: var(--on-primary); box-shadow: var(--vice-glow); gap: 10px; padding: 10px 20px 10px 16px; border-radius: 999px; transition: box-shadow .15s, transform .15s; }
.btn.gulp.sm { padding: 6px 14px 6px 11px; gap: 7px; }
.btn.gulp:hover { background: var(--vice-grad-hover); box-shadow: 0 2px 6px rgba(0, 184, 156, 0.22); }
.btn.gulp:active { transform: scale(.97); }
.btn.gulp:focus-visible { outline: 2px solid var(--pink-ink); outline-offset: 2px; }
.gulp-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.gulp-lid { transform-box: fill-box; transform-origin: 90% 100%; transition: transform .22s cubic-bezier(.3, 1.4, .5, 1); }
.btn.gulp:hover .gulp-lid, .btn.gulp[data-state="eat"] .gulp-lid { transform: rotate(-16deg) translateY(-1.5px); }
.gulp-ring { stroke-width: 2; stroke-dasharray: 0 100; opacity: 0; transform-origin: center; }
.gulp-label { display: inline-flex; }
.gulp-ch { display: inline-block; }
.btn.gulp[data-state="eat"] .gulp-ch { animation: gulp-fall .42s cubic-bezier(.5, 0, .9, .6) forwards; animation-delay: calc(var(--i) * 55ms); }
.btn.gulp[data-state="pending"] .gulp-ring { opacity: 1; stroke-dasharray: 30 70; animation: gulp-spin .8s linear infinite; }
.btn.gulp[data-state="pending"] .gulp-ch, .btn.gulp[data-state="eat"] .gulp-ch { pointer-events: none; }
.btn.gulp[data-state="pending"] .gulp-label { width: 0; overflow: hidden; }
.btn.gulp[data-state="done"] .gulp-ch { animation: gulp-in .3s ease both; animation-delay: calc(var(--i) * 20ms); }
@keyframes gulp-fall { to { transform: translate(calc(-1.3em * (var(--i) + 1)), -.15em) scale(.2); opacity: 0; } }
@keyframes gulp-in { from { transform: translateY(4px); opacity: 0; } }
@keyframes gulp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn.gulp .gulp-ch, .gulp-lid, .gulp-ring { animation: none !important; transition: none !important; }
  .btn.gulp[data-state="eat"] .gulp-ch { opacity: 0; }
}

/* ───────── Sites › Montar (siteBuilder.js) ───────── */
.mb { display: flex; flex-direction: column; gap: 16px; }
.mb h2, .mb h3 { margin: 0; }
.mb-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; }
.mb-head h2 { font-size: 20px; }

.mb-strip { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 16px; }
.mb-strip-title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.mb-tpls { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; }
.mb-tpl { flex: none; width: 200px; text-align: left; background: var(--card2); border: 1px solid var(--line); border-radius: 14px; padding: 8px 8px 10px; cursor: pointer; scroll-snap-align: start; transition: border-color .15s, transform .15s; }
.mb-tpl:hover { border-color: var(--line2); }
.mb-tpl.on { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink), var(--vice-glow); }
.mb-tpl:focus-visible, .mb-bmain:focus-visible, .mb-photo:focus-visible, .mb-mv:focus-visible, .mb-switch:focus-visible { outline: 2px solid var(--pink-ink); outline-offset: 2px; }
.mb-tthumb { position: relative; width: 100%; aspect-ratio: 8 / 5; overflow: hidden; border-radius: 9px; background: var(--bg2); }
.mb-tthumb iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 800px; border: 0; transform: scale(.1484); transform-origin: 0 0; pointer-events: none; background: #fff; }
.mb-tph { display: grid; place-items: center; height: 100%; font-size: 26px; font-weight: 700; color: var(--ink3); }
.mb-tname { margin-top: 8px; font-weight: 700; font-size: 13px; line-height: 1.25; }
.mb-tsub { color: var(--ink3); font-size: 11.5px; margin-top: 2px; }

.mb-work { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; align-items: start; }

/* esqueleto da página */
.mb-rail { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.mb-rail::before { content: ""; position: absolute; left: 33px; top: 22px; bottom: 54px; width: 2px; background: linear-gradient(var(--line2), var(--line)); border-radius: 2px; }
.mb-block { position: relative; display: flex; align-items: center; border: 1px solid transparent; border-radius: 12px; background: var(--card); transition: background .12s, border-color .12s; }
.mb-block:hover { background: var(--card2); }
.mb-block.sel { background: var(--sel); border-color: var(--pink); box-shadow: inset 3px 0 0 var(--pink); }
.mb-block.off { opacity: .6; border: 1px dashed var(--line2); }
.mb-block.off.sel { opacity: 1; }
.mb-block.miss .mb-bmeta { color: var(--warn); }
.mb-bmain { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 4px 8px 8px; background: none; border: 0; text-align: left; cursor: pointer; border-radius: 12px; }
.mb-glyph { flex: none; width: 44px; height: 32px; fill: none; stroke: var(--ink3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; background: var(--bg2); border-radius: 8px; padding: 2px; position: relative; z-index: 1; }
.mb-block.sel .mb-glyph, .mb-ehead .mb-glyph { stroke: var(--pink-ink); }
.mb-btext { display: flex; flex-direction: column; min-width: 0; }
.mb-btitle { font-weight: 600; font-size: 13px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-bmeta { font-size: 11.5px; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-bctl { display: flex; align-items: center; gap: 2px; padding-right: 8px; }
.mb-mv { width: 22px; height: 22px; border-radius: 6px; border: 0; background: transparent; color: var(--ink3); cursor: pointer; font-size: 13px; opacity: 0; }
.mb-block:hover .mb-mv, .mb-block:focus-within .mb-mv { opacity: 1; }
.mb-mv:hover:not(:disabled) { background: var(--line); color: var(--ink); }
.mb-mv:disabled { visibility: hidden; }
.mb-switch { width: 34px; height: 20px; border-radius: 99px; border: 0; background: var(--line2); position: relative; cursor: pointer; flex: none; transition: background .15s; }
.mb-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.mb-switch.on { background: var(--vice-grad); }
.mb-switch.on::after { transform: translateX(14px); }
.mb-add { align-self: flex-start; margin-top: 4px; }

/* editor */
.mb-editor { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 22px; min-width: 0; }
.mb-ehead { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.mb-ehead .mb-glyph { width: 56px; height: 40px; }
.mb-title-in { font-size: 21px !important; font-weight: 700; border-color: transparent !important; background: transparent !important; padding: 4px 8px !important; margin-left: -8px; }
.mb-title-in:hover { border-color: var(--line) !important; }
.mb-ebody.dim { opacity: .45; pointer-events: none; }
.mb-note-off { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; }
.mb-ebody h3 { font-size: 14px; margin: 22px 0 8px; }
.mb-ebody h3:first-child { margin-top: 14px; }

.mb-checks { display: flex; flex-direction: column; gap: 6px; }
.mb-check { position: relative; display: flex; gap: 11px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card2); cursor: pointer; transition: border-color .12s, background .12s; }
.mb-check:hover { border-color: var(--line2); }
.mb-check:has(input:checked) { background: var(--sel); border-color: color-mix(in srgb, var(--pink) 55%, var(--line)); }
.mb-check input, .mb-radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mb-box { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--line2); display: grid; place-items: center; transition: background .12s, border-color .12s; }
.mb-check input:checked + .mb-box { background: var(--vice-grad); border-color: transparent; }
.mb-check input:checked + .mb-box::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.mb-check input:focus-visible + .mb-box, .mb-radio input:focus-visible + .mb-dot { outline: 2px solid var(--pink-ink); outline-offset: 2px; }
.mb-ctext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mb-ctitle { font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.mb-csub { font-size: 11.5px; color: var(--ink3); }

.mb-radios { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.mb-radio { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card2); cursor: pointer; font-size: 13.5px; line-height: 1.4; }
.mb-radio:has(input:checked) { background: var(--sel); border-color: color-mix(in srgb, var(--pink) 55%, var(--line)); }
.mb-dot { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--line2); display: grid; place-items: center; }
.mb-radio input:checked + .mb-dot { border-color: var(--pink); }
.mb-radio input:checked + .mb-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vice-grad); }
.mb-field { margin-top: 4px; }

.mb-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.mb-photo { position: relative; aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: var(--bg2); cursor: pointer; }
.mb-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.mb-photo:hover img { transform: scale(1.04); }
.mb-photo.on { border-color: var(--pink); }
.mb-order { position: absolute; top: 5px; left: 5px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--vice-grad); color: var(--on-primary); font-size: 12px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 1px 6px rgba(0, 0, 0, .4); }

.mb-empty { border: 1px dashed var(--line2); border-radius: 12px; padding: 14px 16px; color: var(--ink2); font-size: 13px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.mb-empty p { margin: 0; }

/* resumo: o que o prompt vai pedir */
.mb-sum { position: sticky; top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 32px); overflow-y: auto; }
.mb-sumhead { display: flex; flex-direction: column; gap: 8px; }
.mb-sumhead h3 { font-size: 15px; }
.mb-meter { height: 6px; border-radius: 99px; background: var(--bg2); overflow: hidden; }
.mb-meter > div { height: 100%; background: var(--vice-grad); border-radius: 99px; transition: width .25s; }
.mb-outline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.mb-outline li { position: relative; display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.35; }
.mb-outline li::before { content: ""; position: absolute; left: -19px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--card); }
.mb-outline li.warn::before { background: var(--warn); }
.mb-lt { font-weight: 600; }
.mb-lm { color: var(--ink3); font-size: 11.5px; }
.mb-outline li.warn .mb-lm { color: var(--warn); }
.mb-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.mb-facts span { font-size: 11.5px; color: var(--ink2); background: var(--bg2); border-radius: 99px; padding: 3px 9px; }
.mb-opts { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
.mb-opts .lbl { margin: 0; }
.mb-opts select { padding: 7px 9px; font-size: 12.5px; }
.mb-gen, .mb-pack { width: 100%; justify-content: center; }
.mb-sum .tiny { margin: 0; }

.mb-out { margin: 0; }
.mb-pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12.5px/1.55 ui-monospace, Consolas, monospace; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; max-height: 540px; overflow: auto; margin: 10px 0 0; }

@media (max-width: 1280px) {
  .mb-work { grid-template-columns: 270px minmax(0, 1fr); }
  .mb-sum { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 800px) {
  .mb-work { grid-template-columns: 1fr; }
  .mb-mv { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mb *, .mb *::before, .mb *::after { transition: none !important; }
}

/* ---- Barra lateral em vidro líquido (glassmorphism): cartão flutuante, recolhe em trilho de ícones ---- */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--blobs); }
.shell { --side-w: 264px; position: relative; z-index: 1; grid-template-columns: calc(var(--side-w) + 28px) minmax(0, 1fr); transition: grid-template-columns .4s cubic-bezier(.3, .9, .3, 1); }
.shell.collapsed { --side-w: 76px; }
.shell .side { position: sticky; top: 14px; height: calc(100vh - 28px); margin: 14px 0 14px 14px; padding: 18px 12px 12px; gap: 0; overflow: visible; isolation: isolate;
  border: 1px solid var(--g-border); border-radius: 30px;
  background: var(--g-side-bg);
  -webkit-backdrop-filter: blur(30px) saturate(1.9) brightness(1.06); backdrop-filter: blur(30px) saturate(1.9) brightness(1.06);
  box-shadow: var(--g-inset), var(--g-drop); }
/* brilho especular + aresta líquida (anel em degradê) */
.shell .side::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; padding: 1px;
  background: var(--g-ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.shell .side::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--g-shine); }
.side > * { position: relative; }

.shell .brand { gap: 12px; padding: 2px 6px 14px; white-space: nowrap; overflow: hidden; font-size: 18px; letter-spacing: -.01em; }
.shell .brand b { width: 38px; height: 38px; border-radius: 13px; box-shadow: var(--vice-glow), inset 0 1px 0 rgba(255, 255, 255, .45); }

.side-search { display: flex; align-items: center; gap: 8px; height: 46px; margin: 0 0 6px; padding: 0 12px; border-radius: 16px; flex: none;
  background: var(--g-field-bg); border: 1px solid var(--g-field-border); box-shadow: var(--g-field-shadow); transition: border-color .2s, box-shadow .2s; }
.side-search:focus-within { border-color: rgba(1, 229, 196, .55); box-shadow: var(--g-field-shadow), 0 0 0 3px rgba(1, 229, 196, .14); }
.ss-btn { all: unset; display: grid; place-items: center; width: 20px; height: 20px; color: var(--ink3); cursor: default; flex: none; }
.ss-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.side-search input { all: unset; flex: 1; min-width: 0; color: var(--ink); font-size: 13.5px; }
.side-search input::placeholder { color: var(--ink3); }
.side-search input::-webkit-search-cancel-button { display: none; }

.shell #nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: 2px 0 8px; }
.shell #nav::-webkit-scrollbar { display: none; }
.shell #nav { -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); }
.shell #nav .grp { padding: 18px 12px 6px; font-size: 11.5px; letter-spacing: .04em; color: var(--ink3); }
.shell #nav a { position: relative; gap: 13px; padding: 11px 12px; border-radius: 15px; white-space: nowrap; border: 1px solid transparent; transition: background .22s, color .22s, border-color .22s; }
.shell #nav a:hover { background: var(--g-hover); color: var(--ink); }
.shell #nav a:focus-visible { outline: 2px solid var(--pink-ink); outline-offset: 1px; }
.shell #nav a.active { color: var(--ink); background: var(--g-active-bg);
  border-color: var(--g-active-border); box-shadow: var(--g-active-shadow); }
.shell #nav a.active svg { color: var(--pink-ink); filter: drop-shadow(0 0 6px rgba(1, 229, 196, .55)); }
.shell #nav a.active::before { content: ""; position: absolute; left: -13px; top: 18%; bottom: 18%; width: 4px; border-radius: 0 5px 5px 0; background: var(--vice-grad); box-shadow: 0 0 14px 2px rgba(1, 229, 196, .65); }
.shell #nav a[hidden], .shell #nav .grp[hidden] { display: none; }
.nav-empty { padding: 18px 12px; color: var(--ink3); font-size: 12.5px; }

/* rodapé: cartão de vidro com status e sair */
.shell .side-foot { flex: none; margin: 6px 0 0; padding: 12px; border: 1px solid var(--g-foot-border); border-radius: 18px; overflow: hidden; white-space: nowrap; color: var(--ink2);
  background: var(--g-foot-bg); box-shadow: var(--g-foot-inset); }
.side-foot .pc { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.side-foot .pc .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink3); flex: none; }
.side-foot .pc.on .dot { background: var(--ok); box-shadow: 0 0 10px var(--ok); }

.side-toggle { position: absolute; z-index: 5; top: 28px; right: -14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink);
  border: 1px solid var(--g-chev-border); background: var(--g-chev-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--g-chev-shadow); transition: background .2s, border-color .2s, transform .2s; }
.side-toggle:hover { background: var(--vice-grad); border-color: transparent; transform: scale(1.08); }
.side-toggle:focus-visible { outline: 2px solid var(--pink-ink); outline-offset: 2px; }
.side-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s; }
.shell.collapsed .side-toggle svg { transform: rotate(180deg); }

/* recolhida: trilho de ícones; ao passar o mouse (ou focar) abre por cima do conteúdo, com animação suave */
.shell .side { z-index: 20; justify-self: start; width: calc(var(--side-w) + 14px); }
.shell .side { transition: width .45s cubic-bezier(.3, .9, .3, 1), box-shadow .45s; }
.shell.collapsed .side:hover, .shell.collapsed .side:has(input:focus, :focus-visible), .shell.collapsed.peek .side { width: 278px; transition-delay: .12s, .12s; box-shadow: var(--g-inset), var(--g-drop-open); }
/* o ícone fica no mesmo ponto nos dois estados: nada pula quando abre */
.shell .side { padding-left: 12px; padding-right: 12px; }
.shell #nav a { padding-left: 16px; }
.shell.collapsed .brand, .shell.collapsed #nav a, .shell.collapsed .side-search { justify-content: flex-start; }
.shell.collapsed .side-search { padding: 0 14px; }
.side-search { overflow: hidden; }
.shell.collapsed #nav .grp { transition: margin .3s, height .3s; }
.shell.collapsed:not(.peek) .side:not(:hover):not(:has(input:focus, :focus-visible)) .brand span, .shell.collapsed:not(.peek) .side:not(:hover):not(:has(input:focus, :focus-visible)) #nav a .lbl, .shell.collapsed:not(.peek) .side:not(:hover):not(:has(input:focus, :focus-visible)) .side-search input { display: none; }
.shell.collapsed:not(.peek) .side:not(:hover):not(:has(input:focus, :focus-visible)) .side-foot { padding: 10px 0; text-align: center; }
.shell.collapsed:not(.peek) .side:not(:hover):not(:has(input:focus, :focus-visible)) .side-foot > :not(.pc) { display: none; }
.shell.collapsed:not(.peek) .side:not(:hover):not(:has(input:focus, :focus-visible)) .side-foot .pc { justify-content: center; font-size: 0; gap: 0; }
.shell.collapsed:not(.peek) .side:not(:hover):not(:has(input:focus, :focus-visible)) .side-foot .pc .chip { display: none; }
.shell.collapsed:not(.peek) .side:not(:hover):not(:has(input:focus, :focus-visible)) .side-foot .pc .dot { width: 10px; height: 10px; }
.shell.collapsed:not(.peek) .side:not(:hover):not(:has(input:focus, :focus-visible)) #nav .grp { height: 1px; margin: 10px 16px; padding: 0; overflow: hidden; font-size: 0; background: var(--g-sep); }
.shell.collapsed:not(.peek) .side:not(:hover):not(:has(input:focus, :focus-visible)) #nav a.active::before { left: -12px; }
:is(.shell.collapsed .side:is(:hover, :has(input:focus, :focus-visible)), .shell.collapsed.peek .side) :is(.brand span, #nav a .lbl, .side-search input, .side-foot > *, #nav .grp) { animation: side-fade .35s .16s both; }
@keyframes side-fade { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  body::before { display: none; }
  .shell { transition: none; }
  .shell .side { width: auto; position: static; height: auto; margin: 0; padding: 10px 12px; border-radius: 0; border-width: 0 0 1px; overflow-x: auto; overflow-y: hidden; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card); box-shadow: none; }
  .shell .side::before, .shell .side::after, .side-toggle, .side-search { display: none; }
  .shell.collapsed .side .brand span, .shell.collapsed .side #nav a .lbl { display: inline !important; }
  .shell.collapsed .side #nav .grp { height: auto !important; margin: 0 !important; padding: 16px 10px 5px !important; font-size: 12px !important; background: none !important; }
  .shell #nav { flex: none; overflow: visible; }
  .shell #nav a.active::before { display: none; }
  .shell.collapsed #nav a { justify-content: flex-start; padding: 9px 10px; }
}
/* sem suporte a backdrop-filter: fundo sólido para manter legibilidade */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .shell .side { background: var(--g-solid); } }
@media (prefers-reduced-motion: reduce) { .shell, .shell .side, .side-toggle, .side-toggle svg, .shell #nav a, .side-search { transition: none !important; animation: none !important; } }

/* ---- Importação pelo link do Instagram ---- */
.imp { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.imp-steps { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.imp-steps li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; flex-wrap: wrap; }
.imp-mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--bg2); color: var(--ink3); flex: none; }
.imp-text { display: flex; flex-direction: column; min-width: 0; }
.imp-done .imp-mark { background: var(--ok-soft); color: var(--ok); }
.imp-run { background: var(--pink-soft); }
.imp-run .imp-mark { background: var(--vice-grad); color: var(--on-primary); animation: imp-pulse 1.4s ease-in-out infinite; }
.imp-bad .imp-mark { background: var(--bad-soft); color: var(--bad); }
.imp-wait { opacity: .55; }
.imp-err { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--bad-soft); color: var(--bad); }
.imp-warn { margin: 10px 0 0; padding: 10px 12px 10px 28px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; }
@keyframes imp-pulse { 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .imp-run .imp-mark { animation: none; } }

/* ---- Chave de tema: sol/lua + bonequinho + buraco (neumórfica, segue o tema) ---- */
.theme-sw { all: unset; box-sizing: border-box; position: relative; display: block; flex: none; width: 100%; height: 50px; margin: 6px 0 0; border-radius: 22px; cursor: pointer; overflow: hidden;
  background: var(--nm-bg); box-shadow: 5px 7px 16px var(--nm-lo), -4px -4px 11px var(--nm-hi), inset 0 0 0 1px rgba(255, 255, 255, .04); -webkit-tap-highlight-color: transparent; }
.theme-sw:focus-visible { outline: 2px solid var(--pink-ink); outline-offset: 3px; }
.ts-knob { position: absolute; left: 5px; top: 5px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--nm-knob);
  box-shadow: 4px 5px 11px var(--nm-lo), -3px -3px 8px var(--nm-hi); will-change: transform; }
.ts-knob svg { width: 22px; height: 22px; overflow: visible; }
.ts-knob .sun, .ts-knob .moon { transform-box: fill-box; transform-origin: center; }
.ts-stage { position: absolute; left: 54px; top: 0; width: calc(100% - 54px); height: 50px; overflow: visible; color: var(--nm-man); }
.ts-hole { fill: var(--nm-hole); }
.ts-hole-rim { fill: none; stroke: var(--nm-hi); stroke-width: 1; }
.ts-man line, .ts-man circle { stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; fill: none; }
.theme-sw:active .ts-knob { filter: brightness(.96); }
/* recolhida: só o botão redondo, no mesmo ponto de quando abre */
.shell.collapsed:not(.peek) .side:not(:hover):not(:has(input:focus, :focus-visible)) .ts-stage { opacity: 0; }
:is(.shell.collapsed .side:is(:hover, :has(input:focus, :focus-visible)), .shell.collapsed.peek .side) .ts-stage { animation: side-fade .35s .2s both; }

@media (prefers-reduced-motion: reduce) { html.theming, html.theming * { transition: none !important; } }

/* troca de tema em círculo a partir do buraco (View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* ---- Carregamento em esqueleto ---- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sk { position: relative; overflow: hidden; background: var(--sk-base); border-radius: 10px; flex: none; }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--sk-shine), transparent); animation: sk-sheen 1.5s ease-in-out infinite; }
@keyframes sk-sheen { to { transform: translateX(100%); } }
@keyframes sk-in { from { opacity: 0; } to { opacity: 1; } }
.sk-page { display: flex; flex-direction: column; gap: 16px; animation: sk-in .2s .08s both; } /* só aparece se a tela demorar mais de 80 ms */
.sk-page > .card + .card { margin-top: 0; }
.sk-head { display: flex; align-items: center; gap: 14px; }
.sk-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sk-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sk-rows { display: flex; flex-direction: column; }
.sk-row { display: flex; align-items: center; gap: 14px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.sk-row:last-child { border-bottom: 0; }
.sk-row .sk-col { flex: 1; }
.sk-grid { display: grid; gap: 16px; }
.sk-tile { display: flex; flex-direction: column; gap: 8px; }
.sk-2col { display: grid; gap: 16px; align-items: start; }
.sk-3col { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.sk-panel { display: flex; flex-direction: column; gap: 12px; }
.sk-steps { display: flex; gap: 10px; flex-wrap: wrap; }
.sk-foot { display: flex; flex-direction: column; gap: 9px; }
.sk-foot .sk-l1 { width: 70%; height: 11px; border-radius: 6px; }
.sk-foot .sk-l2 { width: 92%; height: 9px; border-radius: 6px; }
/* a lateral recolhida mostra só o ponto do status */
.shell.collapsed:not(.peek) .side:not(:hover):not(:has(input:focus, :focus-visible)) .sk-foot { display: none; }
img[loading="lazy"] { background: var(--sk-base); }
@media (max-width: 900px) { .sk-2col, .sk-3col { grid-template-columns: 1fr !important; } }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; display: none; } .sk-page { animation: none; } }

/* =====================================================================
   Celular (até 760 px): barra superior, barra de abas de vidro, folha "Criar", uma coluna
   ===================================================================== */
.mtop, .mtabs, .msheet { display: none; }
@media (max-width: 760px) {
  html, body { overflow-x: clip; -webkit-text-size-adjust: 100%; } /* clip: corta o excesso sem criar rolagem interna */
  body { -webkit-tap-highlight-color: transparent; }
  body::before { display: block !important; }
  .shell { display: block !important; min-height: 100dvh; transition: none; }
  .shell .side { display: none !important; }
  main { padding: calc(68px + env(safe-area-inset-top)) 14px calc(112px + env(safe-area-inset-bottom)); max-width: 100%; min-width: 0; }

  /* barra superior */
  .mtop { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 40; align-items: center; gap: 12px; padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
    background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); border-bottom: 1px solid var(--g-sep); }
  .mlogo { width: 36px; height: 36px; border-radius: 12px; background: var(--vice-grad); box-shadow: var(--vice-glow), inset 0 1px 0 rgba(255, 255, 255, .45); flex: none; }
  #mtitle { flex: 1; min-width: 0; margin: 0; font-size: 18px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mib { all: unset; box-sizing: border-box; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; cursor: pointer; flex: none;
    background: var(--g-side-bg); border: 1px solid var(--g-border); box-shadow: var(--g-inset); -webkit-tap-highlight-color: transparent; }
  .mib svg { width: 21px; height: 21px; fill: none; stroke-width: 1.8; stroke-linecap: round; }
  .mib .i-sun { display: none; }
  :root[data-theme="light"] .mib .i-moon { display: none; }
  :root[data-theme="light"] .mib .i-sun { display: block; }
  /* chave de tema do celular: só o ícone; ao tocar cresce até a chave inteira (escala .7) e volta */
  .mtsw { position: relative; width: 44px; height: 44px; flex: none; }
  .mtsw .theme-sw { position: absolute; right: 0; top: 50%; width: 50px; height: 50px; margin: 0; border-radius: 50%; transform: translateY(-50%) scale(.7); transform-origin: right center; z-index: 45;
    transition: width .45s cubic-bezier(.3, .9, .3, 1), border-radius .45s cubic-bezier(.3, .9, .3, 1); }
  .mtsw .theme-sw.open { width: 252px; border-radius: 22px; }
  .mtsw .ts-stage { opacity: 0; transition: opacity .2s .25s; }
  .mtsw .theme-sw.open .ts-stage { opacity: 1; }
  .mib:focus-visible, .mtab:focus-visible, .mfab:focus-visible { outline: 2px solid var(--pink-ink); outline-offset: 2px; }

  /* barra de abas (vidro flutuante) */
  .mtabs { display: flex; position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); height: 66px; align-items: center; justify-content: space-around; padding: 0 4px;
    border-radius: 26px; background: var(--g-side-bg), color-mix(in srgb, var(--bg) 66%, transparent); border: 1px solid var(--g-border); box-shadow: var(--g-inset), var(--g-drop);
    -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8); }
  .mtab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 62px; height: 100%; text-decoration: none; color: var(--ink3); font-size: 10.5px; font-weight: 600; -webkit-tap-highlight-color: transparent; }
  .mtab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .mtab.on { color: var(--ink); }
  .mtab.on svg { color: var(--pink-ink); filter: drop-shadow(0 0 6px rgba(1, 229, 196, .6)); }
  .mtab.on::before { content: ""; position: absolute; top: 0; width: 26px; height: 4px; border-radius: 0 0 5px 5px; background: var(--vice-grad); box-shadow: 0 0 12px rgba(1, 229, 196, .7); }
  .mfab { all: unset; box-sizing: border-box; width: 54px; height: 54px; border-radius: 19px; display: grid; place-items: center; margin-top: -22px; cursor: pointer; flex: none; background: var(--vice-grad);
    border: 3px solid var(--bg); box-shadow: var(--vice-glow); transition: transform .25s cubic-bezier(.3, .9, .3, 1); -webkit-tap-highlight-color: transparent; }
  .mfab svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; transition: transform .3s; }
  .mfab[aria-expanded="true"] svg { transform: rotate(45deg); }
  .mfab:active { transform: scale(.94); }

  /* folha "Criar" */
  .msheet:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 60; }
  .mscrim { position: absolute; inset: 0; background: rgba(5, 3, 10, .55); animation: m-fade .25s both; }
  :root[data-theme="light"] .mscrim { background: rgba(40, 25, 80, .28); }
  .mpanel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86dvh; overflow: auto; border-radius: 30px 30px 0 0; background: var(--card); border-top: 1px solid var(--g-border);
    padding: 10px 16px calc(24px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px rgba(0, 0, 0, .45); animation: m-up .38s cubic-bezier(.3, .9, .3, 1) both; }
  .mgrab { width: 42px; height: 5px; border-radius: 99px; background: var(--line2); margin: 0 auto 14px; }
  .mpanel h2 { font-size: 18px; margin: 0 0 2px; } .mpanel p { margin: 0 0 12px; font-size: 12.5px; color: var(--ink3); }
  .m-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .m-tile { display: flex; flex-direction: column; gap: 8px; min-height: 118px; padding: 14px; border-radius: 20px; text-decoration: none; color: inherit; background: var(--card2); border: 1px solid var(--line); -webkit-tap-highlight-color: transparent; transition: transform .2s, border-color .2s; }
  .m-tile:active { transform: scale(.97); border-color: var(--pink); }
  .m-tile b { font-size: 13.5px; } .m-tile > span:last-child { font-size: 11.5px; color: var(--ink3); line-height: 1.35; }
  .m-ico { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--vice-grad); box-shadow: var(--vice-glow); }
  .m-ico svg { width: 21px; height: 21px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .m-ico.soft { background: var(--card2); border: 1px solid var(--line); box-shadow: none; } .m-ico.soft svg { stroke: var(--ink2); }
  @keyframes m-fade { from { opacity: 0; } }
  @keyframes m-up { from { transform: translateY(100%); } }

  /* tela Mais */
  .m-li { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 13px; width: 100%; min-height: 64px; padding: 10px 2px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .m-li:first-child { border-top: 0; }
  .m-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .m-t b { font-size: 14px; } .m-t small { font-size: 12px; color: var(--ink3); }
  .m-chev svg { width: 18px; height: 18px; fill: none; stroke: var(--ink3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .m-more .card { margin-bottom: 12px; } .m-out { width: 100%; justify-content: center; background: var(--card2); box-shadow: none; }

  /* layout: tudo em uma coluna, toques de 44 px, sem rolagem horizontal */
  .card { padding: 14px; border-radius: 20px; }
  .grid2, .grid3, .presets, .choose, .integr, .choice, .wiz, .home-cols, .id-grid, .mb-work, .props-grid, .ed-main, .id-brief { grid-template-columns: minmax(0, 1fr) !important; }
  .head { flex-wrap: wrap; gap: 10px; } .head .right { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-left: 0; }
  .row { flex-wrap: wrap; }
  .btn, .iconbtn { min-height: 44px; } .iconbtn { min-width: 44px; }
  .input, select.input, textarea.input, input.input { font-size: 16px; min-height: 44px; }
  textarea.input { min-height: 88px; }
  .seg { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .seg::-webkit-scrollbar { display: none; } .seg button { flex: none; min-height: 36px; }
  table.list { display: block; overflow-x: auto; }
  pre, .mb-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  img, video, canvas { max-width: 100%; }
  .modal-back { align-items: end; padding: 0; }
  .modal, .modal.narrow { max-width: none; width: 100%; max-height: 90dvh; border-radius: 26px 26px 0 0; padding: 18px 16px calc(22px + env(safe-area-inset-bottom)); }
  #toasts { left: 14px; right: 14px; bottom: calc(92px + env(safe-area-inset-bottom)); }
  .sk-page { gap: 12px; }

  /* cabeçalho de página: o título já está na barra superior, sobra a descrição curta e as ações */
  .head .icon, .head h1 { display: none; }
  .head p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; }
  .head > div { min-width: 0; flex: 1 1 100%; }
  /* controles */
  input[type="checkbox"], input[type="radio"] { accent-color: var(--pink); width: 22px; height: 22px; flex: none; margin: 0; }
  label.row { flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; }
  label.row > .tiny { flex: 1 1 100%; margin-left: 32px; }
  .row > .btn.primary { flex: 1 1 auto; justify-content: center; }
  .row > .input, .row > div > .input { min-width: 0; }
  .m-note { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; background: var(--warn-soft); border-color: transparent; color: var(--warn); font-size: 12.5px; line-height: 1.45; } .m-note b { font-size: 13px; }
  .card > .row:first-child > .input { flex: 1 1 100%; }
  /* Montar: "Gerar prompt" fica sempre ao alcance do polegar, acima da barra de abas */
  .mb { padding-bottom: 76px; }
  .mb-gen { position: fixed; left: 14px; right: 14px; bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 35; width: auto; min-height: 50px; box-shadow: var(--vice-glow), 0 10px 30px rgba(0, 0, 0, .35); }
}
@media (prefers-reduced-motion: reduce) { .mscrim, .mpanel, .mfab, .mfab svg, .m-tile { animation: none !important; transition: none !important; } }

/* ---- Gerador de Cortes (wizard): estrutura comum ---- */
.pv-side { display: contents; } .pv-label, .pv-hint { display: none; }
.zr-mv { display: none; }
.gen-stats { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.gen-stats:empty { display: none; }

@media (max-width: 760px) {
  .wiz-root { padding-bottom: 84px; }
  /* topo: voltar + nome; etapas numa faixa rolável; "continuar" fixo na base */
  .wiz-top { padding: 12px; gap: 10px; }
  .wiz-top .namebox { flex: 1; min-width: 0; } .wiz-top .namebox input { width: 100%; min-width: 0; font-size: 16px; }
  .steps { order: 3; width: 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto; border-radius: 16px; scrollbar-width: none; }
  .steps::-webkit-scrollbar { display: none; } .steps button { flex: none; min-height: 38px; }
  .wiz-top > .btn.primary { position: fixed; left: 14px; right: 14px; bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 35; justify-content: center; min-height: 50px; box-shadow: var(--vice-glow), 0 10px 30px rgba(0, 0, 0, .35); }
  /* prévia ao vivo sempre visível no alto enquanto você ajusta */
  .wiz { display: flex !important; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 12px; }
  .wiz > * { min-width: 0; max-width: 100%; }
  .preview { order: -1; position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 20; flex-direction: row; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 20px;
    background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .preview canvas { width: auto; height: 26dvh; max-width: none; aspect-ratio: 9 / 16; flex: none; border-radius: 14px; }
  .pv-side { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
  .pv-label { display: block; font-size: 13px; } .pv-hint { display: block; font-size: 11.5px; color: var(--ink3); line-height: 1.4; }
  .wiz-root[data-step="7"] .preview { display: none; }

  /* Zonas: presets primeiro, em carrossel; zonas em cartões de duas linhas */
  .wiz-root[data-step="2"] .wiz > div:first-child { display: flex; flex-direction: column; }
  .z-presets { order: 1; } .z-zones { order: 2; } .z-base { order: 3; } .z-avatar { order: 4; }
  .presets { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -14px; padding: 2px 14px 8px; scrollbar-width: none; }
  .presets::-webkit-scrollbar { display: none; } .preset { flex: 0 0 236px; scroll-snap-align: start; }
  .zone-row { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); grid-template-areas: "num seg seg seg seg" "sl sl sl sl sl" "up up dn side del"; gap: 10px 8px; align-items: center; padding: 12px; min-width: 0; }
  .zone-row > * { min-width: 0; }
  .zr-num { grid-area: num; } .zr-seg { grid-area: seg; justify-self: stretch; display: flex; } .zr-seg button { flex: 1; padding: 6px 8px; font-size: 12.5px; white-space: nowrap; } .zr-chip { display: none; }
  .zr-up { grid-area: up; } .zr-dn { grid-area: dn; } .zr-side { grid-area: side; } .zr-del { grid-area: del; }
  .zr-slider { grid-area: sl; }
  .zr-mv { display: inline-grid; } .zr-mv:disabled { opacity: .35; } .zr-handle { display: none; }
  .zr-slider .top span:empty::before { content: "Altura da zona"; color: var(--ink3); font-size: 12px; }

  /* Gerar: progresso em destaque e ações organizadas (nada de parágrafo espremido ao lado de botões) */
  .gen-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .gen-bar > * { min-width: 0; }
  .gen-hint { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.45; }
  .gen-dl { grid-column: 1 / -1; order: 1; justify-content: center; }
  .gen-pub, .gen-again { order: 2; justify-content: center; }
  .gen-cancel { grid-column: 1 / -1; order: 3; justify-content: center; }
  .gen-prog b { font-size: 15px; }
  .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rcard .small { font-size: 11.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .rcard .actions { padding: 8px; flex-wrap: wrap; }
}

/* ---- Integrações: cartões Meu PC e EasySite ---- */
.int-caps { display: contents; }
@media (max-width: 760px) {
  .int-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .int-head > .grow { flex: none; width: 100%; }
  .int-head h2 { font-size: 16px; }
  .int-head .btn { width: 100%; justify-content: center; }
  /* cada dispositivo vira um mini-cartão: nome e estado, capacidades em chips e ação na base */
  .int-dev { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 0 !important; align-items: start; }
  .int-dev .pc { font-size: 14.5px; }
  .int-dev .spacer { display: none; }
  .int-caps { display: flex; flex-wrap: wrap; gap: 6px; }
  .int-dev .btn.danger { justify-self: stretch; justify-content: center; background: transparent; min-height: 40px; }
}

/* =====================================================================
   Liquid glass / glassmorphism em todo o site
   Os fundos dos containers viram vidro translúcido (as cores base são tokens) e os
   containers principais ganham desfoque, brilho de borda e profundidade. A luz de fundo
   cobre a página inteira para o vidro ter o que refratar.
   ===================================================================== */
:root {
  --card: rgba(28, 23, 42, .52); --card2: rgba(255, 255, 255, .065); --bg2: rgba(6, 4, 12, .40);
  --line: rgba(255, 255, 255, .095); --line2: rgba(255, 255, 255, .18);
  --card-solid: #181521;
  --gl-sheen: linear-gradient(160deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .02) 46%, rgba(255, 255, 255, .05));
  --gl-edge: inset 0 1px 0 rgba(255, 255, 255, .20), inset 0 -1px 0 rgba(255, 255, 255, .03);
  --gl-drop: 0 10px 30px rgba(0, 0, 0, .30);
  --blobs:
    radial-gradient(620px 520px at 9% 8%, rgba(32, 214, 182, .34), transparent 70%),
    radial-gradient(700px 560px at 20% 55%, rgba(22, 170, 150, .28), transparent 70%),
    radial-gradient(760px 620px at 6% 100%, rgba(12, 120, 138, .40), transparent 70%),
    radial-gradient(660px 540px at 90% 10%, rgba(22, 170, 150, .20), transparent 70%),
    radial-gradient(720px 580px at 82% 64%, rgba(12, 120, 138, .26), transparent 70%),
    radial-gradient(560px 460px at 52% 104%, rgba(32, 214, 182, .16), transparent 70%);
}
:root[data-theme="light"] {
  --card: rgba(255, 255, 255, .60); --card2: rgba(255, 255, 255, .52); --bg2: rgba(20, 100, 90, .09);
  --line: rgba(20, 100, 90, .15); --line2: rgba(20, 100, 90, .26);
  --card-solid: #ffffff;
  --gl-sheen: linear-gradient(160deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .25) 48%, rgba(255, 255, 255, .5));
  --gl-edge: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(20, 100, 90, .08);
  --gl-drop: 0 10px 30px rgba(10, 70, 62, .12);
  --blobs:
    radial-gradient(620px 520px at 9% 8%, rgba(32, 214, 182, .30), transparent 70%),
    radial-gradient(700px 560px at 20% 55%, rgba(22, 170, 150, .22), transparent 70%),
    radial-gradient(760px 620px at 6% 100%, rgba(12, 120, 138, .28), transparent 70%),
    radial-gradient(660px 540px at 90% 10%, rgba(22, 170, 150, .17), transparent 70%),
    radial-gradient(720px 580px at 82% 64%, rgba(12, 120, 138, .20), transparent 70%),
    radial-gradient(560px 460px at 52% 104%, rgba(32, 214, 182, .15), transparent 70%);
}

/* containers principais: vidro com desfoque */
.card, .mb-head, .mb-editor, .mb-sum, .mb-rail, .id-panel, .home-ask, .steps, .toast, .modal {
  background-image: var(--gl-sheen);
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: var(--gl-edge), var(--gl-drop);
}
.card { border-color: var(--line2); }
/* vidro dentro de vidro não precisa de outro desfoque (mais leve e mais limpo) */
:is(.card, .modal, .mb-editor, .mb-sum, .id-panel) :is(.card, .steps, .tcard, .rcard, .block, .zone-row, .preset, .clip-card, .src-card, .toast) {
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--gl-edge);
}
/* superfícies de apoio: brilho de borda sutil, sem desfoque (galerias grandes) */
.tcard, .rcard, .clip-card, .src-card, .block, .zone-row, .preset, .opt-tile, .lib-item, .phrase, .media-item, .checkline, .engine-opt, .id-idea, .id-tpl, .mb-tpl, .mb-block, .mb-check, .mb-radio, .choose .opt, .choice .opt2 {
  background-image: var(--gl-sheen); box-shadow: var(--gl-edge);
}
/* sobreposições precisam de mais corpo para ler bem */
.modal { background-color: color-mix(in srgb, var(--card-solid) 72%, transparent); -webkit-backdrop-filter: blur(34px) saturate(1.8); backdrop-filter: blur(34px) saturate(1.8); box-shadow: var(--gl-edge), 0 30px 80px rgba(0, 0, 0, .45); }
.modal-back { background: rgba(10, 6, 20, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:root[data-theme="light"] .modal-back { background: rgba(10, 60, 52, .22); }
.toast { background-color: color-mix(in srgb, var(--card-solid) 82%, transparent); }
.toast.err { background: var(--bad); background-image: none; } .toast.ok { background: var(--ok); background-image: none; color: #08130e; }
select.input option { background: var(--card-solid); color: var(--ink); }
/* campos: vidro rebaixado */
.input, select.input, textarea.input, .namebox { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22); }
:root[data-theme="light"] .input, :root[data-theme="light"] select.input, :root[data-theme="light"] textarea.input, :root[data-theme="light"] .namebox { box-shadow: inset 0 1px 3px rgba(10, 70, 62, .10); }
/* botões secundários: vidro com brilho na borda */
.btn:not(.primary):not(.danger):not(.gulp), .iconbtn:not(.pink) { box-shadow: var(--gl-edge); }
.btn:not(.primary):hover, .iconbtn:hover { background: color-mix(in srgb, var(--card2) 70%, rgba(255, 255, 255, .12)); }
/* mobile: folha "Criar" e barra fixa mantêm corpo; blobs menores */
@media (max-width: 760px) {
  .mpanel { background: color-mix(in srgb, var(--card-solid) 80%, transparent); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); }
  .m-tile { background-image: var(--gl-sheen); box-shadow: var(--gl-edge); }
  .m-li:first-child { border-top: 0; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .mb-head, .mb-editor, .mb-sum, .mb-rail, .id-panel, .home-ask, .steps, .modal { background-color: var(--card-solid); }
}

/* Logo oficial (V em PNG transparente) */
.brand b, .mlogo { overflow: visible; background: none !important; box-shadow: none !important; }
.brand b img, .mlogo img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 2px 8px rgba(20, 200, 170, .5)); }
.mlogo { display: block; }
.brand.login-brand b { width: 48px; height: 48px; }

/* Fundo (tema escuro): foto muito desfocada, só as manchas de cor */
.bgvid { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: #04100f; }
.bgvid::before { content: ""; position: absolute; inset: -12%; background: url(/img/bg-escuro.jpg?v=3) center / cover no-repeat; filter: blur(60px) saturate(1.3); }
.bgvid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 16, 15, .55), rgba(4, 16, 15, .25) 45%, rgba(4, 16, 15, .35)); }
:root[data-theme="light"] .bgvid { display: none; }
:root:not([data-theme="light"]) .login { background: transparent; }

/* Tema escuro: menos desfoque e menos véu para o vídeo de fundo aparecer */
:root:not([data-theme="light"]) .shell .side { -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5); }
:root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .mb-head, :root:not([data-theme="light"]) .mb-editor, :root:not([data-theme="light"]) .mb-sum, :root:not([data-theme="light"]) .mb-rail, :root:not([data-theme="light"]) .id-panel, :root:not([data-theme="light"]) .home-ask, :root:not([data-theme="light"]) .steps, :root:not([data-theme="light"]) .toast {
  -webkit-backdrop-filter: blur(30px) saturate(1.4); backdrop-filter: blur(30px) saturate(1.4); }
:root:not([data-theme="light"]) .modal { -webkit-backdrop-filter: blur(14.4px) saturate(1.4); backdrop-filter: blur(14.4px) saturate(1.4); }
:root:not([data-theme="light"]) .bgvid::after { background: linear-gradient(90deg, rgba(4, 16, 15, .5), rgba(4, 16, 15, .32) 45%, rgba(4, 16, 15, .4)); }
@media (max-width: 760px) { :root:not([data-theme="light"]) .mtabs, :root:not([data-theme="light"]) .mtop { -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5); } }

/* Fundo: uma foto por tema */
.bgvid-claro { display: none; background: #e4f4f1; }
:root[data-theme="light"] .bgvid-claro { display: block; }
:root[data-theme="light"] .bgvid-escuro { display: none; }
.bgvid-claro::before { background-image: url(/img/bg-claro.webp?v=3); filter: blur(60px) saturate(1.35); }
.bgvid-claro::after { background: linear-gradient(90deg, rgba(228, 246, 243, .3), rgba(228, 246, 243, .12) 45%, rgba(228, 246, 243, .2)); }
:root[data-theme="light"] .shell .side { -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); }
:root[data-theme="light"] .card, :root[data-theme="light"] .mb-head, :root[data-theme="light"] .mb-editor, :root[data-theme="light"] .mb-sum, :root[data-theme="light"] .mb-rail, :root[data-theme="light"] .id-panel, :root[data-theme="light"] .home-ask, :root[data-theme="light"] .steps, :root[data-theme="light"] .home-panel { -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); }
.login { background: transparent; }
body { background: transparent; }

/* Inicio: paineis de vidro para Em andamento / Esta semana */
.home-panel { background: var(--card); background-image: var(--gl-sheen); border: 1px solid var(--line2); border-radius: 22px; padding: 18px 20px 8px; box-shadow: var(--gl-edge), var(--gl-drop); -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5); align-self: start; }
.home .home-panel h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line2); font-size: 16px; font-weight: 700; }
.home-panel h2 .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--vice-grad); box-shadow: var(--vice-glow); flex: none; }
.home-panel .home-item { padding: 12px 10px; margin: 0 -10px; border-top: 0; border-radius: 14px; transition: background .2s; }
.home-panel .home-item + .home-item { box-shadow: 0 -1px 0 var(--line); }
.home-panel .home-item:hover { background: var(--g-hover); box-shadow: none; }
@media (max-width: 760px) { .home-panel { padding: 14px 14px 6px; border-radius: 20px; } }

/* Login: campos em capsula com icone e brilho ao focar */
.login .col { gap: 14px !important; }
.lf { --lf-glow: 96, 200, 255; position: relative; display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 20px; border-radius: 999px; cursor: text;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07)); border: 1.5px solid rgba(255, 255, 255, .22); color: var(--ink3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 22px rgba(0, 0, 0, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .25s, box-shadow .3s, background .3s, color .25s, transform .25s; }
.lf-ico { display: grid; place-items: center; width: 22px; height: 22px; flex: none; transition: color .25s, filter .25s; }
.lf-ico svg { width: 22px; height: 22px; }
.lf .input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0; font-size: 15px; color: var(--ink); caret-color: rgb(var(--lf-glow)); }
.lf .input::placeholder { color: var(--ink3); }
.lf:hover { border-color: rgba(255, 255, 255, .4); }
.lf:focus-within { border-color: rgb(var(--lf-glow)); color: rgb(var(--lf-glow)); transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(var(--lf-glow), .14), rgba(var(--lf-glow), .05));
  box-shadow: 0 0 0 1px rgba(var(--lf-glow), .55), 0 0 14px rgba(var(--lf-glow), .75), 0 0 34px rgba(var(--lf-glow), .45), inset 0 0 14px rgba(var(--lf-glow), .22); }
.lf:focus-within .lf-ico { filter: drop-shadow(0 0 6px rgba(var(--lf-glow), .95)); }
:root[data-theme="light"] .lf { --lf-glow: 38, 140, 235; background: rgba(255, 255, 255, .6); border-color: rgba(20, 110, 98, .25); box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(10, 70, 62, .12); }
:root[data-theme="light"] .lf:focus-within { background: rgba(255, 255, 255, .85); }
@media (prefers-reduced-motion: reduce) { .lf, .lf-ico { transition: none; } }

/* Login: botao com estados carregando / autenticado */
.login .btn.primary { height: 50px; transition: background .35s, box-shadow .35s, color .3s, transform .2s; }
.login .btn.primary.loading { background: linear-gradient(180deg, #2cf0d3, #00b89c); box-shadow: 0 8px 26px rgba(1, 229, 196, .45); pointer-events: none; opacity: 1; }
.login .btn.primary.ok { background: linear-gradient(180deg, #5fe0b0, #34c08a); color: #0b3a2a; box-shadow: 0 8px 26px rgba(52, 192, 138, .5); pointer-events: none; opacity: 1; }
.lg-spin { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: lgspin .7s linear infinite; display: block; }
@keyframes lgspin { to { transform: rotate(360deg); } }
.lg-check { width: 24px; height: 24px; }
.lg-check path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: lgcheck .38s .05s cubic-bezier(.5, 0, .2, 1) forwards; }
@keyframes lgcheck { to { stroke-dashoffset: 0; } }
.login .btn.primary.ok { animation: lgpop .45s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes lgpop { 0% { transform: scale(.96); } 100% { transform: scale(1); } }
.login { transition: opacity .3s, transform .3s; }
.login.lg-out { opacity: 0; transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .lg-spin { animation-duration: 1.6s; } }

/* Login na paleta da marca (laranja -> rosa -> roxo) */
.lf { --lf-glow: 232, 80, 127; }
:root[data-theme="light"] .lf { --lf-glow: 214, 62, 128; }
.lf::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: linear-gradient(100deg, #01e5c4, #00cdb0 55%, #00b89c); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.lf:focus-within { border-color: transparent; background: linear-gradient(180deg, rgba(1, 229, 196, .12), rgba(0, 184, 156, .06));
  box-shadow: 0 0 14px rgba(1, 229, 196, .55), 0 0 34px rgba(0, 184, 156, .4), 0 0 52px rgba(1, 229, 196, .2), inset 0 0 14px rgba(1, 229, 196, .16); }
.lf:focus-within::before { opacity: 1; }
:root[data-theme="light"] .lf:focus-within { background: rgba(255, 255, 255, .88); }
.login .btn.primary.loading { background: linear-gradient(100deg, #01e5c4, #00cdb0 55%, #00b89c); box-shadow: 0 8px 26px rgba(1, 229, 196, .45); }
.login .btn.primary.ok { background: linear-gradient(100deg, #01e5c4, #00cdb0 55%, #00b89c); color: var(--on-primary); box-shadow: 0 0 0 3px rgba(255, 255, 255, .25), 0 10px 34px rgba(1, 229, 196, .6); }

/* web: a chave de tema mostra so o icone; ao clicar abre a chave inteira, faz a animacao e volta ao icone */
@media (min-width: 761px) {
  .shell .theme-sw { width: 50px; border-radius: 50%; transition: width .45s cubic-bezier(.3, .9, .3, 1), border-radius .45s cubic-bezier(.3, .9, .3, 1); }
  .shell .theme-sw.open { width: 100%; border-radius: 22px; }
  .shell .theme-sw .ts-stage { opacity: 0; transition: opacity .2s .25s; }
  .shell .theme-sw.open .ts-stage { opacity: 1 !important; animation: none; }
}

/* Criador de Sites: aba Modelos */
.sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.sm-card.card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.sm-open { all: unset; display: block; cursor: pointer; }
.sm-open:focus-visible { outline: 2px solid var(--pink-ink); outline-offset: -2px; }
.sm-thumb { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg2); }
.sm-thumb iframe { position: absolute; top: 0; left: 0; width: 400%; height: 400%; border: 0; transform: scale(.25); transform-origin: 0 0; pointer-events: none; background: #fff; }
.sm-body { padding: 14px 16px 16px; }
.sm-pal { display: flex; gap: 5px; }
.sm-pal i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, .25); }
.sm-big { width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; margin: 10px 0; background: #fff; }
.sm-big iframe { width: 100%; height: 100%; border: 0; }
.modal:has(.sm-big) { width: min(1000px, 94vw); max-width: none; }

/* Abas (seg): contraste melhor, a aba inativa nao some */
.seg { background: color-mix(in srgb, var(--card2) 80%, transparent); border: 1px solid var(--line2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.seg button { color: var(--ink); opacity: .78; transition: background .2s, opacity .2s, color .2s; }
.seg button:hover:not(.on) { opacity: 1; background: var(--g-hover, rgba(255, 255, 255, .08)); }
.seg button.on { opacity: 1; box-shadow: 0 4px 14px rgba(1, 229, 196, .35); }
.seg button:focus-visible { outline: 2px solid var(--pink-ink); outline-offset: 1px; }

/* Enriquecimento */
@property --er-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.er { display: flex; flex-direction: column; gap: 18px; }
.er-hero { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: center; padding: 26px 28px; overflow: hidden; position: relative; }
.er-hero::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, rgba(1, 229, 196, .22), transparent 70%); pointer-events: none; }
.er-hero h2 { font-size: 24px; letter-spacing: -.02em; margin: 0 0 6px; }
.er-meta { display: flex; gap: 12px; align-items: center; margin: 14px 0 18px; font-weight: 600; font-size: 14px; flex-wrap: wrap; }
.er-cost { color: var(--ink3); font-weight: 500; }
.er-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.er-go { height: 46px; padding: 0 26px; font-size: 15px; border-radius: 14px; }
.er-go.busy { opacity: .85; cursor: progress; }
.er-go.shake { animation: er-shake .4s; }
@keyframes er-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.er-again { all: unset; cursor: pointer; font-size: 13px; color: var(--ink3); border-bottom: 1px dashed var(--line2); }
.er-again:hover { color: var(--ink); }
.er-hero-r { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; }
.er-msg { min-height: 20px; font-size: 13px; color: var(--ink2); text-align: center; font-weight: 500; }

/* radar */
.er-radar { position: relative; width: 300px; height: 300px; }
.er-radar > div:not(.er-sweep) { position: absolute; inset: 0; }
.er-radar svg { width: 100%; height: 100%; overflow: visible; }
.er-orbit { fill: none; stroke: var(--line2); stroke-width: 1; stroke-dasharray: 2 5; }
.er-orbit.i { stroke-dasharray: none; opacity: .5; }
.er-prog-bg { fill: none; stroke: var(--line); stroke-width: 4; }
.er-prog { fill: none; stroke: url(#erg); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; filter: drop-shadow(0 0 5px rgba(1, 229, 196, .6)); }
.er-logo { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; transform: translate(-50%, -50%); object-fit: contain; filter: drop-shadow(0 4px 14px rgba(20, 200, 170, .55)); pointer-events: none; }
.er-sweep { position: absolute; inset: 38px; border-radius: 50%; opacity: 0; background: conic-gradient(from 0deg, transparent 0 62%, rgba(1, 229, 196, .0) 62%, rgba(1, 229, 196, .35) 100%); -webkit-mask: radial-gradient(circle, transparent 0 28%, #000 29%); mask: radial-gradient(circle, transparent 0 28%, #000 29%); transition: opacity .5s; }
.is-running .er-sweep { opacity: 1; animation: er-spin 2.2s linear infinite; }
@keyframes er-spin { to { transform: rotate(360deg); } }
.er-ping { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; border: 1.5px solid rgba(1, 229, 196, .6); opacity: 0; pointer-events: none; }
.is-running .er-ping { animation: er-ping 2.6s cubic-bezier(.2, .6, .3, 1) infinite; }
.is-running .er-ping.b { animation-delay: .85s; }
.is-running .er-ping.c { animation-delay: 1.7s; }
@keyframes er-ping { 0% { transform: scale(.7); opacity: .8; } 100% { transform: scale(4.2); opacity: 0; } }
.er-node .er-ring { fill: var(--card2); stroke: var(--line2); stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.er-node .er-nico { color: var(--ink3); transition: color .3s; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.er-node .er-nico * { vector-effect: none; }
.er-node.sel .er-ring { stroke: var(--pink); }
.er-node.sel .er-nico { color: var(--ink); }
.er-node.running .er-ring, .er-node.queued .er-ring { stroke: var(--pink); animation: er-node 1.3s ease-in-out infinite; }
.er-node.queued .er-ring { stroke-dasharray: 3 3; animation: none; opacity: .7; }
.er-node.running .er-nico { color: var(--pink); }
@keyframes er-node { 50% { fill: color-mix(in srgb, var(--pink) 28%, var(--card2)); } }
.er-node.done .er-ring { fill: color-mix(in srgb, var(--pink) 22%, var(--card2)); stroke: url(#erg); }
.er-node.done .er-nico { color: var(--ink); }
.er-node.failed .er-ring { stroke: var(--bad, #ff6b7d); stroke-dasharray: 2 3; }
.er-tick { opacity: 0; transition: opacity .3s; }
.er-tick circle { fill: #00cdb0; }
.er-node.done .er-tick { opacity: 1; }
.er-burst { fill: none; stroke: #00cdb0; stroke-width: 2; pointer-events: none; }

/* secoes + cartoes de fonte */
.er-sec { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.er-sec h3 { margin: 0; font-size: 17px; }
.er-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.er-card { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 20px; cursor: pointer; min-height: 158px;
  background: color-mix(in srgb, var(--card) 86%, transparent); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--gl-edge, none), var(--gl-drop, none); transition: transform .25s cubic-bezier(.3, .9, .3, 1), border-color .25s, background .25s; }
.er-card:hover { transform: translateY(-3px); border-color: var(--line2); }
.er-card:focus-visible { outline: 2px solid var(--pink-ink); outline-offset: 2px; }
.er-card b { font-size: 15px; margin-top: 4px; }
.er-cico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--pink-soft); color: var(--pink-ink); flex: none; }
.er-cico svg { width: 20px; height: 20px; }
.er-cdesc { font-size: 12.5px; color: var(--ink3); line-height: 1.4; }
.er-cstat { font-size: 13.5px; font-weight: 700; margin-top: auto; padding-top: 6px; }
.er-cfoot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; min-height: 22px; }
.er-err { color: var(--bad, #ff6b7d); font-size: 12px; line-height: 1.35; }
.er-retry { all: unset; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--pink-ink); border-bottom: 1px solid currentColor; }
.er-ctick { position: absolute; right: 14px; top: 14px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line2); color: transparent; transition: all .25s; }
.er-ctick svg { width: 14px; height: 14px; stroke-width: 3; }
.er-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .25s; background: var(--vice-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.er-card.sel { box-shadow: 0 8px 28px rgba(1, 229, 196, .18); }
.er-card.sel::before { opacity: 1; }
.er-card.sel .er-ctick { background: var(--vice-grad); border-color: transparent; color: var(--on-primary); transform: scale(1.05); }
.er-card[data-state="done"] .er-ctick { background: var(--vice-grad); border-color: transparent; color: var(--on-primary); }
.er-card[data-state="running"] { cursor: progress; }
.er-card[data-state="running"]::before { opacity: 1; background: conic-gradient(from var(--er-a), #01e5c4, #00cdb0, #00b89c, #01e5c4); animation: er-border 2.4s linear infinite; }
@keyframes er-border { to { --er-a: 360deg; } }
.er-card[data-state="running"] .er-cico { animation: er-pulse 1.4s ease-in-out infinite; }
@keyframes er-pulse { 50% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(1, 229, 196, .15); } }
.er-card[data-state="running"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .09) 50%, transparent 70%); background-size: 250% 100%; animation: er-shim 1.8s linear infinite; }
@keyframes er-shim { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.er-card[data-state="queued"] { opacity: .7; border-style: dashed; cursor: default; }
.er-card[data-state="failed"] { border-color: color-mix(in srgb, var(--bad, #ff6b7d) 55%, transparent); }
.er-card[data-state="skipped"] { opacity: .85; }
.er-dots { display: inline-flex; gap: 4px; }
.er-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); animation: er-dot 1s ease-in-out infinite; }
.er-dots i:nth-child(2) { animation-delay: .15s; }
.er-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes er-dot { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } }

/* resultados */
.er-bento { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; align-items: start; }
.er-res { padding: 18px 20px; }
.er-res.wide { grid-column: span 2; }
.er-res > header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.er-res > header .tiny { margin-left: auto; }
.er-body { display: flex; flex-direction: column; gap: 14px; }
.er-body h4 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.er-body h5 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink3); }
.er-badge { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--vice-grad); color: var(--on-primary); font-size: 10px; }
.er-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.er-who > div:first-child { margin-right: auto; }
.er-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.er-stats > div { background: var(--card2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; text-align: center; }
.er-stats b { display: block; font-size: 20px; letter-spacing: -.02em; }
.er-stats span { font-size: 11.5px; color: var(--ink3); }
.er-bio { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink2); }
.er-links { display: flex; gap: 8px; flex-wrap: wrap; }
.er-links a { font-size: 12.5px; padding: 5px 10px; border-radius: 99px; background: var(--card2); border: 1px solid var(--line); color: var(--pink-ink); text-decoration: none; }
.er-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.er-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.er-post { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: var(--card2); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform .2s, border-color .2s; }
a.er-post[href]:hover { transform: translateY(-2px); border-color: var(--line2); }
.er-post p { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--ink2); }
.er-post-top, .er-post-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink3); flex-wrap: wrap; }
.er-post-top { justify-content: space-between; }
.er-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 13.5px; }
.er-dl dt { color: var(--ink3); }
.er-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.er-dl a { color: var(--pink-ink); }
.er-none { margin: 0; font-size: 13.5px; color: var(--ink3); line-height: 1.5; }
.er-list { display: flex; flex-direction: column; gap: 10px; }
.er-ad { padding: 12px; border-radius: 14px; background: var(--card2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.er-ad p { margin: 0; font-size: 13px; color: var(--ink2); line-height: 1.45; }
.er-rank { margin: 0; padding: 0; list-style: none; counter-reset: r; display: flex; flex-direction: column; gap: 8px; }
.er-rank li { counter-increment: r; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--card2); border: 1px solid var(--line); border-radius: 14px; }
.er-rank li::before { content: counter(r); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pink-soft); color: var(--pink-ink); font-weight: 700; font-size: 12px; flex: none; }
.er-rank li > div:first-of-type { margin-right: auto; min-width: 0; }
.er-score { text-align: right; display: flex; flex-direction: column; }
.er-score.big b { font-size: 24px; }
.er-q { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink2); }
.er-res ul.er-res, ul.er-res { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.er-res li p, ul.er-res li p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink3); }
ul.er-res a { color: var(--pink-ink); font-weight: 600; text-decoration: none; }
.er-dist { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.er-dist > div { display: grid; grid-template-columns: 26px 1fr 36px; align-items: center; gap: 8px; }
.er-dist i { height: 7px; border-radius: 99px; background: var(--card2); overflow: hidden; display: block; }
.er-dist u { display: block; height: 100%; background: var(--vice-grad); border-radius: 99px; }
.er-quotes { display: flex; flex-direction: column; gap: 8px; }
.er-quotes blockquote { margin: 0; padding: 10px 12px; border-left: 3px solid var(--pink); background: var(--card2); border-radius: 0 12px 12px 0; font-size: 13px; line-height: 1.45; color: var(--ink2); }
.er-quotes.bad blockquote { border-left-color: var(--bad, #ff6b7d); }
.er-quotes cite { display: block; margin-top: 4px; font-style: normal; font-size: 11.5px; color: var(--ink3); }
.er-raw { font-size: 12px; margin-top: 12px; color: var(--ink3); }
.er-raw summary { cursor: pointer; }
.er-raw pre { max-height: 260px; overflow: auto; white-space: pre-wrap; background: var(--card2); padding: 10px; border-radius: 10px; }
@media (max-width: 760px) {
  .er-hero { grid-template-columns: 1fr; padding: 18px; }
  .er-hero-r { order: -1; }
  .er-radar { width: 250px; height: 250px; }
  .er-res.wide { grid-column: auto; }
  .er-bento { grid-template-columns: 1fr; }
  .er-go { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .is-running .er-sweep, .is-running .er-ping, .er-card[data-state="running"]::before, .er-card[data-state="running"]::after, .er-dots i { animation: none; } }

/* Enriquecimento: titulos de secao legiveis sobre o video (barra de vidro) */
.er-sec { align-self: flex-start; padding: 9px 16px; border-radius: 99px; background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--line2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--gl-edge, none), var(--gl-drop, none); }
.er-sec h3 { color: var(--ink); }
.er-sec .small.muted { color: var(--ink2); opacity: 1; }

.er-btns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.er-ext { text-decoration: none; }
.er-ext.off { opacity: .4; cursor: not-allowed; }

/* Enriquecimento: fontes dentro do hero */
.er-hero { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 28px; padding: 28px; }
.er-hero-l { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.er-hero-l h2 { margin: 0; }
.er-hero-l > p { margin: 0; max-width: 62ch; }
.er-hero-r { position: sticky; top: 16px; align-self: center; }
.er-hero .er-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.er-hero .er-card { min-height: 0; padding: 12px 14px 12px 14px; gap: 2px; border-radius: 16px; background: color-mix(in srgb, var(--card2) 70%, transparent); box-shadow: none; display: grid; grid-template-columns: 34px 1fr; grid-template-areas: "ico name" "ico stat" "foot foot"; column-gap: 12px; align-items: center; }
.er-hero .er-cico { grid-area: ico; width: 34px; height: 34px; border-radius: 11px; }
.er-hero .er-cico svg { width: 18px; height: 18px; }
.er-hero .er-card b { grid-area: name; margin: 0; font-size: 14px; padding-right: 26px; }
.er-hero .er-cdesc { display: none; }
.er-hero .er-cstat { grid-area: stat; margin: 0; padding: 0; font-size: 12.5px; font-weight: 600; color: var(--ink3); }
.er-hero .er-card[data-state="done"] .er-cstat { color: var(--ink); }
.er-hero .er-cfoot { grid-area: foot; min-height: 0; margin-top: 6px; }
.er-hero .er-cfoot:empty { display: none; }
.er-hero .er-ctick { right: 10px; top: 10px; width: 20px; height: 20px; }
.er-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.er-foot .er-meta { margin: 0; }
@media (max-width: 760px) {
  .er-hero { grid-template-columns: 1fr; padding: 18px; gap: 14px; }
  .er-hero-r { position: static; order: -1; }
  .er-hero .er-cards { grid-template-columns: 1fr; }
  .er-hero .er-card { padding: 12px 14px; }
  .er-foot { flex-direction: column; align-items: stretch; }
  .er-actions { flex-direction: column; align-items: stretch; }
  .er-again { text-align: center; }
}

/* O que descobrimos: grade de 2 colunas alinhada, sem buracos */
.er-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; align-items: stretch; gap: 16px; }
.er-res { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.er-res .er-body { flex: 1; }
.er-res.wide { grid-column: 1 / -1; }
.er-bento > .er-res:last-child:nth-child(odd) { grid-column: 1 / -1; }
.er-res .er-posts { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.er-res .er-raw { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .er-bento { grid-template-columns: 1fr; } .er-res.wide { grid-column: auto; } }

/* Largura de leitura: telas de listas e formularios nao precisam ocupar a tela toda em monitores grandes */
@media (min-width: 1100px) {
  #view:is([data-page="sites"], [data-page="integracoes"], [data-page="agendados"], [data-page="biblioteca"], [data-page="scrap"], [data-page="shorts"], [data-page="longos"], [data-page="editor"], [data-page="templates"]) > * { max-width: 1120px; margin-inline: auto; }
  /* detalhe do site: cabecalho em largura total, formularios e listas em largura de leitura */
  [data-tab="dados"] .card, [data-tab="prompts"] .card, [data-tab="clones"] .card { max-width: 960px; }
  .card.empty { max-width: 720px; margin-inline: auto; }
}

/* Montar: painel Design e animacoes */
.mb-design { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.mb-design.nudge { animation: mb-nudge .7s ease; }
@keyframes mb-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(1, 229, 196, 0); } 30% { box-shadow: 0 0 0 4px rgba(1, 229, 196, .55), 0 0 30px rgba(1, 229, 196, .35); } }
.mb-design .mb-strip-title { margin-bottom: 0; }
.mb-dirs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.mb-dir { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; background: var(--card2); border: 1px solid var(--line); position: relative; transition: transform .2s, border-color .2s, box-shadow .2s; }
.mb-dir:hover { transform: translateY(-2px); border-color: var(--line2); }
.mb-dir:focus-visible { outline: 2px solid var(--pink-ink); outline-offset: 2px; }
.mb-dir p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink2); }
.mb-dir b { font-size: 14.5px; }
.mb-dir.on { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink), var(--vice-glow); }
.mb-dir.on::after { content: "✓"; position: absolute; top: 10px; right: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--vice-grad); color: var(--on-primary); font-size: 12px; display: grid; place-items: center; }
.mb-dpal { display: flex; gap: 5px; }
.mb-dpal i { width: 24px; height: 24px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, .25); }
.mb-brandpal { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mb-custom textarea { width: 100%; resize: vertical; }
.mb-ahead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mb-ahead h4 { margin: 0; font-size: 15px; }
.mb-anims { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.mb-ia { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card2); border: 1px dashed var(--line2); }
.mb-ia > div { display: flex; flex-direction: column; }
.mb-dempty { display: flex; flex-direction: column; gap: 12px; }
.mb-dempty p { margin: 0; }

/* Design e animacoes: exemplos */
.mb-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.mb-split .mb-dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mb-split .mb-anims { grid-template-columns: 1fr; }
.mb-prevbox { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: var(--card2); border: 1px solid var(--line); }
.mb-dir.seen:not(.on) { border-color: var(--line2); background: color-mix(in srgb, var(--card2) 70%, var(--pink-soft)); }
.mb-check.seen { border-color: var(--line2); background: color-mix(in srgb, var(--card2) 70%, var(--pink-soft)); }
.mb-dchips { display: flex; gap: 8px; flex-wrap: wrap; }
.mb-dchip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 5px; border-radius: 99px; background: var(--card2); border: 1px solid var(--line); font-size: 12px; font-family: ui-monospace, monospace; }
.mb-dchip i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
/* miniatura de pagina */
.mb-pv { border-radius: 12px; overflow: hidden; font-size: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.mb-pv-nav { display: flex; gap: 10px; align-items: center; padding: 8px 12px; opacity: .9; }
.mb-pv-nav b { margin-right: auto; font-size: 12px; }
.mb-pv-hero { padding: 18px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.mb-pv-hero h5 { margin: 0; font-size: 19px; line-height: 1.1; font-weight: 700; }
.mb-pv-hero p { margin: 0; opacity: .75; font-size: 10.5px; }
.mb-pv-btns { display: flex; gap: 8px; margin-top: 4px; }
.mb-pv-btn { padding: 6px 12px; border-radius: 99px; font-weight: 700; font-size: 10px; }
.mb-pv-btn.ghost { background: transparent; border: 1px solid; }
.mb-pv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 12px 14px; }
.mb-pv-cards > div { border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 3px; }
.mb-pv-cards i { width: 16px; height: 16px; border-radius: 5px; display: block; }
.mb-pv-cards b { font-size: 10.5px; }
.mb-pv-cards span { opacity: .7; font-size: 8.5px; }
/* palco das animacoes */
.mb-stage { position: relative; height: 190px; border-radius: 12px; overflow: hidden; background: #14101c; border: 1px solid rgba(255, 255, 255, .08); padding: 14px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.mb-stage .st-line { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .35); width: 70%; }
.mb-stage .st-line.s { width: 45%; background: rgba(255, 255, 255, .2); }
.mb-stage .st-line.c { margin: 0 auto; }
.st-nav { display: flex; gap: 8px; align-items: center; }
.st-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--vice-grad); }
.st-title { height: 16px; border-radius: 5px; background: #fff; width: 80%; }
.st-title.b { width: 55%; background: #00cdb0; }
.st-title.c { position: absolute; left: 50%; top: 50%; width: 55%; margin: -8px 0 0 -27.5%; z-index: 4; }
.st-text { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .3); width: 90%; }
.st-btn { align-self: flex-start; padding: 9px 22px; border-radius: 99px; background: var(--vice-grad); height: 28px; box-sizing: border-box; color: var(--on-primary); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.st-btn:empty { width: 100px; padding: 0; }
.st-btn.mag { align-self: center; padding: 0 26px; }
.st-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.st-grid.one { grid-template-columns: 1fr; justify-items: center; }
.st-card { border-radius: 12px; padding: 12px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .12); display: flex; flex-direction: column; gap: 7px; }
.st-card.big { width: 56%; padding: 18px; }
.st-ic { width: 22px; height: 22px; border-radius: 7px; background: var(--vice-grad); }
.st-cursor { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: 18px 0 0 24px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .25); z-index: 5; pointer-events: none; }
.st-layer { position: absolute; left: -10%; right: -10%; border-radius: 50%; }
.st-layer.l1 { bottom: -60px; height: 120px; background: #4b2c73; }
.st-layer.l2 { bottom: -70px; height: 110px; background: #00b89c; opacity: .85; width: 70%; left: 15%; }
.st-layer.l3 { bottom: -50px; height: 90px; background: #00cdb0; width: 40%; left: 30%; }
.st-count { font-size: 44px; font-weight: 800; text-align: center; background: var(--vice-grad); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.02em; }
.st-marq { display: flex; white-space: nowrap; width: max-content; font-weight: 800; font-size: 22px; color: #fff; letter-spacing: .05em; }
.st-marq span { padding-right: 8px; }
.st-sec { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 22px; color: #fff; }
.st-sec.s1 { background: #2a1f3d; }
.st-sec.s2 { background: var(--vice-grad); }
@media (max-width: 900px) { .mb-split { grid-template-columns: 1fr; } .mb-prevbox { position: static; } .mb-split .mb-dirs { grid-template-columns: 1fr; } }
.mb-pv-foot { padding: 0 12px 10px; font-size: 8.5px; opacity: .55; }


/* Montar em etapas */
.mb [hidden] { display: none !important; }
.mb-steps { position: sticky; top: 0; z-index: 20; display: flex; gap: 6px; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.mb-step { flex: 1 1 0; min-width: max-content; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--ink3); font-weight: 600; font-size: 13px; cursor: pointer; transition: background .15s, color .15s; }
.mb-step:hover { background: var(--card2); color: var(--ink); }
.mb-step.on { background: var(--sel); border-color: var(--pink); color: var(--ink); }
.mb-step.done { color: var(--ink); }
.mb-step:focus-visible { outline: 2px solid var(--pink-ink); outline-offset: 2px; }
.mb-sn { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--line2); color: var(--ink); }
.mb-step.on .mb-sn { background: var(--vice-grad); color: var(--on-primary); }
.mb-step.done .mb-sn { background: var(--ok-soft, rgba(60, 200, 140, .25)); }
.mb-wiz { display: flex; flex-direction: column; gap: 16px; }
.mb-pane { display: flex; flex-direction: column; gap: 16px; }
.mb-nav { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.mb-opts2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.mb-report { margin-bottom: 0; }
.mb-report ul { margin: 6px 0 10px; padding-left: 18px; }
.mb-opts2 select { width: 100%; }
.mb-ptabs { display: flex; gap: 6px; flex-wrap: wrap; }
.mb-ptab { padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--card2); color: var(--ink3); font-weight: 600; font-size: 13px; cursor: pointer; }
.mb-ptab.on { background: var(--sel); border-color: var(--pink); color: var(--ink); }
.mb-prows { display: flex; flex-direction: column; gap: 8px; }
.mb-prow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card2); }
.mb-prow.off { opacity: .55; border-style: dashed; }
.mb-pfields { display: flex; gap: 10px; flex: 1 1 320px; min-width: 0; flex-wrap: wrap; }
.mb-pfields .input { flex: 1 1 160px; min-width: 0; }
.mb-slug { display: flex; align-items: center; gap: 4px; flex: 1 1 160px; color: var(--ink3); }
.mb-mv.on { opacity: 1; }
.mb-todo, .mb-ready { padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); font-size: 13px; }
.mb-ready { background: var(--sel); }
.mb-todo ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.mb-todo li { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.mb-pane > .mb-sum { position: static; max-height: none; }
@media (max-width: 700px) { .mb-opts2 { grid-template-columns: 1fr; } .mb-step .mb-sl { display: none; } .mb-step.on .mb-sl { display: inline; } }
.mb-refmode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mb-modeopt { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card2); color: var(--ink); cursor: pointer; }
.mb-modeopt .small { color: var(--ink3); }
.mb-modeopt.on { background: var(--sel); border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink); }
@media (max-width: 700px) { .mb-refmode { grid-template-columns: 1fr; } }
/* radar do enriquecimento: nome ao passar o mouse e luz no cartao */
.er-radar .er-node { cursor: pointer; }
.er-radar .er-node .er-ring { transition: fill .3s, stroke .3s, filter .2s; }
.er-tip { position: absolute; z-index: 3; transform: translate(-50%, -100%); padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--ink); background: var(--card-solid, #1b1424); border: 1px solid var(--pink); box-shadow: 0 6px 20px rgba(1, 229, 196, .35); pointer-events: none; opacity: 0; transition: opacity .15s; }
.er-tip.on { opacity: 1; }
.er-node.hot .er-ring { stroke: var(--pink); filter: drop-shadow(0 0 8px rgba(1, 229, 196, .9)); }
.er-card.glow { border-color: var(--pink); transform: translateY(-3px); box-shadow: 0 0 0 1px var(--pink), 0 0 22px 2px rgba(1, 229, 196, .55), 0 0 48px rgba(0, 184, 156, .35); }
.sm-card.busy { animation: sm-busy 1.3s ease-in-out infinite; }
@keyframes sm-busy { 50% { opacity: .45; } }
/* aba Dados: identidade + dados coletados lado a lado */
.dd { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px; align-items: start; }
.dd-main { display: flex; flex-direction: column; gap: 18px; }
.dd-grp h3 { margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.dd-actions { gap: 10px; padding-top: 4px; }
.dd-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.dd-src { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.dd-shead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dd-blk h4 { margin: 0 0 8px; font-size: 13px; }
.dd-bio { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line); font-size: 13px; line-height: 1.5; white-space: pre-wrap; max-height: 150px; overflow: auto; overflow-wrap: anywhere; }
.dd-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 8px; }
.dd-post { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--card2); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.dd-post:hover { border-color: var(--pink); transform: translateY(-2px); }
.dd-post img, .dd-noimg { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; background: var(--bg2); display: grid; place-items: center; color: var(--ink3); }
.dd-post .chip { position: absolute; top: 14px; left: 14px; font-size: 10.5px; padding: 1px 7px; }
.dd-post p { margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--ink3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dd-raw summary { cursor: pointer; font-size: 12.5px; color: var(--ink3); }
.dd-raw pre { white-space: pre-wrap; overflow: auto; max-height: 300px; margin: 8px 0 0; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .dd { grid-template-columns: minmax(0, 1fr); } .dd-side { position: static; max-height: none; } }
/* animacao de geracao do prompt */
.mb-genanim { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: center; border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink), 0 0 32px rgba(1, 229, 196, .35); }
.mb-gmos { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; border-radius: 16px; overflow: hidden; }
.mb-gtile { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--card2); animation: mb-pick 4.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.mb-gtile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-gph { width: 100%; height: 100%; background: linear-gradient(135deg, rgba(1, 229, 196, .25), rgba(0, 184, 156, .3)); }
@keyframes mb-pick { 0%, 30%, 100% { transform: scale(1); filter: brightness(.65); box-shadow: none; } 8%, 20% { transform: scale(1.07); filter: brightness(1.1); box-shadow: 0 0 0 2px var(--pink), 0 0 22px rgba(1, 229, 196, .75); position: relative; z-index: 1; } }
.mb-gscan { position: absolute; left: 0; right: 0; top: 0; height: 36px; background: linear-gradient(180deg, transparent, rgba(1, 229, 196, .45), transparent); animation: mb-scan 2.4s linear infinite; pointer-events: none; }
@keyframes mb-scan { from { transform: translateY(-40px); } to { transform: translateY(290px); } }
.mb-gtext h3 { margin: 0 0 12px; }
.mb-gsteps { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mb-gsteps li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink3); transition: color .3s; }
.mb-gdot { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line2); display: grid; place-items: center; }
.mb-gsteps li.cur { color: var(--ink); font-weight: 600; }
.mb-gsteps li.cur .mb-gdot { border-color: var(--pink); animation: mb-gpulse 1.1s ease-in-out infinite; }
.mb-gsteps li.cur > span:last-child::after { content: "..."; display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; animation: mb-dots 1.2s steps(4) infinite; }
.mb-gsteps li.done { color: var(--ink); }
.mb-gsteps li.done .mb-gdot { background: var(--vice-grad); border-color: transparent; }
.mb-gsteps li.done .mb-gdot::after { content: ""; width: 6px; height: 3px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
@keyframes mb-gpulse { 50% { box-shadow: 0 0 0 5px rgba(1, 229, 196, .25); } }
@keyframes mb-dots { from { width: 0; } to { width: 1.2em; } }
.mb-gsub { margin: 0 0 4px; color: var(--pink-ink); min-height: 18px; }
@media (max-width: 700px) { .mb-genanim { grid-template-columns: 1fr; } .mb-gmos { max-width: 260px; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .mb-gtile, .mb-gscan, .mb-gsteps li.cur .mb-gdot, .mb-gsteps li.cur > span:last-child::after { animation: none; } }
/* Teal Lumina: borda luminosa sutil no vidro (tema escuro) e luz do ambiente */
:root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .shell .side, :root:not([data-theme="light"]) .modal { border-top-color: rgba(1, 229, 196, .3); border-left-color: rgba(1, 229, 196, .3); }

.mb-tpl .chip.ai { margin-top: 6px; font-size: 10.5px; background: var(--pink-soft); color: var(--pink-ink); border-color: transparent; align-self: flex-start; }