html,body{font-family:Roboto,sans-serif;background-color:#fff;margin:0;padding:0;height:100%}.app-navbar-notch{position:fixed;top:0;left:0;right:0;z-index:99;height:env(safe-area-inset-top);background-color:#fff}:root{--nav-bg: #ffffff;--navbar-height: 60px;--yellow-color: #fab82f;--red-color: #dd0452;--purple-color: #a8177b}.app-container{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:var(--navbar-height)}.login-container{flex:1;display:flex;justify-content:center;align-items:center;background-color:#fff;margin-top:100px}.logo-container{display:flex;align-items:center;justify-content:center;height:400px;width:500px;background-color:#f4f4f4;border-right:2px solid #ccc}.logo{width:100%;height:100%}.form-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;height:400px;width:500px}.form-box{width:100%;max-width:300px}label{display:block;text-align:center}input[type=email],input[type=password]{width:100%;padding:10px;border:2px solid var(--purple-color);border-radius:5px;margin:10px 0;max-width:300px}.login-button{background-color:var(--purple-color);color:#fff;border:none;cursor:pointer;transition:background-color .3s;width:100%;padding:15px;border-radius:5px;margin-top:15px}@media (max-width: 800px){.logo-container{display:none}.form-container{width:100%;height:auto;padding:20px}}*{box-sizing:border-box}.icon-button{background:none;border:none;cursor:pointer;color:inherit;padding:5px;font-size:24px}.icon-button ion-icon{vertical-align:middle}.post{background-color:#fff;border:1px solid #dbdbdb;border-radius:10px;width:100%;max-width:800px;margin:20px;box-shadow:0 2px 4px #0000001a}.post-info{display:flex;justify-content:space-between;align-items:center;padding-left:15px;padding-right:15px;padding-bottom:15px}.post-caption{margin:0;flex-grow:1}.post-timestamp{margin:0;flex-shrink:0;white-space:nowrap}.post img{width:100%;margin-bottom:15px}.post h3{margin:10px 0}.post p{color:#666}.post div{background-color:#fff;border-radius:8px}.comments{padding-left:15px}.comment-form{display:flex;align-items:center;gap:10px;padding-left:15px;padding-bottom:15px;padding-right:15px;justify-content:flex-start}.comment-input{flex-grow:1;padding:8px;border-radius:4px;border:1px solid #ccc}.comment-submit{background:transparent;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}.comment-submit ion-icon{font-size:24px;color:#000}.description-input,.button{width:100%;padding:10px;margin-top:8px;border-radius:5px;border:1px solid #ddd}.button{background-color:#f6bf27;color:#fff;border:none;cursor:pointer;font-weight:700}.button:hover{background-color:#fcd170}h2{text-align:center;margin-bottom:20px}.signup-prompt{text-align:center;margin:20px 0}.signup-link{color:#2563eb;text-decoration:underline}.content-container{max-width:1000px;margin:0 auto;width:100%}.responsive-table{max-width:1300px;margin:0 auto;width:100%;border-top-left-radius:5px}.header-container{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 0}.search-container{display:flex;flex-direction:row;align-items:center;gap:8px}.search-container ion-icon{font-size:30px;color:#333}.user-info-container{padding:15px;display:flex;align-items:center}.user-date-info{display:flex;flex-direction:column}.user-date-info p{color:#333;margin:0;padding:2px 0}.user-date-info p:first-child{font-size:1.3em;margin:0;font-weight:700}.user-date-info p:last-child{font-size:.8em;margin:0;color:#666}#searchInput{width:100%;padding:8px 40px 8px 8px;border:1px solid #ccc;border-radius:5px;margin:8px 0}.search-icon{color:#ccc;cursor:pointer}#usersTable{border-collapse:separate;border-spacing:0}#usersTable thead tr:first-child th:first-child{border-top-left-radius:10px}#usersTable thead tr:first-child th:last-child{border-top-right-radius:10px}#usersTable tbody tr:nth-child(odd){background-color:#f6f6f6}.circle{display:inline-block;width:30px;height:30px;border-radius:50%;color:#fff;text-align:center;line-height:30px;margin-right:10px;font-weight:700}#usersTable tbody tr:nth-child(2n){background-color:#fff}h1{color:#333}.table-title{margin:0;color:#000;text-align:left}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px}th{cursor:pointer}th span{font-size:smaller}thead{background-color:#362f4b;color:#fff}.button-active{border-bottom:5px solid var(--purple-color)}.upload-box{cursor:pointer;margin:1rem;display:flex;justify-content:center;border-radius:.375rem;border:2px dashed #d1d5db;padding:1.25rem 1.5rem}.description-input{width:100%;padding:.5rem;border-radius:.375rem;color:#1f2937;border:2px solid #d1d5db}my-photos::part(list),my-photos::part(btn),my-photos::part(item){margin:1rem;text-align:center;border-radius:.375rem;background-color:#dc2626;padding:.75rem 1rem;font-size:.875rem;font-weight:600;color:#fff;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}my-photos::part(image){width:100%}