:root {
      --bg: #eef1f4;
      --panel: #ffffff;
      --text: #17212b;
      --muted: #687582;
      --blue: #1f5eff;
      --blue-dark: #1748c7;
      --red: #e32636;
      --border: #dfe5eb;
      --shadow: 0 18px 45px rgba(21, 34, 50, 0.12);
      --radius: 18px;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: Inter, Arial, Helvetica, sans-serif;
      background:
        radial-gradient(circle at top left, rgba(31,94,255,.10), transparent 34%),
        linear-gradient(135deg, #f7f9fb, #e9edf2);
      color: var(--text);
      min-height: 100vh;
    }

    button, input { font: inherit; }

    .hidden { display: none !important; }

    .login-page {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
    }

    .login-brand {
      padding: 70px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background:
        linear-gradient(rgba(12,25,45,.82), rgba(12,25,45,.88)),
        url('https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=1600&q=80') center/cover;
      color: white;
    }

    .brand-mark {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-weight: 800;
      letter-spacing: .5px;
      font-size: 22px;
    }

    .brand-icon {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--blue), var(--red));
      display: grid;
      place-items: center;
      font-size: 24px;
      box-shadow: 0 10px 25px rgba(0,0,0,.2);
    }

    .login-brand h1 {
      font-size: clamp(44px, 6vw, 76px);
      line-height: .98;
      max-width: 760px;
      margin: 0 0 24px;
    }

    .login-brand p {
      font-size: 20px;
      color: rgba(255,255,255,.78);
      max-width: 660px;
      line-height: 1.6;
    }

    .login-panel {
      display: grid;
      place-items: center;
      padding: 40px;
    }

    .login-card {
      width: min(100%, 460px);
      background: rgba(255,255,255,.93);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.8);
      padding: 38px;
      border-radius: 24px;
      box-shadow: var(--shadow);
    }

    .login-card h2 {
      margin: 0 0 8px;
      font-size: 32px;
    }

    .login-card .subtext {
      color: var(--muted);
      margin-bottom: 28px;
    }

    .field {
      margin-bottom: 18px;
    }

    .field label {
      display: block;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .field input {
      width: 100%;
      height: 52px;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 0 14px;
      outline: none;
      transition: .2s;
      background: white;
    }

    .field input:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 4px rgba(31,94,255,.10);
    }

    .login-button {
      width: 100%;
      border: 0;
      border-radius: 12px;
      height: 54px;
      background: linear-gradient(135deg, var(--blue), var(--blue-dark));
      color: white;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 12px 25px rgba(31,94,255,.25);
    }

    .login-note {
      text-align: center;
      color: var(--muted);
      font-size: 13px;
      margin-top: 18px;
    }

    .portal {
      min-height: 100vh;
    }

    .topbar {
      height: 78px;
      padding: 0 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255,255,255,.92);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 5;
      backdrop-filter: blur(10px);
    }

    .topbar-left {
      display: flex;
      align-items: center;
      gap: 14px;
      font-weight: 800;
    }

    .topbar-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .user-pill {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: white;
    }

    .avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--blue), var(--red));
      color: white;
      display: grid;
      place-items: center;
      font-weight: 800;
    }

    .logout {
      border: 0;
      background: #fff0f1;
      color: var(--red);
      padding: 11px 16px;
      border-radius: 10px;
      font-weight: 800;
      cursor: pointer;
    }

    .container {
      width: min(1280px, calc(100% - 40px));
      margin: 0 auto;
      padding: 42px 0 70px;
    }

    .hero {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 24px;
      margin-bottom: 28px;
    }

    .hero h1 {
      font-size: clamp(34px, 5vw, 54px);
      margin: 0 0 10px;
      letter-spacing: -1.5px;
    }

    .hero p {
      color: var(--muted);
      margin: 0;
      font-size: 17px;
    }

    .status {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      background: #eaf8ef;
      color: #147a3b;
      border: 1px solid #ccebd7;
      padding: 10px 14px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 14px;
      white-space: nowrap;
    }

    .status-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #26a658;
      box-shadow: 0 0 0 5px rgba(38,166,88,.10);
    }

    .apps-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 20px;
    }

    .app-card {
      position: relative;
      display: block;
      text-decoration: none;
      color: inherit;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px;
      min-height: 205px;
      box-shadow: 0 9px 25px rgba(20, 35, 55, .06);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
      overflow: hidden;
    }

    .app-card::after {
      content: "";
      position: absolute;
      width: 90px;
      height: 90px;
      right: -34px;
      bottom: -34px;
      border-radius: 50%;
      background: rgba(31,94,255,.06);
    }

    .app-card:hover {
      transform: translateY(-6px);
      border-color: rgba(31,94,255,.35);
      box-shadow: 0 20px 38px rgba(20,35,55,.12);
    }

    .app-logo {
      width: 64px;
      height: 64px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      font-size: 30px;
      color: white;
      font-weight: 800;
      margin-bottom: 20px;
      box-shadow: 0 12px 24px rgba(0,0,0,.12);
    }

    .app-card h3 {
      margin: 0 0 8px;
      font-size: 19px;
    }

    .app-card p {
      margin: 0;
      color: var(--muted);
      line-height: 1.45;
      font-size: 14px;
    }

    .launch {
      position: absolute;
      right: 18px;
      top: 18px;
      color: var(--muted);
      font-weight: 900;
    }

    .blue { background: linear-gradient(135deg,#2563eb,#1d4ed8); }
    .red { background: linear-gradient(135deg,#ef4444,#b91c1c); }
    .green { background: linear-gradient(135deg,#22c55e,#15803d); }
    .purple { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
    .orange { background: linear-gradient(135deg,#f59e0b,#c2410c); }
    .cyan { background: linear-gradient(135deg,#06b6d4,#0e7490); }
    .slate { background: linear-gradient(135deg,#64748b,#334155); }
    .pink { background: linear-gradient(135deg,#ec4899,#be185d); }
    .teal { background: linear-gradient(135deg,#14b8a6,#0f766e); }
    .indigo { background: linear-gradient(135deg,#6366f1,#3730a3); }

    .footer {
      color: var(--muted);
      font-size: 13px;
      text-align: center;
      padding-top: 38px;
    }

    @media (max-width: 1100px) {
      .apps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (max-width: 820px) {
      .login-page { grid-template-columns: 1fr; }
      .login-brand { display: none; }
      .apps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hero { align-items: flex-start; flex-direction: column; }
      .user-pill .user-text { display: none; }
    }

    @media (max-width: 560px) {
      .topbar { padding: 0 16px; }
      .container { width: min(100% - 24px, 1280px); }
      .apps-grid { grid-template-columns: 1fr; }
      .login-panel { padding: 18px; }
      .login-card { padding: 28px 22px; }
    }
  
.error{color:#c62828;font-size:13px;margin-top:6px}.remember{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;margin:0 0 18px}.remember input{width:auto;height:auto;margin:0}.topbar form{margin:0}.user-pill small{color:var(--muted)}.empty-state{grid-column:1/-1;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:40px;text-align:center;color:var(--muted)}

/* Public landing page */
.landing-page { min-height: 100vh; }
.landing-nav {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.landing-brand {
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  font-size: 21px;
  font-weight: 900;
}
.landing-actions { display: flex; align-items: center; gap: 12px; }
.landing-actions form { margin: 0; }
.nav-link { color: var(--text); text-decoration: none; font-weight: 750; padding: 11px 8px; }
.nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 11px;
  padding: 12px 18px;
  background: var(--blue);
  color: white;
  text-decoration: none;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(31,94,255,.20);
}
.nav-button.secondary { background: #fff0f1; color: var(--red); box-shadow: none; }
.landing-hero {
  width: min(1280px, calc(100% - 40px));
  margin: 28px auto 82px;
  padding: 70px;
  border-radius: 30px;
  min-height: 590px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: 64px;
  color: white;
  background:
    radial-gradient(circle at 85% 15%, rgba(31,94,255,.58), transparent 30%),
    linear-gradient(135deg, #0d1728 0%, #172b4c 55%, #10213b 100%);
  box-shadow: 0 30px 70px rgba(13,23,40,.22);
  overflow: hidden;
}
.eyebrow {
  display: inline-block;
  color: var(--blue);
  font-size: 13px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 900;
  margin-bottom: 15px;
}
.eyebrow.light { color: #a9c2ff; }
.landing-hero .eyebrow { color: #a9c2ff; }
.landing-hero h1 {
  margin: 0 0 24px;
  font-size: clamp(46px, 5.8vw, 76px);
  line-height: .98;
  letter-spacing: -3px;
  max-width: 680px;
}
.landing-hero p {
  margin: 0;
  max-width: 650px;
  color: rgba(255,255,255,.75);
  font-size: 19px;
  line-height: 1.7;
}
.hero-buttons { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 13px; }
.primary-cta, .secondary-cta, .banner-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 900;
}
.primary-cta { background: linear-gradient(135deg, var(--blue), #477dff); color: white; box-shadow: 0 14px 30px rgba(31,94,255,.32); }
.secondary-cta { color: white; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07); }
.landing-preview {
  background: rgba(255,255,255,.96);
  color: var(--text);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 25px 60px rgba(0,0,0,.28);
  transform: rotate(1.2deg);
}
.preview-top { display: flex; align-items: center; gap: 10px; padding: 4px 4px 18px; font-size: 14px; font-weight: 850; }
.preview-dot { width: 10px; height: 10px; border-radius: 50%; background: #25ad5f; box-shadow: 0 0 0 5px rgba(37,173,95,.12); }
.preview-status { margin-left: auto; color: #168147; background: #e9f8ef; border-radius: 999px; padding: 7px 10px; font-size: 12px; }
.preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.preview-card { min-height: 115px; border: 1px solid var(--border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; background: #fff; }
.preview-icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: white; font-size: 18px; font-weight: 900; }
.preview-card strong { font-size: 14px; }
.landing-section { width: min(1280px, calc(100% - 40px)); margin: 0 auto 82px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 30px; }
.section-heading h2 { margin: 0; font-size: clamp(34px, 4vw, 50px); letter-spacing: -1.8px; }
.section-heading p { margin: 0; max-width: 540px; color: var(--muted); line-height: 1.65; }
.landing-apps-grid .app-card { min-height: 230px; }
.app-domain { display: block; margin-top: 18px; font-size: 12px; color: var(--blue); font-weight: 800; overflow-wrap: anywhere; }
.landing-login-banner {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto 40px;
  padding: 46px 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-radius: 24px;
  color: white;
  background: linear-gradient(135deg, #162848, #1f5eff);
  box-shadow: 0 20px 50px rgba(31,94,255,.20);
}
.landing-login-banner h2 { margin: 0 0 10px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -1.5px; }
.landing-login-banner p { margin: 0; color: rgba(255,255,255,.75); }
.banner-button { background: white; color: var(--blue); white-space: nowrap; }
.landing-footer { width: min(1280px, calc(100% - 40px)); margin: 0 auto; padding: 26px 0 34px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 13px; }

@media (max-width: 980px) {
  .landing-hero { grid-template-columns: 1fr; padding: 52px 42px; }
  .landing-preview { transform: none; }
  .section-heading { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 680px) {
  .landing-nav { min-height: 72px; }
  .nav-link { display: none; }
  .landing-hero { width: min(100% - 24px, 1280px); margin-top: 12px; padding: 40px 24px; border-radius: 22px; min-height: auto; }
  .landing-hero h1 { font-size: 46px; letter-spacing: -2px; }
  .landing-hero p { font-size: 17px; }
  .preview-grid { grid-template-columns: 1fr; }
  .landing-section, .landing-login-banner, .landing-footer { width: min(100% - 24px, 1280px); }
  .landing-login-banner { align-items: flex-start; flex-direction: column; padding: 34px 24px; }
  .landing-footer { flex-direction: column; }
}

/* Account settings */
.account-button { padding: 10px 14px; font-size: 13px; box-shadow: none; }
.settings-card {
  width: min(760px, 100%);
  margin: 0 auto;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 36px;
  box-shadow: var(--shadow);
}
.settings-heading h1 { margin: 4px 0 10px; font-size: clamp(34px, 5vw, 48px); }
.settings-heading p { color: var(--muted); line-height: 1.6; margin: 0 0 28px; }
.eyebrow { display: inline-block; color: var(--blue); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.settings-form .field { margin-bottom: 20px; }
.settings-form small { display:block; color:var(--muted); margin-top:7px; line-height:1.4; }
.settings-divider { border-top:1px solid var(--border); margin: 28px 0 20px; padding-top: 20px; font-weight: 800; color: var(--text); }
.settings-submit { margin-top: 4px; }
.success { background:#eaf8ef; color:#147a3b; border:1px solid #ccebd7; padding:12px 14px; border-radius:12px; margin-bottom:20px; }
.error-box { background:#fff0f1; color:#a51f2a; border:1px solid #ffd1d5; padding:12px 14px; border-radius:12px; margin-bottom:20px; }
.error-box ul { margin:8px 0 0 18px; }
@media (max-width: 560px) {
  .settings-card { padding: 26px 20px; }
  .account-button { display: none; }
}

.mail-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 28px;
  padding: 24px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 30px rgba(21,34,50,.07);
}
.mail-status-label, .eyebrow {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--blue);
}
.mail-status-card h2 { margin: 5px 0 7px; font-size: 22px; }
.mail-status-card p { margin: 0; color: var(--muted); max-width: 760px; line-height: 1.55; }
.nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--blue);
  background: #eef3ff;
  border: 1px solid #d7e1ff;
  padding: 11px 16px;
  border-radius: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.narrow-container { max-width: 900px; }
.settings-card {
  background: rgba(255,255,255,.94);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 34px;
  box-shadow: var(--shadow);
}
.settings-card h1 { margin: 7px 0 10px; font-size: 38px; }
.settings-intro { color: var(--muted); line-height: 1.6; margin: 0 0 24px; }
.smtp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 24px 0; }
.smtp-grid > div { border: 1px solid var(--border); border-radius: 13px; padding: 15px; background: #fbfcfd; }
.smtp-grid span { display:block; color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.smtp-grid strong { overflow-wrap: anywhere; }
.test-form { border-top: 1px solid var(--border); padding-top: 24px; }
.alert { padding: 13px 15px; border-radius: 12px; margin: 0 0 18px; font-weight: 700; }
.alert.success { background: #eaf8ef; color: #147a3b; border: 1px solid #ccebd7; }
.alert.error { background: #fff0f1; color: #a91f2c; border: 1px solid #ffd2d6; }
.form-error { color: var(--red); display:block; margin-top:6px; }
.setup-note { margin-top: 24px; padding: 18px; background: #f7f9fb; border: 1px solid var(--border); border-radius: 14px; color: var(--muted); line-height: 1.6; }
.setup-note p { margin: 7px 0 0; }
.setup-note code, .settings-intro code { background: #edf1f5; padding: 2px 5px; border-radius: 5px; }
@media (max-width: 760px) {
  .mail-status-card { align-items: flex-start; flex-direction: column; }
  .smtp-grid { grid-template-columns: 1fr; }
  .settings-card { padding: 22px; }
  .settings-card h1 { font-size: 30px; }
}

/* Admin SMTP configuration form */
.smtp-form { display:grid; gap:18px; max-width:820px; }
.smtp-form label { display:grid; gap:7px; color:var(--text); font-weight:800; }
.smtp-form input, .smtp-form select { width:100%; box-sizing:border-box; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:#fff; color:var(--text); font:inherit; }
.smtp-form .form-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.smtp-form .nav-button { cursor:pointer; border:0; }