.public-demo.panel-mode{grid-template-columns:290px 1fr}
.panel-library-intro{margin:-5px 0 12px;color:#8fa3b8;font-size:12px}
.panel-library>button{display:grid;grid-template-columns:88px 1fr;align-items:center;gap:10px;padding:10px}
.panel-library>button>span{margin:0}
.ready-panel{margin:0;background-color:#d7dbe0;background-image:linear-gradient(45deg,#eef0f2 25%,transparent 25%),linear-gradient(-45deg,#eef0f2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef0f2 75%),linear-gradient(-45deg,transparent 75%,#eef0f2 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;border:1px solid #657080}
.ready-panel img{display:block;width:100%;height:auto;object-fit:contain}
.ready-panel figcaption{font-size:10px;font-weight:900;color:#d9e5f2;text-align:center}
.ready-panel.thumb{width:32px;justify-self:center}
.ready-panel.thumb img{height:auto;max-height:none}
.ready-panel.thumb figcaption{margin-top:0;padding:4px;background:#0b1725}
.panel-how{margin-bottom:18px;padding:15px 16px;border:1px solid #31475e;border-radius:11px;background:#0a1623}
.panel-how h3{margin:0 0 10px;font-size:16px}
.panel-how ol{margin:0;padding-left:21px;columns:2;column-gap:32px;color:#c6d0dd;font-size:12px;line-height:1.65}
.panel-how li{break-inside:avoid}
.panel-how p{margin:11px 0 0;padding-top:10px;border-top:1px solid #2a4056;color:#8fd4ff;font-size:12px;font-weight:800}
.panel-preview-copy{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:12px}
.panel-preview-copy b{font-size:20px}
.panel-preview-copy span{max-width:370px;color:#a9b7c8;font-size:13px}
.panel-main-view{height:auto;display:block;border:1px solid #263c52;border-radius:12px;background:radial-gradient(circle at 50% 20%,#17283a,#08131e 70%);padding:24px}
.ready-panel.main{width:min(100%,360px);height:auto;margin:0 auto}
.ready-panel.main img{filter:drop-shadow(0 16px 22px #0008)}
.ready-panel.main figcaption{padding:6px;background:#0b1725}
.panel-metrics{margin-top:8px}
.panel-copy-control{justify-content:stretch;margin:16px 0 12px;padding:12px 14px;border:1px solid #30465e;border-radius:10px;background:#101f30}
.panel-copy-control label{width:100%;justify-content:space-between;gap:20px;font-size:15px}
.panel-copy-control .stepper{overflow:hidden;border:1px solid #55708c;border-radius:8px;background:#081523}
.panel-copy-control .stepper button{width:44px;height:42px;background:#1a3047;color:#fff;font-size:24px;font-weight:800}
.panel-copy-control .stepper button:hover{background:#244560}
.panel-copy-control .stepper b{display:grid;width:58px;height:42px;place-items:center;border-right:1px solid #55708c;border-left:1px solid #55708c;background:#f7f9ff;color:#07111d;font-size:20px;font-weight:950}
.panel-metrics{grid-template-columns:repeat(3,1fr)}
.panel-review-action,.panel-validate-action{width:100%;margin-top:12px;padding:13px;border:0;border-radius:9px;background:linear-gradient(90deg,#ff176f,#ff4d98);color:#fff;font-weight:900;cursor:pointer}
.panel-validation header span{color:#ff4388;font-size:10px;font-weight:900;letter-spacing:2px}
.panel-validation header h3{font-size:24px;margin:5px 0}
.panel-validation header p{margin:0 0 14px;color:#a9b7c8}
.panel-validation-grid{display:grid;grid-template-columns:minmax(250px,1fr) 310px;gap:18px}
.panel-validation-view{height:auto;display:block;border:1px solid #334b63;border-radius:12px;background:#07111b;padding:18px}
.ready-panel.validation{width:min(100%,300px);height:auto;margin:0 auto}
.ready-panel.validation figcaption{padding:6px;background:#0b1725}
.panel-validation-check{padding:18px;border:1px solid #344b63;border-radius:12px;background:#101f30}
.panel-validation-check dl{margin:0}
.panel-validation-check dl div{display:flex;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px solid #2b4056}
.panel-validation-check dt{color:#91a4b9}
.panel-validation-check dd{margin:0;font-weight:900}
.panel-validation-check label{display:flex;gap:10px;align-items:flex-start;margin:18px 0;padding:13px;border:1px solid #3d5873;border-radius:9px;background:#0a1725;font-size:13px;cursor:pointer}
.panel-validation-check input{margin-top:2px;accent-color:#ff2c7d}
.panel-validate-action:disabled{opacity:.42;cursor:not-allowed}
.panel-validate-action.done{background:#178c65}
.panel-back{width:100%;margin-top:8px;border:0;background:transparent;color:#a8c2dc;cursor:pointer}
.panel-validation-check small{display:block;margin-top:14px;color:#7f93a8;text-align:center}
.panel-proof-note{margin:12px 0 0;color:#aab8c9;font-size:11px;line-height:1.45}
@media(max-width:800px){
  .public-demo.panel-mode{grid-template-columns:1fr}
  .panel-library{grid-template-columns:repeat(3,1fr)}
  .panel-library>button{display:block}
  .ready-panel.thumb{height:auto;width:100%;margin:auto}
  .ready-panel.thumb img{width:100%;height:105px;object-fit:contain}
  .ready-panel.thumb figcaption{min-height:28px;margin-top:4px}
  .panel-library>button>span{min-height:34px;text-align:center;line-height:1.25}
  .panel-how ol{columns:1}
  .panel-main-view{height:auto;padding:14px}
  .ready-panel.main{width:min(100%,270px)}
  .panel-preview-copy{display:block}
  .panel-preview-copy span{display:block;margin-top:6px}
  .panel-copy-control label{font-size:13px}
  .panel-validation-grid{grid-template-columns:1fr}
  .panel-validation-view{height:auto}
  .ready-panel.validation{width:min(100%,260px)}
}