.alert.warning{background:#fff5d9;color:#735714;border:1px solid #ecd58e}
.client-error{margin-top:14px;margin-bottom:0}
.mobile-tabs{display:none}
.control-panel{padding-bottom:8px}
.control-panel h2{display:flex;justify-content:space-between;align-items:center;font-size:18px}
.control-panel h2 small{font-size:12px;font-weight:500;color:var(--muted)}

@media(max-width:850px){
  body{padding-bottom:76px}
  .container{padding-top:18px}
  .hero{margin-bottom:15px}
  .hero h1{font-size:25px}
  .hero p:not(.eyebrow){font-size:13px}
  .studio{padding:12px}
  .drop{padding:17px}
  .editor-grid{display:block;margin-top:12px}
  .preview{position:sticky;top:6px;z-index:20;height:49vh;min-height:330px;max-height:490px;border:2px solid #31564b;box-shadow:0 12px 30px #071d1766;padding:8px}
  .preview-toolbar{padding-bottom:6px}
  .preview-toolbar .tool-btn{font-size:11px;padding:5px 8px}
  .canvas-viewport{min-height:0}
  .preview-foot{padding-top:6px;font-size:11px;flex-direction:row;align-items:center}
  .preview-foot label{width:auto;min-width:180px}
  .preview-foot input{width:90px}
  .controls{padding-top:12px}
  .mobile-tabs{display:grid;grid-template-columns:repeat(5,1fr);position:sticky;top:calc(49vh + 9px);z-index:21;background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px;box-shadow:0 5px 15px #173f3218}
  .mobile-tabs button{border:0;background:transparent;padding:9px 3px;border-radius:8px;color:var(--muted);font-weight:750;font-size:12px}
  .mobile-tabs button.active{background:var(--green);color:#fff}
  .control-panel{display:none;padding:18px 3px 8px;min-height:230px}
  .control-panel.active{display:block}
  .control-panel h2{margin:0 0 15px}
  .mobile-process{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);box-shadow:0 -5px 18px #173f3220}
  .mobile-process .btn{margin:0;max-width:520px;margin-inline:auto}
  .privacy{margin-bottom:10px}
}

@media(max-width:550px){
  .preview{height:46vh;min-height:310px}
  .mobile-tabs{top:calc(46vh + 9px)}
  .preview-foot #meta{max-width:42%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .preview-foot label{min-width:0;flex:1;justify-content:flex-end}
}