/* tao-anh-dark.css — Giao diện tối trang Tạo ảnh AI (bảng màu Blender)
   Chỉ có hiệu lực khi <html class="up-dark">. Nền #1D1D1D · khối #282828 · ô #303030 · viền #3A3A3A
   Chọn: xanh Blender #4772B3 · Nút chính: cam ThoAnh. */
html.up-dark{color-scheme:dark;
  --bg:#1D1D1D; --card:#282828; --soft:#2C2C2C; --soft-2:#303030; --soft-3:#3A3A3A;
  --ink:#E6E6E6; --ink-2:#D4D4D4; --mut:#B4B4B4; --mut-2:#A8A8A8; --mut-3:#9A9A9A; --mut-4:#808080;
  --line:rgba(255,255,255,.06); --line-2:rgba(255,255,255,.10);
  --acc:#E07B3C; --acc-d:#C9672B; --sel:#4772B3; --sel-d:#3D63A0;
  --sh-1:0 0 0 1px #333, 0 10px 28px -20px rgba(0,0,0,.8);
  --sh-2:0 0 0 1px #333, 0 14px 36px -24px rgba(0,0,0,.85);
  --sh-btn:0 0 0 1px #3F3F3F, 0 4px 10px -8px rgba(0,0,0,.9);
}
html.up-dark body{background:var(--bg);color:var(--ink)}
html.up-dark ::-webkit-scrollbar-thumb{background:#4A4A4A}
html.up-dark ::-webkit-scrollbar-track{background:transparent}
html.up-dark .pane:hover{scrollbar-color:#4A4A4A transparent}
html.up-dark .pane:hover::-webkit-scrollbar-thumb{background:#4A4A4A}

/* 1. Bộ máy AI */
html.up-dark .seg{background:var(--soft-2);color:var(--ink-2);box-shadow:inset 0 0 0 1px #3A3A3A}
html.up-dark .seg:hover{background:#383838}
html.up-dark .seg .crown{color:#F0A868}
html.up-dark .seg[aria-pressed="true"]{background:var(--sel);color:#fff;box-shadow:inset 0 0 0 1px #5A86C8,0 6px 16px -10px rgba(71,114,179,.9)}
html.up-dark .seg[aria-pressed="true"] .crown{color:#FFD9A0}
html.up-dark .note{background:#232323;box-shadow:inset 0 0 0 1px #333}
html.up-dark .note .t{color:#F0A868}

/* 2. Khung hình & chất lượng */
html.up-dark .ratio{background:var(--soft-2);color:var(--mut-3);box-shadow:inset 0 0 0 1px #3A3A3A}
html.up-dark .ratio:hover{background:#383838}
html.up-dark .ratio i{background:#6A6A6A}
html.up-dark .ratio[aria-pressed="true"]{background:#3D3D3D;color:#fff;box-shadow:inset 0 0 0 1.5px var(--sel)}
html.up-dark .ratio[aria-pressed="true"] i{background:var(--sel)}
html.up-dark .pills,html.up-dark .g25m-w{background:#1F1F1F;box-shadow:inset 0 0 0 1px #333}
html.up-dark .pills button{color:var(--mut-3)}
html.up-dark .pills button:hover:not(:disabled):not([aria-pressed="true"]){background:#2E2E2E;color:var(--ink)}
html.up-dark .pills button[aria-pressed="true"]{background:var(--sel);color:#fff;box-shadow:0 2px 8px -4px rgba(71,114,179,.8)}
html.up-dark .g25m-w button{color:var(--mut)}
html.up-dark .g25m-w button[aria-pressed="true"]{background:#3A3A3A;color:#fff;box-shadow:inset 0 0 0 1.5px var(--sel)}
html.up-dark .g25m-w button[aria-pressed="true"] b,html.up-dark .mjm .g25m-w button[aria-pressed="true"] .mjp{color:#8FB2EA}
html.up-dark .g25m-see:hover{background:#2E2E2E;color:#F0A868;box-shadow:inset 0 0 0 1px #3A3A3A}

/* Tooltip + coachmark */
html.up-dark .ref-qi,html.up-dark .g25m .qi{border-color:#4A4A4A;color:var(--mut-3)}
html.up-dark .ref-qi .tip,html.up-dark .g25m .qi .tip{background:#3A3A3A;box-shadow:0 0 0 1px #4A4A4A,0 12px 30px rgba(0,0,0,.6);color:#EDEDED}
html.up-dark .ref-qi .tip:after{background:#3A3A3A}
html.up-dark .coach{background:#3A3A3A;box-shadow:0 0 0 1px #4A4A4A,0 12px 30px rgba(0,0,0,.6)}
html.up-dark .coach:after{background:#3A3A3A}
html.up-dark .coach .cx{background:var(--sel);color:#fff}

/* 3. Ảnh tham chiếu */
html.up-dark .ref{background:var(--soft-2);color:var(--mut-3);box-shadow:inset 0 0 0 1px #3A3A3A}
html.up-dark .ref:hover{background:#383838;color:#F0A868}

/* Nút Tạo ảnh */
html.up-dark .cta{box-shadow:0 2px 10px rgba(224,123,60,.25),0 14px 28px -18px rgba(224,123,60,.8)}
html.up-dark .pane .cta-sec{box-shadow:0 -12px 18px -12px rgba(0,0,0,.7),var(--sh-1)}

/* Kết quả */
html.up-dark .stage{background:#1F1F1F;box-shadow:inset 0 0 0 1px #2E2E2E}
html.up-dark .ph .mk{background:#303030;color:#F0A868;box-shadow:inset 0 0 0 1px #404040}
html.up-dark .load .sp{border-color:rgba(255,255,255,.1);border-top-color:var(--acc)}
html.up-dark .load .bar{background:rgba(255,255,255,.08)}
html.up-dark .err{color:#F87171}
html.up-dark .shot{background:#303030;box-shadow:0 0 0 1px #3A3A3A,0 10px 22px -16px rgba(0,0,0,.9)}
html.up-dark .shot.on{box-shadow:0 0 0 2px var(--sel),0 10px 22px -16px rgba(0,0,0,.9)}
html.up-dark .shot-dl{background:rgba(40,40,40,.94);color:#EDEDED;box-shadow:0 0 0 1px #4A4A4A}
html.up-dark .shot-dl:hover{background:var(--acc);color:#fff}
html.up-dark .rinfo .ch{background:#303030;box-shadow:inset 0 0 0 1px #3A3A3A}
html.up-dark .rinfo .ch.t{background:rgba(224,123,60,.16);color:#F0A868}
html.up-dark .rinfo .ch.t b{color:#F5B888}

/* Ô mô tả */
html.up-dark #pr::placeholder{color:#777}
html.up-dark .samples{background:#232323;border-top:1px solid #2F2F2F}
html.up-dark .samples button{background:#333;color:var(--ink-2);box-shadow:inset 0 0 0 1px #404040}
html.up-dark .samples button:hover{background:var(--sel);color:#fff}

/* Ảnh gần đây */
html.up-dark .rec-i{background:#303030;box-shadow:0 0 0 1px #3A3A3A}
html.up-dark .rec-o{background:rgba(0,0,0,.6)}
html.up-dark .rec-o button{background:#3A3A3A;color:#EDEDED}
html.up-dark .rec-o button:hover{background:var(--acc);color:#fff}
html.up-dark .rec-clr:hover{background:rgba(248,113,113,.12);color:#F87171}

/* Popup đăng nhập */
html.up-dark .lgm{background:rgba(0,0,0,.65)}
html.up-dark .lgm-c{box-shadow:0 0 0 1px #3A3A3A,0 30px 80px -24px rgba(0,0,0,.9)}
html.up-dark .lgm-gg,html.up-dark .lgm-f input[type=text],html.up-dark .lgm-f input[type=password]{box-shadow:inset 0 0 0 1px #404040}
html.up-dark .lgm-f input:focus{box-shadow:inset 0 0 0 1.5px var(--sel)}
html.up-dark .lgm-or::before,html.up-dark .lgm-or::after{background:#3A3A3A}
html.up-dark .lgm-e{background:rgba(248,113,113,.12);color:#FCA5A5;box-shadow:inset 0 0 0 1px rgba(248,113,113,.3)}
html.up-dark .toast{background:#3A3A3A;color:#F2F2F2;box-shadow:0 0 0 1px #4A4A4A,0 16px 40px -20px #000}

/* Web tour */
html.up-dark .up-tour-card{background:#3A3A3A;color:#E5E5E5;box-shadow:0 12px 40px rgba(0,0,0,.6);border:1px solid #4A4A4A}
html.up-dark .up-tour-d{color:#C8C8C8}
html.up-dark .up-tour-a .go{background:var(--sel)}
html.up-dark .up-tour-a .no{color:#A3A3A3}
html.up-dark .up-tour-spot{box-shadow:0 0 0 9999px rgba(0,0,0,.6)}