:root{ --ink:#0B2238; --bg:#F2EEDC; --card:#ffffff; --muted:#475569; --link:#0b4aa8; --brand:#0B2238; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:#0b1b2b;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;}
a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.navbar{position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e7eb;z-index:50}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;color:#0b1b2b}
.brand-logo{width:28px;height:28px;border-radius:8px;background:var(--brand);display:inline-block}
.navlinks{display:flex;gap:1rem}
.navlinks a{padding:.35rem .5rem;border-radius:8px}
.navlinks a.active{background:#e6eefc}
.nav-user-name{background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;padding:.35rem .75rem;font-weight:700;cursor:pointer}
h1{font-family: Georgia,serif;color:#0B2238;font-size:2.1rem;margin:1.4rem 0 .6rem}
h2{font-family: Georgia,serif;color:#0B2238;font-size:1.6rem;margin:1.2rem 0 .6rem}
.hero{background:#0B2238;color:#fff}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;padding:2.4rem 0}
.btn{display:inline-block;border:1px solid #cbd5e1;padding:.6rem .9rem;border-radius:10px;background:#fff;cursor:pointer}
.btn-primary{background:#0b4aa8;color:#fff;border-color:#0b4aa8}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:1rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.pill{display:inline-block;background:#e6f7ff;border:1px solid #bae6fd;padding:.25rem .5rem;border-radius:999px;font-size:.9rem}
.footer{margin-top:2rem;border-top:1px solid #e5e7eb;background:#fff}
.footer .container{display:flex;justify-content:space-between;padding:1rem 1rem}
.headshot{width:220px;height:220px;border-radius:9999px;object-fit:cover;display:block;margin:0 auto 1rem;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.section{margin-top:1rem}
/* auth */
.auth-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;z-index:1000;}
.auth-modal{position:fixed;inset:0;display:none;justify-content:center;align-items:center;z-index:1001;}
.auth-card{background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);width:min(520px,92vw);padding:1rem;}
.auth-tabs{display:flex;gap:.5rem;margin-bottom:.75rem;}
.auth-tabs button{flex:1;padding:.6rem;border-radius:10px;border:1px solid #e5e7eb;background:#f9fafb;font-weight:700;cursor:pointer}
.auth-tabs button.active{background:#eef2ff;border-color:#c7d2fe;color:#1e3a8a}
.auth-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.75rem;}
.auth-note{font-size:.9rem;color:#475569;margin-top:.5rem;}
.auth-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:10px;padding:.4rem .6rem;margin:.5rem 0;display:none;}


/* Production authentication UI */
.user-menu{position:relative}
.user-menu-panel{
  position:absolute;right:0;top:calc(100% + .5rem);min-width:180px;
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;
  box-shadow:0 14px 35px rgba(0,0,0,.16);padding:.4rem;z-index:100;
}
.user-menu-panel a,.user-menu-panel button{
  display:block;width:100%;text-align:left;padding:.65rem .75rem;border:0;
  background:transparent;color:#0b1b2b;border-radius:8px;font:inherit;cursor:pointer;
}
.user-menu-panel a:hover,.user-menu-panel button:hover{background:#f1f5f9;text-decoration:none}
.auth-shell{max-width:540px;margin:2.5rem auto}
.auth-card-main{background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 12px 35px rgba(0,0,0,.10);padding:1.35rem}
.auth-card-main input{margin-top:.35rem;margin-bottom:.85rem}
.auth-message{display:none;padding:.7rem .8rem;border-radius:10px;margin:.7rem 0}
.auth-message.error{display:block;background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.auth-message.success{display:block;background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.auth-switch{text-align:center;margin-top:1rem;color:#475569}
.auth-link-button{background:none;border:0;color:#0b4aa8;padding:0;cursor:pointer;font:inherit}
.profile-badge{display:inline-block;padding:.35rem .65rem;border-radius:999px;background:#fff7d6;border:1px solid #e5c766;font-weight:700}
@media (max-width:820px){
  .navlinks{gap:.35rem;font-size:.9rem;overflow-x:auto}
  .grid3,.hero-grid{grid-template-columns:1fr}
}

.form-wrap{max-width:760px;margin:1rem 0 2rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-grid .full{grid-column:1/-1}
.form-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:1.2rem}
.form-card label{display:block;font-weight:700;margin:.25rem 0}
.form-card input,.form-card textarea,.form-card select{width:100%;padding:.7rem .8rem;border:1px solid #cbd5e1;border-radius:10px;font:inherit;background:#fff}
.form-card textarea{min-height:140px;resize:vertical}
.form-help{color:#475569;font-size:.95rem}
@media (max-width:700px){.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}}

/* V1 multilingual / RTL behavior */
html[dir="rtl"] body{direction:rtl;text-align:right}
html[dir="rtl"] .navbar-inner,html[dir="rtl"] .footer .container{direction:rtl}
html[dir="rtl"] .user-menu-panel{right:auto;left:0}
html[dir="rtl"] .user-menu-panel a,html[dir="rtl"] .user-menu-panel button{text-align:right}
html[dir="rtl"] input:not([dir="ltr"]),html[dir="rtl"] textarea,html[dir="rtl"] select{text-align:right}
html[dir="rtl"] .hero-grid{direction:rtl}