/* Hub App DevTools — tối giản, tông tối cùng họ với app.css của gncrawl. */
:root { --bg:#0f1115; --card:#171a21; --border:#262b36; --text:#e7eaf0;
        --muted:#8b93a3; --accent:#ff6b35; --danger:#ff5d5d; }
[data-theme="light"] { --bg:#f5f6f8; --card:#ffffff; --border:#dde1e8;
        --text:#1c2027; --muted:#5f6774; }
* { box-sizing:border-box; margin:0; }
body { background:var(--bg); color:var(--text);
       font:15px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;
       min-height:100vh; }
.center { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:24px; }
.login-card { width:100%; max-width:360px; display:flex; flex-direction:column; gap:14px; }
.brand { font-size:22px; font-weight:700; letter-spacing:-.02em; }
.brand span { color:var(--accent); }
.muted { color:var(--muted); font-size:13px; }
.alert { border:1px solid var(--danger); color:var(--danger); border-radius:10px; padding:10px 12px; font-size:13px; }
form { display:flex; flex-direction:column; gap:10px; }
label { font-size:13px; color:var(--muted); }
input { background:transparent; border:1px solid var(--border); border-radius:10px;
        padding:10px 12px; color:var(--text); font-size:15px; }
input:focus { outline:none; border-color:var(--accent); }
button { background:var(--accent); color:#fff; border:0; border-radius:10px;
         padding:11px 16px; font-size:15px; font-weight:600; cursor:pointer; }
button.ghost { background:transparent; color:var(--muted); border:1px solid var(--border);
               padding:7px 12px; font-size:13px; font-weight:500; }
.topbar { display:flex; align-items:center; justify-content:space-between;
          padding:16px 24px; border-bottom:1px solid var(--border); }
.grid { display:grid; gap:16px; padding:24px; margin:0 auto; max-width:960px;
        grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.tool-card { display:flex; flex-direction:column; gap:8px; text-decoration:none;
             color:var(--text); transition:border-color .15s; }
.tool-card:hover { border-color:var(--accent); }
.tool-card h2 { font-size:17px; }
.tool-icon { width:34px; height:34px; color:var(--accent); }
.tool-icon svg { width:100%; height:100%; }

/* --- Ô tìm tool trên topbar --- */
/* [hidden] phải thắng display:flex của .tool-card, nếu không thẻ ẩn vẫn hiện. */
[hidden] { display: none !important; }
.topbar { flex-wrap: wrap; gap: 10px; }
.search { flex: 1 1 200px; max-width: 420px; min-width: 160px; }
.no-match { grid-column: 1 / -1; padding: 8px 0; }

/* --- Nút đổi sáng/tối --- */
/* color-scheme để ô input, thanh cuộn, control gốc của trình duyệt đổi theo. */
:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
.topbar-actions { display:flex; align-items:center; gap:8px; }
/* PHẢI là button.theme-toggle: button.ghost ở trên đặt padding 7px 12px với
   specificity cao hơn class trần, viết .theme-toggle thì padding:0 không thắng
   và icon bị bóp còn 8px. flex:none để nút không co khi topbar chật. */
button.theme-toggle { flex:none; display:inline-flex; align-items:center;
                justify-content:center; width:34px; height:34px; padding:0;
                border-radius:100px; }
.theme-toggle svg { width:17px; height:17px; }

/* Trang login không có topbar. Đặt nút cùng hàng với tên thay vì position:fixed
   thả góc màn hình: nằm trong luồng thì không khung nhìn nào chồng lên thẻ được
   (bản fixed chồng ở màn vừa hẹp vừa thấp, vd 375x330). */
.login-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }