:root{--bg-primary: #0a0a12;--bg-secondary: #12121f;--bg-card: #1a1a2e;--text-primary: #e0e0ff;--text-secondary: #8888aa;--accent-cyan: #00d4ff;--accent-gold: #ffd700;--accent-orange: #ff6b35;--accent-green: #00ff88;--border-color: #2a2a4a;--sidebar-width: 260px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);color:var(--text-primary);min-height:100vh}#root{max-width:1400px;margin:0 auto;padding:2rem}.app{min-height:100vh}.header{text-align:center;padding:2rem 0;border-bottom:1px solid var(--border-color);margin-bottom:2rem}.header h1{font-size:2.5rem;color:var(--accent-cyan);text-shadow:0 0 20px rgba(0,212,255,.5);margin-bottom:.5rem}.header .subtitle{color:var(--text-secondary);font-size:1rem}.auth-section,.shop-section,.profile-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:2rem;margin-bottom:2rem}h2{color:var(--accent-gold);margin-bottom:1.5rem;font-size:1.5rem}h3{color:var(--accent-cyan);margin:1rem 0}.form-group{margin-bottom:1rem}label{display:block;margin-bottom:.5rem;color:var(--text-secondary)}input,select{width:100%;padding:.75rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:1rem}input:focus,select:focus{outline:none;border-color:var(--accent-cyan);box-shadow:0 0 10px #00d4ff4d}button{background:linear-gradient(135deg,var(--accent-cyan),#0099cc);color:var(--bg-primary);border:none;padding:.75rem 1.5rem;border-radius:6px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease}button:hover{transform:translateY(-2px);box-shadow:0 5px 20px #00d4ff66}button.secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}button.danger{background:linear-gradient(135deg,var(--accent-orange),#cc4400)}.search-filter-section{background:var(--bg-secondary);padding:1.5rem;border-radius:8px;border:1px solid var(--border-color)}.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.2rem;margin-top:1.5rem}.item-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:1rem;transition:all .3s ease;position:relative;overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat}.item-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,#1a1a2eb3,#1a1a2ef2);z-index:0;border-radius:8px;transition:background .3s ease}.item-card:hover:before{background:linear-gradient(to bottom,#1a1a2e66,#1a1a2eb3)}.item-card>*{position:relative;z-index:1}.item-card:hover{border-color:var(--accent-cyan);transform:translateY(-5px);box-shadow:0 10px 30px #00d4ff33}.item-card h4{color:var(--accent-gold);font-size:1.1rem;margin-bottom:.35rem}.item-card .category{display:inline-block;background:var(--accent-cyan);color:var(--bg-primary);padding:.2rem .6rem;border-radius:20px;font-size:.7rem;margin-bottom:.5rem}.item-card .description{color:var(--text-secondary);font-size:.85rem;margin-bottom:.6rem;line-height:1.4}.item-card .item-prices{margin-top:.5rem}.item-card .price-row{display:flex;gap:1rem;margin-bottom:.4rem;flex-wrap:wrap}.item-card .stock-row{margin-top:.3rem}.item-card .price{color:var(--accent-gold);font-size:1.15rem;font-weight:700}.item-card .price-sp{color:var(--accent-cyan)}.item-card .stock{color:var(--accent-green);font-size:.9rem;font-weight:500}.item-card button{width:100%;margin-top:1rem}.profile-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem}.info-card{background:var(--bg-secondary);padding:1rem;border-radius:8px;text-align:center}.info-card .label{color:var(--text-secondary);font-size:.85rem;margin-bottom:.25rem}.info-card .value{color:var(--accent-cyan);font-size:1.25rem;font-weight:700}.points-display{background:linear-gradient(135deg,var(--accent-gold),#cc9900);color:var(--bg-primary);padding:1.5rem;border-radius:8px;text-align:center;margin-bottom:1.5rem}.points-display .label{font-size:.9rem}.points-display .value{font-size:2.5rem;font-weight:700}.exchange-history{margin-top:1.5rem}.exchange-item{background:var(--bg-secondary);padding:1rem;border-radius:6px;margin-bottom:.75rem;display:flex;justify-content:space-between;align-items:center}.exchange-item .item-name{color:var(--accent-cyan);font-weight:700}.exchange-item .quantity{color:var(--text-secondary);margin-left:1rem}.exchange-item .total-price{color:var(--accent-gold);font-weight:700}.exchange-item .date{color:var(--text-secondary);font-size:.85rem;margin-left:1rem}.auth-tabs{display:flex;gap:1rem;margin-bottom:1.5rem}.auth-tab{padding:.5rem 1.5rem;background:transparent;color:var(--text-secondary);border:1px solid var(--border-color)}.auth-tab.active{background:var(--accent-cyan);color:var(--bg-primary)}.nav-bar{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;border-bottom:1px solid var(--border-color);margin-bottom:2rem}.nav-links{display:flex;gap:1rem}.nav-link{background:transparent;color:var(--text-primary);padding:.5rem 1rem;border-radius:6px}.nav-link.active{background:var(--accent-cyan);color:var(--bg-primary)}.user-info{display:flex;align-items:center;gap:1rem}.user-welcome{color:var(--accent-cyan)}.logout-btn{background:transparent;border:1px solid var(--accent-orange);color:var(--accent-orange)}.error{background:#ff6b3533;border:1px solid var(--accent-orange);color:var(--accent-orange);padding:1rem;border-radius:6px;margin-bottom:1rem}.success{background:#0f83;border:1px solid var(--accent-green);color:var(--accent-green);padding:1rem;border-radius:6px;margin-bottom:1rem}.empty-state{text-align:center;padding:3rem;color:var(--text-secondary)}@keyframes glow{0%,to{text-shadow:0 0 20px rgba(0,212,255,.5)}50%{text-shadow:0 0 40px rgba(0,212,255,.8)}}.glowing{animation:glow 2s ease-in-out infinite}.admin-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:2rem;margin-bottom:2rem}.admin-tabs{display:flex;gap:1rem;margin-bottom:2rem;border-bottom:1px solid var(--border-color);padding-bottom:1rem}.admin-tab{padding:.75rem 1.5rem;background:transparent;color:var(--text-secondary);border:1px solid var(--border-color)}.admin-tab.active{background:var(--accent-cyan);color:var(--bg-primary);border-color:var(--accent-cyan)}.admin-table{overflow-x:auto;margin-top:1.5rem}.admin-table table{width:100%;border-collapse:collapse}.admin-table th,.admin-table td{padding:1rem;text-align:left;border-bottom:1px solid var(--border-color)}.admin-table th{background:var(--bg-secondary);color:var(--accent-cyan);font-weight:700}.admin-table tr:hover{background:#00d4ff0d}.admin-table button{padding:.5rem 1rem;font-size:.875rem;margin-right:.5rem}.edit-form{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.5rem}.edit-form input{flex:1;min-width:120px;padding:.5rem}.create-form{background:var(--bg-secondary);padding:1.5rem;border-radius:8px;margin-bottom:1.5rem}.create-form h4{color:var(--accent-gold);margin-bottom:1rem}.create-form input{margin-bottom:.75rem}.app-wrapper{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);background:var(--bg-secondary);border-right:1px solid var(--border-color);padding:1.5rem 0;position:fixed;top:0;left:0;bottom:0;z-index:100;display:flex;flex-direction:column;transition:transform .3s ease,width .3s ease}.sidebar.collapsed{width:80px}.sidebar-header{padding:0 1.5rem 1.5rem;border-bottom:1px solid var(--border-color);margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between}.sidebar.collapsed .sidebar-header{padding:1.5rem .75rem;justify-content:center;position:relative}.sidebar-header-content{flex:1}.sidebar.collapsed .sidebar-header-content{display:none}.sidebar-header h2{font-size:1.3rem;color:var(--accent-cyan);text-shadow:0 0 10px rgba(0,212,255,.3);margin:0}.sidebar-header .subtitle{font-size:.8rem;color:var(--text-secondary);margin-top:.25rem}.sidebar-collapse-btn{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);padding:.5rem;border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.sidebar-collapse-btn:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);background:#00d4ff1a;transform:none;box-shadow:none}.sidebar.collapsed .sidebar-collapse-btn{position:absolute;right:.5rem;top:1rem;border:1px solid transparent;padding:.25rem;background:transparent}.sidebar.collapsed .sidebar-collapse-btn:hover{border-color:var(--accent-cyan);background:#00d4ff1a}.sidebar-nav{flex:1;overflow-y:auto;padding:0 1rem;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent}.sidebar-nav::-webkit-scrollbar{width:6px}.sidebar-nav::-webkit-scrollbar-track{background:transparent}.sidebar-nav::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:3px}.sidebar-nav::-webkit-scrollbar-thumb:hover{background-color:var(--text-secondary)}.sidebar.collapsed .sidebar-nav{padding:0 .5rem}.sidebar-section{margin-bottom:1.5rem}.sidebar.collapsed .sidebar-section{margin-bottom:1rem}.sidebar-section-title{font-size:.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;padding:.5rem .75rem;margin-bottom:.25rem}.sidebar.collapsed .sidebar-section-title{display:none}.sidebar-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;color:var(--text-primary);text-decoration:none;border-radius:8px;cursor:pointer;transition:all .2s ease;background:transparent;border:none;width:100%;text-align:left;font-size:.95rem;margin-bottom:.25rem;position:relative}.sidebar.collapsed .sidebar-item{padding:.75rem;justify-content:center;gap:0}.sidebar.collapsed .sidebar-item span{display:none}.sidebar.collapsed .sidebar-item:hover:after{content:attr(data-tooltip);position:absolute;left:100%;top:50%;transform:translateY(-50%);background:var(--bg-secondary);color:var(--text-primary);padding:.5rem 1rem;border-radius:6px;border:1px solid var(--border-color);white-space:nowrap;z-index:1000;margin-left:.5rem;font-size:.85rem}.sidebar-item:hover{background:#00d4ff1a;transform:translate(4px)}.sidebar-item.active{background:#00d4ff26;color:var(--accent-cyan);border-left:3px solid var(--accent-cyan)}.sidebar-item svg{width:20px;height:20px;flex-shrink:0}.sidebar-footer{padding:1rem;border-top:1px solid var(--border-color)}.sidebar.collapsed .sidebar-footer{padding:.5rem}.sidebar-user{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:var(--bg-primary);border-radius:8px;margin-bottom:.75rem}.sidebar.collapsed .sidebar-user{padding:.75rem .5rem;justify-content:center;display:flex;flex-direction:column;align-items:center}.sidebar-user-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent-cyan),var(--accent-gold));display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--bg-primary);font-size:1.1rem;flex-shrink:0;position:relative;z-index:1}.sidebar.collapsed .sidebar-user-avatar{width:48px;height:48px;font-size:1.3rem;margin:0}.sidebar-user-info{flex:1;min-width:0}.sidebar.collapsed .sidebar-user-info{display:none}.sidebar-user-name{font-weight:600;color:var(--text-primary);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user-role{font-size:.75rem;color:var(--text-secondary)}.sidebar-points{display:flex;gap:.75rem;padding:.5rem .75rem}.sidebar.collapsed .sidebar-points{flex-direction:column;gap:.5rem;padding:.25rem 0;align-items:center}.sidebar-point{display:flex;align-items:center;gap:.25rem;font-size:.85rem}.sidebar.collapsed .sidebar-point{flex-direction:column;gap:.1rem;text-align:center}.sidebar-point span:first-child{font-weight:700}.sidebar.collapsed .sidebar-point span:first-child{font-size:1rem}.sidebar.collapsed .sidebar-point span:last-child{font-size:.7rem}.sidebar-point.pap{color:var(--accent-gold)}.sidebar-point.sp{color:var(--accent-cyan)}.sidebar-logout-btn{background:transparent;border:1px solid var(--accent-orange);color:var(--accent-orange);padding:.75rem 1rem;border-radius:8px;cursor:pointer;transition:all .2s ease;width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.9rem;font-weight:400}.sidebar-logout-btn:hover{background:#ff6b351a;transform:none;box-shadow:none}.sidebar.collapsed .sidebar-logout-btn{padding:.75rem}.sidebar.collapsed .sidebar-logout-btn span{display:none}.sidebar-auth{padding:.75rem}.auth-tabs-sidebar{display:flex;gap:.25rem;margin-bottom:1rem}.auth-tab-sidebar{flex:1;padding:.5rem .75rem;background:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-secondary);border-radius:6px;cursor:pointer;font-size:.85rem;transition:all .2s ease}.auth-tab-sidebar:hover{background:#00d4ff1a;color:var(--text-primary)}.auth-tab-sidebar.active{background:#00d4ff26;color:var(--accent-cyan);border-color:var(--accent-cyan)}.sidebar-form{display:flex;flex-direction:column;gap:.75rem}.form-group-sidebar{display:flex;flex-direction:column;gap:.25rem}.form-group-sidebar label{font-size:.8rem;color:var(--text-secondary)}.form-group-sidebar input{padding:.5rem .75rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:.9rem;transition:border-color .2s ease}.form-group-sidebar input:focus{outline:none;border-color:var(--accent-cyan)}.sidebar-toggle{display:none;position:fixed;top:1rem;left:1rem;z-index:200;padding:.75rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;cursor:pointer}.main-content{flex:1;margin-left:var(--sidebar-width);padding:2rem;min-height:100vh;transition:margin-left .3s ease}.main-content.collapsed{margin-left:80px}@media (max-width: 768px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar-toggle{display:flex}.main-content{margin-left:0;padding:5rem 1rem 2rem}}.sidebar-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:99}@media (max-width: 768px){.sidebar-overlay.open{display:block}}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.loading-spinner{width:80px;height:80px;position:relative;margin-bottom:2rem}.loading-spinner:before,.loading-spinner:after{content:"";position:absolute;border-radius:50%;animation:pulse 2s ease-in-out infinite}.loading-spinner:before{width:100%;height:100%;background:linear-gradient(135deg,var(--accent-cyan),var(--accent-gold));animation-delay:-.5s}.loading-spinner:after{width:60%;height:60%;top:20%;left:20%;background:var(--bg-primary)}@keyframes pulse{0%,to{transform:scale(.8);opacity:.5}50%{transform:scale(1);opacity:1}}.admin-images{padding:1rem}.upload-section{background:var(--bg-secondary);padding:1.5rem;border-radius:8px;margin-bottom:1.5rem;border:1px solid var(--border-color)}.upload-section h4{margin:0 0 1rem;color:var(--text-primary)}.upload-section input[type=file]{width:100%;padding:.75rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);cursor:pointer}.upload-section input[type=file]:hover{border-color:var(--accent-cyan)}.images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem;margin-top:1rem}.image-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;overflow:hidden;transition:all .3s ease}.image-card:hover{border-color:var(--accent-cyan);box-shadow:0 4px 12px #00d4ff26}.image-preview{width:100%;height:180px;object-fit:cover;background:var(--bg-primary)}.image-info{padding:1rem}.image-filename{font-size:.9rem;color:var(--text-primary);margin:0 0 .5rem;word-break:break-all}.image-size{font-size:.8rem;color:var(--text-secondary);margin:0 0 .5rem}.loading-text{font-size:1.5rem;color:var(--accent-cyan);text-shadow:0 0 20px rgba(0,212,255,.5);animation:glow 1.5s ease-in-out infinite}.loading-subtext{font-size:.9rem;color:var(--text-secondary);margin-top:.5rem}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;margin-bottom:1.5rem;overflow:hidden;box-shadow:0 4px 12px #0000001a;transition:all .3s ease}.card:hover{box-shadow:0 6px 20px #00d4ff1a;transform:translateY(-2px)}.card-header{background:var(--bg-secondary);padding:1rem 1.5rem;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between}.card-header h3{margin:0;color:var(--accent-cyan);font-size:1.2rem}.card-body{padding:1.5rem}.card-body .empty-state{text-align:center;padding:2rem;color:var(--text-secondary);background:var(--bg-secondary);border-radius:6px;border:1px dashed var(--border-color)}.card-body .form-group{margin-bottom:1rem}.card-body .form-group label{display:block;margin-bottom:.5rem;color:var(--text-secondary);font-size:.9rem}.card-body .form-group input{width:100%;padding:.75rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:1rem;transition:border-color .3s ease}.card-body .form-group input:focus{outline:none;border-color:var(--accent-cyan);box-shadow:0 0 10px #00d4ff33}.card-body button{transition:all .3s ease}.card-body button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00d4ff4d}