@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&display=swap');

:root {
    --bg: #07111f;
    --panel: rgba(17, 31, 52, .78);
    --panel2: rgba(25, 43, 68, .78);
    --line: rgba(173, 205, 255, .17);
    --text: #f4f8ff;
    --muted: #a7b8d1;
    --blue: #398cff;
    --cyan: #39dfd0;
    --radius: 24px;
    --shadow: 0 24px 70px rgba(0,0,0,.32);
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(46,104,174,.36), transparent 45%),
        radial-gradient(ellipse at 10% 35%, rgba(32,108,160,.20), transparent 38%),
        radial-gradient(ellipse at 90% 75%, rgba(63,70,155,.18), transparent 35%),
        linear-gradient(145deg, #07111f, #0a1729 50%, #080f1d);
    background-attachment: fixed;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: .28;
    background-image:
        radial-gradient(2px 2px at 10% 20%, #fff 50%, transparent 100%),
        radial-gradient(1px 1px at 30% 70%, #b9dfff 50%, transparent 100%),
        radial-gradient(2px 2px at 80% 25%, #fff 50%, transparent 100%),
        radial-gradient(1px 1px at 65% 85%, #b9dfff 50%, transparent 100%),
        radial-gradient(1px 1px at 90% 60%, #fff 50%, transparent 100%);
    background-size: 350px 350px;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }

.top {
    position: relative;
    z-index: 20;
    width: min(1180px, calc(100% - 40px));
    margin: 20px auto 0;
    min-height: 76px;
    padding: 15px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(10, 23, 41, .72);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 12px 40px rgba(0,0,0,.16);
}

.brand {
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -.7px;
    white-space: nowrap;
    color: #fff;
}

.brand b {
    color: #55b5ff;
}

.top nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.top nav a,
.mobile-nav a {
    color: #c4d2e7;
    font-size: 14px;
    font-weight: 600;
    transition: .2s;
}

.top nav a:hover,
.mobile-nav a:hover { color: var(--cyan); }

.nav-cta {
    padding: 11px 18px;
    border-radius: 13px;
    background: linear-gradient(120deg, #2878ed, #28b9d0);
    color: white !important;
}

.menu-toggle {
    display: none;
    width: 43px;
    height: 43px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.08);
    color: white;
    font-size: 21px;
}

.mobile-nav { display: none; }

.wrap {
    width: min(1050px, calc(100% - 40px));
    margin: 0 auto;
}

.hero {
    text-align: center;
    padding: 82px 15px 42px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border: 1px solid rgba(88,179,255,.25);
    border-radius: 99px;
    color: #82d8ff;
    background: rgba(45,135,210,.12);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 12px var(--cyan);
}

.hero h1 {
    max-width: 850px;
    margin: 25px auto 17px;
    font-size: clamp(34px, 6vw, 62px);
    line-height: 1.15;
    letter-spacing: -2px;
    font-weight: 900;
}

.hero h1 span {
    color: #58baff;
    text-shadow: 0 0 35px rgba(57,160,255,.25);
}

.hero p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
}

.hero-points {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 25px;
    margin-top: 25px;
    color: #d2e6fb;
    font-size: 13px;
    font-weight: 600;
}

.hero-points span::first-letter { color: var(--cyan); }

.notice {
    margin: 0 auto 18px;
    padding: 14px 18px;
    border: 1px solid rgba(57,223,208,.3);
    border-radius: 15px;
    background: rgba(20,130,126,.15);
    color: #a8fff2;
}

.upload-card {
    position: relative;
    padding: 25px;
    border: 1px solid rgba(173,205,255,.2);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(23,39,62,.88), rgba(12,25,44,.86));
    box-shadow: var(--shadow);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.upload-tabs {
    display: flex;
    gap: 8px;
    padding: 6px;
    margin-bottom: 19px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: rgba(0,0,0,.22);
}

.upload-tab {
    flex: 1;
    min-height: 48px;
    padding: 10px 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #aebed3;
    font-size: 14px;
    font-weight: 700;
    transition: .2s;
}

.upload-tab.active {
    color: #fff;
    background: linear-gradient(110deg, #2879ed, #20a9d4);
    box-shadow: 0 7px 22px rgba(38,130,235,.28);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.drop {
    min-height: 230px;
    padding: 35px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 13px;
    border: 2px dashed rgba(93,190,255,.55);
    border-radius: 22px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(48,133,218,.15), transparent 65%),
        rgba(7,18,34,.55);
    color: white;
    transition: .2s;
}

.drop:hover,
.drop.drag {
    border-color: var(--cyan);
    background-color: rgba(28,105,135,.18);
    box-shadow: inset 0 0 35px rgba(57,223,208,.08);
}

.cloud-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: linear-gradient(145deg, #173e70, #155b78);
    color: #6adfff;
    font-size: 28px;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

.drop strong {
    font-size: 17px;
    font-weight: 800;
}

.drop small {
    color: #9eb2cb;
    font-size: 12px;
    line-height: 1.7;
}

.drop input[type=file] {
    max-width: 100%;
    margin-top: 8px;
    color: #c6d6e9;
    font-size: 12px;
}

.selected-files {
    min-height: 22px;
    margin: 12px 2px;
    color: #a9bed8;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.upload-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 18px;
}

.safe-note {
    color: #9eb7d2;
    font-size: 12px;
}

.primary,
button.primary {
    min-height: 48px;
    padding: 12px 23px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(110deg, #2879ed, #20b6d0);
    color: white;
    font-weight: 800;
    box-shadow: 0 10px 25px rgba(35,133,220,.23);
    transition: transform .2s, filter .2s;
}

.primary:hover { transform: translateY(-2px); filter: brightness(1.1); }

.field-label {
    display: block;
    margin: 10px 0;
    color: #d5e6f8;
    font-size: 14px;
    font-weight: 700;
}

.url-input,
.grow input,
.auth input,
.panel input:not([type=file]):not([type=hidden]) {
    width: 100%;
    min-height: 49px;
    padding: 12px 15px;
    border: 1px solid rgba(160,190,225,.25);
    border-radius: 13px;
    outline: none;
    background: rgba(3,13,27,.65);
    color: #f4f8ff;
}

.url-input:focus,
.grow input:focus,
.auth input:focus {
    border-color: #58baff;
    box-shadow: 0 0 0 3px rgba(56,151,255,.14);
}

.url-hint {
    color: #91a8c2;
    font-size: 12px;
    line-height: 1.7;
}

.tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 15px;
    margin: 22px 0;
}

.tool {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 19px;
    border: 1px solid var(--line);
    border-radius: 19px;
    background: rgba(17,32,53,.75);
    transition: .2s;
}

.tool:hover {
    transform: translateY(-3px);
    border-color: rgba(65,190,255,.5);
    background: rgba(30,60,91,.85);
}

.tool-icon {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(54,144,235,.16);
    color: #65caff;
    font-size: 20px;
}

.tool-copy b { display: block; font-size: 14px; }
.tool-copy small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.tool-arrow { margin-left: auto; color: var(--cyan); }

.trust-row {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    margin: 20px 0 35px;
}

.trust-row > div {
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(18,35,57,.58);
}

.trust-row b { display: block; margin-bottom: 6px; font-size: 13px; }
.trust-row span { color: var(--muted); font-size: 12px; line-height: 1.6; }

.panel {
    margin: 25px 0;
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: 23px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.panel h1, .panel h2 { margin-top: 0; }
.muted, .info p { color: var(--muted); }

.result {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

.result img {
    width: 100px;
    height: 85px;
    object-fit: cover;
    border-radius: 12px;
    background: #172941;
}

.grow { flex: 1; min-width: 0; }
.grow b { display: block; margin-bottom: 10px; overflow-wrap: anywhere; }
.grow input { margin-bottom: 10px; }
.secondary {
    padding: 10px 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    color: #e9f3ff;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(145px,1fr));
    gap: 14px;
}

.gallery a {
    display: block;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(15,30,50,.7);
}

.gallery img {
    display: block;
    width: 100%;
    height: 145px;
    object-fit: cover;
    transition: transform .3s;
}

.gallery a:hover img { transform: scale(1.05); }

.stats {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
}

.stats div {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--panel2);
}

.stats b { display: block; font-size: 28px; color: #65caff; }
.stats small { color: var(--muted); }

.auth { max-width: 460px; margin: 6vh auto; }
.auth .panel { padding: 30px; }
.auth label { display: block; margin: 14px 0 6px; color: #c5d8ed; font-size: 13px; font-weight: 700; }
.auth button { width: 100%; margin-top: 12px; }

.info {
    margin: 22px 0;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
    text-align: center;
}

.info h3 { margin-top: 0; }

footer {
    margin-top: 55px;
    padding: 28px 15px;
    border-top: 1px solid var(--line);
    background: rgba(5,14,27,.55);
    color: #8ea5c0;
    text-align: center;
    font-size: 12px;
}

@media (max-width: 700px) {
    .top {
        width: calc(100% - 24px);
        min-height: 65px;
        margin-top: 12px;
        padding: 11px 14px;
        border-radius: 17px;
    }

    .brand { font-size: 17px; }
    .top nav { display: none; }

    .menu-toggle {
        display: block;
        flex: 0 0 43px;
    }

    .mobile-nav {
        position: relative;
        z-index: 15;
        width: calc(100% - 24px);
        margin: 8px auto 0;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: rgba(12,27,47,.96);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        gap: 8px;
        flex-wrap: wrap;
    }

    .mobile-nav:not([hidden]) { display: flex; }
    .mobile-nav a { padding: 10px; }

    .wrap { width: calc(100% - 24px); }

    .hero { padding: 55px 5px 28px; }
    .hero h1 { font-size: clamp(32px, 9vw, 46px); letter-spacing: -1.5px; }
    .hero p { font-size: 14px; }
    .hero-points { gap: 9px 14px; font-size: 11px; }

    .upload-card { padding: 14px; border-radius: 21px; }
    .upload-tabs { gap: 5px; padding: 4px; }
    .upload-tab { min-height: 45px; padding: 9px 6px; font-size: 11px; }

    .drop { min-height: 205px; padding: 25px 12px; }
    .drop strong { font-size: 15px; }
    .drop small { font-size: 11px; }

    .upload-actions { align-items: stretch; flex-direction: column; }
    .upload-actions .primary { width: 100%; }

    .tools { grid-template-columns: 1fr; gap: 10px; }
    .tool { padding: 14px; }
    .trust-row { grid-template-columns: 1fr; }

    .panel { padding: 17px; border-radius: 18px; }
    .result { align-items: flex-start; gap: 10px; }
    .result img { width: 72px; height: 72px; }
    .grow b { font-size: 12px; }
    .grow input { font-size: 11px; padding: 9px; }
    .secondary { font-size: 11px; padding: 9px; }
    .gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .gallery img { height: 130px; }
    .stats { gap: 9px; }
    .stats div { padding: 14px; }
    .stats b { font-size: 23px; }
    footer { margin-top: 35px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}


/* Thang Social Tools - responsive social downloader + accessibility */
.social-tool-page{max-width:820px;margin:54px auto 80px;padding:0 18px}
.social-tool-card{position:relative;overflow:hidden;padding:clamp(22px,5vw,38px);border:1px solid rgba(127,183,255,.22);border-radius:28px;background:linear-gradient(145deg,rgba(19,39,66,.94),rgba(10,23,42,.96));box-shadow:0 24px 70px rgba(0,0,0,.28)}
.social-tool-card:before{content:"";position:absolute;inset:-1px;background:radial-gradient(circle at 85% 0,rgba(56,189,248,.16),transparent 38%);pointer-events:none}
.social-tool-card>*{position:relative}.social-tool-kicker{display:inline-flex;gap:8px;align-items:center;color:#8edfff;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.social-tool-card h1{margin:14px 0 10px;font-size:clamp(26px,6vw,38px);line-height:1.18}.social-tool-card .muted{color:#aabbd1;line-height:1.7}.social-tool-input{width:100%;min-height:56px;margin:20px 0 12px;padding:0 17px;border:1px solid rgba(159,194,235,.24);border-radius:15px;background:rgba(3,12,25,.65);color:#f6fbff;font:inherit;outline:none}.social-tool-input:focus{border-color:#55c7ff;box-shadow:0 0 0 4px rgba(55,180,255,.12)}.social-tool-submit{width:100%;min-height:54px;border:0;border-radius:15px;background:linear-gradient(100deg,#2789ff,#20c9c5);color:#041322;font:inherit;font-weight:900;cursor:pointer}.social-tool-note{margin-top:16px;padding:13px 15px;border:1px solid rgba(140,180,220,.15);border-radius:14px;background:rgba(255,255,255,.035);color:#9fb4ce;font-size:12px;line-height:1.65}.social-tool-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;max-width:1100px;margin:20px auto;padding:0 18px}.social-tool-nav a{color:#eaf5ff;text-decoration:none;font-weight:800}.social-result{margin-top:20px;padding:18px;border-radius:16px;background:rgba(31,70,105,.35);border:1px solid rgba(95,190,230,.25);line-height:1.7}.social-result a{color:#7ce4ff;font-weight:800}.site-footer-seo{color:#8197b2;text-align:center;font-size:12px;margin:22px 0 0}
@media(max-width:600px){.social-tool-page{margin:28px auto 56px}.social-tool-card{border-radius:22px}.social-tool-nav{margin:14px auto}}