:root {
  --bg:#fff;
  --fg:#111;
  --muted:#666;
  --line:#ddd;
  --soft:#f6f6f6;
  --danger:#b00;
  --ok:#0a7;
  --warn:#b60;
}

/* Base */
body {
  font-family: system-ui, Arial, sans-serif;
  margin: 16px;
  color: var(--fg);
  background: var(--bg);
}

a { color: inherit; word-break: break-all; }

button, input, select, textarea {
  padding: 8px;
  font: inherit;
}

textarea { width: 100%; }

button { cursor: pointer; }

pre {
  background: var(--soft);
  border: 1px solid var(--line);
  padding: 10px;
  border-radius: 8px;
  overflow: auto;
}

/* Layout */
.top { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.between { justify-content: space-between; }
.end { justify-content: flex-end; }

.grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px){
  .grid { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; }
}

.cols { display:grid; grid-template-columns: 1.2fr 1fr; gap: 12px; margin-top: 12px; }
@media (max-width: 900px){ .cols{ grid-template-columns:1fr; } }

.sep { height:1px; background: var(--line); margin:10px 0; }

/* Text */
.muted { color: var(--muted); font-size: 12px; }
.mono  { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.prewrap { white-space: pre-wrap; }
.err { color: var(--danger); white-space: pre-wrap; }
.ok  { color:#065; white-space: pre-wrap; }
.errText { color: var(--danger); }

/* Cards */
.card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  margin-top: 12px;
}
.card.narrow { max-width: 520px; margin-top: 0; }

/* Tables */
.table-wrap { overflow:auto; }
table { width:100%; border-collapse: collapse; margin-top: 10px; }
th, td { border:1px solid var(--line); padding:8px; vertical-align: top; }
th { background: var(--soft); text-align:left; }

/* Pills / chips */
.pill { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; border:1px solid var(--line); }
.pill.ok { border-color: var(--ok); color: var(--ok); }
.pill.warn { border-color: var(--warn); color: var(--warn); }
.pill.danger { border-color: var(--danger); color: var(--danger); }
.pill.neutral { border-color:#888; color:#444; }

/* Buttons */
.btn-danger { border:1px solid var(--danger); color:var(--danger); background:#fff; }
.btn-ok { border:1px solid var(--ok); color:var(--ok); background:#fff; }
.btn-soft { border:1px solid #bbb; background:#fff; }
.btn-slim { padding: 6px 8px; }
.btn-xs { padding:2px 6px; }

/* Nav pills */
.nav { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.nav a {
  text-decoration:none;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color: var(--fg);
  background: var(--bg);
  font-size:14px;
  line-height:1.2;
}
.nav a:hover { background:#f5f5f5; }

/* Inline message */
.msg { padding:10px 12px; border:1px solid var(--line); border-radius:12px; margin:10px 0; }
.msg.err { border-color:#f2b8b5; background:#fff5f5; color:#7a1414; }
.msg.ok  { border-color:#b7e0c0; background:#f3fff5; color:#0f4d22; }

/* Modals (Write + Mod) */
.modal { position: fixed; inset: 0; z-index: 50; display:flex; align-items:center; justify-content:center; padding:16px; }
.modal.hidden { display:none; }

.modal-backdrop { position:absolute; inset:0; background: rgba(0,0,0,0.25); }

.modal-card, .modalCard {
  position:relative;
  width: min(1100px, 100%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.modalCard { max-width: 980px; max-height: 90vh; overflow:auto; padding: 14px; }

.modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border-bottom:1px solid #eee; }
.modal-body { padding:12px; max-height: calc(100vh - 160px); overflow:auto; }
.modal-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.modal-title { display:flex; align-items:center; gap:10px; }

.field { display:flex; flex-direction:column; gap:6px; }
.field textarea { width:100%; min-height: 180px; }
.field input, .field select, .field textarea {
  padding:8px;
  font: inherit;
  border:1px solid var(--line);
  border-radius: 10px;
}

.modal th { position: sticky; top: 0; z-index: 1; background: #fafafa; }

/* Admin chips + status pills */
.chip { display:inline-block; padding:2px 8px; border:1px solid #ccc; border-radius:999px; margin:2px 6px 2px 0; font-size:12px; }
.chip.super { border-color: var(--danger); color: var(--danger); }

.status-pill{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--line);
  line-height: 18px;
}
.status-APPROVED{ background:#e9f8ee; border-color:#9ad3a8; color:#0b5; }
.status-PENDING { background:#fff7e6; border-color:#ffd27a; color:#a66a00; }
.status-BLOCKED { background:#fdecec; border-color:#f3a3a3; color:var(--danger); }
.status-UNKNOWN { background:#f3f3f3; border-color:#d6d6d6; color:#555; }

/* Row messages (admin rows) */
.rowmsg { font-size:12px; margin-top:6px; }
.rowmsg.ok { color:#065; }
.rowmsg.err { color: var(--danger); }

/* Pager */
.pager { margin-top: 8px; }
.pager button { padding: 6px 10px; }
.pager select { padding: 6px 10px; }

/* Utilities */
.hidden { display:none !important; }
.m0 { margin: 0 !important; }
.mt6 { margin-top: 6px !important; }
.mt10 { margin-top: 10px !important; }
.mt12 { margin-top: 12px !important; }
.mb8 { margin-bottom: 8px !important; }
.mb10 { margin-bottom: 10px !important; }
.my8 { margin: 8px 0 !important; }
.ml6 { margin-left: 6px !important; }

.w100 { width: 100% !important; }
.w160 { width: 160px !important; }
.w220 { width: 220px !important; }
.w260 { width: 260px !important; }
.minw240 { min-width: 240px !important; }
.minh120 { min-height: 120px !important; }

.flexwrap { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }

/* Write page fields */
#content { min-height: 220px; }
#links { min-height: 90px; }


/* Direction helpers (set by JS via dir attribute) */
textarea[dir="rtl"], input[dir="rtl"] { text-align: right; }
textarea[dir="ltr"], input[dir="ltr"] { text-align: left; }
/* Home: hero background + glass card */
body.home{
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 16px;

  background: #081223 url("/assets/background.png") no-repeat;
  background-size: cover;
  background-position: 25% center;
}

body.home::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(800px 400px at 70% 35%, rgba(0,0,0,0.10), rgba(0,0,0,0.72)),
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.75));
}

body.home .card.narrow{
  position: relative;
  z-index: 1;

  width: min(520px, 100%);
  border: 1px solid rgba(255,255,255,0.28);
  background: #09294d;
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
}

/* Brand header */
.brand{ display:flex; gap:12px; align-items:center; margin-bottom: 10px; }
.brandLogo{ height: 34px; width: auto; display:block; }
.brandTitle{ margin:0; font-size: 20px; line-height: 1.2; }
.brandTag{ margin-top: 2px; }

/* Buttons (used by home login) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
}

.btn:hover{ background:#f5f5f5; }

.btn.secondary{
  background: transparent;
}

.tgActions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
}

.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (min-width: 1100px){
  body.home{ justify-items: end; padding-right: 10vw; }
}