:root{--bg-color: #f4f4f9;--primary-color: #007bff;--primary-hover: #0056b3;--text-color: #333;--border-color: #e0e0e0}body{margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--bg-color)}.top-bar{display:flex;justify-content:space-between;align-items:center;height:48px;padding:0 24px;background-color:#fff;border-bottom:1px solid var(--border-color);box-shadow:0 1px 3px #0000000d}body{margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f4f4f9}.app-container{display:flex;flex-direction:column;min-height:100vh}.top-bar{display:flex;justify-content:space-between;align-items:center;height:48px;padding:0 24px;background-color:#fff;border-bottom:1px solid #e0e0e0;box-shadow:0 1px 3px #0000000d}.logo{font-weight:700;font-size:1.1rem;color:#333;text-decoration:none}.login-btn{padding:6px 16px;font-size:.85rem;font-weight:500;color:#fff;background-color:#007bff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease}.login-btn:hover{background-color:#0056b3}.content{flex:1;padding:32px 20px}.grid-wrapper{display:flex;justify-content:center;align-items:center;width:100%}.grid-container{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:900px;width:100%;padding:24px;background-color:#fff;border:2px solid #222;box-shadow:0 4px 12px #0000001a}.grid-item{display:flex;flex-direction:column;text-decoration:none;color:inherit;background-color:#e9e9e9;border:1px solid #dcdcdc;border-radius:4px;padding:12px;transition:transform .2s,box-shadow .2s}.grid-item:hover{transform:translateY(-3px);box-shadow:0 6px 12px #00000026;background-color:#dfdfdf}.image-placeholder img{width:100%;height:140px;object-fit:cover;border-radius:2px;background-color:#ccc;display:block}.item-title{margin-top:12px;text-align:center;font-weight:600;font-size:1rem;color:#333}@media (max-width: 768px){.grid-container{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.grid-container{grid-template-columns:1fr}}.modal-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:#fff;border-radius:8px;width:90%;max-width:400px;box-shadow:0 10px 25px #00000026;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-color, #e0e0e0)}.modal-header h3{margin:0;font-size:1.1rem;color:var(--text-color, #333)}.close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#999;transition:color .2s}.close-btn:hover{color:#333}.modal-body{padding:20px;color:#555;line-height:1.5}.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 20px;background-color:#f9f9f9;border-top:1px solid var(--border-color, #e0e0e0);border-radius:0 0 8px 8px}.btn-cancel,.btn-confirm{padding:8px 16px;border-radius:4px;font-size:.9rem;cursor:pointer;border:none;font-weight:500;transition:background-color .2s}.btn-cancel{background-color:#e0e0e0;color:#333}.btn-cancel:hover{background-color:#d0d0d0}.btn-confirm{background-color:var(--primary-color, #007bff);color:#fff}.btn-confirm:hover{background-color:var(--primary-hover, #0056b3)}:root{--primary-color: #84c7ae;--primary-hover: #6eb399;--primary-light: rgba(132, 199, 174, .2);--text-on-primary: #2d453b}