/* ==========================================
   DevTools Hub v2.0
   Global Styles
========================================== */

:root{

    --primary:#2563eb;
    --primary-hover:#1d4ed8;

    --background:#fafafa;
    --card:#ffffff;

    --text:#111827;
    --text-secondary:#6b7280;

    --border:#e5e7eb;

    --success:#22c55e;
    --danger:#ef4444;

    --shadow-sm:0 1px 2px rgba(0,0,0,.05);
    --shadow-md:0 8px 24px rgba(0,0,0,.06);

    --radius:14px;

    --transition:.25s ease;

    --container:1400px;

}

/* ==========================================
   Reset
========================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    color:var(--text);

    font-family:'Inter',sans-serif;

    line-height:1.6;

    -webkit-font-smoothing:antialiased;

}

/* ==========================================
   Links
========================================== */

a{

    text-decoration:none;

    color:inherit;

}

button{

    font-family:inherit;

}

input,
textarea,
button{

    outline:none;

}

/* ==========================================
   Container
========================================== */

.container{

    width:min(95%,var(--container));

    margin:auto;

}

/* ==========================================
   Navbar
========================================== */

.navbar{

    height:72px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 40px;

    background:var(--card);

    border-bottom:1px solid var(--border);

    position:sticky;

    top:0;

    z-index:999;

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:22px;

    font-weight:700;

}

.logo i{

    color:var(--primary);

    font-size:24px;

}

nav{

    display:flex;

    gap:28px;

}

nav a{

    color:var(--text-secondary);

    font-size:15px;

    font-weight:500;

    transition:var(--transition);

}

nav a:hover{

    color:var(--text);

}

nav .active{

    color:var(--primary);

}

.nav-right{

    display:flex;

    align-items:center;

    gap:18px;

}

.nav-right button{

    width:42px;

    height:42px;

    border:none;

    background:transparent;

    border-radius:12px;

    cursor:pointer;

    transition:var(--transition);

}

.nav-right button:hover{

    background:#f3f4f6;

}

.github{

    font-size:22px;

}
/* ==========================================
   Page Title
========================================== */

.page-title{

    text-align:center;

    margin:60px 0 40px;

}

.page-title h1{

    font-size:52px;

    font-weight:700;

    letter-spacing:-1px;

}

/* ==========================================
   Editors
========================================== */

.editor-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

}

.editor-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:16px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

}

.editor-header{

    height:56px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 20px;

    border-bottom:1px solid var(--border);

    font-weight:600;

}

.editor-header span{

    display:flex;

    align-items:center;

    gap:10px;

}

.icon-btn{

    width:36px;

    height:36px;

    border:none;

    background:transparent;

    border-radius:10px;

    cursor:pointer;

    transition:var(--transition);

}

.icon-btn:hover{

    background:#f3f4f6;

}

.CodeMirror{

    height:600px;

    font-size:15px;

    border:none;

}
/* ==========================================
   Toolbar
========================================== */

.toolbar{

    margin:28px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:16px;

}

.left-actions,
.right-actions{

    display:flex;

    gap:14px;

    flex-wrap:wrap;

}

.toolbar button{

    height:46px;

    padding:0 20px;

    border:1px solid var(--border);

    background:var(--card);

    border-radius:12px;

    font-size:15px;

    font-weight:500;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:10px;

    transition:var(--transition);

}

.toolbar button:hover{

    transform:translateY(-2px);

    box-shadow:var(--shadow-md);

}

.toolbar .primary{

    background:var(--primary);

    color:white;

    border:none;

}

.toolbar .primary:hover{

    background:var(--primary-hover);

}

/* ==========================================
   Upload Card
========================================== */

.upload-card{

    margin:45px 0 70px;

    background:var(--card);

    border:2px dashed var(--border);

    border-radius:18px;

    padding:55px 30px;

    text-align:center;

    transition:var(--transition);

}

.upload-card:hover{

    border-color:var(--primary);

    transform:translateY(-2px);

}

.upload-card i{

    font-size:42px;

    color:var(--primary);

    margin-bottom:20px;

}

.upload-card h3{

    font-size:24px;

    margin-bottom:10px;

}

.upload-card p{

    color:var(--text-secondary);

    margin-bottom:18px;

}

.browse-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    border-radius:12px;

    background:var(--primary);

    color:white;

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

}

.browse-btn:hover{

    background:var(--primary-hover);

}

/* ==========================================
   Footer
========================================== */

footer{

    border-top:1px solid var(--border);

    padding:40px 20px;

    text-align:center;

    margin-top:30px;

}

.footer-links{

    display:flex;

    justify-content:center;

    gap:28px;

    flex-wrap:wrap;

    margin-bottom:20px;

}

.footer-links a{

    color:var(--text-secondary);

    transition:var(--transition);

}

.footer-links a:hover{

    color:var(--primary);

}

footer p{

    color:var(--text-secondary);

    font-size:14px;

}

/* ==========================================
   Animations
========================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.page-title,
.editor-grid,
.toolbar,
.upload-card{

    animation:fadeUp .5s ease;

}

/* ==========================================
   Selection
========================================== */

::selection{

    background:var(--primary);

    color:white;

}

/* ==========================================
   Scrollbar
========================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}

/* ==========================================
Toast
========================================== */

#toast{

    position:fixed;

    top:25px;

    right:25px;

    padding:14px 22px;

    color:white;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

    opacity:0;

    transform:translateY(-20px);

    transition:.3s;

    z-index:9999;

}

.success{

    background:#22c55e;

}

.error{

    background:#ef4444;

}