:root{
  --tp-sidebar-width:280px;
  --tp-header-height:72px;
  --tp-bg:#f4f7fb;
  --tp-surface:#ffffff;
  --tp-text:#152033;
  --tp-muted:#6a7890;
  --tp-border:#dbe4ef;
  --tp-accent:#316ff2;
  --tp-accent-2:#7558ee;
  --tp-sidebar:#0c1528;
  --tp-shadow:0 18px 48px rgba(18,39,74,.10);
}
html[data-theme="dark"]{
  --tp-bg:#080c15;
  --tp-surface:#101827;
  --tp-text:#edf3ff;
  --tp-muted:#93a1b7;
  --tp-border:#26344d;
  --tp-sidebar:#070b14;
  --tp-shadow:0 18px 48px rgba(0,0,0,.30);
}
html,body{max-width:100%;overflow-x:hidden}
body{background:var(--tp-bg);color:var(--tp-text)}
.tp-mobile-header{
  display:none;
  position:sticky;
  top:0;
  z-index:1000;
  height:var(--tp-header-height);
  padding:0 14px;
  align-items:center;
  justify-content:space-between;
  background:color-mix(in srgb,var(--tp-bg) 86%,transparent);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--tp-border);
}
.tp-mobile-brand{display:flex;align-items:center;gap:10px;min-width:0}
.tp-mobile-logo{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  color:#fff;font-weight:900;background:linear-gradient(135deg,var(--tp-accent),var(--tp-accent-2));
  box-shadow:0 10px 24px rgba(49,111,242,.28)
}
.tp-mobile-brand-copy{display:flex;flex-direction:column;min-width:0}
.tp-mobile-brand-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-mobile-brand-copy small{color:var(--tp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-mobile-actions{display:flex;gap:8px}
.tp-icon-button{
  width:42px;height:42px;border:1px solid var(--tp-border);border-radius:12px;
  background:var(--tp-surface);color:var(--tp-text);display:grid;place-items:center;
  cursor:pointer;font-size:19px
}
.tp-sidebar-overlay{
  display:none;position:fixed;inset:0;background:rgba(3,8,18,.58);
  backdrop-filter:blur(3px);z-index:998
}
.tp-mobile-bottom-nav{
  display:none;position:fixed;left:10px;right:10px;bottom:10px;z-index:997;
  padding:8px;background:color-mix(in srgb,var(--tp-surface) 92%,transparent);
  backdrop-filter:blur(16px);border:1px solid var(--tp-border);border-radius:18px;
  box-shadow:var(--tp-shadow);grid-template-columns:repeat(4,1fr);gap:4px
}
.tp-mobile-bottom-nav a{
  min-width:0;text-decoration:none;color:var(--tp-muted);padding:8px 4px;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;text-align:center
}
.tp-mobile-bottom-nav a span{font-size:18px;color:var(--tp-accent)}
.tp-mobile-bottom-nav a:active,.tp-mobile-bottom-nav a.active{background:rgba(49,111,242,.10);color:var(--tp-accent)}
.tp-skip-link{
  position:fixed;top:-100px;left:12px;z-index:2000;background:var(--tp-accent);color:white;
  padding:10px 14px;border-radius:8px;text-decoration:none
}
.tp-skip-link:focus{top:12px}
.tp-menu-section-title{
  display:flex;align-items:center;justify-content:space-between;gap:10px
}
.tp-menu-section-title button{
  border:0;background:transparent;color:inherit;cursor:pointer;padding:2px 6px
}
@media(max-width:900px){
  .tp-mobile-header{display:flex}
  .tp-mobile-bottom-nav{display:grid}
  body{padding-bottom:88px}
  .sidebar{
    position:fixed!important;
    top:0!important;bottom:0!important;left:0!important;
    width:min(86vw,var(--tp-sidebar-width))!important;
    max-width:320px!important;
    z-index:999!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
    box-shadow:0 24px 60px rgba(0,0,0,.34)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain
  }
  .sidebar.tp-open{transform:translateX(0)!important}
  .tp-sidebar-overlay.tp-open{display:block}
  .workspace,.main-content,.content,.app-content{
    margin-left:0!important;width:100%!important;max-width:100%!important
  }
  .topbar{display:none!important}
  main{padding:14px!important}
  .hero,.welcome-card{grid-template-columns:1fr!important;padding:20px!important;border-radius:18px!important}
  .orb{display:none!important}
  .metrics-grid,.metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .dashboard-grid,.grid-main{grid-template-columns:1fr!important}
  .quick-grid{grid-template-columns:1fr!important}
  .grid{grid-template-columns:1fr 1fr!important}
  .panel{border-radius:14px!important;padding:14px!important}
  .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  table{min-width:760px!important}
  input,select,textarea,button{font-size:16px!important}
  button,.primary-action,.secondary-action,.btn-primary,.btn-secondary{
    min-height:44px
  }
}
@media(max-width:560px){
  .metrics-grid,.metrics{grid-template-columns:1fr!important}
  .grid{grid-template-columns:1fr!important}
  .toolbar{display:grid!important;grid-template-columns:1fr!important}
  .toolbar input,.toolbar select,.toolbar button{width:100%!important}
  .panel-head{flex-direction:column!important;align-items:stretch!important}
  .panel-head>a,.panel-head>button{width:100%!important}
  .hero h1,.welcome-card h2{font-size:clamp(1.7rem,8vw,2.3rem)!important}
}
@media(pointer:coarse){
  a,button,input,select,textarea{touch-action:manipulation}
  .nav-item{min-height:44px!important}
}