:root{--bg:#0b0e0f;--ink:#f5f7fa;--muted:#b7c0cd;--accent:#ff477e;--accent2:#46e2ff;--card:#101318;--line:#1e2633}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;line-height:1.6;}
a{color:var(--accent)}
.container{max-width:1100px;margin:0 auto;padding:16px}
#site-header{position:sticky;top:0;z-index:20;background:rgba(11,14,15,.94);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid #1b212a}
.header-row{display:flex;align-items:center;gap:12px}
#site-header .logo{font-weight:800;text-decoration:none;color:var(--ink)}
#nav-toggle,#nav-close{background:#1a1f27;color:var(--ink);border:1px solid #293241;border-radius:12px;padding:.65rem .85rem;font-size:1.15rem}
#primary-nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#primary-nav a{padding:.55rem .85rem;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;white-space:nowrap;font-size:.98rem}
#nav-overlay{display:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px}
.grid{display:grid;gap:16px}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.timer{font-size:clamp(28px,10vw,64px);font-weight:900;letter-spacing:.02em;line-height:1.1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#111;padding:.85rem 1.15rem;text-decoration:none;border-radius:16px;border:none;font-weight:800;min-height:44px;min-width:44px}
.btn.secondary{background:transparent;border:1px solid #2a3546;color:var(--ink)}
input,select,textarea{width:100%;background:#0e1218;border:1px solid #253044;border-radius:12px;color:var(--ink);padding:.85rem;font-size:1rem}
label{display:block;margin:.6rem 0 .35rem;color:var(--muted)}
.small{font-size:.92rem;color:var(--muted)}
ul{margin:0;padding:0;list-style:none}
/* Mobile-first upgrades */
@media (max-width:900px){
  #primary-nav{position:fixed;inset:0 auto 0 0;width:min(88vw,360px);max-width:90vw;background:#0b0e0f;border-right:1px solid var(--line);padding:16px;display:none;flex-direction:column;align-items:stretch;overflow:auto}
  #primary-nav.open{display:flex}
  #primary-nav a{width:100%;border-radius:14px}
  #nav-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.2s}
  #nav-overlay.show{opacity:1;pointer-events:auto}
  #nav-close{align-self:flex-end;margin-bottom:8px}
  .chips,.badges{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
  .chips > *,.badges > *{flex:0 0 auto}
  .grid.cards{grid-template-columns:1fr}
  .container{padding:14px}
  .btn{min-height:48px}
  input,select,textarea{min-height:46px}
}
/* Very small phones */
@media (max-width:420px){
  html,body{font-size:16px}
  #site-header .logo{font-size:1rem}
}


/* v9 tweaks */
#nav-close{display:none}
@media (max-width:900px){
  #nav-close{display:block}
  body,html{overflow-x:hidden}
  .chips,.badges{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin}
  .chips>*,.badges>*{flex:0 0 auto}
  #primary-nav a{max-width:100%}
}
/* Prevent chip wrap cut-offs and ensure long words don't overflow */
*{word-wrap:break-word}


/* === v10 Mobile Fix Overrides === */
:root{--safe-inset-top:env(safe-area-inset-top);--safe-inset-right:env(safe-area-inset-right);--safe-inset-bottom:env(safe-area-inset-bottom);--safe-inset-left:env(safe-area-inset-left)}
html,body{max-width:100%;overflow-x:hidden}
.card{overflow:visible}
.btn{min-height:48px}
/* Drawer nav defaults */
#primary-nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#nav-overlay{display:none}
/* Desktop: hide close button */
#nav-close{display:none}
/* Mobile drawer */
@media (max-width: 900px){
  #primary-nav{
    position:fixed; top:0; bottom:0; left:0; right:auto;
    width:min(88vw,360px);
    max-width:90vw;
    padding:16px;
    background:rgba(11,14,15,.98);
    border-right:1px solid rgba(255,255,255,.08);
    display:none; flex-direction:column; align-items:stretch;
    overflow:auto; -webkit-overflow-scrolling:touch;
    padding-top:calc(16px + var(--safe-inset-top));
  }
  #primary-nav.open{display:flex}
  #nav-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.2s}
  #nav-overlay.show{opacity:1;pointer-events:auto}
  #nav-close{display:block;align-self:flex-end;margin-bottom:8px}
  #primary-nav a{display:block;width:100%;border-radius:14px}
  .grid.cards{grid-template-columns:1fr!important}
  .chips,.badges{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding-right:8px;margin-right:-8px}
}
/* Allow long words to break */
*{word-break:break-word}