@media (max-width: 900px){
  .workspace{display:flex;flex-direction:column;padding:30px 20px 28px;gap:24px}
  .output-column{order:-1}
  .output-panel{position:relative;top:auto}
  .config-column{order:1}
  .output-head{padding:15px 16px}
  .editor-actions{padding:11px 16px}
  .tools-row{padding:9px 16px}
  .code-toolbar{padding:11px 16px}
  .code-output{min-height:430px;max-height:58vh}
  .change-legend{padding-left:16px;padding-right:16px}
}

@media (max-width: 620px){
  .topbar{height:58px;padding:0 14px;gap:10px}
  .topbar-center,.docs-link{display:none}
  .brand{font-size:16px}
  .workspace{padding:20px 12px 24px;gap:20px}
  .intro{margin:14px 0 20px;gap:10px}
  .intro h1{font-size:29px}
  .intro p{font-size:13px;line-height:1.45}
  .live-pill{padding:6px 7px;white-space:nowrap}
  .domain-card,.redirect-card{padding:15px;border-radius:10px}
  .domain-input{height:45px;padding:0 10px}
  .rules-list{padding-top:21px}
  .rule-group{margin-bottom:19px}
  .rule-row{min-height:43px;gap:8px}
  .rule-name{font-size:13px}
  .info-btn{padding:4px}
  .redirect-row{grid-template-columns:minmax(0,1fr) 25px minmax(0,1fr);gap:6px;position:relative;padding-right:25px}
  .redirect-row input{min-width:0;width:100%}
  .redirect-row select{grid-column:1 / span 3;width:100%;height:36px}
  .redirect-row .delete-btn{position:absolute;right:0;top:6px}
  .arrow{font-size:13px}
  .output-title{font-size:13px}
  .output-head p{font-size:10px}
  .editor-actions{padding:10px;gap:7px}
  .editor-actions button{min-height:38px;padding:0 8px;flex:1;font-size:10px}
  .editor-actions .analysis-status{flex-basis:100%;max-width:100%;margin:1px 0 0;font-size:10px}
  .tools-row{padding:8px 10px;gap:5px}
  .tools-row button{min-height:32px;flex:1;padding:0 5px;font-size:9px}
  .tools-label{width:100%;font-size:9px}
  .code-toolbar{padding:10px}
  .code-output{min-height:360px;max-height:52vh;padding:6px 8px 18px;font-size:10px;line-height:1.7}
  .code-output b{width:24px}
  .change-legend{padding:7px 10px 10px;font-size:9px}
  .output-footer{padding:11px 10px}
  .output-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .copy-btn,.download-btn{min-height:38px;padding:8px 5px;font-size:10px}
  .safe-note{font-size:10px}
  footer{padding:16px 12px;font-size:10px;gap:8px}
}

@media (max-width: 390px){
  .intro h1{font-size:26px}
  .live-pill{font-size:8px}
  .rule-name{font-size:12px}
  .redirect-row{grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr)}
  .output-actions{grid-template-columns:1fr}
}
footer a{color:#8de6d8;text-decoration:none;transition:color .16s}footer a:hover{color:#c4fff5;text-decoration:underline}
.footer-credit{color:#657b86}.footer-credit strong{color:#91aeb4;font-weight:600}