*{box-sizing:border-box;margin:0;padding:0}:root{font-family:sans-serif;line-height:1.5;font-weight:400;color:#213547;background-color:#fff}html,body{height:100vh;margin:0;padding:0}#root{height:100vh;display:flex;flex-direction:column}body{margin:0;min-width:320px}h1{font-size:1.5em;line-height:1.1}button{font-family:inherit;cursor:pointer}.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.login-card{background:#fff;border-radius:12px;box-shadow:0 10px 40px #0000001a;padding:40px;width:100%;max-width:400px}.login-title{font-size:1.8rem;color:#333;margin-bottom:8px;text-align:center}.login-subtitle{font-size:.95rem;color:#666;margin-bottom:30px;text-align:center}.login-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:.9rem;font-weight:600;color:#333}.form-input{padding:12px;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:border-color .3s}.form-input:focus{outline:none;border-color:#667eea}.form-input.input-error{border-color:#e74c3c}.error-message{color:#e74c3c;font-size:.85rem;margin-top:4px}.error-message-global{background-color:#fee;border:1px solid #e74c3c;border-radius:6px;padding:12px;text-align:center}.btn-submit{padding:14px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.btn-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-submit:disabled{opacity:.6;cursor:not-allowed}.login-hint{text-align:center;padding:12px;background-color:#f8f9fa;border-radius:6px;margin-top:10px}.login-hint small{color:#666;line-height:1.6}header.app-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}.header-title{font-size:1.2rem;margin:0}.header-btn{padding:8px;border:1px solid black;border-radius:8px;background:#fff;cursor:pointer;font-size:.9rem;width:25%;min-width:80px}.header-btn:hover{background-color:#f0f0f0}.header-btn:active{background-color:#e0e0e0}main.main-container{display:flex;flex-direction:column;flex:1;padding:0;overflow-y:auto}.image-modal{border:none;width:100vw;height:100vh;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#ffffff36;position:fixed;top:0;left:0;margin:0;padding:0;max-width:none;max-height:none}.modal-content{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}.modal-content img{max-width:90%;max-height:90%}section.activity{display:none}section.activity.active{display:flex;flex-direction:column;flex:1;overflow-y:auto;border-bottom:1px solid black}section.activity.active>.content-section{display:flex;flex-direction:column;overflow-y:auto;flex:1}h2,h3,h4{cursor:pointer;padding:8px;margin:0;border-bottom:1px solid black}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;padding:0;margin:0}li{cursor:pointer;padding:8px 32px;border-bottom:1px solid #eee}li:hover{background-color:#f5f5f5}section.post>div{border-bottom:1px solid black}.scrollable{flex:1;overflow-y:auto}form{display:flex;flex-direction:column;gap:8px;padding:8px;border-bottom:1px solid black}.form-row{display:flex;gap:8px}.form-row>*{flex:1}form select,.btn-search{padding:8px;border:1px solid black;border-radius:8px;background:#fff;font-size:.9rem}.btn-search{cursor:pointer;background:#fff}.btn-search:hover{background-color:#f0f0f0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px}.grid>div{border:1px solid black;background:#f9f9f9;width:100%;aspect-ratio:1 / 1;border-radius:8px;overflow:hidden;cursor:pointer}.grid>div:hover{opacity:.8}.grid>div>img{width:100%;height:100%;object-fit:cover;border-radius:8px}.app-container{display:flex;flex-direction:column;min-height:100vh;overflow-y:auto}.loading-container{display:flex;align-items:center;justify-content:center;height:100vh;background-color:#f5f5f5}.loading-spinner{font-size:1.2rem;color:#667eea;font-weight:600}