:root{
  --bg:linear-gradient(180deg,#fff8fb 0%,#ffffff 45%,#f4f8ff 100%);
  --text:#1f2937;
  --muted:#5f6b7a;
  --card:rgba(255,255,255,0.82);
  --card-border:rgba(255,255,255,0.72);
  --shadow:0 20px 60px rgba(27,39,69,0.08);
  --button-bg:#ffffff;
  --button-border:#e7eaf0;
  --button-active:#fce7f3;
  --accent:#ef7ea9;
  --eyebrow-bg:#ffe6ef;
  --eyebrow-text:#be456e;
  --updates-bg:#eff8ff;
  --photos-bg:#fff1f5;
  --registry-bg:#fef3c7;
  --link:#9d174d;
  --link-hover:#831843;
  --input-bg:#ffffff;
}

body[data-theme="dark"]{
  --bg:linear-gradient(180deg,#020617 0%,#0b1220 50%,#020617 100%);
  --text:#f8fafc;
  --muted:#c1cad7;
  --card:rgba(255,255,255,0.06);
  --card-border:rgba(255,255,255,0.10);
  --shadow:0 24px 80px rgba(0,0,0,0.35);
  --button-bg:rgba(255,255,255,0.08);
  --button-border:rgba(255,255,255,0.10);
  --button-active:rgba(244,114,182,0.14);
  --accent:#f9a8d4;
  --eyebrow-bg:rgba(244,114,182,0.14);
  --eyebrow-text:#fecdd3;
  --updates-bg:rgba(56,189,248,0.12);
  --photos-bg:rgba(244,114,182,0.12);
  --registry-bg:rgba(251,191,36,0.16);
  --link:#fde68a;
  --link-hover:#fef3c7;
  --input-bg:rgba(255,255,255,0.06);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  font-family:Inter,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
}

img{
  display:block;
  width:100%;
}

.hidden{display:none !important}

.page-shell{padding:24px}

.topbar{
  max-width:1180px;
  margin:0 auto 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

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

.brand{
  font-weight:800;
  letter-spacing:-0.03em;
  font-size:1.05rem;
}

.admin-link,
.theme-toggle,
.button{
  border:1px solid var(--button-border);
  background:var(--button-bg);
  color:var(--text);
  padding:12px 16px;
  border-radius:16px;
  cursor:pointer;
  box-shadow:var(--shadow);
  font:inherit;
  text-decoration:none;
}

.container{max-width:1180px;margin:0 auto}

.card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:32px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}

.hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  overflow:hidden;
}

.hero-copy{padding:48px 52px}

.eyebrow{
  display:inline-flex;
  width:fit-content;
  padding:8px 14px;
  border-radius:999px;
  background:var(--eyebrow-bg);
  color:var(--eyebrow-text);
  font-size:.95rem;
  font-weight:600;
}

h1{
  font-size:clamp(2.5rem,6vw,4.8rem);
  line-height:.96;
  margin:18px 0;
  letter-spacing:-0.05em;
}

h1 span{color:var(--accent)}

.hero p,
.note-card p,
.section-header p,
.panel-card p,
.admin-subtitle,
.status-message{
  color:var(--muted);
  line-height:1.75;
}

.button-row{
  display:flex;
  gap:16px;
  margin-top:24px;
  flex-wrap:wrap;
}

.button{
  font-weight:600;
  transition:transform .18s ease, background .18s ease;
}

.button:hover,
.button:focus-visible,
.admin-link:hover,
.theme-toggle:hover{
  transform:translateY(-2px);
}

.button.is-active{
  background:var(--button-active);
}

.feature-panel{
  margin-top:20px;
  min-height:150px;
  width:100%;
}

.panel-card{
  display:none;
  padding:22px;
  border-radius:22px;
  min-height:150px;
}

.panel-card.is-active{display:block}
.panel-card-registry{background:var(--registry-bg)}
.panel-card-updates{background:var(--updates-bg)}
.panel-card-photos{background:var(--photos-bg)}

.registry-link{
  display:inline-block;
  margin-top:10px;
  color:var(--link);
  font-weight:700;
  text-decoration:none;
}

.registry-link:hover{
  color:var(--link-hover);
  text-decoration:underline;
}

.hero-photos{
  padding:28px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.photo-large,
.photo-small{
  object-fit:cover;
  border-radius:26px;
}

.photo-large{
  grid-column:1/-1;
  min-height:300px;
  height:300px;
}

.photo-small{
  min-height:190px;
  height:190px;
}

.note-section,
.gallery-section{margin-top:40px}
.gallery-card,
.note-card{padding:32px}
.section-header{margin-bottom:18px}

h2, .admin-title{
  margin:0;
  font-size:1.8rem;
  letter-spacing:-0.03em;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.gallery-item{
  overflow:hidden;
  border-radius:24px;
  border:1px solid var(--card-border);
  background:rgba(255,255,255,.04);
}

.gallery-item img{
  height:240px;
  object-fit:cover;
  transition:transform .25s ease;
}

.gallery-item:hover img{
  transform:scale(1.03);
}

.admin-login,
.admin-editor{
  padding:32px;
}

.admin-form,
.editor-grid{
  margin-top:20px;
}

.horizontal-login{
  display:flex;
  align-items:flex-end;
  gap:12px;
}

.field-inline{
  flex:1;
}

.field-inline input{
  width:100%;
}

.editor-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.editor-column{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field span{
  font-weight:600;
  min-height:1.2em;
}

.field input,
.field textarea{
  width:100%;
  border:1px solid var(--button-border);
  background:var(--input-bg);
  color:var(--text);
  border-radius:16px;
  padding:14px 16px;
  font:inherit;
}

.admin-header-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}

.admin-actions{
  grid-column:1 / -1;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.subtle-button{
  background:transparent;
}

.status-message{
  grid-column:1 / -1;
  margin:14px 0 0;
}

@media(max-width:940px){
  .hero{grid-template-columns:1fr}
  .hero-copy,.hero-photos,.gallery-card,.note-card,.admin-login,.admin-editor{padding:24px}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .editor-grid{grid-template-columns:1fr}
  .admin-header-row{flex-direction:column}
}

@media(max-width:560px){
  .page-shell{padding:14px}
  .topbar{flex-direction:column;align-items:stretch}
  .topbar-actions{flex-direction:column;align-items:stretch}
  .theme-toggle,.admin-link{width:100%}
  .button-row{flex-direction:column}
  .gallery-grid{grid-template-columns:1fr}
  .horizontal-login{
    flex-direction:column;
    align-items:stretch;
  }
  .horizontal-login .button{
    width:100%;
  }
}


/* Mobile topbar buttons fix */
@media(max-width:560px){
  .topbar-actions{
    flex-direction:row !important;
    gap:8px;
  }

  .topbar-actions .admin-link,
  .topbar-actions .theme-toggle{
    flex:1;
    padding:8px 10px;
    font-size:0.85rem;
  }
}


/* Icon buttons mobile */
@media(max-width:560px){
  .topbar{
    flex-direction:row;
  }

  .topbar-actions{
    margin-left:auto;
    flex-direction:row !important;
    gap:8px;
  }

  .topbar-actions .admin-link,
  .topbar-actions .theme-toggle{
    width:40px;
    height:40px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
  }

  .theme-toggle-label{
    display:none;
  }
}


/* Animated theme toggle */
.theme-toggle{
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.theme-toggle .theme-toggle-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .25s ease, opacity .2s ease;
  transform-origin:center;
}

.theme-toggle.is-spinning .theme-toggle-label{
  animation: themeSpinSwap .45s ease;
}

@keyframes themeSpinSwap{
  0%{ transform: rotate(0deg) scale(1); opacity:1; }
  45%{ transform: rotate(120deg) scale(.8); opacity:.7; }
  100%{ transform: rotate(180deg) scale(1); opacity:1; }
}


/* Make icon buttons only as big as icons */
.topbar-actions .admin-link,
.topbar-actions .theme-toggle{
  width:40px;
  height:40px;
  padding:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Remove extra spacing from label container */
.theme-toggle-label{
  display:flex;
  align-items:center;
  justify-content:center;
}


/* Back arrow hover animation */
.topbar-actions .admin-link{
  transition: transform .18s ease, background .18s ease;
}

.topbar-actions .admin-link:hover,
.topbar-actions .admin-link:focus-visible{
  transform: translateX(-3px);
}

/* Icon-only admin lock buttons */
#loginForm .admin-submit,
#logoutButton{
  min-width: 48px;
  width: 48px;
  height: 48px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
}

#loginForm.horizontal-login{
  align-items: center;
}

#loginForm.horizontal-login .field-inline{
  flex: 1;
}

/* keep save button normal */
.admin-actions .admin-submit{
  width: auto;
  min-width: 0;
  height: auto;
  padding: 12px 16px !important;
  font-size: inherit;
}

/* small hover motion for lock icons */
#loginForm .admin-submit:hover,
#logoutButton:hover,
#loginForm .admin-submit:focus-visible,
#logoutButton:focus-visible{
  transform: translateY(-2px) scale(1.03);
}


/* Clean admin login row alignment */
#loginForm.horizontal-login{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 48px;
  gap:12px;
  align-items:center;
}

#loginForm.horizontal-login .field-inline{
  min-width:0;
}

#loginForm.horizontal-login .field-inline span{
  display:none;
}

#loginForm.horizontal-login .field-inline input{
  width:100%;
  height:48px;
  margin:0;
}

#loginForm.horizontal-login .admin-submit{
  width:48px;
  min-width:48px;
  height:48px;
  margin:0;
  padding:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

@media(max-width:560px){
  #loginForm.horizontal-login{
    grid-template-columns:minmax(0,1fr) 48px;
    gap:10px;
  }
}


/* Bottom gallery link */
.extra-link{
  margin-top:40px;
  text-align:center;
}

.gallery-link{
  display:inline-block;
  padding:12px 18px;
  border-radius:14px;
  border:1px solid var(--button-border);
  background:var(--button-bg);
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  box-shadow:var(--shadow);
  transition:transform .18s ease, background .18s ease;
}

.gallery-link:hover{
  transform:translateY(-2px);
}