:root {
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --bg-color: #f9fafb;
    --text-main: #1f2937;
    --text-sub: #6b7280;
    --status-online: #10b981;
    --status-offline: #fca5a5;
    --status-slow: #deb887;
    --status-checking: #10b981;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

@keyframes pulse {
    0%, to {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

.animate-pulse { animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in { animation: fadeIn .5s ease-out forwards; }

.apply-section {
    position: relative;
    background: hsla(0,0%,100%,.8);
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(40px) saturate(150%);
    border-radius: clamp(1rem,2.5vw,1.5rem);
    padding: clamp(1.25rem,3.2vw,2.5rem);
    margin-bottom: clamp(1rem,2vw,1.5rem);
    box-shadow: 0 8px 30px rgba(0,0,0,.04);
    border: 1px solid hsla(0,0%,100%,.5);
    overflow: hidden;
    transition: box-shadow .3s ease-in-out;
    will-change: box-shadow;
}

.apply-section:hover { box-shadow: 0 8px 30px rgba(99,102,241,.1); }

.bg-blur-1, .bg-blur-2 {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .6;
    pointer-events: none;
    z-index: 0;
}

.bg-blur-1 {
    top: 0;
    right: 0;
    width: 24rem;
    height: 24rem;
    background: linear-gradient(to bottom right,rgba(199,210,254,.4),rgba(221,214,254,.4));
    transform: translate(33%,-50%);
    transition: opacity .7s;
}

.apply-section:hover .bg-blur-1 { opacity: .8; }

.bg-blur-2 {
    bottom: 0;
    left: 0;
    width: 16rem;
    height: 16rem;
    background: linear-gradient(to top right,rgba(191,219,254,.4),rgba(165,243,252,.4));
    transform: translate(-33%,33%);
}

.section-title {
    position: relative;
    z-index: 10;
    font-size: clamp(1.3rem,3.2vw,1.9rem);
    font-weight: 800;
    background: linear-gradient(90deg,#4f46e5,#7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: clamp(1.25rem,3vw,2rem);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.title-icon {
    background: rgba(238,242,255,.5);
    padding: clamp(.375rem,1vw,.5rem);
    border-radius: .75rem;
    margin-right: .75rem;
    border: 1px solid #e0e7ff;
    color: var(--primary);
    display: inline-flex;
    flex-shrink: 0;
}

.apply-content {
    position: relative;
    z-index: 10;
    display: grid;
    gap: clamp(1.25rem,2.5vw,3rem);
    align-items: start;
}

@media (min-width:768px) {
    .apply-content { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

.requirements-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: clamp(.75rem,1.5vw,1rem);
}

.requirement-item {
    display: flex;
    align-items: flex-start;
    padding: clamp(.625rem,1.5vw,.75rem);
    border-radius: .75rem;
    transition: background-color .2s ease-in-out;
}

.req-green {
    background: rgba(236,253,245,.5);
    border: 1px solid rgba(167,243,208,.5);
}

.req-green:hover { background: #ecfdf5; }

.req-green i { color: #10b981; }

.req-indigo {
    background: rgba(238,242,255,.5);
    border: 1px solid rgba(199,210,254,.5);
}

.req-indigo:hover { background: #eef2ff; }

.req-indigo i { color: #6366f1; }

.req-orange {
    background: rgba(255,247,237,.5);
    border: 1px solid rgba(254,215,170,.5);
}

.req-orange:hover { background: #fff7ed; }

.req-orange i { color: #f97316; }

.req-pink {
    background: rgba(253,242,248,.5);
    border: 1px solid rgba(251,207,232,.5);
}

.req-pink:hover { background: #fdf2f8; }

.req-pink i { color: #ec4899; }

.requirement-icon {
    font-size: clamp(1.125rem,2.2vw,1.3125rem);
    margin-right: .75rem;
    margin-top: .125rem;
    flex-shrink: 0;
}

.requirement-text {
    color: #4b5563;
    font-size: clamp(.8125rem,1.6vw,.9375rem);
    line-height: 1.6;
}

.site-info-card {
    background: linear-gradient(to bottom right,#f8fafc,rgba(238,242,255,.3));
    border-radius: clamp(.875rem,1.8vw,1rem);
    padding: clamp(1.125rem,2.2vw,1.5rem);
    border: 1px solid rgba(199,210,254,.8);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
}

.card-header {
    justify-content: space-between;
    margin-bottom: clamp(.75rem,1.6vw,1rem);
    flex-wrap: wrap;
    gap: .5rem;
}

.card-header, .card-title {
    display: flex;
    align-items: center;
}

.card-title {
    font-weight: 700;
    color: #1f2937;
    font-size: clamp(.9375rem,1.8vw,1.0625rem);
}

.card-title i {
    margin-right: .5rem;
    color: #6366f1;
}

.badge {
    font-size: clamp(.6875rem,1.4vw,.8125rem);
    font-weight: 500;
    padding: .25rem .5rem;
    background: #e0e7ff;
    color: #4f46e5;
    border-radius: .375rem;
    white-space: nowrap;
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    font-size: clamp(.8125rem,1.6vw,.9375rem);
}

.info-item {
    display: flex;
    align-items: center;
    padding: .375rem .25rem;
    border-radius: .5rem;
    transition: background .2s ease-in-out;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    outline: none;
}

@media (min-width:768px) {
    .info-item { padding: .5rem; }
}

.info-item:hover { background: #fff; }

.info-item:active { background: rgba(99,102,241,.08); }

.info-item:focus-visible {
    background: #fff;
    box-shadow: 0 0 0 2px #c7d2fe;
}

.info-label {
    width: 3rem;
    color: #9ca3af;
    font-weight: 500;
    flex-shrink: 0;
}

.info-value {
    color: #374151;
    word-break: break-all;
    flex: 1;
    min-width: 0;
    padding-right: .25rem;
}

@media (min-width:768px) {
    .info-value { padding-right: 1.25rem; }
}

.info-value.bold { font-weight: 700; }

.info-value.link {
    color: #4f46e5;
    font-weight: 500;
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size: .92em;
}

.copy-check {
    position: absolute;
    right: .25rem;
    top: 50%;
    transform: translateY(-50%);
    color: #10b981;
    font-size: calc(1.125rem + 1px);
    pointer-events: none;
    animation: copyCheckAnim 1.5s ease-out forwards;
    text-shadow: 0 0 6px hsla(0,0%,100%,.95),0 0 12px hsla(0,0%,100%,.9);
}

@media (min-width:768px) {
    .copy-check { right: .5rem; }
}

@keyframes copyCheckAnim {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(.3);
    }

    15% {
        opacity: 1;
        transform: translateY(-50%) scale(1.15);
    }

    30% {
        transform: translateY(-50%) scale(1);
    }

    70% {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translateY(-50%) scale(.8);
    }
}

.links-header {
    justify-content: space-between;
    margin-bottom: clamp(1.25rem,2.5vw,2rem);
    padding: 0;
}

.links-header, .links-title {
    display: flex;
    align-items: center;
}

.links-title {
    font-size: clamp(1.15rem,2.6vw,1.55rem);
    font-weight: 700;
    color: #111827;
    flex-wrap: wrap;
}

.title-bar {
    width: .25rem;
    height: clamp(1.25rem,2.5vw,1.5rem);
    background: #6366f1;
    border-radius: 9999px;
    margin-right: .75rem;
    display: block;
    flex-shrink: 0;
}

.links-count {
    margin-left: .75rem;
    font-size: clamp(.6875rem,1.4vw,.8125rem);
    font-weight: 400;
    color: #9ca3af;
    background: #f3f4f6;
    padding: .25rem .5rem;
    border-radius: 9999px;
}

.links-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem,2vw,1.5rem);
    min-height: 200px;
}

@media (min-width:640px) {
    .links-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (min-width:1024px) {
    .links-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (min-width:1440px) {
    .links-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

.link-card {
    position: relative;
    background: #fff;
    padding: clamp(1rem,2vw,1.25rem);
    border-radius: clamp(.875rem,1.8vw,1rem);
    border: 1px solid #f3f4f6;
    box-shadow: 0 2px 10px rgba(0,0,0,.03);
    overflow: hidden;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform .3s ease-out,box-shadow .3s ease-out;
    will-change: transform,box-shadow;
    outline: none;
}

.link-card:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,.08);
    transform: translateY(-4px);
}

.link-card:focus-visible {
    box-shadow: 0 15px 30px rgba(0,0,0,.08),0 0 0 2px #c7d2fe;
    transform: translateY(-4px);
}

.link-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(238,242,255,.5),#fff);
    opacity: 0;
    transition: opacity .3s ease-in-out;
    pointer-events: none;
}

.link-card:focus-visible .link-bg, .link-card:hover .link-bg { opacity: 1; }

.link-logo-wrapper {
    position: relative;
    flex-shrink: 0;
}

.link-logo {
    width: clamp(2.75rem,6vw,3.5rem);
    height: clamp(2.75rem,6vw,3.5rem);
    border-radius: .75rem;
    overflow: hidden;
    border: 1px solid #f3f4f6;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    background: #f9fafb;
    transition: box-shadow .3s ease-in-out;
}

.link-card:focus-visible .link-logo, .link-card:hover .link-logo {
    box-shadow: 0 0 0 2px #e0e7ff;
}

.link-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}

.link-card:focus-visible .link-logo img, .link-card:hover .link-logo img {
    transform: scale(1.1);
}

.status-dot {
    position: absolute;
    bottom: -.25rem;
    right: -.25rem;
    width: .75rem;
    height: .75rem;
    background: #10b981;
    border: 2px solid #fff;
    border-radius: 50%;
    transition: background-color .4s ease-in-out;
}

.status-dot.status-checking { background: var(--status-checking); }

.status-dot.status-online { background: var(--status-online); }

.status-dot.status-offline { background: var(--status-offline); }

.status-dot.status-slow { background: var(--status-slow); }

.link-info {
    margin-left: clamp(.75rem,1.8vw,1rem);
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.link-name {
    font-weight: 700;
    color: #1f2937;
    font-size: clamp(.9375rem,1.9vw,1.0625rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s ease-in-out;
}

.link-card:focus-visible .link-name, .link-card:hover .link-name { color: #4f46e5; }

.link-desc {
    font-size: clamp(.71875rem,1.4vw,.8125rem);
    color: #6b7280;
    margin-top: .375rem;
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .3s ease-in-out;
}

.link-card:focus-visible .link-desc, .link-card:hover .link-desc { color: #4b5563; }

.link-arrow {
    position: absolute;
    top: 1rem;
    right: 1rem;
    opacity: 0;
    transform: translateX(-.5rem);
    transition: all .3s ease-in-out;
    color: #a5b4fc;
}

.link-card:focus-visible .link-arrow, .link-card:hover .link-arrow {
    opacity: 1;
    transform: translateX(0);
}

.skeleton { pointer-events: none; }

.sk-img {
    width: clamp(2.75rem,6vw,3.5rem);
    height: clamp(2.75rem,6vw,3.5rem);
    border-radius: .75rem;
    background: #e5e7eb;
    flex-shrink: 0;
}

.sk-content {
    margin-left: clamp(.75rem,1.8vw,1rem);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.sk-line {
    background: #e5e7eb;
    border-radius: .25rem;
    height: 1rem;
}

.sk-line.short { width: 33%; }

.sk-line.long {
    width: 75%;
    height: .75rem;
    background: #f3f4f6;
}

.empty-state {
    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(3rem,8vw,6rem) 1rem;
    color: #9ca3af;
    background: hsla(0,0%,100%,.5);
    border-radius: 1.5rem;
    border: 2px dashed #e5e7eb;
}

.empty-icon {
    background: #f9fafb;
    padding: 1rem;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.empty-icon i {
    font-size: clamp(2rem,5vw,2.625rem);
    color: #d1d5db;
}

.empty-text {
    font-size: clamp(.8125rem,1.6vw,.9375rem);
    font-weight: 500;
}

@media (prefers-reduced-motion:reduce) {
    .animate-pulse, .copy-check, .fade-in { animation: none; }

    .apply-section,
.bg-blur-1,
.info-item,
.link-arrow,
.link-bg,
.link-card,
.link-desc,
.link-logo,
.link-logo img,
.link-name,
.requirement-item,
.status-dot {
        transition: none;
    }
}

html.dark .apply-section {
    background: rgba(16,26,46,.8);
    border-color: #24314e;
    box-shadow: 0 8px 30px rgba(0,0,0,.3);
}

html.dark .apply-section .bg-blur-1 {
    background: linear-gradient(to bottom right,rgba(99,102,241,.14),rgba(124,58,237,.12));
}

html.dark .apply-section .bg-blur-2 {
    background: linear-gradient(to top right,rgba(59,130,246,.12),rgba(6,182,212,.1));
}

html.dark .apply-section .title-icon {
    background: rgba(99,102,241,.16);
    border-color: rgba(129,140,248,.35);
    color: #a5b4fc;
}

html.dark .apply-section .req-green {
    background: rgba(34,197,94,.12);
    border-color: rgba(74,222,128,.25);
}

html.dark .apply-section .req-green:hover { background: rgba(34,197,94,.18); }

html.dark .apply-section .req-green i { color: #4ade80; }

html.dark .apply-section .req-indigo {
    background: rgba(99,102,241,.16);
    border-color: rgba(129,140,248,.3);
}

html.dark .apply-section .req-indigo:hover { background: rgba(99,102,241,.22); }

html.dark .apply-section .req-indigo i { color: #a5b4fc; }

html.dark .apply-section .req-orange {
    background: rgba(249,115,22,.12);
    border-color: rgba(251,146,60,.25);
}

html.dark .apply-section .req-orange:hover { background: rgba(249,115,22,.18); }

html.dark .apply-section .req-orange i { color: #fb923c; }

html.dark .apply-section .req-pink {
    background: rgba(236,72,153,.12);
    border-color: rgba(244,114,182,.25);
}

html.dark .apply-section .req-pink:hover { background: rgba(236,72,153,.18); }

html.dark .apply-section .req-pink i { color: #f472b6; }

html.dark .apply-section .requirement-text { color: #a8b6cc; }

html.dark .site-info-card {
    background: linear-gradient(to bottom right,#162136,rgba(99,102,241,.1));
    border-color: rgba(129,140,248,.3);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.25);
}

html.dark .site-info-card .card-title { color: #e6edf9; }

html.dark .site-info-card .card-title i { color: #a5b4fc; }

html.dark .site-info-card .badge {
    background: rgba(99,102,241,.16);
    color: #a5b4fc;
}

html.dark .site-info-card .info-item:hover { background: #1c2942; }

html.dark .site-info-card .info-item:active { background: rgba(99,102,241,.16); }

html.dark .site-info-card .info-item:focus-visible {
    background: #1c2942;
    box-shadow: 0 0 0 2px rgba(129,140,248,.5);
}

html.dark .site-info-card .info-label { color: #71839d; }

html.dark .site-info-card .info-value { color: #dbe4f3; }

html.dark .site-info-card .info-value.link { color: #a5b4fc; }

html.dark .site-info-card .copy-check {
    color: #4ade80;
    text-shadow: 0 0 6px rgba(16,26,46,.95),0 0 12px rgba(16,26,46,.9);
}

html.dark .links-header .links-title { color: #e6edf9; }

html.dark .links-header .links-count {
    color: #8b9bb4;
    background: #162136;
}

html.dark .links-grid .link-card {
    background: #101a2e;
    border-color: #24314e;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

html.dark .links-grid .link-card:hover { box-shadow: 0 15px 30px rgba(0,0,0,.4); }

html.dark .links-grid .link-card:focus-visible {
    box-shadow: 0 15px 30px rgba(0,0,0,.4),0 0 0 2px rgba(129,140,248,.5);
}

html.dark .links-grid .link-bg {
    background: linear-gradient(90deg,rgba(99,102,241,.16),#101a2e);
}

html.dark .links-grid .link-logo {
    border-color: #24314e;
    background: #162136;
}

html.dark .links-grid .link-card:focus-visible .link-logo,
html.dark .links-grid .link-card:hover .link-logo {
    box-shadow: 0 0 0 2px rgba(129,140,248,.5);
}

html.dark .links-grid .status-dot { border-color: #101a2e; }

html.dark .links-grid .link-name { color: #e6edf9; }

html.dark .links-grid .link-card:focus-visible .link-name,
html.dark .links-grid .link-card:hover .link-name {
    color: #a5b4fc;
}

html.dark .links-grid .link-desc { color: #8b9bb4; }

html.dark .links-grid .link-card:focus-visible .link-desc,
html.dark .links-grid .link-card:hover .link-desc {
    color: #a8b6cc;
}

html.dark .links-grid .sk-img, html.dark .links-grid .sk-line { background: #1c2942; }

html.dark .links-grid .sk-line.long { background: #24314e; }

html.dark .links-grid .empty-state {
    color: #71839d;
    background: rgba(22,33,54,.5);
    border-color: #24314e;
}

html.dark .links-grid .empty-icon { background: #162136; }

html.dark .links-grid .empty-icon i { color: #4a5b77; }

@media (min-width:1024px) {
    .container {
        width: auto;
        max-width: none;
        margin-left: -24px;
        margin-right: -24px;
        min-height: calc(100vh - 104px);
    }
}