/* Panel de control: superficies, jerarquía y controles adaptados al móvil. */
:is(#view-control,#view-runner,#view-auth){
  --workspace-surface:#101c2c;
  --workspace-border:rgba(149,183,215,.2);
  --workspace-muted:#a9bed5;
}
:is(#view-control,#view-runner) :is(.pro-topbar,.control-sidebar,.panel-box,.gameplay-card,.bot-command-deck){
  border-color:var(--workspace-border);
  box-shadow:0 12px 36px rgba(2,8,17,.12),inset 0 1px 0 rgba(213,236,255,.025);
}
:is(#view-control,#view-runner,#view-auth) :is(button,input,select,textarea){
  touch-action:manipulation;
}
:is(#view-control,#view-runner) :is(.workspace-heading,.workspace-actions,.input-with-btn,.panel-section-heading,.social-actions){min-width:0}
:is(#view-control,#view-runner) :is(.btn,.subtab-btn,.seg-tab,.tele-val,.code-pill,.badge-sdk,.kv-val){
  overflow-wrap:anywhere;
}
#view-control :is(.panel-box h4,.panel-section-heading h3){line-height:1.5;text-wrap:balance}
#view-control .panel-box h4>.bot-icon{margin-right:3px;color:#8fb9d4}
#view-control .panel-subtabs{scrollbar-width:thin;scrollbar-color:#486680 transparent}
#view-control .subtab-btn.active{box-shadow:inset 0 0 0 1px rgba(141,229,255,.08)}
#view-control .bot-list-item.active{box-shadow:inset 3px 0 0 #8de5ff}
#view-control .bot-save-bar{border-color:rgba(117,187,193,.22);background:rgba(18,46,54,.62)}
#view-control .setting-switch{padding:2px 0}
#view-control .setting-switch>span:last-child{min-width:0}
#view-control .setting-switch strong{line-height:1.5}
#view-control .live-context-pill{display:inline-flex;align-items:center;gap:7px;line-height:1.5}
#view-control .live-context-pill::before{content:'';width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#8de5ff;box-shadow:0 0 0 3px rgba(141,229,255,.09)}
#view-runner .terminal-window{scrollbar-width:thin;scrollbar-color:#3e5c78 #080f1b;overscroll-behavior:contain}
#view-runner .log-line:last-child{border-bottom:0}
#view-control :is(.chat-history-box,.social-list,.search-results-list,.cosmetic-grid){overscroll-behavior:contain}

@media(max-width:900px){
  #view-control .control-layout{grid-template-columns:minmax(0,1fr);gap:18px}
  #view-control .control-sidebar{position:static}
  #view-control :is(.control-main,.subtab-pane,.panel-box){max-width:100%}
  #view-control .bot-command-deck{gap:20px}
  #view-control .panel-subtabs{padding-inline:0}
}

@media(max-width:680px){
  :is(#view-control,#view-runner).active{padding-top:12px;padding-bottom:max(28px,env(safe-area-inset-bottom))}
  :is(#view-control,#view-runner) .pro-topbar{gap:16px;padding:20px 18px;margin-bottom:16px;border-radius:18px;background:linear-gradient(135deg,#17293e,#101c2d)}
  #view-control .workspace-heading{width:100%}
  #view-control .workspace-heading h1{font-size:clamp(1.65rem,7vw,2rem);letter-spacing:-.055em}
  #view-control .workspace-heading>p:last-child{margin-top:8px;font-size:.84rem;line-height:1.75;max-width:40ch;color:#a9bed5}
  #view-control .workspace-eyebrow{gap:6px 10px;font-size:.68rem;letter-spacing:.09em;line-height:1.7}
  #view-control #accountUserLabel{max-width:100%;min-width:0;overflow-wrap:anywhere;font-size:.75rem}
  :is(#view-control,#view-runner) .workspace-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  :is(#view-control,#view-runner) .workspace-actions .btn{min-height:46px;padding:10px 12px;font-size:.76rem;line-height:1.55}
  #view-control .control-layout{gap:14px}
  #view-control .control-sidebar{gap:14px 12px;padding:16px;border-radius:16px;background:linear-gradient(145deg,#142235,#101b2b)}
  #view-control .sidebar-title-row{flex-wrap:wrap;gap:6px}
  #view-control .sidebar-header h3{font-size:.9rem;letter-spacing:-.02em}
  #view-control .sidebar-header .code-pill{font-size:.68rem;padding:3px 6px}
  #view-control .sidebar-footer{gap:7px;align-items:center}
  #view-control .sidebar-footer :is(#btnOpenDirectRegister,#btnRefreshBotsList){position:relative;display:flex;align-items:center;justify-content:center;gap:0;width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:10px;border-radius:10px;font-size:0}
  #view-control .sidebar-footer :is(#btnOpenDirectRegister,#btnRefreshBotsList)::before{content:none}
  #view-control .sidebar-footer .bot-icon{width:20px;height:20px}
  #view-control .sidebar-footer .btn :is([data-i18n],.ui-label){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  #view-control .bots-list-container{max-height:112px;gap:8px;scroll-snap-type:x proximity;scroll-padding-inline:2px;padding:2px 2px 5px}
  #view-control .bot-list-item{flex:1 0 min(240px,88%);min-width:0;min-height:72px;padding:11px;scroll-snap-align:start;border-radius:12px}
  #view-control .control-sidebar[data-bot-count="1"] .bot-list-item{flex-basis:100%}
  #view-control .bot-list-name{font-size:.85rem;line-height:1.5}
  #view-control .bot-list-id{font-size:.7rem;line-height:1.6}
  #view-control .bot-save-bar{min-height:42px;margin-bottom:12px;padding:10px 12px;font-size:.74rem;line-height:1.6;border-radius:10px}
  #view-control .bot-save-bar .home-text-action{min-height:44px;padding:7px 0}

  #view-control .bot-command-deck{display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px 16px;padding:20px 16px;margin-bottom:14px;border-radius:18px;background:radial-gradient(ellipse at 0 0,rgba(107,181,207,.12),transparent 70%),linear-gradient(145deg,#172a40,#102033)}
  #view-control .deck-bot-visual{width:64px;align-self:start;grid-column:1;grid-row:1;margin-top:3px}
  #view-control .deck-bot-visual img{width:64px;height:86px;padding:4px;border-radius:12px}
  #view-control .deck-level-tag{right:-4px;bottom:-8px;padding:3px 5px;font-size:.65rem;white-space:nowrap;max-width:82px}
  #view-control .deck-bot-info{grid-column:2;min-width:0}
  #view-control .bot-banner-title-row{gap:8px;margin-bottom:14px}
  #view-control .bot-banner-title-row h2{font-size:1.4rem;line-height:1.25;letter-spacing:-.04em}
  #view-control #ctrlBotSdkBadge{font-size:.65rem;line-height:1.6;max-width:100%;padding:4px 7px;border-radius:6px}
  #view-control .deck-telemetry-grid{grid-template-columns:minmax(0,1fr);gap:9px}
  #view-control .deck-telemetry-grid .tele-item{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:2px 8px;border-bottom:1px solid rgba(149,183,215,.1);padding-bottom:8px}
  #view-control .deck-telemetry-grid .tele-item:last-child{padding-bottom:0;border-bottom:0}
  #view-control .tele-lbl{font-size:.68rem;line-height:1.65;color:#a9bed5}
  #view-control .tele-val{font-size:.8rem;line-height:1.65;font-weight:600;max-width:100%}
  #view-control .bot-detail-disclosure{margin-top:12px;padding-top:5px}
  #view-control .bot-detail-disclosure summary{font-size:.7rem;line-height:1.7;min-height:44px;padding:10px 0}
  #view-control .bot-details-grid{gap:12px;padding-top:10px}
  #view-control .deck-quick-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:16px}
  #view-control .deck-quick-actions .btn{min-height:46px;padding:11px 9px;font-size:.76rem;line-height:1.55;border-radius:10px}
  #view-control #btnCtrlStartSdk{min-height:48px}
  #view-control .panel-guidance{gap:10px;padding:14px;margin-bottom:14px;border-radius:12px;font-size:.77rem;line-height:1.85}
  #view-control .panel-guidance p{min-width:0}
  #view-control .guidance-icon{margin-top:3px}
  #view-control .gameplay-card{gap:18px;padding:18px 16px;margin-bottom:18px;border-radius:16px}
  #view-control .section-eyebrow{font-size:.67rem;letter-spacing:.095em;line-height:1.7}
  #view-control .gameplay-card h3{font-size:1.18rem;line-height:1.4}
  #view-control .gameplay-card .box-help{font-size:.77rem;line-height:1.85;color:#a9bed5}
  #view-control .gameplay-switches{gap:15px}
  #view-control .setting-switch{min-height:50px;gap:12px}
  #view-control .setting-switch strong{font-size:.83rem}
  #view-control .setting-switch small{font-size:.75rem;line-height:1.8}

  #view-control .panel-subtabs{display:flex;flex-wrap:nowrap;gap:6px;max-width:100%;margin:0 0 16px;padding:2px 0 10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding-inline:2px;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  #view-control .subtab-btn{flex:0 0 auto;min-width:80px;max-width:calc(100% - 16px);min-height:46px;padding:11px 13px;border-radius:10px;font-size:.76rem;line-height:1.6;scroll-snap-align:start;white-space:normal}
  #view-control .panel-box{padding:18px 15px;margin-bottom:14px;border-radius:16px;background:linear-gradient(150deg,#122033,#101b2b)}
  #view-control .panel-box h4{font-size:.87rem;line-height:1.75;letter-spacing:0;margin-bottom:14px;text-align:left;text-wrap:pretty}
  #view-control .panel-section-heading{gap:12px;margin-bottom:14px}
  #view-control .panel-section-heading h3{font-size:1.2rem;line-height:1.5}
  #view-control .live-context-pill{font-size:.65rem;padding:5px 8px}
  #view-control .panel-box .box-help{font-size:.77rem;line-height:1.85}
  #view-control .form-group label{font-size:.75rem;line-height:1.7;letter-spacing:0}
  :is(#view-control,#view-runner,#view-auth) :is(.form-input,.form-select,.form-input-sm,.form-select-sm){font-size:16px;min-height:48px;line-height:1.5}
  #view-control .input-with-btn>.btn{min-height:46px;min-width:84px;padding:11px 12px;font-size:.75rem;line-height:1.55}
  #view-control .input-with-btn>:is(.form-input,.form-select){flex:1 1 140px;min-width:0}
  #view-control .input-with-btn:has(>.btn:nth-last-child(2))>:is(.form-input,.form-select){flex-basis:100%;width:100%}
  #view-control .input-with-btn:has(>.btn:nth-last-child(2))>.btn{flex:1 1 100px}
  #view-control .toggles-bar{gap:8px}
  #view-control .toggle-pill{font-size:.77rem;line-height:1.8;padding:12px}
  #view-control .locker-toolbar{gap:12px}
  #view-control #ctrlCosmeticTypeTabs{display:flex;flex-wrap:nowrap;gap:4px;max-width:100%;width:100%;padding:4px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#486680 transparent}
  #view-control #ctrlCosmeticTypeTabs .seg-tab{flex:1 0 auto;min-height:44px;padding:10px 12px;font-size:.74rem;line-height:1.6}
  #view-control .locker-search-wrap{flex-basis:100%;width:100%}
  #view-control .quick-cosmetic-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:16px}
  #view-control .quick-cosmetic-actions .btn{min-height:44px;padding:10px 9px;font-size:.7rem;line-height:1.6}
  #view-control .cosmetic-grid.large-grid{gap:10px;max-height:430px;padding:2px}
  #view-control .cosmetic-item{min-width:0;border-radius:12px}
  #view-control .cosmetic-item img{height:116px}
  #view-control .cosmetic-item-name{font-size:.74rem;line-height:1.6;min-height:2.9em;padding:9px 7px}
  #view-control .chat-history-box{min-height:150px;max-height:280px;padding:12px;font-size:.8rem;line-height:1.85}
  #view-control .social-row{padding:12px;gap:12px}
  #view-control .social-user-name{font-size:.85rem;line-height:1.6}
  #view-control .social-user-id{font-size:.7rem;line-height:1.65}
  #view-control .social-actions .btn{min-width:44px;min-height:44px;font-size:.73rem;padding:10px}
  #view-control .direct-cmd-bar{gap:9px}
  #view-control .cmd-response-viewer{min-height:100px;max-height:250px;padding:12px;font-size:.8rem;line-height:1.8}
  #view-control .commands-catalog-grid{gap:10px}
  #view-control .cmd-card{padding:16px;border-radius:12px;gap:11px}
  #view-control .cmd-desc{font-size:.77rem;line-height:1.85}

  #view-runner .pro-topbar>.step-hud-brand{font-size:1.2rem;line-height:1.5;letter-spacing:-.03em}
  #view-runner .pro-topbar>.step-hud-brand>span:last-child{display:block;margin-top:6px;color:var(--workspace-muted);font-size:.8rem;letter-spacing:0;font-weight:400}
  #view-runner .runner-live-status{margin:0 0 16px;padding:12px 14px;font-size:.77rem;line-height:1.8;border-radius:12px}
  #view-runner .panel-box{padding:18px 15px;border-radius:16px;margin-bottom:14px}
  #view-runner .panel-box :is(h3,h4){font-size:1rem;line-height:1.6;margin-bottom:14px}
  #view-runner .kv-label{font-size:.7rem;line-height:1.7}
  #view-runner .kv-val{font-size:.95rem;line-height:1.7}
  #view-runner .form-group label{font-size:.74rem;line-height:1.7}
  #view-runner .input-with-btn>.form-input{flex-basis:100%;width:100%}
  #view-runner .input-with-btn>.btn{flex:1 1 100px;min-height:46px;font-size:.75rem;padding:11px 10px}
  #view-runner .panel-box:has(#runnerTerminalLogs)>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
  #view-runner .panel-box:has(#runnerTerminalLogs)>div:first-child h4{margin-bottom:0;min-width:0}
  #view-runner #btnRefreshRunnerLogs{min-height:44px;font-size:.7rem;gap:6px;padding:10px}
  #view-runner .terminal-window{height:clamp(230px,46svh,360px);min-height:230px;max-height:420px;padding:12px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;overflow-x:hidden;overflow-y:auto}
  #view-runner .log-line{display:block;padding:9px 0}
  #view-runner .log-line>span{display:inline;white-space:pre-wrap;min-width:0;max-width:100%;overflow-wrap:anywhere}
  #view-runner .log-line>span:last-child{display:block;margin-top:3px}
  #view-runner :is(.log-ts,.log-src){font-size:11px;line-height:1.65;margin-right:7px}

  #view-auth.active{min-height:calc(100svh - 60px);padding:16px 0 28px;align-items:flex-start}
  #view-auth .account-auth-card{padding:26px 20px;border-radius:20px;background:radial-gradient(ellipse at 0 0,rgba(91,165,198,.09),transparent 60%),linear-gradient(145deg,#142337,#101b2b)}
  #view-auth .account-auth-brand{margin-bottom:24px;font-size:.77rem}
  #view-auth .account-auth-card h1{font-size:clamp(1.7rem,7.6vw,2.1rem);line-height:1.3;letter-spacing:-.05em}
  #view-auth #accountAuthDescription{font-size:.8rem;line-height:1.85}
  #view-auth .account-auth-modes{gap:8px;margin:22px 0}
  #view-auth .account-auth-modes .btn{font-size:.76rem;min-height:46px;padding:10px}
  #view-auth .form-group label{font-size:.78rem;line-height:1.7}
  #view-auth .account-auth-card :is(.box-help,.account-auth-note){font-size:.74rem;line-height:1.85}
  #view-auth .password-field{flex-wrap:wrap;gap:6px}
  #view-auth .password-field .form-input{padding-right:14px}
  #view-auth #btnToggleAuthPassword{position:static;min-width:0;min-height:44px;max-width:100%;padding:8px 0;text-align:left;font-size:.75rem;line-height:1.7}
  #view-auth #btnAuthBackHome{min-height:44px}
  #view-auth #authPaidBadge{max-width:100%;font-size:.65rem;line-height:1.8;padding:7px 10px;border-radius:9px;white-space:normal}
}

@media(max-width:380px){
  #view-control .bot-command-deck{grid-template-columns:56px minmax(0,1fr);gap:16px 12px;padding:18px 14px}
  #view-control .deck-bot-visual{width:56px}
  #view-control .deck-bot-visual img{width:56px;height:78px}
  #view-control .bot-banner-title-row h2{font-size:1.25rem}
  #view-control :is(.panel-box,.gameplay-card){padding-inline:14px}
  #view-control .cosmetic-item img{height:100px}
  #view-control .deck-quick-actions .btn{font-size:.72rem}
  #view-control .sidebar-title-row{gap:5px}
  #view-control .sidebar-header h3{font-size:.82rem}
  :is(#view-control,#view-runner) .workspace-actions .btn{font-size:.72rem;padding-inline:9px}
  #view-auth .account-auth-card{padding-inline:18px}
}

@media(prefers-reduced-motion:reduce){
  #view-control :is(.panel-subtabs,.bots-list-container){scroll-behavior:auto;scroll-snap-type:none}
}