:root {
  --bg: #141210;
  --bg2: #1a1715;
  --panel: #201c19;
  --panel2: #29241f;
  --line: #2f2924;
  --line2: #3c342d;
  --text: #ece6e1;
  --muted: #9a8f86;
  --accent: #e8813f;
  --accent2: #ffa063;
  --accent-ink: #1e0f04;
  --glow: rgba(232,129,63,.35);
  --ok: #3ccf91;
  --warn: #f5c451;
  --err: #ff5d6c;
  --video: #b38bff;
  --model: #4cc3ff;
  --radius: 10px;
  --font: "Segoe UI Variable Text", "Segoe UI", Inter, "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 13.5px/1.45 var(--font); overflow: hidden; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
input, select, textarea { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; outline: none; min-width: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input[type=range] { padding: 0; accent-color: var(--accent); background: none; border: 0; }
input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
input[type=color] { width: 30px; height: 28px; padding: 2px; }
code, .mono { font-family: var(--mono); font-size: 12px; }
code { background: var(--bg2); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 22px; } h2 { font-size: 17px; } h3 { font-size: 14px; }
p { margin: 4px 0; }
.muted { color: var(--muted); } .small { font-size: 12px; }
.row { display: flex; align-items: center; } .col { display: flex; flex-direction: column; }
.gap6 { gap: 6px; } .gap8 { gap: 8px; } .wrap { flex-wrap: wrap; }
.grow { flex: 1; } .w40 { width: 40px; text-align: right; } .w90 { width: 90px; }
.ico { flex-shrink: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 7px; justify-content: center; background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; padding: 7px 13px; transition: background .12s, border-color .12s; white-space: nowrap; }
.btn:hover:not(:disabled) { background: #262b35; border-color: #3d4452; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: var(--accent2); border-color: var(--accent2); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover:not(:disabled) { background: var(--panel2); }
.btn.danger, .danger { color: var(--err); }
.btn.danger.make, .btn.danger:not(.ghost) { background: var(--err); color: #fff; border-color: var(--err); }
.btn.tiny { padding: 4px 9px; font-size: 12px; gap: 5px; border-radius: 7px; }
.icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--muted); }
.icon-btn:hover:not(:disabled) { background: var(--panel2); color: var(--text); }
.icon-btn.on { background: rgba(242,163,58,.15); color: var(--accent); border-color: rgba(242,163,58,.4); }
.icon-btn.spin .ico { animation: spin 1s linear infinite; }
.linkish { background: none; border: 0; color: var(--accent); padding: 0; font-size: 12px; text-align: left; }
.pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; background: var(--panel2); border: 1px solid var(--line2); color: var(--muted); }
.pill.ok { color: var(--ok); border-color: rgba(60,207,145,.35); background: rgba(60,207,145,.08); }
.pill.warn { color: var(--warn); border-color: rgba(245,196,81,.35); background: rgba(245,196,81,.08); }
.seg { display: inline-flex; background: var(--bg2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; padding: 5px 11px; border-radius: 6px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.seg button.on { background: var(--panel2); color: var(--text); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 3px rgba(0,0,0,.4); }
.seg.full { display: flex; } .seg.full button { flex: 1; justify-content: center; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { border: 1px solid var(--line2); background: var(--bg2); border-radius: 99px; padding: 3px 10px; font-size: 12px; }
.chip.on { border-color: var(--accent); color: var(--accent); background: rgba(242,163,58,.1); }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); margin: 8px 0; }
.field input, .field select { color: var(--text); font-size: 13px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin: 7px 0; }
.error-line { color: var(--err); font-size: 12px; margin-top: 6px; }
.hint { color: var(--warn); font-size: 12px; margin-top: 6px; }
.spinner { width: 26px; height: 26px; border: 2.5px solid rgba(242,163,58,.25); border-top-color: var(--accent); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Layout */
.boot { background: var(--bg2); height: 100%; display: grid; place-items: center; align-content: center; gap: 14px; color: var(--muted); letter-spacing: .2em; }
.app { display: flex; height: 100%; }
.rail { width: 74px; background: var(--bg2); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 12px 0 10px; gap: 3px; flex-shrink: 0; }
.logo { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.logo img { width: 100%; height: 100%; display: block; }
.boot img { width: 160px; border-radius: 30px; }
.logo span { font-weight: 800; color: var(--accent-ink); letter-spacing: -.03em; font-size: 16px; }
.rail-btn { position: relative; width: 64px; padding: 8px 0 6px; border: 0; background: none; color: var(--muted); border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; }
.rail-btn:hover { color: var(--text); background: var(--panel); }
.rail-btn.on { color: var(--accent); background: rgba(242,163,58,.1); }
.rail-badge { position: absolute; top: 4px; right: 10px; background: var(--accent); color: var(--accent-ink); font-style: normal; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; padding: 0 4px; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.page { padding: 26px 32px; overflow: auto; height: 100%; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.section-title { margin: 26px 0 10px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; }
.card h3 { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.empty-state { display: grid; place-items: center; gap: 8px; color: var(--muted); padding: 50px 20px; text-align: center; }

/* Render page (bố cục theo app mẫu) */
.render-page { display: flex; height: 100%; min-height: 0; }
.canvas-col { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; background: var(--bg); }
.canvas { flex: 1; position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #1b1815 0%, var(--bg) 70%); cursor: grab; touch-action: none; }
.canvas:active { cursor: grabbing; }
.canvas-watermark { position: absolute; left: 50%; top: 45%; width: 360px; transform: translate(-50%, -50%); opacity: .06; pointer-events: none; filter: grayscale(.3); border-radius: 40px; }
.canvas-layer { position: absolute; left: 0; top: 0; width: 1px; height: 1px; transform-origin: 0 0; }
.edges { position: absolute; overflow: visible; left: 0; top: 0; pointer-events: none; }
.edge { fill: none; stroke: #4a423b; stroke-width: 1.6; stroke-dasharray: 5 5; pointer-events: stroke; }
.edge.on { stroke: var(--accent); stroke-dasharray: none; }
.edge.wait { stroke: var(--accent); animation: dash 1s linear infinite; }
.edge.drafting { stroke: var(--accent); }
@keyframes dash { to { stroke-dashoffset: -20; } }
.node { position: absolute; user-select: none; }
.node-card { position: relative; border-radius: 14px; overflow: hidden; background: #0c0b0a; border: 1.5px solid #2f2924; box-shadow: 0 10px 28px rgba(0,0,0,.45); display: flex; transition: border-color .12s, box-shadow .12s; }
.node:hover .node-card { border-color: #4a423b; }
.node.sel .node-card { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 26px var(--glow), 0 10px 30px rgba(0,0,0,.5); }
.node-card img, .node-card video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.node-card video { pointer-events: auto; }
.node-label { position: absolute; left: -10px; right: -10px; top: calc(100% + 7px); text-align: center; display: flex; flex-direction: column; gap: 1px; pointer-events: none; }
.node-label b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-label span { font-size: 10.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.node.sel .node-label b { color: var(--accent2); }
.port { position: absolute; top: 0; width: 14px; height: 14px; border-radius: 4px; background: #3a332d; color: #cfc6be; display: grid; place-items: center; transform: translateY(-50%); opacity: .85; }
.port.in { left: -7px; } .port.out { right: -7px; cursor: crosshair; }
.port.out:hover { background: var(--accent); color: var(--accent-ink); }
.dot { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.kind-chip { position: absolute; left: 8px; bottom: 8px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.6); display: grid; place-items: center; }
.pending, .node-error, .model-thumb { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 10px; text-align: center; color: var(--muted); font-size: 12px; min-width: 0; }
.node.k-pending .node-card { background: linear-gradient(110deg, #141210 30%, #221c17 50%, #141210 70%); background-size: 250% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }
.node.k-error .node-card { border-color: rgba(255,93,108,.55); background: #1b1111; }
.node-error { justify-content: space-between; padding: 10px 10px 8px; }
.err-text { font-size: 11px; line-height: 1.35; color: #ffb3ba; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; word-break: break-word; user-select: text; text-align: left; width: 100%; }
.err-actions { display: flex; gap: 6px; justify-content: center; flex-shrink: 0; }
.model-thumb { color: var(--model); background: radial-gradient(circle, #1b2730, #0c0b0a 70%); }
.model-thumb b { font-size: 13px; letter-spacing: .1em; }
.note-body { padding: 10px 12px; white-space: pre-wrap; font-size: 12.5px; color: #f5e2c8; background: #2a2015; width: 100%; overflow: auto; }
.node.k-note .node-card { border-color: #5a4426; }
.marquee { position: absolute; border: 1px dashed var(--accent); background: rgba(232,129,63,.08); pointer-events: none; }
.canvas-empty { position: absolute; inset: 0 0 90px 0; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--muted); text-align: center; pointer-events: none; padding: 40px; }
.canvas-empty h3 { color: var(--text); font-size: 17px; }
.canvas-empty p { max-width: 480px; }
.proj-chip { position: absolute; left: 14px; top: 12px; display: flex; align-items: center; gap: 2px; background: rgba(26,23,21,.9); border: 1px solid var(--line); border-radius: 10px; padding: 3px 4px 3px 12px; backdrop-filter: blur(6px); }
.pc-name { font-size: 12.5px; font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 6px; }
.pc-name i { color: var(--accent); font-style: normal; font-size: 9px; }
.pc-name.editable { cursor: text; border-radius: 5px; padding: 2px 4px; margin-left: -4px; }
.pc-name.editable:hover { background: rgba(255,255,255,.07); }
.pc-name-input { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text, #f2ede8); background: #100e0c; border: 1px solid var(--accent); border-radius: 5px; padding: 2px 5px; margin: 0 6px 0 -6px; outline: none; min-width: 8ch; max-width: 260px; }
.proj-chip .sep { width: 1px; height: 18px; background: var(--line2); margin: 0 4px; }
.canvas-tools { position: absolute; right: 14px; top: 12px; display: flex; flex-direction: column; gap: 6px; }
.canvas-tools button { position: relative; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line); background: rgba(32,28,25,.92); color: #d8cfc7; display: grid; place-items: center; }
.canvas-tools button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent2); }
.badge-n { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font: 700 10px var(--font); display: grid; place-items: center; padding: 0 4px; }
.mask-badge { position: absolute; left: 14px; bottom: 96px; display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid rgba(255,48,64,.5); border-radius: 10px; padding: 6px 6px 6px 6px; font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.mask-badge img { width: 54px; height: 36px; object-fit: cover; border-radius: 6px; }

/* Thanh prompt + Make */
.prompt-bar { display: flex; gap: 12px; align-items: flex-end; padding: 12px 18px 14px; background: linear-gradient(0deg, var(--bg) 60%, transparent); position: relative; z-index: 3; }
.pb-input { flex: 1; display: flex; align-items: flex-end; gap: 4px; background: #24201c; border: 1px solid var(--line2); border-bottom: 2px solid var(--accent); border-radius: 8px; padding: 6px 6px 6px 12px; box-shadow: 0 6px 24px rgba(232,129,63,.08); }
.pb-input textarea { flex: 1; resize: none; background: none; border: 0; padding: 7px 0; font-size: 13.5px; line-height: 1.45; max-height: 140px; min-height: 22px; }
.pb-input textarea:focus { border: 0; }
.pb-tools { display: flex; gap: 2px; }
.make-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.make-btn { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 26px; border-radius: 8px; font-weight: 700; font-size: 14.5px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 24px var(--glow); transition: background .12s; }
.make-btn:hover:not(:disabled) { background: var(--accent2); }
.make-btn:disabled { background: #2a2520; color: #8b8178; border-color: var(--line2); box-shadow: none; opacity: 1; }
.make-meta { font-size: 10.5px; color: var(--muted); max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu.up { top: auto; bottom: 36px; }

/* Panel phải */
.splitter { width: 5px; cursor: col-resize; background: var(--bg2); border-left: 1px solid var(--line); flex-shrink: 0; }
.splitter:hover { background: rgba(232,129,63,.3); }
.right-panel { flex-shrink: 0; display: flex; flex-direction: column; background: var(--bg2); min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 8px 10px; gap: 8px; }
.inspector { display: flex; flex-direction: column; flex-shrink: 0; }
.inspector.drawing { flex: 1; min-height: 0; }
.enlarge { display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; border-radius: 8px; border: 1px solid var(--line2); background: var(--panel2); color: var(--text); font-size: 13.5px; font-weight: 600; flex-shrink: 0; }
.enlarge:hover:not(:disabled) { background: #332c26; border-color: var(--accent); color: var(--accent2); }
.enlarge.on { border-color: var(--accent); color: var(--accent2); }
.insp-enlarged { flex: 1; min-height: 0; padding: 10px 14px 0; background: var(--bg); display: flex; flex-direction: column; }
.mini-canvas { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.mini-canvas-stage { position: relative; height: 330px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); display: flex; }
.mini-canvas-stage > * { flex: 1; }
.canvas-tools.mini { right: 8px; top: 8px; flex: none; }
.canvas-tools.mini button { width: 32px; height: 32px; }
.pb-input { position: relative; }
.pb-target { position: absolute; left: 10px; top: -9px; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 5px; background: #2f2924; color: #cfc4b9; border: 1px solid var(--line2); }
.pb-target.area { background: var(--accent); color: #1a1209; border-color: var(--accent); }
.pb-input.area { border-color: var(--accent); }
.pl-pending { position: absolute; display: grid; place-items: center; border: 2px dashed #22d3c5; background: rgba(34,211,197,.08); z-index: 4; pointer-events: none; }
.pl-pending.error { border-color: var(--err); background: rgba(255,80,90,.1); color: #ffb3ba; }
.pl-pending .pl-err-msg { max-width: 90%; margin-top: 6px; padding: 4px 8px; border-radius: 6px; background: rgba(20,17,16,.85); font-size: 12px; text-align: center; }
.pl-pending.error { align-content: center; }
.spinner.sm { width: 14px; height: 14px; border-width: 2px; }
.lthumb.mask-mini { background: #0e0c0b; cursor: pointer; color: #fff; }
.lname.err { color: #ffb3ba; }
.lname small { font-weight: 400; }
.mask-menu { display: flex; flex-direction: column; background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; margin: 2px 8px 6px 40px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.mask-menu button { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; background: none; color: var(--text); font-size: 12px; border-radius: 6px; text-align: left; }
.mask-menu button:hover { background: #3a3129; }
.mask-view { z-index: 3; pointer-events: none; }
.insp-enlarged .inspector { flex: 1; min-height: 0; }
.insp-enlarged .insp-stage { border: 1px solid var(--line); }
.insp-tabs { display: flex; margin-top: 4px; background: var(--panel); border-radius: 6px 6px 0 0; overflow: hidden; }
.insp-tabs button { flex: 1; height: 38px; border: 0; background: none; color: var(--muted); font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.insp-tabs button.on { background: var(--panel2); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.insp-tabs button:disabled { opacity: .35; }
.insp-stage { position: relative; height: 300px; background: #100e0c; border-radius: 0 0 8px 8px; overflow: hidden; display: flex; }
.inspector.drawing .insp-stage { flex: 1; height: auto; min-height: 0; }
.insp-empty { flex: 1; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--muted); text-align: center; padding: 20px; font-size: 12.5px; }
.insp-empty.err { color: #ffb3ba; }
.img-preview, .vid-preview { flex: 1; position: relative; display: flex; min-width: 0; }
.vid-preview video { width: 100%; height: 100%; background: #000; }
.res-tag { position: absolute; right: 10px; bottom: 8px; font: 10.5px var(--mono); color: var(--muted); }
.zoom-pct { left: auto; right: 10px; bottom: 22px; background: none; }
.pano-toggle { position: absolute; left: 8px; top: 8px; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line2); background: rgba(0,0,0,.5); display: grid; place-items: center; color: var(--muted); }
.pano-toggle.on { color: var(--accent); border-color: var(--accent); }
.side-tools { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.side-tools .icon-btn { background: rgba(20,18,16,.85); border: 1px solid var(--line); }
.model-wrap { flex: 1; position: relative; display: flex; }
.mstats { position: absolute; left: 8px; top: 8px; font: 11px/1.5 var(--font); background: rgba(10,9,8,.7); border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; }
.bridge-pop { position: absolute; right: 50px; top: 8px; width: 270px; background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 3; box-shadow: 0 14px 40px rgba(0,0,0,.6); }
.bp-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.bp-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 0; }
.bp-row .dot { position: static; width: 8px; height: 8px; box-shadow: none; }
.dot.ok { background: var(--ok); } .dot.wait { background: var(--warn); }
.bp-size { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; }
.bp-size input { width: 80px; }

.gen-section { display: flex; flex-direction: column; gap: 8px; }
.type-tabs { display: flex; border-bottom: 1px solid var(--line); }
.type-tabs button { flex: 1; height: 40px; border: 0; background: none; color: var(--muted); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13.5px; }
.type-tabs button.on { color: var(--accent2); box-shadow: inset 0 -2px 0 var(--accent); }
.gen-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.mode-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line2); background: var(--panel2); border-radius: 8px; padding: 7px 12px; font-weight: 600; }
.mode-btn:hover { border-color: var(--accent); }
.dd-wrap { position: relative; }
.dd-menu { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; min-width: 220px; background: var(--panel); border: 1px solid var(--line2); border-radius: 9px; padding: 4px; box-shadow: 0 16px 40px rgba(0,0,0,.6); display: flex; flex-direction: column; max-height: 360px; overflow: auto; }
.dd-menu button { display: flex; align-items: center; gap: 9px; border: 0; background: none; text-align: left; padding: 8px 9px; border-radius: 6px; font-size: 13px; }
.dd-menu button:hover, .dd-menu button.on { background: var(--panel2); }
.dd-menu button.on { box-shadow: inset 2px 0 0 var(--accent); }
.dd-menu .nokey { color: var(--warn); margin-left: 4px; }
.fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fld-label { font-size: 11.5px; color: var(--muted); }
.fld select, .fld input { width: 100%; }
.engine-dd { width: 100%; display: flex; align-items: center; gap: 9px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 10px; }
.engine-dd:hover { border-color: var(--accent); }
.engine-dd-name { font-weight: 600; flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tags { display: flex; gap: 4px; flex-shrink: 0; }
.tags i { font-style: normal; font-size: 10px; border: 1px solid var(--line2); border-radius: 99px; padding: 1px 7px; color: #cfc4ba; }
.prov-logo { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--font); flex-shrink: 0; }
.prov-logo.g { background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); color: #fff; }
.prov-logo.o { background: #e7e7e7; color: #111; }
.prov-logo.f { background: #6d28d9; color: #fff; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.chk { display: flex; align-items: center; gap: 7px; height: 34px; font-size: 12.5px; }
.key-warn { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; border: 1px dashed rgba(245,196,81,.5); background: rgba(245,196,81,.06); color: var(--warn); font-size: 12px; text-align: left; }
.refs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ref { position: relative; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line2); background: var(--bg2); display: grid; place-items: center; color: var(--muted); }
.ref img { width: 100%; height: 100%; object-fit: cover; }
.ref.src { border-color: var(--accent); }
.ref.src.need { border-color: var(--warn); border-style: dashed; }
.ref button { position: absolute; top: 2px; right: 2px; width: 17px; height: 17px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); color: #fff; display: grid; place-items: center; padding: 0; }
.ref.add { border-style: dashed; }
.mask-dot { position: absolute; right: 3px; bottom: 3px; width: 10px; height: 10px; border-radius: 50%; background: #ff3040; border: 2px solid #000; }
.mask-chip { display: inline-flex; align-items: center; gap: 4px; color: #ff8a95; background: rgba(255,48,64,.12); border: 0; border-radius: 6px; padding: 4px 8px; font-size: 11.5px; }
.preset-tabs { display: flex; background: var(--panel); border-radius: 8px; overflow: hidden; }
.preset-tabs button { flex: 1; height: 38px; border: 0; background: none; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 600; font-size: 13px; }
.preset-tabs button.on { background: var(--panel2); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.tile { position: relative; aspect-ratio: 1 / 1.02; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; background: var(--panel); border-radius: 8px; color: #e6ddd5; padding: 8px 4px; }
.tile .ico { color: #f0e6dc; }
.tile span { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.2; }
.tile:hover { border-color: var(--accent); background: #2b241e; }
.tile:hover .ico { color: var(--accent2); }
.tile { cursor: pointer; user-select: none; }
.tile span { pointer-events: none; }
.tile.add { border: 1px dashed var(--line2); background: transparent; color: var(--muted); }
.tile.add .ico { color: var(--muted); }
.tile-acts { position: absolute; top: 4px; left: 4px; display: flex; gap: 3px; opacity: 0; transition: opacity .12s; pointer-events: auto !important; }
.tile:hover .tile-acts, .tile:focus-within .tile-acts { opacity: 1; }
.tile-acts button { width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--line2); background: rgba(20,18,16,.92); color: #e6ddd5; display: grid; place-items: center; padding: 0; }
.tile-acts button:hover { border-color: var(--accent); color: var(--accent2); }
.tile-acts .ico { color: inherit !important; }
.span2 { grid-column: span 2; }
.icon-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 4px; }
.icon-pick button { height: 34px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg2); color: #d8cfc7; display: grid; place-items: center; }
.icon-pick button.on { border-color: var(--accent); color: var(--accent2); background: #2b241e; }
.preset-editor textarea { width: 100%; resize: vertical; font: inherit; font-size: 13px; }
.preset-editor code { font-size: 11px; background: var(--bg2); padding: 1px 5px; border-radius: 4px; }
.tile-badge { position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; border-radius: 4px; background: var(--panel2); display: grid; place-items: center; color: var(--accent2); }
.pad { padding: 10px; }

/* Fill prompt */
.w640 { width: min(680px, 92vw); }
.fp-preview { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; line-height: 1.7; font-size: 13.5px; }
.fp-preview b { font-weight: 600; }
.fp-preview b.ok { color: var(--accent2); }
.fp-preview b.todo { color: #9fb7cc; border-bottom: 1px dashed #9fb7cc; }
.fp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Chụp cửa sổ */
.capture .source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; max-height: 60vh; overflow: auto; }
.crop-box { position: relative; cursor: crosshair; user-select: none; max-height: 62vh; display: flex; justify-content: center; }
.crop-box img { max-width: 100%; max-height: 62vh; display: block; }
.crop-rect { position: absolute; border: 2px dashed var(--accent); background: rgba(232,129,63,.12); box-shadow: 0 0 0 9999px rgba(0,0,0,.45); pointer-events: none; }
.crop-box { width: fit-content; margin: 0 auto; }

/* RAL */
.ral { position: relative; }
.ral-btn { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font-size: 12.5px; }
.sw { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(255,255,255,.2); flex-shrink: 0; }
.ral-pop { position: absolute; z-index: 30; left: 0; right: 0; top: 36px; background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; padding: 8px; box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.ral-pop input { width: 100%; margin-bottom: 6px; }
.ral-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-height: 220px; overflow: auto; }
.ral-grid button { display: flex; gap: 5px; align-items: center; border: 1px solid transparent; background: var(--bg2); border-radius: 6px; padding: 4px; }
.ral-grid button.on, .ral-grid button:hover { border-color: var(--accent); }

/* Modals */
.modal-back { position: fixed; inset: 0; background: rgba(5,6,8,.66); backdrop-filter: blur(3px); z-index: 100; display: grid; place-items: center; }
.modal { background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; padding: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 10px; max-height: 90vh; overflow: auto; }
.modal input { width: 100%; }
.w420 { width: 420px; } .w520 { width: 520px; } .w900 { width: min(1100px, 92vw); }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.list-edit { display: flex; flex-direction: column; gap: 6px; }
.list-edit input:first-child { width: 120px; }

/* Viewer */
.viewer { position: fixed; inset: 0; z-index: 90; background: #0b0c0f; display: flex; flex-direction: column; }
.viewer-top { height: 54px; display: flex; align-items: center; gap: 16px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.viewer-main { flex: 1; display: flex; min-height: 0; }
.viewer-stage { flex: 1; min-width: 0; display: flex; position: relative; }
.viewer-side { width: 300px; border-left: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 16px; overflow: auto; background: var(--bg2); }
.viewer-video { width: 100%; height: 100%; background: #000; }
.info { display: flex; flex-direction: column; gap: 7px; }
.info-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.info-row span { color: var(--muted); }
.info-prompt { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; }
.info-prompt p { font-size: 12.5px; color: #cfd3da; user-select: text; white-space: pre-wrap; max-height: 220px; overflow: auto; }
.actions { display: flex; flex-direction: column; gap: 6px; }
.actions .btn { justify-content: flex-start; }
.zoom-box { flex: 1; overflow: hidden; display: grid; place-items: center; cursor: grab; position: relative; }
.zoom-box img { max-width: 100%; max-height: 100%; transform-origin: center; user-select: none; }
.zoom-pct { position: absolute; bottom: 10px; left: 12px; font: 11px var(--mono); color: var(--muted); background: rgba(0,0,0,.5); padding: 2px 7px; border-radius: 5px; }
.compare { flex: 1; position: relative; overflow: hidden; cursor: ew-resize; display: grid; }
.compare img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.compare-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: translateX(-1px); pointer-events: none; }
.compare-line span { position: absolute; top: 50%; left: -15px; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; transform: translateY(-50%); }
.compare-tag { position: absolute; top: 12px; font-size: 11px; background: rgba(0,0,0,.6); padding: 3px 8px; border-radius: 6px; }
.compare-tag.l { left: 12px; } .compare-tag.r { right: 12px; }
.pano { flex: 1; background-repeat: repeat-x; background-position-y: center; cursor: grab; position: relative; }
.pano-hint { position: absolute; left: 12px; bottom: 12px; background: rgba(0,0,0,.6); border-radius: 6px; padding: 3px 8px; font-size: 11px; display: flex; gap: 5px; align-items: center; }
.model-view { flex: 1; position: relative; }
.model-view canvas { display: block; }
.center-msg { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted); text-align: center; padding: 30px; }
.adjust { display: flex; flex-direction: column; gap: 4px; }

/* Painter (nhiều layer) */
.painter { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.painter-bar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--panel); }
.painter-bar .sep { width: 1px; height: 22px; background: var(--line2); margin: 0 5px; }
.pb-field { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); margin: 0 4px; }
.pb-field input[type=range] { width: 70px; }
.brush-dot { width: 9px; height: 9px; border-radius: 50%; }
.painter-main { flex: 1; display: flex; min-height: 0; }
.painter-stage { position: relative; flex: 1; min-width: 0; min-height: 0; display: grid; place-items: center; padding: 10px; overflow: hidden; background: #0d0c0b; }
.painter-box { position: relative; transform-origin: 50% 50%; will-change: transform; }
.painter-box > img.pl-base, .painter-box > canvas, .painter-box > svg, .painter-hit, .pl-ink-host, .pl-adjust { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-ink-host canvas { width: 100%; height: 100%; display: block; }
.pl-img { position: absolute; user-select: none; pointer-events: none; }
.pl-base { user-select: none; pointer-events: none; }
.mask-layer { opacity: .5; pointer-events: none; }
.painter-svg { pointer-events: none; }
.painter-hit { z-index: 5; touch-action: none; }
.painter-tip { padding: 6px 12px 8px; }
.layers { width: 236px; flex-shrink: 0; border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; overflow: auto; }
.layers.closed { width: 120px; }
.layers-head { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; font-weight: 600; font-size: 12.5px; cursor: pointer; border-bottom: 1px solid var(--line); }
.layer-row { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-bottom: 1px solid #262119; cursor: pointer; font-size: 12px; }
.layer-row:hover { background: #2a241f; }
.layer-row.on { background: #33291f; box-shadow: inset 2px 0 0 var(--accent); }
.layer-row.base { cursor: default; opacity: .85; }
.layer-row .eye { width: 22px; height: 22px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; border-radius: 5px; padding: 0; flex-shrink: 0; }
.layer-row .eye:hover { color: var(--text); background: var(--panel2); }
.lthumb { width: 30px; height: 30px; border-radius: 5px; background: repeating-conic-gradient(#3a332c 0 25%, #2a241f 0 50%) 0 0 / 10px 10px; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; color: var(--accent2); border: 1px solid var(--line2); }
.lthumb img { width: 100%; height: 100%; object-fit: cover; }
.mask-thumb { background: rgba(255,48,64,.35); border-color: rgba(255,48,64,.6); }
.lname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-area .lname { color: #ff9aa3; }
.layer-props { padding: 6px 10px 8px 34px; display: flex; flex-direction: column; gap: 5px; background: #1c1814; border-bottom: 1px solid #262119; }
.layer-props label { display: grid; grid-template-columns: 70px 1fr 30px; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.layer-props .mono { text-align: right; font-size: 10.5px; }
.layer-actions { display: flex; align-items: center; gap: 2px; padding: 6px; flex-wrap: wrap; }
select.mini { font-size: 11px; padding: 3px 4px; max-width: 120px; }
.painter.compact .layers { width: 210px; }
/* Draw: zoom, layer điều chỉnh, kéo thả layer */
.painter-zoom { position: absolute; left: 10px; bottom: 10px; z-index: 8; border: 1px solid var(--line2); background: rgba(20,17,14,.85); color: var(--muted); font-size: 11px; padding: 3px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.painter-zoom:hover { color: var(--text); }
.adj-dlg { position: absolute; z-index: 9; width: 286px; background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.55); padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.adj-dlg-head { display: flex; align-items: center; gap: 8px; margin: 0 -12px; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--line); cursor: move; color: var(--accent); }
.adj-dlg-head b { color: var(--text); font-weight: 600; }
.adj-row { display: grid; grid-template-columns: 92px 1fr 46px; align-items: center; gap: 8px; color: var(--muted); font-size: 11.5px; }
.adj-row input[type=number] { width: 46px; padding: 2px 4px; font-size: 11px; text-align: right; }
.adj-row span.mono { text-align: right; font-size: 11px; }
.adj-tones { display: flex; } .adj-tones button { flex: 1; justify-content: center; padding: 4px 6px; font-size: 11.5px; }
.adj-row.cb-cr input[type=range] { accent-color: #e05555; }
.adj-row.cb-mg input[type=range] { accent-color: #4fbf63; }
.adj-row.cb-yb input[type=range] { accent-color: #4b86e6; }
.adj-clip { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 12px; cursor: pointer; }
.adj-add { position: relative; }
.adj-menu { position: absolute; bottom: 30px; left: 0; z-index: 20; margin: 0; min-width: 190px; }
.layer-row.locked .lname { opacity: .7; }
.layer-row .eye.on { color: var(--accent); }
.layer-row.drop-above { box-shadow: inset 0 2px 0 var(--accent); }
.layer-row.drop-below { box-shadow: inset 0 -2px 0 var(--accent); }
.clip-mark { color: var(--accent); font-size: 12px; font-weight: 700; }

/* Tools */
.tools-layout { display: flex; gap: 20px; align-items: flex-start; }
.tool-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tool-card { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; transition: border-color .12s, transform .12s; }
.tool-card:hover { border-color: var(--line2); transform: translateY(-1px); }
.tool-card.on { border-color: var(--accent); background: linear-gradient(180deg, rgba(242,163,58,.07), var(--panel)); }
.tool-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(242,163,58,.12); color: var(--accent); margin-bottom: 4px; }
.tool-name { font-weight: 600; font-size: 14px; }
.tool-desc { color: var(--muted); font-size: 12.5px; flex: 1; }
.tool-eng { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.tool-eng.nokey { color: var(--warn); }
.tool-runner { width: 340px; flex-shrink: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; }
.tool-runner h2 { display: flex; gap: 9px; align-items: center; color: var(--accent2); }
.slot { border: 1px solid var(--line); border-radius: 10px; padding: 9px; background: var(--bg2); }
.slot-head { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.req { color: var(--accent); margin-left: 3px; }
.slot-body { display: flex; gap: 10px; align-items: center; }
.slot-img, .slot-empty { width: 76px; height: 56px; border-radius: 7px; overflow: hidden; position: relative; background: var(--panel2); display: grid; place-items: center; color: var(--muted); flex-shrink: 0; }
.slot-img img { width: 100%; height: 100%; object-fit: cover; }
.slot-img button { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: rgba(0,0,0,.7); color: #fff; display: grid; place-items: center; padding: 0; }
.slot-actions { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.slot-actions select { font-size: 12px; padding: 4px 6px; }

/* Projects / history */
.current { display: flex; gap: 18px; align-items: center; }
.current-thumbs { width: 220px; height: 120px; border-radius: 10px; overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--bg2); place-items: center; color: var(--muted); }
.current-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.recent-list { display: flex; flex-direction: column; gap: 6px; }
.recent { display: flex; gap: 12px; align-items: center; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.recent:hover:not(:disabled) { border-color: var(--line2); }
.recent .grow { display: flex; flex-direction: column; min-width: 0; }
.recent .grow .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search { width: 260px; }
.history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.h-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; }
.h-card:hover { border-color: var(--accent); }
.h-media { aspect-ratio: 16/10; background: #0b0d10; display: grid; place-items: center; color: var(--model); }
.h-media img, .h-media video { width: 100%; height: 100%; object-fit: cover; }
.h-meta { padding: 8px 10px; display: flex; flex-direction: column; font-size: 12.5px; }
.h-detail { display: flex; gap: 16px; min-height: 0; }
.h-big { flex: 1; background: #0b0d10; border-radius: 10px; display: grid; place-items: center; min-height: 420px; color: var(--model); }
.h-big img, .h-big video { max-width: 100%; max-height: 70vh; }
.h-side { width: 280px; display: flex; flex-direction: column; gap: 8px; }
.h-side .btn { justify-content: flex-start; }

/* Video editor */
.video-page { display: flex; flex-direction: column; }
.ve-layout { display: flex; gap: 16px; flex: 1; min-height: 0; }
.ve-preview { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ve-preview video { width: 100%; max-height: 52vh; background: #000; border-radius: 9px; }
.ve-trim { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; font-size: 12px; color: var(--muted); }
.ve-trim input { width: 86px; margin-left: 4px; }
.ve-settings { width: 300px; flex-shrink: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.ve-result { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ve-result video { width: 100%; border-radius: 8px; background: #000; }
.progress-wrap { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.progress { flex: 1; height: 8px; border-radius: 99px; background: var(--bg2); overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .2s; }
.timeline { margin-top: 14px; min-height: 76px; display: flex; gap: 4px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 8px; overflow-x: auto; }
.tl-item { display: flex; gap: 3px; min-width: 120px; }
.tl-gap { background: repeating-linear-gradient(45deg, #111, #111 5px, #1a1a1a 5px, #1a1a1a 10px); border-radius: 6px; min-width: 14px; }
.tl-clip { flex-basis: 0; min-width: 110px; text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 9px; border-radius: 8px; border: 1px solid rgba(167,123,255,.35); background: rgba(167,123,255,.1); position: relative; overflow: hidden; }
.tl-clip b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-clip.on { border-color: var(--video); background: rgba(167,123,255,.22); }
.tl-tools { position: absolute; right: 5px; top: 4px; display: flex; gap: 3px; opacity: 0; }
.tl-clip:hover .tl-tools { opacity: 1; }
.tl-tools i { font-style: normal; font-size: 10px; background: rgba(0,0,0,.6); padding: 1px 5px; border-radius: 4px; }
.tl-empty { align-self: center; padding-left: 8px; }

/* Recorder */
.rec-layout { display: flex; gap: 16px; align-items: flex-start; }
.source-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.source { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: 12px; }
.source img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 7px; background: #000; }
.source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source.on { border-color: var(--accent); }
.rec-side { width: 280px; flex-shrink: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }

/* Settings */
.settings-page .card { max-width: none; }
.key-row { display: grid; grid-template-columns: 1.3fr auto 1.5fr auto auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.key-name { display: flex; flex-direction: column; }

/* Guide */
.guide-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
.guide-step { display: flex; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; align-items: flex-start; color: var(--accent); }
.guide-step h3 { color: var(--text); margin-bottom: 4px; }
.guide-step p { color: var(--muted); }
.step-n { font: 700 12px var(--mono); color: var(--accent-ink); background: var(--accent); border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; flex-shrink: 0; }
.keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.keys div { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--muted); }
kbd { font: 11.5px var(--mono); background: var(--panel2); border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; color: var(--text); white-space: nowrap; }

/* Presentation */
.present { position: fixed; inset: 0; z-index: 120; background: #000; display: grid; place-items: center; outline: none; }
.present img, .present video { max-width: 100vw; max-height: 100vh; }
.present-bar { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: rgba(20,22,27,.85); border: 1px solid var(--line2); border-radius: 99px; padding: 5px 10px; font-size: 12.5px; }

/* Toasts */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.toast { background: var(--panel); border: 1px solid var(--line2); border-left: 3px solid var(--muted); border-radius: 9px; padding: 10px 14px; font-size: 13px; box-shadow: 0 12px 34px rgba(0,0,0,.5); cursor: pointer; animation: slidein .2s ease-out; user-select: text; }
.toast.ok { border-left-color: var(--ok); } .toast.warn { border-left-color: var(--warn); } .toast.error { border-left-color: var(--err); }
@keyframes slidein { from { transform: translateY(8px); opacity: 0; } }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2a2f39; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Prompt presets */
.preset-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; margin-bottom: 8px; border-radius: 8px; border: 1px solid var(--line2); background: var(--bg2); font-weight: 600; font-size: 12.5px; }
.preset-toggle .muted { margin-left: auto; font-weight: 400; }
.preset-toggle:hover, .preset-toggle.on { border-color: var(--accent); color: var(--accent2); }
.preset-search { width: 100%; }
.preset-row { display: flex; align-items: center; gap: 2px; }
.preset-row .preset { flex: 1; text-align: left; }
.icon-btn.sm { width: 24px; height: 24px; }
.preset-group { flex-direction: column; flex-wrap: nowrap; }
.preset-preview { font-size: 11.5px; color: #c6cbd4; background: var(--panel); border: 1px dashed var(--line2); border-radius: 7px; padding: 6px 8px; max-height: 90px; overflow: auto; }

.prov-logo.k { background: #111; color: #fff; border: 1px solid #555; }
.prov-logo.w { background: linear-gradient(135deg, #2dd4bf, #6366f1); color: #fff; }
.world-bar { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.mode-hint { display: flex; gap: 7px; align-items: flex-start; font-size: 11.5px; line-height: 1.45; color: #e9c9ae; background: rgba(232,129,63,.08); border: 1px solid rgba(232,129,63,.25); border-radius: 8px; padding: 7px 9px; }
.mode-hint .ico { flex-shrink: 0; margin-top: 1px; color: var(--accent2); }
.opt-grid .fld.wide { grid-column: 1 / -1; }

/* Preset: thumbnail + menu chuột phải + danh sách biểu tượng */
.tile-thumb { width: 64%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; pointer-events: none; }
.thumb-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.thumb-pick { width: 52px; height: 52px; border-radius: 8px; border: 1px dashed var(--line2); background: var(--bg2); display: grid; place-items: center; overflow: hidden; color: var(--muted); padding: 0; }
.thumb-pick img { width: 100%; height: 100%; object-fit: cover; }
.ctx.in-modal { position: absolute; z-index: 20; }
.icon-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.icon-item { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); color: #e6ddd5; font-size: 11px; }
.icon-item.on { border-color: var(--accent); background: #2b241e; color: var(--accent2); }
.icon-sel { width: 92px; }
.icon-prev { width: 28px; display: grid; place-items: center; color: var(--accent2); }

/* Menu chuột phải (canvas, ô prompt) */
.ctx-back { position: fixed; inset: 0; z-index: 60; }
.ctx { position: fixed; z-index: 61; min-width: 210px; display: flex; flex-direction: column; background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; padding: 5px; box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.ctx button { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 0; background: none; color: var(--text); font-size: 12.5px; border-radius: 6px; text-align: left; white-space: nowrap; }
.ctx button:hover { background: #3a3129; color: var(--accent2); }
.ctx button.danger { color: #ffb3ba; }

/* Hộp thoại Điền prompt dạng thẻ có hình (giống app mẫu) */
.w860 { width: min(860px, 94vw); }
.fill-prompt.has-cards { overflow: visible; }
.fp-cards { display: grid; gap: 10px; }
.fp-cardwrap { position: relative; min-width: 0; }
.fp-cardlabel { font-size: 11.5px; font-weight: 600; color: #d9d1c9; margin: 0 0 5px 2px; }
.fp-card { position: relative; width: 100%; height: 196px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 12px 10px 10px; border-radius: 12px; border: 1px solid var(--line2); background: linear-gradient(180deg, #34302c, #2a2622); color: var(--text); }
.fp-card:hover, .fp-card.open { border-color: var(--accent); }
.fp-card-title { font-weight: 700; font-size: 13px; }
.fp-card-art { flex: 1; display: grid; place-items: center; }
.fp-card-chev { position: absolute; right: 12px; top: 50%; color: var(--muted); }
.fp-chip { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 5px; background: #1e1b18; color: #cfc6bd; }
.fp-pop { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; width: max(100%, 520px); max-height: 340px; overflow: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; padding: 9px; border-radius: 12px; background: #262320; border: 1px solid var(--line2); box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.fp-cardwrap:last-child .fp-pop { left: auto; right: 0; }
.fp-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 7px; border-radius: 9px; border: 1px solid transparent; background: #312d29; color: var(--text); min-height: 108px; }
.fp-opt:hover { background: #3a342e; }
.fp-opt.on { border-color: var(--accent); }
.fp-opt-title { font-size: 11.5px; font-weight: 700; text-align: center; line-height: 1.2; }
.fp-opt-art { flex: 1; display: grid; place-items: center; min-height: 46px; }
.fp-use { min-width: 120px; justify-content: center; }
.icon-art { display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }

/* Thêm prompt preset – bố cục như app mẫu */
.w680 { width: min(680px, 94vw); }
.pe-main { display: grid; grid-template-columns: 220px 1fr; gap: 12px; }
.pe-thumb { aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line2); background: #1e1b18; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); overflow: hidden; padding: 0; position: relative; }
.pe-thumb:hover { border-color: var(--accent); color: var(--text); }
.pe-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pe-thumb span { font-size: 12px; position: relative; z-index: 1; }
.pe-thumb img + span { position: absolute; bottom: 8px; background: rgba(0,0,0,.55); padding: 2px 8px; border-radius: 5px; color: #fff; }
.pe-fields { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pe-fields textarea { flex: 1; min-height: 180px; resize: vertical; font: inherit; font-size: 13px; }
.pe-extra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pe-icons { flex-basis: 100%; }
.pe-icons summary { cursor: pointer; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.ctx-sep { height: 1px; background: var(--line2); margin: 4px 2px; }
.icon-item-edit { display: inline-flex; align-items: center; gap: 6px; }
.icon-item-edit .icon-prev { width: 34px; height: 34px; border-radius: 7px; border: 1px dashed var(--line2); background: var(--bg2); display: grid; place-items: center; padding: 0; overflow: hidden; }
.badge-in { width: 120px; }

/* So sánh A/B có zoom */
.compare.zoomable { overflow: hidden; cursor: col-resize; }
.cmp-layer { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; pointer-events: none; }
.cmp-layer img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; will-change: transform; user-select: none; }
.compare.zoomable > img { display: none; }
.compare-line { width: 1px; background: rgba(255,255,255,.85); }
.compare-line > span:not(.cmp-tag) { display: none; }
.cmp-tag { position: absolute; top: 8px; display: flex; flex-direction: column; gap: 1px; font-size: 10.5px; background: rgba(60,58,56,.72); color: #f2ede8; padding: 3px 7px 4px; border-radius: 3px; white-space: nowrap; pointer-events: none; }
.cmp-tag b { font-size: 12px; }
.cmp-tag.a { right: 6px; text-align: right; }
.cmp-tag.b { left: 6px; }
.compare-line .cmp-tag { top: 8px; width: auto; height: auto; border-radius: 3px; background: rgba(60,58,56,.72); color: #f2ede8; transform: none; display: flex; place-items: initial; }
.compare-line .cmp-tag.a { left: auto; right: 6px; }
.compare-line .cmp-tag.b { left: 6px; right: auto; }
.compare.zoomable .zoom-pct { position: absolute; left: 10px; bottom: 10px; right: auto; width: auto; font-size: 11px; background: rgba(0,0,0,.55); padding: 2px 8px; border-radius: 5px; color: #ddd; pointer-events: none; }

/* Nhánh chờ khi chọn node (giống app mẫu) */
.node.ghost { pointer-events: auto; cursor: move; opacity: .9; }
.node.ghost .node-card { background: #0c0b0a; border: 1px solid #2a2622; display: grid; place-items: center; color: #f2ede8; box-shadow: none; }
.node.ghost .node-label b { color: #6f6862; }
.node.ghost .node-label span { color: #5a544e; }
.edge.ghost-edge { stroke-dasharray: 6 6; opacity: .55; }

/* Quy tắc nối nhánh: mỗi đầu vào chỉ một nhánh */
.edge.drafting.bad { stroke: #e5484d; stroke-dasharray: 5 5; }
.node.link-ok .node-card { outline: 2px solid var(--accent, #2bd4c4); outline-offset: 2px; }
.node.link-bad .node-card { outline: 2px solid #e5484d; outline-offset: 2px; cursor: not-allowed; }
/* Nhánh chờ nhiều đầu vào: cổng trống để thả dây, sáng lên khi rê dây vào */
.node.ghost .port.in.free { background: #2a2622; opacity: .7; }
.node.ghost.link-ok .node-card { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,138,0,.35); }
.node.ghost.link-ok .port.in.free { background: var(--accent); color: var(--accent-ink); opacity: 1; }
.node.ghost.link-bad .node-card { border-color: #e5484d; }
.edge.ghost-edge { cursor: pointer; }
.node.ghost .port.in.linked { pointer-events: auto; cursor: grab; }
.node.ghost .port.in.linked:hover { background: #fff; color: #111; border-radius: 50%; }
/* Cổng nối to, tròn, dễ bấm như app mẫu (vùng bắt chuột còn rộng hơn phần nhìn thấy) */
.port { width: 22px; height: 22px; border-radius: 50%; background: #3b3733; color: #e6e0da; opacity: 1; box-shadow: 0 0 0 2px #151311; z-index: 3; }
.port::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; }
.port.in { left: -11px; } .port.out { right: -11px; cursor: crosshair; }
.port.out:hover, .node.ghost .port.in.linked:hover { background: #fff; color: #111; transform: translateY(-50%) scale(1.15); }
.node.ghost .port.in.linked:hover { border-radius: 50%; }
.node.ghost .port::before { inset: -3px; }
/* ---- Nhóm (Create a group, giống app mẫu) ---- */
.group-frame { position: absolute; }
.group-box { position: absolute; inset: 0; border-radius: 18px; border: 2px solid color-mix(in srgb, var(--gc) 45%, transparent); background: color-mix(in srgb, var(--gc) 4%, rgba(255,255,255,.012)); cursor: move; }
.group-frame.sel .group-box { border-color: var(--gc); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gc) 40%, transparent), 0 0 24px color-mix(in srgb, var(--gc) 25%, transparent); }
.group-frame.free .group-box { border-style: dashed; }
.group-head { position: absolute; left: 0; bottom: 100%; padding-bottom: 8px; display: flex; flex-direction: column; gap: 2px; }
.group-title { background: transparent; border: 0; outline: 0; color: #f2ede8; font-size: 30px; font-weight: 700; padding: 0; width: 360px; max-width: 100%; letter-spacing: -.3px; }
.group-title:focus { background: rgba(255,255,255,.06); border-radius: 6px; }
.group-count { color: #9b938c; font-size: 13px; }
.group-resize { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; cursor: nwse-resize; }
.group-tools { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; display: flex; gap: 6px; }
.group-tools button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: #3b3733; color: #e6e0da; display: grid; place-items: center; padding: 0; cursor: pointer; }
.group-tools button:hover { background: #fff; color: #111; }
.ctx.group-colors { flex-direction: row; gap: 8px; min-width: 0; padding: 8px 10px; }
.ctx.group-colors button { width: 18px; height: 18px; border-radius: 50%; padding: 0; }
.ctx.group-colors button.on { outline: 2px solid #fff; outline-offset: 2px; }
/* Icon Prompt Preset: tông cam của app */
.preset-icon { color: var(--accent); display: block; }
.tile:hover .preset-icon { color: var(--accent2, var(--accent)); filter: brightness(1.12); }
/* ---- AI Chat (trợ lý prompt nhiều lượt, giống app mẫu) ---- */
.canvas-tools button.on { border-color: var(--accent); color: var(--accent2); background: rgba(255,138,31,.12); }
.ai-chat { position: absolute; right: 64px; top: 12px; bottom: 96px; width: min(400px, calc(100% - 90px)); z-index: 30; display: flex; flex-direction: column; background: rgba(24,21,19,.97); border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.55); overflow: hidden; }
.ai-chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--line); color: var(--text); }
.ai-chat-head > b { font-size: 13.5px; }
.ai-chat-head .seg.sm button { padding: 4px 9px; font-size: 11.5px; }
.ai-chat-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ai-chat-empty { margin: auto 0; text-align: center; padding: 10px 6px; }
.ai-chat-empty h3 { margin: 0 0 6px; font-size: 18px; color: var(--text); }
.ai-chat-chips { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.ai-chat-chips button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel2); color: var(--text); font-size: 12px; }
.ai-chat-chips button.on, .ai-chat-chips button:hover { border-color: var(--accent); color: var(--accent2); }
.ai-chat-suggest { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; text-align: left; }
.ai-chat-suggest button { padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); font-size: 12.5px; text-align: left; }
.ai-chat-suggest button:hover { border-color: var(--accent); }
.ai-msg { display: flex; flex-direction: column; gap: 4px; max-width: 92%; }
.ai-msg.user { align-self: flex-end; align-items: flex-end; }
.ai-msg.user img { width: 84px; border-radius: 7px; border: 1px solid var(--line); }
.ai-msg .bubble { padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.ai-msg.user .bubble { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.ai-msg.bot .bubble { background: var(--panel2); color: var(--text); border-bottom-left-radius: 4px; }
.ai-msg.bot.err .bubble { background: rgba(229,72,77,.14); color: #ffb3ba; }
.ai-msg .bubble p { margin: 0 0 6px; } .ai-msg .bubble p:last-child { margin-bottom: 0; }
.ai-prompt { margin: 6px 0; padding: 9px 10px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: rgba(255,138,31,.07); display: flex; flex-direction: column; gap: 8px; }
.ai-prompt-text { font-family: inherit; font-size: 12.5px; color: #f2ede8; }
.ai-msg-acts { display: flex; gap: 2px; }
.ai-msg-acts button { width: 26px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); display: grid; place-items: center; }
.ai-msg-acts button:hover, .ai-msg-acts button.on { color: var(--accent2); background: var(--panel2); }
.bubble.typing { display: flex; gap: 5px; padding: 12px 14px; }
.bubble.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: aiDot 1s infinite ease-in-out; }
.bubble.typing i:nth-child(2) { animation-delay: .15s; } .bubble.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes aiDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ai-chat-input { border-top: 1px solid var(--line); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ai-chat-input textarea { flex: 1; resize: none; min-height: 40px; max-height: 120px; }
.ai-send { align-self: stretch; padding: 0 12px; }
.ai-attach { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.ai-attach img { width: 34px; height: 24px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.painter.compact .layer-row .eye.ud { display: none; }
/* Draw: RAL cho bút, chọn vật thể AI, mũi tên + chữ dạng đối tượng */
.ral-ink { position: relative; display: inline-flex; margin-left: 4px; }
.ral-ink .btn .sw, .ral-ink-pop .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(255,255,255,.25); flex-shrink: 0; }
.ral-ink > .btn { gap: 5px; }
.ral-ink-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: 360px; max-width: 80vw; background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.55); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ral-ink-pop input { flex: 1; font-size: 12px; padding: 5px 8px; }
.ral-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.ral-tabs button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--bg2); color: var(--muted); font-size: 11px; padding: 3px 7px; border-radius: 6px; }
.ral-tabs button.on { color: var(--text); border-color: var(--accent); }
.ral-ink-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; max-height: 300px; overflow: auto; }
.ral-ink-grid button { display: flex; align-items: center; gap: 6px; border: 1px solid transparent; background: none; color: var(--text); font-size: 11.5px; padding: 4px 6px; border-radius: 6px; text-align: left; min-width: 0; }
.ral-ink-grid button:hover { background: var(--panel2); }
.ral-ink-grid button.on { border-color: var(--accent); }
.ral-ink-grid button .sw { width: 22px; height: 16px; }
.ral-ink-grid small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obj-q { width: 190px; font-size: 12px; padding: 4px 8px; margin-right: 4px; }
.seg-msg { display: inline-flex; align-items: center; gap: 6px; max-width: 320px; font-size: 11.5px; color: var(--muted); margin-left: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.seg-msg.busy { color: var(--accent); }
.arrow-label { position: absolute; z-index: 6; display: flex; align-items: center; gap: 4px; padding: 4px; background: rgba(14,12,10,.92); border: 2px solid var(--ac, #ff3b30); border-radius: 9px; box-shadow: 0 6px 18px rgba(0,0,0,.5); transform-origin: 50% 100%; white-space: nowrap; }
.arrow-label.on { box-shadow: 0 0 0 2px rgba(34,211,197,.6), 0 6px 18px rgba(0,0,0,.5); }
.arrow-label input { width: 200px; border: 0; background: transparent; color: #fff; font-size: 12.5px; padding: 3px 4px; outline: none; }
.arrow-label button { width: 22px; height: 22px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: 5px; padding: 0; }
.arrow-label button:hover { color: var(--text); background: rgba(255,255,255,.08); }
.arrow-no { min-width: 18px; height: 18px; border-radius: 9px; background: var(--ac, #ff3b30); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.arrow-ref { width: 26px; height: 26px; border-radius: 5px; overflow: hidden; border: 1px solid var(--line2); cursor: pointer; flex-shrink: 0; }
.arrow-ref img { width: 100%; height: 100%; object-fit: cover; }
/* Đăng nhập + license */
.login-wrap { height: 100%; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(1200px 600px at 50% -10%, rgba(242,163,58,.12), transparent 60%), var(--bg2); overflow: auto; }
.login-card { width: 380px; max-width: 100%; background: var(--panel); border: 1px solid var(--line2); border-radius: 16px; padding: 28px 28px 18px; box-shadow: 0 24px 70px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 12px; }
.login-card form { display: flex; flex-direction: column; gap: 12px; }
.login-logo { width: 120px; height: 120px; border-radius: 22px; align-self: center; margin-bottom: 4px; }
.login-card h2 { margin: 0; font-size: 19px; text-align: center; }
.login-card label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.login-card input { padding: 9px 11px; font-size: 14px; }
.btn.full { width: 100%; padding: 10px 13px; }
.login-err { color: #ffb3ba; background: rgba(255,80,90,.08); border: 1px solid rgba(255,80,90,.3); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; }
.login-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text); background: rgba(242,163,58,.08); border: 1px solid rgba(242,163,58,.3); border-radius: 8px; padding: 9px 10px; }
.login-note .ico { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.login-switch { text-align: center; font-size: 13px; color: var(--muted); }
.login-switch button { border: 0; background: none; color: var(--accent); font-weight: 600; padding: 0 2px; cursor: pointer; }
.login-foot { text-align: center; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.small.center, p.center { text-align: center; }
.ok-text { color: #6fd39a; }
.account-card .acc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 8px; }
.account-card .acc-grid > div { display: flex; flex-direction: column; gap: 3px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; min-width: 0; }
.account-card .acc-grid b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.account-card .acc-grid .err-text { font-size: 13px; }
.acc-devices { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 12px; }
.acc-dev { display: flex; align-items: center; gap: 8px; padding: 6px 9px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.acc-dev .grow { flex: 1; }
.acc-pw { margin-bottom: 10px; }
.acc-pw input { flex: 1; min-width: 160px; }
.login-card .code-input { font-size: 22px; letter-spacing: 8px; text-align: center; font-weight: 600; }
.login-switch button:disabled { opacity: .5; }
/* Cập nhật app */
.update-banner { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; background: var(--panel); border: 1px solid rgba(242,163,58,.5); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.55); max-width: calc(100vw - 32px); }
.update-banner > .ico { color: var(--accent); flex-shrink: 0; }
.update-banner.mandatory { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(242,163,58,.35), 0 14px 40px rgba(0,0,0,.55); }
.ub-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ub-text b { font-size: 13px; white-space: nowrap; }
.upd-progress { display: flex; align-items: center; gap: 8px; min-width: 200px; }
.upd-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--bg2); overflow: hidden; min-width: 110px; }
.upd-bar i { display: block; height: 100%; background: var(--accent); transition: width .25s; }
.upd-bar i.indet { animation: updind 1.2s ease-in-out infinite; }
@keyframes updind { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
.upd-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.upd-row:first-of-type { border-top: 0; }
.upd-row .grow { flex: 1; min-width: 200px; }
.upd-notes { white-space: pre-wrap; font: 12.5px/1.5 inherit; font-family: inherit; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 0 0 8px; color: var(--text); }
.accent-text { color: var(--accent); font-weight: 600; }
.rail-badge.upd { background: var(--accent); color: #1b1206; }
/* Công tắc Mode_API / Mode_Playwright */
.mode-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.mode-row .grow { flex: 1; min-width: 0; }
.switch { position: relative; width: 46px; height: 26px; border-radius: 13px; border: 1px solid var(--line2); background: var(--bg2); padding: 0; flex-shrink: 0; cursor: pointer; transition: background .15s, border-color .15s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.switch.on { background: var(--accent); border-color: var(--accent); }
.switch.on i { transform: translateX(20px); background: #1b1206; }

/* Cài plugin phần mềm 3D */
/* Phần mềm dựng hình: ô ngắn xếp lưới (tự xuống hàng) cho gọn */
.plugin-list { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.plugin-list > p { grid-column: 1 / -1; }
.plugin-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--line, #2c2a28); border-radius: 9px; background: var(--bg2); min-width: 0; }
.plugin-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plugin-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plugin-actions .btn { padding: 5px 10px; font-size: 12.5px; }

/* Kết nối máy khác trong mạng LAN */
.lan-bridge { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.lan-info { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--line, #2c2a28); border-radius: 8px; }
.lan-code { font-size: 16px; letter-spacing: 3px; font-weight: 700; color: var(--accent, #f2842f); }

/* Vẽ (giống app mẫu): node "Preview" phía trên ảnh gốc + lớp phủ "drawing" trên ảnh gốc */
.draw-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.42); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; pointer-events: none; }
.draw-overlay svg { filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.draw-overlay span { position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%); font-size: 12px; color: rgba(255,255,255,.75); text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.node.draw-preview { cursor: default; }
.node.draw-preview .node-card { border-color: #3a332d; }
.node.draw-preview .port.out { pointer-events: none; }

/* ===== Draw giống app mẫu: thanh công cụ theo nhóm + Layers nổi góc phải ===== */
.painter-bar.vz { gap: 6px; padding: 7px 8px; flex-wrap: nowrap; overflow: visible; position: relative; z-index: 20; }
.tb-group { position: relative; display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: #1a1714; border: 1px solid #2c2722; }
.tb-btn { position: relative; width: 32px; height: 30px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text); padding: 0; }
.tb-btn:hover { background: #2a241f; }
.tb-btn.on { background: #0f0d0b; border-color: #5a4f45; color: #fff; }
.tb-corner { position: absolute; right: 2px; bottom: 2px; width: 0; height: 0; border-left: 5px solid transparent; border-bottom: 5px solid currentColor; opacity: .7; cursor: pointer; }
.tb-btn.brush-set { width: 38px; display: flex; flex-direction: column; gap: 1px; }
.tb-btn.brush-set .brush-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); }
.tb-btn.brush-set small { font-size: 8.5px; line-height: 1; color: var(--muted); }
.tb-flyout { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; min-width: 220px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; padding: 5px; box-shadow: 0 14px 40px rgba(0,0,0,.55); display: flex; flex-direction: column; }
.tb-flyout > button { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 0; background: none; color: var(--text); font-size: 12.5px; border-radius: 6px; text-align: left; white-space: nowrap; }
.tb-flyout > button:hover { background: #3a3129; }
.tb-flyout > button.on { color: var(--accent2, #ffb070); background: #2d2620; }
.tb-flyout .fly-thumb { width: 28px; height: 20px; object-fit: cover; border-radius: 3px; }
.tb-flyout-modes { display: flex; gap: 4px; padding: 6px 6px 2px; border-top: 1px solid var(--line); margin-top: 4px; }
.tb-back { position: fixed; inset: 0; z-index: 15; }
.tb-ctx { display: flex; align-items: center; gap: 6px; }
.brush-pop { width: 250px; padding: 10px; gap: 8px; }
.brush-preview { height: 82px; border-radius: 6px; background: #2a2622; display: grid; place-items: center; }
.brush-preview span { border-radius: 50%; display: block; }
.brush-row { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text); }
.brush-row input { width: 100%; }
.brush-swatches { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.brush-swatches > button:not(.btn) { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #3a342e; padding: 0; }
.brush-swatches > button.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.sw-custom { position: relative; width: 22px; height: 22px; display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.sw-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ral-ink-pop.inline { position: static; width: auto; box-shadow: none; padding: 0; border: 0; background: none; }
/* Layers nổi ở góc phải trên khung vẽ như app mẫu */
.painter-main { position: relative; }
.painter-main > .layers { position: absolute; top: 8px; right: 8px; z-index: 12; width: 240px; max-height: calc(100% - 16px); border: 1px solid var(--line2); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.45); background: rgba(30,27,24,.96); }
.painter-main > .layers.closed { height: auto; }
.painter.compact .painter-main > .layers { width: 210px; }
.layer-actions { display: flex; align-items: center; gap: 4px; padding: 5px 6px; }
.ctx-sub { position: relative; }
.ctx-sub .ctx-subm { display: none; position: absolute; left: 100%; top: -5px; min-width: 140px; }
.ctx-sub:hover .ctx-subm { display: flex; }
.modal.new-layer { width: 300px; gap: 12px; }
.new-layer .nl-body { display: flex; flex-direction: column; gap: 8px; }
.new-layer .radio { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.new-layer input[type=radio] { width: auto; }
.new-layer .nl-color input { width: 34px; height: 24px; padding: 0; border: 1px solid var(--line2); border-radius: 4px; background: none; }
/* Vùng chọn hiển thị màu xanh ngọc như app mẫu (mặt nạ bên trong vẫn giữ màu đánh dấu gửi AI) */
.painter .mask-layer { filter: hue-rotate(180deg) saturate(1.2); opacity: .42; }
.painter .mask-thumb { background: rgba(34,211,197,.3); border-color: rgba(34,211,197,.7); }
.layer-row.sel-area .lname { color: #6fe6dc; }
.ctx-sub.left .ctx-subm { left: auto; right: 100%; }
/* Mũi tên + chữ: hộp chữ tối viền cam dày, đặt giữa điểm đầu mũi tên */
.arrow-label { padding: 6px 10px; background: rgba(28,28,28,.96); border: 3px solid var(--ac, #f2842f); border-radius: 12px; min-width: 150px; justify-content: center; }
.arrow-label input { width: 170px; text-align: center; font-weight: 600; font-size: 13px; }
.arrow-label button { opacity: 0; transition: opacity .12s; }
.arrow-label:hover button, .arrow-label.on button { opacity: 1; }
.arrow-no { background: var(--ac, #f2842f); color: #2a1406; }

/* Cửa sổ "Bắt đầu" (giống Start creating của app mẫu) */
.start-back { z-index: 120; }
.start-win { display: flex; width: min(880px, 92vw); min-height: 470px; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.start-art { width: 320px; flex-shrink: 0; background: radial-gradient(circle at 50% 45%, #3a2414 0%, #120d0a 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.start-art img { width: 150px; filter: drop-shadow(0 0 30px rgba(242,132,47,.45)); }
.start-art span { letter-spacing: 6px; font-weight: 700; color: #f2842f; opacity: .85; }
.start-main { position: relative; flex: 1; padding: 26px 26px 18px; display: flex; flex-direction: column; gap: 10px; }
.start-main h2 { margin: 0; font-size: 22px; }
.start-x { position: absolute; top: 10px; right: 10px; }
.start-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.start-card { position: relative; height: 104px; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; padding: 0; background: #1a1714; color: #fff; text-align: left; }
.start-card img, .start-noimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; color: var(--muted); }
.start-card .start-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 7px; background: linear-gradient(transparent, rgba(0,0,0,.82)); display: flex; flex-direction: column; }
.start-card .start-cap b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.start-card .start-cap small { font-size: 11px; opacity: .8; }
.start-card.on, .start-empty.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.start-empty { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line2); border-radius: 8px; background: #1a1714; color: var(--text); text-align: left; }
.start-empty .plus { width: 34px; height: 34px; border-radius: 6px; background: #2b2420; display: grid; place-items: center; color: var(--accent); }
.start-empty span:last-child { display: flex; flex-direction: column; gap: 2px; }
.start-dont { margin-top: 2px; }
.start-foot { display: flex; align-items: center; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
/* Trang Dự án (giống Projects của app mẫu) */
.proj-section { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin-bottom: 14px; }
.proj-section > header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; font-weight: 600; }
.proj-section > header .grow { flex: 1; }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 0 14px 14px; }
.proj-card { position: relative; height: 170px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line2); background: #1a1714; padding: 0; color: #fff; text-align: left; }
.proj-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.proj-card:hover img { transform: scale(1.04); }
.proj-card .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
.proj-card .cap b { display: block; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-card .cap small { opacity: .75; }
.proj-card.missing { opacity: .45; }
.proj-card .noimg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }

/* ===================== Trang chủ (phong cách LD_Voice: kính mờ, nền đổi màu, nét phác công trình) ===================== */
.home-page { --hm-ink: #1c2f3b; --hm-ink2: #4b5b66; --hm-muted: #7d8a92; --hm-acc: #e8813f; --hm-acc2: #b8430b; --hm-glass: rgba(255,255,255,.5); --hm-gline: rgba(255,255,255,.75); --hm-shadow: rgba(170,90,30,.13); --hm-sketch: #b8642a;
  position: relative; padding: 18px 30px 14px; display: flex; flex-direction: column; gap: 16px; color: var(--hm-ink); overflow-x: hidden;
  background: linear-gradient(170deg, var(--hm-bg1) 0%, var(--hm-bg2) 45%, var(--hm-bg3) 100%); color-scheme: light; }
.home-page.night { --hm-ink: #fff4ea; --hm-ink2: #f1dccb; --hm-muted: #c9ae9a; --hm-glass: rgba(40,26,20,.55); --hm-gline: rgba(255,255,255,.13); --hm-shadow: rgba(0,0,0,.35); --hm-sketch: #f2b58a; color-scheme: dark; }
.home-page > *:not(.hm-blob):not(.hm-sketch) { position: relative; z-index: 1; }
.hm-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; z-index: 0; }
.hm-blob.b1 { top: -140px; left: -60px; width: 480px; height: 480px; background: #ff9c55; }
.hm-blob.b2 { top: 30%; right: -160px; width: 540px; height: 540px; background: #ffc387; }
.hm-blob.b3 { bottom: -180px; left: 30%; width: 500px; height: 420px; background: #ff7f6b; opacity: .3; }
.home-page.night .hm-blob { opacity: .22; }
.hm-sketch { position: absolute; pointer-events: none; z-index: 0; color: var(--hm-sketch); }
.hm-sketch svg { width: 100%; height: auto; display: block; }
.hm-sketch.skyline { left: 42%; top: 18px; width: 520px; opacity: .22; }
.hm-sketch.elevation { left: 30px; bottom: 6px; width: 300px; opacity: .28; }
.hm-sketch.perspective { right: -24px; top: 120px; width: 360px; opacity: .32; }
.home-page.night .hm-sketch.skyline { opacity: .14; } .home-page.night .hm-sketch.elevation { opacity: .16; } .home-page.night .hm-sketch.perspective { opacity: .2; }

.hm-top { display: flex; align-items: center; gap: 12px; z-index: 5 !important; }
.hm-top .grow { flex: 1; }
.hm-pill { display: flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px; background: var(--hm-glass); border: 1px solid var(--hm-gline); box-shadow: 0 10px 26px var(--hm-shadow); backdrop-filter: blur(var(--hm-blur)); font-weight: 600; color: var(--hm-ink2); font-size: 13px; }
.hm-pill.tight { padding: 5px 6px 5px 6px; gap: 8px; }
.hm-pill input[type=range] { width: 110px; accent-color: var(--hm-acc); }
.hm-sw { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 2px 6px rgba(0,0,0,.12); padding: 0; cursor: pointer; }
.hm-sw.on { outline: 2px solid var(--hm-acc); outline-offset: 2px; }
.hm-sep { width: 1px; height: 16px; background: currentColor; opacity: .25; display: inline-block; margin: 0 2px; }
.hm-acc { color: var(--hm-acc); }
.hm-plug { display: inline-flex; align-items: center; gap: 7px; }
.hm-dot { width: 8px; height: 8px; border-radius: 50%; background: #2fbf7f; display: inline-block; flex: none; }
.hm-dot.off { background: #b8aaa0; } .hm-dot.warn { background: #f0a020; }
.hm-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--hm-glass); border: 1px solid var(--hm-gline); display: grid; place-items: center; box-shadow: 0 10px 26px var(--hm-shadow); color: var(--hm-acc); position: relative; cursor: pointer; }
.hm-icon b { position: absolute; top: 9px; right: 11px; width: 7px; height: 7px; border-radius: 50%; background: #ff5d3a; }
.hm-bell-wrap { position: relative; }
.hm-bell { position: absolute; right: 0; top: 50px; width: 290px; z-index: 30; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.95); border: 1px solid var(--hm-gline); box-shadow: 0 18px 40px rgba(0,0,0,.18); color: #1c2f3b; }
.home-page.night .hm-bell { background: rgba(35,24,18,.97); color: #fff4ea; }
.hm-bell h4 { margin: 0 0 8px; font-size: 13px; }
.hm-st { display: flex; gap: 10px; align-items: flex-start; padding: 7px 6px; border-radius: 10px; cursor: default; }
.hm-st:hover { background: rgba(232,129,63,.1); }
.hm-st .hm-dot { margin-top: 5px; } .hm-st b { display: block; font-size: 12.5px; } .hm-st small { color: var(--hm-muted); font-size: 11.5px; }
.hm-upd { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--hm-acc); background: rgba(255,255,255,.55); color: var(--hm-acc2); font-weight: 700; font-size: 12px; position: relative; cursor: pointer; }
.home-page.night .hm-upd { background: rgba(232,129,63,.12); color: #ffb27a; }
.hm-upd b { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: #ff5d3a; border: 2px solid #fff; }
.hm-lic { padding: 5px 12px; border-radius: 999px; background: linear-gradient(135deg, #f0913e, #b8430b); color: #fff; font-weight: 700; font-size: 12px; }
.hm-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #e8813f, #9c3509); color: #fff; display: grid; place-items: center; font-weight: 800; }

.hm-hero { display: grid; grid-template-columns: 1fr 1fr; border-radius: 28px; background: var(--hm-glass); border: 1px solid var(--hm-gline); box-shadow: 0 18px 48px var(--hm-shadow), inset 0 1px 0 rgba(255,255,255,.6); backdrop-filter: blur(var(--hm-blur)); overflow: hidden; min-height: 450px; flex: none; }
.hm-hero-left { position: relative; padding: 32px 34px 22px; display: flex; flex-direction: column; }
.hm-hero-left > *:not(.hm-sketch) { position: relative; z-index: 1; }
.hm-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 2.2px; color: var(--hm-acc); }
.hm-title { margin: 10px 0 16px; font-size: clamp(32px, 3vw, 46px); line-height: 1.08; letter-spacing: -1.5px; font-weight: 800; color: var(--hm-ink); }
.hm-title .hc { display: inline-block; white-space: pre; opacity: 0; will-change: opacity, transform; }
.hm-title .hc.brand { color: transparent; background-image: linear-gradient(90deg, #1597ad 0%, #33c4b2 20%, #e8813f 40%, #ff5d8f 60%, #8f6bff 80%, #1597ad 100%); background-repeat: repeat-x; -webkit-background-clip: text; background-clip: text; }
.hm-benefits { display: flex; flex-direction: column; gap: 10px; }
.hm-benefits > div { display: flex; gap: 10px; } .hm-benefits svg { color: var(--hm-acc); flex: none; margin-top: 1px; }
.hm-benefits b { display: block; font-size: 14px; } .hm-benefits small { color: var(--hm-ink2); font-size: 12.5px; }
.hm-ctas { margin-top: auto; padding-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hm-cta { height: 50px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 15px; color: #fff; border: 0; background: linear-gradient(135deg, #f0913e, #b8430b); box-shadow: 0 12px 26px rgba(184,67,11,.3); cursor: pointer; transition: transform .15s; }
.hm-cta.alt { background: linear-gradient(135deg, #ff9c55, #e2611a); }
.hm-cta:hover { transform: translateY(-1px); }
.hm-links { display: flex; gap: 12px; justify-content: center; margin-top: 12px; color: var(--hm-ink2); font-weight: 600; font-size: 13px; flex-wrap: wrap; }
.hm-links button { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-decoration-color: rgba(0,0,0,.2); text-underline-offset: 4px; cursor: pointer; }
.hm-links button:hover { color: var(--hm-acc2); } .hm-links i { opacity: .4; font-style: normal; }
.hm-hero-right { position: relative; padding: 20px 20px 20px 0; }
.hm-ba { position: relative; height: 100%; min-height: 400px; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 40px rgba(120,50,10,.25); cursor: ew-resize; user-select: none; }
.hm-ba > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-ba-line { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.3); }
.hm-ba-knob { position: absolute; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--hm-acc); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.hm-ba-lab { position: absolute; top: 14px; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: rgba(255,255,255,.88); color: #333; }
.hm-ba-lab.l { left: 14px; } .hm-ba-lab.r { right: 14px; background: linear-gradient(135deg, #f0913e, #b8430b); color: #fff; }
.hm-ba-cap { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 10px 12px 10px 14px; border-radius: 14px; background: rgba(20,14,10,.65); color: #fff; display: flex; align-items: center; gap: 10px; font-size: 12.5px; backdrop-filter: blur(8px); cursor: default; }
.hm-ba-cap b { color: #ffc48f; } .hm-ba-cap .grow { flex: 1; }
.hm-mk { padding: 6px 14px; border-radius: 999px; border: 0; background: linear-gradient(135deg, #f0913e, #b8430b); color: #fff; font-weight: 700; cursor: pointer; }

.hm-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; flex: none; }
.hm-card { position: relative; height: 186px; border-radius: 22px; padding: 16px; color: #fff; overflow: hidden; text-align: left; border: 0; cursor: pointer; font: inherit;
  background: linear-gradient(150deg, var(--c1), var(--c2)); box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 10px 20px color-mix(in srgb, var(--c2) 35%, transparent); transition: transform .18s, box-shadow .18s; }
.hm-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 40%); pointer-events: none; }
.hm-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 16px 28px color-mix(in srgb, var(--c2) 45%, transparent); }
.hm-card-ic { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; }
.hm-card b { display: block; margin-top: 8px; font-size: 15.5px; } .hm-card small { display: block; margin-top: 4px; font-size: 12px; opacity: .93; max-width: 60%; line-height: 1.4; }
.hm-card .hm-go { bottom: 12px; }
.hm-go { position: absolute; left: 16px; bottom: 14px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); display: grid; place-items: center; }
.hm-art { position: absolute; right: -10px; bottom: -12px; width: 150px; height: 100px; border-radius: 14px; overflow: hidden; transform: rotate(-6deg); border: 3px solid rgba(255,255,255,.75); box-shadow: 0 10px 20px rgba(0,0,0,.25); }
.hm-art img { width: 100%; height: 100%; object-fit: cover; }
.c-orange { --c1: #ffa25c; --c2: #d4500a; } .c-plum { --c1: #b871e6; --c2: #6b2fa8; } .c-teal { --c1: #33c4b2; --c2: #0f7a80; } .c-indigo { --c1: #6f98ff; --c2: #2f4fc4; }

.hm-recent { border-radius: 22px; background: var(--hm-glass); border: 1px solid var(--hm-gline); box-shadow: 0 12px 30px var(--hm-shadow); backdrop-filter: blur(var(--hm-blur)); padding: 12px 18px; display: flex; align-items: center; gap: 14px; flex: none; flex-wrap: wrap; }
.hm-recent h4 { margin: 0; font-size: 14px; white-space: nowrap; } .hm-recent h4 small { display: block; color: var(--hm-muted); font-weight: 500; font-size: 11.5px; }
.hm-recent .grow { flex: 1; }
.hm-rp { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 14px; background: rgba(255,255,255,.55); border: 1px solid var(--hm-gline); color: var(--hm-ink); text-align: left; cursor: pointer; font: inherit; max-width: 300px; }
.home-page.night .hm-rp { background: rgba(255,255,255,.06); }
.hm-rp:hover { border-color: var(--hm-acc); }
.hm-rp img, .hm-rp-ph { width: 62px; height: 40px; border-radius: 9px; object-fit: cover; flex: none; }
.hm-rp-ph { display: grid; place-items: center; background: rgba(232,129,63,.15); color: var(--hm-acc); }
.hm-rp b { font-size: 12.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .hm-rp small { color: var(--hm-muted); font-size: 11px; }
.hm-all { border: 0; background: none; color: var(--hm-acc2); font-weight: 700; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.home-page.night .hm-all { color: #ffb27a; }
.hm-foot { text-align: center; font-size: 12px; color: var(--hm-acc2); font-weight: 600; opacity: .85; margin-top: auto; }
.home-page.night .hm-foot { color: #ffb27a; }
@media (max-width: 1200px) { .hm-hero { grid-template-columns: 1fr; } .hm-hero-right { padding: 0 20px 20px; } .hm-cards { grid-template-columns: repeat(2, 1fr); } }
.hm-lang-wrap { position: relative; }
.hm-langbtn { gap: 5px; }
.hm-lang-menu { position: absolute; right: 0; top: 38px; z-index: 30; min-width: 150px; padding: 6px; border-radius: 14px; background: rgba(255,255,255,.97); border: 1px solid var(--hm-gline); box-shadow: 0 16px 36px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 2px; }
.home-page.night .hm-lang-menu { background: rgba(35,24,18,.97); }
.hm-lang-menu button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--hm-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.hm-lang-menu button b { width: 24px; font-size: 11px; color: var(--hm-acc); }
.hm-lang-menu button:hover, .hm-lang-menu button.on { background: rgba(232,129,63,.14); }
.settings-page .field .row > input:not([type="checkbox"]) { flex: 1; min-width: 0; }
.ff-install { margin: 4px 0 6px; }
.ff-bar { height: 6px; border-radius: 4px; background: var(--line, rgba(255,255,255,.08)); overflow: hidden; margin: 2px 0 6px; }
.ff-bar i { display: block; height: 100%; background: var(--accent, #e8793a); transition: width .25s; }
.ff-bar i.indet { animation: ffpulse 1.2s ease-in-out infinite; }
@keyframes ffpulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* Chưa có license: các trang trừ Trang chủ bị mờ + khóa */
.lock-wrap { position: relative; height: 100%; overflow: hidden; }
.lock-content { height: 100%; filter: blur(5px) saturate(.8); opacity: .8; pointer-events: none; user-select: none; }
.lock-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,10,12,.12); z-index: 20; }
.lock-card { width: min(420px, calc(100% - 32px)); text-align: center; padding: 28px 26px 24px; border-radius: 18px; background: var(--panel, #1f1d1b); border: 1px solid var(--line, rgba(255,255,255,.08)); box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.lock-card h3 { margin: 12px 0 6px; font-size: 18px; }
.lock-card p { margin: 0 0 18px; color: var(--muted, #a59d95); font-size: 13.5px; line-height: 1.5; }
.lock-card .btn { margin: 0 auto; }
.lock-ico { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(232,121,58,.14); color: var(--accent, #e8793a); }
.rail-btn { position: relative; }
.rail-lock { position: absolute; top: 4px; right: 10px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #f3c08f; font-style: normal; }
.rail-btn:has(.rail-lock) > svg, .rail-btn:has(.rail-lock) > span { opacity: .45; }
.login-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(8,8,10,.6); backdrop-filter: blur(4px); }
.login-modal .login-wrap { background: transparent; }
.login-close { position: fixed; top: 18px; right: 22px; z-index: 1001; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.45); color: #fff; display: grid; place-items: center; cursor: pointer; }
.hm-lic-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 0; font: inherit; }
.hm-updbtn.busy svg { animation: hmspin 1s linear infinite; } .hm-updbtn:disabled { opacity: .85; cursor: progress; } @keyframes hmspin { to { transform: rotate(360deg); } }
/* Menu tài khoản (avatar) ở Trang chủ */
.hm-acc-wrap { position: relative; }
button.hm-avatar { border: 0; cursor: pointer; font: inherit; font-weight: 800; transition: transform .15s, box-shadow .15s; }
button.hm-avatar:hover { transform: scale(1.06); box-shadow: 0 0 0 3px rgba(232,129,63,.25); }
.hm-avatar.big { width: 42px; height: 42px; flex: none; font-size: 17px; }
.hm-acc-menu { position: absolute; right: 0; top: 44px; z-index: 30; width: 290px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.98); border: 1px solid var(--hm-gline); box-shadow: 0 18px 40px rgba(0,0,0,.2); color: var(--hm-ink); }
.home-page.night .hm-acc-menu { background: rgba(35,24,18,.98); }
.hm-acc-head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 10px; border-bottom: 1px solid var(--hm-gline); }
.hm-acc-head > div { min-width: 0; display: flex; flex-direction: column; }
.hm-acc-head b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-acc-head small { font-size: 12px; opacity: .7; }
.hm-acc-rows { padding: 8px 2px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--hm-gline); font-size: 12.5px; }
.hm-acc-rows > div { display: flex; justify-content: space-between; gap: 10px; }
.hm-acc-rows span { opacity: .7; }
.hm-acc-actions { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; }
.hm-acc-actions button { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--hm-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.hm-acc-actions button:hover { background: rgba(232,129,63,.14); }
.hm-acc-actions button.danger { color: #c2410c; }
.hm-loginbtn { background: linear-gradient(135deg, #e8813f, #b4470f) !important; color: #fff !important; border-color: transparent !important; }

/* Vùng chọn giống app mẫu: viền liền xanh ngọc; lasso nét đứt + vòng tròn điểm đầu; chờ AI: đoạn sáng chạy dọc viền */
.painter .mask-layer { opacity: .24; }
.painter-svg .sel-outline { fill: none; stroke: #22d3c5; stroke-width: 1.8px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.painter-svg .lasso-line { fill: none; stroke: #22d3c5; stroke-width: 1.8px; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.painter-svg .lasso-line.close { opacity: .55; }
.painter-svg .lasso-start { fill: rgba(34,211,197,.12); stroke: #22d3c5; stroke-width: 1.6px; vector-effect: non-scaling-stroke; transition: fill .12s; }
.painter-svg .lasso-start.hot { fill: rgba(34,211,197,.55); }
.painter-svg .ai-trace-base { fill: none; stroke: rgba(34,211,197,.18); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.painter-svg .ai-trace { fill: none; stroke: #3ff2e4; stroke-width: 2.6px; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 9 91; animation: ai-trace 2.2s linear infinite; filter: drop-shadow(0 0 3px rgba(63,242,228,.9)); }
@keyframes ai-trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* Cài đặt › Thiết lập Playwright: dòng tóm tắt + bảng con */
.pw-card .pw-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--text); cursor: pointer; margin-top: 8px; }
.pw-card .pw-row:hover { border-color: var(--line2); background: var(--panel2); }
.pw-card .pw-row .grow { flex: 1; }
.pw-modal { gap: 12px; }
.pw-modal .modal-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.pw-body { display: flex; flex-direction: column; gap: 10px; }
.pw-card .pw-pick { font-weight: 600; }
.pw-card .w320 { max-width: 320px; } .pw-card .w180 { max-width: 180px; }
.pw-card .pw-body { margin-top: 4px; }
.pw-card .pw-min { align-items: center; } .pw-card .pw-min input { width: 90px; }
.pw-card .pw-actions { display: flex; align-items: flex-end; gap: 10px 16px; flex-wrap: wrap; }
.pw-card .pw-actions > .field { margin: 0; flex: 0 0 auto; width: auto; }
/* Chế độ chạy engine: 2 chế độ trên một hàng, ngăn bằng gạch dọc */
.mode-split { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); margin-top: 6px; }
.mode-split .mode-row { border-top: 0; padding: 12px 18px 12px 0; }
.mode-split .mode-row + .mode-row { border-left: 1px solid var(--line); padding-left: 18px; padding-right: 0; }
@media (max-width: 760px) { .mode-split { grid-template-columns: 1fr; } .mode-split .mode-row + .mode-row { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; } }
.upd-split .upd-col { min-width: 0; padding: 4px 18px 4px 0; }
.upd-split .upd-col + .upd-col { border-left: 1px solid var(--line); padding: 4px 0 4px 18px; }
.upd-split .upd-row { border-top: 0; }
.upd-split .upd-row .grow { min-width: 0; }
@media (max-width: 760px) { .upd-split .upd-col + .upd-col { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; } }
/* Trang chủ: nút "Bắt đầu diễn họa / Mở dự án" và 4 thẻ tính năng trong suốt dần khi giảm Blur (--hm-solid 0.35 → 1) */
.home-page .hm-cta { background: linear-gradient(135deg, color-mix(in srgb, #f0913e calc(var(--hm-solid, 1) * 100%), transparent), color-mix(in srgb, #b8430b calc(var(--hm-solid, 1) * 100%), transparent)); backdrop-filter: blur(var(--hm-blur)); box-shadow: 0 12px 26px rgba(184,67,11, calc(.3 * var(--hm-solid, 1))); text-shadow: 0 1px 2px rgba(0,0,0, calc(.7 * (1 - var(--hm-solid, 1)))), 0 0 10px rgba(0,0,0, calc(.35 * (1 - var(--hm-solid, 1)))); }
.home-page .hm-cta.alt { background: linear-gradient(135deg, color-mix(in srgb, #ff9c55 calc(var(--hm-solid, 1) * 100%), transparent), color-mix(in srgb, #e2611a calc(var(--hm-solid, 1) * 100%), transparent)); }
.home-page .hm-card { background: linear-gradient(150deg, color-mix(in srgb, var(--c1) calc(var(--hm-solid, 1) * 100%), transparent), color-mix(in srgb, var(--c2) calc(var(--hm-solid, 1) * 100%), transparent)); backdrop-filter: blur(var(--hm-blur)); box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 10px 20px color-mix(in srgb, var(--c2) calc(35% * var(--hm-solid, 1)), transparent); text-shadow: 0 1px 2px rgba(0,0,0, calc(.7 * (1 - var(--hm-solid, 1)))), 0 0 10px rgba(0,0,0, calc(.35 * (1 - var(--hm-solid, 1)))); }
.upd-split { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.upd-split .upd-row { flex-wrap: nowrap; }
.upd-split .upd-row .grow .muted.small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .upd-split { grid-template-columns: 1fr; } }

/* ===== Giao diện sáng theo màu nền chọn ở Trang chủ (html[data-theme=light], --t1..--t3 = 3 sắc độ của nền) ===== */
:root[data-theme="light"] {
  --bg: color-mix(in srgb, var(--t2) 55%, #fff);
  --bg2: color-mix(in srgb, var(--t3) 50%, #fff);
  --panel: color-mix(in srgb, var(--t3) 30%, #fff);
  --panel2: color-mix(in srgb, var(--t2) 60%, #fff);
  --line: color-mix(in srgb, var(--t1) 55%, #fff);
  --line2: color-mix(in srgb, var(--t1) 80%, #b9a493);
  --text: #2a1f18;
  --muted: #7d6b5e;
  --accent: #d9692a;
  --accent2: #e8813f;
  --accent-ink: #ffffff;
  --glow: rgba(217,105,42,.28);
  color-scheme: light;
}
:root[data-theme="light"] body { background: linear-gradient(160deg, var(--t1), var(--t2) 45%, var(--t3)); }
:root[data-theme="light"] .app > *:not(.home-page) { --shadow-c: rgba(120,80,50,.12); }
:root[data-theme="light"] .card, :root[data-theme="light"] .modal { box-shadow: 0 8px 24px rgba(120,80,50,.10); }
:root[data-theme="light"] .side-tools .icon-btn { background: rgba(255,255,255,.85); }
/* Giao diện sáng: các thanh/nút trên canvas & khung Vẽ (khung xem ảnh/video vẫn giữ nền tối để nhìn ảnh chuẩn) */
:root[data-theme="light"] .canvas { background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--t3) 40%, #fff) 0%, var(--bg) 75%); }
:root[data-theme="light"] .canvas-watermark { opacity: .05; mix-blend-mode: multiply; }
:root[data-theme="light"] .proj-chip { background: rgba(255,255,255,.88); }
:root[data-theme="light"] .pc-name-input { background: #fff; }
:root[data-theme="light"] .canvas-tools button { background: rgba(255,255,255,.92); color: var(--text); }
:root[data-theme="light"] .prompt-bar { background: linear-gradient(0deg, var(--bg) 60%, transparent); }
:root[data-theme="light"] .pb-input { background: #fff; }
:root[data-theme="light"] .make-btn:disabled { background: color-mix(in srgb, var(--t1) 60%, #fff); color: var(--muted); }
:root[data-theme="light"] .tb-group { background: #fff; border-color: var(--line); }
:root[data-theme="light"] .tb-btn:hover { background: var(--panel2); }
:root[data-theme="light"] .tb-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="light"] .ai-chat, :root[data-theme="light"] .painter-main > .layers { background: rgba(255,255,255,.97); box-shadow: 0 14px 40px rgba(120,80,50,.18); }
:root[data-theme="light"] .layer-props { background: var(--panel2); border-bottom-color: var(--line); }
:root[data-theme="light"] .fp-chip, :root[data-theme="light"] .pe-thumb { background: var(--panel2); color: var(--text); }
:root[data-theme="light"] .start-card, :root[data-theme="light"] .start-empty, :root[data-theme="light"] .proj-card { background: var(--panel2); }
:root[data-theme="light"] .tile-acts button { background: rgba(255,255,255,.92); color: var(--text); }
:root[data-theme="light"] .painter-zoom { background: rgba(255,255,255,.88); }
:root[data-theme="light"] .switch.on i { background: #fff; }
:root[data-theme="light"] .rail-badge.upd { color: #fff; }
:root[data-theme="light"] .login-wrap { background: radial-gradient(1200px 600px at 50% -10%, rgba(242,163,58,.18), transparent), var(--bg); }
:root[data-theme="light"] .tile, :root[data-theme="light"] .tile .ico, :root[data-theme="light"] .icon-pick button, :root[data-theme="light"] .fp-cardlabel { color: var(--text); }
:root[data-theme="light"] .tags i { color: var(--muted); }
:root[data-theme="light"] .info-prompt p, :root[data-theme="light"] .preset-preview, :root[data-theme="light"] .ai-prompt-text { color: var(--text); }
:root[data-theme="light"] .mode-hint { color: #8a4a1c; }
:root[data-theme="light"] .group-title { color: var(--text); }
/* Công cụ ảnh (Image Tool): không có ô prompt, nút Make trải hết thanh dưới (giống app mẫu) */
.prompt-bar.no-prompt { align-items: stretch; }
.prompt-bar.no-prompt .make-btn.wide { flex: 1; justify-content: center; }
.prompt-bar.no-prompt .make-btn.wide .make-meta { color: inherit; opacity: .7; font-weight: 500; margin-left: 6px; }
.painter-svg { overflow: visible; } /* nét lasso / khung chọn vẽ ra ngoài ảnh vẫn nhìn thấy */

/* Trang chủ: trình chiếu trước / sau */
.hm-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.hm-slide.on { opacity: 1; }
.hm-slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-ba-line, .hm-ba-knob { z-index: 2; }
.hm-nav { position: absolute; top: 50%; z-index: 3; width: 34px; height: 34px; margin-top: -17px; border: 0; border-radius: 50%; background: rgba(20,14,10,.45); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .2s, background .2s; }
.hm-nav.prev { left: 12px; } .hm-nav.prev svg { transform: rotate(180deg); }
.hm-nav.next { right: 12px; }
.hm-ba:hover .hm-nav { opacity: 1; } .hm-nav:hover { background: rgba(20,14,10,.7); }
.hm-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 7px; cursor: default; }
.hm-dots.up { bottom: 76px; }
.hm-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.55); box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; transition: width .25s, background .25s; }
.hm-dots button.on { width: 22px; background: #fff; }
.hm-ba-cap { z-index: 3; }

/* Giao diện sáng: trạng thái rê chuột / đang chọn / menu bật lên (trước đây giữ màu tối) */
:root[data-theme="light"] .tile:hover,
:root[data-theme="light"] .icon-pick button.on,
:root[data-theme="light"] .icon-item.on { background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--text); }
:root[data-theme="light"] .tile:hover span { color: var(--text); }
:root[data-theme="light"] .btn:hover:not(:disabled),
:root[data-theme="light"] .enlarge:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 10%, var(--panel2)); color: var(--text); }
:root[data-theme="light"] .pb-target { background: var(--panel2); color: var(--text); border-color: var(--line2); }
:root[data-theme="light"] .mask-menu button:hover,
:root[data-theme="light"] .ctx button:hover,
:root[data-theme="light"] .tb-flyout > button:hover,
:root[data-theme="light"] .layer-row:hover,
:root[data-theme="light"] .fp-opt:hover { background: color-mix(in srgb, var(--accent) 10%, #fff); color: var(--text); }
:root[data-theme="light"] .tb-flyout > button.on,
:root[data-theme="light"] .layer-row.on { background: color-mix(in srgb, var(--accent) 16%, #fff); color: var(--text); }
:root[data-theme="light"] .fp-card { background: linear-gradient(180deg, #fff, var(--panel2)); color: var(--text); }
:root[data-theme="light"] .fp-pop { background: #fff; color: var(--text); box-shadow: 0 14px 40px rgba(120,80,50,.18); }
:root[data-theme="light"] .fp-opt { background: var(--panel2); color: var(--text); }
:root[data-theme="light"] .note-body { background: #fff6e3; color: var(--text); }
:root[data-theme="light"] .port, :root[data-theme="light"] .group-tools button { background: #fff; border-color: var(--line2); color: var(--text); }
:root[data-theme="light"] .brush-preview, :root[data-theme="light"] .start-empty .plus { background: var(--panel2); }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--t1) 70%, #a08a78); }

/* Chú thích khi rê chuột (thay tooltip mặc định của Windows để theo màu giao diện) */
#ld-tip { position: fixed; z-index: 10000; max-width: 360px; padding: 9px 12px; border-radius: 10px; font-size: 12px; line-height: 1.5; white-space: pre-line; pointer-events: none;
  background: rgba(28,24,21,.97); color: #f1e9e1; border: 1px solid var(--line2); box-shadow: 0 12px 30px rgba(0,0,0,.35); opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s; }
#ld-tip.on { opacity: 1; transform: none; }
:root[data-theme="light"] #ld-tip { background: rgba(255,255,255,.98); color: var(--text); border-color: var(--line2); box-shadow: 0 12px 30px rgba(120,80,50,.2); }

/* Lịch sử: lưới đều (ảnh dọc không kéo dài thẻ) + chọn nhiều để xóa */
.history-grid { align-items: start; }
.h-card { position: relative; transition: border-color .12s, box-shadow .12s, transform .12s; }
.h-media { aspect-ratio: 4 / 3; overflow: hidden; min-height: 0; }
.h-media img, .h-media video { display: block; }
.h-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-check { position: absolute; top: 8px; left: 8px; z-index: 2; width: 24px; height: 24px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid rgba(255,255,255,.9); background: rgba(0,0,0,.35); color: transparent; opacity: 0; transition: opacity .12s, background .12s; cursor: pointer; }
.h-card:hover .h-check, .h-card.selecting .h-check { opacity: 1; }
.h-card.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.h-card.sel .h-check { opacity: 1; background: var(--accent); border-color: var(--accent); color: #fff; }
.h-card.sel .h-media img, .h-card.sel .h-media video { transform: scale(.94); border-radius: 8px; transition: transform .12s; }
.h-selbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; margin-bottom: 12px; border-radius: 12px; border: 1px solid transparent; }
.h-selbar.on { background: var(--panel); border-color: var(--accent); box-shadow: 0 8px 22px var(--shadow-c, rgba(0,0,0,.25)); }
.h-selbar .grow { flex: 1; }
.h-trash { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }
:root[data-theme="light"] .h-media { background: var(--panel2); }

/* Dự án: 3 cột ngang (thẻ dự án chia đều 3 cột; mục Đang mở = ảnh bìa | nút | thông tin) */
.proj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.proj-card { height: auto; aspect-ratio: 16 / 9; min-height: 170px; }
.proj-acts { align-self: center; }
.proj-acts .btn { justify-content: center; width: 100%; }
.proj-info { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); min-width: 0; }
.proj-info .info-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
@media (max-width: 1100px) { .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .proj-grid { grid-template-columns: 1fr; } }

/* Dự án: nút sổ xuống chọn Đang mở / Dự án gần đây */
.proj-view { position: relative; }
.proj-view-btn { gap: 8px; min-width: 210px; justify-content: flex-start; font-weight: 600; }
.proj-view-btn > svg:last-child { margin-left: auto; transition: transform .15s; }
.proj-view-btn.on { border-color: var(--accent); }
.proj-view-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 100%; padding: 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line2); box-shadow: 0 14px 34px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 2px; }
.proj-view-menu button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; white-space: nowrap; }
.proj-view-menu button:hover { background: var(--panel2); }
.proj-view-menu button.on { color: var(--accent2); }
.proj-view-menu .grow { flex: 1; }
.proj-section { padding-top: 14px; }
:root[data-theme="light"] .proj-view-menu { background: #fff; box-shadow: 0 14px 34px rgba(120,80,50,.18); }

/* Dự án › Đang mở: thẻ gọn một hàng (ảnh bìa nhỏ | tên, trạng thái, số liệu, nút) */
.proj-cur { display: flex; gap: 18px; align-items: stretch; padding: 0 14px 14px; }
.proj-cur-cover { position: relative; flex: none; width: 260px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; border: 1px solid var(--line2); background: var(--panel2); display: grid; place-items: center; color: var(--muted); }
.proj-cur-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proj-cur-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.proj-cur-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.proj-cur-title b { font-size: 20px; }
.proj-cur-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-pill { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--line2); }
.proj-pill.ok { color: #3fbf7b; border-color: rgba(63,191,123,.4); background: rgba(63,191,123,.08); }
.proj-pill.warn { color: #e0a32f; border-color: rgba(224,163,47,.4); background: rgba(224,163,47,.08); }
.proj-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.proj-stats span { font-size: 12.5px; color: var(--muted); padding: 4px 10px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); }
.proj-stats b { color: var(--text); margin-right: 2px; }
.proj-cur-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.proj-cur-acts kbd { font-family: inherit; font-size: 10.5px; line-height: 1; opacity: .6; margin-left: 4px; padding: 2px 5px; border-radius: 4px; border: 1px solid currentColor; }
@media (max-width: 760px) { .proj-cur { flex-direction: column; } .proj-cur-cover { width: 100%; } }
.proj-card { cursor: pointer; }
.proj-card.missing { cursor: default; opacity: .55; }
.proj-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 28px; height: 28px; padding: 0; border-radius: 8px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.5); color: #fff; opacity: 0; transition: opacity .12s, background .12s; cursor: pointer; }
.proj-card:hover .proj-x, .proj-card.missing .proj-x { opacity: 1; }
.proj-x:hover { background: var(--err); border-color: var(--err); }

/* AI Chat: chọn Gemini / ChatGPT / Claude + model */
.ai-chat-models { display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ai-chat-models .seg button { position: relative; }
.ai-nokey { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: #e0a32f; }
.ai-model { flex: 1; min-width: 120px; max-width: 220px; font-size: 12px; padding: 4px 8px; }
.ai-keybtn { color: #e0a32f; }

/* Xoá watermark Gemini / Veo – nút cạnh chọn chế độ */
.gen-head-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.wm-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line2); background: var(--panel2); color: var(--text); font-weight: 600; white-space: nowrap; cursor: pointer; }
.wm-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.wm-btn:disabled { opacity: .45; cursor: default; }
.wm-btn.busy { border-color: var(--accent); color: var(--accent); }
.wm-btn > *:not(.wm-bar) { position: relative; }
.wm-bar { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 22%, transparent); transition: width .3s; }

/* Tùy chọn bật/tắt (Generate audio…): nút gạt cạnh nhãn, không ghi chữ Bật/Tắt */
.fld-toggle { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; cursor: pointer; }
.fld-toggle .toggle-label { font-size: 13px; font-weight: 700; color: var(--text); }
.fld-toggle .switch { width: 38px; height: 22px; }
.fld-toggle .switch i { top: 2px; left: 2px; width: 16px; height: 16px; }
.fld-toggle .switch.on i { transform: translateX(16px); }

/* Icon preset (ảnh / video): mọi icon cùng tông cam nhấn, cả giao diện sáng và tối */
.tile > .ico, :root[data-theme="light"] .tile > .ico { color: var(--accent); }
.tile:hover > .ico { filter: brightness(1.12); }
/* Icon drone ngang hơn khung vuông -> phóng to cho cân với icon khác */
.preset-icon.pi-v-drone { transform: scale(1.3); }

/* API keys › Thiết lập nhà cung cấp (mật khẩu chủ sở hữu + nút gạt từng nhà) */
.card h3.api-head .grow { flex: 1; }
.card h3.api-head .api-setup-btn { font-size: 13px; font-weight: 600; }
.key-name .key-off { margin-left: 8px; font-size: 11px; vertical-align: middle; }
.modal.owner-pass .modal-head h3, .modal.provider-setup .modal-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.owner-err { color: #ff6b6b; margin: 0; }
.modal.provider-setup { width: min(1080px, 94vw); }
.provider-list { display: flex; flex-direction: column; }
.provider-row { display: grid; grid-template-columns: auto 1.4fr auto 1.3fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.provider-row .prov-name { min-width: 0; }
.provider-row.off .prov-name b { opacity: .55; }
.provider-row input { width: 100%; min-width: 0; }
@media (max-width: 820px) { .provider-row { grid-template-columns: auto 1fr auto; } .provider-row input { grid-column: 2 / 3; } }
.api-locked-note { display: flex; align-items: center; gap: 8px; margin: 8px 0 10px; color: var(--muted); }
.api-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.modal.provider-setup .modal-foot { align-items: center; }
.modal.provider-setup .modal-foot .grow { flex: 1; }
.modal.owner-pass { width: 400px; }
.modal.owner-pass .modal-foot { align-items: center; }
.modal.owner-pass .modal-foot .grow { flex: 1; }
.modal.owner-pass .link-btn { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; }
.modal.owner-pass .link-btn:hover { text-decoration: underline; }

/* Chế độ không có engine (vd tắt nhà cung cấp trong Thiết lập API) */
.no-engine { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px dashed var(--line2); border-radius: 10px; background: var(--bg2); }
.no-engine > div { flex: 1; min-width: 0; }
.no-engine .btn { flex-shrink: 0; }
.prov-logo.m { background: linear-gradient(135deg, #f97316, #db2777); color: #fff; }

/* Quay màn hình: danh sách bản quay đã lưu, chọn nhiều để xóa */
.rec-list { margin-top: 18px; }
.rec-list-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rec-list-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.rec-list-head .grow { flex: 1; }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.rec-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.rec-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.rec-card video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #000; }
.rec-pick { position: absolute; top: 14px; left: 14px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.35); display: grid; place-items: center; padding: 0; cursor: pointer; color: #1b1206; }
.rec-pick.on { background: var(--accent); border-color: var(--accent); }
.rec-meta { display: flex; flex-direction: column; min-width: 0; }
.rec-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-card .icon-btn.sm { margin-left: auto; }

/* Draw: số vùng chọn #1, #2… (đánh số vùng, 15/10/2026) */
.painter-svg .sel-badge circle { fill: #ff2bd6; stroke: #fff; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.painter-svg .sel-badge text { fill: #fff; font-weight: 700; font-family: 'Segoe UI', Arial, sans-serif; pointer-events: none; }
.pb-regions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 0 2px 4px; }
.pb-regions .muted { font-size: 11px; }
.pb-region { border: 0; border-radius: 10px; padding: 1px 8px; font-size: 11.5px; font-weight: 700; background: #ff2bd6; color: #fff; cursor: pointer; }
.pb-region:hover { filter: brightness(1.1); }
.pb-input:has(.pb-regions) { flex-wrap: wrap; }
.pb-input .pb-regions { flex-basis: 100%; order: 1; }
/* Thanh trượt tùy chọn engine (Upscale Magnific giống app mẫu, 16/10/2026) */
.opt-grid:has(.fld-slider) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
.fld-slider .fld-label { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.fld-slider .fld-label b { font-weight: 600; color: var(--text); font-size: 12px; }
.fld-slider input[type=range] { width: 100%; height: 18px; margin: 2px 0 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; border: 0; }
.fld-slider input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--accent) var(--pct, 50%), var(--line2) var(--pct, 50%)); }
.fld-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--accent); }
/* Công tắc bị khóa (model không hỗ trợ, vd "Tạo âm thanh" ở Kling 2.5) + ô chọn chỉ một giá trị */
.fld-toggle.disabled { cursor: default; opacity: .55; }
.fld-toggle.disabled .switch { cursor: not-allowed; }
.fld-toggle .toggle-label small { font-weight: 500; font-size: 11.5px; }
.opt-grid select:disabled { opacity: .7; cursor: default; }
/* 4 ô chọn trên một hàng (Model / Tỉ lệ / Độ phân giải / Thời lượng) */
.opt-grid select { min-width: 0; text-overflow: ellipsis; }

/* Chế độ chạy engine: tiêu đề + 2 công tắc cùng một hàng */
.mode-head { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.mode-head h3 { margin: 0; flex: 0 0 auto; }
.mode-head .mode-item { display: flex; align-items: center; gap: 12px; padding-left: 28px; border-left: 1px solid var(--line); }
.mode-head .mode-item .grow { flex: 0 1 auto; }
@media (max-width: 760px) { .mode-head .mode-item { border-left: 0; padding-left: 0; }  }

/* API keys: 3 ngăn, gạch dọc phân chia */
.api-split { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; border-top: 0; margin-top: 0; }
.api-split .api-col { min-width: 0; padding: 4px 18px 4px 0; }
.api-split .api-col + .api-col { border-left: 1px solid var(--line); padding: 4px 18px; }
.api-split .api-col h3 { margin: 0 0 6px; }
.api-split .api-col p { margin: 0 0 6px; }
.api-split .api-col-act { display: flex; align-items: center; justify-content: flex-end; padding-right: 0; }
@media (max-width: 760px) { .api-split { grid-template-columns: 1fr; } .api-split .api-col + .api-col { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; } }

/* Cập nhật + API keys: 3 ngăn */
.upd-split.has-extra { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 3fr); }
.upd-split.has-extra .upd-col + .upd-col { padding: 4px 18px; }
.upd-split.has-extra .upd-col:last-child { padding-right: 0; }
.upd-split .api-row .grow b { display: inline-flex; align-items: center; gap: 6px; }
.upd-split .api-row .grow .pill { margin-left: 6px; }
.upd-split .api-row .grow p { display: inline; margin: 0; }
.upd-split .api-lock-line { display: flex; align-items: center; gap: 5px; }
@media (max-width: 760px) { .upd-split.has-extra { grid-template-columns: 1fr; } .upd-split.has-extra .upd-col + .upd-col { padding: 8px 0; } }

/* Tài khoản: trái = máy đã kích hoạt, phải = 3 nút xếp dọc, ngăn bằng vạch */
.acc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 10px; }
.acc-split .acc-left { min-width: 0; padding-right: 18px; }
.acc-split .acc-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-left: 18px; border-left: 1px solid var(--line); }
@media (max-width: 760px) { .acc-split { grid-template-columns: 1fr; } .acc-split .acc-right { border-left: 0; padding-left: 0; align-items: stretch; margin-top: 10px; } }

/* Web: Thiết lập extension (trái) + Chung (phải) cùng một hàng */
.web-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-bottom: 16px; }
.web-pair > .card { margin: 0; }
@media (max-width: 900px) { .web-pair { grid-template-columns: 1fr; } }

/* Web: Chế độ chạy engine | Kết nối phần mềm 3D | Máy 3D cùng một hàng */
.web-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-bottom: 16px; }
.web-trio > .card { margin: 0; }
.web-trio .mode-head { flex-direction: column; align-items: flex-start; gap: 12px; }
.web-trio .mode-head .mode-item { border-left: 0; padding-left: 0; justify-content: space-between; width: 100%; }
@media (max-width: 1100px) { .web-trio { grid-template-columns: 1fr; } }

/* Bản web: chữ to, rõ như bản app */
html.is-web body { font-size: 15px; }
html.is-web .small, html.is-web .muted.small { font-size: 13.5px; }
html.is-web h3 { font-size: 16px; }
html.is-web h1 { font-size: 24px; }
html.is-web .field, html.is-web .field input, html.is-web .field select { font-size: 14.5px; }
html.is-web .btn { font-size: 14px; }
html.is-web .pill { font-size: 12.5px; }
html.is-web .acc-grid b, html.is-web .mode-item b { font-size: 15px; }

/* Web: Tài khoản — trái = máy đã kích hoạt, phải = thông tin + 3 nút */
.acc-pair .acc-grid { grid-template-columns: 1fr 1fr; }
.acc-pair .acc-btns { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 8px; }