/* =========================================================
   GO DIGITAL | ARNSEC — Stylesheet
   ========================================================= */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
body{background:#f4f7fb;color:#222}

/* HEADER */
header{background:#333;padding:15px 30px}
.nav{max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.logo img{height:60px;display:block}
.nav a{margin-left:25px;text-decoration:none;font-weight:500;color:#f0f8ff;position:relative}
.nav a::after{content:'';position:absolute;left:0;bottom:-5px;width:0;height:2px;background:#0072ff;transition:.3s}
.nav a:hover::after{width:100%}

@media(max-width:600px){
    header{padding:12px 16px}
    .nav{justify-content:center;text-align:center}
    .logo img{height:42px}
    .nav>div:last-child{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;width:100%}
    .nav a{margin-left:0;font-size:14px}
}

/* LOGIN / REGISTER CONTAINER */
.main{display:flex;justify-content:center;margin:60px auto;padding:0 20px}
.container{max-width:1100px;width:100%;background:#fff;border-radius:12px;display:flex;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.15)}
.left{flex:1;background:linear-gradient(135deg,#00c6ff,#0072ff);color:#fff;padding:60px}
.left h1{font-size:2.2rem;margin-bottom:12px}
.left p{opacity:.9;line-height:1.6}
.right{flex:1;padding:60px}

/* AUTH TABS */
.auth-tabs{display:flex;gap:8px;margin-bottom:25px;border-bottom:1px solid #eee}
.auth-tab{flex:1;text-align:center;padding:12px 0;cursor:pointer;font-weight:600;color:#888;border-bottom:2px solid transparent;transition:.2s}
.auth-tab.active{color:#0072ff;border-bottom-color:#0072ff}
.auth-form{display:none}
.auth-form.active{display:block}

input{width:100%;padding:14px;margin-bottom:15px;border:1px solid #ccc;border-radius:6px;font-size:14px}
input:focus{outline:none;border-color:#0072ff}
button, .btn{width:100%;padding:14px;border:none;border-radius:6px;background:#0072ff;color:#fff;font-size:16px;cursor:pointer;font-weight:600;transition:.2s}
button:hover, .btn:hover{background:#005fd6}
.btn-secondary{background:#eef2f7;color:#333}
.btn-secondary:hover{background:#dde5ee}
.btn-danger{background:#e5484d}
.btn-danger:hover{background:#c93b3f}
.btn-sm{width:auto;padding:8px 14px;font-size:13px;margin:2px}

.error{color:#c93b3f;background:#fdecee;padding:10px 14px;border-radius:6px;margin-bottom:15px;font-size:14px}
.success{color:#1a7f37;background:#e9fbef;padding:10px 14px;border-radius:6px;margin-bottom:15px;font-size:14px}

/* DASHBOARD */
.dashboard{max-width:1200px;margin:60px auto;padding:0 20px}
.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;flex-wrap:wrap;gap:10px}
.badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600}
.badge-admin{background:#fff2d9;color:#a15c00}
.badge-user{background:#e3f1ff;color:#0058b8}
.badge-active{background:#e9fbef;color:#1a7f37}
.badge-blocked{background:#fdecee;color:#c93b3f}

.folder-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.folder{background:#fff;padding:25px;border-radius:12px;text-align:center;box-shadow:0 10px 25px rgba(0,0,0,.06);transition:.3s}
.folder:hover{transform:translateY(-5px)}
.folder i{font-size:40px;color:#0072ff;margin-bottom:15px}
.folder a{color:#000;text-decoration:none;font-weight:600}
.empty-state{background:#fff;padding:40px;border-radius:12px;text-align:center;color:#888}

/* ADMIN PANEL */
.admin-panel{max-width:1200px;margin:40px auto;padding:0 20px}
.admin-card{background:#fff;border-radius:12px;padding:25px;margin-bottom:20px;box-shadow:0 10px 25px rgba(0,0,0,.06)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px;border-bottom:1px solid #eee;font-size:14px}
th{color:#888;font-weight:600;text-transform:uppercase;font-size:12px}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:10px 0}
.perm-grid label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:400}
.perm-grid input{width:auto;margin:0}
.actions{display:flex;flex-wrap:wrap;gap:6px}

/* SERVICES */
.services{max-width:1100px;margin:80px auto;text-align:center;padding:0 20px}
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px}
.service{background:#fff;padding:30px;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.1);transition:.3s}
.service:hover{transform:translateY(-6px)}
.service i{font-size:40px;color:#0072ff;margin-bottom:15px}
.service a{text-decoration:none;color:#000;font-weight:600}

/* FOOTER */
footer{background:#0f2027;color:#cfd8e0;padding:55px 20px 0}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:35px}
.footer-col h4{color:#fff;font-size:15px;font-weight:600;margin-bottom:16px;letter-spacing:.3px}
.footer-col a{display:block;color:#cfd8e0;text-decoration:none;font-size:13.5px;margin-bottom:10px;transition:.25s}
.footer-col a:hover{color:#00e5ff;padding-left:3px}
.footer-logo img{height:42px;margin-bottom:14px;filter:brightness(0) invert(1)}
.footer-tagline{font-size:13px;line-height:1.7;color:#93a2b1;max-width:280px}

.social{display:flex;gap:12px;margin-top:2px}
.social-btn{width:38px;height:38px;border-radius:50%;background:#1b2b33;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;text-decoration:none;transition:.25s}
.social-btn:hover{background:#0072ff;transform:translateY(-3px)}

.footer-bottom{max-width:1200px;margin:0 auto;border-top:1px solid rgba(255,255,255,.08);padding:20px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;font-size:12.5px;color:#93a2b1}
.dev-credit span{color:#00e5ff;font-weight:600}

@media(max-width:900px){
    .container{flex-direction:column}
    .left,.right{padding:35px}
    .folder-grid{grid-template-columns:repeat(2,1fr)}
    .dashboard-header{flex-direction:column;align-items:flex-start}
    .footer-inner{grid-template-columns:repeat(2,1fr);text-align:left}
    .main{flex-direction:column;align-items:stretch;margin:35px auto}
    .about-hero{width:100%}
}

@media(max-width:600px){
    .footer-inner{grid-template-columns:1fr;text-align:center;gap:28px}
    .footer-logo img{margin-left:auto;margin-right:auto}
    .footer-tagline{margin:0 auto}
    .social{justify-content:center}
    .footer-bottom{flex-direction:column;text-align:center}
}