/* Kruboy101 Tool System v91 — additive, responsive-safe standard layer */
:root{
  --kb-focus:#168cf4;
  --kb-radius:16px;
  --kb-border:#dce7f2;
  --kb-shadow:0 10px 30px rgba(15,45,80,.08);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{overflow-x:hidden}
button,input,select,textarea{font:inherit}
button,a,[role="button"],input[type="radio"],input[type="checkbox"]{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid color-mix(in srgb,var(--kb-focus) 30%,transparent);
  outline-offset:2px;
}
img,svg,canvas{max-width:100%}
/* keep wide data usable instead of breaking the page */
.tablewrap,.toolx-tablewrap,.data-table-wrap,.table-wrap,.score-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{max-width:100%}
/* shared breadcrumb behavior */
.crumb,.simple-crumb,.roster-crumb,.crumbbar{overflow-wrap:anywhere}
/* shared tab behavior */
.tabs{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}
.tabs button,.tabs a{white-space:nowrap}
/* consistent interaction sizing without restyling existing design */
button,.btn,.toolx-actions button,.toolbar button,.actions button{min-height:40px}
input,select,textarea{max-width:100%}
/* responsive standardization */
@media (max-width: 1000px){
  .topbar-inner,.top,.head-top{padding-left:18px!important;padding-right:18px!important}
  .hero-inner,.heroIn,.toolx,.tool-page,.roster-page,.page-wrap,main.wrap{max-width:100%!important}
  .main-grid,.workgrid,.layout,.layout-2,.toolx-grid,.roster-layout,.setup-grid,.setupgrid,.grid{
    min-width:0;
  }
}
@media (max-width: 900px){
  /* all common multi-column tool layouts collapse predictably */
  .main-grid,.workgrid,.layout,.layout-2,.toolx-grid,.roster-layout,.setup-grid,.setupgrid{
    grid-template-columns:1fr!important;
  }
  .hero-inner,.heroIn{grid-template-columns:1fr!important;gap:18px!important}
  .hero-right,.teacher{display:none!important}
  .benefits{flex-wrap:wrap!important}
  .topbar-inner,.top,.head-top{gap:12px!important;flex-wrap:wrap!important}
  .socials,.social,.head-side{margin-left:auto}
  .site-header nav,.topbar nav{max-width:100%;overflow-x:auto}
  .tool-box,.tool-box.wide,.tool-box.xwide{width:100%!important;max-width:100%!important}
  .panel,.card,.toolx-card,.soft-card,.roster-card{min-width:0}
  .seat-grid{max-width:100%;overflow-x:auto}
  .scorecolgrid{min-width:680px}
  .toolx-tablewrap table,.data-table-wrap table,.tablewrap table,.table-wrap table{min-width:680px}
}
@media (max-width: 640px){
  body{font-size:15px}
  .topbar-inner,.top,.head-top{padding-left:12px!important;padding-right:12px!important}
  .brand-sub{display:none!important}
  .socials,.social{display:none!important}
  .hero,.toolx-hero,.roster-hero{padding-left:12px!important;padding-right:12px!important}
  .hero h1,.toolx-hero h1,.roster-hero h1,.tool-headline h1{font-size:clamp(24px,7vw,34px)!important;line-height:1.2!important}
  .hero p,.toolx-hero p,.roster-hero p{font-size:15px!important}
  .hero-icon,.tool-title-icon,.roster-hero-icon{transform:scale(.9);transform-origin:left center}
  .page-wrap,main.wrap,.toolx,.tool-page,.roster-page{padding-left:12px!important;padding-right:12px!important}
  .panel,.card,.toolx-card,.soft-card,.roster-card,.tool-box{border-radius:14px!important}
  .panel,.card,.toolx-card,.soft-card,.roster-card{padding-left:14px!important;padding-right:14px!important}
  .tabs{display:flex!important;gap:7px!important;padding-bottom:4px!important}
  .tabs button,.tabs a{flex:0 0 auto!important;min-height:42px!important}
  .toolx-actions,.toolbar,.actions,.roster-actions,.seat-toolbar,.preset-row,.radio-row{
    flex-wrap:wrap!important;
  }
  .toolx-actions button,.toolbar button,.actions button,.roster-actions button,.seat-toolbar button,.preset-row button{
    min-height:44px!important;
  }
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important;min-height:44px}
  textarea{min-height:110px}
  .form-grid,.date-grid,.meta-grid,.summary-cards,.toolx-stats,.totals{grid-template-columns:1fr!important}
  .summary-cards,.toolx-stats{gap:10px!important}
  .benefits{display:grid!important;grid-template-columns:1fr!important}
  .result-big,.age-result,.conv-result{max-width:100%;overflow-wrap:anywhere}
  .crumb,.simple-crumb,.roster-crumb,.crumbbar{font-size:13px!important;line-height:1.5}
  .foot-main{grid-template-columns:1fr!important;gap:18px!important}
}
@media (max-width: 420px){
  .hero-icon,.tool-title-icon,.roster-hero-icon{display:none!important}
  .tool-title-wrap,.hero-title-row,.title{gap:8px!important}
  .panel,.card,.toolx-card,.soft-card,.roster-card{padding-left:12px!important;padding-right:12px!important}
  .toolx-actions button,.toolbar button,.actions button,.roster-actions button{width:100%}
}
@media print{
  .no-print,.tabs,.site-header,.topbar,.socials,.social{display:none!important}
  body{background:#fff!important;color:#000!important}
  main,.toolx,.tool-page,.roster-page,.page-wrap,.wrap{max-width:none!important;width:100%!important;padding:0!important;margin:0!important}
  .panel,.card,.toolx-card,.soft-card,.roster-card,.tool-box{box-shadow:none!important;break-inside:avoid}
  .tablewrap,.toolx-tablewrap,.data-table-wrap,.table-wrap,.score-table{overflow:visible!important}
}