*{box-sizing:border-box;margin:0;padding:0}html,body{height:100vh;font-family:sans-serif}body>#root{display:flex;flex-direction:column;height:100vh}header{display:flex;justify-content:space-between;padding:8px;background-color:silver;border-top:1px solid black;border-bottom:1px solid black;align-items:center}main{display:flex;flex-direction:column;flex:1;min-height:0;padding:0}dialog{border:none;width:100vw;height:100vh;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#ffffff36}dialog>div{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;aspect-ratio:1 / 1;background-color:silver;border:1px solid black;display:flex;justify-content:center;align-items:center}dialog>div>img{max-width:90%;max-height:90%}.modal-loading{display:flex;flex-direction:column;align-items:center;gap:12px;color:#222}.modal-message{padding:12px;text-align:center;font-weight:600}.modal-title{position:absolute;top:8px;left:12px;font-size:.9rem;background:#fffc;padding:4px 8px;border-radius:6px;border:1px solid #ccc}.spinner{width:42px;height:42px;border:5px solid rgba(0,0,0,.1);border-top-color:#333;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}h2,h3,h4{cursor:pointer;padding:8px;margin:0;border-bottom:1px solid black}h1{font-size:1.2rem}h2{font-size:1.1rem;background-color:#d3d3d3}h3{font-size:1rem;background-color:#dcdcdc;padding-left:16px}h4{font-size:.9rem;background-color:#f5f5f5;padding-left:24px}ul{list-style:none}li{cursor:pointer;padding:8px 32px}button,select{padding:8px;border:1px solid black;border-radius:8px}header>button{width:25%}section{display:flex;flex-direction:column}section[hidden]{display:none}form{display:flex;flex-direction:column;gap:8px;padding:8px;border-bottom:1px solid black}form>div{display:flex;gap:8px}form>div>*{flex:1}.scrollable{flex:1;overflow-y:auto}section.activity[active]{display:flex;flex-direction:column;min-height:0;flex:1;overflow:hidden;border-bottom:1px solid black}section.activity[active]>section{display:flex;flex-direction:column;overflow:hidden;flex:1}section.activity:not([active])>section{display:none}section.post>div{border-bottom:1px solid black}div.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px}div.grid>div{border:1px solid black;background:#f9f9f9;width:100%;aspect-ratio:1 / 1;border-radius:8px;overflow:hidden}div.grid>div>img{width:100%;height:100%;object-fit:cover;border-radius:8px}.login-container{display:flex;height:100vh;align-items:center;justify-content:center}.login-box{width:320px;padding:16px;border:1px solid #ccc;border-radius:8px;background:#fff}.login-box input{width:100%;padding:8px;margin-bottom:8px}