* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0 !important;
  font-family: 'Noto Sans Arabic', 'DejaVu Sans', 'FreeSans', 'Liberation Sans', Tahoma, Arial, sans-serif !important;
  font-size: 1rem;
  line-height: 1.75;
}

html {
  background: #121212;
  color: #e2e2e6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  padding: 1em 0.5em;
}

main {
  max-width: 36em;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

header {
  text-align: center;
}

.card, details {
  background: #1e1e1e;
  border: 1px solid #383838;
  padding: 1em;
}

.intro {
  border-right: 0.25em solid #8ab4f8;
}

.stats-banner {
  color: yellow;
  font-weight: 700;
  margin-top: 0.5em;
}

.error-banner {
  border-right: 0.25em solid #f2b8b5;
  background: #2b1d1d;
  color: #f2b8b5;
  padding: 0.5em;
  margin-top: 0.5em;
}

h1, h2, label, summary, button {
  font-weight: 700;
}

h1 {
  color: #8ab4f8;
  margin-bottom: 0.25em;
}

p {
  color: #c4c7c5;
}

input, select, button {
  font: inherit;
  width: 100%;
  min-height: 2em;
  padding: 0.5em;
  background: #121212;
  color: #e2e2e6;
  border: 1px solid #55585d;
}

button {
  background: #8ab4f8;
  color: #041e49;
  cursor: pointer;
  border: 1px solid #8ab4f8;
}

button:active { background: #aecbfa; }
.btn-alt { background: #1e1e1e; color: #e2e2e6; border-color: #55585d; }
.btn-del { background: #1e1e1e; color: #f2b8b5; border-color: #8c1d18; }

input:focus, select:focus, button:focus, summary:focus {
  outline: 0.25em solid #8ab4f8;
}

.row, .tags, .tag, .agree {
  display: flex;
  gap: 0.5em;
  align-items: center;
}

.panel-actions {
  margin-top: 1em;
}

.row select { flex: 1; }
.row button { width: auto; padding: 0.5em 1em; }

.tags { flex-wrap: wrap; margin-top: 0.5em; }
.tag { background: #121212; border: 1px solid #55585d; padding: 0.25em 0.5em; }
.tag button { width: auto; min-height: 1em; padding: 0 0.5em; border: 0; background: #383838; color: #e2e2e6; }

summary { padding: 0.5em; cursor: pointer; color: #8ab4f8; border-bottom: 1px solid #383838; }
details:not([open]) summary { border-bottom: 0; }

.steps { list-style: none; padding: 0.5em 0; }
.step { padding: 0.5em 0.25em; border-bottom: 1px solid #383838; }
.step:last-child { border-bottom: 0; }
.step-num { color: #8ab4f8; font-weight: 700; margin-left: 0.5em; }

.ltr { direction: ltr !important; text-align: left !important; unicode-bidi: isolate; }
.agree input { width: 1em; min-height: 1em; }
.hidden { display: none !important; }