@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
    --primary: #ff4fa3;
    --primary-strong: #ff1786;
    --danger: #ff467e;
    --text: #ffffff;
    --sub: #b9b1bd;
    --bg: #080609;
    --card: rgba(23, 14, 24, .6);
    --border: rgba(255, 225, 241, .2);
    --glass-shadow: 0 28px 76px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(255, 56, 151, .1);
}

* { scrollbar-color: rgba(143, 232, 255, .55) transparent; }
body {
    min-height: 100vh;
    color: var(--text) !important;
    font-family: 'DM Sans', sans-serif !important;
    background: #080609 !important;
    background-image: radial-gradient(circle at 8% 8%, rgba(255, 20, 130, .46), transparent 19rem), radial-gradient(circle at 92% 11%, rgba(255, 102, 181, .27), transparent 22rem), radial-gradient(circle at 47% 105%, rgba(177, 0, 84, .35), transparent 28rem), linear-gradient(135deg, #050406 0%, #110812 48%, #070508 100%) !important;
    background-attachment: fixed !important;
    background-size: 115% 115%, 120% 120%, 125% 125%, 100% 100% !important;
    animation: mesh-shift 18s ease-in-out infinite alternate;
    position: relative;
    overflow-x: hidden;
}
body::before, body::after {
    content: ''; position: fixed; z-index: 0; border-radius: 50%; filter: blur(2px); pointer-events: none; opacity: .9;
}
body::before { width: 33rem; height: 33rem; top: -12rem; left: -10rem; background: radial-gradient(circle, rgba(255, 31, 136, .46), rgba(255, 31, 136, 0) 68%); animation: glass-drift 15s cubic-bezier(.45,.05,.55,.95) infinite alternate; }
body::after { width: 39rem; height: 39rem; right: -15rem; bottom: -16rem; background: radial-gradient(circle, rgba(236, 52, 151, .38), rgba(236, 52, 151, 0) 68%); animation: glass-drift 20s cubic-bezier(.45,.05,.55,.95) infinite alternate-reverse; }
body > * { position: relative; z-index: 1; }
body, input, select, textarea, button { letter-spacing: .01em; }
h1, h2, h3, h4, .logo { font-family: 'Manrope', sans-serif !important; }
a { transition: color .35s ease, opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); }

.navbar, .mobile-nav {
    background: rgba(13, 9, 15, .68) !important;
    border-color: rgba(225, 246, 255, .18) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    box-shadow: 0 12px 38px rgba(0, 8, 26, .24), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.navbar { padding: 16px clamp(20px, 4vw, 52px) !important; }
.navbar::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.88), #ff3397, rgba(255,255,255,.88), transparent); opacity: .75; animation: nav-glow 4s ease-in-out infinite; }
.logo { color: var(--text) !important; background: linear-gradient(110deg, #fff 5%, #fff 40%, #ff7aba 70%, #ff2a91) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.logo span { color: inherit !important; }
.nav-links { gap: 10px !important; }
.nav-item { padding: 9px 12px; border: 1px solid transparent; border-radius: 12px; color: #c9d5e6 !important; }
.nav-item:hover, .nav-item.active { color: #fff !important; background: rgba(255, 58, 155, .13); border-color: rgba(255, 174, 214, .24); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 22px rgba(74, 3, 42, .28); }

.container { max-width: 1120px !important; margin: clamp(28px, 6vh, 66px) auto !important; }
.welcome-sec h2 { font-size: clamp(2rem, 4vw, 3.2rem) !important; letter-spacing: -.055em; background: linear-gradient(110deg, #fff, #fff 48%, #ff7fc0 79%, #ff2990); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: title-shimmer 6s ease-in-out infinite; background-size: 180% auto; }
.welcome-sec p { color: var(--sub) !important; font-size: 15px !important; }
.tabs { gap: 8px !important; border: 1px solid var(--border) !important; border-radius: 18px; padding: 7px !important; background: rgba(21, 12, 22, .48); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.tab-btn { color: #b7c5db !important; border: 1px solid transparent !important; border-radius: 13px !important; padding: 11px 17px !important; }
.tab-btn:hover { color: #fff !important; background: rgba(255,255,255,.07) !important; }
.tab-btn.active { color: #fff !important; background: linear-gradient(120deg, rgba(255, 43, 143, .31), rgba(152, 20, 89, .25)) !important; border-color: rgba(255, 189, 220, .3) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 26px rgba(87, 4, 48, .32) !important; }
.panel.active { animation: liquid-reveal .52s cubic-bezier(.2,.8,.2,1); }

.card, .modal-content, .table-wrapper, .success-box {
    background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.035)) !important;
    border: 1px solid var(--border) !important;
    -webkit-backdrop-filter: blur(26px) saturate(145%);
    backdrop-filter: blur(26px) saturate(145%);
    box-shadow: var(--glass-shadow) !important;
}
.card { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px !important; padding: clamp(22px, 4vw, 34px) !important; transition: transform .52s cubic-bezier(.2,.8,.2,1), border-color .45s ease, box-shadow .45s ease; }
.card::before { content: ''; position: absolute; z-index: -1; width: 50%; height: 165%; top: -36%; left: -75%; transform: rotate(19deg); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), rgba(255,195,223,.05), transparent); animation: glass-sweep 8s ease-in-out infinite; }
.card::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.29), inset 0 0 50px rgba(255,47,146,.06); }
.card:hover { border-color: rgba(255, 204, 228, .48) !important; box-shadow: 0 38px 90px rgba(0, 0, 0, .6), 0 0 42px rgba(255, 33, 139, .11), inset 0 1px 0 rgba(255,255,255,.32) !important; transform: translateY(-7px) scale(1.006); }
.form-group label, label { color: #c6d6ec !important; font-weight: 700; letter-spacing: .1em !important; }
input, select, textarea {
    color: #fff !important; background: rgba(7, 4, 8, .64) !important; border-color: rgba(255, 225, 241, .17) !important;
    border-radius: 14px !important; box-shadow: inset 0 2px 8px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05) !important;
    transition: border-color .3s ease, box-shadow .3s ease, background .3s ease, transform .3s ease !important;
}
input::placeholder, textarea::placeholder { color: #8da0bc !important; }
input:focus, select:focus, textarea:focus { background: rgba(29, 9, 23, .76) !important; border-color: rgba(255, 99, 177, .82) !important; box-shadow: 0 0 0 4px rgba(255, 44, 145, .14), 0 14px 30px rgba(54, 2, 31, .34), inset 0 1px 0 rgba(255,255,255,.08) !important; transform: translateY(-1px); }
.btn { color: #fff !important; background: linear-gradient(120deg, #9d7bff, #7654df 52%, #4d2f9e) !important; border: 1px solid rgba(255,255,255,.42) !important; border-radius: 14px !important; box-shadow: 0 12px 28px rgba(95, 60, 214, .3), inset 0 1px 0 rgba(255,255,255,.5) !important; transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease, box-shadow .35s ease !important; }
.btn:hover { filter: brightness(1.12) saturate(1.08); transform: translateY(-4px) scale(1.015); box-shadow: 0 21px 40px rgba(87, 49, 202, .44), inset 0 1px 0 rgba(255,255,255,.65) !important; }
.btn:active { transform: translateY(0) scale(.98) !important; }
.btn-sec { color: #e7f6ff !important; background: rgba(255,255,255,.07) !important; border-color: rgba(223, 244, 255, .22) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 22px rgba(1,9,29,.18) !important; }
.btn-icon { background: rgba(255,255,255,.08) !important; border-color: rgba(223, 244, 255, .2) !important; border-radius: 11px !important; transition: all .3s cubic-bezier(.2,.8,.2,1) !important; }
.btn-icon:hover { background: linear-gradient(135deg, #a588ff, #5536ba) !important; border-color: rgba(255,255,255,.6) !important; transform: translateY(-2px) scale(1.06); box-shadow: 0 12px 24px rgba(87, 49, 202, .34); }

.table-wrapper { border-radius: 20px !important; overflow: auto; }
th { color: #bed2ee !important; background: rgba(238, 250, 255, .07) !important; }
th, td { border-color: rgba(218, 244, 255, .1) !important; }
tbody tr { transition: background .3s ease, transform .3s ease; }
tbody tr:hover { background: rgba(173, 227, 255, .075); }
.code-pill { color: #fff2f8; background: linear-gradient(135deg, rgba(255, 75, 164, .28), rgba(149, 16, 78, .27)) !important; border: 1px solid rgba(255, 196, 223, .29); border-radius: 8px !important; }
.modal { background: rgba(2, 8, 23, .56) !important; -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); }
.modal-content { border-radius: 25px !important; }
.modal.active .modal-content { animation: modal-pop .45s cubic-bezier(.18,.9,.24,1); }
.toast { background: rgba(13, 30, 53, .8) !important; border-color: rgba(224,246,255,.23) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.alert-box { background: rgba(255, 116, 159, .13) !important; border-color: rgba(255, 142, 178, .55) !important; color: #ffd5e2 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 15px 36px rgba(53,5,28,.16); }
.mobile-nav { padding: 11px !important; }

.link-search { display: flex; align-items: center; gap: 11px; max-width: 430px; margin: 0 0 16px auto; padding: 8px 13px; border: 1px solid rgba(255, 205, 229, .22); border-radius: 15px; background: rgba(20, 9, 18, .59); box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 15px 30px rgba(0,0,0,.27); -webkit-backdrop-filter: blur(17px); backdrop-filter: blur(17px); }
.link-search i { color: #ff72bb; font-size: 19px; }
.link-search input { padding: 8px 1px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.link-search input:focus { transform: none; }
.link-search .clear-search { display: none; color: #cbe8ff; border: 0; background: transparent; font-size: 18px; cursor: pointer; }
.link-search.has-value .clear-search { display: block; }
.link-search-empty { display: none; padding: 35px 20px; color: var(--sub); text-align: center; }
.link-search-empty.visible { display: table-row; }
.link-search-empty td { border: 0; }

@keyframes mesh-shift { from { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; } to { background-position: 15% 10%, 84% 15%, 58% 84%, 0 0; } }
@keyframes glass-drift { from { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(10vw, 5vh, 0) scale(1.18); } to { transform: translate3d(4vw, 12vh, 0) scale(1.05); } }
@keyframes liquid-reveal { from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(5px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes title-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes glass-sweep { 0%, 35% { left: -85%; } 60%, 100% { left: 150%; } }
@keyframes nav-glow { 0%, 100% { opacity: .35; transform: scaleX(.76); } 50% { opacity: 1; transform: scaleX(1); } }
@keyframes modal-pop { from { opacity: 0; transform: translateY(28px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 768px) { .container { padding: 0 16px !important; } .card { border-radius: 20px !important; } .link-search { max-width: none; margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }