*{
    margin:0;padding:0;box-sizing:border-box}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:#f5f6fa}.top-nav{background:#2c3e50;color:#fff;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:fixed;top:0;left:0;right:0;z-index:1000;box-shadow:0 2px 5px rgb(0 0 0 / .1)}.top-nav-left{display:flex;align-items:center;gap:20px}.menu-toggle{font-size:24px;cursor:pointer;background:none;border:none;color:#fff}.logo{font-size:24px;font-weight:700}.top-nav-right{display:flex;align-items:center;gap:20px}.search-box{display:flex;align-items:center;background:#34495e;border-radius:20px;padding:8px 15px}.search-box input{background:none;border:none;color:#fff;outline:none;width:200px}.search-box input::placeholder{color:#95a5a6}.icon-btn{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;position:relative}.badge{position:absolute;top:-5px;right:-5px;background:#e74c3c;color:#fff;border-radius:50%;width:18px;height:18px;font-size:10px;display:flex;align-items:center;justify-content:center}.user-profile{display:flex;align-items:center;gap:10px;cursor:pointer}.user-avatar{width:35px;height:35px;border-radius:50%;background:#3498db;display:flex;align-items:center;justify-content:center}.side-nav{position:fixed;top:60px;left:0;width:250px;height:calc(100vh - 60px);background:#34495e;color:#fff;overflow-y:auto;transition:transform 0.3s ease;z-index:999}.side-nav.closed{transform:translateX(-250px)}.nav-item{padding:15px 20px;display:flex;align-items:center;gap:15px;cursor:pointer;transition:background 0.3s;border-left:3px solid #fff0}.nav-item:hover{background:#2c3e50;border-left-color:#3498db}.nav-item.active{background:#2c3e50;border-left-color:#3498db}.nav-item i{width:20px}.nav-item .arrow{margin-left:auto;transition:transform 0.3s}.nav-item.open .arrow{transform:rotate(180deg)}.sub-menu{max-height:0;overflow:hidden;transition:max-height 0.3s ease;background:#2c3e50}.sub-menu.open{max-height:500px}.sub-item{padding:12px 20px 12px 55px;display:flex;align-items:center;gap:15px;cursor:pointer;transition:background 0.3s;font-size:14px}.sub-item:hover{background:#1a252f}.sub-item.active{background:#1a252f;color:#3498db}.main-content{margin-top:60px;margin-left:250px;padding:30px;transition:margin-left 0.3s ease}.main-content.expanded{margin-left:0}.content-header{margin-bottom:30px}.content-header h1{font-size:28px;color:#2c3e50;margin-bottom:5px}.breadcrumb{color:#7f8c8d;font-size:14px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px}.stat-card{background:#fff;padding:25px;border-radius:10px;box-shadow:0 2px 10px rgb(0 0 0 / .08);display:flex;justify-content:space-between;align-items:center}.stat-info h3{font-size:32px;color:#2c3e50;margin-bottom:5px}.stat-info p{color:#7f8c8d;font-size:14px}.stat-icon{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px}.stat-icon.blue{background:#e3f2fd;color:#2196f3}.stat-icon.green{background:#e8f5e9;color:#4caf50}.stat-icon.orange{background:#fff3e0;color:#ff9800}.stat-icon.red{background:#ffebee;color:#f44336}.content-card{background:#fff;border-radius:10px;padding:25px;box-shadow:0 2px 10px rgb(0 0 0 / .08)}.content-card h2{margin-bottom:20px;color:#2c3e50}table{width:100%;border-collapse:collapse}th,td{padding:12px;text-align:left;border-bottom:1px solid #ecf0f1}th{background:#f8f9fa;color:#2c3e50;font-weight:600}@media (max-width:768px){.search-box{display:none}.side-nav{transform:translateX(-250px)}.side-nav.open{transform:translateX(0)}.main-content{margin-left:0}.stats-grid{grid-template-columns:1fr}table{font-size:14px}th,td{padding:8px}}.overlay{display:none;position:fixed;top:60px;left:0;right:0;bottom:0;background:rgb(0 0 0 / .5);z-index:998}.overlay.active{display:block}
 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: #f5f7fa;
            color: #2d3748;
        }

        header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 10px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        nav {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
        }

        .logo {
            font-size: 1.8em;
            font-weight: bold;
        }

        .nav-links {
            display: flex;
            gap: 30px;
            list-style: none;
        }

        .nav-links a {
            color: white;
    text-decoration: none;
    transition: opacity 0.3s;
    padding: 17px 0px;
    display: inline-block;
        }

        .nav-links a:hover {
            opacity: 0.8;
        }

        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 80px 20px;
            text-align: center;
        }

        .hero h1 {
            font-size: 3em;
            margin-bottom: 20px;
        }

        .hero p {
            font-size: 1.3em;
            margin-bottom: 30px;
            opacity: 0.9;
        }

        .search-bar {
            max-width: 600px;
            margin: 0 auto;
            display: flex;
            gap: 10px;
        }

        .search-bar input {
            flex: 1;
            padding: 15px 20px;
            border: none;
            border-radius: 8px;
            font-size: 1em;
        }

        .search-bar button {
            padding: 15px 30px;
            background: #ff6b6b;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            font-weight: 600;
            transition: background 0.3s;
        }

        .search-bar button:hover {
            background: #ee5a52;
        }

        .filters {
            max-width: 1200px;
            margin: 30px auto;
            padding: 0 20px;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .filter-btn {
            padding: 10px 20px;
            background: white;
            border: 2px solid #e2e8f0;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 0.95em;
        }

        .filter-btn:hover, .filter-btn.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .container {
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px;
        }

        .software-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 25px;
            margin-top: 30px;
        }

        .software-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
            transition: transform 0.3s, box-shadow 0.3s;
            cursor: pointer;
        }

        .software-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }

        .card-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
        }

        .icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8em;
        }

        .card-info h3 {
            font-size: 1.3em;
            margin-bottom: 5px;
            color: #2d3748;
        }

        .category {
            display: inline-block;
            padding: 4px 12px;
            background: #e6f3ff;
            color: #667eea;
            border-radius: 12px;
            font-size: 0.85em;
            font-weight: 600;
        }

        .description {
            color: #718096;
            line-height: 1.6;
            margin: 15px 0;
        }

        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid #e2e8f0;
        }

        .rating {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #f59e0b;
        }

        .price {
            font-weight: 700;
            color: #667eea;
            font-size: 1.2em;
        }

        .price.free {
            color: #10b981;
        }

        footer {
            background: #2d3748;
            color: white;
            text-align: center;
            padding: 30px 20px;
            margin-top: 60px;
        }

        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2em;
            }

            .software-grid {
                grid-template-columns: 1fr;
            }

            .nav-links {
                display: none;
            }
        }

        .card-actions{display:flex;gap:10px;margin-top:10px}
.card-actions button{flex:1;padding:8px;border:none;border-radius:6px;cursor:pointer}
.btn-open{background:#4caf50;color:#fff}
.btn-detail{background:#2196f3;color:#fff}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center}
.modal-content{background:#fff;padding:20px;border-radius:10px;max-width:500px;width:90%}
.modal-content h2{margin-top:0}
.close{float:right;cursor:pointer;font-size:18px}

#authModal {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  justify-content:center;
  align-items:center;
  z-index:9999;
}

#authModal .box {
  background:#fff;
  width:320px;
  padding:20px;
  border-radius:12px;
  animation:pop .3s ease;
}

#authModal h2 {
  margin-bottom:10px;
}

#authModal input {
  width:100%;
  padding:10px;
  margin:6px 0;
  border:1px solid #ddd;
  border-radius:6px;
}

#authModal button {
  width:100%;
  padding:10px;
  background:#4f46e5;
  color:#fff;
  border:none;
  border-radius:6px;
  cursor:pointer;
  margin-top:10px;
}

#authModal .switch {
  text-align:center;
  margin-top:10px;
  font-size:14px;
}

#authModal .switch a {
  color:#4f46e5;
  cursor:pointer;
}

#authModal .close {
  float:right;
  cursor:pointer;
}

@keyframes pop {
  from {transform:scale(.8);opacity:0}
  to {transform:scale(1);opacity:1}
}
#navAuth .authbtn{    
 border: 1px solid #c9c9c9;
    padding: 9px 10px;
    border-radius: 5px;
    margin: 7px 5px;
    cursor: pointer;
    display: -webkit-inline-box;
     }
.admin-section {
            display: flex;
            align-items: center;
            gap: 1rem;
            background: rgba(255, 255, 255, 0.15);
            padding: 0.5rem 1rem;
            border-radius: 50px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .admin-label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: white;
            font-weight: 600;
            font-size: 0.95rem;
        }

        .admin-icon {
            font-size: 1.2rem;
        }

        .logout-btn {
            background: white;
            color: #667eea;
            border: none;
            padding: 0.5rem 1.2rem;
            border-radius: 25px;
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .logout-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            background: #f8f8f8;
        }

        .logout-btn:active {
            transform: translateY(0);
        }

        /* Mobile menu button */
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }
    @media (max-width: 768px) {
            .nav-links {
                position: absolute;
                top: 60px;
                left: 0;
                right: 0;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                flex-direction: column;
                padding: 1rem;
                gap: 0.5rem;
                display: none;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            }

            .nav-links.active {
                display: flex;
                z-index: 99;
            }

            .mobile-menu-btn {
                display: block;
            }

            .admin-section {
                margin-top: 1rem;
            }
        }

.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.popup-box {
    position: relative;
    width: 700px;
}

.popup-box img {
    width: 100%;
}

.popup-box button {
    margin-top: 10px;
    padding: 8px 16px;
    cursor: pointer;
    position: absolute;
    right: 23px;
}