/* ═══════════════════════════════════════════
   nonimi Public Shell — shared navigation & layout
   ═══════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;height:100%}
body{
  font-family:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans Sinhala',sans-serif;
  color:#2D3F47;background:#fff;line-height:1.6;overflow-x:hidden;min-height:100vh;padding-top:56px;
  display:flex;flex-direction:column;
}
h1,h2,h3,h4,h5,h6,.shell-btn{font-family:'Geom','Noto Sans Sinhala',sans-serif}
img{max-width:100%;height:auto}
a{text-decoration:none}

/* ── lang toggle ── */
.lang-en [lang="si"]{display:none}
.lang-si [lang="en"]{display:none}

/* ═══════════════════════ TOP NAV ═══════════════════════ */
.shell-nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(30,27,75,0.94);backdrop-filter:blur(12px);
  padding:0 24px;display:flex;align-items:center;height:56px;
  border-bottom:1px solid rgba(79,109,122,0.12);
}
.shell-nav-left{display:flex;align-items:center;gap:20px;flex-shrink:0}
.shell-nav-logo{display:flex;align-items:center;gap:10px;color:#9DB5BF;font-size:16px;font-weight:700;transition:color .2s}
.shell-nav-logo:hover{color:#F0F4F5}
.shell-nav-logo img{height:28px;filter:brightness(0) invert(1) opacity(0.75)}
.shell-nav-center{flex:1;display:flex;justify-content:center;gap:4px;overflow-x:auto;padding:0 12px;scrollbar-width:none}
.shell-nav-center::-webkit-scrollbar{display:none}
.shell-nav-link{
  padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;color:#8CA3AF;
  white-space:nowrap;transition:all .2s;cursor:pointer;border:none;background:transparent;
}
.shell-nav-link:hover{background:rgba(255,255,255,0.06);color:#E0E8EB}
.shell-nav-link.active{color:#F0F4F5;background:rgba(221,110,66,0.2)}
.shell-nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.shell-lang-btn{
  border:1px solid rgba(255,255,255,0.2);background:transparent;color:#8CA3AF;
  padding:5px 12px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;transition:all .2s;
}
.shell-lang-btn:hover{background:rgba(255,255,255,0.08);color:#E0E8EB}
.shell-lang-btn.active{background:#DD6E42;border-color:#DD6E42;color:#fff}

.shell-auth-btn{
  padding:6px 16px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;transition:all .2s;
}
.shell-auth-btn.login{background:transparent;border:1px solid rgba(255,255,255,0.25);color:#B0C5CE}
.shell-auth-btn.login:hover{background:rgba(255,255,255,0.1);color:#fff}
.shell-auth-btn.register{background:#DD6E42;border:1px solid #DD6E42;color:#fff}
.shell-auth-btn.register:hover{background:#c96132}
.shell-user-menu{display:none;align-items:center;gap:10px}
.shell-user-name{color:#B0C5CE;font-size:13px;font-weight:600;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═══════════════════════ MAIN CONTENT ═══════════════════════ */
.shell-content{flex:1;display:flex;flex-direction:column}
.shell-page{display:none}
.shell-page.active{display:block}

/* ═══════════════════════ SIDEBAR (mobile toggle) ═══════════════════════ */
.shell-sidebar-toggle{display:none;background:none;border:none;color:#8CA3AF;padding:8px;cursor:pointer;font-size:20px}
@media(max-width:768px){
  .shell-nav-center{display:none}
  .shell-sidebar-toggle{display:block}
  .shell-nav{flex-wrap:wrap}
  body{padding-top:56px}
}

.shell-sidebar-overlay{display:none;position:fixed;inset:0;z-index:199;background:rgba(0,0,0,0.5)}
.shell-sidebar-overlay.open{display:block}
.shell-sidebar{
  position:fixed;top:56px;left:-280px;bottom:0;width:280px;z-index:199;
  background:rgba(15,10,46,0.98);backdrop-filter:blur(16px);
  border-right:1px solid rgba(79,109,122,0.12);
  transition:left .25s ease;padding:16px;overflow-y:auto;
}
.shell-sidebar.open{left:0}
.shell-sidebar-link{
  display:block;padding:12px 16px;border-radius:10px;font-size:14px;font-weight:600;
  color:#8CA3AF;transition:all .2s;cursor:pointer;border:none;background:transparent;width:100%;text-align:left;
}
.shell-sidebar-link:hover{background:rgba(255,255,255,0.06);color:#E0E8EB}
.shell-sidebar-link.active{color:#F0F4F5;background:rgba(221,110,66,0.2)}
.shell-sidebar-hr{border:none;border-top:1px solid rgba(79,109,122,0.15);margin:12px 0}

/* ═══════════════════════ AUTH MODALS ═══════════════════════ */
.shell-modal-overlay{display:none;position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);align-items:center;justify-content:center}
.shell-modal-overlay.open{display:flex}
.shell-modal-box{
  background:#1a1440;border:1px solid rgba(167,139,250,0.15);border-radius:16px;
  padding:32px 28px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,0.4);
}
.shell-modal-box h2{color:#F0F4F5;font-size:20px;margin-bottom:20px}
.shell-field{margin-bottom:16px}
.shell-field label{display:block;color:#8CA3AF;font-size:13px;margin-bottom:6px;font-weight:500}
.shell-field input,.shell-field select,.shell-field textarea{
  width:100%;padding:10px 14px;background:rgba(255,255,255,0.06);
  border:1px solid rgba(167,139,250,0.15);border-radius:8px;color:#F0F4F5;font-size:14px;transition:border-color .2s;
}
.shell-field input:focus,.shell-field select:focus,.shell-field textarea:focus{outline:none;border-color:#DD6E42}
.shell-modal-error{color:#f87171;font-size:13px;margin-bottom:12px;min-height:18px}
.shell-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.shell-btn-primary{background:#DD6E42;color:#fff;border:none;padding:10px 24px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}
.shell-btn-primary:hover{background:#c96132}
.shell-btn-secondary{background:transparent;border:1px solid rgba(167,139,250,0.25);color:#6A8A99;padding:10px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}
.shell-btn-secondary:hover{background:rgba(79,109,122,0.08)}

/* ═══════════════════════ FOOTER ═══════════════════════ */
.shell-footer{background:#2D3F47;color:#8CA3AF;padding:40px 24px;text-align:center;font-size:13px;margin-top:auto}
.shell-footer img{height:28px;margin-bottom:12px;filter:brightness(0) invert(1) opacity(0.65)}
.shell-footer a{color:#DD6E42}
.shell-footer hr{border:none;border-top:1px solid rgba(255,255,255,0.1);margin:16px auto;max-width:300px}
.shell-footer .tagline{color:#DD6E42;font-size:12px}

/* ── Loading state ── */
.shell-loader{display:flex;align-items:center;justify-content:center;padding:80px 24px;color:#8CA3AF}
.shell-loader::after{content:'';width:28px;height:28px;border:3px solid rgba(79,109,122,0.2);border-top-color:#DD6E42;border-radius:50%;animation:spinner .6s linear infinite;margin-left:10px}
@keyframes spinner{to{transform:rotate(360deg)}}