:root{--bg:#f3f1ec;--panel:#fff;--ink:#1d2433;--mute:#6b7385;--line:#d9d6cd;--bar:#8aa0c8;--cmp:#f2a93b;--wr:#e4572e;--hole:#8e5bd6;--ok:#1f9d8a;--code:#f7f6f2;--act:#fff0c9;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

@media (prefers-color-scheme:dark){:root:not([data-theme]){--bg:#0f1420;--panel:#171e2e;--ink:#e8ecf5;--mute:#8d97ad;--line:#2a3348;--bar:#4d6592;--code:#121827;--act:#3a3216}}
:root[data-theme="dark"]{--bg:#0f1420;--panel:#171e2e;--ink:#e8ecf5;--mute:#8d97ad;--line:#2a3348;--bar:#4d6592;--code:#121827;--act:#3a3216}
/* explicit light override */
:root[data-theme="light"]{--bg:#f3f1ec;--panel:#fff;--ink:#1d2433;--mute:#6b7385;--line:#d9d6cd;--bar:#8aa0c8;--cmp:#f2a93b;--wr:#e4572e;--hole:#8e5bd6;--ok:#1f9d8a;--code:#f7f6f2;--act:#fff0c9}
/* Midnight — deeper contrast */
:root[data-theme="midnight"]{--bg:#070a12;--panel:#0e1420;--ink:#f1f5ff;--mute:#8b96b3;--line:#222c44;--bar:#5b78b8;--cmp:#ffb347;--wr:#ff6b47;--hole:#a97bff;--ok:#2fd6b6;--code:#0a0f1a;--act:#3d2f0e}
/* Paper — warm, low-glare light */
:root[data-theme="paper"]{--bg:#f4ecd8;--panel:#fbf6e9;--ink:#2b2a26;--mute:#7a7364;--line:#ddcfb0;--bar:#9a8fb5;--cmp:#e0982b;--wr:#c74a2b;--hole:#7d5bbd;--ok:#1f8f7c;--code:#f7f0dd;--act:#fbe9b8}

html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%;overflow-x:hidden}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "Noto Sans Devanagari",system-ui,sans-serif;overflow-x:hidden;width:100%;max-width:100vw}
button{touch-action:manipulation}
[hidden]{display:none!important}

.view{min-height:100vh;width:100%;max-width:100vw;overflow-x:hidden;box-sizing:border-box}

/* Global Nav / Header */
header{padding:14px 20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--panel)}
.hd{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
h1{font-size:20px;margin:0;font-weight:700}
.brand-link{display:flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;color:inherit;flex-shrink:0}
.brand-link span{white-space:nowrap}
.brand-icon{width:24px;height:24px;color:var(--hole);flex-shrink:0}
.brand-logo-img,
.brand-link img,
header h1 img{
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  max-width:24px!important;
  min-height:24px!important;
  max-height:24px!important;
  aspect-ratio:1/1;
  object-fit:contain;
  border-radius:6px;
  flex-shrink:0;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  display:inline-block;
  vertical-align:middle;
}

/* Nav Links for Views */
.nav-links{display:flex;gap:6px;align-items:center}
.nav-btn{border:1px solid transparent;background:transparent;color:var(--mute);padding:6px 12px;border-radius:8px;font:600 13px inherit;cursor:pointer;transition:all .18s ease}
.nav-btn:hover{color:var(--ink);background:var(--code)}
.nav-btn.active{color:var(--ink);background:var(--code);border-color:var(--line)}

.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:6px 12px;border-radius:8px;font:inherit;cursor:pointer;transition:all .15s}
.tabs button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

select.lang{display:inline-block;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:6px 10px;border-radius:8px;font:inherit;min-height:40px;cursor:pointer}
.sbtn{border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:6px 10px;border-radius:8px;font:inherit;min-height:40px;cursor:pointer}
.theme-toggle-btn{display:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;cursor:pointer;transition:all .15s}
.mobile-snd-btn{display:none!important}

/* Developer signature with auto glow */
.byline{display:flex;gap:6px;align-items:baseline;font-size:12.5px;color:var(--mute);white-space:nowrap}
.byline-label{opacity:.8}
.byline-tag{display:inline-flex;align-items:baseline;gap:6px;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--mute)}
.byline-name{
  font-weight:700;font-size:14px;letter-spacing:.02em;
  background:linear-gradient(90deg,var(--ok),var(--hole),var(--ok));
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hue 6s linear infinite, glow 3.4s ease-in-out infinite alternate;
}
@keyframes glow{
  from{filter:drop-shadow(0 0 0px rgba(0,0,0,0)) drop-shadow(0 0 2px color-mix(in srgb,var(--ok) 45%,transparent))}
  to  {filter:drop-shadow(0 0 6px color-mix(in srgb,var(--hole) 75%,transparent)) drop-shadow(0 0 14px color-mix(in srgb,var(--ok) 60%,transparent))}
}
@keyframes hue{from{background-position:0% 50%}to{background-position:200% 50%}}

.site-foot{
  text-align:center;padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);margin-top:24px;
  font-size:13px;color:var(--mute);
}
.foot-name{font-size:16px}

.chip{display:inline-block;background:var(--code);border:1px solid var(--line);border-radius:8px;padding:3px 10px;font:600 12px "Noto Sans Devanagari",sans-serif;color:var(--ink)}
.bd{display:inline-block;background:linear-gradient(135deg,var(--hole),#6a3fb0);color:#fff;border-radius:999px;padding:3px 12px;font-weight:700;font-size:12px;letter-spacing:.02em;box-shadow:0 2px 6px rgba(0,0,0,.15)}

@media(max-width:820px){
  header{padding:8px 10px;gap:0}
  .hd{width:100%;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:6px}
  #app .hd{flex-wrap:wrap;gap:6px}
  #app .hd::after{content:"";width:100%;height:0;order:3}
  #app .hd #cat{order:4;flex:1 1 auto;min-width:120px}
  #app .hd #lang{order:5;flex:0 0 auto}
  header .byline{display:none}
  .brand-link{flex-shrink:0;order:1}
  .nav-links{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-shrink:1;order:2;padding:2px 0}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-btn{padding:4px 7px;font-size:12px;white-space:nowrap;flex-shrink:0}
  .nav-app-btn{display:none}
  .theme-toggle-btn{display:inline-flex!important;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;min-height:32px;padding:0;font-size:15px;order:3;flex-shrink:0}
  .theme-select,
  .header-snd-btn{display:none!important}
  .mobile-snd-btn{display:inline-flex!important;align-items:center;justify-content:center;padding:4px 8px;min-height:32px;font-size:13px}
  select.lang{min-height:34px;padding:4px 8px;font-size:12px}
  .sbtn{min-height:34px;padding:4px 8px;font-size:13px}
  h1{font-size:16px}
  .brand-logo-img,
  .brand-link img,
  header h1 img{
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    max-width:22px!important;
    min-height:22px!important;
    max-height:22px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .byline-name{animation:none;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--hole) 55%,transparent))}
}

/* Exit Confirmation Modal */
.exit-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.exit-modal-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.exit-modal-dialog {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4), 0 0 24px rgba(142, 91, 214, 0.18);
  border-radius: 18px;
  width: 100%;
  max-width: 340px;
  padding: 24px 20px 20px;
  text-align: center;
  transform: scale(0.92);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.exit-modal-backdrop.show .exit-modal-dialog {
  transform: scale(1);
}

.exit-modal-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: var(--code);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.exit-modal-icon img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.exit-modal-title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.01em;
}

.exit-modal-desc {
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--mute);
}

.exit-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.exit-btn-cancel,
.exit-btn-confirm {
  padding: 11px 16px;
  border-radius: 10px;
  font: 600 13.5px 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: all 0.18s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exit-btn-cancel {
  border: 1px solid var(--line);
  background: var(--code);
  color: var(--ink);
}

.exit-btn-cancel:hover,
.exit-btn-cancel:active {
  background: var(--line);
  transform: translateY(-1px);
}

.exit-btn-confirm {
  border: none;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.exit-btn-confirm:hover,
.exit-btn-confirm:active {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.5);
  transform: translateY(-1px);
}