:root{--gh-device-gutter:clamp(10px,2.4vw,24px)}
html,body{width:100%;max-width:100%;min-width:0;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas{max-width:100%}
#dashboardView,.dashboard-shell,.dashboard-header,.dashboard-nav,.dashboard-section,#scriptControlsWorkspace,#scriptsWorkspace,#panelsWorkspace,#keysWorkspace,#apiWorkspace,#docsWorkspace,.controls-hero-compact,.controls-summary-grid,.individual-controls-card,.script-controls-toolbar,.script-controls-list,.script-control-item,.script-item-primary,.script-item-main{min-width:0;max-width:100%;box-sizing:border-box}
.dashboard-shell{width:min(1280px,calc(100% - 2 * var(--gh-device-gutter)));margin-inline:auto}
#scriptControlsWorkspace{width:100%;min-width:0;overflow:visible}
#scriptControlsWorkspace>*{min-width:0;max-width:100%}
.controls-hero-compact{grid-template-columns:minmax(0,1fr) minmax(0,190px)}
.controls-settings-heading>div{min-width:0;max-width:100%}
.controls-settings-heading p,.script-item-title,.script-item-subtitle,.script-item-main,.script-item-primary{overflow-wrap:anywhere;word-break:normal}
.script-item-endpoint{width:100%;max-width:100%;min-width:0}
.script-item-endpoint code{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.script-control-item{min-width:0;max-width:100%}
.controls-footer,.controls-warning,.controls-footer-brand{min-width:0;max-width:100%;overflow-wrap:anywhere}
@media (pointer:coarse) and (max-width:1100px), (max-width:760px), (max-width:1100px) and (max-aspect-ratio:4/5){
  html,body,#dashboardView{width:100%;max-width:100%;min-width:0;overflow-x:clip}
  .dashboard-shell{width:calc(100% - 20px)!important;max-width:980px!important;min-width:0!important;margin-inline:auto!important;padding-inline:0!important}
  .dashboard-header{width:100%;max-width:100%;min-width:0;grid-template-columns:minmax(0,1fr);gap:10px;padding:clamp(10px,2.4vw,17px);overflow:hidden}
  .dashboard-header>.brand-link{min-width:0;max-width:100%;width:100%}
  .dashboard-header .brand-copy{min-width:0;max-width:100%}
  .dashboard-header .brand-copy strong{max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .dashboard-header>.top-actions{display:flex;width:100%;max-width:100%;min-width:0;flex-wrap:wrap;gap:7px;justify-content:stretch}
  .dashboard-header .profile{flex:1 1 180px;min-width:0;max-width:100%}
  .dashboard-header .logout-btn{flex:0 0 auto;min-width:0;max-width:100%}
  .dashboard-nav{position:relative!important;inset:auto!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:10px 0 14px!important;overflow:visible!important}
  .dashboard-nav>.dashboard-tab{width:100%;min-width:0;max-width:100%;height:auto;min-height:54px;justify-self:stretch}
  .dashboard-nav>.dashboard-tab[data-dashboard-tab="docs"],.dashboard-nav>.dashboard-tab[data-dashboard-tab="controls"]{grid-column:1/-1!important;width:100%!important;max-width:100%!important}
  .dashboard-nav .dashboard-tab>span:last-child,.dashboard-nav .dashboard-tab strong{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
  #scriptControlsWorkspace .controls-hero-compact{grid-template-columns:minmax(0,1fr)!important;min-height:0;padding:clamp(15px,3vw,24px);gap:10px}
  #scriptControlsWorkspace .controls-hero-copy{min-width:0;max-width:100%}
  #scriptControlsWorkspace .controls-hero-visual{display:none!important}
  #scriptControlsWorkspace .controls-hero-compact h1{font-size:clamp(1.85rem,5vw,3rem);overflow-wrap:anywhere}
  #scriptControlsWorkspace .controls-summary-grid{grid-template-columns:minmax(0,1fr)!important;gap:7px}
  #scriptControlsWorkspace .controls-summary-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start;gap:5px 10px;min-width:0;padding:12px}
  #scriptControlsWorkspace .controls-summary-card>span{grid-column:1;grid-row:1}
  #scriptControlsWorkspace .controls-summary-card strong{grid-column:2;grid-row:1;min-width:0;overflow-wrap:anywhere}
  #scriptControlsWorkspace .controls-summary-card small{grid-column:1/-1;min-width:0}
  #scriptControlsWorkspace .individual-controls-card{width:100%;max-width:100%;min-width:0;padding:clamp(12px,2.6vw,20px);overflow:hidden}
  #scriptControlsWorkspace .controls-settings-heading{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:10px}
  #scriptControlsWorkspace .controls-settings-heading h2{font-size:clamp(1.05rem,3.5vw,1.35rem);overflow-wrap:anywhere}
  #scriptControlsWorkspace .controls-settings-heading p{max-width:100%;font-size:.78rem;overflow-wrap:anywhere}
  #scriptControlsWorkspace .controls-live-pill{justify-self:start;max-width:100%;white-space:normal;font-size:.58rem}
  #scriptControlsWorkspace .script-controls-toolbar{grid-template-columns:minmax(0,1fr)!important;gap:8px;width:100%;max-width:100%;padding:12px 0}
  #scriptControlsWorkspace .script-controls-search{width:100%;max-width:100%;min-width:0}
  #scriptControlsWorkspace .script-controls-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:100%;min-width:0;gap:6px}
  #scriptControlsWorkspace .script-controls-filter,#scriptControlsWorkspace .script-controls-refresh{width:100%;max-width:100%;min-width:0;min-height:42px;padding:7px 8px;font-size:.68rem;white-space:normal;overflow-wrap:anywhere}
  #scriptControlsWorkspace .script-controls-refresh{grid-column:1/-1}
  #scriptControlsWorkspace .script-controls-list{width:100%;max-width:100%;min-width:0}
  #scriptControlsWorkspace .script-control-item{grid-template-columns:32px minmax(0,1fr)!important;width:100%;max-width:100%;min-width:0;gap:9px;padding:clamp(10px,2.5vw,15px)}
  #scriptControlsWorkspace .script-item-glyph{width:32px;height:32px}
  #scriptControlsWorkspace .script-item-primary{grid-template-columns:minmax(0,1fr)!important;width:100%;max-width:100%;min-width:0;gap:10px}
  #scriptControlsWorkspace .script-item-main{grid-column:1;grid-row:1;width:100%;max-width:100%;min-width:0}
  #scriptControlsWorkspace .script-item-title-row{max-width:100%;gap:5px}
  #scriptControlsWorkspace .script-item-type{max-width:100%;white-space:normal;overflow-wrap:anywhere}
  #scriptControlsWorkspace .script-item-title{max-width:100%;font-size:clamp(.76rem,2.5vw,.9rem)}
  #scriptControlsWorkspace .script-item-subtitle{max-width:100%;font-size:.68rem}
  #scriptControlsWorkspace .script-item-endpoint{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:7px}
  #scriptControlsWorkspace .script-item-endpoint code{white-space:normal;overflow-wrap:anywhere;word-break:break-word;font-size:.62rem}
  #scriptControlsWorkspace .script-item-copy-url{max-width:100%;min-height:38px;padding:6px 8px;white-space:normal;font-size:.62rem}
  #scriptControlsWorkspace .script-item-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  #scriptControlsWorkspace .script-item-actions button,#scriptControlsWorkspace .script-item-open-panel{width:100%;min-width:0;min-height:40px;padding:7px;font-size:.64rem;white-space:normal;overflow-wrap:anywhere}
  #scriptControlsWorkspace .script-item-switch{grid-column:1;grid-row:2;justify-self:start;align-self:start;flex-direction:row;min-width:104px;max-width:100%;min-height:42px;padding:7px 10px;gap:8px}
  #scriptControlsWorkspace .script-item-switch .control-switch-state{font-size:.6rem}
  #scriptControlsWorkspace .controls-footer{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:start}
  #scriptControlsWorkspace .controls-footer-note{max-width:100%;text-align:left}
  #scriptControlsWorkspace .controls-warning{align-items:flex-start}
  #scriptControlsWorkspace .controls-warning p{min-width:0;overflow-wrap:anywhere}
  .panel-builder-grid{grid-template-columns:minmax(0,1fr)!important;min-width:0}
  .panel-editor-card,.panel-preview-card,.saved-panels-card,.key-manager-card{min-width:0;max-width:100%;width:100%}
  .panel-preview-column{position:static!important;max-height:none!important;overflow:visible!important;min-width:0;max-width:100%;width:100%;padding:0!important}
  .panel-preview-stage,.published-panel-preview{min-width:0;max-width:100%;width:100%}
  .builder-heading{min-width:0;max-width:100%;flex-wrap:wrap}
  .builder-heading-actions{width:100%;max-width:100%;min-width:0;flex-wrap:wrap}
  .builder-heading-actions button{flex:1 1 130px;min-width:0;max-width:100%}
  .key-list-head,.generated-keys-head{min-width:0;max-width:100%;flex-wrap:wrap}
  .key-list-head-actions{flex-wrap:wrap;min-width:0;max-width:100%}
  .panel-key-row,.generated-key-item,.file-row,.saved-panel-row,.api-token-row{min-width:0;max-width:100%;overflow-wrap:anywhere}
}
@media(max-width:420px){
  #scriptControlsWorkspace .controls-summary-card{grid-template-columns:minmax(0,1fr)!important}
  #scriptControlsWorkspace .controls-summary-card>span,#scriptControlsWorkspace .controls-summary-card strong{grid-column:1;grid-row:auto}
  #scriptControlsWorkspace .script-item-endpoint{grid-template-columns:minmax(0,1fr)}
  #scriptControlsWorkspace .script-item-copy-url{justify-self:start;width:auto;min-width:100px}
}
@media(prefers-reduced-motion:reduce){.dashboard-section:not(.hidden),.script-control-item,.control-switch,.panel-preview-stage{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Script-control toggle geometry: keep the track, thumb, and label separate on every viewport. */
#scriptControlsWorkspace .script-item-switch.control-switch{display:inline-flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:9px!important;width:auto!important;min-width:104px!important;max-width:100%!important;min-height:42px!important;height:42px!important;padding:7px 11px!important;line-height:1!important;white-space:nowrap!important;overflow:visible!important;box-sizing:border-box!important;}
#scriptControlsWorkspace .script-item-switch .control-switch-track{display:block!important;position:relative!important;flex:0 0 32px!important;width:32px!important;min-width:32px!important;max-width:32px!important;height:18px!important;min-height:18px!important;max-height:18px!important;margin:0!important;padding:0!important;border-radius:999px!important;box-sizing:border-box!important;}
#scriptControlsWorkspace .script-item-switch .control-switch-track>span{position:absolute!important;display:block!important;left:3px!important;top:3px!important;width:12px!important;min-width:12px!important;max-width:12px!important;height:12px!important;min-height:12px!important;max-height:12px!important;margin:0!important;padding:0!important;border-radius:50%!important;box-sizing:border-box!important;}
#scriptControlsWorkspace .script-item-switch.is-on .control-switch-track>span{transform:translateX(14px)!important;}
#scriptControlsWorkspace .script-item-switch.is-off .control-switch-track>span{transform:translateX(0)!important;}
#scriptControlsWorkspace .script-item-switch .control-switch-state{display:inline-block!important;position:static!important;flex:0 0 auto!important;width:auto!important;min-width:0!important;height:auto!important;margin:0!important;padding:0!important;font-size:.61rem!important;line-height:1!important;letter-spacing:.07em!important;white-space:nowrap!important;}
@media (pointer:coarse) and (max-width:1100px), (max-width:760px), (max-width:1100px) and (max-aspect-ratio:4/5){
 #scriptControlsWorkspace .script-item-switch.control-switch{width:auto!important;min-width:98px!important;min-height:42px!important;height:42px!important;flex-direction:row!important;gap:8px!important;padding:7px 10px!important;}
 #scriptControlsWorkspace .script-item-switch .control-switch-track{flex-basis:30px!important;width:30px!important;min-width:30px!important;max-width:30px!important;height:17px!important;min-height:17px!important;max-height:17px!important;}
 #scriptControlsWorkspace .script-item-switch .control-switch-track>span{width:11px!important;min-width:11px!important;max-width:11px!important;height:11px!important;min-height:11px!important;max-height:11px!important;}
 #scriptControlsWorkspace .script-item-switch.is-on .control-switch-track>span{transform:translateX(13px)!important;}
 #scriptControlsWorkspace .script-item-switch .control-switch-state{font-size:.58rem!important;}
}