/* link4u shared styles. Layout: a calm working surface, the Mohtwa AI blue as the
   one accent (cyan only in the brand mark), links and URLs always set left-to-right
   in a mono face. */
:root {
  --bg: #f3f6fb;
  --surface: #ffffff;
  --ink: #0d1b2e;
  --muted: #5a6b80;
  --line: #d9e1ec;
  --accent: #0b63d6;
  --accent-ink: #ffffff;
  --cyan: #19c3ea;
  --night: #070d16;
  --soft: #e4eefc;
  --warn: #a8500f;
  --warn-soft: #fbeedd;
  --danger: #b3261e;
  --danger-soft: #fbe9e7;
  --font-display: Cairo, "IBM Plex Sans Arabic", Tahoma, sans-serif;
  --font-body: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --radius: 12px;
}
/* Dark colours: when the system is dark and no choice was made, or when dark was chosen
   with the switch in the top bar (saved in the browser, applied by i18n.js before paint). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070d16;
    --surface: #101a2a;
    --ink: #e6edf7;
    --muted: #93a2b8;
    --line: #22304a;
    --accent: #4aa3ff;
    --accent-ink: #04172e;
    --cyan: #22d3ee;
    --soft: #142743;
    --warn: #f0a868;
    --warn-soft: #33261a;
    --danger: #ff8a80;
    --danger-soft: #3a1f1d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #070d16;
    --surface: #101a2a;
    --ink: #e6edf7;
    --muted: #93a2b8;
    --line: #22304a;
    --accent: #4aa3ff;
    --accent-ink: #04172e;
    --cyan: #22d3ee;
    --soft: #142743;
    --warn: #f0a868;
    --warn-soft: #33261a;
    --danger: #ff8a80;
    --danger-soft: #3a1f1d;
    color-scheme: dark;
  }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
}
h1, h2, h3 { font-family: var(--font-display); line-height: 1.35; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); }
.wrap { width: 100%; max-width: 1040px; margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.muted { color: var(--muted); }
.ltr { direction: ltr; unicode-bidi: isolate; font-family: var(--font-mono); font-size: 0.92em; }
.num { font-variant-numeric: tabular-nums; }

/* top bar */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: 12px; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink); text-decoration: none; direction: ltr; display: inline-flex; align-items: center; line-height: 0; }
/* the logo: dark lettering on light pages, white lettering in night mode */
.brand img { height: 40px; width: auto; display: block; }
.brand .logo-d { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .logo-l { display: none; } :root:not([data-theme="light"]) .brand .logo-d { display: block; } }
:root[data-theme="dark"] .brand .logo-l { display: none; }
:root[data-theme="dark"] .brand .logo-d { display: block; }
.brand b { font-weight: 700; background: linear-gradient(90deg, var(--accent), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--muted); font-size: 0.9rem; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 8px 18px; border-radius: 10px; border: 1px solid transparent;
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.55; cursor: default; filter: none; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--soft); filter: none; }
.btn.danger { background: transparent; color: var(--danger); border-color: var(--line); }
.btn.danger:hover { background: var(--danger-soft); filter: none; }
.btn.small { min-height: 36px; padding: 4px 12px; font-size: 0.88rem; font-weight: 500; }
.btn.icon { padding-inline: 8px; min-width: 36px; }
.btn.icon svg { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* forms */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label { font-weight: 500; font-size: 0.92rem; }
.field .hint { color: var(--muted); font-size: 0.82rem; }
textarea { resize: vertical; min-height: 84px; line-height: 1.6; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"], textarea {
  width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit;
}
input.ltr { text-align: left; }
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.slugbox { display: flex; direction: ltr; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); overflow: hidden; }
.slugbox span { display: flex; align-items: center; padding-inline: 12px 4px; color: var(--muted); font-family: var(--font-mono); font-size: 0.9rem; white-space: nowrap; }
.slugbox input { border: 0; background: transparent; padding-inline-start: 0; min-width: 0; }
.slugbox:focus-within { outline: 2px solid var(--accent); border-color: transparent; }
.slugbox input:focus { outline: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.msg { font-size: 0.9rem; min-height: 1.5em; }
.msg.err { color: var(--danger); }
.msg.ok { color: var(--accent); }

/* status pills */
.pill { display: inline-block; padding: 1px 10px; border-radius: 99px; font-size: 0.8rem; font-weight: 500; background: var(--soft); color: var(--accent); white-space: nowrap; }
/* small label beside a link's name: store link or links page */
.link-type { display: inline-block; padding: 0 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); font-size: 0.7rem; font-weight: 400; line-height: 1.7; white-space: nowrap; vertical-align: middle; }
.pill.paused { background: var(--warn-soft); color: var(--warn); }
.pill.blocked, .pill.suspended { background: var(--danger-soft); color: var(--danger); }

/* page footer (home, terms, privacy) */
.site-foot { border-top: 1px solid var(--line); }
.site-foot .wrap { display: flex; gap: 8px 22px; flex-wrap: wrap; padding-block: 18px; font-size: 0.88rem; }
.site-foot a { color: var(--muted); }

/* toast */
#toast {
  position: fixed; inset-inline: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); margin-inline: auto;
  width: fit-content; max-width: calc(100% - 32px); padding: 10px 18px; border-radius: 10px;
  background: var(--ink); color: var(--bg); font-size: 0.92rem; z-index: 50;
  opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; pointer-events: none;
}
#toast.show { opacity: 1; transform: none; }

/* dialogs */
dialog {
  width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 1px solid var(--line);
  border-radius: 16px; background: var(--surface); color: var(--ink);
}
dialog::backdrop { background: rgba(8, 16, 14, 0.55); }
.dlg-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.dlg-head h2 { font-size: 1.1rem; flex: 1; min-width: 0; }
.dlg-body { padding: 20px; display: flex; flex-direction: column; gap: 20px; }

/* tables (admin) */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-weight: 500; font-size: 0.82rem; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td .btn { margin-block: 2px; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* account dialog: password, copy of data, delete */
.acct-part { display: flex; flex-direction: column; gap: 12px; }
.acct-part + .acct-part { border-top: 1px solid var(--line); padding-top: 20px; }
.acct-part h3 { font-size: 1rem; }
.acct-part .hint { margin: 0; }
.danger-zone h3 { color: var(--danger); }
.danger-zone .btn.danger:not(:disabled) { background: var(--danger); color: #fff; border-color: var(--danger); }