:root {
  --navy: #102f4d;
  --navy2: #071f36;
  --ivory: #fbf7ef;
  --teal: #177d7f;
  --teal-soft: #e4f2f0;
  --aqua: #6cb7b8;
  --coral: #e97f62;
  --gold: #dfa83f;
}

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vh, 32px);
  overflow: auto;
  background: var(--ivory);
}

.auth-page .portal-login {
  width: min(1050px, 100%);
  margin: auto;
}

.auth-page .portal-login .login-welcome,
.auth-page .portal-login .login-card {
  padding: clamp(28px, 5vh, 54px);
}

.auth-page .login-welcome h1 {
  margin: clamp(15px, 2.5vh, 24px) 0 12px;
  font-size: clamp(2.15rem, 4vh, 2.8rem);
}

.auth-page .login-trust {
  margin-top: clamp(20px, 3.5vh, 35px);
}

/* Keep every navigation item reachable on shorter laptop and tablet screens. */
.shell aside {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.shell aside nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #41617a transparent;
}

.shell aside .nav-note {
  position: static;
  flex: 0 0 auto;
  margin: 8px 25px 24px;
}

.nav-brand-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 10px;
}

.brand > div {
  display: grid;
  gap: 2px;
}

.brand small {
  color: #9eb1bf;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

nav { gap: 4px; }
nav a { padding: 11px 13px; border-radius: 10px; font-size: .94rem; align-items: center; }
nav a b { width: 20px; text-align: center; color: #9ddbd4; font-weight: 500; }
.nav-group { margin: 15px 13px 3px; color: #7fa1b7; font-size: .67rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.nav-role { margin: 0 4px 8px; padding: 12px 13px; border: 1px solid #315069; border-radius: 12px; background: rgba(255,255,255,.035); }
.nav-role span, .nav-role strong { display: block; }
.nav-role span { color: #80bdbb; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.nav-role strong { margin-top: 3px; color: #fff; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.user-welcome { display:grid; grid-template-columns:minmax(250px,.75fr) minmax(0,1.5fr); gap:28px; align-items:center; }
.user-welcome p { color:var(--muted); line-height:1.55; }
.user-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.user-actions a { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink); background:#fff; }
.user-actions a:hover { border-color:#9fc9c3; background:#f6fbfa; }
.user-actions a > span { display:grid; }
.user-actions a > span > small { margin:2px 0 0; font-weight:500; }
.admin-shortcuts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:18px 0; }
.admin-shortcuts a { display:flex; align-items:center; gap:12px; padding:17px; text-decoration:none; color:var(--ink); }
.admin-shortcuts a > span { font-size:1.25rem; color:var(--teal); }
.admin-shortcuts small { margin:3px 0 0; }
.admin-shortcuts a:hover { border-color:#9fc9c3; }
@media(max-width:980px){.user-welcome{grid-template-columns:1fr}.admin-shortcuts{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.user-actions,.admin-shortcuts{grid-template-columns:1fr}}

.admin-sections { display:flex; flex-direction:row; gap:9px; padding:0; margin:0 0 20px; overflow:auto; }
.admin-sections a, .admin-sections span { white-space:nowrap; padding:10px 14px; background:#fff; border:1px solid var(--line); border-radius:10px; color:var(--ink); font-size:.85rem; font-weight:700; text-decoration:none; }
.admin-sections a { color:var(--teal); }
.setup-links { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:18px; }
.directory-tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.directory-tools input, .directory-tools select { padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.directory-tools input { min-width:210px; }
@media(max-width:800px){.users-heading{align-items:stretch;flex-direction:column}.directory-tools{justify-content:stretch}.directory-tools input,.directory-tools select{flex:1;min-width:160px}}
.device-toolbar { display:flex; align-items:end; gap:14px; margin-bottom:14px; padding:15px 18px; }
.device-toolbar > div { margin-right:auto; }
.device-toolbar > div strong, .device-toolbar > div small { display:block; }
.device-toolbar label { display:grid; gap:5px; font-size:.72rem; font-weight:800; color:var(--muted); }
.device-toolbar input, .device-toolbar select { min-width:180px; padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); }
.device-toolbar button { padding:9px 13px; }
.device-caveat { display:flex; gap:12px; align-items:flex-start; padding:14px 17px; margin-bottom:18px; border:1px solid #ead5b7; border-radius:12px; background:#fff9ef; }
.device-caveat > span { width:26px; height:26px; display:grid; place-items:center; flex:none; border-radius:50%; background:#fff0d8; color:#996018; font-weight:900; }
.device-caveat p { margin:4px 0 0; color:var(--muted); font-size:.84rem; line-height:1.45; }
@media(max-width:720px){.device-toolbar{align-items:stretch;flex-direction:column}.device-toolbar>div{margin-right:0}.device-toolbar input,.device-toolbar select{width:100%;min-width:0}}
.login-card label span { float:right; color:var(--muted); font-size:.7rem; text-transform:uppercase; }
.field-help { margin-top:-8px!important; line-height:1.35; }
.signin-help { display:flex; gap:10px; align-items:flex-start; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.signin-help>span { color:var(--teal); }
.signin-help p { display:grid; gap:3px; margin:0; }
.signin-help small { line-height:1.4; }
.current-boundary { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.8fr); gap:30px; align-items:center; margin-bottom:18px; border-left:5px solid var(--teal); }
.current-boundary h2 { margin:4px 0 7px; }.current-boundary p { margin:0; color:var(--muted); line-height:1.5; }
.boundary-list { display:grid; gap:8px; }.boundary-list span { display:flex; gap:9px; align-items:center; font-size:.86rem; font-weight:700; }.boundary-list i { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--teal-soft); color:var(--teal); font-style:normal; }.boundary-list .restricted { color:var(--muted); }.boundary-list .restricted i { background:#f1eee9; color:#806e5c; }
@media(max-width:700px){.current-boundary{grid-template-columns:1fr}}
.portal-loading { min-height:100vh; display:flex; justify-content:center; align-items:center; gap:15px; background:var(--ivory); color:var(--ink); }
.portal-loading img { width:48px; height:48px; object-fit:contain; }
.portal-loading div { display:grid; gap:4px; }.portal-loading span { color:var(--muted); font-size:.85rem; }

@media (max-height: 760px) and (min-width: 901px) {
  .brand { padding-top: 18px; padding-bottom: 14px; }
  nav a { padding-top: 10px; padding-bottom: 10px; }
  .shell aside .nav-note { margin-bottom: 14px; }
}

/* Keep the packaging reference concentrated at entry points, not on care screens. */
.login-welcome {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(145deg, var(--navy), #164b61);
}

.login-welcome::before,
.login-welcome::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  opacity: .2;
}

.login-welcome::before {
  width: 280px;
  height: 280px;
  right: -90px;
  top: -80px;
  border: 34px solid var(--aqua);
  box-shadow: 0 0 0 24px rgba(233, 127, 98, .45);
}

.login-welcome::after {
  width: 150px;
  height: 150px;
  right: 70px;
  bottom: -85px;
  border: 25px solid var(--gold);
}

.portal-login .login-card {
  border-top: 5px solid var(--gold);
}

.login-trust {
  color: #a9e1da;
}

@media (prefers-reduced-motion: no-preference) {
  .primary { transition: background-color .15s ease, transform .15s ease; }
  .primary:hover { transform: translateY(-1px); }
}

/* Portal interaction and small-screen accessibility */
.portal-page-fields,.portal-fields{border:0;padding:0;margin:0;min-width:0}
.portal-fields{display:grid;gap:16px}.portal-fields label{display:grid;gap:6px}
.portal-fields input,.portal-fields select,.portal-fields textarea{width:100%;padding:10px;border:1px solid #83939d;border-radius:8px}
button,a.link-button,input:not([type=checkbox]):not([type=radio]),select{min-height:44px}
input[type=checkbox],input[type=radio]{min-width:20px;min-height:20px}
button:disabled{cursor:not-allowed;opacity:.65}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid #075c77;outline-offset:3px}
.skip-link{position:fixed;left:12px;top:-100px;background:#fff;color:#12364b;padding:12px;z-index:2000}
.skip-link:focus{top:12px}
[role=alert]{border-left:4px solid #975322}
@media(max-width:700px){
 .shell main,.shell article,.card,fieldset{min-width:0;max-width:100%}
 .page-head,.section-title,.user-actions,.form-actions,.head-actions{flex-wrap:wrap;gap:12px}
 .form-grid,.form-row,.profile-facts,.context-columns,.experience-layout,.music-layout,.notification-layout,.setup-grid,.access-summary,.audit-summary{grid-template-columns:minmax(0,1fr)!important}
 .card{padding:18px}article{padding:16px}.secret-output code{overflow-wrap:anywhere;white-space:pre-wrap}
 .planner-item,.song-row,.photo-row{flex-wrap:wrap}.timeline>div{grid-template-columns:12px minmax(0,1fr)}.timeline time{grid-column:2}
 .save-bar{position:static;flex-wrap:wrap;gap:12px}nav a{white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.shell{width:100%;grid-template-columns:260px minmax(0,1fr)}.shell>aside,.shell>main{min-width:0;max-width:100%}.shell>main{width:100%}.shell article{width:100%;max-width:1500px}.shell nav{min-width:0;max-width:100%}
@media(max-width:900px){.shell{grid-template-columns:minmax(0,1fr)}.shell>aside{width:100%}.shell nav{width:100%;overflow-x:auto}.overview-status,.overview-main,.overview-lower{grid-template-columns:minmax(0,1fr)!important}.page-head{flex-wrap:wrap}.page-head h1{overflow-wrap:anywhere}}