:root{
  --bg: #f6f3ee;
  --bg-alt: #efe9e1;
  --panel: #ffffff;
  --panel-alt: #fcfaf7;
  --accent: #0f7a6b;
  --accent-dark: #085c52;
  --accent-soft: #bfe6dd;
  --text: #1c2524;
  --text-soft: #556463;
  --border: #e0d8ce;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 18px 40px rgba(17,41,38,0.12);
  --shadow-soft: 0 10px 24px rgba(17,41,38,0.08);
  --glow: 0 0 0 6px rgba(15,122,107,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Source Sans 3", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 500px at -10% -20%, rgba(15,122,107,0.14) 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 10%, rgba(177,124,56,0.12) 0%, transparent 55%),
    linear-gradient(180deg, #f9f6f1 0%, #f3eee6 50%, #f6f3ee 100%);
}

h1,h2,h3,h4{
  font-family: "Sora", "Source Sans 3", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 0.2px;
}

.container{width:min(1200px, 92%); margin-inline:auto}

/* Header */
.site-header{
  background:linear-gradient(135deg, #ffffff 0%, #fbf8f2 100%);
  border-bottom:1px solid var(--border);
  box-shadow:0 12px 30px rgba(17,41,38,0.08);
}
.header-content{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 0;
  gap:24px;
}
.brand{display:flex; align-items:center; gap:16px; text-decoration:none; color:var(--text)}
.brand-logo{width:68px; height:68px; border-radius:18px; background:#efe6da; object-fit:cover}
.brand-copy{display:flex; flex-direction:column}
.brand-name{font-size:1.45rem; font-weight:700; letter-spacing:.5px}
.brand-tagline{font-size:.95rem; color:var(--text-soft)}
.header-cta{display:flex; gap:12px; flex-wrap:wrap}

/* Page Shell */
.page-shell{
  width:min(1200px, 94%);
  margin:0 auto;
  padding-block:36px 52px;
  display:grid;
  grid-template-columns:minmax(230px, 280px) 1fr;
  gap:36px;
  align-items:start;
}

/* Side Navigation */
.site-nav{position:relative}
.nav-toggle{
  display:none;
  width:100%;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  font-weight:600;
  text-align:left;
}
.nav-panel{
  position:sticky;
  top:32px;
  background:linear-gradient(160deg, #ffffff 0%, #fbf8f4 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px 22px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:22px;
}
.nav-panel ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.nav-panel a{
  display:block;
  padding:10px 14px;
  border-radius:var(--radius-sm);
  text-decoration:none;
  color:var(--text);
  font-weight:600;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.nav-panel a:hover{background:rgba(15,122,107,0.08); transform:translateX(2px)}
.nav-panel a.active{background:rgba(15,122,107,0.14); color:var(--accent-dark)}
.nav-title{text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color:var(--text-soft)}
.nav-note{display:grid; gap:4px; padding:14px; border-radius:var(--radius-sm); background:var(--panel-alt); font-size:.9rem; color:var(--text-soft); border:1px solid rgba(15,122,107,0.12)}
.nav-note strong{color:var(--accent-dark)}
.nav-login{
  background:var(--panel-alt);
  border:1px solid rgba(15,122,107,0.18);
  border-radius:var(--radius-sm);
  padding:14px 12px;
  box-shadow:none;
  display:grid;
  gap:10px;
}
.nav-login h2{margin:0; font-size:1.05rem;}
.nav-login .login-intro{margin:0; font-size:.85rem; color:var(--text-soft);}
.nav-login .form{gap:10px;}
.nav-login .field{gap:6px;}
.nav-login .field-row{gap:6px; flex-wrap:wrap;}
.nav-login .btn.full{margin-top:4px; padding:9px 14px;}
.nav-login input{padding:9px 11px;}
.nav-login .pw-toggle{padding:5px 11px; font-size:.78rem;}
.nav-login--welcome{gap:12px;}
.nav-login--welcome .login-intro{margin:0; font-size:.9rem; color:var(--text-soft);}
.nav-login-actions{display:grid; gap:8px;}
.nav-login-actions .btn{width:100%;}

/* Main */
.site-main{display:grid; gap:48px}

/* Hero */
.hero{position:relative}
.hero-surface{
  background:linear-gradient(140deg, rgba(15,122,107,0.16) 0%, rgba(255,255,255,0.94) 65%);
  border:1px solid rgba(15,122,107,0.18);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:36px;
  display:grid;
  gap:32px;
  grid-template-columns:minmax(0, 1fr);
}
.hero h1{margin:0 0 18px; font-size:clamp(28px, 4vw, 44px); line-height:1.15}
.hero p{margin:0; color:var(--text-soft); font-size:1.05rem}
.hero-actions{display:flex; gap:12px; margin:24px 0 16px; flex-wrap:wrap}
.hero-facts{margin:0; padding:0; list-style:none; display:grid; gap:10px; font-size:.95rem; color:var(--text-soft)}

/* Form Basics */
.form{display:grid; gap:16px}
.field{display:grid; gap:8px}
label{font-weight:600; color:var(--text)}
input, textarea{
  background:var(--panel-alt);
  color:var(--text);
  border:1px solid rgba(15,122,107,0.22);
  padding:12px 14px;
  border-radius:var(--radius-sm);
  outline:none;
  transition:border .2s ease, box-shadow .2s ease, background .2s ease;
}
input:focus, textarea:focus{border-color:var(--accent); box-shadow:var(--glow); background:#fff}
.password-wrap{position:relative}
.pw-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:6px 14px;
  font-size:.85rem;
  cursor:pointer;
}
.checkbox{display:flex; align-items:center; gap:8px; user-select:none}
.field-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.hint{font-size:.82rem; color:var(--text-soft)}
.form-note{font-size:.9rem; color:var(--text-soft)}
.form-alert{font-size:.9rem; padding:10px 12px; border-radius:var(--radius-sm); display:none}
.form-alert.ok{display:block; background:#e6f5f1; border:1px solid rgba(15,122,107,0.32); color:var(--accent-dark)}
.form-alert.err{display:block; background:#fbe9e7; border:1px solid #f3b4ac; color:#a33b2a}

/* Buttons */
.btn{
  display:inline-block;
  text-decoration:none;
  text-align:center;
  padding:12px 20px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  font-weight:600;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, border .2s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 20px rgba(15,122,107,0.18)}
.btn.primary{background:linear-gradient(135deg, #0f7a6b 0%, #0d6d60 100%); color:#fff; border-color:#0f7a6b}
.btn.primary:hover{background:linear-gradient(135deg, #0b665b 0%, #095d54 100%); border-color:#0b665b}
.btn.ghost{background:var(--panel-alt); color:var(--accent-dark); border-color:rgba(15,122,107,0.3)}
.btn.ghost:hover{background:rgba(15,122,107,0.08)}
.btn.small{padding:8px 16px; font-size:.9rem}
.btn.full{width:100%}

/* Sections */
.section{display:block}
.section-inner{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px;
  box-shadow:var(--shadow);
  display:grid;
  gap:24px;
  position:relative;
  overflow:hidden;
}
.section-inner::before{
  content:"";
  position:absolute;
  inset:-40% -40% auto auto;
  width:260px;
  height:260px;
  background:radial-gradient(circle, rgba(15,122,107,0.18), transparent 70%);
  opacity:.6;
  pointer-events:none;
}
.section.alt .section-inner{background:var(--panel-alt);}
.legal-content{max-width:680px; display:grid; gap:18px;}
.legal-content h1{margin:0; font-size:2rem;}
.legal-content h2{margin-top:12px; margin-bottom:4px; font-size:1.25rem;}
.legal-content h3{margin:0; font-size:1.05rem; color:var(--text-soft);}
.legal-content p{margin:0; line-height:1.6; color:var(--text-soft);}
.legal-content a{color:var(--accent-dark);}
.section-copy{display:grid; gap:16px}
.list{margin:0; padding-left:18px; color:var(--text-soft)}
.list li{margin-bottom:6px}
.card{
  background:linear-gradient(180deg, #ffffff 0%, #fbf8f4 100%);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:24px;
  box-shadow:var(--shadow-soft);
  animation:floatIn .6s ease both;
}
.cards{display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}
.dashboard-greeting{display:grid; gap:12px;}
.dashboard-greeting h1{margin:0;}
.dashboard-greeting p{margin:0; color:var(--text-soft);}
.dashboard-cards .card .btn{margin-top:14px;}
.cards .card h2,
.cards .card h3{margin-top:0}

/* Tables */
.table-wrap{overflow-x:auto}
.table{
  width:100%;
  border-collapse:collapse;
  min-width:560px;
  background:var(--panel);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.table th,
.table td{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:middle;
  font-size:.95rem;
}
.table th{font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-soft)}
.table tr:last-child td{border-bottom:none}
.table input,
.table select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(15,122,107,0.2);
  background:var(--panel-alt);
}

/* Image grid */
.image-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:12px;
}
.image-tile{
  margin:0;
  border-radius:14px;
  overflow:hidden;
  background:var(--panel-alt);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}
.image-tile img{
  width:100%;
  height:140px;
  object-fit:cover;
  display:block;
}

/* Upload progress */
.upload-progress{
  width:100%;
  height:10px;
  background:rgba(15,122,107,0.1);
  border-radius:999px;
  overflow:hidden;
  margin:12px 0 6px;
}
.upload-progress__bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, #0f7a6b 0%, #0d6d60 100%);
  transition:width .2s ease;
}

/* Contact */
.contact-grid{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}

/* Footer */
.site-footer{
  background:#1c2524;
  color:#f6f3ee;
  padding:28px 0;
}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.footer-nav{display:flex; gap:14px; flex-wrap:wrap}
.footer-nav .link{color:#f6f3ee; text-decoration:none}
.footer-nav .link:hover{text-decoration:underline}

/* Utility */
.link{color:var(--accent-dark); text-decoration:none; font-weight:600}
.link:hover{text-decoration:underline}

/* Animation */
@keyframes floatIn{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* Focus */
:focus-visible{outline:none; box-shadow:var(--glow)}

/* Responsive */
@media (max-width: 1080px){
  .hero-surface{padding:30px}
}
@media (max-width: 880px){
  .page-shell{grid-template-columns:1fr;}
  .site-nav{order:-1}
  .nav-toggle{display:inline-block; margin-bottom:18px}
  .nav-panel{position:static; display:none}
  .nav-panel.show{display:flex}
}
@media (max-width: 520px){
  .hero-surface{padding:26px}
  .section-inner{padding:26px}
  .header-content{flex-direction:column; align-items:flex-start}
}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.nav-member-links{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.nav-member-links a{display:block;padding:9px 12px;border-radius:var(--radius-sm);text-decoration:none;color:var(--text);background:var(--panel);border:1px solid rgba(15,122,107,0.2);}
.nav-member-links a:hover{background:rgba(15,122,107,0.08);border-color:rgba(15,122,107,0.35);}