*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#F4F6F8;color:#18202a}.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.side{background:#173F46;color:#FFFFFF;padding:24px 18px}.brand{font-weight:900;font-size:19px;margin-bottom:22px}.brand span{color:#E47C68}.nav{display:grid;gap:3px}.nav a{padding:8px 10px;border-radius:9px;font-size:12px;opacity:.8}.nav a:nth-child(1),.nav a:hover{background:#E47C68;color:#173F46;opacity:1}.main{padding:28px 34px}.top{display:flex;justify-content:space-between;gap:20px;align-items:center}.top h1{margin:5px 0;font-size:36px}.actions{display:flex;gap:8px}.b{padding:10px 14px;border-radius:10px;border:1px solid #d9dee5;background:white;font-weight:800}.pub{background:#E47C68;color:#173F46;border-color:#E47C68}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0}.card{background:white;border:1px solid #e3e7eb;border-radius:16px;padding:20px}.card b{display:block;font-size:28px;color:#173F46;margin-top:10px}.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}.preview{background:#EAF2E8;border-radius:18px;padding:26px;border:1px solid #6EA49B44}.preview h2{font-size:28px}@media(max-width:900px){.app{grid-template-columns:1fr}.side{display:none}.metrics,.cols{grid-template-columns:1fr 1fr}}