:root{
  --shell-bg:#0f172a;
  --shell-panel:#111827;
  --shell-border:#243041;
  --shell-text:#e5edf9;
  --shell-muted:#94a3b8;
  --shell-accent:#38bdf8;
}

html{scroll-behavior:smooth}
body{min-width:320px;font-size:14px}
body.has-mobile-tabbar{padding-bottom:0}
a,button,input,select,textarea{font-size:14px}

.site-shell{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(8,15,29,.88);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(148,163,184,.16);
}
.site-shell-inner{
  max-width:1440px;
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.site-brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--shell-text);
  text-decoration:none;
}
.site-brand-mark{
  width:40px;
  height:40px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#38bdf8,#2563eb);
  color:#eff6ff;
  font-weight:900;
}
.site-brand-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.site-brand-text strong{font-size:15px;line-height:1.2}
.site-brand-text span{font-size:12px;color:var(--shell-muted)}
.site-nav{display:flex;align-items:center}
.site-nav-links{display:flex;align-items:center;gap:10px}
.site-nav-link{
  min-height:44px;
  padding:10px 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid transparent;
  color:var(--shell-text);
  text-decoration:none;
  font-weight:800;
}
.site-nav-link.is-active,
.site-nav-link:hover,
.site-nav-link:focus{
  background:rgba(56,189,248,.12);
  border-color:rgba(56,189,248,.36);
}
.site-nav-toggle{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid rgba(148,163,184,.2);
  border-radius:12px;
  background:#0f172a;
  cursor:pointer;
}
.site-nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  margin:4px auto;
  background:#e2e8f0;
  border-radius:999px;
}

.mobile-tabbar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  display:none;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(8,15,29,.96);
  border-top:1px solid rgba(148,163,184,.16);
  backdrop-filter:blur(16px);
}
.mobile-tabbar-link{
  min-height:52px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border-radius:14px;
  color:#dbeafe;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
}
.mobile-tabbar-link.is-active{background:rgba(56,189,248,.12);color:#7dd3fc}
.mobile-tabbar-icon{font-size:18px;line-height:1}

.responsive-grid-2,
.responsive-grid-3,
.responsive-grid-4{display:grid;gap:16px}
.responsive-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.responsive-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.responsive-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

table.responsive-card-table{width:100%}

@media (min-width:769px) and (max-width:1024px){
  .responsive-grid-3,
  .responsive-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:768px){
  body.has-mobile-tabbar{padding-bottom:104px}
  .site-shell-inner{padding:12px 16px}
  .site-brand-text strong{font-size:14px}
  .site-nav-toggle{display:inline-block}
  .site-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    pointer-events:none;
  }
  .site-nav-links{
    display:none;
    margin:8px 16px 12px;
    padding:12px;
    border-radius:16px;
    border:1px solid rgba(148,163,184,.14);
    background:#0f172a;
    box-shadow:0 16px 36px rgba(0,0,0,.35);
    flex-direction:column;
    align-items:stretch;
  }
  .site-shell.is-open .site-nav{pointer-events:auto}
  .site-shell.is-open .site-nav-links{display:flex}
  .site-nav-link{width:100%;justify-content:flex-start}
  .mobile-tabbar{display:grid}

  .responsive-grid-2,
  .responsive-grid-3,
  .responsive-grid-4{grid-template-columns:1fr}

  .mobile-table-stack thead{display:none}
  .mobile-table-stack,
  .mobile-table-stack tbody,
  .mobile-table-stack tr,
  .mobile-table-stack td{display:block;width:100%}
  .mobile-table-stack tr{
    padding:14px;
    margin-bottom:12px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:16px;
    background:rgba(15,23,42,.72);
  }
  .mobile-table-stack td{
    padding:8px 0;
    border:0 !important;
    text-align:left !important;
  }
  .mobile-table-stack td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:4px;
    color:var(--shell-muted);
    font-size:12px;
    font-weight:700;
  }

  .mtf-card-table thead{display:none}
  .mtf-card-table,
  .mtf-card-table tbody,
  .mtf-card-table tr,
  .mtf-card-table td{display:block;width:100%}
  .mtf-card-table tr{
    padding:16px;
    margin-bottom:14px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:18px;
    background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(15,23,42,.76));
  }
  .mtf-card-table td{
    padding:8px 0;
    border:0 !important;
    text-align:left !important;
    white-space:normal !important;
    min-width:0 !important;
  }
  .mtf-card-table td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:4px;
    color:var(--shell-muted);
    font-size:12px;
    font-weight:800;
  }
}