/* AK ID Core v3 - Theme aligned auth/profile design */
.ak-id-auth-shell,
.ak-id-profile {
  --akid-bg: #ffffff;
  --akid-panel: #ffffff;
  --akid-panel-2: #f7f7f8;
  --akid-panel-3: #f1f1f3;
  --akid-border: rgba(0,0,0,.10);
  --akid-border-2: rgba(0,0,0,.16);
  --akid-text: #202123;
  --akid-muted: #6b7280;
  --akid-soft: #8e8ea0;
  --akid-accent: #202123;
  --akid-accent-2: #343541;
  --akid-accent-soft: rgba(0,0,0,.045);
  --akid-danger: #b42318;
  --akid-danger-soft: rgba(180,35,24,.09);
  --akid-warning: #b45309;
  --akid-warning-soft: rgba(180,83,9,.10);
  --akid-success: #3f3f46;
  --akid-success-soft: rgba(0,0,0,.045);
  --akid-shadow: 0 16px 48px rgba(0,0,0,.08);
  --akid-radius: 18px;
  --akid-radius-sm: 12px;

  width: 100%;
  min-height: min(720px, calc(100dvh - 120px));
  padding: 24px;
  display: grid;
  place-items: center;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--akid-text);
}

body.ak-theme-dark .ak-id-auth-shell,
body.ak-theme-dark .ak-id-profile,
.ak-id-auth-shell[data-theme="dark"],
.ak-id-profile[data-theme="dark"] {
  --akid-bg: #0d0d0d;
  --akid-panel: #111111;
  --akid-panel-2: #161616;
  --akid-panel-3: #1c1c1c;
  --akid-border: #2a2a2a;
  --akid-border-2: #343434;
  --akid-text: #efefef;
  --akid-muted: #8f8f8f;
  --akid-soft: #5f5f5f;
  --akid-accent: #e8ff47;
  --akid-accent-2: #d8ee3f;
  --akid-accent-soft: rgba(232,255,71,.08);
  --akid-danger: #fecaca;
  --akid-danger-soft: rgba(239,68,68,.13);
  --akid-warning: #facc15;
  --akid-warning-soft: rgba(250,204,21,.09);
  --akid-success: #e8ff47;
  --akid-success-soft: rgba(232,255,71,.08);
  --akid-shadow: 0 20px 64px rgba(0,0,0,.35);
}

.ak-id-auth-shell *,
.ak-id-profile * { box-sizing: border-box; }

.ak-id-auth-card,
.ak-id-profile-card {
  position: relative;
  width: min(100%, 520px);
  overflow: hidden;
  background: var(--akid-panel);
  border: 1px solid var(--akid-border);
  border-radius: 22px;
  padding: 20px;
  box-shadow: var(--akid-shadow);
  color: var(--akid-text);
}

body.ak-theme-dark .ak-id-auth-card,
body.ak-theme-dark .ak-id-profile-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(232,255,71,.055), transparent 30%),
    var(--akid-panel);
}

.ak-id-auth-brand {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 18px;
}

.ak-id-mark,
.ak-id-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--akid-panel-3);
  border: 1px solid var(--akid-border);
  color: var(--akid-text);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: -.04em;
}

body.ak-theme-dark .ak-id-mark,
body.ak-theme-dark .ak-id-avatar {
  background: var(--akid-accent);
  color: #0d0d0d;
  border-color: rgba(232,255,71,.2);
}

.ak-id-avatar {
  border-radius: 999px;
  font-size: 15px;
}

.ak-id-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--akid-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.ak-theme-dark .ak-id-kicker { color: var(--akid-accent); }

.ak-id-auth-card h1,
.ak-id-profile-card h1 {
  margin: 0 0 6px;
  color: var(--akid-text);
  font-size: clamp(25px, 4vw, 36px);
  line-height: 1.04;
  letter-spacing: -.04em;
  font-weight: 720;
}

.ak-id-auth-card h2 {
  margin: 10px 0 5px;
  color: var(--akid-text);
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: -.03em;
  text-align: center;
}

.ak-id-auth-card p,
.ak-id-profile-card p {
  margin: 0;
  color: var(--akid-muted);
  line-height: 1.5;
  font-size: 13px;
}

.ak-id-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--akid-border);
  border-radius: 13px;
  background: var(--akid-panel-2);
  margin-bottom: 14px;
}

.ak-id-tabs button {
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--akid-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 680;
  cursor: pointer;
}

.ak-id-tabs button.is-active {
  background: var(--akid-panel-3);
  color: var(--akid-text);
}

body.ak-theme-dark .ak-id-tabs button.is-active {
  color: var(--akid-accent);
}

.ak-id-form {
  display: none;
  flex-direction: column;
  gap: 11px;
}

.ak-id-form.is-active { display: flex; }

.ak-id-form label,
.ak-id-field-label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--akid-muted);
  font-size: 12px;
  font-weight: 720;
}

.ak-id-input {
  width: 100%;
  height: 46px;
  min-height: 46px;
  border-radius: 13px;
  border: 1px solid var(--akid-border);
  background: var(--akid-panel-2);
  color: var(--akid-text);
  padding: 0 13px;
  outline: none;
  font: inherit;
  font-size: 14px;
  line-height: 46px;
  box-sizing: border-box;
}

.ak-id-input::placeholder { color: var(--akid-soft); }
.ak-id-input:disabled { opacity: .82; background: var(--akid-panel-3); color: var(--akid-muted); }
.ak-id-input:focus { border-color: var(--akid-border-2); background: var(--akid-panel); box-shadow: 0 0 0 4px var(--akid-accent-soft); }

.ak-id-btn {
  width: 100%;
  min-height: 44px;
  border-radius: 13px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 760;
  border: 1px solid transparent;
  box-sizing: border-box;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.ak-id-btn:hover { transform: translateY(-1px); }
.ak-id-btn:disabled { opacity: .62; cursor: wait; transform: none; }

.ak-id-btn-primary {
  background: var(--akid-accent);
  color: #fff;
  border-color: var(--akid-accent);
}

body.ak-theme-dark .ak-id-btn-primary { color: #0d0d0d; }

.ak-id-btn-ghost {
  background: var(--akid-panel-2);
  color: var(--akid-text);
  border-color: var(--akid-border);
}

.ak-id-btn-ghost:hover { background: var(--akid-panel-3); border-color: var(--akid-border-2); }

.ak-id-btn-danger {
  background: var(--akid-danger-soft);
  color: var(--akid-danger);
  border-color: rgba(239,68,68,.20);
}

.ak-id-link {
  align-self: flex-start;
  color: var(--akid-muted);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 720;
}

.ak-id-link:hover { color: var(--akid-text); }
body.ak-theme-dark .ak-id-link:hover { color: var(--akid-accent); }

.ak-id-auth-message,
.ak-id-alert {
  margin-top: 13px;
  min-height: 19px;
  color: var(--akid-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.ak-id-auth-message.is-error,
.ak-id-alert-warning {
  color: var(--akid-danger);
  background: var(--akid-danger-soft);
  border: 1px solid rgba(239,68,68,.22);
  padding: 10px 12px;
  border-radius: 13px;
}

.ak-id-auth-message.is-success {
  color: var(--akid-success);
  background: var(--akid-success-soft);
  border: 1px solid var(--akid-border);
  padding: 10px 12px;
  border-radius: 13px;
}

.ak-id-welcome-box {
  display: grid;
  gap: 11px;
  place-items: center;
  padding: 15px;
  border: 1px solid var(--akid-border);
  border-radius: 18px;
  background: var(--akid-panel-2);
}

.ak-id-welcome-actions {
  width: 100%;
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.ak-id-coin-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--akid-panel-3);
  border: 1px solid var(--akid-border);
  color: var(--akid-text);
}

body.ak-theme-dark .ak-id-coin-pill {
  background: var(--akid-accent-soft);
  border-color: rgba(232,255,71,.18);
}

.ak-id-coin-pill span {
  font-size: 12px;
  color: var(--akid-muted);
  font-weight: 750;
}

.ak-id-coin-pill strong { color: var(--akid-text); }
body.ak-theme-dark .ak-id-coin-pill strong { color: var(--akid-accent); }

.ak-id-profile-editor {
  display: grid;
  gap: 13px;
  margin-top: 17px;
}

.ak-id-profile-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--akid-border);
  border-radius: 16px;
  background: var(--akid-panel-2);
}

.ak-id-profile-head strong {
  display: block;
  font-size: 16px;
  color: var(--akid-text);
}

.ak-id-profile-head span {
  display: block;
  margin-top: 3px;
  color: var(--akid-muted);
  font-size: 12.5px;
  word-break: break-all;
}

.ak-id-coin-card {
  display: grid;
  gap: 7px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--akid-border);
  background: var(--akid-panel-2);
}

body.ak-theme-dark .ak-id-coin-card {
  background: var(--akid-accent-soft);
  border-color: rgba(232,255,71,.16);
}

.ak-id-coin-card div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.ak-id-coin-card span {
  color: var(--akid-muted);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ak-id-coin-card strong {
  color: var(--akid-text);
  font-size: 30px;
  line-height: 1;
}

body.ak-theme-dark .ak-id-coin-card strong { color: var(--akid-accent); }

.ak-id-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

@media (max-width: 640px) {
  .ak-id-auth-shell,
  .ak-id-profile {
    padding: 10px;
    place-items: start;
    min-height: auto;
  }
  .ak-id-auth-card,
  .ak-id-profile-card {
    border-radius: 18px;
    padding: 16px;
  }
  .ak-id-auth-brand {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .ak-id-mark,
  .ak-id-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
}

/* AK ID Invite */
.ak-id-invite .ak-id-invite-card {
  width: min(100%, 620px);
}

.ak-id-invite-guest,
.ak-id-invite-user {
  margin-top: 16px;
  display: grid;
  gap: 13px;
}

.ak-id-invite-user[hidden],
.ak-id-invite-guest[hidden] {
  display: none !important;
}

.ak-id-invite-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ak-id-invite-reward strong {
  font-size: 22px;
}

@media (max-width: 640px) {
  .ak-id-invite-actions {
    grid-template-columns: 1fr;
  }
}


.ak-id-journal-box { margin: 14px 0; padding: 14px; border: 1px solid var(--akid-border); border-radius: 16px; background: var(--akid-panel-2); }
.ak-id-journal-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.ak-id-journal-head span { display:block; color:var(--akid-muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.ak-id-journal-head strong { display:block; margin-top:3px; color:var(--akid-text); font-size:14px; }
.ak-id-journal-list { display:grid; gap:8px; max-height:260px; overflow:auto; scrollbar-width:thin; }
.ak-id-journal-entry { border:1px solid var(--akid-border); border-radius:13px; background:var(--akid-panel); padding:10px; display:grid; gap:6px; }
.ak-id-journal-entry p { color:var(--akid-text); font-size:13px; }
.ak-id-journal-entry small { color:var(--akid-muted); font-size:11px; }
.ak-id-journal-entry button { justify-self:end; border:0; background:transparent; color:var(--akid-muted); cursor:pointer; font-size:12px; font-weight:700; }