:root {
  --brand: #ff6b21;
  --brand-2: #ff9d2e;
  --brand-3: #f3c777;
  --ink: #211a17;
  --muted: #7e716b;
  --line: rgba(98, 64, 45, .12);
  --glass: rgba(255, 255, 255, .74);
  --glass-strong: rgba(255, 255, 255, .9);
  --surface: #fffaf6;
  --success: #1f9d72;
  --warning: #d98a14;
  --danger: #d94b52;
  --shadow: 0 24px 70px rgba(113, 60, 27, .12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--surface);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
html { overflow-x: hidden; }
body {
  background:
    radial-gradient(circle at 12% 5%, rgba(255, 168, 87, .22), transparent 28rem),
    radial-gradient(circle at 88% 15%, rgba(255, 211, 136, .2), transparent 26rem),
    linear-gradient(145deg, #fffaf6 0%, #fff 48%, #fff5eb 100%);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
#app { min-height: 100vh; width: 100%; min-width: 0; }
.login-root { display: block; min-height: 100vh; width: 100%; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 264px minmax(0, 1fr); }
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 24px 18px;
  background: rgba(255,255,255,.58); border-right: 1px solid var(--line);
  backdrop-filter: blur(28px) saturate(1.2); -webkit-backdrop-filter: blur(28px) saturate(1.2);
  display: flex; flex-direction: column; gap: 20px; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 8px 10px 18px; }
.brand img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(255,107,33,.23)); }
.brand-title { font-weight: 800; letter-spacing: .04em; font-size: 18px; }
.brand-sub { color: var(--muted); font-size: 11px; margin-top: 3px; }
.nav { display: grid; gap: 5px; overflow: auto; padding-right: 2px; }
.nav-group { color: #a0928c; font-size: 11px; padding: 13px 12px 5px; text-transform: uppercase; letter-spacing: .12em; }
.nav-item {
  appearance: none; border: 0; width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 14px; background: transparent; color: #625650; text-align: left;
  transition: .2s ease;
}
.nav-item:hover { background: rgba(255,255,255,.72); transform: translateX(2px); }
.nav-item.active { color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 13px 30px rgba(255,107,33,.25); }
.nav-icon { width: 22px; height: 22px; display: grid; place-items: center; font-size: 16px; }
.sidebar-footer { margin-top: auto; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.62); }
.health-line { display:flex; align-items:center; gap:8px; font-size:12px; }
.health-dot { width:8px; height:8px; border-radius:50%; background:var(--warning); box-shadow:0 0 0 4px rgba(217,138,20,.12); }
.health-dot.ok { background:var(--success); box-shadow:0 0 0 4px rgba(31,157,114,.12); }
.health-dot.error { background:var(--danger); box-shadow:0 0 0 4px rgba(217,75,82,.12); }
.main { min-width: 0; padding: 22px 28px 46px; }
.topbar { display:flex; align-items:center; gap:16px; justify-content:space-between; margin-bottom:22px; }
.top-left h1 { margin:0; font-size:24px; letter-spacing:-.03em; }
.top-left p { margin:6px 0 0; color:var(--muted); font-size:13px; }
.top-actions { display:flex; align-items:center; gap:10px; }
.search { min-width:260px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.72); padding:11px 14px; outline:none; }
.search:focus { border-color:rgba(255,107,33,.45); box-shadow:0 0 0 4px rgba(255,107,33,.08); }
.icon-btn, .btn {
  border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.8); padding:10px 14px; color:var(--ink);
  transition:.2s ease;
}
.icon-btn:hover, .btn:hover { transform:translateY(-1px); box-shadow:0 10px 25px rgba(88,54,35,.1); }
.btn.primary { color:#fff; border:0; background:linear-gradient(135deg,var(--brand),var(--brand-2)); }
.btn.danger { color:var(--danger); border-color:rgba(217,75,82,.22); }
.avatar { width:38px; height:38px; border-radius:14px; display:grid; place-items:center; color:#fff; font-weight:700; background:linear-gradient(135deg,#3c312c,#98735e); }
.grid { display:grid; gap:16px; }
.kpi-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.card {
  border:1px solid rgba(117,80,55,.11); border-radius:22px; background:var(--glass);
  backdrop-filter:blur(26px) saturate(1.25); -webkit-backdrop-filter:blur(26px) saturate(1.25);
  box-shadow:var(--shadow); overflow:hidden;
}
.card-body { padding:20px; }
.kpi { position:relative; min-height:142px; }
.kpi::after { content:""; position:absolute; width:110px; height:110px; border-radius:50%; right:-34px; top:-42px; background:radial-gradient(circle,rgba(255,159,54,.24),transparent 65%); }
.kpi-label { color:var(--muted); font-size:13px; }
.kpi-value { font-size:30px; font-weight:800; margin:13px 0 8px; letter-spacing:-.04em; }
.kpi-meta { color:var(--success); font-size:12px; }
.section-grid { margin-top:16px; grid-template-columns:minmax(0,1.5fr) minmax(320px,.8fr); }
.section-title { display:flex; align-items:center; justify-content:space-between; padding:19px 20px 0; }
.section-title h2 { margin:0; font-size:16px; }
.section-title span { color:var(--muted); font-size:12px; }
.chart-wrap { height:300px; padding:18px 20px 24px; }
.chart { width:100%; height:100%; overflow:visible; }
.chart-grid line { stroke:rgba(102,74,57,.1); stroke-width:1; }
.chart-area { fill:url(#areaGradient); }
.chart-line { fill:none; stroke:url(#lineGradient); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.chart-point { fill:#fff; stroke:var(--brand); stroke-width:3; }
.legend { display:flex; gap:16px; color:var(--muted); font-size:12px; }
.legend i { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--brand); margin-right:6px; }
.funnel { padding:18px 20px 24px; display:grid; gap:13px; }
.funnel-row { display:grid; gap:7px; }
.funnel-head { display:flex; justify-content:space-between; font-size:12px; }
.progress { height:9px; background:rgba(106,73,53,.08); border-radius:999px; overflow:hidden; }
.progress > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--brand),var(--brand-2)); }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.toolbar-left, .toolbar-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.select { border:1px solid var(--line); background:rgba(255,255,255,.82); border-radius:12px; padding:9px 12px; outline:none; }
.table-card { overflow:auto; }
table { border-collapse:collapse; width:100%; min-width:760px; }
th,td { padding:14px 17px; border-bottom:1px solid rgba(96,67,50,.08); text-align:left; font-size:13px; vertical-align:middle; }
th { position:sticky; top:0; z-index:1; color:#8b7d76; font-weight:600; background:rgba(255,250,246,.94); }
tr:hover td { background:rgba(255,255,255,.5); }
.entity { display:flex; align-items:center; gap:11px; }
.entity img { width:38px; height:38px; border-radius:12px; object-fit:cover; background:#fff4eb; }
.entity strong { display:block; font-size:13px; }
.entity small { color:var(--muted); }
.badge { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:5px 9px; font-size:11px; background:rgba(97,77,66,.08); color:#685c56; }
.badge.success { background:rgba(31,157,114,.1); color:var(--success); }
.badge.warning { background:rgba(217,138,20,.12); color:#a76809; }
.badge.danger { background:rgba(217,75,82,.1); color:var(--danger); }
.badge.brand { background:rgba(255,107,33,.11); color:#df5716; }
.empty { padding:70px 30px; text-align:center; color:var(--muted); }
.empty .symbol { font-size:38px; margin-bottom:12px; }
.list { padding:8px 20px 18px; }
.list-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid rgba(96,67,50,.08); }
.list-row:last-child { border-bottom:0; }
.list-main strong { display:block; font-size:13px; }
.list-main small { color:var(--muted); font-size:11px; }
.metric-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:20px; }
.metric-cell { padding:16px; border-radius:17px; background:rgba(255,255,255,.68); border:1px solid var(--line); }
.metric-cell b { display:block; font-size:22px; margin-top:8px; }
.notice { border-radius:16px; padding:13px 16px; margin-bottom:16px; border:1px solid rgba(217,138,20,.18); background:rgba(255,184,72,.09); color:#855813; font-size:13px; }
.toast { position:fixed; right:24px; bottom:24px; min-width:260px; max-width:420px; padding:14px 16px; border-radius:15px; color:#fff; background:#2d2521; box-shadow:0 18px 50px rgba(0,0,0,.22); z-index:99; animation:toast-in .25s ease; }
.toast.error { background:#a6343b; }
@keyframes toast-in { from{transform:translateY(12px);opacity:0} to{transform:none;opacity:1} }
.skeleton { position:relative; overflow:hidden; background:rgba(110,80,62,.07); border-radius:10px; height:14px; }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent); animation:shimmer 1.2s infinite; }
@keyframes shimmer { to{transform:translateX(100%)} }
@media (max-width:1100px) { .kpi-grid{grid-template-columns:repeat(2,1fr)} .section-grid{grid-template-columns:1fr} }
@media (max-width:760px) {
  .app-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .nav{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}.nav-group{grid-column:1/-1}.sidebar-footer{display:none}
  .main{padding:18px 14px 36px}.topbar{align-items:flex-start}.top-actions .search{display:none}.kpi-grid{grid-template-columns:1fr}.metric-row{grid-template-columns:1fr}
}

/* Phase 1: formal administrator authentication */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 10%, rgba(255, 130, 45, .13), transparent 30%), #fffaf6; }
.login-card { width: min(440px, 100%); padding: 34px; border: 1px solid #f0e4dc; border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: 0 26px 70px rgba(83, 47, 25, .13); }
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.login-brand img { width: 54px; height: 54px; object-fit: contain; }
.login-brand h1 { margin: 0; font-size: 24px; }
.login-brand p, .login-hint { color: #897b72; font-size: 13px; }
.login-card form { display: grid; gap: 16px; }
.login-card label { display: grid; gap: 8px; font-weight: 600; }
.login-card input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #e7dbd2; border-radius: 12px; font: inherit; outline: none; }
.login-card input:focus { border-color: #ff7a21; box-shadow: 0 0 0 3px rgba(255, 122, 33, .12); }
.login-submit { width: 100%; min-height: 44px; justify-content: center; }
.login-submit:disabled { opacity: .65; cursor: wait; }
.avatar { border: 0; cursor: pointer; }
.settings-password { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto; gap: 14px; align-items: end; }
.settings-password label { display: grid; gap: 8px; }
@media (max-width: 900px) { .settings-password { grid-template-columns: 1fr; } }

/* Commercial glass UI system */
:root {
  --glass: rgba(255, 255, 255, .58);
  --glass-strong: rgba(255, 255, 255, .76);
  --glass-border: rgba(255, 255, 255, .72);
  --glass-shadow: 0 28px 80px rgba(83, 47, 25, .13), inset 0 1px 0 rgba(255, 255, 255, .88);
  --glow: rgba(255, 120, 31, .34);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.8), transparent 26%),
    radial-gradient(circle at 84% 8%, rgba(255,180,93,.18), transparent 24%),
    radial-gradient(circle at 74% 88%, rgba(255,219,164,.18), transparent 28%);
  z-index: -1;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.76);
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,130,42,.22));
  color: var(--brand);
  font-weight: 900;
  box-shadow: 0 16px 38px rgba(255,107,33,.18), inset 0 1px 0 rgba(255,255,255,.95);
}
.brand-logo, .brand .brand-mark { width: 44px; height: 44px; border-radius: 14px; object-fit: cover; }

.card,
.sidebar,
.sidebar-footer,
.metric-cell,
.search,
.select,
.input-shell,
.field > input,
.field > textarea {
  border-color: rgba(255,255,255,.72);
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
  backdrop-filter: blur(30px) saturate(1.35);
  -webkit-backdrop-filter: blur(30px) saturate(1.35);
  box-shadow: var(--glass-shadow);
}

.card {
  position: relative;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(125deg, rgba(255,255,255,.52), transparent 26%, transparent 74%, rgba(255,194,128,.13));
  opacity: .72;
}
.card > * { position: relative; z-index: 1; }

button,
.btn,
.icon-btn,
.nav-item,
.avatar {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .24s ease, box-shadow .24s ease, filter .24s ease, border-color .24s ease;
}
button:not(:disabled),
.btn:not(:disabled),
.icon-btn:not(:disabled),
.nav-item:not(:disabled),
.avatar:not(:disabled) {
  animation: button-breathe 3.2s ease-in-out infinite;
}
button::before,
.btn::before,
.icon-btn::before,
.nav-item::before,
.avatar::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -85%;
  left: -55%;
  width: 34%;
  height: 270%;
  transform: rotate(22deg) translateX(-220%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.74), transparent);
  filter: blur(.4px);
  animation: light-sweep 3.8s ease-in-out infinite;
  pointer-events: none;
}
button:hover,
.btn:hover,
.icon-btn:hover,
.nav-item:hover,
.avatar:hover {
  transform: translateY(-2px) scale(1.008);
  filter: saturate(1.08);
  box-shadow: 0 14px 34px rgba(85,52,32,.14), 0 0 26px var(--glow);
}
button:active,
.btn:active,
.icon-btn:active,
.nav-item:active,
.avatar:active { transform: translateY(0) scale(.985); }
button:disabled { animation: none; cursor: wait; opacity: .62; }
button:disabled::before { animation: none; }

@keyframes button-breathe {
  0%,100% { box-shadow: 0 8px 22px rgba(81,49,31,.08), 0 0 0 rgba(255,118,32,0); }
  50% { box-shadow: 0 12px 28px rgba(81,49,31,.11), 0 0 20px rgba(255,118,32,.18); }
}
@keyframes light-sweep {
  0%, 58% { transform: rotate(22deg) translateX(-230%); opacity: 0; }
  68% { opacity: .92; }
  86%,100% { transform: rotate(22deg) translateX(620%); opacity: 0; }
}

.section-title { align-items: flex-start; gap: 18px; }
.section-title h2 { font-size: 17px; }
.section-title p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.settings-stack { display: grid; gap: 16px; }
.config-card { overflow: visible; }
.config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 8px; color: #5e514a; font-size: 12px; font-weight: 650; }
.field > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.field input,
.field textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 15px;
  padding: 12px 14px;
  color: var(--ink);
  outline: none;
  resize: vertical;
}
.field input:focus,
.field textarea:focus,
.input-shell:focus-within {
  border-color: rgba(255,116,30,.5);
  box-shadow: 0 0 0 4px rgba(255,116,30,.09), 0 18px 42px rgba(93,50,21,.1);
}
.field-wide { grid-column: 1 / -1; }
.secret-state { margin-left: auto; color: #9b8d84; font-size: 10px; font-weight: 600; }
.secret-state.configured { color: var(--success); }
.config-actions { display: flex; align-items: center; gap: 14px; padding: 0 20px 20px; }
.config-actions > span { color: var(--muted); font-size: 11px; }

.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--muted); font-size: 12px; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle > span { width: 45px; height: 25px; padding: 3px; border-radius: 999px; background: rgba(99,74,59,.14); box-shadow: inset 0 2px 5px rgba(75,47,31,.1); transition: .25s ease; }
.toggle > span::after { content: ""; display: block; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 4px 10px rgba(42,25,17,.18); transition: .25s ease; }
.toggle input:checked + span { background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 0 20px rgba(255,107,33,.3); }
.toggle input:checked + span::after { transform: translateX(20px); }

/* Apple-inspired login experience */
.login-page {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  place-items: center;
  padding: 46px 24px 72px;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,142,54,.25), transparent 30%),
    radial-gradient(circle at 82% 12%, rgba(255,216,162,.27), transparent 28%),
    linear-gradient(145deg, #fff8f1 0%, #f9f7f5 50%, #fff2e7 100%);
}
.login-grid {
  position: absolute;
  inset: 0;
  opacity: .25;
  background-image: linear-gradient(rgba(99,68,48,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(99,68,48,.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 85%);
}
.login-aurora { position: absolute; border-radius: 50%; filter: blur(4px); opacity: .75; animation: aurora-float 10s ease-in-out infinite; }
.aurora-one { width: 430px; height: 430px; left: -130px; top: 22%; background: radial-gradient(circle, rgba(255,122,31,.28), transparent 68%); }
.aurora-two { width: 520px; height: 520px; right: -160px; top: -140px; background: radial-gradient(circle, rgba(255,207,139,.36), transparent 68%); animation-delay: -4s; }
@keyframes aurora-float { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(18px,-20px,0) scale(1.08)} }

.login-shell {
  position: relative;
  z-index: 2;
  width: min(1060px, 100%);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  gap: clamp(28px, 4vw, 58px);
  align-items: center;
}
.login-story { min-width: 0; padding: 40px 12px; }
.login-brand-lockup { display: flex; min-width: 0; align-items: center; gap: 17px; }
.login-brand-lockup > div { min-width: 0; }
.login-logo {
  display: block;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  max-width: 72px;
  max-height: 72px;
  aspect-ratio: 1;
  border-radius: 23px;
  object-fit: contain;
  overflow: hidden;
}
.login-brand-lockup h1 {
  max-width: 18ch;
  margin: 6px 0 0;
  font-size: clamp(32px, 3.2vw, 56px);
  letter-spacing: -.045em;
  line-height: 1.08;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.login-kicker { color: var(--brand); font-size: 11px; font-weight: 850; letter-spacing: .22em; }
.login-slogan {
  max-width: 32ch;
  margin: 28px 0 22px;
  color: #5e5048;
  font-size: clamp(18px, 1.8vw, 28px);
  line-height: 1.5;
  letter-spacing: -.018em;
  overflow-wrap: anywhere;
}
.login-capabilities { display: flex; flex-wrap: wrap; gap: 10px; }
.login-capabilities span { padding: 9px 13px; border: 1px solid rgba(255,255,255,.76); border-radius: 999px; background: rgba(255,255,255,.48); color: #75675f; font-size: 11px; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(20px); }
.login-security-note { width: fit-content; display: flex; gap: 12px; align-items: center; margin-top: 34px; padding: 14px 17px; border: 1px solid rgba(255,255,255,.72); border-radius: 19px; background: rgba(255,255,255,.45); backdrop-filter: blur(24px); box-shadow: 0 18px 46px rgba(89,51,27,.09); }
.login-security-note i { width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 6px rgba(31,157,114,.11), 0 0 20px rgba(31,157,114,.42); animation: health-breathe 2.2s ease-in-out infinite; }
.login-security-note strong { display: block; font-size: 12px; }
.login-security-note p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
@keyframes health-breathe { 50% { box-shadow: 0 0 0 9px rgba(31,157,114,.05), 0 0 28px rgba(31,157,114,.58); } }

.login-card {
  width: 100%;
  min-width: 0;
  max-width: 420px;
  justify-self: end;
  padding: 32px;
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255,255,255,.75), rgba(255,255,255,.44));
  box-shadow: 0 42px 100px rgba(88,48,23,.17), inset 0 1px 0 rgba(255,255,255,.95);
}
.login-card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 25px; }
.login-card-head h2 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.login-card-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.login-orb { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg, var(--brand), var(--brand-2)); box-shadow: 0 14px 28px rgba(255,107,33,.28); }
.login-card form { display: grid; gap: 17px; }
.login-field { gap: 9px; }
.input-shell { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.8); border-radius: 17px; padding: 0 14px; transition: .22s ease; }
.input-shell i { color: #a18f84; font-style: normal; }
.input-shell input { flex: 1; min-width: 0; padding: 14px 0; border: 0; background: transparent; box-shadow: none; outline: 0; }
.login-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; margin-top: 4px; padding: 0 18px; border-radius: 17px; font-weight: 760; }
.login-submit b { font-size: 19px; }
.login-hint { margin: 0; text-align: center; line-height: 1.65; }
.login-notice { margin-bottom: 18px; }
.login-footer { position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); color: rgba(83,65,54,.5); font-size: 9px; letter-spacing: .2em; text-align: center; }

@media (max-width: 1280px) {
  .login-shell { grid-template-columns: minmax(0, 1fr) minmax(340px, 390px); gap: 30px; }
  .login-logo { flex-basis: 62px; width: 62px; height: 62px; max-width: 62px; max-height: 62px; border-radius: 20px; }
  .login-brand-lockup h1 { max-width: 16ch; font-size: clamp(30px, 3vw, 46px); }
  .login-slogan { font-size: clamp(17px, 1.7vw, 24px); }
}

@media (max-width: 1120px) {
  .login-page { place-items: start center; padding-top: 34px; padding-bottom: 46px; }
  .login-shell { grid-template-columns: minmax(0, 620px); justify-content: center; gap: 14px; }
  .login-story { padding: 8px 6px 20px; text-align: center; }
  .login-brand-lockup { justify-content: center; }
  .login-brand-lockup h1 { max-width: 15ch; font-size: clamp(30px, 6vw, 44px); }
  .login-slogan { max-width: 30ch; margin: 18px auto 16px; font-size: clamp(17px, 3vw, 22px); }
  .login-capabilities { justify-content: center; }
  .login-security-note { display: none; }
  .login-card { width: min(100%, 460px); max-width: 460px; justify-self: center; }
  .login-footer { position: static; transform: none; width: auto; margin: 24px auto 0; }
}

@media (max-width: 620px) {
  .login-page { padding: 24px 14px 34px; }
  .login-shell { width: 100%; }
  .login-story { padding-inline: 2px; }
  .login-logo { flex-basis: 54px; width: 54px; height: 54px; max-width: 54px; max-height: 54px; border-radius: 17px; }
  .login-brand-lockup { gap: 12px; }
  .login-brand-lockup h1 { font-size: clamp(27px, 9vw, 36px); }
  .login-kicker { font-size: 9px; letter-spacing: .15em; }
  .login-capabilities span { padding: 7px 10px; }
  .login-card { padding: 22px 18px; border-radius: 24px; }
  .login-card-head h2 { font-size: 21px; }
  .config-grid { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
}

@media (max-height: 760px) and (min-width: 1121px) {
  .login-page { padding-block: 24px 40px; }
  .login-story { padding-block: 16px; }
  .login-slogan { margin-block: 18px 14px; }
  .login-security-note { margin-top: 20px; }
  .login-card { padding: 26px; }
  .login-footer { bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}