/* assets/css/main.css */
:root {
  --bg:#0b0c10; --panel:#111319; --ink:#e8edf3; --muted:#98a2b3; --brand:#b33b00;
  --ok:#10b981; --warn:#f59e0b; --err:#ef4444;
  --radius:12px;
}
* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; font-family:'Mona Sans',"Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:#181818; background:#fff;font-weight:300;
}

/* ===========================
   Login form UA-reset & polish
   Scope: .login …
   =========================== */

.login {
  /* Force consistent rendering (prevents UA color tricks) */
  color-scheme: light;
  font-family: "Mona Sans","Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
table.ak-table {
    width: 100%;
    text-align: left;
}
.row.above {
    display: flex;
    flex-direction: column;
    margin-bottom: 45px;
}

/* Base fields */
.login input,
.login select,
.login textarea,
.login button {
  font: 300 13px "Mona Sans","Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing: 0;
}

/* Inputs baseline */
.login input,
.login select,
.login textarea {
  --field-bg: #fff;           /* adjust to your theme */
  --field-fg: #181818;
  --field-border:#ddd;
  --field-focus: #e1e1e1;        /* focus ring color */
  background: var(--field-bg);
  color: var(--field-fg);
  border: 1px solid var(--field-border);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease;
}

/* Custom focus (kills default blue glow across browsers) */
.login input:focus-visible,
.login select:focus-visible,
.login textarea:focus-visible {
  border-color: var(--field-focus);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--field-focus) 30%, transparent);
}

/* Placeholder consistency */
.login ::placeholder { color: rgba(255,255,255,.45); opacity: 1; }           /* std */
.login :-ms-input-placeholder { color: rgba(255,255,255,.45); }              /* old IE */
.login ::-ms-input-placeholder { color: rgba(255,255,255,.45); }             /* old Edge */
.login ::-webkit-input-placeholder { color: rgba(255,255,255,.45); }         /* WebKit */

/* Disable Firefox's default red glow for :invalid */
.login input:invalid,
.login select:invalid,
.login textarea:invalid { box-shadow: none; }

/* Remove number spinners (Chrome/Edge/Safari & Firefox) */
.login input[type="number"]::-webkit-outer-spin-button,
.login input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.login input[type="number"] { -moz-appearance: textfield; }

/* ===========================
   Autofill overriding (Chrome/Edge/Safari)
   =========================== */

/* Modern pseudo-class (where supported) */
.login input:autofill,
.login select:autofill,
.login textarea:autofill {
  /* Force our colors */
  -webkit-text-fill-color: var(--field-fg);
  caret-color: var(--field-fg);
  /* Paint over UA autofill background */
  box-shadow: 0 0 0 1000px var(--field-bg) inset !important;
  background-clip: padding-box;
  border-color: var(--field-border);
}

/* WebKit-prefixed fallback (widest support) */
.login input:-webkit-autofill,
.login select:-webkit-autofill,
.login textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--field-fg);
  caret-color: var(--field-fg);
  box-shadow: 0 0 0 1000px var(--field-bg) inset !important;
  background-clip: padding-box;
  border-color: var(--field-border);
}

/* Keep autofill overridden even after focus changes */
.login input:-webkit-autofill:focus,
.login input:-webkit-autofill:hover,
.login input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--field-fg);
  box-shadow: 0 0 0 1000px var(--field-bg) inset !important;
}

/* Prevent Safari/Chrome from “animating back” the autofill style */
.login input,
.login select,
.login textarea {
  transition: background-color 9999s ease 0s, color 9999s ease 0s;
}
.login input:-webkit-autofill,
.login select:-webkit-autofill,
.login textarea:-webkit-autofill {
  transition: background-color 9999s ease 0s, color 9999s ease 0s;
}

/* High-contrast/Reduced motion niceties */
@media (prefers-reduced-motion: reduce) {
  .login input,
  .login select,
  .login textarea { transition: none; }
}


.container.log {
    width: 100%;
    max-width: 1334px;
    margin:0px;
}

section.login5 {
    height: 76%;
    display: flex
;
    align-items: center;
    justify-content: center;
}

.ak-topbar-inner2 {
    max-width: 1334px;
    margin: 0 auto;
    padding: 10px 12px;
    display: flex
;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    gap: 12px;
}
h1.intro.set {
    margin: 0;
    font-size: 19px;
}
.intro-head {
    display: inline-flex
;
    align-items: center;
    align-content: center;
}
.ak-nav { padding:10px 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ak-nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 16px; align-items: center; }
.ak-nav a { text-decoration: none; }
.linklike { background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; font: inherit; }
.inline-form { display: inline; }

/* --- Top navigation bar --- */
.ak-topbar {
  border-bottom: 1px solid rgba(0,0,0,.12);
  margin-bottom: 16px;
}
.ak-topbar-inner {
  max-width: 1334px;
  margin: 0 auto;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center; /* centers the nav */
  position: relative;      /* allows logo to anchor left */
  gap: 12px;
}
.ak-logo {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
}
.ak-mainnav {padding:6px;}
.ak-navlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center; /* center the items as a group */
}
.ak-navlist a {
  text-decoration: none;
  color:#181818;font-weight:300;
  font-size:13px;
}
.inline-form { display: inline; }
.linklike {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    font: inherit;
    color: #181818;
    padding: 0px;
    margin: 0px;
    font-weight: 300;
    font-size: 13px;
}


a.button-link {
  display:block; text-align:center; padding:12px 16px; border-radius:10px;
  background:#181818; color:#fff; text-decoration:none; font-weight:300;
}
a.button-link:hover { background:#333; }

.container {
    max-width: 1334px;
    margin: 15px;
    padding: 0 16px;
}
.card {
  background:#fff;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  
  padding:24px;
  backdrop-filter: blur(6px);
}
h1,h2,h3 { margin:0 0 12px;font-weight:600; }
.muted { color:#181818; font-size:.80rem; }
strong {
    font-weight: 600;
}

.h-100 {
    min-height: 103svh;
}

button.secondary.out {
    background: none;
    color: #181818;
}
label { display:block; font-weight:600; margin:2px 0 6px; }
input[type="email"],
input[type="password"],
input[type="text"],
select {
  width:100%; padding:7px 14px; border-radius:.25rem; border:1px solid rgba(255,255,255,.12);
  background:#fff; color:#181818; outline:none;border:1px solid #ddd;
}

/* layout helpers */
.mt-16 { margin-top:16px; }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.stack { display:flex; flex-direction:column; gap:7px; }
.cluster { display:flex; gap:10px; flex-wrap:wrap; }

/* buttons/links */
a.button-link, button.secondary {
  display:block; text-align:center; padding: 0.375rem 0.75rem;
    border-radius: .25rem;
  background:#1f2937; color:#fff; text-decoration:none; font-weight:300; border:0;margin-bottom:10px;margin-top:10px;
}
a.button-link:hover { background:#273548; }
button.secondary { cursor:pointer; }

input {
    padding: 7px 3px;
    border: 1px solid #ddd;
    width: 100%;
    border-radius: .25rem;
    font-family: 'Mona Sans';
    font-weight: 300;
}

li {
    list-style: none;
}
td {
    font-size: 13px;
    font-weight: 300;
}

input[type="checkbox"] {
    width: auto;
}
/* form reset for inline forms used as buttons */
.inline-form { display:inline; margin:0; }

input:focus { border-color: #ddd; box-shadow:none;background:#e1e1e1 !important; }

button {
  appearance:none; border:0; padding:0.375rem 0.75rem; border-radius:.25rem; cursor:pointer; font-weight:400;font-size:14px;
  background:var(--brand); color:white; width:100%; margin-top:14px; font-family:'Mona Sans',"Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
button.secondary { background:#1f2937; }
.row { display:flex; gap:10px; }
.row > * { flex:1; }

.notice { padding:10px 12px; border:1px dashed rgba(255,255,255,.15); border-radius:10px; margin-top:12px; }
.hidden { display:none !important; }
.role-grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
.role-card {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 1rem;
    display: flex
;
    flex-wrap: wrap;
    align-items: stretch;
}
button.role-continue {
    margin-top: auto;
}
.role-card h2 { margin-top:0;margin-bottom:0px; }
.bullets { margin:0.5rem 0 1rem; padding-left:1rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.role-tabs { display:flex; gap:8px; margin:12px 0 18px; }
.role-tabs button { flex:1; background:#fff;color:#181818;border:1px solid #181818; }
.role-tabs button.active { background: var(--brand);color:#fff;border:1px solid #b33b00; }
.footer { margin-top:16px; color:var(--muted); font-size:.9rem; text-align:center; }


.tabs { display:flex; gap:8px; margin:12px 0 18px; }
.tabs .tab { background:#f1f1f1; color:#181818; border:0; padding:2px 12px; cursor:pointer; }
.tabs .tab.active { background: var(--brand);color:#fff; }
.tabpane { display:none; }
.tabpane.active { display:block; }

.photo-grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:start;max-width:575px; }
.photo-card { background:#fff; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:0px; }
.photo-title { margin:0 0 8px; font-weight:700; }
.photo-preview {
  display:block; width:100%; max-width:100%; aspect-ratio: 1; object-fit: cover;
  border-radius:10px; border:1px solid rgba(255,255,255,.12); margin-bottom:10px;
}

.banner { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.12); }
.banner-audit { background:#fff; }
.stats-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
.stat { background:#fff; border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:12px; }
.stat-label { font-size:.9rem; color:#181818; }
.stat-value { font-size:1.6rem; font-weight:800; margin-top:4px; }
.tile { display:block; text-decoration:none; background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:12px; padding:14px; }
.tile:hover { border-color: rgba(0,0,0,.22); }
.tile-title { font-weight:800; margin-bottom:6px;color:#181818; }
.tile-desc { font-size:.95rem; }
span.title {
    font-weight: 600;
    padding-right: 5px;
}

ul.bullets li {
    font-size: 73%;
    font-weight: 300;
    color: #585858;
}