*{box-sizing:border-box;margin:0;padding:0}:root{color:#111;background-color:#f7f7f7;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{min-height:100vh}#root{height:100vh}.app-shell{display:flex;flex-direction:column;height:100vh}.app-header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px;background-color:silver;border-top:1px solid #000;border-bottom:1px solid #000}.app-header h1{font-size:1.2rem;flex:1;text-align:center}button{padding:8px;border:1px solid #000;border-radius:8px;background:#fdfdfd;cursor:pointer}button:active{transform:translateY(1px)}.app-header>button{min-width:110px}.header-actions{display:flex;gap:6px;align-items:center}.header-actions button{min-width:110px}.header-actions .ghost{background:transparent}.status-chips{display:flex;gap:6px;flex-wrap:wrap}.chip{border:1px solid #000;padding:6px 8px;border-radius:10px;background:#f7f7f7;font-size:.85rem}.chip.danger{background:#ffe3e0;color:#9b1c1c}main{display:flex;flex-direction:column;flex:1;min-height:0}h2,h3,h4{cursor:pointer;padding:8px;border-bottom:1px solid #000;margin:0}h2{font-size:1.1rem;background-color:#d3d3d3}h3{font-size:1rem;background-color:#dcdcdc;padding-left:16px}h4{font-size:.95rem;background-color:#f5f5f5;padding-left:24px}.activity{display:flex;flex-direction:column}.activity>section{display:none}.activity.active{min-height:0;flex:1;overflow:hidden;border-bottom:1px solid #000}.activity.active>section{display:flex;flex-direction:column;min-height:0;flex:1}.scrollable{flex:1;overflow-y:auto}.trip-posts{display:flex;flex-direction:column}.post-content ul{list-style:none}.post-content li{cursor:pointer;padding:8px 32px}.post-content li:hover{background-color:#f0f0f0}.empty-message{padding:12px 24px;color:#555;font-size:.95rem}.modal-backdrop{position:fixed;inset:0;background-color:#ffffff36;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10}.modal-body{max-width:90vw;max-height:90vh;width:auto;height:auto;padding:8px;background-color:silver;border:1px solid #000;display:flex;align-items:center;justify-content:center;overflow:hidden}.modal-body img{display:block;max-width:calc(90vw - 16px);max-height:calc(90vh - 16px);width:auto;height:auto;object-fit:contain}.modal-error{color:#842029;font-weight:600;text-align:center}.semantic-search form{display:flex;flex-direction:column;gap:8px;padding:8px;border-bottom:1px solid #000}.semantic-search form>div{display:flex;gap:8px}.semantic-search form>div>*{flex:1}.semantic-search select{padding:8px;border:1px solid #000;border-radius:8px;background:#fff}.semantic-search .scrollable{align-content:center}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px}.grid-cell{border:1px solid #000;background:#f9f9f9;width:100%;aspect-ratio:1 / 1;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}.grid-cell.has-image{cursor:pointer}.grid-cell img{width:100%;height:100%;object-fit:cover;border-radius:8px}.search-feedback{padding:0 8px;font-size:.9rem;color:#444}.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;padding:8px 16px}.post-grid .thumb{padding:0;border:1px solid #ccc;border-radius:8px;overflow:hidden;background:#fafafa;cursor:pointer}.post-grid .thumb img{width:100%;height:100px;object-fit:cover;display:block}.status-banner{padding:8px 12px;background:#eef2ff;color:#1f2a44;border-bottom:1px solid #d4dcff}.status-banner.error{background:#fff4f2;color:#842029;border-color:#f5c2c7}.status-banner.muted{background:transparent;color:#666;border:none}.login-screen{margin:auto;max-width:400px;background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:24px;box-shadow:0 12px 30px #0000000d;display:flex;flex-direction:column;gap:12px;text-align:center}.login-screen h1{font-size:1.4rem}.login-screen p{color:#555}.login-form{display:flex;flex-direction:column;gap:12px;text-align:left}.login-form label{display:flex;flex-direction:column;gap:4px;font-weight:600;color:#333}.login-form input{padding:10px;border:1px solid #ccc;border-radius:8px;font-size:1rem}.login-form .error{color:#b42318;font-size:.85rem}.login-form .status{color:#555;font-size:.9rem;margin:0}.login-form button{width:100%;margin-top:4px;background:#f5f5f5}.login-form button:disabled{opacity:.6;cursor:not-allowed}@media(max-width:640px){.app-header>button{width:32%}.header-actions{flex-direction:column}h1{font-size:1.1rem}h2{font-size:1rem}}
