/*==================================================
  LinksHub UI v2
  theme.css
  Part 1
==================================================*/

/*==============================
  Root Variables
==============================*/

:root{

    /* Brand */

    --primary:#4f46e5;
    --primary-dark:#4338ca;
    --secondary:#7c3aed;
    --accent:#06b6d4;

    /* Status */

    --success:#22c55e;
    --danger:#ef4444;
    --warning:#f59e0b;
    --info:#0ea5e9;

    /* Background */

    --bg:#f8fafc;
    --surface:#ffffff;
    --surface-alt:#f1f5f9;
    --card:#ffffff;

    /* Typography */

    --text:#0f172a;
    --text-light:#334155;
    --muted:#64748b;

    /* Borders */

    --border:#e2e8f0;
    --border-light:#edf2f7;

    /* Radius */

    --radius-xs:6px;
    --radius-sm:10px;
    --radius:14px;
    --radius-lg:18px;
    --radius-xl:24px;
    --radius-pill:999px;

    /* Shadows */

    --shadow-xs:0 1px 4px rgba(15,23,42,.05);

    --shadow-sm:
        0 3px 10px rgba(15,23,42,.06);

    --shadow:
        0 10px 30px rgba(15,23,42,.08);

    --shadow-lg:
        0 18px 50px rgba(15,23,42,.12);

    /* Animation */

    --transition:.25s ease;

    /* Container */

    --container:1280px;

}

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

*,
*::before,
*::after{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    margin:0;

    background:var(--bg);

    color:var(--text);

    font-family:

        "Inter",
        "Roboto",
        sans-serif;

    line-height:1.6;

    -webkit-font-smoothing:antialiased;

}

img{

    max-width:100%;

    display:block;

}

svg{

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}

button{

    font:inherit;

    cursor:pointer;

    border:none;

    background:none;

}

input,
textarea,
select{

    font:inherit;

}

/*==============================
 Typography
==============================*/

h1,
h2,
h3,
h4,
h5,
h6{

    margin:0 0 15px;

    color:var(--text);

    line-height:1.2;

    font-weight:700;

}

h1{

    font-size:46px;

}

h2{

    font-size:36px;

}

h3{

    font-size:30px;

}

h4{

    font-size:24px;

}

h5{

    font-size:20px;

}

h6{

    font-size:17px;

}

p{

    margin:0 0 18px;

    color:var(--text-light);

}

small{

    color:var(--muted);

}

strong{

    font-weight:700;

}

/*==============================
 Text Utilities
==============================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.text-primary{

    color:var(--primary);

}

.text-success{

    color:var(--success);

}

.text-danger{

    color:var(--danger);

}

.text-warning{

    color:var(--warning);

}

.text-info{

    color:var(--info);

}

.text-muted{

    color:var(--muted);

}

/*==============================
 Gradient Text
==============================*/

.gradient-text{

    background:

        linear-gradient(
            90deg,
            #42d392,
            #647eff
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/*==============================
 Containers
==============================*/

.container{

    width:100%;

    max-width:var(--container);

    margin:auto;

    padding-left:20px;

    padding-right:20px;

}

.container-sm{

    max-width:760px;

    margin:auto;

}

.container-md{

    max-width:980px;

    margin:auto;

}

.container-lg{

    max-width:1180px;

    margin:auto;

}

/*==============================
 Display
==============================*/

.d-block{

    display:block;

}

.d-inline{

    display:inline;

}

.d-inline-block{

    display:inline-block;

}

.d-flex{

    display:flex;

}

.d-grid{

    display:grid;

}

.d-none{

    display:none;

}

.flex-column{

    flex-direction:column;

}

.flex-wrap{

    flex-wrap:wrap;

}

.align-center{

    align-items:center;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}

.justify-end{

    justify-content:flex-end;

}

/*==============================
 Width
==============================*/

.w-100{

    width:100%;

}

.h-100{

    height:100%;

}

.min-vh{

    min-height:100vh;

}

/*==============================
 Margin
==============================*/

.mt-0{margin-top:0;}
.mt-1{margin-top:8px;}
.mt-2{margin-top:16px;}
.mt-3{margin-top:24px;}
.mt-4{margin-top:32px;}
.mt-5{margin-top:48px;}

.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:8px;}
.mb-2{margin-bottom:16px;}
.mb-3{margin-bottom:24px;}
.mb-4{margin-bottom:32px;}
.mb-5{margin-bottom:48px;}

/*==============================
 Padding
==============================*/

.p-0{padding:0;}
.p-1{padding:8px;}
.p-2{padding:16px;}
.p-3{padding:24px;}
.p-4{padding:32px;}
.p-5{padding:48px;}

/*==================================================
  Buttons
==================================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:12px 24px;

    border:none;

    border-radius:var(--radius);

    cursor:pointer;

    font-weight:600;

    font-size:15px;

    transition:var(--transition);

    user-select:none;

}

.btn:disabled{

    opacity:.6;

    cursor:not-allowed;

}

.btn-primary{

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color:#fff;

}

.btn-primary:hover{

    transform:translateY(-2px);

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

}

.btn-secondary{

    background:var(--surface-alt);

    color:var(--text);

}

.btn-secondary:hover{

    background:#e2e8f0;

}

.btn-success{

    background:var(--success);

    color:#fff;

}

.btn-danger{

    background:var(--danger);

    color:#fff;

}

.btn-warning{

    background:var(--warning);

    color:#fff;

}

.btn-info{

    background:var(--info);

    color:#fff;

}

.btn-outline{

    background:transparent;

    color:var(--primary);

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

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

.btn-ghost{

    background:transparent;

    color:var(--text);

}

.btn-ghost:hover{

    background:var(--surface-alt);

}

.btn-block{

    width:100%;

}

.btn-sm{

    padding:8px 16px;

    font-size:13px;

}

.btn-lg{

    padding:16px 28px;

    font-size:17px;

}

/*==================================================
  Cards
==================================================*/

.card{

    position:relative;

    background:var(--card);

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

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow);

    overflow:hidden;

}

.card-header{

    padding:24px;

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

}

.card-body{

    padding:24px;

}

.card-footer{

    padding:20px 24px;

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

}

.card-hover{

    transition:var(--transition);

}

.card-hover:hover{

    transform:translateY(-6px);

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

}

.card-glass{

    background:rgba(255,255,255,.8);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

}

.card-bordered{

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

}

/*==================================================
  Badges
==================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 14px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

}

.badge-success{

    background:#dcfce7;

    color:#166534;

}

.badge-danger{

    background:#fee2e2;

    color:#991b1b;

}

.badge-warning{

    background:#fef3c7;

    color:#92400e;

}

.badge-info{

    background:#dbeafe;

    color:#1d4ed8;

}

.badge-primary{

    background:#eef2ff;

    color:var(--primary);

}

/*==================================================
  Alerts
==================================================*/

.alert{

    padding:18px 22px;

    border-radius:var(--radius);

    margin-bottom:20px;

}

.alert-success{

    background:#dcfce7;

    color:#166534;

}

.alert-danger{

    background:#fee2e2;

    color:#991b1b;

}

.alert-warning{

    background:#fef3c7;

    color:#92400e;

}

.alert-info{

    background:#dbeafe;

    color:#1d4ed8;

}

/*==================================================
  Shadows
==================================================*/

.shadow-xs{

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

}

.shadow-sm{

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

}

.shadow{

    box-shadow:var(--shadow);

}

.shadow-lg{

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

}

/*==================================================
  Radius
==================================================*/

.rounded-xs{

    border-radius:var(--radius-xs);

}

.rounded-sm{

    border-radius:var(--radius-sm);

}

.rounded{

    border-radius:var(--radius);

}

.rounded-lg{

    border-radius:var(--radius-lg);

}

.rounded-xl{

    border-radius:var(--radius-xl);

}

.rounded-pill{

    border-radius:999px;

}

/*==================================================
  Form Controls
==================================================*/

input,
textarea,
select{

    width:100%;

    padding:14px 18px;

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

    border-radius:var(--radius);

    background:#fff;

    transition:var(--transition);

}

input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:
        0 0 0 4px rgba(79,70,229,.12);

}

textarea{

    resize:vertical;

    min-height:140px;

}

/*==================================================
  Utilities
==================================================*/

.overflow-hidden{

    overflow:hidden;

}

.overflow-auto{

    overflow:auto;

}

.position-relative{

    position:relative;

}

.position-absolute{

    position:absolute;

}

.pointer{

    cursor:pointer;

}

.user-select-none{

    user-select:none;

}

.opacity-0{

    opacity:0;

}

.opacity-25{

    opacity:.25;

}

.opacity-50{

    opacity:.5;

}

.opacity-75{

    opacity:.75;

}

.opacity-100{

    opacity:1;

}

/*==================================================
  Dividers
==================================================*/

.divider{

    width:100%;

    height:1px;

    background:var(--border);

    margin:24px 0;

}

.divider-text{

    display:flex;

    align-items:center;

    gap:16px;

    color:var(--muted);

    font-size:14px;

    font-weight:600;

}

.divider-text::before,
.divider-text::after{

    content:"";

    flex:1;

    height:1px;

    background:var(--border);

}

/*==================================================
  Avatar
==================================================*/

.avatar{

    width:44px;

    height:44px;

    border-radius:50%;

    object-fit:cover;

}

.avatar-sm{

    width:34px;

    height:34px;

}

.avatar-lg{

    width:70px;

    height:70px;

}

/*==================================================
  Icon
==================================================*/

.icon-circle{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--surface-alt);

}

.icon-box{

    width:52px;

    height:52px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color:#fff;

}

/*==================================================
  Loading Spinner
==================================================*/

.spinner{

    width:18px;

    height:18px;

    border:2px solid rgba(255,255,255,.35);

    border-top-color:#fff;

    border-radius:50%;

    animation:spin .7s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/*==================================================
  Fade
==================================================*/

.fade-in{

    animation:fadeIn .45s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/*==================================================
  Scale
==================================================*/

.scale-in{

    animation:scaleIn .35s ease;

}

@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.95);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*==================================================
  Float
==================================================*/

.float{

    animation:float 5s ease-in-out infinite;

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==================================================
  Pulse
==================================================*/

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

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

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-track{

    background:var(--surface-alt);

}

::-webkit-scrollbar-thumb{

    background:

        linear-gradient(
            var(--primary),
            var(--secondary)
        );

    border-radius:999px;

}

*{

    scrollbar-width:thin;

    scrollbar-color:var(--primary) var(--surface-alt);

}

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

::selection{

    background:var(--primary);

    color:#fff;

}

/*==================================================
  Focus Ring
==================================================*/

button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus{

    outline:none;

}

/*==================================================
  Dark Mode
==================================================*/

@media (prefers-color-scheme:dark){

:root{

    --bg:#0f172a;

    --surface:#111827;

    --surface-alt:#1f2937;

    --card:#111827;

    --text:#f8fafc;

    --text-light:#cbd5e1;

    --muted:#94a3b8;

    --border:#334155;

    --border-light:#475569;

}

body{

    background:var(--bg);

}

.card{

    background:var(--card);

}

input,
textarea,
select{

    background:#1e293b;

    color:#fff;

}

.btn-secondary{

    background:#1e293b;

    color:#fff;

}

.btn-outline{

    color:#fff;

    border-color:#64748b;

}

.badge-primary{

    background:#312e81;

    color:#fff;

}

}

/*==================================================
  Responsive
==================================================*/

@media(max-width:992px){

.container{

    padding-left:18px;

    padding-right:18px;

}

h1{

    font-size:38px;

}

h2{

    font-size:30px;

}

}

@media(max-width:768px){

h1{

    font-size:32px;

}

h2{

    font-size:26px;

}

.btn{

    width:100%;

}

}

@media(max-width:576px){

body{

    font-size:15px;

}

.container{

    padding-left:15px;

    padding-right:15px;

}

.card-header,
.card-body,
.card-footer{

    padding:18px;

}

}