/* ======================================================
   LinksHub Protected Page
   Modern Premium UI
   Part 1
======================================================*/

.result-page{

    background:
        radial-gradient(circle at top left,#eef3ff 0%,transparent 40%),
        radial-gradient(circle at bottom right,#f3e8ff 0%,transparent 40%),
        linear-gradient(180deg,#f8f9fc,#f3f6fb);

    min-height:100vh;

    padding:70px 15px;

}

.result-card{

    max-width:900px;

    margin:auto;

    background:#fff;

    border-radius:24px;

    padding:45px;

    position:relative;

    overflow:hidden;

    box-shadow:
        0 20px 60px rgba(0,0,0,.08),
        0 8px 25px rgba(91,108,255,.08);

    animation:cardFade .7s ease;

}

.result-card::before{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(91,108,255,.05);

}

.result-card::after{

    content:"";

    position:absolute;

    bottom:-90px;

    left:-90px;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(143,92,255,.05);

}

@keyframes cardFade{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================
   SUCCESS ICON
==========================*/

.result-icon{

    width:95px;

    height:95px;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:55px;

    color:#22c55e;

    background:#ecfdf5;

    box-shadow:0 0 0 rgba(34,197,94,.4);

    animation:

        iconPop .8s ease,

        pulseGlow 2.5s infinite;

}

@keyframes iconPop{

    0%{

        opacity:0;

        transform:scale(.2);

    }

    70%{

        transform:scale(1.12);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes pulseGlow{

    0%{

        box-shadow:0 0 0 0 rgba(34,197,94,.35);

    }

    70%{

        box-shadow:0 0 0 18px rgba(34,197,94,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(34,197,94,0);

    }

}

/* ==========================
   TITLE
==========================*/

.result-title{

    text-align:center;

    font-size:40px;

    font-weight:800;

    color:#1e293b;

    margin-bottom:10px;

}

.result-subtitle{

    text-align:center;

    color:#64748b;

    font-size:17px;

    line-height:28px;

    max-width:650px;

    margin:0 auto 35px;

}

/* ==========================
   SUCCESS ALERT
==========================*/

.success-alert{

    display:flex;

    align-items:center;

    gap:12px;

    background:#ecfdf5;

    color:#166534;

    border:1px solid #bbf7d0;

    border-radius:16px;

    padding:18px 22px;

    font-weight:600;

    margin-bottom:35px;

    animation:fadeIn .8s ease;

}

.success-alert i{

    font-size:20px;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ======================================================
   LinksHub Protected Page
   Part 2 - Link Cards
======================================================*/

/* ==========================
   LINK CARDS
==========================*/

.link-card{

    position:relative;

    background:#ffffff;

    border:1px solid #edf2f7;

    border-radius:22px;

    padding:28px;

    margin-bottom:28px;

    transition:all .35s ease;

    overflow:hidden;

}

.link-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,#5B6CFF,#8F5CFF);

}

.link-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 22px 50px rgba(0,0,0,.08),

        0 10px 25px rgba(91,108,255,.12);

}

.link-card.danger::before{

    background:linear-gradient(90deg,#ef4444,#dc2626);

}

.link-card.danger{

    border-left:5px solid #ef4444;

}

/* ==========================
   CARD HEADER
==========================*/

.link-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:18px;

}

.link-label{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:40px;

    font-size:14px;

    font-weight:700;

    letter-spacing:.4px;

}

.link-label.success{

    background:#dcfce7;

    color:#166534;

}

.link-label.warning{

    background:#fef3c7;

    color:#92400e;

}

.link-label i{

    font-size:15px;

}

/* ==========================
   LINK BOX
==========================*/

.link-box{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

}

.link-box input{

    flex:1;

    height:54px;

    border:2px solid #e5e7eb;

    border-radius:14px;

    padding:0 18px;

    background:#f8fafc;

    color:#334155;

    font-size:15px;

    transition:all .30s ease;

}

.link-box input:hover{

    border-color:#5B6CFF;

}

.link-box input:focus{

    outline:none;

    border-color:#5B6CFF;

    background:#fff;

    box-shadow:0 0 0 5px rgba(91,108,255,.12);

}

.link-box input::selection{

    background:#5B6CFF;

    color:#fff;

}

/* ==========================
   COPY BUTTON
==========================*/

.copy-btn{

    min-width:130px;

    height:54px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    color:#fff;

    font-weight:700;

    font-size:15px;

    background:linear-gradient(135deg,#5B6CFF,#8F5CFF);

    transition:all .30s ease;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    overflow:hidden;

    position:relative;

}

.copy-btn i{

    transition:.3s;

}

.copy-btn:hover{

    transform:translateY(-3px);

    box-shadow:

        0 15px 35px rgba(91,108,255,.35);

}

.copy-btn:active{

    transform:scale(.96);

}

.copy-btn:disabled{

    cursor:default;

}

.copy-btn.copied{

    background:linear-gradient(135deg,#22c55e,#16a34a)!important;

    animation:copiedPop .35s ease;

}

.copy-btn.copied i{

    transform:rotate(360deg);

}

.danger-btn{

    background:linear-gradient(135deg,#ef4444,#dc2626);

}

.danger-btn:hover{

    box-shadow:

        0 15px 35px rgba(239,68,68,.35);

}

/* ==========================
   VISIT LINK
==========================*/

.visit-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:#5B6CFF;

    font-weight:700;

    transition:.3s;

}

.visit-link:hover{

    color:#3949ff;

    transform:translateX(5px);

}

.delete-link{

    color:#dc2626;

}

.delete-link:hover{

    color:#b91c1c;

}

@keyframes copiedPop{

    0%{

        transform:scale(.80);

    }

    60%{

        transform:scale(1.10);

    }

    100%{

        transform:scale(1);

    }

}

/* ======================================================
   LinksHub Protected Page
   Part 3 - Premium Effects & Animations
======================================================*/

/* ==========================
   PREMIUM GLASS EFFECT
==========================*/

.result-card{

    backdrop-filter:blur(14px);

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

}

.link-card{

    backdrop-filter:blur(12px);

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

}

/* ==========================
   SHINE EFFECT
==========================*/

.copy-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-25deg);

}

.copy-btn:hover::before{

    animation:shine .9s ease;

}

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:160%;

    }

}

/* ==========================
   LINK CARD GLOW
==========================*/

.link-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    pointer-events:none;

    box-shadow:0 0 0 rgba(91,108,255,0);

    transition:.35s;

}

.link-card:hover::after{

    box-shadow:0 0 35px rgba(91,108,255,.10);

}

/* ==========================
   INPUT PLACEHOLDER
==========================*/

.link-box input::placeholder{

    color:#94a3b8;

}

/* ==========================
   TOAST
==========================*/

.copy-toast{

    position:fixed;

    top:25px;

    right:25px;

    display:flex;

    align-items:center;

    gap:10px;

    background:linear-gradient(135deg,#22c55e,#16a34a);

    color:#fff;

    padding:16px 22px;

    border-radius:14px;

    font-weight:700;

    font-size:15px;

    opacity:0;

    transform:translateX(120px);

    transition:.35s;

    z-index:999999;

    box-shadow:

        0 15px 35px rgba(0,0,0,.18);

}

.copy-toast.show{

    opacity:1;

    transform:translateX(0);

}

.copy-toast i{

    font-size:18px;

}

/* ==========================
   ICON ANIMATION
==========================*/

.copy-btn.copied i{

    animation:rotateCheck .45s ease;

}

@keyframes rotateCheck{

    0%{

        transform:rotate(0deg) scale(.4);

    }

    70%{

        transform:rotate(360deg) scale(1.2);

    }

    100%{

        transform:rotate(360deg) scale(1);

    }

}

/* ==========================
   SUCCESS ALERT
==========================*/

.success-alert{

    position:relative;

    overflow:hidden;

}

.success-alert::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    animation:successShine 3s infinite;

}

@keyframes successShine{

    0%{

        left:-100%;

    }

    100%{

        left:140%;

    }

}

/* ==========================
   LINK LABEL
==========================*/

.link-label{

    transition:.3s;

}

.link-card:hover .link-label{

    transform:scale(1.05);

}

/* ==========================
   VISIT LINK
==========================*/

.visit-link i{

    transition:.3s;

}

.visit-link:hover i{

    transform:translateX(5px);

}

/* ==========================
   PAGE BACKGROUND
==========================*/

.result-page{

    position:relative;

    overflow:hidden;

}

.result-page::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(91,108,255,.06);

    top:-120px;

    right:-120px;

    filter:blur(10px);

}

.result-page::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(34,197,94,.05);

    bottom:-80px;

    left:-80px;

    filter:blur(12px);

}

/* ==========================
   FLOATING EFFECT
==========================*/

.link-card:nth-child(odd){

    animation:floatCard 6s ease-in-out infinite;

}

.link-card:nth-child(even){

    animation:floatCard 7s ease-in-out infinite;

}

@keyframes floatCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-4px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ======================================================
   LinksHub Protected Page
   Part 4 - Responsive & Final Polish
======================================================*/

/* ==========================
   TABLET
==========================*/

@media (max-width:992px){

.result-page{

    padding:50px 20px;

}

.result-card{

    padding:35px;

}

.result-title{

    font-size:34px;

}

.result-subtitle{

    font-size:16px;

}

.link-box{

    gap:12px;

}

.copy-btn{

    min-width:120px;

}

}

/* ==========================
   MOBILE
==========================*/

@media (max-width:768px){

.result-page{

    padding:30px 15px;

}

.result-card{

    border-radius:20px;

    padding:25px;

}

.result-icon{

    width:75px;

    height:75px;

    font-size:42px;

}

.result-title{

    font-size:28px;

    line-height:1.3;

}

.result-subtitle{

    font-size:15px;

    line-height:24px;

    margin-bottom:25px;

}

.success-alert{

    font-size:14px;

    padding:15px;

}

.link-card{

    padding:18px;

}

.link-header{

    margin-bottom:15px;

}

.link-box{

    flex-direction:column;

    align-items:stretch;

}

.link-box input{

    width:100%;

    height:50px;

    font-size:14px;

}

.copy-btn{

    width:100%;

    height:50px;

    min-width:100%;

}

.visit-link{

    justify-content:center;

    width:100%;

    padding-top:8px;

}

}

/* ==========================
   SMALL MOBILE
==========================*/

@media (max-width:480px){

.result-card{

    padding:20px;

}

.result-title{

    font-size:24px;

}

.result-subtitle{

    font-size:14px;

}

.result-icon{

    width:65px;

    height:65px;

    font-size:36px;

}

.link-label{

    width:100%;

    justify-content:center;

}

.success-alert{

    flex-direction:column;

    text-align:center;

    gap:8px;

}

.copy-toast{

    left:15px;

    right:15px;

    width:auto;

    justify-content:center;

}

}

/* ==========================
   SCROLLBAR
==========================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef2ff;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(180deg,#5B6CFF,#8F5CFF);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:linear-gradient(180deg,#4F46E5,#7C3AED);

}

/* ==========================
   SELECTION
==========================*/

::selection{

    background:#5B6CFF;

    color:#fff;

}

/* ==========================
   ACCESSIBILITY
==========================*/

.copy-btn:focus,
.visit-link:focus,
.link-box input:focus{

    outline:none;

}

/* ==========================
   SMOOTH TRANSITIONS
==========================*/

*{

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

.result-card,
.link-card,
.copy-btn,
.visit-link,
.link-box input{

    transition:all .3s ease;

}

/* ==========================
   FINAL PREMIUM TOUCH
==========================*/

.result-card:hover{

    box-shadow:
        0 30px 70px rgba(0,0,0,.10),
        0 12px 35px rgba(91,108,255,.12);

}

.copy-btn:hover i{

    transform:translateX(2px);

}

.visit-link{

    position:relative;

}

.visit-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:currentColor;

    transition:.3s;

}

.visit-link:hover::after{

    width:100%;

}

.result-title,
.result-subtitle{

    position:relative;

    z-index:2;

}

.result-icon,
.success-alert,
.link-card{

    position:relative;

    z-index:2;

}

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

.copy-toast{

    position:fixed;

    top:25px;

    right:25px;

    display:flex;

    align-items:center;

    gap:12px;

    min-width:280px;

    max-width:380px;

    padding:16px 22px;

    background:linear-gradient(135deg,#22c55e,#16a34a);

    color:#fff;

    font-size:15px;

    font-weight:600;

    border-radius:14px;

    box-shadow:0 18px 45px rgba(0,0,0,.18);

    z-index:999999;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:translateY(-30px) scale(.95);

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease;

}

.copy-toast.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0) scale(1);

}

.copy-toast i{

    font-size:22px;

    color:#fff;

    flex-shrink:0;

}

.copy-toast span{

    flex:1;

    line-height:1.4;

}

/* Mobile */

@media(max-width:768px){

.copy-toast{

    left:15px;

    right:15px;

    top:20px;

    min-width:auto;

    max-width:none;

    width:auto;

}

}