:root {
    --kelvros-bg: #070a10;
    --kelvros-bg-soft: #0e1420;
    --kelvros-surface: #ffffff;
    --kelvros-surface-soft: #f7f8fb;
    --kelvros-card: #ffffff;
    --kelvros-ink: #101623;
    --kelvros-muted: #637083;
    --kelvros-line: rgba(16, 22, 35, .10);
    --kelvros-line-dark: rgba(255,255,255,.10);
    --kelvros-accent: #0f766e;
    --kelvros-accent-2: #14b8a6;
    --kelvros-accent-dark: #134e4a;
    --kelvros-warning-bg: #f1f7f7;
    --kelvros-warning-line: #c9e8e5;
    --kelvros-danger: #b42318;
    --kelvros-radius: 1.35rem;
    --kelvros-shadow: 0 20px 60px rgba(15, 23, 42, .10);
    --kelvros-shadow-soft: 0 10px 34px rgba(15, 23, 42, .07);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    color: var(--kelvros-ink);
    background:
        radial-gradient(circle at 9% 0%, rgba(20, 184, 166, .10), transparent 25rem),
        radial-gradient(circle at 92% 7%, rgba(15, 118, 110, .08), transparent 22rem),
        #f5f6f8;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--kelvros-accent); }
a:hover { color: var(--kelvros-accent-dark); }

.kv-navbar {
    background: rgba(7, 10, 16, .96) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--kelvros-line-dark);
}

.kv-brand-mark {
    width: 32px;
    height: 32px;
    margin-right: .55rem;
}

.kv-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(20, 184, 166, .28), transparent 23rem),
        radial-gradient(circle at 84% 14%, rgba(15, 118, 110, .24), transparent 22rem),
        linear-gradient(135deg, #070a10 0%, #0d1320 56%, #101722 100%);
    color: #fff;
}

.kv-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, black, transparent 82%);
    pointer-events: none;
}

.kv-hero > .container { position: relative; z-index: 1; }

.kv-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.88);
    border-radius: 999px;
    padding: .45rem .85rem;
    font-size: .86rem;
    letter-spacing: .015em;
}

.kv-title {
    letter-spacing: -.058em;
    line-height: .95;
}

.kv-lead {
    color: rgba(255,255,255,.74);
    max-width: 45rem;
}

.kv-card {
    border: 1px solid var(--kelvros-line);
    border-radius: var(--kelvros-radius);
    box-shadow: var(--kelvros-shadow-soft);
    overflow: hidden;
}

.kv-card-dark {
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    border-radius: var(--kelvros-radius);
    box-shadow: 0 30px 80px rgba(0,0,0,.30);
}

.kv-input, .form-control {
    border-radius: .95rem;
    min-height: 48px;
    border-color: rgba(16, 22, 35, .12);
}

.form-control:focus {
    border-color: rgba(20, 184, 166, .55);
    box-shadow: 0 0 0 .22rem rgba(20, 184, 166, .16);
}

.kv-btn, .btn {
    border-radius: .95rem;
    font-weight: 650;
}

.btn-primary {
    background: linear-gradient(135deg, var(--kelvros-accent-dark), var(--kelvros-accent-2));
    border: 0;
    box-shadow: 0 12px 26px rgba(20, 184, 166, .18);
}

.btn-primary:hover, .btn-primary:focus {
    filter: brightness(1.04);
}

.btn-outline-secondary {
    border-color: rgba(16, 22, 35, .16);
    color: #2f3a4d;
}

.btn-outline-secondary:hover {
    background: #111827;
    border-color: #111827;
}

.kv-feature {
    border: 1px solid var(--kelvros-line);
    border-radius: 1.15rem;
    padding: 1.2rem;
    height: 100%;
    background: rgba(255,255,255,.76);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .045);
}

.kv-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: .95rem;
    background: rgba(20, 184, 166, .11);
    color: var(--kelvros-accent);
    margin-bottom: .9rem;
}

.kv-section-title { letter-spacing: -.035em; }

.kv-link-box {
    background: #f7faf9;
    border: 1px solid rgba(20, 184, 166, .18);
    border-radius: 1rem;
    padding: .8rem;
}

.kv-message-card {
    border: 1px solid var(--kelvros-line);
    border-radius: 1.15rem;
    box-shadow: 0 12px 32px rgba(18, 22, 34, .06);
}

.kv-empty {
    border: 1px dashed rgba(16, 22, 35, .18);
    background: rgba(255,255,255,.72);
    border-radius: 1.15rem;
    padding: 2rem;
    text-align: center;
    color: var(--kelvros-muted);
}

.kv-security-panel {
    background: linear-gradient(180deg, #f3faf9, #edf7f6);
    border: 1px solid var(--kelvros-warning-line);
    border-radius: 1.1rem;
    padding: 1rem;
    color: #182130;
}

.kv-security-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .35rem 0;
    border-bottom: 1px solid rgba(15, 118, 110, .10);
}

.kv-security-row:last-of-type { border-bottom: 0; }

.kv-security-label {
    color: #334155;
    font-weight: 750;
}

.kv-security-value {
    color: #0f172a;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.kv-security-note {
    margin: .85rem 0 0;
    padding-top: .85rem;
    border-top: 1px solid rgba(15, 118, 110, .14);
    color: #475569;
    line-height: 1.55;
}

.kv-security-note strong { color: var(--kelvros-accent-dark); }

.kv-admin-body {
    background:
        radial-gradient(circle at 10% 0%, rgba(20, 184, 166, .08), transparent 22rem),
        #f5f6f8 !important;
}

.kv-admin-card,
.kv-admin-body .card {
    border: 1px solid var(--kelvros-line);
    border-radius: 1.05rem;
    box-shadow: var(--kelvros-shadow-soft);
}

.kv-admin-body .card-header {
    background: #f8fafc;
    border-bottom-color: var(--kelvros-line);
    font-weight: 750;
}

.alert {
    border-radius: 1rem;
    border-width: 1px;
}

.alert-info {
    background: #eef8f7;
    border-color: #c9e8e5;
    color: #134e4a;
}

.alert-warning {
    background: #fff8eb;
    border-color: #fde2ad;
    color: #7a4d00;
}

.alert-danger {
    background: #fff1f0;
    border-color: #ffd2cf;
    color: var(--kelvros-danger);
}

.alert-success {
    background: #eefaf5;
    border-color: #bdebd7;
    color: #075e43;
}

.kv-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    width: min(360px, calc(100vw - 2rem));
}

.kv-toast {
    border-radius: 1rem;
    padding: .95rem 1rem;
    color: #fff;
    background: #111827;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .24);
    animation: kv-toast-in .18s ease-out;
    font-weight: 650;
}

.kv-toast-success { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.kv-toast-error { background: linear-gradient(135deg, #991b1b, #ef4444); }

@keyframes kv-toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.kv-footer {
    background: #070a10;
    color: rgba(255,255,255,.76);
}

.kv-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.kv-footer a:hover { color: #fff; }

.kv-small-muted { color: var(--kelvros-muted); }

@media (max-width: 767px) {
    .kv-title { font-size: 3.1rem; }
    .kv-hero { text-align: center; }
    .kv-security-row { display: block; }
    .kv-security-value { display: block; margin-top: .15rem; }
}

/* Kelvros V1.8 anonymous spaces */
.kv-input-light {
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .12);
    background: rgba(255, 255, 255, .86);
    color: #0f172a;
    box-shadow: none;
}
.kv-input-light:focus {
    border-color: rgba(20, 184, 166, .55);
    box-shadow: 0 0 0 .22rem rgba(20, 184, 166, .12);
}
.kv-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: .45rem .8rem;
    font-size: .82rem;
    font-weight: 700;
    color: #0f766e;
    background: rgba(20, 184, 166, .12);
    border: 1px solid rgba(20, 184, 166, .22);
    white-space: nowrap;
}
.kv-pill-muted {
    color: #64748b;
    background: rgba(100, 116, 139, .12);
    border-color: rgba(100, 116, 139, .22);
}
.kv-space-avatar {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f172a, #134e4a);
    color: #f8fafc;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: .03em;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .18);
}
.kv-rules-box {
    border: 1px solid rgba(20, 184, 166, .18);
    border-radius: 18px;
    background: rgba(20, 184, 166, .07);
    padding: 1rem;
    color: #334155;
}

/* Kelvros V1.9.1 polish */
.kv-field-meta {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .38rem;
    font-size: .76rem;
    color: var(--kelvros-muted);
}

.kv-field-meta [data-count-for] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kv-table-soft {
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(15, 23, 42, .08);
    margin-bottom: 0;
}

.kv-table-soft thead th {
    color: #64748b;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .045em;
    border-bottom-color: rgba(15, 23, 42, .10);
}

.kv-status-badge {
    border-radius: 999px;
    padding: .36rem .55rem;
    font-weight: 750;
    text-transform: capitalize;
}

.kv-status-active {
    color: #0f766e !important;
    background: rgba(20, 184, 166, .13) !important;
    border: 1px solid rgba(20, 184, 166, .22);
}

.kv-status-used {
    color: #475569 !important;
    background: rgba(100, 116, 139, .13) !important;
    border: 1px solid rgba(100, 116, 139, .20);
}

.kv-status-revoked,
.kv-status-expired {
    color: #991b1b !important;
    background: rgba(239, 68, 68, .10) !important;
    border: 1px solid rgba(239, 68, 68, .18);
}

#trusted_access_section .kv-card {
    border-color: rgba(20, 184, 166, .16);
}

@media (max-width: 575px) {
    .kv-field-meta { font-size: .72rem; }
    .kv-link-box .btn { width: 100%; }
}

/* Kelvros V2.0 private network foundations */
.kv-network-card,
.kv-contact-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  padding: 1rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
}
.kv-mini-avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f172a, #134e4a);
  color: #fff;
  font-weight: 800;
  flex: 0 0 42px;
}
.kv-private-note {
  border-left: 3px solid rgba(20, 184, 166, 0.35);
  padding-left: .75rem;
  color: #475569;
}
.min-width-0 { min-width: 0; }


/* Kelvros V2.0.1 polish fixes */
.kv-private-network-form .kv-input-light::placeholder {
  color: #64748b;
  opacity: .9;
}
.kv-private-network-form textarea.kv-input-light {
  min-height: 78px;
  resize: vertical;
}
#hide_new_credentials {
  border-color: rgba(15, 23, 42, 0.16);
  color: #334155;
  background: rgba(255,255,255,0.55);
}
#hide_new_credentials:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
}

/* Kelvros V2.0.2 credentials popup */
.kv-credential-modal {
  border: 1px solid rgba(20, 184, 166, 0.22);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}
.kv-credential-box {
  border-radius: 18px;
  border: 1px solid rgba(20, 184, 166, 0.22);
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.88), rgba(240, 253, 250, 0.74));
  padding: 1rem;
}
.kv-warning-soft {
  border-radius: 16px;
  border: 1px solid rgba(245, 158, 11, 0.22);
  background: rgba(255, 251, 235, 0.78);
  color: #334155;
  padding: .9rem 1rem;
  line-height: 1.55;
}
.kv-passcode-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: .02em;
  word-break: break-all;
  text-align: right;
}
@media (max-width: 575.98px) {
  .kv-passcode-value { text-align: left; }
}

/* Kelvros V2.1.1 production cleanup */
.kv-card,
.kv-network-card,
.kv-contact-card {
  overflow-wrap: anywhere;
}

.kv-card .form-label {
  font-weight: 650;
  color: #0f172a;
}

.kv-small-muted {
  line-height: 1.55;
}

.kv-private-network-form .form-control,
.kv-private-network-form textarea,
.kv-private-network-form input {
  width: 100%;
}

.kv-private-network-form textarea::placeholder,
.kv-private-network-form input::placeholder {
  text-overflow: ellipsis;
}

.kv-network-card .btn,
.kv-contact-card .btn {
  white-space: nowrap;
}

.kv-credential-modal .modal-body {
  word-break: normal;
}

.kv-credential-modal .kv-security-row {
  align-items: flex-start;
}

.kv-alert-readable {
  line-height: 1.55;
}

@media (max-width: 991.98px) {
  .kv-hero .display-4 {
    font-size: clamp(2.25rem, 8vw, 3.35rem);
  }

  .kv-card .card-body.p-md-5 {
    padding: 1.5rem !important;
  }
}

@media (max-width: 767.98px) {
  .kv-card-dark,
  .kv-card .card-body,
  .kv-network-card,
  .kv-contact-card {
    border-radius: 1rem;
  }

  .kv-pill {
    width: fit-content;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  .kv-private-network-form .btn,
  #save_space_profile,
  #save_private_space {
    width: 100%;
  }

  .kv-network-card .d-flex,
  .kv-contact-card .d-flex {
    min-width: 0;
  }
}

@media (max-width: 575.98px) {
  body {
    background:
      radial-gradient(circle at 10% 0%, rgba(20, 184, 166, .08), transparent 16rem),
      #f5f6f8;
  }

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .kv-hero {
    margin-bottom: 1.5rem !important;
  }

  .kv-hero-badge {
    white-space: normal;
    justify-content: center;
    text-align: center;
  }

  .kv-card .card-body {
    padding: 1.25rem !important;
  }

  .kv-security-row {
    gap: .25rem;
  }

  .kv-security-value {
    max-width: 100%;
  }

  .modal-dialog {
    margin: .75rem;
  }
}