:root{--bg:#f7faff;--text:#10213b;--muted:#66758b;--card:#fff;--line:#dfe8f4;--blue:#1976ff;--cyan:#16c7e8;--navy:#071c45;--shadow:0 18px 50px rgba(22,55,100,.12)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);background:var(--bg);line-height:1.6}a{text-decoration:none;color:inherit}.container{width:min(1160px,calc(100% - 32px));margin:auto}.site-header{height:72px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(220,230,242,.7)}.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#1683ff,#19cfe4);display:grid;place-items:center;color:#fff;font-weight:900;font-size:23px;transform:rotate(-8deg)}.brand b{display:block;font-size:23px;line-height:1}.brand small{display:block;color:#7a8799;font-size:10px;margin-top:3px}.desktop-nav{display:flex;gap:28px;font-size:14px;font-weight:650}.desktop-nav a:hover{color:var(--blue)}.nav-actions{display:flex;align-items:center;gap:10px}.icon-btn{border:1px solid var(--line);background:#fff;border-radius:12px;width:40px;height:40px;cursor:pointer}.btn{display:inline-flex;justify-content:center;align-items:center;gap:9px;background:#1677ff;color:#fff;border:0;border-radius:12px;padding:12px 20px;font-weight:750;cursor:pointer;box-shadow:0 8px 22px rgba(23,119,255,.2)}.btn.small{padding:10px 17px}.btn.full{width:100%;font-size:16px}.hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#071b44,#0a2c61 55%,#063e68);color:#fff;padding:76px 0 92px}.hero-glow{position:absolute;border-radius:50%;filter:blur(1px);opacity:.55}.hero-glow.one{width:430px;height:430px;right:-80px;top:-170px;background:#12d4c4}.hero-glow.two{width:300px;height:300px;left:-160px;bottom:-170px;background:#236fff}.hero-grid{position:relative;display:grid;grid-template-columns:1fr 520px;align-items:center;gap:60px}.eyebrow{font-size:12px;font-weight:850;letter-spacing:1.2px;color:#9beee9;margin-bottom:12px}.eyebrow.dark{color:#2374e8}.hero h1{font-size:clamp(42px,5vw,64px);line-height:1.05;margin:0 0 20px;letter-spacing:-2px}.hero h1 span{color:#48e4db}.hero-copy>p{font-size:18px;color:#d7e5fa;max-width:600px}.trust-row{display:flex;flex-wrap:wrap;gap:18px;margin-top:25px;font-size:13px;color:#d9e7f9}.shortener-card{background:rgba(255,255,255,.97);color:var(--text);border-radius:22px;padding:20px;box-shadow:0 28px 70px rgba(0,0,0,.22)}.tool-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;background:#edf3fb;border-radius:12px;padding:5px;margin-bottom:22px}.tab{border:0;background:transparent;padding:10px 6px;border-radius:9px;font-size:12px;font-weight:750;text-align:center;cursor:pointer}.tab.active{background:#1677ff;color:#fff}.shortener-card label{display:block;font-size:12px;font-weight:800;margin:12px 0 7px}.shortener-card em{font-weight:500;color:#8a97a8;font-style:normal}.input-wrap{display:flex;align-items:center;gap:9px;border:1px solid #d6e0ed;background:#fff;border-radius:11px;padding:0 13px;margin-bottom:11px}.input-wrap input{border:0;outline:0;width:100%;padding:13px 0;font-size:14px}.form-note{text-align:center;color:#8a96a6;font-size:10px;margin:12px 0 0}.form-note a{color:#326bd4}.result{margin-top:14px;border-radius:14px;background:#eef9f5;padding:14px}.hidden{display:none}.result-row{display:flex;gap:8px;align-items:center}.result-url{flex:1;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.copy-btn{border:0;background:#1677ff;color:#fff;padding:9px 12px;border-radius:9px;cursor:pointer}.stats{margin-top:-34px;position:relative;background:#fff;border-radius:22px;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(4,1fr);padding:24px 30px;z-index:2}.stats div{text-align:center;border-right:1px solid #e8edf5}.stats div:last-child{border:0}.stats strong{display:block;font-size:23px}.stats span{color:var(--muted);font-size:12px}.section{padding:80px 0}.section-head{display:flex;justify-content:space-between;margin-bottom:30px}.section h2{font-size:36px;line-height:1.15;margin:4px 0 8px;letter-spacing:-1px}.section p{color:var(--muted)}.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.tool-card{padding:25px;border-radius:20px;min-height:240px;border:1px solid transparent;transition:.2s}.tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.tool-card.blue{background:#eaf3ff;border-color:#d5e7ff}.tool-card.green{background:#e8fbf4;border-color:#d4f4e8}.tool-card.orange{background:#fff2e8;border-color:#ffe2ce}.tool-card.purple{background:#f3edff;border-color:#e6dcff}.tool-icon{width:48px;height:48px;border-radius:14px;background:#fff;display:grid;place-items:center;font-size:23px;margin-bottom:20px;box-shadow:0 6px 18px rgba(20,50,100,.08)}.tool-card h3{margin:0 0 8px}.tool-card p{font-size:14px;margin-bottom:20px}.tool-link{font-size:13px;font-weight:800;color:#176fe9}.alt{background:#edf5ff}.split{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}.preview-card{background:#fff;border-radius:22px;padding:20px;box-shadow:var(--shadow)}.mini-url{border:1px solid var(--line);padding:12px;border-radius:11px;font-size:13px}.mini-url button{float:right;border:0;background:#eaf2ff;color:#1269df;border-radius:7px;padding:5px 9px}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.mini-stats div{background:#f7faff;padding:12px;border-radius:10px}.mini-stats b,.mini-stats span{display:block}.mini-stats span{font-size:11px;color:var(--muted)}.qr-placeholder{display:flex;gap:16px;align-items:center;border:1px solid var(--line);padding:15px;border-radius:14px}.qr-box{width:90px;height:90px;background:#111;color:#fff;display:grid;place-items:center;font-size:55px}.qr-placeholder p{font-size:12px;margin:4px 0}.qr-placeholder a{font-size:12px;color:#1677ff;font-weight:800}.benefit{display:flex;gap:14px;margin:20px 0}.benefit i{font-style:normal;font-size:22px}.benefit b{display:block}.benefit p{margin:2px 0;font-size:13px}.content-card{background:#fff;padding:35px;border-radius:22px;border:1px solid var(--line)}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:25px}.faq-grid>div{padding:18px;background:#f7faff;border-radius:14px}.faq-grid h3{margin:0}.faq-grid p{font-size:13px}.footer{background:#061a3c;color:#d7e3f5;padding:55px 0 20px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px}.footer .brand{color:#fff}.footer p{color:#93a8c4;font-size:13px}.footer h4{color:#fff;margin-top:0}.footer-grid>div:not(:first-child) a{display:block;font-size:13px;color:#9db0c8;margin:8px 0}.copyright{border-top:1px solid rgba(255,255,255,.1);margin-top:35px;padding-top:18px;color:#8196b4;font-size:11px}.page{padding:70px 0;min-height:65vh}.page-card{background:#fff;padding:35px;border:1px solid var(--line);border-radius:22px}.tool-page{max-width:760px;margin:auto}.tool-page h1{font-size:42px}.tool-box{background:#fff;border:1px solid var(--line);border-radius:20px;padding:25px;box-shadow:var(--shadow)}.tool-box input,.tool-box select{width:100%;padding:13px;border:1px solid var(--line);border-radius:10px;margin:7px 0 14px;font:inherit}.notice{padding:12px;border-radius:10px;background:#eef5ff;margin-top:15px}.dark body{--bg:#07152d;--text:#eef6ff;--muted:#a9bad1;--card:#0e213e;--line:#28405f}.dark .site-header,.dark .shortener-card,.dark .stats,.dark .page-card,.dark .tool-box,.dark .preview-card,.dark .content-card{background:#0e213e;color:#eef6ff}.dark .input-wrap,.dark .input-wrap input{background:#0b1b34;color:#fff}.dark .tool-card p,.dark .benefit p{color:#a9bad1}@media(max-width:900px){.desktop-nav{display:none}.hero-grid,.split{grid-template-columns:1fr}.hero{padding:55px 0 75px}.tool-grid{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr;gap:15px}.stats div:nth-child(2){border:0}.footer-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.container{width:min(100% - 22px,1160px)}.hero h1{font-size:43px}.hero-copy>p{font-size:15px}.tool-grid,.faq-grid,.footer-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr;padding:18px}.stats div{border:0}.tool-tabs{grid-template-columns:1fr 1fr}.section{padding:55px 0}.section h2{font-size:29px}.nav-actions .btn{display:none}.shortener-card{padding:14px}.split{gap:30px}.tool-page h1{font-size:34px}}
/* =========================================
   LinkMint Modern Tools UI
   ========================================= */

:root {
    --lm-blue: #1677ff;
    --lm-blue-dark: #0d5ed7;
    --lm-text: #102a43;
    --lm-muted: #60758a;
    --lm-bg: #f6f9ff;
    --lm-card: #ffffff;
    --lm-border: #dfe9f5;
    --lm-green: #16a66a;
    --lm-shadow: 0 18px 55px rgba(20, 65, 120, .10);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--lm-text);
    background:
        radial-gradient(circle at 10% 10%, rgba(22,119,255,.07), transparent 28%),
        radial-gradient(circle at 90% 20%, rgba(120,90,255,.06), transparent 25%),
        var(--lm-bg);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Arial, sans-serif;
}

/* HEADER */

.site-header {
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid rgba(210,225,240,.75);
    box-shadow: 0 4px 20px rgba(20,60,100,.04);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
}

.site-header .container {
    max-width: 1180px;
    margin: auto;
}

.nav {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* BRAND */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: var(--lm-text);
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg,#1da1ff,#1769ff);
    box-shadow: 0 8px 20px rgba(22,119,255,.25);
}

.brand b {
    display: block;
    font-size: 20px;
    line-height: 1.1;
}

.brand small {
    display: block;
    margin-top: 3px;
    color: #71859a;
    font-size: 10px;
    letter-spacing: .2px;
}

/* BUTTON */

.btn {
    border: 0;
    border-radius: 12px;
    padding: 13px 20px;
    background: linear-gradient(135deg,#1683ff,#1468ed);
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-shadow: 0 9px 22px rgba(22,119,255,.20);
    transition: .2s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(22,119,255,.28);
}

.btn:active {
    transform: translateY(0);
}

.btn.small {
    padding: 10px 17px;
    border-radius: 11px;
}

/* PAGE */

.page {
    min-height: calc(100vh - 72px);
    padding: 70px 20px 90px;
}

.page > .container {
    max-width: 1080px;
    margin: auto;
}

/* TOOL HERO */

.tool-page {
    position: relative;
}

.tool-page::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(68,157,255,.07);
    filter: blur(4px);
    top: -50px;
    right: -80px;
    pointer-events: none;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #e6f2ff;
    color: #0871ec;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .7px;
}

.tool-page h1 {
    margin: 18px 0 12px;
    font-size: clamp(36px,5vw,58px);
    line-height: 1.08;
    letter-spacing: -2px;
    font-weight: 800;
}

.tool-page > p {
    max-width: 720px;
    margin: 0 0 30px;
    color: var(--lm-muted);
    font-size: 17px;
    line-height: 1.7;
}

/* TOOL CARD */

.tool-box {
    position: relative;
    background: rgba(255,255,255,.94);
    border: 1px solid var(--lm-border);
    border-radius: 22px;
    padding: 28px;
    box-shadow: var(--lm-shadow);
    overflow: hidden;
}

.tool-box::before {
    content: "";
    position: absolute;
    height: 4px;
    left: 0;
    right: 0;
    top: 0;
    background: linear-gradient(90deg,#1595ff,#6a7dff,#9f67ff);
}

.tool-box label {
    display: block;
    margin: 0 0 9px;
    font-weight: 650;
    font-size: 14px;
    color: #18334d;
}

.tool-box input,
.tool-box textarea,
.tool-box select {
    width: 100%;
    min-height: 50px;
    border: 1px solid #d9e5f2;
    border-radius: 12px;
    padding: 13px 15px;
    background: #fff;
    color: #142d45;
    font-size: 15px;
    outline: none;
    transition: .2s;
    margin-bottom: 20px;
}

.tool-box input:focus,
.tool-box textarea:focus,
.tool-box select:focus {
    border-color: #4295ff;
    box-shadow: 0 0 0 4px rgba(22,119,255,.09);
}

.tool-box button {
    margin-top: 2px;
}

/* RESULT */

.notice,
.utm-result,
.qr-result {
    margin-top: 22px;
}

.notice {
    border-radius: 16px;
    background: #f0f7ff;
    border: 1px solid #d7e9ff;
    padding: 18px;
    line-height: 1.7;
}

.notice b {
    color: #12304b;
}

/* URL CHECKER RESULT */

.url-result {
    margin-top: 22px;
    padding: 22px;
    border: 1px solid #dce8f5;
    background: linear-gradient(135deg,#f8fcff,#f4f8ff);
    border-radius: 18px;
}

.url-result-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 18px;
}

.result-check {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #dcfaec;
    color: #11945c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
}

.result-item {
    background: #fff;
    border: 1px solid #e1eaf3;
    border-radius: 14px;
    padding: 15px;
}

.result-item small {
    display: block;
    color: #74879a;
    font-size: 12px;
    margin-bottom: 6px;
}

.result-item strong {
    word-break: break-word;
    font-size: 14px;
}

/* GENERATED URL */

.generated-url {
    background: #fff;
    border: 1px solid #e0e9f2;
    border-radius: 12px;
    padding: 14px;
    margin-top: 10px;
    line-height: 1.6;
    word-break: break-all;
    color: #18334d;
}

/* ACTIONS */

.tool-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* INFO CARDS */

.tool-features {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
    margin-top: 22px;
}

.tool-feature {
    background: rgba(255,255,255,.9);
    border: 1px solid #dfebf6;
    border-radius: 17px;
    padding: 20px;
    box-shadow: 0 8px 25px rgba(20,60,100,.05);
}

.tool-feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: #eaf4ff;
    color: #1677ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 13px;
}

.tool-feature h3 {
    margin: 0 0 7px;
    font-size: 16px;
}

.tool-feature p {
    margin: 0;
    color: #6b7f93;
    font-size: 13px;
    line-height: 1.6;
}

/* QR */

.qr-card {
    display: inline-block;
    background: white;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid #e1eaf3;
    box-shadow: 0 10px 30px rgba(20,60,100,.08);
}

/* MOBILE */

@media (max-width: 800px) {

    .page {
        padding: 45px 16px 65px;
    }

    .tool-page h1 {
        font-size: 38px;
        letter-spacing: -1.3px;
    }

    .tool-page > p {
        font-size: 15px;
    }

    .tool-box {
        padding: 21px;
        border-radius: 18px;
    }

    .result-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .tool-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {

    .nav {
        min-height: 65px;
    }

    .brand b {
        font-size: 18px;
    }

    .brand small {
        font-size: 9px;
    }

    .brand-mark {
        width: 38px;
        height: 38px;
        font-size: 19px;
    }

    .site-header .btn.small {
        padding: 9px 13px;
    }

    .tool-page h1 {
        font-size: 32px;
    }

    .tool-box {
        padding: 17px;
    }

    .result-grid {
        grid-template-columns: 1fr;
    }

    .tool-actions {
        flex-direction: column;
    }

    .tool-actions .btn {
        width: 100%;
    }
}