/* KHUTWA design system - black / yellow / white */
:root {
  --black:#000000; --bg:#0a0a0a; --surface:#141414; --surface2:#1d1d1f; --border:#2b2b2b;
  --yellow:#FFD60A; --yellow-dim:#e6c109; --white:#ffffff; --muted:#9b9b9b; --danger:#ff453a; --ok:#30d158;
  --radius:14px; --radius-s:9px;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { font-size:16px; }
body { background:var(--bg); color:var(--white); font-family:'Cairo',system-ui,sans-serif; min-height:100vh; }
a { color:var(--yellow); text-decoration:none; }
img { max-width:100%; }

/* boot */
.boot { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100vh; gap:22px; }
.boot-logo { width:120px; border-radius:24px; }
.boot-spinner { width:34px; height:34px; border:3px solid var(--border); border-top-color:var(--yellow); border-radius:50%; animation:spin 0.9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* layout */
.topbar { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:12px; padding:10px 18px; background:rgba(10,10,10,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.topbar img.brand { width:38px; height:38px; border-radius:9px; }
.topbar .brand-name { font-weight:800; font-size:1.05rem; letter-spacing:.3px; }
.topbar .brand-name b { color:var(--yellow); }
.topbar .spacer { flex:1; }
.container { max-width:1080px; margin:0 auto; padding:20px 16px 90px; }
.crumb { color:var(--muted); font-size:.85rem; margin-bottom:14px; }
.crumb a { color:var(--muted); } .crumb a:hover { color:var(--yellow); }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:var(--radius-s); border:1px solid var(--border); background:var(--surface2); color:var(--white); font-family:inherit; font-size:.92rem; font-weight:600; cursor:pointer; transition:.15s; }
.btn:hover { border-color:var(--yellow); }
.btn.primary { background:var(--yellow); border-color:var(--yellow); color:#000; }
.btn.primary:hover { background:var(--yellow-dim); }
.btn.ghost { background:transparent; }
.btn.danger { color:var(--danger); border-color:#4a2626; }
.btn.danger:hover { border-color:var(--danger); }
.btn.sm { padding:5px 12px; font-size:.82rem; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.icon-btn { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; border:1px solid var(--border); background:var(--surface2); color:var(--white); cursor:pointer; font-size:1rem; }
.icon-btn:hover { border-color:var(--yellow); color:var(--yellow); }

/* cards & grids */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; }
.grid { display:grid; gap:14px; }
.grid.apps { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.app-tile { display:flex; flex-direction:column; gap:10px; padding:20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:.15s; color:var(--white); }
.app-tile:hover { border-color:var(--yellow); transform:translateY(-2px); }
.app-tile .tile-icon { width:44px; height:44px; border-radius:11px; background:var(--yellow); color:#000; display:flex; align-items:center; justify-content:center; font-size:1.3rem; font-weight:800; }
.app-tile .tile-name { font-weight:700; font-size:1.02rem; }
.app-tile .tile-sub { color:var(--muted); font-size:.8rem; }
.app-tile.add { align-items:center; justify-content:center; border-style:dashed; color:var(--muted); min-height:130px; }
.app-tile.add:hover { color:var(--yellow); }

/* tabs */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:18px; overflow-x:auto; }
.tab { padding:9px 16px; color:var(--muted); font-weight:600; font-size:.92rem; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; background:none; border-top:none; border-inline:none; font-family:inherit; }
.tab:hover { color:var(--white); }
.tab.active { color:var(--yellow); border-bottom-color:var(--yellow); }

/* table (data grid) */
.tablewrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
table.data { width:100%; border-collapse:collapse; font-size:.9rem; }
table.data th { text-align:start; padding:11px 14px; background:var(--surface2); color:var(--muted); font-weight:700; font-size:.8rem; border-bottom:1px solid var(--border); white-space:nowrap; cursor:pointer; user-select:none; }
table.data th:hover { color:var(--yellow); }
table.data td { padding:10px 14px; border-bottom:1px solid #1e1e1e; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
table.data tr:last-child td { border-bottom:none; }
table.data tbody tr { cursor:pointer; transition:.1s; }
table.data tbody tr:hover { background:#1a1a10; }
.chip { display:inline-block; padding:2px 10px; border-radius:20px; background:var(--surface2); border:1px solid var(--border); font-size:.78rem; }
.chip.yellow { background:rgba(255,214,10,.14); border-color:rgba(255,214,10,.4); color:var(--yellow); }
.thumb { width:38px; height:38px; object-fit:cover; border-radius:8px; border:1px solid var(--border); }

/* toolbar */
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
.toolbar .grow { flex:1; min-width:140px; }
.search { display:flex; align-items:center; gap:8px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-s); padding:8px 12px; flex:1; min-width:180px; }
.search input { background:none; border:none; outline:none; color:var(--white); font-family:inherit; font-size:.9rem; width:100%; }

/* forms */
.field { margin-bottom:16px; }
.field label { display:block; font-size:.85rem; font-weight:700; color:var(--muted); margin-bottom:6px; }
.field label .req { color:var(--yellow); }
.input, select.input, textarea.input { width:100%; padding:10px 13px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-s); color:var(--white); font-family:inherit; font-size:.95rem; outline:none; transition:.15s; }
.input:focus { border-color:var(--yellow); }
textarea.input { min-height:90px; resize:vertical; }
.checkbox-row { display:flex; align-items:center; gap:10px; padding:10px 0; }
input[type=checkbox].cb { width:20px; height:20px; accent-color:var(--yellow); }
.hint { color:var(--muted); font-size:.78rem; margin-top:4px; }
.form-actions { display:flex; gap:10px; margin-top:22px; }

/* modal */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(3px); z-index:100; display:flex; align-items:center; justify-content:center; padding:18px; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); width:100%; max-width:520px; max-height:88vh; overflow-y:auto; padding:24px; }
.modal h3 { margin-bottom:18px; font-size:1.1rem; }
.modal.wide { max-width:760px; }

/* toast */
#toasts { position:fixed; bottom:20px; inset-inline-start:20px; z-index:200; display:flex; flex-direction:column; gap:8px; }
.toast { background:var(--surface2); border:1px solid var(--yellow); color:var(--white); padding:11px 18px; border-radius:var(--radius-s); font-size:.9rem; font-weight:600; box-shadow:0 6px 24px rgba(0,0,0,.5); animation:slidein .2s; }
.toast.err { border-color:var(--danger); }
@keyframes slidein { from { transform:translateY(14px); opacity:0; } }

/* badges & misc */
.badge { display:inline-block; padding:3px 11px; border-radius:20px; font-size:.75rem; font-weight:700; }
.badge.admin { background:rgba(255,214,10,.15); color:var(--yellow); }
.badge.editor { background:rgba(48,209,88,.13); color:var(--ok); }
.badge.viewer { background:var(--surface2); color:var(--muted); }
.empty { text-align:center; padding:60px 20px; color:var(--muted); }
.empty .big { font-size:2.6rem; margin-bottom:12px; }
.section-title { font-size:1.25rem; font-weight:800; margin-bottom:4px; }
.section-sub { color:var(--muted); font-size:.88rem; margin-bottom:20px; }
.divider { height:1px; background:var(--border); margin:18px 0; }
.row-flex { display:flex; align-items:center; gap:10px; }
.muted { color:var(--muted); }
.stat-num { font-size:2rem; font-weight:800; color:var(--yellow); }
.kbd { background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:1px 7px; font-size:.78rem; }

/* builder */
.field-row { display:flex; align-items:center; gap:10px; padding:11px 14px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-s); margin-bottom:8px; }
.field-row .drag { cursor:grab; color:var(--muted); }
.field-row .fname { font-weight:700; flex:1; }
.field-row .ftype { color:var(--muted); font-size:.8rem; }
.type-pill { font-size:.72rem; padding:2px 9px; border-radius:12px; background:#000; border:1px solid var(--border); color:var(--yellow); }

/* dashboard widgets */
.widgets { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.widget { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; position:relative; }
.widget .w-title { color:var(--muted); font-size:.82rem; font-weight:700; margin-bottom:8px; }
.widget.wide { grid-column:1/-1; }
.widget canvas { max-height:260px; }

/* pivot */
table.pivot td.num, table.pivot th.num { text-align:center; font-variant-numeric:tabular-nums; }
table.pivot th[scope=row] { cursor:default; color:var(--white); }
tr.total td, tr.total th { background:rgba(255,214,10,.08); font-weight:800; color:var(--yellow); }

/* auth */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card { width:100%; max-width:400px; text-align:center; }
.auth-card img { width:92px; border-radius:20px; margin-bottom:18px; }
.auth-card h1 { font-size:1.5rem; margin-bottom:6px; }
.auth-card h1 b { color:var(--yellow); }
.auth-card .sub { color:var(--muted); font-size:.9rem; margin-bottom:26px; }
.auth-card .field { text-align:start; }
.lang-switch { margin-top:18px; color:var(--muted); font-size:.85rem; cursor:pointer; }
.lang-switch:hover { color:var(--yellow); }

/* responsive */
@media (max-width:640px) {
  .container { padding:14px 12px 90px; }
  .hide-sm { display:none; }
  table.data td, table.data th { padding:8px 10px; }
  .modal { padding:18px; }
}
.ltr { direction:ltr; }