:root{--ink:#162326;--muted:#5f6d75;--line:#d7e1e5;--paper:#eef5f6;--blue:#006fd6;--blue-dark:#004f9e;--green:#36b93a;--graphite:#1f2a2e}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif}.shell{min-height:100vh}.side{position:fixed;inset:0 auto 0 0;width:245px;background:var(--graphite);color:#fff;padding:24px 16px;display:flex;flex-direction:column}.logo{display:flex;align-items:center;gap:10px;padding:0 8px 24px}.logo>span{width:38px;height:38px;border-radius:9px;background:var(--blue);display:grid;place-items:center;font-weight:900}.logo b,.logo small{display:block}.logo b{font-size:20px}.logo small{font-size:8px;letter-spacing:3px;color:#a9bac1}.project{display:flex;gap:9px;align-items:center;background:#29363a;border:1px solid #45545a;border-radius:10px;padding:10px;margin-bottom:20px}.project>i{width:31px;height:31px;border-radius:7px;background:var(--blue);display:grid;place-items:center;font-style:normal;font-size:10px}.project div{flex:1}.project small,.project b{display:block}.project small{font-size:7px;color:#a9bac1}.project b{font-size:10px;margin-top:3px}.project em{font-style:normal}.side nav{display:grid;gap:5px}.side nav button{border:0;background:transparent;color:#b7c4c9;border-radius:8px;padding:11px 12px;text-align:left;display:flex;gap:12px;cursor:pointer}.side nav button.active{background:var(--blue);color:white}.side nav button span{flex:1}.side nav button i{font-style:normal;background:var(--green);color:#10201b;padding:2px 6px;border-radius:10px;font-size:9px}.return{margin-top:16px;padding:11px;background:#29363a;border:1px solid #526167;border-radius:9px;color:#fff;text-decoration:none;display:flex;gap:10px;align-items:center}.return>b{font-size:18px}.return span b,.return span small{display:block}.return span b{font-size:10px}.return span small{font-size:8px;color:#a9bac1}.spacer{flex:1}.quality{background:#29363a;border:1px solid #45545a;border-radius:10px;padding:12px}.quality span{font-size:10px;display:flex;justify-content:space-between}.quality span b{color:var(--green);font-size:22px}.quality>i{height:4px;background:#45545a;display:block;border-radius:4px;margin:8px 0}.quality>i em{height:100%;width:94%;display:block;background:var(--green)}.quality small{font-size:8px;color:#a9bac1}.user{display:flex;gap:9px;align-items:center;margin-top:14px;border-top:1px solid #45545a;padding-top:14px}.user>i,.author>i{width:36px;height:36px;border-radius:50%;background:#e6f2ff;color:var(--blue-dark);font-style:normal;font-size:10px;font-weight:bold;display:grid;place-items:center}.user span b,.user span small,.author span b,.author span small{display:block}.user span b,.author span b{font-size:10px}.user span small,.author span small{font-size:8px;color:#a9bac1}main{margin-left:245px}header{height:88px;background:white;border-bottom:1px solid var(--line);padding:16px 32px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5}header small{font-size:8px;color:var(--muted);letter-spacing:1px}header h1{font-size:22px;margin:4px 0}.actions{display:flex;gap:8px}.actions button{height:38px;border:1px solid var(--line);background:white;border-radius:8px;padding:0 12px;cursor:pointer}.actions button i{font-style:normal;color:#d13a34}.actions .primary{background:var(--blue);border-color:var(--blue);color:white;font-weight:bold}.back{color:var(--blue-dark)}.page{display:none}.active-page{display:block}.stories{height:92px;background:white;border-bottom:1px solid var(--line);display:flex;gap:22px;padding:14px 32px}.stories button{border:0;background:none;display:grid;justify-items:center;gap:2px}.stories button i{width:48px;height:48px;border-radius:50%;background:var(--blue);border:3px solid #a8d8ff;color:#fff;display:grid;place-items:center;font-style:normal;font-size:10px}.stories button i.add{background:white;color:var(--blue);border-color:#d7e1e5;font-size:18px}.stories b{font-size:9px}.stories small{font-size:7px;color:var(--muted)}.layout{max-width:1040px;margin:auto;padding:25px 22px;display:grid;grid-template-columns:minmax(480px,690px) 290px;gap:20px}.section-title{display:flex;justify-content:space-between;align-items:center}.section-title h2{font-size:15px}.section-title div{background:#dfe9ed;padding:3px;border-radius:7px}.section-title button{border:0;background:none;padding:7px;border-radius:5px;font-size:8px}.section-title button.active{background:white;color:var(--blue-dark)}.post,.card{background:white;border:1px solid var(--line);border-radius:12px;margin-bottom:16px;overflow:hidden}.author{padding:14px;display:flex;gap:9px;align-items:center}.author span{flex:1}.author span small{color:var(--muted)}.author time{font-size:8px;color:var(--muted)}.context{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;padding:0 14px 11px}.context b{background:#e6f2ff;color:var(--blue-dark);border-radius:4px;padding:4px 6px;font-size:7px}.context span{font-size:10px;align-self:center}.context small{grid-column:2;font-size:8px;color:var(--muted)}.photo{height:250px;position:relative;background:linear-gradient(150deg,#8ca1a7,#56656a);overflow:hidden}.photo:before{content:"";position:absolute;inset:40% 0 0;background:repeating-linear-gradient(90deg,#788b90 0 22px,#aab8bc 23px 40px);transform:skewY(-7deg)}.photo:after{content:"";position:absolute;left:15%;bottom:25%;width:48%;height:40%;border:10px solid #c7d3d6;box-shadow:115px 25px 0 -5px #2a444c}.photo.envelope:after{border-color:#28454f;box-shadow:120px 20px 0 -5px #e19a36}.photo>strong{position:absolute;z-index:2;right:12px;top:12px;background:white;color:var(--blue-dark);padding:7px 9px;border-radius:6px;font-size:9px}.photo>div{position:absolute;z-index:2;left:17px;bottom:16px;color:white}.photo h2{font-size:17px;margin:0 0 5px}.photo small{font-size:8px}.post>p{font-size:10px;line-height:1.5;padding:12px 14px 3px;margin:0}.counts{display:flex;justify-content:space-between;padding:9px 14px;color:var(--muted);font-size:8px}.react{border-top:1px solid var(--line);padding:7px 10px;display:flex}.react button{border:0;background:none;font-size:9px;color:#5f6d75;padding:7px;cursor:pointer}.react button.selected{background:#e6f2ff;color:var(--blue-dark);border-radius:6px}.react .save{margin-left:auto}.rail{padding-top:42px}.card{padding:15px}.card h3{font-size:11px;margin:0 0 12px}.ring{width:80px;height:80px;border-radius:50%;background:conic-gradient(var(--blue) 72%,#e5ecef 0);margin:5px auto 14px;display:grid;place-content:center;text-align:center;border:7px solid white;outline:1px solid #e5ecef}.ring b,.ring small{display:block}.ring small{font-size:7px;color:var(--muted)}.card label{display:flex;justify-content:space-between;font-size:8px;margin:8px 0 4px}.card>i{display:block;height:4px;background:#e5ecef}.card>i em{display:block;height:100%;background:var(--blue)}.card>p{display:flex;gap:8px;border-top:1px solid var(--line);padding:9px 0;margin:0;font-size:9px}.card>p strong{margin-left:auto;color:var(--blue-dark)}.badges p i{width:32px;height:32px;background:#e8f8e6;color:#218f28;border-radius:8px;display:grid;place-items:center;font-style:normal}.badges p span b,.badges p span small{display:block}.badges p span small{color:var(--muted);font-size:8px;margin-top:3px}.placeholder{padding:45px;max-width:1100px;margin:auto}.placeholder>small{color:var(--blue);font-size:8px;letter-spacing:1.5px}.placeholder>h2{font-size:30px;margin:10px 0}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:25px}.kpis>div{background:white;border:1px solid var(--line);border-radius:10px;padding:18px}.kpis span,.kpis b,.kpis small{display:block}.kpis b{font-size:25px;margin:10px 0}.kpis small{color:var(--green)}.hero{margin:35px;background:var(--graphite);color:white;border-radius:16px;max-width:none}.hero>small{color:var(--green)}.modal{display:none;position:fixed;inset:0;background:#162326aa;z-index:20;place-items:center}.modal.open{display:grid}.modal form{width:min(480px,90%);background:white;border-radius:14px;padding:25px;position:relative}.modal .close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:20px}.modal form>small{font-size:8px;color:var(--blue);letter-spacing:1px}.modal form p{font-size:10px;color:var(--muted)}.modal select,.modal textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:7px;margin:5px 0}.modal textarea{height:80px}.upload{border:1px dashed #aab8bc;border-radius:7px;padding:18px;text-align:center;font-size:9px;color:var(--muted);margin:5px 0 10px}.submit{width:100%;background:var(--blue);color:white;border:0;border-radius:7px;padding:11px;font-weight:bold}@media(max-width:900px){.rail{display:none}.layout{display:block}.kpis{grid-template-columns:1fr 1fr}}@media(max-width:700px){.side{display:none}main{margin:0}header{height:68px;padding:10px 12px}.actions .back{font-size:0}.actions .back:first-letter{font-size:15px}.stories{padding:12px;height:85px;overflow:auto}.layout{padding:14px 9px}.photo{height:220px}.react button{font-size:0}.react button:first-letter{font-size:14px}.placeholder{padding:25px 14px}.hero{margin:15px}.kpis{grid-template-columns:1fr 1fr}}