/* assets/style.css — professional & accessible theme */

:root{
  --bg:#0f1216;
  --surface:#171b21;
  --surface-2:#1e242c;
  --border:#2b3440;
  --text:#e6e9ef;
  --muted:#b3bdc9;
  --brand:#5c8ef2;         /* calmer blue accent */
  --brand-contrast:#0b66ff;
  --success:#23c98a;
  --warn:#ffc857;
  --danger:#ff6b6b;
  --focus:#94b0ff;
}

*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
}

a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-contrast); text-decoration:underline}

.container{max-width:1200px;margin:0 auto;padding:24px}

.nav{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px;
  padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface);
}
.nav a, .nav button{
  color:var(--text); text-decoration:none; padding:8px 12px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--border);
}
.nav a:hover{background:#222a33}

.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.card-header{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px}
.card-title{font-weight:600; font-size:1.05rem}
.card-sub{color:var(--muted); font-size:.9rem}

.table{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px; border:1px solid var(--border)
}
.table th, .table td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--border)}
.table thead th{background:var(--surface-2); color:var(--muted); font-weight:600}
.table tbody tr:hover{background:#202733}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--brand); border:1px solid #3b6fe6; color:#0b1220;
  padding:10px 14px; border-radius:10px; font-weight:600; cursor:pointer;
}
.btn:hover{background:var(--brand-contrast); color:white}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--border)}
.btn.danger{background:var(--danger); border-color:#ee5151; color:#1b0b0b}
.btn.success{background:var(--success); border-color:#14b47b; color:#001611}

.input, select, textarea, input[type="file"]{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:#0c1015; color:var(--text)
}
textarea{min-height:120px}
label{display:block; margin:10px 0 6px; color:var(--muted); font-size:.95rem}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.help{color:var(--muted); font-size:.9rem}

.badge{
  display:inline-block; padding:2px 10px; border-radius:999px; font-size:.8rem;
  border:1px solid var(--border); background:var(--surface-2); color:var(--muted)
}
.badge.ok{background:rgba(35,201,138,.15); color:#86f0c8; border-color:#1e7f61}
.badge.warn{background:rgba(255,200,87,.15); color:#ffe29c; border-color:#7a5e1c}
.badge.err{background:rgba(255,107,107,.15); color:#ffc0c0; border-color:#8a3030}

hr{border:0; height:1px; background:var(--border); margin:18px 0}

kbd{
  background:#0c1015; border:1px solid var(--border); border-bottom-color:#1f2834;
  padding:2px 6px; border-radius:6px; font-size:.85rem
}

:focus-visible{outline:3px solid var(--focus); outline-offset:2px}