:root { color-scheme: light; --bg:#f4f8f7; --surface:rgba(255,255,255,.72); --panel:#303740; --panel-2:#343b44; --text:#071d25; --muted:#6f8190; --blue:#48a2ff; --line:#dbe7eb; --green:#16b76a; --shadow:0 18px 36px rgba(18,32,40,.12); }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; font-family:Inter,"Segoe UI",Arial,sans-serif; color:var(--text); background:#f4f8f7; }
.sidebar { position:fixed; inset:0 auto 0 0; width:276px; padding:28px 16px; background:rgba(255,255,255,.64); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:30px; }
.brand { display:flex; justify-content:center; align-items:center; min-height:74px; }
.brand img { width:190px; max-height:82px; object-fit:contain; }
nav { display:grid; gap:12px; }
nav a { color:#192630; text-decoration:none; height:54px; display:flex; align-items:center; padding:0 18px; border-radius:20px; font-weight:800; }
nav a.active, nav a:hover { color:#fff; background:linear-gradient(105deg,#303740,#343b44); box-shadow:14px 18px 32px rgba(16,24,32,.22); }
.userbox { margin-top:auto; display:grid; gap:10px; color:#31404a; font-weight:800; text-align:center; justify-items:center; }
.userbox a { color:#1768b7; text-decoration:none; }
button { border:0; border-radius:14px; padding:12px 18px; background:#48a2ff; color:white; font-weight:900; cursor:pointer; box-shadow:0 10px 22px rgba(72,162,255,.25); } .logout-button { background:#fff1f1; color:#d12f3f; box-shadow:none; border:1px solid #ffd1d6; }
.main { margin-left:276px; padding:36px 48px; }
.page-title { display:flex; align-items:center; gap:20px; margin-bottom:64px; }
.page-title.compact { margin-bottom:28px; }
.page-title span { width:6px; height:32px; border-radius:8px; background:var(--blue); box-shadow:0 0 18px rgba(72,162,255,.9); }
h1 { margin:0; font-size:26px; letter-spacing:10px; text-transform:uppercase; }
h2 { margin:0 0 18px; font-size:20px; }
.apps-grid { display:grid; grid-template-columns:repeat(auto-fit,232px); gap:32px; align-items:start; }
.app-card { width:232px; height:158px; padding:18px; border-radius:20px; background:linear-gradient(140deg,var(--panel),var(--panel-2)); color:white; box-shadow:0 18px 32px rgba(13,20,28,.32),inset 0 1px rgba(255,255,255,.18); position:relative; overflow:hidden; }
.app-card::after { content:""; position:absolute; right:-18px; bottom:-20px; width:98px; height:98px; background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%); filter:blur(2px); pointer-events:none; }
.app-icon { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(72,162,255,.16); color:var(--blue); }
.app-icon.check { background:rgba(22,183,106,.17); color:#13b96f; }
.app-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.app-card h2 { position:absolute; left:68px; top:27px; font-size:18px; margin:0; }
.app-card p { margin:16px 0 0; color:#aab8c5; font-weight:700; font-size:12px; }
.app-card a { position:absolute; right:18px; bottom:18px; color:#58adff; font-size:11px; font-weight:900; text-transform:uppercase; text-decoration:none; letter-spacing:.4px; }

.login-shell { width:min(960px,100%); display:grid; grid-template-columns:.95fr 1fr; align-items:center; gap:42px; }
.login-brand { min-height:460px; border-radius:32px; padding:46px; background:rgba(255,255,255,.48); border:1px solid rgba(219,231,235,.8); display:flex; flex-direction:column; justify-content:center; box-shadow:var(--shadow); }
.login-brand img { width:min(420px,100%); object-fit:contain; }
.login-brand span { margin-top:24px; color:#48616d; font-weight:900; letter-spacing:7px; text-transform:uppercase; }
.login-card,.panel { background:rgba(255,255,255,.82); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); }




.form,.login-card label { display:grid; gap:8px; font-weight:800; color:#31404a; }
.form { gap:14px; }
input,select { width:100%; border:1px solid #cfdce1; border-radius:14px; padding:12px 14px; font:inherit; background:white; }
.error { color:#b83232; font-weight:900; background:#fff1f1; border:1px solid #ffd1d1; border-radius:12px; padding:10px 12px; }
.empty { color:var(--muted); font-weight:800; }
.panel { padding:22px; margin-bottom:22px; }
.panel.small { max-width:520px; }
.admin-grid { display:grid; grid-template-columns:minmax(300px,390px) minmax(520px,1fr); gap:22px; align-items:start; margin-bottom:22px; }
.apps-detected table { width:100%; border-collapse:separate; border-spacing:0 8px; font-size:14px; }
th { text-align:left; padding:0 12px 8px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.8px; }
td { background:rgba(244,248,247,.95); padding:12px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
td:first-child { border-left:1px solid var(--line); border-radius:12px 0 0 12px; }
td:last-child { border-right:1px solid var(--line); border-radius:0 12px 12px 0; }
.status { display:inline-flex; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:900; }
.status.protected { color:#0b6d45; background:#dcf8e9; }
.status.open { color:#715208; background:#fff0bf; }
.permissions-panel { max-width:980px; }
.user-perm { background:rgba(244,248,247,.95); border:1px solid var(--line); border-radius:18px; padding:16px; margin-top:14px; }
.user-perm-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:14px; }
.user-perm-head strong { font-size:16px; }
.user-perm-head small { display:block; color:var(--muted); margin-top:4px; font-weight:800; }
.checks { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.app-permission { display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:14px; background:white; border:1px solid var(--line); }
.app-permission input { width:auto; margin-top:4px; }
.app-permission small { display:block; color:var(--muted); margin-top:3px; font-weight:700; }
@media (max-width:980px) { .admin-grid { grid-template-columns:1fr; }  }
@media (max-width:860px) { .sidebar { position:static; width:auto; min-height:auto; } .main { margin:0; padding:24px; } h1 { letter-spacing:4px; }  }
/* Login isolated visual layer */
.login-page {
  min-height: 100vh;
  overflow: hidden;
  background: #ffffff;
}
.login-stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 18% 16%, rgba(72, 162, 255, 0.11), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(22, 183, 106, 0.10), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f7fbfa 100%);
}
.login-card {
  width: min(390px, 100%);
  padding: 30px;
  display: grid;
  gap: 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(219, 231, 235, 0.88);
  box-shadow: 0 24px 70px rgba(18, 32, 40, 0.14), inset 0 1px rgba(255,255,255,.85);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.login-card-logo {
  width: 172px;
  max-height: 86px;
  object-fit: contain;
  justify-self: center;
  margin-bottom: 2px;
}
.login-heading {
  display: grid;
  gap: 8px;
}
.login-heading span {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: #48a2ff;
  box-shadow: 0 0 18px rgba(72, 162, 255, 0.9);
}
.login-heading h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: none;
}
.login-heading p {
  margin: 0;
  color: #667987;
  font-weight: 700;
}
.login-card label {
  display: grid;
  gap: 8px;
  font-weight: 800;
  color: #263845;
}
.login-card input {
  height: 46px;
  border: 1px solid #cddce2;
  border-radius: 14px;
  padding: 0 14px;
  background: rgba(255,255,255,.92);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.login-card input:focus {
  border-color: #48a2ff;
  box-shadow: 0 0 0 4px rgba(72,162,255,.14);
}
.login-card button {
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #48a2ff, #267ee7);
}
@media (max-width: 860px) {
  .login-stage { padding: 22px; }
  .login-card { padding: 24px; }
  .login-card-logo { width: 150px; }
}
/* Home app cards restored visual only */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 232px);
  gap: 32px;
  align-items: start;
}
.app-card {
  width: 232px;
  height: 158px;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(140deg, #303740 0%, #343b44 100%);
  color: #ffffff;
  box-shadow: 0 18px 32px rgba(13, 20, 28, 0.32), inset 0 1px rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.app-card::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -22px;
  width: 104px;
  height: 104px;
  background: radial-gradient(circle, rgba(255,255,255,.24) 0%, rgba(255,255,255,.10) 38%, transparent 70%);
  filter: blur(2px);
  pointer-events: none;
}
.app-icon {
  position: absolute;
  left: 18px;
  top: 18px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(72, 162, 255, 0.16);
  color: #48a2ff;
}
.app-icon.check {
  background: rgba(22, 183, 106, 0.18);
  color: #16b76a;
}
.app-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-card h2 {
  position: absolute;
  left: 68px;
  top: 27px;
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
}
.app-card p {
  position: absolute;
  left: 18px;
  top: 72px;
  margin: 0;
  color: #aab8c5;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
}
.app-card a {
  position: absolute;
  right: 18px;
  bottom: 18px;
  color: #58adff;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: .4px;
  z-index: 1;
}
/* Home app cards clickable restored behavior */
a.app-card {
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.app-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 22px 38px rgba(13,20,28,.36), inset 0 1px rgba(255,255,255,.22);
}
.app-card p {
  display: flex;
  align-items: center;
  gap: 7px;
}
.meta-icon {
  width: 13px;
  height: 13px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 13px;
  color: #48a2ff;
}
.meta-icon.check { color: #16b76a; }
.meta-icon svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-link {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #58adff;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
  z-index: 1;
}
.app-link svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-card > a { display: none; }
/* Sidebar logged user card */
.userbox {
  width: 100%;
  min-height: 132px;
  margin-top: auto;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(219,231,235,.95);
  box-shadow: 0 18px 32px rgba(13,20,28,.16), inset 0 1px rgba(255,255,255,.75);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 11px;
  text-align: center;
}
.userbox strong {
  color: #071d25;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 900;
}
.userbox a {
  color: #48a2ff;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(72,162,255,.35);
}
.userbox form {
  margin: 0;
  width: 100%;
}
.userbox .logout-button {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #ff073a;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(255,7,58,.32);
}
/* Sidebar user card matched to app cards */
.userbox {
  width: 100%;
  min-height: 158px;
  margin-top: auto;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(140deg, #303740 0%, #343b44 100%);
  color: #ffffff;
  box-shadow: 0 18px 32px rgba(13,20,28,.32), inset 0 1px rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.10);
  display: grid;
  align-content: center;
  gap: 14px;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.userbox::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -22px;
  width: 104px;
  height: 104px;
  background: radial-gradient(circle, rgba(255,255,255,.24) 0%, rgba(255,255,255,.10) 38%, transparent 70%);
  filter: blur(2px);
  pointer-events: none;
}
.account-row {
  width: 100%;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
  min-height: 28px;
}
.userbox strong {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 900;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.userbox a,
.userbox .logout-button {
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.account-password { color: #58adff; text-shadow: 0 0 10px rgba(72,162,255,.36); }
.userbox .logout-button { color: #ff4b68; text-shadow: 0 0 10px rgba(255,7,58,.30); }
.account-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  position: relative;
  background: rgba(72,162,255,.16);
  color: #58adff;
}
.account-icon.user { background: rgba(255,255,255,.11); color: #ffffff; }
.account-icon.key { background: rgba(72,162,255,.16); color: #58adff; }
.account-icon.exit { background: rgba(255,7,58,.14); color: #ff4b68; }
.account-icon.user::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 2px solid currentColor;
  border-radius: 50%;
  position: absolute;
  top: 6px;
}
.account-icon.user::after {
  content: "";
  width: 15px;
  height: 8px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  position: absolute;
  bottom: 6px;
}
.account-icon.key::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  position: absolute;
  left: 7px;
}
.account-icon.key::after {
  content: "";
  width: 12px;
  height: 2px;
  background: currentColor;
  position: absolute;
  left: 15px;
  box-shadow: 5px 4px 0 -1px currentColor;
}
.account-icon.exit::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right: 0;
  border-radius: 3px 0 0 3px;
  position: absolute;
  left: 7px;
}
.account-icon.exit::after {
  content: "";
  width: 12px;
  height: 2px;
  background: currentColor;
  position: absolute;
  right: 6px;
  box-shadow: 4px -4px 0 -1px currentColor, 4px 4px 0 -1px currentColor;
}
/* Admin password reset controls */
.user-admin-card {
  background: rgba(244,248,247,.95);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  margin-top: 14px;
}
.user-admin-card .user-perm {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.password-reset {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) auto auto;
  gap: 12px;
  align-items: end;
}
.password-reset strong,
.password-reset small {
  display: block;
}
.password-reset small {
  color: var(--muted);
  margin-top: 4px;
  font-weight: 800;
}
.password-reset label {
  display: grid;
  gap: 6px;
  font-weight: 800;
  color: #31404a;
}
.inline-check {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  padding-bottom: 12px;
  white-space: nowrap;
}
.inline-check input {
  width: auto;
}
.reset-button {
  background: linear-gradient(135deg, #303740, #343b44);
  box-shadow: 0 10px 22px rgba(13,20,28,.18);
}
@media (max-width: 980px) {
  .password-reset { grid-template-columns: 1fr; }
  .inline-check { padding-bottom: 0; white-space: normal; }
}

/* Login layout 1 - glassmorphism visual only */
.login-page {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 16%, rgba(72, 162, 255, 0.14), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(22, 183, 106, 0.11), transparent 30%),
    linear-gradient(180deg, #f8fbfb 0%, #eef6f4 100%);
}
.login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.82), rgba(255,255,255,.18) 45%, rgba(255,255,255,.66)),
    radial-gradient(circle at 50% 96%, rgba(72,162,255,.08), transparent 36%);
}
.login-stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  position: relative;
  isolation: isolate;
}
.login-stage::before,
.login-stage::after {
  content: "";
  position: absolute;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  filter: blur(54px);
  opacity: .42;
  z-index: -1;
}
.login-stage::before { left: 15%; top: 16%; background: rgba(72,162,255,.28); }
.login-stage::after { right: 17%; bottom: 16%; background: rgba(22,183,106,.18); }
.login-card {
  width: min(410px, 100%);
  padding: 34px;
  display: grid;
  gap: 18px;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.52));
  border: 1px solid rgba(255,255,255,.82);
  box-shadow:
    0 30px 90px rgba(18, 32, 40, 0.16),
    0 12px 28px rgba(72, 162, 255, 0.08),
    inset 0 1px 1px rgba(255,255,255,.95);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  position: relative;
  overflow: hidden;
}
.login-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), transparent 34%),
    radial-gradient(circle at 86% 88%, rgba(72,162,255,.16), transparent 34%);
}
.login-card > * { position: relative; z-index: 1; }
.login-card-logo {
  width: 152px;
  max-height: 74px;
  object-fit: contain;
  justify-self: center;
  margin-bottom: 4px;
  filter: drop-shadow(0 10px 18px rgba(20,32,40,.10));
}
.login-heading {
  display: grid;
  gap: 9px;
  text-align: center;
  justify-items: center;
}
.login-heading span {
  width: 48px;
  height: 5px;
  border-radius: 999px;
  background: #48a2ff;
  box-shadow: 0 0 18px rgba(72,162,255,.95), 0 0 34px rgba(72,162,255,.36);
}
.login-heading h1 {
  margin: 0;
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: none;
  color: #071d25;
}
.login-heading p {
  margin: 0;
  color: #607482;
  font-weight: 750;
  font-size: 14px;
}
.login-card label {
  display: grid;
  gap: 8px;
  font-weight: 850;
  color: #263845;
  font-size: 14px;
}
.login-card input {
  height: 48px;
  border: 1px solid rgba(195, 213, 221, .95);
  border-radius: 16px;
  padding: 0 15px;
  background: rgba(255,255,255,.86);
  outline: none;
  color: #071d25;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}
.login-card input:focus {
  border-color: #48a2ff;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(72,162,255,.14), 0 12px 24px rgba(72,162,255,.08);
}
.login-card button {
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, #48a2ff, #267ee7);
  box-shadow: 0 16px 32px rgba(72,162,255,.30);
  letter-spacing: .2px;
}
.login-card button:hover { filter: brightness(1.04); transform: translateY(-1px); }
.login-card .error {
  text-align: center;
  border-radius: 14px;
}
@media (max-width: 860px) {
  .login-page { overflow: auto; }
  .login-stage { padding: 22px; }
  .login-card { padding: 26px; border-radius: 24px; }
  .login-card-logo { width: 138px; }
  .login-heading h1 { font-size: 24px; }
}

/* Login layout 1 background refinement - visual only */
.login-page {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(72, 162, 255, 0.22), transparent 24%),
    radial-gradient(circle at 84% 14%, rgba(22, 183, 106, 0.18), transparent 28%),
    radial-gradient(circle at 48% 92%, rgba(72, 162, 255, 0.10), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f4faf9 42%, #eaf5f3 100%);
}
.login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.28) 48%, rgba(255,255,255,.76) 100%),
    repeating-linear-gradient(90deg, rgba(7,29,37,.025) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(7,29,37,.018) 0 1px, transparent 1px 72px);
}
.login-page::after {
  content: "";
  position: fixed;
  right: -120px;
  top: -150px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(72,162,255,.16), rgba(22,183,106,.08) 42%, transparent 68%);
  filter: blur(8px);
  opacity: .9;
}
.login-stage {
  background: transparent;
}
.login-stage::before {
  left: 10%;
  top: 12%;
  width: 420px;
  height: 420px;
  background: rgba(72,162,255,.24);
  opacity: .48;
}
.login-stage::after {
  right: 11%;
  bottom: 10%;
  width: 430px;
  height: 430px;
  background: rgba(22,183,106,.19);
  opacity: .42;
}
@media (max-width: 860px) {
  .login-page { overflow: auto; }
  .login-page::after { width: 360px; height: 360px; right: -160px; top: -120px; }
}

/* Login layout 1 water drops - visual only */
.login-water-drops {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.login-water-drops span {
  position: absolute;
  display: block;
  width: 92px;
  height: 118px;
  border-radius: 72% 72% 78% 78%;
  transform: rotate(45deg);
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.92) 0 8%, rgba(255,255,255,.42) 9% 17%, transparent 18%),
    linear-gradient(135deg, rgba(255,255,255,.54), rgba(72,162,255,.16) 45%, rgba(22,183,106,.10));
  border: 1px solid rgba(255,255,255,.58);
  box-shadow:
    inset 10px 10px 24px rgba(255,255,255,.54),
    inset -16px -18px 32px rgba(72,162,255,.13),
    0 24px 48px rgba(18,32,40,.08);
  opacity: .42;
  filter: blur(.1px);
}
.login-water-drops span::after {
  content: "";
  position: absolute;
  inset: 12px 18px 22px 12px;
  border-radius: inherit;
  border-top: 1px solid rgba(255,255,255,.62);
  border-left: 1px solid rgba(255,255,255,.35);
}
.login-water-drops span:nth-child(1) { left: 12%; top: 12%; width: 74px; height: 96px; opacity: .30; }
.login-water-drops span:nth-child(2) { right: 13%; top: 20%; width: 116px; height: 148px; opacity: .28; }
.login-water-drops span:nth-child(3) { left: 20%; bottom: 15%; width: 102px; height: 132px; opacity: .24; }
.login-water-drops span:nth-child(4) { right: 25%; bottom: 13%; width: 68px; height: 88px; opacity: .22; }
.login-water-drops span:nth-child(5) { left: 57%; top: 9%; width: 54px; height: 72px; opacity: .20; }
.login-card { z-index: 2; }
@media (max-width: 860px) {
  .login-water-drops span:nth-child(2),
  .login-water-drops span:nth-child(3) { opacity: .18; }
  .login-water-drops span:nth-child(4),
  .login-water-drops span:nth-child(5) { display: none; }
}

/* Admin compact refinement - visual only */
.admin-grid {
  grid-template-columns: minmax(280px, 360px) minmax(480px, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.admin-grid .panel,
.permissions-panel {
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 14px 34px rgba(18,32,40,.10), inset 0 1px rgba(255,255,255,.72);
}
.create-user h2,
.apps-detected h2,
.permissions-panel h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 17px;
  color: #071d25;
}
.create-user h2::before,
.apps-detected h2::before,
.permissions-panel h2::before {
  content: "";
  width: 4px;
  height: 22px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 16px rgba(72,162,255,.85);
}
.create-user .form {
  grid-template-columns: 1fr;
  gap: 10px;
}
.create-user .form label,
.password-reset label {
  font-size: 12px;
}
.create-user .form input,
.create-user .form select,
.password-reset input {
  min-height: 38px;
  padding: 9px 11px;
  border-radius: 12px;
}
.create-user .form button,
.user-perm-head button,
.reset-button {
  min-height: 38px;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 13px;
}
.apps-detected table {
  border-spacing: 0 6px;
  font-size: 13px;
}
.apps-detected td {
  padding: 9px 10px;
}
.permissions-panel {
  max-width: none;
  padding: 18px;
}
.user-admin-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  margin-top: 12px;
  border-radius: 16px;
  background: rgba(248,251,250,.92);
}
.user-perm-head {
  margin-bottom: 10px;
  align-items: center;
}
.user-perm-head strong {
  font-size: 15px;
}
.user-perm-head small {
  margin-top: 2px;
  font-size: 12px;
}
.checks {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.app-permission {
  min-height: 54px;
  padding: 9px 10px;
  border-radius: 12px;
  align-items: flex-start;
}
.app-permission strong {
  font-size: 13px;
}
.app-permission small {
  font-size: 11px;
  line-height: 1.2;
}
.app-role-select {
  min-height: 32px;
  margin-top: 6px;
  padding: 5px 8px;
  border-radius: 10px;
  font-size: 12px;
}
.password-reset {
  margin-top: 0;
  padding-top: 12px;
  grid-template-columns: minmax(170px, 1fr) minmax(190px, 280px) auto;
  gap: 10px;
  align-items: end;
}
.password-reset > div strong {
  font-size: 13px;
}
.password-reset > div small {
  font-size: 11px;
  line-height: 1.25;
}
@media (max-width: 980px) {
  .admin-grid,
  .password-reset { grid-template-columns: 1fr; }
}

/* Home app cards alignment - visual only */
.apps-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 280px));
  gap: 28px 32px;
}
a.app-card,
.app-card {
  width: 280px;
  height: 158px;
  padding: 18px 20px;
}
.app-card h2 {
  left: 70px;
  right: 18px;
  top: 28px;
  width: auto;
  max-width: none;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  font-size: clamp(15px, 0.92vw, 18px);
  line-height: 1;
}
.app-card p {
  left: 20px;
  right: 18px;
  top: 78px;
  width: auto;
  min-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}
.app-card .app-link {
  right: 20px;
  bottom: 19px;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .apps-grid { grid-template-columns: 1fr; }
  a.app-card,
  .app-card { width: 100%; max-width: 340px; }
}

/* Admin compact layout - visual only */
.admin-stack {
  display: grid;
  gap: 14px;
}
.admin-compact-panel,
.admin-apps-accordion,
.permissions-panel {
  max-width: none;
}
.admin-compact-panel {
  padding: 16px 18px;
}
.admin-compact-panel h2,
.admin-apps-accordion h2,
.permissions-panel h2 {
  margin: 0;
  font-size: 18px;
}
.compact-create-user {
  display: grid;
  grid-template-columns: minmax(180px, 1.15fr) minmax(180px, 1.15fr) minmax(150px, .7fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 12px;
}
.compact-create-user label {
  gap: 5px;
  font-size: 12px;
}
.compact-create-user input,
.compact-create-user select {
  height: 38px;
  padding: 7px 11px;
  border-radius: 12px;
}
.compact-create-user button {
  height: 38px;
  padding: 0 18px;
  white-space: nowrap;
}
.admin-apps-accordion {
  padding: 0;
  overflow: hidden;
}
.admin-apps-accordion > summary {
  min-height: 54px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}
.admin-apps-accordion > summary::-webkit-details-marker,
.user-admin-card > summary::-webkit-details-marker {
  display: none;
}
.admin-apps-accordion > summary::after,
.user-summary::after {
  content: "⌄";
  color: var(--blue);
  font-weight: 900;
  transition: transform .16s ease;
}
.admin-apps-accordion[open] > summary::after,
.user-admin-card[open] > .user-summary::after {
  transform: rotate(180deg);
}
.admin-apps-accordion table {
  margin: 0 18px 16px;
  width: calc(100% - 36px);
}
.permissions-panel {
  padding: 16px 18px;
}
.permissions-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.permissions-title small,
.admin-apps-accordion summary small {
  color: var(--muted);
  font-weight: 900;
}
.user-admin-card {
  display: block;
  padding: 0;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(248,251,250,.92);
  overflow: hidden;
}
.user-summary {
  min-height: 50px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto 18px;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  list-style: none;
}
.user-summary strong {
  font-size: 14px;
}
.user-summary small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.user-summary > span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.user-admin-body {
  padding: 0 14px 14px;
  border-top: 1px solid var(--line);
}
.user-admin-card .user-perm {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}
.user-admin-card .user-perm-head {
  min-height: 40px;
  margin-bottom: 8px;
}
.user-admin-card .checks {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
}
.user-admin-card .app-permission {
  min-height: 46px;
  padding: 8px 9px;
}
.user-admin-card .password-reset {
  margin-top: 10px;
  padding-top: 10px;
}
@media (max-width: 1100px) {
  .compact-create-user {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  .compact-create-user,
  .user-summary {
    grid-template-columns: 1fr;
  }
  .user-summary {
    padding: 12px 14px;
  }
}