:root {
  --ink: #eef4ff;
  --muted: #98a6bd;
  --line: rgba(255, 255, 255, 0.09);
  --surface: rgba(255, 255, 255, 0.055);
  --navy: #080d18;
  --blue: #6c9cff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px),
    var(--navy);
  background-size: 56px 56px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ambient {
  position: fixed;
  width: 36rem;
  height: 36rem;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .14;
  pointer-events: none;
}

.ambient-one { top: -18rem; left: -10rem; background: #2065ff; }
.ambient-two { right: -18rem; bottom: -20rem; background: #4b2bd6; }

.shell {
  position: relative;
  width: min(1180px, calc(100% - 48px));
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: -.02em;
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #08101e;
  background: linear-gradient(135deg, #a6c3ff, #5e91ff);
  box-shadow: 0 8px 24px rgba(78, 132, 255, .25);
  font-weight: 800;
}

.status {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #68d391;
  box-shadow: 0 0 0 4px rgba(104, 211, 145, .1);
}

.hero { padding: 88px 0 66px; }

.eyebrow {
  margin: 0 0 20px;
  color: #82a9ff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  max-width: 820px;
  font: 750 clamp(2.65rem, 6.3vw, 5.4rem)/1.03 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.055em;
}

h1 span { color: #778398; }

.intro {
  max-width: 560px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.portal-card {
  position: relative;
  min-height: 218px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  backdrop-filter: blur(14px);
  transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
}

.portal-card::before {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -90px;
  bottom: -110px;
  border-radius: 50%;
  background: var(--accent);
  filter: blur(60px);
  opacity: 0;
  transition: opacity .28s ease;
}

.portal-card:hover,
.portal-card:focus-visible {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent), transparent 55%);
  background: rgba(255, 255, 255, .075);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .22);
  outline: none;
}

.portal-card:hover::before,
.portal-card:focus-visible::before { opacity: .19; }

.card-decal { --accent: #719cff; }
.card-dispatch { --accent: #56c9b3; }
.card-parts { --accent: #b888ff; }
.card-store { --accent: #efa862; }
.card-site-1 { --accent: #719cff; }
.card-site-2 { --accent: #56c9b3; }
.card-site-3 { --accent: #b888ff; }
.card-site-4 { --accent: #efa862; }

.card-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 68%);
  border-radius: 15px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent), transparent 90%);
}

.card-icon svg {
  width: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.card-icon { font-weight: 800; }

.card-number {
  position: absolute;
  top: 30px;
  right: 30px;
  color: #5f6a7d;
  font: 600 .73rem ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .13em;
}

.card-content { display: flex; flex-direction: column; gap: 6px; }
.card-content strong { font: 700 1.28rem ui-sans-serif, system-ui, sans-serif; letter-spacing: -.02em; }
.card-content span { color: var(--muted); font-size: .9rem; }

.card-arrow {
  position: absolute;
  right: 28px;
  bottom: 27px;
  color: var(--accent);
  font-size: 1.25rem;
  transition: transform .28s ease;
}

.portal-card:hover .card-arrow { transform: translate(3px, -3px); }

footer {
  margin-top: auto;
  padding: 42px 0 36px;
  display: flex;
  justify-content: space-between;
  color: #657187;
  font-size: .78rem;
  letter-spacing: .02em;
}

@media (max-width: 700px) {
  .shell { width: min(100% - 30px, 1180px); }
  .topbar { height: 82px; }
  .status { display: none; }
  .hero { padding: 62px 0 44px; }
  h1 { font-size: clamp(2.45rem, 12vw, 4rem); }
  .intro { font-size: .96rem; }
  .portal-grid { grid-template-columns: 1fr; }
  .portal-card { min-height: 190px; padding: 24px; }
  .card-arrow { right: 24px; bottom: 23px; }
  footer { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

.sso-transfer { min-height:100vh; display:grid; place-items:center; background:#080d18; color:#eef4ff; }.sso-transfer form { padding:32px; text-align:center; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:rgba(255,255,255,.05); }.sso-transfer button { padding:11px 16px; color:#07101f; background:#8fb2ff; border:0; border-radius:9px; font-weight:700; }

button, input { font: inherit; }
button { cursor: pointer; }

.lock-button {
  padding: 10px 15px;
  color: #d8e3f7;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.message { margin-top: 22px; padding: 13px 16px; border-radius: 12px; font-size: .9rem; }
.message.error { color: #ffb8bd; background: rgba(220,55,70,.12); border: 1px solid rgba(255,100,110,.25); }
.message.success { color: #a7ebc1; background: rgba(50,180,110,.1); border: 1px solid rgba(90,220,145,.22); }

.auth-layout { flex: 1; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 80px; padding: 70px 0; }
.auth-copy h1 { margin: 0; }
.auth-card { padding: 32px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.055); box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.auth-card h2 { margin: 0 0 8px; font-size: 1.35rem; }
.auth-card > p { margin: 0 0 26px; color: var(--muted); font-size: .88rem; line-height: 1.55; }
label { display: block; margin: 16px 0 0; color: #aebbd0; font-size: .79rem; font-weight: 600; letter-spacing: .02em; }
input { width: 100%; margin-top: 8px; padding: 13px 14px; color: var(--ink); background: rgba(4,9,17,.65); border: 1px solid rgba(255,255,255,.11); border-radius: 10px; outline: none; }
input:focus { border-color: #6899ff; box-shadow: 0 0 0 3px rgba(104,153,255,.13); }
.primary-button { width: 100%; margin-top: 24px; padding: 14px; color: #07101f; font-weight: 750; background: linear-gradient(135deg,#aac4ff,#6595ff); border: 0; border-radius: 11px; }
.auth-link { display:block; margin-top:17px; color:#8faeff; text-align:center; text-decoration:none; font-size:.82rem; }
.auth-link:hover { text-decoration:underline; }
.recovery-banner { margin-top:22px; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:22px; color:#dfe9fa; background:rgba(239,168,98,.1); border:1px solid rgba(239,168,98,.3); border-radius:16px; }
.recovery-banner strong { display:block; margin-bottom:4px; }.recovery-banner p { margin:0 0 12px; color:#aeb9ca; font-size:.83rem; }.recovery-banner code { display:inline-block; padding:8px 10px; color:#ffc27f; background:rgba(0,0,0,.2); border-radius:7px; font-size:.88rem; letter-spacing:.08em; }
.copy-recovery-button { flex:0 0 auto; padding:11px 14px; color:#ffc27f; background:rgba(239,168,98,.08); border:1px solid rgba(239,168,98,.3); border-radius:9px; font-size:.78rem; font-weight:700; }

.hero.compact { padding: 60px 0 42px; }
.hero.compact h1 { font-size: clamp(2.6rem,5vw,4.3rem); }
.vault-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.vault-card { --accent:#719cff; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.vault-card.accent-2 { --accent:#56c9b3; }.vault-card.accent-3 { --accent:#b888ff; }.vault-card.accent-4 { --accent:#efa862; }
.card-heading { display:flex; gap:16px; align-items:flex-start; padding-bottom:20px; border-bottom:1px solid var(--line); }
.card-heading .card-number { position:static; width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent),transparent 65%); border-radius:12px; background:color-mix(in srgb,var(--accent),transparent 91%); }
.card-heading h2 { margin:0 0 5px; font-size:1.15rem; }
.card-heading a { color:var(--muted); font-size:.82rem; text-decoration:none; }.card-heading a span { color:var(--accent); }
.field-action { position:relative; display:flex; gap:7px; align-items:center; }
.field-action input { padding-right:12px; }
.field-action button { flex:0 0 auto; margin-top:8px; padding:12px 10px; color:#aebbd0; background:rgba(255,255,255,.055); border:1px solid var(--line); border-radius:9px; font-size:.75rem; }
.save-button { width:100%; margin-top:18px; padding:11px; color:var(--accent); background:color-mix(in srgb,var(--accent),transparent 91%); border:1px solid color-mix(in srgb,var(--accent),transparent 68%); border-radius:10px; font-weight:700; font-size:.82rem; }

.view-tabs { display:flex; gap:5px; width:max-content; margin-top:30px; padding:5px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.035); }
.view-tabs a { padding:9px 16px; color:var(--muted); border-radius:8px; text-decoration:none; font-size:.84rem; font-weight:700; }
.view-tabs a.active { color:var(--ink); background:rgba(255,255,255,.09); box-shadow:0 4px 12px rgba(0,0,0,.16); }
.credentials-hero { padding:52px 0 34px; }
.credentials-hero h1 { font-size:clamp(2.5rem,5vw,4.2rem); }
.credentials-list { display:grid; gap:14px; }
.credential-row { --accent:#719cff; display:grid; grid-template-columns:190px 1fr; gap:28px; padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.credential-row.accent-2 { --accent:#56c9b3; }.credential-row.accent-3 { --accent:#b888ff; }.credential-row.accent-4 { --accent:#efa862; }
.credential-title { display:flex; gap:13px; align-items:flex-start; padding-top:8px; }
.credential-title .card-number { position:static; width:39px; height:39px; display:grid; place-items:center; flex:0 0 auto; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent),transparent 65%); border-radius:11px; background:color-mix(in srgb,var(--accent),transparent 91%); }
.credential-title h2 { margin:1px 0 5px; font-size:1rem; }
.credential-title div > span { color:var(--muted); font-size:.72rem; }
.credential-form { display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end; }
.credential-form label { margin:0; }
.credential-actions { display:flex; gap:7px; }
.credential-actions .save-button, .delete-button { width:auto; white-space:nowrap; margin-top:0; padding:12px 14px; }
.delete-button { color:#ff9ca4; background:rgba(220,55,70,.08); border:1px solid rgba(255,100,110,.2); border-radius:10px; font-weight:700; font-size:.78rem; }

.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; }
.notepad { overflow:hidden; border:1px solid rgba(255,255,255,.11); border-radius:20px; background:rgba(13,20,32,.86); box-shadow:0 28px 70px rgba(0,0,0,.25); }
.notepad-bar { min-height:52px; padding:0 20px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; color:#8997ac; border-bottom:1px solid var(--line); font-size:.78rem; font-weight:700; letter-spacing:.03em; }
.window-dots { display:flex; gap:7px; }.window-dots span { width:8px; height:8px; border-radius:50%; background:#ff6b72; }.window-dots span:nth-child(2) { background:#efb54c; }.window-dots span:nth-child(3) { background:#54c489; }
.encrypted-badge { justify-self:end; padding:6px 9px; color:#78dca2; background:rgba(70,200,125,.08); border:1px solid rgba(90,220,145,.18); border-radius:999px; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; }
.notepad textarea { width:100%; min-height:390px; margin:0; padding:28px 30px; resize:vertical; color:#dfe9fa; background:transparent; border:0; border-radius:0; outline:0; font:500 .95rem/1.75 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; caret-color:#79a4ff; }
.notepad textarea::placeholder { color:#536076; }
.notepad textarea:focus { box-shadow:inset 0 0 0 1px rgba(105,153,255,.28); }
.notepad-footer { min-height:68px; padding:12px 16px 12px 22px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:#68758a; border-top:1px solid var(--line); font-size:.72rem; }
.notepad-actions { display:flex; gap:8px; }
.notepad-actions button { padding:10px 13px; border-radius:9px; font-size:.76rem; font-weight:700; }
.copy-note-button { color:#b8c4d8; background:rgba(255,255,255,.05); border:1px solid var(--line); }
.save-note-button { color:#091221; background:linear-gradient(135deg,#a9c4ff,#6898ff); border:0; }

@media (max-width: 800px) {
  .auth-layout { grid-template-columns:1fr; gap:38px; padding:52px 0; }
  .vault-grid { grid-template-columns:1fr; }
  .credential-row { grid-template-columns:1fr; gap:18px; }
  .credential-form { grid-template-columns:1fr; }
  .credential-actions { display:grid; grid-template-columns:1fr 1fr; }
  .credential-actions .save-button, .delete-button { width:100%; }
  .notepad-bar { grid-template-columns:1fr 1fr; }.notepad-bar > span:nth-child(2) { display:none; }
  .notepad textarea { min-height:360px; padding:22px 20px; }
  .notepad-footer { align-items:flex-start; flex-direction:column; }
  .notepad-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .notepad-actions .save-note-button { grid-column:1/-1; grid-row:1; }
  .recovery-banner { align-items:flex-start; flex-direction:column; }.copy-recovery-button { width:100%; }
}