/* =========================================================
   ULTRA AUTH — innlogging, registrering, min side
   Arver --green, --text, --max-width fra temaet.
   ========================================================= */

/* --- Nav: "Logg inn" --------------------------------------------------- */
.nav-login {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50px;
  padding: 8px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  opacity: 0.85 !important;
  transition: border-color .2s, background .2s, opacity .2s;
}
/* Indigo fylling ved hover. Teksten blir hvit: groent paa indigo har for
   lav kontrast til aa leses godt. */
.nav-login:hover {
  opacity: 1 !important;
  border-color: #5438DC;
  background: #5438DC;
}
.site-nav a.nav-login:hover { color: #fff; }
.nav-login svg { width: 13px; height: 13px; fill: currentColor; }

/* --- Nav: brukerbrikke ------------------------------------------------- */
.nav-user { position: relative; display: flex; align-items: center; }
.nav-user-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px;
  font-family: inherit;
}
.nav-user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.nav-user-btn:hover .nav-user-avatar { background: rgba(53,206,141,0.26); }
.nav-user-chev {
  width: 9px; height: 9px;
  fill: var(--text);
  opacity: 0.5;
  transition: transform .2s;
}
.nav-user.open .nav-user-chev { transform: rotate(180deg); }

.nav-user-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 210px;
  background: #161616;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 300;
}
.nav-user.open .nav-user-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-user-head {
  padding: 10px 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 6px;
}
.nav-user-head strong { display: block; font-size: 14px; color: var(--text); }
.nav-user-head span { display: block; font-size: 12px; color: var(--green); margin-top: 3px; }

.nav-user-menu a {
  display: block;
  padding: 9px 12px !important;
  border-radius: 9px;
  font-size: 14px !important;
  opacity: 0.7 !important;
  transition: background .2s, opacity .2s;
}
.nav-user-menu a:hover { background: rgba(255,255,255,0.05); opacity: 1 !important; }
.nav-user-menu .nav-user-logout { color: #ff6b6b !important; }
.nav-user-menu .nav-user-logout:hover { background: rgba(255,107,107,0.1); }

/* --- Sidelayout -------------------------------------------------------- */
.ua-main {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 24px 100px;
}
.ua-main--wide { align-items: flex-start; }

.ua-card {
  width: 100%;
  max-width: 420px;
  background: #151515;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg, 24px);
  padding: 40px 36px;
}

.ua-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--text);
  margin: 0 0 6px;
}
.ua-sub { font-size: 14px; color: rgba(232,240,255,0.45); margin: 0 0 28px; }
.ua-sub strong { color: var(--text); font-weight: 600; }

/* --- Skjema ------------------------------------------------------------ */
.ua-form { display: flex; flex-direction: column; }

.ua-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(232,240,255,0.7);
  margin-bottom: 7px;
}
.ua-input {
  width: 100%;
  background: #0E0E0E;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 18px;
  transition: border-color .2s, background .2s;
}
.ua-input::placeholder { color: rgba(232,240,255,0.25); }
.ua-input:focus {
  outline: none;
  border-color: var(--green-border);
  background: #111;
  box-shadow: 0 0 0 3px rgba(53,206,141,0.12);
}
.ua-input--code {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 12px;
  padding: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ua-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: rgba(232,240,255,0.55);
  margin-bottom: 22px;
  cursor: pointer;
}
.ua-check input { accent-color: var(--green); width: 15px; height: 15px; }

.ua-btn {
  width: 100%;
  background: var(--green);
  color: #0a0a0a;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 15px 28px;
  border: 0;
  border-radius: 50px;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.ua-btn:hover { background: #2fb87e; transform: translateY(-1px); }
.ua-btn--ghost {
  width: auto;
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.14);
  font-weight: 600;
  padding: 11px 22px;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
}
.ua-btn--ghost:hover { background: rgba(255,255,255,0.05); color: var(--text); }

.ua-inline-form { margin-top: 14px; text-align: center; }
.ua-link-btn {
  background: none;
  border: 0;
  color: var(--green);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px;
}
.ua-link-btn:hover { text-decoration: underline; }

.ua-note {
  font-size: 12px;
  color: rgba(232,240,255,0.35);
  line-height: 1.6;
  margin: 18px 0 0;
  text-align: center;
}
.ua-foot {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 13px;
  color: rgba(232,240,255,0.4);
  text-align: center;
  line-height: 2;
}
.ua-foot a { color: var(--green); text-decoration: none; }
.ua-foot a:hover { text-decoration: underline; }

/* Honeypot — skal aldri vises */
.ua-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Meldinger --------------------------------------------------------- */
.ua-msg {
  font-size: 13.5px;
  line-height: 1.55;
  padding: 12px 16px;
  border-radius: 11px;
  margin-bottom: 22px;
}
.ua-msg--feil { background: rgba(255,107,107,0.1); border: 1px solid rgba(255,107,107,0.28); color: #ff9b9b; }
.ua-msg--ok   { background: var(--green-dim); border: 1px solid var(--green-border); color: var(--green); }

/* --- Min side ---------------------------------------------------------- */
.ua-panel { width: 100%; max-width: var(--max-width, 1140px); }
.ua-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.ua-panel-head .ua-title { font-size: 32px; }
.ua-panel-head .ua-sub { margin: 0; color: var(--green); }

.ua-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.ua-box {
  background: #151515;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md, 16px);
  padding: 28px;
}
.ua-box h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px;
}
.ua-box p { font-size: 14px; color: rgba(232,240,255,0.5); line-height: 1.7; margin: 0 0 14px; }

.ua-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; }
.ua-dl dt { font-size: 13px; color: rgba(232,240,255,0.4); }
.ua-dl dd { font-size: 13px; color: var(--text); margin: 0; word-break: break-word; }

.ua-link { font-size: 13px; font-weight: 600; color: var(--green); text-decoration: none; }
.ua-link:hover { text-decoration: underline; }

/* --- Responsivt -------------------------------------------------------- */
@media (max-width: 767px) {
  .ua-main { padding: 110px 20px 70px; }
  .ua-card { padding: 32px 24px; }
  .ua-title { font-size: 23px; }
  .ua-panel-head .ua-title { font-size: 26px; }
  .ua-input--code { font-size: 24px; letter-spacing: 8px; }

  .nav-user-menu { right: auto; left: 0; }
}

/* --- Partnerside i profilen -------------------------------------------- */
/* Tilbake-knappen paa undersidene. Pila staar foran ordet og flytter seg
   litt mot venstre naar du peker paa den, saa retningen er tydelig. */
.ua-btn--tilbake {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 18px;
}
.ua-tilbake-pil { flex-shrink: 0; transition: transform .2s; }
.ua-btn--tilbake:hover .ua-tilbake-pil { transform: translateX(-2px); }

.ua-box--wide { grid-column: 1 / -1; }
.ua-tom { color: rgba(232,240,255,0.35); font-style: italic; }
.ua-fotnote { font-size: 12.5px; line-height: 1.6; color: rgba(232,240,255,0.28); margin: 0; }

/* Kort på min side som lenker videre */
.ua-box-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
}
.ua-box-link:hover { text-decoration: underline; }
.ua-box-link svg { width: 11px; height: 11px; fill: currentColor; }

/* --- Operations Center -------------------------------------------------- */
.ua-box--ops { border-color: var(--green-border); background: linear-gradient(135deg, rgba(53,206,141,0.06), rgba(53,206,141,0.02)); }

.ua-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: #151515;
}
.ua-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.ua-table th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(232,240,255,0.35);
  padding: 16px 20px;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}
.ua-table td {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 14px;
  color: var(--text);
  vertical-align: middle;
}
.ua-table tbody tr:last-child td { border-bottom: 0; }
.ua-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.ua-row-meg { background: rgba(53,206,141,0.04); }

.ua-cell-navn { font-weight: 600; }
.ua-cell-dempet { color: rgba(232,240,255,0.45); font-size: 13px; }

.ua-tag {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 8px;
  border-radius: 50px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--green-dim);
  color: var(--green);
  vertical-align: middle;
}
.ua-tag--admin { background: rgba(255,255,255,0.07); color: rgba(232,240,255,0.5); }

.ua-select {
  background: #0E0E0E;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  padding: 8px 12px;
  cursor: pointer;
  min-width: 140px;
  transition: border-color .2s;
}
.ua-select:hover  { border-color: var(--green-border); }
.ua-select:focus  { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(53,206,141,0.12); }

.ua-rolleform { margin: 0; }
.ua-rolle-laast {
  font-size: 13.5px;
  color: rgba(232,240,255,0.35);
  cursor: help;
  border-bottom: 1px dotted rgba(232,240,255,0.2);
}
.ua-fotnote--blokk { margin-top: 18px; max-width: 640px; }

@media (max-width: 767px) {
  .ua-table th, .ua-table td { padding: 12px 14px; }
}

/* --- Rolleikoner --------------------------------------------------------- */
.ua-role-icon { fill: currentColor; flex-shrink: 0; display: block; }

.ua-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-weight: 600;
}
/* Brikkefargen kommer fra rollen selv (--rollefarge), ikke herfra. */

/* Ikon ved siden av avataren i nav */
.nav-user-role {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: var(--green);
  margin-right: 2px;
  transition: background .2s, color .2s;
}
.nav-user-btn:hover .nav-user-role { background: var(--green-dim); }

/* Tannhjul */
.ua-gear { fill: currentColor; flex-shrink: 0; display: block; }
.nav-user-settings { display: flex !important; align-items: center; gap: 9px; }

.ua-head-knapper { display: flex; align-items: center; gap: 10px; }
.ua-ikonknapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(232,240,255,0.6);
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s, transform .3s;
}
.ua-ikonknapp:hover {
  border-color: var(--green-border);
  background: var(--green-dim);
  color: var(--green);
}
.ua-ikonknapp:hover .ua-gear { transform: rotate(45deg); transition: transform .3s; }

/* --- Bilde i boks -------------------------------------------------------- */
.ua-box--bilde { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ua-box--bilde > *:not(.ua-box-bilde) { padding-left: 28px; padding-right: 28px; }
.ua-box--bilde > h2 { padding-top: 24px; }
.ua-box--bilde > :last-child { padding-bottom: 28px; }

.ua-box-bilde {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0E0E0E;
  overflow: hidden;
}
.ua-box-bilde img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ua-box-bilde::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31,31,31,0) 55%, rgba(31,31,31,0.95) 100%);
  pointer-events: none;
}

/* --- Innstillinger ------------------------------------------------------- */
.ua-panel--smal { max-width: 620px; }
.ua-panel--smal .ua-box { margin-bottom: 18px; }
.ua-form--rad { flex-direction: row; gap: 10px; align-items: flex-start; }
.ua-form--rad .ua-input { margin-bottom: 0; }
.ua-btn--kompakt { width: auto; white-space: nowrap; padding: 13px 24px; font-size: 14px; }

@media (max-width: 520px) {
  .ua-form--rad { flex-direction: column; }
  .ua-btn--kompakt { width: 100%; }
}

/* --- Discord-boks på Min side ------------------------------------------- */
.ua-box--discord { border-color: rgba(88,101,242,0.28); }
.ua-box--discord:hover { border-color: rgba(88,101,242,0.45); }
.ua-discord-mark {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: rgba(88,101,242,0.13);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.ua-discord-mark svg { fill: #7d87f5; display: block; }
.ua-box--discord .ua-box-link { color: #8b94f7; }

/* Tomtilstand paa Min side, for brukere uten kort */
.ua-box--tom { grid-column: 1 / -1; max-width: 560px; }
.ua-tom-lenker { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 4px; }

/* --- Logg inn med Google -------------------------------------------------- */
.ua-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 50px;
  background: #fff;
  color: #1f1f1f;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.ua-google:hover { background: #f1f3f4; transform: translateY(-1px); color: #1f1f1f; }
.ua-google svg { flex-shrink: 0; display: block; }

.ua-skille {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  color: rgba(232,240,255,0.3);
  font-size: 12.5px;
}
.ua-skille::before, .ua-skille::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.09);
}

/* --- Ticketsystem ------------------------------------------------------- */
/* Egne farger for status: gronn finnes fra for, men "venter" og "avvist"
   trenger noe som skiller seg uten a rope. */
.ua-tavle,
.ua-tavlekort {
  --gul:       #E9B949;
  --gul-dim:   rgba(233,185,73,0.12);
  --roed:      #E06B6B;
  --roed-dim:  rgba(224,107,107,0.12);
}

/* Oversikten pa Min side */
.ua-tavlekort {
  background: #151515;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md, 16px);
  padding: 26px 28px 28px;
  margin-bottom: 20px;
}
.ua-tavlekort-topp {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.ua-tavlekort-topp h2 { font-size: 15px; font-weight: 600; color: var(--text); margin: 0; }

.ua-tavlerad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.ua-tavlefelt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  background: #0E0E0E;
  text-decoration: none;
  transition: border-color .2s, transform .2s, background .2s;
}
.ua-tavlefelt:hover {
  border-color: var(--green-border);
  background: rgba(53,206,141,0.04);
  transform: translateY(-2px);
}
.ua-tavlefelt-navn { font-size: 14px; font-weight: 600; color: var(--text); }
.ua-tavlefelt-sub  { font-size: 12px; color: rgba(232,240,255,0.4); line-height: 1.5; }
.ua-tavlefelt-tall { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.ua-punkt {
  font-size: 11.5px;
  font-style: normal;
  color: rgba(232,240,255,0.35);
}
.ua-punkt--venter   { color: var(--gul, #E9B949); }
.ua-punkt--godkjent { color: var(--green); }

.ua-tag--venter { background: rgba(233,185,73,0.14); color: #E9B949; }

/* Flikene mellom de fire tavlene */
.ua-tavlemeny {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--card-border);
}
.ua-tavleflik {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(232,240,255,0.55);
  text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.ua-tavleflik:hover { color: var(--text); border-color: var(--green-border); }
.ua-tavleflik.er-aktiv {
  color: var(--green);
  border-color: var(--green-border);
  background: var(--green-dim);
}
.ua-teller {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 50px;
  background: rgba(233,185,73,0.16);
  color: #E9B949;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

/* Selve tavla: skjema til venstre, saker til hoyre */
.ua-tavle {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  align-items: start;
}
.ua-nysak { position: sticky; top: 100px; }
.ua-nysak .ua-form { gap: 0; }
.ua-nysak .ua-btn { width: 100%; margin-top: 4px; }
.ua-nysak .ua-fotnote { margin-top: 14px; }

.ua-textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.6;
  font-family: inherit;
}
.ua-select--full { width: 100%; margin-bottom: 18px; }

/* padding: 0 er ikke pynt. Temaet har "section { padding: 110px 0 }" for
   sidens egne seksjoner, og den slaar inn her fordi .ua-saker er en
   <section>. Uten dette starter listen 110 px lenger ned enn skjemaet. */
.ua-saker { display: flex; flex-direction: column; gap: 14px; padding: 0; }
.ua-saker-topp { display: flex; align-items: center; gap: 12px; }
.ua-saker-topp h2 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(232,240,255,0.35);
  margin: 0;
}
.ua-tomsak { text-align: center; padding: 40px 28px; }
.ua-tomsak p { margin: 0; }

.ua-sak {
  background: #151515;
  border: 1px solid var(--card-border);
  border-left: 3px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md, 16px);
  padding: 22px 24px;
}
.ua-sak--venter   { border-left-color: #E9B949; }
.ua-sak--godkjent { border-left-color: var(--green); }
.ua-sak--avvist   { border-left-color: #E06B6B; }
.ua-sak--lukket   { border-left-color: rgba(255,255,255,0.12); opacity: .62; }

.ua-sak-topp {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.ua-sak-tittel {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.45;
}
.ua-status {
  flex-shrink: 0;
  padding: 4px 11px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.ua-status--venter   { background: rgba(233,185,73,0.14); color: #E9B949; }
.ua-status--godkjent { background: var(--green-dim); color: var(--green); }
.ua-status--avvist   { background: rgba(224,107,107,0.14); color: #E06B6B; }
.ua-status--lukket   { background: rgba(255,255,255,0.07); color: rgba(232,240,255,0.5); }

.ua-sak-meta {
  font-size: 12.5px;
  color: rgba(232,240,255,0.38);
  margin: 8px 0 0;
}
.ua-prio--hoy { color: #E06B6B; font-weight: 600; }
.ua-prio--lav { color: rgba(232,240,255,0.35); }

.ua-sak-tekst { margin-top: 12px; }
.ua-sak-tekst p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(232,240,255,0.62);
  margin: 0 0 10px;
}
.ua-sak-tekst p:last-child { margin-bottom: 0; }

.ua-sak-knapper { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.ua-logg { margin-top: 14px; }
.ua-logg summary {
  font-size: 12.5px;
  color: rgba(232,240,255,0.35);
  cursor: pointer;
  list-style: none;
}
.ua-logg summary::-webkit-details-marker { display: none; }
.ua-logg summary::before { content: '+ '; }
.ua-logg[open] summary::before { content: '\2212 '; }
.ua-logg summary:hover { color: var(--green); }
.ua-logg ul { margin: 10px 0 0; padding: 0; list-style: none; }
.ua-logg li {
  font-size: 12.5px;
  color: rgba(232,240,255,0.45);
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ua-logg li:last-child { border-bottom: 0; }
.ua-logg-tid { color: rgba(232,240,255,0.25); margin-right: 8px; }

@media (max-width: 900px) {
  .ua-tavle { grid-template-columns: 1fr; }
  .ua-nysak { position: static; }
}

/* --- Serversiden -------------------------------------------------------- */
/* .ua-box gir padding, saa disse slipper unna temaets section-regel. */
.ua-panel--midt { max-width: 780px; }
.ua-serverkort { margin-bottom: 20px; }
.ua-serverkort:last-child { margin-bottom: 0; }
.ua-server-ingress { font-size: 14.5px; line-height: 1.75; }

.ua-server-merke {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-dim);
  color: var(--green);
  margin-bottom: 18px;
}
.ua-server-merke svg { fill: currentColor; }
.ua-box--server .ua-server-merke { width: 40px; height: 40px; margin-bottom: 16px; }

.ua-liste { margin: 18px 0 0; padding: 0; list-style: none; }
.ua-liste li {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(232,240,255,0.55);
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.ua-liste li strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 3px; }

/* --- Varsler ------------------------------------------------------------ */
.ua-varsler { position: relative; }
.ua-varsler > summary { list-style: none; cursor: pointer; }
.ua-varsler > summary::-webkit-details-marker { display: none; }

.ua-ikonknapp--bjelle { position: relative; }
.ua-bjelle { fill: currentColor; }
.ua-bjelle-tall {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 17px;
  padding: 1px 4px;
  border-radius: 50px;
  background: #E9B949;
  color: #0a0a0a;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

.ua-varselpanel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  padding: 18px 20px;
  background: #151515;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md, 16px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.55);
  text-align: left;
  cursor: default;
}
.ua-varselpanel-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ua-varselpanel-topp strong { font-size: 13px; color: var(--text); }
.ua-varsel-lestform { margin: 0; }

.ua-varselliste { margin: 0; padding: 0; list-style: none; }
.ua-varsel { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ua-varsel:last-child { border-bottom: 0; }

.ua-varsel-topp { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ua-varsel-tittel { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.45; }
.ua-varsel-prikk {
  flex-shrink: 0;
  width: 7px; height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: #E9B949;
}
.ua-varsel-tekst {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(232,240,255,0.55);
  margin: 5px 0 0;
}
.ua-varsel-meta { font-size: 11.5px; color: rgba(232,240,255,0.3); margin: 6px 0 0; }
.ua-varsel--ny .ua-varsel-tittel { color: #fff; }
.ua-varsel-tom { font-size: 13px; color: rgba(232,240,255,0.35); margin: 14px 0 0; }

/* Avsenderen i Operations Center */
.ua-varselsender {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
  padding: 0;               /* temaets section-regel */
  margin-bottom: 28px;
}
.ua-varselsender > div {
  background: #151515;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md, 16px);
  padding: 26px 28px;
}
.ua-varselsender h2 { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 8px; }
.ua-varselsender p  { font-size: 13.5px; color: rgba(232,240,255,0.45); line-height: 1.7; margin: 0 0 18px; }
.ua-varselsender .ua-fotnote { margin-top: 14px; }
.ua-varselsender .ua-btn { width: 100%; }
.ua-varselsender-logg .ua-varselliste { margin-top: -4px; }

@media (max-width: 900px) {
  .ua-varselsender { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ua-varselpanel { width: min(300px, calc(100vw - 48px)); }
}

/* --- Utestenging --------------------------------------------------------- */
.ua-banform { margin: 0; }
.ua-banknapp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 50px;
  border: 1px solid rgba(224,107,107,0.3);
  background: rgba(224,107,107,0.08);
  color: #E06B6B;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, border-color .2s;
}
.ua-banknapp:hover { background: rgba(224,107,107,0.16); border-color: rgba(224,107,107,0.5); }
.ua-banknapp--opphev {
  border-color: var(--green-border);
  background: var(--green-dim);
  color: var(--green);
}
.ua-banknapp--opphev:hover { background: rgba(53,206,141,0.16); border-color: var(--green); }
.ua-banikon { fill: currentColor; flex-shrink: 0; }
.ua-tag--stengt { background: rgba(224,107,107,0.14); color: #E06B6B; }

.ua-banliste {
  padding: 0;                 /* temaets section-regel */
  margin-top: 26px;
}
.ua-banliste-topp { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ua-banliste-topp h2 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(232,240,255,0.35);
  margin: 0;
}
.ua-banrader { margin: 0; padding: 0; list-style: none; }
.ua-banrad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 15px 20px;
  border: 1px solid var(--card-border);
  border-left: 3px solid #E06B6B;
  border-radius: 12px;
  background: #151515;
  margin-bottom: 10px;
}
.ua-banrad:last-child { margin-bottom: 0; }
.ua-banrad-hvem { display: flex; flex-direction: column; gap: 2px; }
.ua-banrad-nar { font-size: 12.5px; color: rgba(232,240,255,0.35); margin-left: auto; }

/* --- Redesign: Min side og brukermenyen ---------------------------------- */
/* Én monospace-stakk for de tekniske detaljene. Den gjoer mer for uttrykket
   enn nye farger ville gjort, og den koster ingen nedlasting. */
.ua-panel, .nav-user-menu { --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }

.ua-konto-head { align-items: flex-start; margin-bottom: 18px; }
.ua-konto-id { display: flex; align-items: center; gap: 18px; }
.ua-konto-avatar {
  flex-shrink: 0;
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  color: var(--green);
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.ua-statuslinje {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 12px 0 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.3px;
  color: rgba(232,240,255,0.45);
}
.ua-statuslinje i {
  font-style: normal;
  text-transform: uppercase;
  color: rgba(232,240,255,0.22);
  margin-right: 6px;
}
.ua-statuspuls { display: inline-flex; align-items: center; color: var(--green); }
.ua-statuspuls::after {
  content: "";
  width: 6px; height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: ua-puls 2.4s ease-in-out infinite;
}
@keyframes ua-puls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .ua-statuspuls::after { animation: none; }
}

/* Kortene: tynnere kant, og en hårlinje som taennes naar du peker paa dem. */
.ua-box {
  position: relative;
  background: linear-gradient(180deg, #171717, #141414);
  border-color: rgba(255,255,255,0.06);
  transition: border-color .25s, transform .25s;
}
.ua-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 2;
}
.ua-box:hover::before { opacity: .65; }
.ua-box h2 { letter-spacing: -0.1px; }

.ua-tavlekort { background: linear-gradient(180deg, #171717, #141414); border-color: rgba(255,255,255,0.06); }
.ua-tavlekort-topp h2,
.ua-saker-topp h2 { font-family: var(--mono); text-transform: uppercase; letter-spacing: 1.4px; font-size: 11px; }
.ua-tavlekort-topp h2 { color: rgba(232,240,255,0.35); }
.ua-tavlefelt-sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2px; }
.ua-punkt { font-family: var(--mono); font-size: 11px; }

/* Brukermenyen i nav-baren */
.nav-user-menu {
  width: 268px;
  padding: 0;
  overflow: hidden;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.nav-user-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin: 0;
}
.nav-user-head-avatar {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  color: var(--green);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
}
.nav-user-head-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-user-head-tekst strong { font-size: 13.5px; color: var(--text); }
.nav-user-head-epost {
  font-family: var(--mono);
  font-size: 10.5px;
  color: rgba(232,240,255,0.3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-user-rolle { padding: 12px 18px 4px; }
.nav-user-lenker { padding: 4px 8px 8px; }
.nav-user-menu .nav-user-lenker a,
.nav-user-menu .nav-user-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  color: rgba(232,240,255,0.65);
  transition: background .18s, color .18s;
}
.nav-user-menu .nav-user-lenker a svg,
.nav-user-menu .nav-user-logout svg { fill: currentColor; opacity: .55; flex-shrink: 0; }
.nav-user-menu .nav-user-lenker a:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.nav-user-menu .nav-user-lenker a:hover svg { opacity: 1; color: var(--green); }
.nav-user-menu .nav-user-logout {
  margin: 0 8px 8px;
  border-top: 0;
  border-radius: 9px;
  color: rgba(232,240,255,0.45);
}
.nav-user-menu .nav-user-logout:hover { background: rgba(224,107,107,0.1); color: #E06B6B; }
.nav-user-lenker { border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 8px; }

@media (max-width: 767px) {
  .ua-konto-id { gap: 14px; }
  .ua-konto-avatar { width: 46px; height: 46px; font-size: 15px; }
  .ua-statuslinje { gap: 6px 16px; font-size: 10.5px; }
  .ua-banrad { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ua-banrad-nar { margin-left: 0; }
}

/* --- SMS ---------------------------------------------------------------- */
.ua-smsikon { fill: currentColor; }
.ua-box--sms .ua-server-merke { width: 40px; height: 40px; margin-bottom: 16px; }

.ua-smsteller {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: 0.3px;
  color: rgba(232,240,255,0.3);
  margin: -6px 0 18px;
}
/* Over ett segment koster meldingen mer. Da skal tallet si fra. */
.ua-smsteller.er-mange { color: #E9B949; }

.ua-smsnote { margin-top: 16px; }
.ua-smsnote strong { color: var(--green); font-weight: 600; }

.ua-smsfeil {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(224,107,107,0.08);
  border: 1px solid rgba(224,107,107,0.22);
  font-size: 12.5px;
  line-height: 1.6;
  color: #E06B6B;
}

/* Rettelse: redesignen ga .ua-box "position: relative", og den regelen kommer
   etter .ua-nysak i filen. Med lik vekt vant den, saa "top: 100px" sluttet aa
   vaere kleb og ble en fast forskyvning 100 px nedover. Her settes den
   tilbake med hoyere vekt — og mobilregelen maa ha samme vekt for aa vinne. */
.ua-box.ua-nysak { position: sticky; top: 100px; }
@media (max-width: 900px) {
  .ua-box.ua-nysak { position: static; top: auto; }
}

/* --- Kontrakt ------------------------------------------------------------ */
.ua-box--kontrakt .ua-server-merke { width: 40px; height: 40px; margin-bottom: 16px; }

/* Skjemaet er langt, saa den klebende kolonnen maa faa rulle med. */
.ua-tavle--kontrakt { grid-template-columns: 400px 1fr; }
.ua-tavle--kontrakt .ua-nysak { max-height: calc(100vh - 130px); overflow-y: auto; }

.ua-k-bolk {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: rgba(232,240,255,0.3);
  margin: 6px 0 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ua-form > .ua-k-bolk:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.ua-k-valgfri {
  font-weight: 400;
  font-size: 11.5px;
  color: rgba(232,240,255,0.28);
  margin-left: 6px;
}

/* Beloepet skrevet ut, saa selgeren ser hva som havner i kontrakten. */
.ua-k-ord {
  margin: -12px 0 18px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--green);
}

.ua-k-rad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ua-k-rad .ua-input { margin-bottom: 4px; }
.ua-k-enhet {
  display: block;
  margin-bottom: 18px;
  font-size: 11.5px;
  color: rgba(232,240,255,0.28);
}

.ua-k-note { margin-top: 16px; }
.ua-k-note strong { color: var(--green); font-weight: 600; }

.ua-k-test {
  padding: 1px 7px;
  border-radius: 50px;
  background: rgba(233,185,73,0.14);
  color: #E9B949;
  font-size: 10.5px;
  font-weight: 700;
}
.ua-k-lenke { margin: 12px 0 0; font-size: 13px; color: rgba(232,240,255,0.45); }
.ua-k-lenke a { color: var(--green); font-weight: 600; }

@media (max-width: 1100px) {
  .ua-tavle--kontrakt { grid-template-columns: 1fr; }
  .ua-tavle--kontrakt .ua-nysak { max-height: none; overflow: visible; }
}
@media (max-width: 520px) {
  .ua-k-rad { grid-template-columns: 1fr; }
}

/* --- Kontrakt: rabatt og signeringsstatus --------------------------------- */
.ua-k-ord.er-feil { color: #E06B6B; }

.ua-k-rabatt {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 50px;
  background: rgba(53,206,141,0.12);
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
}

.ua-k-oppdater { margin: 0 0 0 auto; }

.ua-k-signert {
  margin: 10px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--green);
}
.ua-k-sjekket {
  margin: 10px 0 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: rgba(232,240,255,0.22);
}

/* ================================================
   REDESIGN — samme stil som resten av nettstedet
   Kort i #1B1B1B uten kanter, ingen hårlinjer.
   Skjemafelt beholder kanten: der viser den hvor
   man skriver. Fargestripen på saker beholdes
   også, siden den forteller status.
   ================================================ */
.ua-card,
.ua-box,
.ua-tavlekort,
.ua-sak,
.ua-table-wrap,
.ua-varselsender > div,
.ua-banrad {
  background: #1B1B1B;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
}
/* Kort uten statusstripe mister ogsaa venstrekanten */
.ua-card,
.ua-box,
.ua-tavlekort,
.ua-table-wrap,
.ua-varselsender > div { border-left: 0; }

.ua-box::before { display: none; }

.ua-box--ops,
.ua-box--discord,
.ua-box--discord:hover { border: 0; background: #1B1B1B; }

.ua-tavlefelt { background: #121212; border: 0; }
.ua-tavlefelt:hover { border-color: transparent; background: #161616; }

.ua-varselpanel { background: #1B1B1B; border: 0; }
.ua-varselpanel-topp { border-bottom: 0; }

/* Tabellen: bare luft mellom radene */
.ua-table th,
.ua-table td { border-bottom: 0; }
.ua-table tbody tr:hover { background: rgba(255,255,255,0.025); }

.ua-box-bilde { background: #121212; }

/* Siste streker i innloggingsomraadet */
.ua-statuslinje { border-bottom: 0; }
.ua-varsel { border-bottom: 0; }
.ua-foot { border-top: 0; }

/* Ikonflisene paa Min side i lilla, som ellers paa nettstedet */
.ua-server-merke { background: rgba(84,56,220,0.26); color: #D2C8FA; }

/* ================================================
   MIN SIDE — ROLIG RADLISTE
   Ett ikon, ett navn og én forklaring per rad, alle
   like hoeye og med samme venstrekant. Flatene er
   nesten usynlige: det er innholdet som skal sees,
   ikke boksene rundt.
   ================================================ */
.ua-main--wide {
  align-items: flex-start;
  padding: 130px 24px 90px;
}
.ua-main--wide > .ua-panel { max-width: 820px; margin: 0 auto; }

/* --- Toppen ------------------------------------------------------------- */
.ua-konto-head { margin-bottom: 4px; }
.ua-konto-id { gap: 14px; }
.ua-konto-avatar {
  width: 42px; height: 42px;
  border: 0;
  background: rgba(84,56,220,0.22);
  color: #C4B8FF;
  font-size: 14px;
}
.ua-panel-head .ua-title { font-size: 23px; font-weight: 700; letter-spacing: -0.6px; }
.ua-panel-head .ua-sub { font-size: 12.5px; color: rgba(232,240,255,0.42); }

.ua-statuslinje {
  margin: 0 0 34px 56px;
  padding: 0;
  font-size: 12px;
  color: rgba(232,240,255,0.26);
}
.ua-statuslinje i { font-style: normal; color: inherit; }

/* --- Radlistene --------------------------------------------------------- */
.ua-etikett {
  margin: 0 0 10px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(232,240,255,0.3);
}
.ua-liste {
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.022);
  margin-bottom: 30px;
}
.ua-rad {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 60px;
  padding: 0 16px;
  color: var(--text);
  text-decoration: none;
  transition: background .15s;
}
.ua-rad + .ua-rad { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.ua-rad:hover { background: rgba(255,255,255,0.035); }

.ua-rad-ikon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: rgba(84,56,220,0.18);
  color: #C4B8FF;
  transition: background .15s, color .15s;
}
.ua-rad-ikon svg { width: 18px; height: 18px; display: block; }
.ua-rad:hover .ua-rad-ikon { background: #5438DC; color: #fff; }

.ua-rad-navn { font-size: 14.5px; font-weight: 600; letter-spacing: -0.1px; white-space: nowrap; }
.ua-rad-sub {
  font-size: 12.5px;
  color: rgba(232,240,255,0.36);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ua-rad-teller {
  margin-left: auto;
  min-width: 21px; height: 21px;
  padding: 0 7px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50px;
  background: rgba(53,206,141,0.15);
  color: var(--green);
  font-size: 11.5px;
  font-weight: 700;
}
.ua-rad-pil {
  margin-left: auto;
  flex-shrink: 0;
  color: rgba(232,240,255,0.22);
  transition: transform .15s, color .15s;
}
.ua-rad-teller + .ua-rad-pil { margin-left: 10px; }
.ua-rad:hover .ua-rad-pil { color: rgba(232,240,255,0.7); transform: translateX(2px); }

.ua-rad--tom { height: auto; padding: 18px 16px; flex-direction: column; align-items: flex-start; gap: 4px; }
.ua-rad--tom .ua-rad-sub { white-space: normal; }

/* --- Undersidene i samme drakt ------------------------------------------ */
.ua-main--wide .ua-box,
.ua-main--wide .ua-sak,
.ua-main--wide .ua-table-wrap,
.ua-main--wide .ua-banrad,
.ua-main--wide .ua-varselsender > div {
  background: rgba(255,255,255,0.022);
  border-radius: 16px;
}
.ua-main--wide .ua-box { padding: 24px 26px; }
.ua-main--wide .ua-box h2 { font-size: 15px; font-weight: 600; }

@media (max-width: 767px) {
  .ua-main--wide { padding: 96px 16px 60px; }
  .ua-panel-head .ua-title { font-size: 21px; }
  .ua-statuslinje { margin-left: 0; }
  .ua-rad { height: auto; padding: 14px 14px; flex-wrap: wrap; }
  .ua-rad-sub { flex-basis: 100%; margin-left: 48px; }
  .ua-rad-pil { display: none; }
  .ua-rad-teller { margin-left: auto; }
}

/* Statuslinjen skal hviske, ikke rope: vanlig skrift, ikke store bokstaver. */
.ua-main--wide .ua-statuslinje {
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  gap: 4px 14px;
}
.ua-main--wide .ua-statuslinje i {
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(232,240,255,0.2);
}

/* Varslingsmerket paa tavlene: bjella foran tallet, samme form som ellers. */
.ua-rad-varsel {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: 50px;
  background: rgba(233,185,73,0.14);
  color: #E9B949;
  font-size: 11.5px;
  font-weight: 700;
}
.ua-rad-varsel svg { fill: currentColor; }
.ua-rad-varsel + .ua-rad-pil { margin-left: 10px; }

.ua-teller,
.ua-tag--venter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ua-teller svg,
.ua-tag--venter svg { fill: currentColor; }

/* Bjella er alltid der. Graa naar koeen er tom, gul naar noe venter. */
.ua-rad-varsel--rolig {
  background: rgba(255,255,255,0.05);
  color: rgba(232,240,255,0.3);
  padding: 0 8px;
}
.ua-rad:hover .ua-rad-varsel--rolig { color: rgba(232,240,255,0.5); }

/* Ikonene staar fritt i raden: ingen sirkel eller flate bak dem, bare
   streken i husets lilla. Da blir raden lettere, og ikonet kan vaere
   stoerre uten aa ta mer plass. */
.ua-rad-ikon {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #5438DC;
}
.ua-rad-ikon svg { width: 27px; height: 27px; }
.ua-rad:hover .ua-rad-ikon { background: transparent; color: #7C63F0; }

/* Avataren er fortsatt rund — det er et ansikt, ikke et ikon. */
@media (max-width: 767px) {
  .ua-rad-ikon svg { width: 24px; height: 24px; }
  .ua-rad-sub { margin-left: 38px; }
}

/* ================================================
   KONTRAKT — MALVALG OG SKJEMA
   Samme radliste som Min side til malvalget, og et
   rolig totokolonners skjema for den valgte malen.
   ================================================ */
.ua-kform { margin-bottom: 36px; }

.ua-kfelter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px 20px;
  padding: 24px 26px;
  border-radius: 16px;
  background: rgba(255,255,255,0.022);
  margin-bottom: 26px;
}
.ua-kfelt { display: flex; flex-direction: column; min-width: 0; }
.ua-kfelt--bred { grid-column: 1 / -1; }
.ua-kfelt .ua-label { margin-bottom: 7px; }
.ua-kfelt .ua-input { width: 100%; }
.ua-kfelt textarea { min-height: 96px; resize: vertical; }

/* Tallfelt med enhet bak: «14 dager», «2 500 kr» */
.ua-kinput { position: relative; display: block; }
.ua-kinput .ua-input { padding-right: 86px; }
.ua-kinput .ua-k-enhet {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 12.5px;
  color: rgba(232,240,255,0.3);
  pointer-events: none;
}

.ua-kbunn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ua-kbunn .ua-btn { width: auto; }

.ua-klogg-topp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.ua-klogg-topp .ua-etikett { margin-bottom: 10px; }

/* Radene i loggen: samme form som ellers, men med plass til flere linjer. */
.ua-rad--kontrakt {
  height: auto;
  align-items: flex-start;
  padding: 16px;
  gap: 14px;
}
.ua-rad--kontrakt .ua-rad-ikon { margin-top: 2px; }
.ua-rad-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ua-rad-tekst > strong { font-size: 14.5px; font-weight: 600; }
.ua-rad-tekst > span { font-size: 12.5px; line-height: 1.6; color: rgba(232,240,255,0.36); }
.ua-rad--kontrakt .ua-status { margin-left: auto; flex-shrink: 0; }
.ua-k-lenker { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.ua-k-lenker a { font-size: 12.5px; font-weight: 600; color: var(--green); text-decoration: none; }
.ua-k-lenker a:hover { text-decoration: underline; }
.ua-k-signert { color: var(--green) !important; }
.ua-k-test { color: #E9B949; }

@media (max-width: 767px) {
  .ua-kfelter { padding: 18px; grid-template-columns: 1fr; }
  .ua-kbunn { flex-direction: column; align-items: stretch; }
  .ua-kbunn .ua-btn { width: 100%; }
  .ua-rad--kontrakt { flex-wrap: nowrap; }
  .ua-rad--kontrakt .ua-status { align-self: flex-start; }
}

/* ================================================
   NIVÅ OG ROLLER
   ================================================ */

/* Profilbilde: hvit flate, rollens ikon i rollens farge. */
.ua-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 0;
}
.ua-avatar .ua-avatar-ikon { fill: currentColor; display: block; }
.ua-konto-id .ua-avatar { margin-right: 0; }

/* Rollebrikka tar rollens farge. */
.ua-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rollefarge, var(--green));
}
.ua-role-chip svg { fill: currentColor; }

/* --- Nivå --------------------------------------------------------------- */
.ua-nivamerke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px; height: 26px;
  padding: 0 8px;
  border-radius: 50px;
  background: rgba(84,56,220,0.22);
  color: #C4B8FF;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Erfaring gis fra tabellen i Operations Center. */
.ua-nivaform { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.ua-nivafelt {
  width: 78px;
  padding: 6px 9px;
  font-size: 12.5px;
  margin: 0;
}
.ua-cell-bruker { display: inline-flex; align-items: center; gap: 10px; }

/* --- Rollekortene ------------------------------------------------------- */
.ua-rollekort {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}
.ua-rollekort-en {
  padding: 18px 20px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,0.022);
}
.ua-rollekort-en header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ua-rollekort-en header > div { display: flex; flex-direction: column; }
.ua-rollekort-en strong { font-size: 15px; font-weight: 700; color: var(--rollefarge); }
.ua-rollekort-en header span { font-size: 11.5px; color: rgba(232,240,255,0.3); }
.ua-rollekort-en > p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(232,240,255,0.5);
  margin: 0 0 12px;
}
.ua-rollekort-en ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ua-rollekort-en li {
  position: relative;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(232,240,255,0.62);
}
.ua-rollekort-en li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rollefarge);
}

@media (max-width: 767px) {
  .ua-nivaform { margin-left: 0; margin-top: 6px; }
}

/* Ikonet tar fargen til rollen som laser opp raden, saa fargen sier hva
   som ma til for aa komme inn. Uten laas beholder den husets lilla. */
.ua-rad-ikon { color: var(--laasfarge, #5438DC); }
.ua-rad:hover .ua-rad-ikon { color: var(--laasfarge, #7C63F0); filter: brightness(1.25); }

/* Rolleikonene tegnes med strek na, som resten av ikonsettet. */
.ua-role-icon, .ua-avatar-ikon { fill: none; stroke: currentColor; }


/* ================================================
   PROFILMENYEN I NAVBAREN — BYGGET RUNDT ROLLEN
   Fargen kommer fra rollen, ikke fra husets gronne:
   ringen rundt bildet, rollemerket og nivamerket
   staar alle i samme farge som profilbildet.
   ================================================ */
.ua-avatar { background: #F5F5F5; }

.nav-user-menu {
  width: 290px;
  padding: 0 0 8px;
  overflow: hidden;
}

.nav-user-topp {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 18px 14px;
  border: 0;
  /* Et svakt band i rollefargen bak hodet. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--rollefarge) 18%, transparent), transparent);
}
.nav-user-ring {
  flex-shrink: 0;
  display: inline-flex;
  padding: 2px;
  border-radius: 50%;
  background: var(--rollefarge);
}
.nav-user-head-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-user-head-tekst strong { font-size: 14px; font-weight: 700; color: var(--text); }
.nav-user-head-epost {
  font-size: 11.5px;
  color: rgba(232,240,255,0.4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-user-rollerad {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px 8px;
}
.nav-user-rollemerke {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 50px;
  background: color-mix(in srgb, var(--rollefarge) 18%, transparent);
  color: var(--rollefarge);
  font-size: 11.5px;
  font-weight: 700;
}
.nav-user-rollemerke svg { fill: none; stroke: currentColor; }
.nav-user-niva {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 50px;
  background: rgba(255,255,255,0.05);
  color: rgba(232,240,255,0.66);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.nav-user-stolpe {
  display: block;
  height: 3px;
  margin: 0 18px 10px;
  border-radius: 50px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.nav-user-stolpe > span { display: block; height: 100%; border-radius: 50px; background: var(--rollefarge); }

.nav-user-rolletekst {
  margin: 0 18px 12px;
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(232,240,255,0.36);
}

.nav-user-lenker { padding: 6px 8px; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 0; margin: 0; }
.nav-user-menu .nav-user-lenker a,
.nav-user-menu .nav-user-logout {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 12px;
  font-size: 13.5px;
  color: rgba(232,240,255,0.72);
}
.nav-user-menu .nav-user-lenker a svg { fill: none; stroke: currentColor; opacity: .7; }
.nav-user-menu .nav-user-lenker a:hover { background: rgba(255,255,255,0.045); color: var(--text); }
.nav-user-menu .nav-user-lenker a:hover svg { opacity: 1; color: var(--rollefarge); }

.nav-user-menu .nav-user-logout {
  margin: 4px 8px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-radius: 0 0 12px 12px;
  padding-top: 12px;
  color: rgba(224,107,107,0.8) !important;
}
.nav-user-menu .nav-user-logout svg { fill: none; stroke: currentColor; }
.nav-user-menu .nav-user-logout:hover { background: rgba(224,107,107,0.1); color: #E06B6B !important; }


/* Nivastripa i profilmenyen: tall over, stolpe under. */
.nav-user-nivaboks { margin: 0 18px 12px; }
.nav-user-nivatopp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.nav-user-nivatopp strong { font-size: 12.5px; font-weight: 700; color: var(--text); }
.nav-user-nivatopp span {
  font-size: 11px;
  color: rgba(232,240,255,0.36);
  font-variant-numeric: tabular-nums;
}
.nav-user-menu .nav-user-stolpe {
  display: block;
  height: 6px;
  margin: 0;
  border-radius: 50px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}
.nav-user-menu .nav-user-stolpe > span {
  display: block;
  height: 100%;
  border-radius: 50px;
  background: var(--rollefarge);
}
.nav-user-rollerad { padding-bottom: 12px; }
.nav-user-menu .nav-user-lenker a svg,
.nav-user-menu .nav-user-logout svg { width: 17px; height: 17px; fill: none; stroke: currentColor; }


/* ================================================
   PROFILMENYEN HENGER UNDER NAVBAREN
   Samme grep som Tjenester-menyen: fast under headeren,
   samme farge som navbaren, og skyggen klippet saa den
   ikke legger seg over bunnen av navbaren og lager et
   skille. Bredden er en blokk — ikke hele skjermen.
   ================================================ */
.nav-user-menu {
  position: fixed;
  top: 70px;
  right: 24px;
  left: auto;
  width: 300px;
  min-width: 0;
  border: 0;
  border-radius: 0 0 22px 22px;
  background: #121212;
  box-shadow: 0 26px 60px rgba(0,0,0,0.45);
  clip-path: inset(0 -120px -120px -120px);
  transform: translateY(-10px);
  transition: opacity .22s ease, transform .28s cubic-bezier(0.22,1,0.36,1), visibility .22s;
  z-index: 1001;
}
.nav-user.open .nav-user-menu { transform: translateY(0); }

/* Toppbandet folger den runde bunnen paa boksen. */
.nav-user-topp { border-radius: 0; }
.nav-user-menu .nav-user-logout { border-radius: 0 0 14px 14px; }

/* Flaten mellom knappen og menyen, saa musa ikke mister menyen paa vei ned. */
.nav-user::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 160px;
  height: 18px;
}

@media (max-width: 900px) {
  .nav-user-menu { right: 16px; width: calc(100vw - 32px); max-width: 320px; }
}
@media (max-width: 767px) {
  .nav-user-menu { top: 62px; }
}

/* Ingen skygge under profilmenyen: den skal se ut som en forlengelse av
   navbaren, ikke som et kort som svever over siden. */
.nav-user-menu { box-shadow: none; clip-path: none; }

/* Skjoeten mot navbaren: det fargede baandet oeverst i menyen startet i
   foerste piksel, og moette navbaren som en synlig kant. Baandet starter
   naa 14 px nede, og menyen legger seg én piksel opp under navbaren saa
   det ikke blir en haarstrek paa skjermer med brok-opploesning. */
.nav-user-menu { top: 69px; padding-top: 1px; }
.nav-user-topp {
  background: linear-gradient(180deg,
    transparent 0, transparent 14px,
    color-mix(in srgb, var(--rollefarge) 15%, transparent) 46px,
    transparent 100%);
}

@media (max-width: 767px) {
  .nav-user-menu { top: 61px; }
}


/* Menyen aapner bare paa klikk, og toppen er flat: det fargede baandet var
   en gloed som skilte menyen fra navbaren. Rollefargen lever videre i
   ringen rundt bildet, i merket og i stolpen. */
.nav-user-topp { background: none; }
.nav-user::after { display: none; }


/* ================================================
   TEAM — KODE, MEDLEMMER OG INVITASJONER
   ================================================ */
.ua-team-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 26px 28px;
  border-radius: 16px;
  background: rgba(255,255,255,0.022);
  margin-bottom: 26px;
}
.ua-team-navn h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.8px; margin: 6px 0 4px; }
.ua-team-navn p { font-size: 13px; color: rgba(232,240,255,0.4); margin: 0; }

.ua-team-kode { text-align: right; }
.ua-team-kode strong {
  display: block;
  margin: 6px 0 12px;
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--green);
}
.ua-team-kodeknapper { display: flex; gap: 8px; justify-content: flex-end; }
.ua-team-kodeknapper .ua-btn { width: auto; }

.ua-team-send { margin-bottom: 26px; }
.ua-team-sendrad { display: flex; gap: 10px; align-items: center; }
.ua-team-sendrad .ua-input { margin: 0; flex: 1; }
.ua-team-sendrad .ua-btn { width: auto; flex-shrink: 0; }

.ua-rad--medlem .ua-rad-ikon { background: transparent; }
.ua-rad--medlem .ua-status { margin-left: auto; }
.ua-team-utform { margin-left: auto; }

.ua-kodefelt {
  font-family: var(--mono);
  font-size: 22px;
  letter-spacing: 8px;
  text-transform: uppercase;
  text-align: center;
}
.ua-team-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

@media (max-width: 767px) {
  .ua-team-topp { flex-direction: column; align-items: flex-start; }
  .ua-team-kode { text-align: left; }
  .ua-team-kodeknapper { justify-content: flex-start; }
  .ua-team-kode strong { font-size: 28px; letter-spacing: 4px; }
}


/* ================================================
   MIN SIDE — KONTOSTRIPA
   Kontofakta og nivaa staar i samme boks under
   hilsenen. Stolpen fyller hele bredden, saa den
   leses som en maaler og ikke som en strek som er
   blitt staaende igjen. Fargen kommer fra rollen,
   som i profilmenyen i navbaren.
   ================================================ */
.ua-kontostripe {
  margin: 6px 0 30px 56px;
  padding: 15px 18px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.024);
}

/* Faktalinja mister bunnmargen sin her — skillestreken i stripa gjoer
   jobben i stedet. */
.ua-main--wide .ua-kontostripe .ua-statuslinje {
  margin: 0 0 13px;
  padding: 0 0 13px;
  border-bottom: 1px solid rgba(255,255,255,0.055);
}

.ua-niva {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.ua-niva-tittel {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.ua-niva-xp {
  margin-left: auto;
  font-size: 11.5px;
  color: rgba(232,240,255,0.38);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Maaleren: fyllet ligger inne i banen med to piksler luft hele veien
   rundt, saa kanten av banen synes selv naar stolpen er helt full. */
.ua-niva-stolpe {
  flex: 1 1 140px;
  max-width: 300px;
  height: 12px;
  padding: 2px;
  border-radius: 50px;
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
}
.ua-niva-stolpe > span {
  display: block;
  height: 8px;
  min-width: 8px;          /* helt tom maaler skal fortsatt ha en start */
  border-radius: 50px;
  background: var(--rollefarge, #5438DC);
}

@media (max-width: 767px) {
  .ua-kontostripe { margin-left: 0; padding: 14px 15px 15px; }
  .ua-niva-stolpe { order: 3; flex-basis: 100%; max-width: none; }
  .ua-niva-xp { margin-left: 0; white-space: normal; }
}


/* ================================================
   SMS — UTKAST SKREVET AV MODELLEN
   Boksen staar inne i skjemaet, over meldingsfeltet,
   og er tydelig avgrenset fra det: den fyller feltet
   under, den sender ingenting.
   ================================================ */
.ua-utkast {
  margin: 0 0 14px;
  padding: 14px 15px 15px;
  border: 1px dashed rgba(84,56,220,0.35);
  border-radius: 14px;
  background: rgba(84,56,220,0.06);
}
.ua-utkast-topp {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 12px;
}
.ua-utkast-merke {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: #C4B8FF;
}
.ua-utkast-merke svg { width: 16px; height: 16px; }
.ua-utkast-hjelp { font-size: 11.5px; color: rgba(232,240,255,0.34); }

.ua-utkast .ua-label { margin-top: 0; }
.ua-utkast-felt { margin-bottom: 10px; min-height: 0; }

.ua-utkast-rad {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.ua-utkast-lengde {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: rgba(232,240,255,0.55);
  cursor: pointer;
}
.ua-utkast-lengde input { margin: 0; accent-color: #5438DC; }
/* Knappen tar egen linje under valgene. Den er en hjelpeknapp — Send
   melding skal fortsatt vaere det tydeligste i skjemaet. */
.ua-utkast-rad .ua-btn { flex: 1 1 100%; margin-top: 3px; }

.ua-utkast-svar {
  margin: 11px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--green);
}
.ua-utkast-svar.er-feil { color: #FF8A8A; }



/* ================================================
   SERVERSTATUS FRA HETZNER
   Ett kort per server: navn og tilstand oeverst,
   tallene under, og trafikken som en maaler.
   ================================================ */
.ua-serverstatus-topp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ua-serverstatus-topp .ua-etikett { margin: 0; }
.ua-serverstatus-tid {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  color: rgba(232,240,255,0.3);
}
.ua-serverstatus-form { display: inline; }

.ua-server { margin-bottom: 12px; }
.ua-server-topp {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.ua-server-topp h2 { margin: 0 0 4px; }
.ua-server-sted { margin: 0; font-size: 12.5px; color: rgba(232,240,255,0.36); }

/* Lyset foran tilstanden: groent naar den kjoerer, roedt naar den er av. */
.ua-serverlys {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 12.5px;
  font-weight: 600;
  background: rgba(255,255,255,0.04);
  color: rgba(232,240,255,0.6);
}
.ua-serverlys i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.ua-serverlys--paa { background: rgba(53,206,141,0.12); color: var(--green); }
.ua-serverlys--paa i { animation: ua-puls 2.4s ease-in-out infinite; }
.ua-serverlys--av { background: rgba(255,120,120,0.12); color: #FF8A8A; }
.ua-serverlys--jobber { background: rgba(241,162,8,0.12); color: #F1A208; }
@media (prefers-reduced-motion: reduce) { .ua-serverlys--paa i { animation: none; } }

.ua-servertall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.ua-servertall > div {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.022);
}
.ua-servertall strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #F5F5F5;
  font-variant-numeric: tabular-nums;
  margin-bottom: 3px;
}
.ua-servertall span {
  font-size: 11px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(232,240,255,0.3);
}

.ua-servertrafikk-topp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.ua-servertrafikk-topp strong { font-size: 13.5px; font-weight: 700; }
.ua-servertrafikk-topp span {
  font-size: 11.5px;
  color: rgba(232,240,255,0.38);
  font-variant-numeric: tabular-nums;
}
.ua-servertrafikk-stolpe {
  display: block;
  height: 12px;
  padding: 2px;
  border-radius: 50px;
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
}
.ua-servertrafikk-stolpe > span {
  display: block;
  height: 8px;
  min-width: 8px;
  border-radius: 50px;
  background: #5438DC;
}

@media (max-width: 767px) {
  .ua-servertall { grid-template-columns: repeat(2, 1fr); }
  .ua-server-topp { flex-direction: column; }
}


/* --- Nettstedene som ligger paa serveren -------------------------------- */
.ua-nettetikett { margin-top: 26px; }
.ua-nettliste { margin-bottom: 4px; }

.ua-rad--nett {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--text);
}
.ua-rad--nett .ua-rad-tekst { flex: 1; min-width: 0; }
.ua-rad--nett .ua-rad-tekst strong { display: block; font-size: 14.5px; font-weight: 600; }
.ua-rad--nett .ua-rad-tekst > span {
  display: block;
  font-size: 12px;
  color: rgba(232,240,255,0.32);
}
.ua-rad--nett:hover .ua-rad-tekst strong { color: var(--green); }

.ua-nett-svar {
  flex-shrink: 0;
  font-size: 11.5px;
  color: rgba(232,240,255,0.28);
  font-variant-numeric: tabular-nums;
}

/* Lyset bytter farge naar svaret kommer. Overgangen gjoer at oeyet
   rekker aa se at noe endret seg. */
.ua-serverlys { transition: background .3s, color .3s; }

/* Et kort blink naar en kontrakt skifter status mens du ser paa. */
@keyframes ua-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(53,206,141,0); }
  30%      { box-shadow: 0 0 0 4px rgba(53,206,141,0.28); }
}
.ua-status.er-ny { animation: ua-blink 2s ease-out; }
@media (prefers-reduced-motion: reduce) { .ua-status.er-ny { animation: none; } }

@media (max-width: 767px) {
  .ua-rad--nett { flex-wrap: wrap; }
  .ua-nett-svar { order: 3; }
}


/* ================================================
   SMS — MOTTAKER OG DE SOM MANGLER NUMMER
   ================================================ */
.ua-smstopp {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 20px;
}
/* Aapen liste tar hele bredden og legger seg under telleren, i stedet for
   aa vokse ved siden av den og la teksten flyte midt i lista. */
.ua-mangler[open] { flex: 1 1 100%; }
.ua-smstall { padding-top: 7px; }
.ua-smstall { font-size: 13px; color: rgba(232,240,255,0.4); }
.ua-smstall strong {
  font-size: 15px;
  font-weight: 700;
  color: #F5F5F5;
  margin-right: 4px;
}

/* De vi ikke kan naa. Tallet staar framme, listen bak et klikk. */
.ua-mangler summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border: 1px solid rgba(241,162,8,0.3);
  border-radius: 50px;
  background: rgba(241,162,8,0.09);
  color: #F1A208;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.ua-mangler summary::-webkit-details-marker { display: none; }
.ua-mangler summary:hover { background: rgba(241,162,8,0.15); }
.ua-mangler summary svg { width: 15px; height: 15px; }
.ua-mangler[open] summary { margin-bottom: 12px; }

.ua-manglerliste {
  padding: 18px 20px 12px;
  border-radius: var(--radius-lg);
  background: #121212;
}
.ua-manglerliste .ua-fotnote { margin: 0 0 14px; }

.ua-rad--mangler {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ua-rad--mangler:last-child { border-bottom: 0; }
.ua-rad--mangler .ua-rad-tekst { flex: 1; min-width: 0; }
.ua-rad--mangler .ua-rad-tekst strong { display: block; font-size: 14px; font-weight: 600; }
.ua-rad--mangler .ua-rad-tekst > span {
  display: block;
  font-size: 11.5px;
  color: rgba(232,240,255,0.3);
}

/* --- Bruker eller nummer ------------------------------------------------ */
.ua-valgrad {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  border-radius: 50px;
  background: rgba(255,255,255,0.035);
}
.ua-valg {
  padding: 7px 18px;
  border: 0;
  border-radius: 50px;
  background: none;
  color: rgba(232,240,255,0.45);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.ua-valg:hover { color: rgba(232,240,255,0.75); }
.ua-valg.er-valgt { background: #5438DC; color: #F5F5F5; }

.ua-select {
  appearance: none;
  /* Pila tegnes i bakgrunnen, saa feltet ser likt ut i alle nettlesere. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23788396' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 17px;
  padding-right: 42px;
  cursor: pointer;
}

.ua-tom-liten {
  margin: 0 0 4px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(232,240,255,0.4);
}

/* Nummeret staar dusere enn navnet i loggen: navnet er det du leter etter. */
.ua-sak-nummer {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(232,240,255,0.32);
}

/* Etiketten i innstillinger kan si at et felt er valgfritt. */
.ua-label span {
  margin-left: 6px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(232,240,255,0.28);
}

@media (max-width: 767px) {
  .ua-rad--mangler { flex-wrap: wrap; }
  .ua-rad--mangler .ua-link-btn { margin-left: 44px; }
}


/* ================================================
   ARKIV — LUKK OG HENT FRAM IGJEN
   ================================================ */
.ua-arkivrad { margin: 0 0 18px; }

.ua-arkivknapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50px;
  background: rgba(255,255,255,0.025);
  color: rgba(232,240,255,0.55);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.ua-arkivknapp:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.ua-arkivknapp svg { width: 15px; height: 15px; }
.ua-arkivknapp span {
  padding: 1px 7px;
  border-radius: 50px;
  background: rgba(255,255,255,0.07);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
/* Staar du i arkivet, sier knappen veien ut. */
.ua-arkivknapp.er-paa {
  border-color: rgba(84,56,220,0.5);
  background: rgba(84,56,220,0.14);
  color: #C4B8FF;
}

/* Lukk-knappen ligger ved statusmerket, dus til du peker paa den. */
.ua-lukkform { display: inline-flex; margin-left: 10px; }
.ua-lukk {
  padding: 5px 13px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 50px;
  background: none;
  color: rgba(232,240,255,0.35);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.ua-lukk:hover {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
.ua-lukk.er-arkivert { color: var(--green); border-color: rgba(53,206,141,0.3); }
.ua-lukk.er-arkivert:hover { background: rgba(53,206,141,0.1); color: var(--green); }

/* Toppraden i en sak maa gi plass til knappen uten aa sprekke. */
.ua-sak-topp, .ua-samtale-topp { flex-wrap: wrap; }

/* --- Opprett bruker ----------------------------------------------------- */
.ua-nybruker-rad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
.ua-nybruker-form .ua-btn { margin-top: 6px; }

@media (max-width: 767px) {
  .ua-nybruker-rad { grid-template-columns: 1fr; }
  .ua-lukkform { margin-left: 0; margin-top: 8px; }
}


/* ================================================
   RYDDIG — INTERNE SIDER I SAMME FORM
   Tickets, Salg, Utvikling, Soeknader, Samtaler og
   Operations Center hadde vokst lag paa lag: kortene
   brukte tre forskjellige bakgrunner, og statusen ble
   vist baade med farget kant og med merke. Her samles
   det til én flate, én kant og én knappestoerrelse.
   Denne blokken staar sist med vilje.
   ================================================ */

/* --- Én flate for alle kort ------------------------------------------- */
.ua-main--wide .ua-box,
.ua-main--wide .ua-sak,
.ua-main--wide .ua-table-wrap,
.ua-main--wide .ua-varselsender > div {
  background: #121212;
  border: 0;
  border-radius: var(--radius-lg);
}

/* Statusen vises med merket. Den fargede venstrekanten sa det samme én
   gang til, og var det som fikk lista til aa se urolig ut. */
.ua-main--wide .ua-sak,
.ua-main--wide .ua-sak--venter,
.ua-main--wide .ua-sak--godkjent,
.ua-main--wide .ua-sak--avvist,
.ua-main--wide .ua-sak--lukket { border-left: 0; }

.ua-main--wide .ua-sak { padding: 22px 24px 20px; }
.ua-main--wide .ua-sak--lukket { opacity: 1; }
.ua-main--wide .ua-sak--lukket .ua-sak-tittel,
.ua-main--wide .ua-sak--lukket .ua-sak-tekst { opacity: .55; }

/* --- Toppraden i en sak: tittel til venstre, merke og knapp til hoeyre - */
.ua-main--wide .ua-sak-topp,
.ua-main--wide .ua-samtale-topp {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.ua-main--wide .ua-sak-tittel,
.ua-main--wide .ua-samtale-topp > div { flex: 1 1 auto; min-width: 0; }
.ua-main--wide .ua-sak-topp .ua-status,
.ua-main--wide .ua-samtale-topp .ua-status { margin-left: auto; }
.ua-main--wide .ua-lukkform { margin-left: 0; }

.ua-main--wide .ua-sak-meta {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(232,240,255,0.32);
}

/* Teksten i saken er innhold, ikke overskrift. */
.ua-main--wide .ua-sak-tekst {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.ua-main--wide .ua-sak-tekst p {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(232,240,255,0.55);
}

/* --- Knapper: smaa piller, ikke brede groenne felt --------------------- */
.ua-main--wide .ua-sak-knapper { gap: 8px; margin-top: 16px; }
.ua-main--wide .ua-sak-knapper .ua-btn,
.ua-main--wide .ua-nysak .ua-btn,
.ua-main--wide .ua-varselsender .ua-btn,
.ua-main--wide .ua-nybruker .ua-btn,
.ua-main--wide .ua-masse .ua-btn {
  width: auto;
  /* Skjemaene er flex-kolonner, og der strekker barna seg til full bredde
     uansett hva width sier. Knappen maa be om aa slippe. */
  align-self: flex-start;
  padding: 10px 20px;
  font-size: 13.5px;
}

/* Tellerne over lista staar paa én rad med arkivknappen. */
.ua-main--wide .ua-saker-topp { gap: 10px; margin-bottom: 2px; }

/* --- Skjema som ligger bak en knapp ------------------------------------ */
.ua-utfold { margin-bottom: 18px; }
.ua-utfold > summary { list-style: none; }
.ua-utfold > summary::-webkit-details-marker { display: none; }

.ua-utfold-knapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 50px;
  background: #5438DC;
  color: #F5F5F5;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.ua-utfold-knapp:hover { background: #6A4BF0; }
.ua-utfold-knapp svg { width: 15px; height: 15px; transition: transform .2s; }
.ua-utfold[open] .ua-utfold-knapp svg { transform: rotate(45deg); }

.ua-utfold-innhold {
  margin-top: 14px;
  padding: 24px 26px 22px;
  border-radius: var(--radius-lg);
  background: #121212;
}
.ua-utfold-ingress {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(232,240,255,0.45);
}

/* --- Brukertabellen ---------------------------------------------------- */
.ua-main--wide .ua-table { min-width: 560px; }
.ua-main--wide .ua-table th { padding: 14px 16px; }
.ua-main--wide .ua-table td { padding: 12px 16px; }

.ua-cell-bruker { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ua-cell-tekst { display: flex; flex-direction: column; min-width: 0; }
.ua-cell-tekst .ua-cell-navn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.ua-cell-under {
  font-size: 11.5px;
  color: rgba(232,240,255,0.32);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nivaa: merket og feltet paa én linje, saa cellen ikke renner ut. */
.ua-main--wide .ua-table td .ua-nivaform {
  display: inline-flex;
  margin: 0 0 0 8px;
  vertical-align: middle;
}
.ua-main--wide .ua-nivafelt { width: 70px; padding: 6px 9px; }
.ua-main--wide .ua-table td { white-space: nowrap; }

/* Utestengte fikk ogsaa en roed sidekant. Statusen staar i knappen. */
.ua-main--wide .ua-banrad {
  border-left: 0;
  background: #121212;
  border-radius: var(--radius-lg);
}

@media (max-width: 767px) {
  .ua-main--wide .ua-sak { padding: 18px 18px 16px; }
  .ua-main--wide .ua-sak-topp,
  .ua-main--wide .ua-samtale-topp { flex-wrap: wrap; }
  .ua-main--wide .ua-sak-tittel { flex-basis: 100%; }
  .ua-main--wide .ua-sak-topp .ua-status { margin-left: 0; }
  .ua-utfold-innhold { padding: 20px 18px; }
}


/* --- Samtalen i Samtaler -------------------------------------------------
   Samme form som chatten paa kontaktsiden: hvem som snakker som en liten
   etikett, tiden dus ved siden av, og teksten under. */
.ua-samtale-vindu {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px 0 18px;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.ua-chatlinje-topp {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.ua-chatlinje-hvem {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(232,240,255,0.3);
}
.ua-chatlinje--robot  .ua-chatlinje-hvem { color: var(--green); }
.ua-chatlinje--ansatt .ua-chatlinje-hvem { color: #C4B8FF; }
.ua-chatlinje time {
  font-size: 11px;
  color: rgba(232,240,255,0.22);
  font-variant-numeric: tabular-nums;
}
.ua-chatlinje p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(232,240,255,0.72);
  white-space: pre-wrap;
}
.ua-chatlinje--bruker p { color: rgba(232,240,255,0.5); }


/* ================================================
   FILTER, SOEK OG SIDER
   Én linje over hver liste: soekefelt til venstre,
   filtermerker med antall til hoeyre. Sidebytteren
   under. Samme form paa alle de interne sidene.
   ================================================ */
.ua-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 16px;
}

.ua-filter-sok {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 220px;
  max-width: 340px;
}
.ua-filter-sok svg {
  position: absolute;
  left: 14px;
  width: 16px; height: 16px;
  color: rgba(232,240,255,0.32);
  pointer-events: none;
}
.ua-filter-sok input {
  width: 100%;
  padding: 10px 34px 10px 40px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50px;
  background: #121212;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  transition: border-color .2s;
}
.ua-filter-sok input:focus { outline: none; border-color: rgba(84,56,220,0.55); }
.ua-filter-sok input::placeholder { color: rgba(232,240,255,0.3); }
/* Nettleserens eget kryss i soekefeltet kolliderer med vaart. */
.ua-filter-sok input::-webkit-search-cancel-button { display: none; }

.ua-filter-nullstill {
  position: absolute;
  right: 12px;
  font-size: 18px;
  line-height: 1;
  color: rgba(232,240,255,0.4);
  text-decoration: none;
}
.ua-filter-nullstill:hover { color: var(--text); }

.ua-filter-merker { display: flex; flex-wrap: wrap; gap: 6px; }
.ua-filtermerke {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 50px;
  background: rgba(255,255,255,0.035);
  color: rgba(232,240,255,0.5);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.ua-filtermerke:hover { background: rgba(255,255,255,0.07); color: var(--text); }
.ua-filtermerke span {
  font-size: 11px;
  font-weight: 700;
  color: rgba(232,240,255,0.32);
  font-variant-numeric: tabular-nums;
}
.ua-filtermerke.er-valgt { background: #5438DC; color: #F5F5F5; }
.ua-filtermerke.er-valgt span { color: rgba(245,245,245,0.7); }
/* Arkivet staar litt for seg selv, som det ogsaa er. */
.ua-filtermerke--arkiv { margin-left: 6px; }

.ua-filter-rolle .ua-select {
  width: auto;
  min-width: 180px;
  padding: 9px 38px 9px 14px;
  border-radius: 50px;
  font-size: 13px;
}

/* --- Sider -------------------------------------------------------------- */
.ua-sidenav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 4px;
}
.ua-sidenav-knapp {
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s;
}
a.ua-sidenav-knapp:hover { background: rgba(255,255,255,0.05); }
.ua-sidenav-knapp.er-av { opacity: .3; }
.ua-sidenav-tekst {
  font-size: 12.5px;
  color: rgba(232,240,255,0.45);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ua-sidenav-tekst em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: rgba(232,240,255,0.28);
}

/* --- Personsoek --------------------------------------------------------- */
.ua-personsok { position: relative; }
.ua-personsok-felt.er-valgt {
  border-color: rgba(53,206,141,0.4);
  color: var(--text);
}
.ua-personsok-liste {
  position: absolute;
  z-index: 30;
  left: 0; right: 0;
  top: calc(100% + 6px);
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: #1A1A1A;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.ua-personsok-liste li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.ua-personsok-liste li:hover,
.ua-personsok-liste li.er-aktiv { background: rgba(84,56,220,0.2); }
.ua-personsok-liste strong { font-size: 13.5px; font-weight: 600; color: var(--text); }
.ua-personsok-liste span { font-size: 11.5px; color: rgba(232,240,255,0.4); }
.ua-personsok-liste .ua-personsok-tom {
  cursor: default;
  font-size: 12.5px;
  color: rgba(232,240,255,0.4);
}
.ua-personsok-liste .ua-personsok-tom:hover { background: none; }

.ua-varsel-person { margin-top: -6px; margin-bottom: 14px; }
.ua-mangler-fler { margin: 10px 0 0; }

@media (max-width: 767px) {
  .ua-filter-sok { max-width: none; flex-basis: 100%; }
  .ua-filtermerke--arkiv { margin-left: 0; }
  .ua-filter-rolle { flex-basis: 100%; }
  .ua-filter-rolle .ua-select { width: 100%; }
  .ua-sidenav-knapp { padding: 8px 12px; font-size: 12.5px; }
}


/* ================================================
   SMS — VOKSENDE FELT, MASSEUTSENDELSE OG LOGG
   ================================================ */

/* Feltet vokser med teksten i stedet for aa rulle inni seg selv. */
.ua-textarea.ua-vokser {
  resize: none;
  overflow: hidden;
  min-height: 0;
  transition: height .08s ease-out;
}
#ua-melding.ua-vokser       { min-height: 110px; }
#ua-oppdrag.ua-vokser       { min-height: 64px; }
#ua-masse-melding.ua-vokser { min-height: 88px; }

/* --- Masseutsendelse ----------------------------------------------------- */
.ua-masse { margin: 0 0 20px; }

.ua-masse-roller {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 18px;
}
.ua-masse-rolle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(232,240,255,0.7);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.ua-masse-rolle input { margin: 0; accent-color: #5438DC; }
.ua-masse-rolle em {
  font-style: normal;
  font-size: 11px;
  color: rgba(232,240,255,0.32);
  font-variant-numeric: tabular-nums;
}
.ua-masse-rolle:hover { background: rgba(255,255,255,0.04); }
.ua-masse-rolle:has(input:checked) {
  border-color: rgba(84,56,220,0.6);
  background: rgba(84,56,220,0.14);
  color: #F5F5F5;
}
.ua-masse-rolle.er-tom { opacity: .4; cursor: not-allowed; }

.ua-masse-sum {
  margin: 4px 0 16px;
  font-size: 13.5px;
  color: rgba(232,240,255,0.5);
}
.ua-masse-sum b { color: #F5F5F5; font-weight: 700; }

/* --- Loggen: én linje per melding, klikk for resten --------------------- */
.ua-smslogg {
  border-radius: var(--radius-lg);
  background: #121212;
  overflow: hidden;
}
.ua-smslinje { border-bottom: 1px solid rgba(255,255,255,0.045); }
.ua-smslinje:last-child { border-bottom: 0; }

.ua-smslinje > summary {
  display: grid;
  grid-template-columns: 10px minmax(0, 1.1fr) minmax(0, 1.5fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  cursor: pointer;
  list-style: none;
  transition: background .15s;
}
.ua-smslinje > summary::-webkit-details-marker { display: none; }
.ua-smslinje > summary:hover { background: rgba(255,255,255,0.025); }
.ua-smslinje[open] > summary { background: rgba(255,255,255,0.03); }

.ua-smslys {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
}
.ua-smslys--paa    { background: var(--green); }
.ua-smslys--av     { background: #E06B6B; }
.ua-smslys--jobber { background: #F1A208; }

.ua-smslinje-hvem { display: flex; flex-direction: column; min-width: 0; }
.ua-smslinje-hvem strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ua-smslinje-hvem em {
  font-style: normal;
  font-size: 11.5px;
  color: rgba(232,240,255,0.32);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ua-smslinje-utdrag {
  font-size: 13px;
  color: rgba(232,240,255,0.42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ua-smslinje > summary time {
  font-size: 11.5px;
  color: rgba(232,240,255,0.3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ua-smslinje-mer { padding: 4px 18px 18px 42px; }
.ua-smslinje-tekst {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(232,240,255,0.75);
  white-space: pre-wrap;
}
.ua-smslinje-meta { margin: 0; font-size: 11.5px; color: rgba(232,240,255,0.3); }

.ua-masse-fremdrift { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.ua-masse-stolpe {
  flex: 1;
  max-width: 260px;
  height: 10px;
  padding: 2px;
  border-radius: 50px;
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.ua-masse-stolpe > span {
  display: block;
  height: 6px;
  min-width: 6px;
  border-radius: 50px;
  background: #5438DC;
  transition: width .4s ease;
}
.ua-masse-tall { font-size: 12.5px; color: rgba(232,240,255,0.55); font-variant-numeric: tabular-nums; }
.ua-masse-tall b { color: #F1A208; font-weight: 600; }

@media (max-width: 767px) {
  .ua-smslinje > summary {
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 10px;
  }
  .ua-smslinje-utdrag { display: none; }
  .ua-smslinje-mer { padding-left: 38px; }
}


/* ================================================
   MIN SIDE — VEIVISEREN
   Samme pille som chatten paa forsiden. Svaret som
   tekst, og snarveiene som bokser du kan trykke paa.
   ================================================ */
/* padding: 0 er ikke pynt: temaet gir alle <section> 110 px luft over og
   under, og veiviseren er en <section>. */
.ua-mh { margin: 0 0 30px; padding: 0; }

.ua-mh-felt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  background: #121212;
  transition: border-color .2s;
}
.ua-mh-felt:focus-within { border-color: rgba(84,56,220,0.55); }
.ua-mh-gnist { flex-shrink: 0; width: 18px; height: 18px; color: #A78BFA; }
.ua-mh-felt input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  padding: 10px 0;
}
.ua-mh-felt input:focus { outline: none; }
.ua-mh-felt input::placeholder { color: rgba(232,240,255,0.32); }
.ua-mh-felt button {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 0;
  border-radius: 50%;
  background: #5438DC;
  color: #F5F5F5;
  cursor: pointer;
  transition: background .2s, opacity .2s;
}
.ua-mh-felt button:hover { background: #6A4BF0; }
.ua-mh-felt button:disabled { opacity: .45; cursor: default; }
.ua-mh-felt button svg { width: 18px; height: 18px; }

/* Forslag foer du har spurt om noe, etter hva du har tilgang til. */
.ua-mh-forslag { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* display: flex over overstyrer hidden-attributtet. Uten denne ble
   forslagene staaende etter at du hadde spurt. */
.ua-mh-forslag[hidden] { display: none; }
.ua-mh-forslagknapp {
  padding: 7px 13px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50px;
  background: none;
  color: rgba(232,240,255,0.55);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.ua-mh-forslagknapp:hover {
  border-color: rgba(84,56,220,0.5);
  background: rgba(84,56,220,0.12);
  color: #F5F5F5;
}

/* --- Traaden ------------------------------------------------------------ */
.ua-mh-traad:not(:empty) { margin-top: 18px; }
.ua-mh-du { margin-bottom: 8px; font-size: 13px; color: rgba(232,240,255,0.34); }
.ua-mh-du::before { content: "Du: "; }
.ua-mh-svar {
  margin-bottom: 14px;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(232,240,255,0.82);
}
.ua-mh-svar--feil { color: rgba(255,150,150,0.8); }
.ua-mh-venter { margin-bottom: 14px; font-size: 14px; color: rgba(232,240,255,0.3); }

.ua-mh-kort {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin: -4px 0 20px;
}
.ua-mh-kortet {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 16px;
  background: #121212;
  color: var(--text);
  text-decoration: none;
  transition: background .2s;
}
.ua-mh-kortet:hover { background: #181818; }
.ua-mh-kortikon { flex-shrink: 0; display: flex; color: #5438DC; }
.ua-mh-kortikon svg { width: 22px; height: 22px; }
.ua-mh-korttekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ua-mh-korttekst strong { font-size: 13.5px; font-weight: 600; }
.ua-mh-korttekst em {
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(232,240,255,0.4);
}
.ua-mh-pil { font-size: 20px; color: rgba(232,240,255,0.25); transition: transform .2s, color .2s; }
.ua-mh-kortet:hover .ua-mh-pil { transform: translateX(2px); color: var(--green); }

/* Stedet en snarvei pekte paa, lyser kort opp naar du lander der. */
@keyframes ua-mh-pek {
  0%, 100% { box-shadow: 0 0 0 0 rgba(84,56,220,0); }
  25%      { box-shadow: 0 0 0 4px rgba(84,56,220,0.45); }
}
.ua-mh-pekt { animation: ua-mh-pek 1.6s ease-out; border-radius: 16px; }
@media (prefers-reduced-motion: reduce) { .ua-mh-pekt { animation: none; } }

@media (max-width: 767px) {
  .ua-mh-kort { grid-template-columns: 1fr; }
  .ua-mh-felt input { font-size: 14px; }
}


/* ================================================
   MIN SIDE — NIVAA VED PROFILBILDET
   Rolle og nivaa paa én linje under navnet. Maaleren
   er den samme som foer, bare kortere.
   ================================================ */
.ua-konto-linje {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 4px;
}
.ua-konto-skille {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.12);
}
.ua-konto-niva {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.ua-konto-niva strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.ua-konto-niva .ua-niva-stolpe {
  display: block;
  flex: 0 0 auto;
  width: 120px;
  max-width: none;
  height: 10px;
  padding: 2px;
  border-radius: 50px;
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
}
.ua-konto-niva .ua-niva-stolpe > span {
  display: block;
  height: 6px;
  min-width: 6px;
  border-radius: 50px;
  background: var(--rollefarge, #5438DC);
}
.ua-konto-niva em {
  font-style: normal;
  font-size: 11px;
  color: rgba(232,240,255,0.32);
  font-variant-numeric: tabular-nums;
}

/* Uten stripa under trenger headeren litt mer luft ned til veiviseren. */
.ua-konto-head { margin-bottom: 22px; }

/* En eldre mobilregel for den gamle nivaastripa satte order: 3 paa alle
   maalere og flyttet denne bakerst. Her skal den staa foer tallet. */
.ua-konto-niva .ua-niva-stolpe { order: 0; }

@media (max-width: 767px) {
  .ua-konto-niva .ua-niva-stolpe { width: 90px; order: 0; flex-basis: auto; }
}


/* ================================================
   MIN SIDE — APPER
   App-ikonet staar som det er, med egne runde hjoerner.
   ================================================ */
.ua-rad--app .ua-rad-ikon img {
  display: block;
  width: 27px;
  height: 27px;
  border-radius: 7px;
  object-fit: contain;
}
.ua-rad--app:hover .ua-rad-pil { color: var(--green); }
@media (max-width: 767px) {
  .ua-rad--app .ua-rad-ikon img { width: 24px; height: 24px; border-radius: 6px; }
}



/* ================================================
   MIN SIDE — VEIVISEREN, STROEMMING OG FORSLAG
   Svaret kommer mens det skrives, kan ha korte lister,
   og avsluttes med knapper for neste spoersmaal.
   ================================================ */
.ua-mh-svar p { margin: 0 0 8px; }
.ua-mh-svar p:last-child { margin-bottom: 0; }
.ua-mh-svar ul { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 5px; }
.ua-mh-svar ul:last-child { margin-bottom: 0; }
.ua-mh-svar li { position: relative; padding-left: 16px; }
.ua-mh-svar li::before {
  content: "";
  position: absolute;
  left: 1px; top: .72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #5438DC;
}
.ua-mh-svar strong { color: #F5F5F5; font-weight: 700; }
.ua-mh-svar a { color: var(--green); text-decoration: none; }

.ua-mh-prikker { display: block; font-style: normal; }
.ua-mh-prikker::before {
  content: "\2022\2022\2022";
  letter-spacing: 4px;
  font-size: 18px;
  line-height: 1;
  color: rgba(232,240,255,0.7);
  animation: ua-ai-pust 1.2s ease-in-out infinite;
}
@keyframes ua-ai-pust { 0%, 100% { opacity: .25; } 50% { opacity: .8; } }

/* Markoeren mens svaret skrives. */
.ua-mh-svar.ua-ai-skriver > :last-child::after {
  content: "";
  display: inline-block;
  width: 7px; height: 1.05em; margin-left: 3px; vertical-align: -0.15em;
  border-radius: 2px;
  background: var(--green);
  animation: ua-mh-blink 1s steps(2, start) infinite;
}
@keyframes ua-mh-blink { to { visibility: hidden; } }

.ua-mh-videre { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 18px; }
.ua-mh-videre button {
  padding: 7px 13px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50px;
  background: none;
  color: rgba(232,240,255,0.55);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.ua-mh-videre button:hover {
  border-color: rgba(84,56,220,0.5);
  background: rgba(84,56,220,0.12);
  color: #F5F5F5;
}

.ua-mh-ny {
  display: block;
  margin: 4px 0 0 auto;
  padding: 4px 6px;
  border: 0;
  background: none;
  color: rgba(232,240,255,0.3);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color .2s;
}
.ua-mh-ny:hover { color: rgba(232,240,255,0.7); }
.ua-mh-ny[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ua-mh-prikker::before, .ua-mh-svar.ua-ai-skriver > :last-child::after { animation: none; }
}


/* Nummererte steg i chat-svarene. Tallet staar der prikken ellers staar. */
.fc-svar ol, .kx-tekst ol, .ua-mh-svar ol {
  list-style: none;
  margin: 4px 0 8px;
  padding: 0;
  display: grid;
  gap: 5px;
  counter-reset: ua-steg;
}
.fc-svar ol:last-child, .kx-tekst ol:last-child, .ua-mh-svar ol:last-child { margin-bottom: 0; }
.fc-svar ol li, .kx-tekst ol li, .ua-mh-svar ol li { position: relative; padding-left: 24px; counter-increment: ua-steg; }
.fc-svar ol li::before, .kx-tekst ol li::before, .ua-mh-svar ol li::before {
  content: counter(ua-steg) ".";
  position: absolute;
  left: 0; top: 0;
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #A78BFA;
}
.ua-ai-skriver > ol:last-child::after { display: none; }



/* ================================================
   BETALINGER — MIN SIDE
   Oppsettstatus, to tall, skjemaet i en sammenleggbar
   boks, og lista som rader som kan aapnes.
   ================================================ */
.ua-bt-oppsett { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.ua-bt-leverandor {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 50px;
  background: #121212;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(232,240,255,0.7);
}
.ua-bt-leverandor i { width: 7px; height: 7px; border-radius: 50%; background: rgba(232,240,255,0.25); }
.ua-bt-leverandor.er-klar i { background: var(--green); box-shadow: 0 0 6px rgba(53,206,141,0.7); }
.ua-bt-leverandor em { font-style: normal; font-weight: 500; color: rgba(232,240,255,0.38); }

.ua-bt-tall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 18px; }
.ua-bt-tall > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 20px;
  border-radius: 18px;
  background: #121212;
}
.ua-bt-tall span { font-size: 12px; color: rgba(232,240,255,0.45); }
.ua-bt-tall strong { font-size: 24px; font-weight: 800; letter-spacing: -0.6px; color: #F5F5F5; font-variant-numeric: tabular-nums; }
.ua-bt-tall em { font-style: normal; font-size: 12px; color: rgba(232,240,255,0.35); }

/* --- Ny lenke ------------------------------------------------------------ */
.ua-bt-ny {
  margin: 0 0 26px;
  border-radius: 20px;
  background: #121212;
}
.ua-bt-ny > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  font-size: 15px;
  font-weight: 700;
  color: #F5F5F5;
  cursor: pointer;
  list-style: none;
}
.ua-bt-ny > summary::-webkit-details-marker { display: none; }
.ua-bt-ny-pluss {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #5438DC;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  transition: transform .25s;
}
.ua-bt-ny[open] .ua-bt-ny-pluss { transform: rotate(45deg); }
.ua-bt-skjema { padding: 0 20px 20px; }
.ua-bt-skjema .ua-etikett { margin-top: 20px; }

.ua-bt-valg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 20px 0 6px; }
.ua-bt-valg fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.ua-bt-valg legend { padding: 0; margin-bottom: 8px; }

.ua-bt-forhånd, #bt-forhand { margin: 0; font-size: 13px; color: rgba(232,240,255,0.55); }

/* --- Lista --------------------------------------------------------------- */
.ua-bt-liste { display: flex; flex-direction: column; }
.ua-bt-rad + .ua-bt-rad { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.ua-bt-rad > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  transition: background .15s;
}
.ua-bt-rad > summary::-webkit-details-marker { display: none; }
.ua-bt-rad > summary:hover { background: rgba(255,255,255,0.03); }
.ua-bt-rad.er-vist > summary { background: rgba(84,56,220,0.08); }

.ua-bt-hvem { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ua-bt-hvem strong { font-size: 14.5px; font-weight: 600; color: #F5F5F5; }
.ua-bt-hvem span { font-size: 12.5px; color: rgba(232,240,255,0.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua-bt-belop { font-size: 14.5px; font-weight: 700; color: #F5F5F5; font-variant-numeric: tabular-nums; white-space: nowrap; }

.ua-bt-detalj { padding: 4px 16px 18px; }
.ua-bt-detalj dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; margin: 0 0 14px; }
.ua-bt-detalj dl div { min-width: 0; }
.ua-bt-detalj dt { font-size: 11.5px; color: rgba(232,240,255,0.38); margin-bottom: 2px; }
.ua-bt-detalj dd { margin: 0; font-size: 13.5px; color: rgba(232,240,255,0.8); overflow-wrap: anywhere; }

.ua-bt-lenke { display: flex; gap: 8px; margin-bottom: 12px; }
.ua-bt-lenke .ua-input { flex: 1; min-width: 0; font-size: 13px; color: rgba(232,240,255,0.7); }
.ua-bt-lenke .ua-btn { flex-shrink: 0; align-self: auto; }

.ua-bt-handlinger { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }
.ua-bt-handlinger form { margin: 0; }
.ua-link-btn--fare { color: #E06B6B; }
.ua-link-btn--fare:hover { color: #F08A8A; }

.ua-bt-logg { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,0.05); display: grid; gap: 6px; }
.ua-bt-logg li { display: flex; gap: 12px; font-size: 12.5px; line-height: 1.5; color: rgba(232,240,255,0.55); }
.ua-bt-logg time { flex-shrink: 0; width: 82px; color: rgba(232,240,255,0.32); font-variant-numeric: tabular-nums; }

@media (max-width: 767px) {
  .ua-bt-tall strong { font-size: 20px; }
  .ua-bt-valg { grid-template-columns: 1fr; }
  .ua-bt-rad > summary { flex-wrap: wrap; gap: 6px 12px; }
  .ua-bt-hvem { flex-basis: 100%; }
  .ua-bt-detalj dl { grid-template-columns: 1fr; }
}


/* ================================================
   BETALINGSSIDEN — /betal/<token>/
   Ett kort midt paa siden: hva, hvor mye, og to knapper.
   ================================================ */
.bt-page > .bt-seksjon {
  --innrykk: 12px;
  margin: calc(70px + var(--innrykk)) var(--innrykk) var(--innrykk);
  padding: 90px 0;
  border-radius: 32px;
  background: #0A0A0A;
}
.bt-kort {
  max-width: 460px;
  margin: 0 auto;
  padding: 38px 34px 30px;
  border-radius: 26px;
  background: #121212;
  text-align: center;
}
.bt-til {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--green);
}
.bt-tittel {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.6px;
  color: #F5F5F5;
}
.bt-belop {
  margin: 18px 0 6px;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -1.6px;
  color: #F5F5F5;
  font-variant-numeric: tabular-nums;
}
.bt-frist { margin: 0 0 26px; font-size: 13px; color: rgba(232,240,255,0.45); }
.bt-tekst { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: rgba(232,240,255,0.6); }

.bt-melding {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(233,185,73,0.1);
  font-size: 13.5px;
  line-height: 1.55;
  color: #E9C97A;
}
.bt-melding--feil { background: rgba(224,107,107,0.1); color: #F0A0A0; }

.bt-knapper { display: flex; flex-direction: column; gap: 10px; }
.bt-knapper form { margin: 0; }
.bt-knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 22px;
  border: 0;
  border-radius: 50px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s, filter .2s, background .2s;
}
.bt-knapp:active { transform: scale(0.98); }
.bt-knapp svg { width: 20px; height: 20px; }
/* Vipps sin oransje. */
.bt-knapp--vipps { background: #FF5B24; color: #fff; }
.bt-knapp--vipps:hover { filter: brightness(1.07); }
.bt-knapp--kort { background: #F5F5F5; color: #0A0A0A; }
.bt-knapp--kort:hover { background: #FFFFFF; }
.bt-knapp--rolig { width: auto; background: #5438DC; color: #fff; font-size: 15px; padding: 13px 26px; }

.bt-fot {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  margin: 20px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(232,240,255,0.35);
  text-align: left;
}
.bt-fot svg { flex-shrink: 0; width: 14px; height: 14px; margin-top: 1px; }
.bt-test {
  margin: 14px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  color: #E9B949;
}

.bt-ikon {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
}
.bt-ikon svg { width: 30px; height: 30px; }
.bt-ikon--ok { background: rgba(53,206,141,0.14); color: var(--green); }
.bt-ikon--noytral { background: rgba(255,255,255,0.06); color: rgba(232,240,255,0.6); }
.bt-ikon--venter i {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.12);
  border-top-color: var(--green);
  animation: bt-snurr .9s linear infinite;
}
@keyframes bt-snurr { to { transform: rotate(360deg); } }

.bt-detaljer { margin: 6px 0 0; padding: 0; text-align: left; }
.bt-detaljer div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 14px;
}
.bt-detaljer dt { color: rgba(232,240,255,0.45); }
.bt-detaljer dd { margin: 0; text-align: right; color: #F5F5F5; }

@media (max-width: 767px) {
  .bt-page > .bt-seksjon { --innrykk: 8px; margin-top: calc(62px + var(--innrykk)); padding: 40px 0; border-radius: 24px; }
  .bt-kort { padding: 30px 20px 24px; border-radius: 22px; }
  .bt-belop { font-size: 40px; }
}

/* Boksene paa Betalinger faar samme flate som listene paa Min side,
   ellers forsvinner de mot bakgrunnen. */
.ua-bt-tall > div,
.ua-bt-ny,
.ua-bt-leverandor { background: rgba(255,255,255,0.022); }
.ua-bt-skjema .ua-kfelter { background: none; padding: 0; }

/* Lenker kan sendes foer Vipps og Stripe er koblet til. Knappene staar da
   dempet, med en kort beskjed under. */
.bt-knapp.er-av { opacity: .35; cursor: not-allowed; filter: grayscale(.4); }
.bt-knapp.er-av:active { transform: none; }
.bt-snart { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: rgba(232,240,255,0.55); }
.bt-snart a { color: var(--green); text-decoration: none; }
.ua-bt-snart { font-style: normal; font-size: 11.5px; color: rgba(232,240,255,0.38); margin-left: 4px; }
.ua-bt-info { background: rgba(84,56,220,0.12); color: #D2C8FA; }