:root{
            --primary:#e91e63;
            --primary-darker:#ad1457;
            --dark:#121212;
            --card:#1e1e2f;
            --light:#f5f5f5;
            --accent:#ffee58;
            --muted:#9e9e9e;
            --btn-radius:60px;
        }
        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        body{
            font-family:'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
            background:linear-gradient(145deg, #0f0f1a 0%, #1c1c2d 100%);
            color:#e8e8f0;
            line-height:1.8;
        }
        a{color:#ffb6c1;text-decoration:none;transition:all .2s ease}
        a:hover{color:#ffee58;text-decoration:underline}
        .container{max-width:1200px;margin:0 auto;padding:0 20px}
        header{
            background:rgba(15,15,26,.85);
            backdrop-filter:blur(12px);
            border-bottom:2px solid rgba(255,255,255,.06);
            padding:18px 0;
            position:sticky;
            top:0;
            z-index:100;
        }
        .header-flex{
            display:flex;
            align-items:center;
            justify-content:space-between;
            flex-wrap:wrap;
            gap:10px;
        }
        .my-logo{
            font-family:'Righteous','Segoe UI',cursive;
            font-size:2.2rem;
            font-weight:900;
            background:linear-gradient(45deg,#ffea00,#ff5d8f);
            -webkit-background-clip:text;
            background-clip:text;
            color:transparent;
            letter-spacing:2px;
            text-transform:uppercase;
            filter:drop-shadow(0 2px 6px rgba(255,93,143,.3));
        }
        .my-logo:hover{
            text-decoration:none;
            filter:drop-shadow(0 4px 12px rgba(255,234,0,.4));
        }
        .nav-links{
            display:flex;
            list-style:none;
            gap:24px;
            flex-wrap:wrap;
        }
        .nav-links a{
            font-weight:500;
            padding:6px 10px;
            border-radius:12px;
            color:#fff;
        }
        .nav-links a:hover{
            background:var(--primary);
            color:#fff;
            text-decoration:none;
        }
        .burger{
            display:none;
            background:none;
            border:none;
            font-size:28px;
            color:#fff;
            cursor:pointer;
        }
        .breadcrumb{
            display:flex;
            flex-wrap:wrap;
            list-style:none;
            gap:8px;
            padding:10px 0;
            font-size:.85rem;
            color:var(--muted);
        }
        .breadcrumb li+li::before{
            content:" ▸ ";
            color:var(--muted);
        }
        .breadcrumb a{color:#ccc}
        .breadcrumb a:hover{color:var(--accent)}
        .search-bar{
            margin:30px auto;
            display:flex;
            max-width:680px;
            border-radius:50px;
            background:rgba(255,255,255,.07);
            padding:6px 6px 6px 20px;
            align-items:center;
            gap:12px;
            border:1px solid rgba(255,255,255,.1);
            transition:border .2s;
        }
        .search-bar:focus-within{border-color:#ffb6c1}
        .search-bar input{
            background:transparent;
            border:none;
            flex:1;
            color:#fff;
            font-size:1rem;
            outline:none;
            padding:8px 0;
        }
        .search-bar button{
            background:linear-gradient(90deg,var(--primary),#ff8f00);
            border:none;
            color:#fff;
            width:46px;height:46px;
            border-radius:50%;
            font-size:18px;
            cursor:pointer;
            transition:transform .2s;
        }
        .search-bar button:hover{transform:scale(1.06)}
        h1{
            font-size:2.8rem;
            font-weight:900;
            margin:30px 0 20px;
            background:linear-gradient(90deg,#ffea00,#ff5d8f);
            -webkit-background-clip:text;
            background-clip:text;
            color:transparent;
            line-height:1.2;
        }
        h2{
            font-size:2rem;
            font-weight:800;
            margin:48px 0 16px;
            padding-left:16px;
            border-left:6px solid var(--primary);
            color:#fff;
        }
        h3{
            font-size:1.5rem;
            font-weight:700;
            margin:30px 0 12px;
            color:#ffccd5;
        }
        h4{
            font-size:1.2rem;
            color:var(--accent);
            font-weight:600;
            margin:20px 0 8px;
        }
        p{
            margin:14px 0;
            font-size:1.02rem;
            letter-spacing:.2px;
        }
        ul, ol{
            margin:16px 0 16px 28px;
        }
        li{
            margin:8px 0;
        }
        strong, b{color:#ffccd5; font-weight:700}
        .mark{
            background:linear-gradient(120deg,rgba(233,30,99,.2) 30%,transparent 90%);
            padding:2px 8px;
            border-radius:8px;
        }
        .emoji-big{font-size:1.5rem; margin-right:6px; vertical-align:-4px}
        .divider{
            width:100%;
            height:2px;
            margin:35px 0;
            background:linear-gradient(90deg,transparent,var(--primary),transparent);
        }
        .card-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
            gap:24px;
            margin:30px 0;
        }
        .card{
            background:var(--card);
            border-radius:18px;
            padding:24px 20px;
            box-shadow:0 6px 18px rgba(0,0,0,.35);
            transition:transform .25s ease, box-shadow .25s ease;
            border:1px solid rgba(255,255,255,.05);
        }
        .card:hover{
            transform:translateY(-8px);
            box-shadow:0 18px 30px rgba(233,30,99,.15);
        }
        .card i{
            font-size:28px;
            color:var(--primary);
            margin-bottom:10px;
        }
        .song-row{
            background:rgba(255,255,255,.04);
            border-radius:12px;
            padding:12px 18px;
            margin:10px 0;
            display:flex;
            align-items:center;
            justify-content:space-between;
            flex-wrap:wrap;
            gap:8px;
            transition:background .2s;
        }
        .song-row:hover{background:rgba(233,30,99,.12)}
        .song-row .code{
            font-family:'Courier New', monospace;
            background:#222;
            padding:5px 12px;
            border-radius:20px;
            color:#ffee58;
            font-weight:bold;
            letter-spacing:1px;
        }
        .copy-btn{
            background:rgba(255,255,255,.1);
            border:none;
            color:#fff;
            padding:5px 16px;
            border-radius:40px;
            font-size:.9rem;
            cursor:pointer;
        }
        .copy-btn:hover{
            background:var(--primary);
        }
        .tip-box{
            background:rgba(255,183,77,.1);
            border-left:5px solid #ffb74d;
            padding:14px 20px;
            border-radius:0 14px 14px 0;
            margin:24px 0;
        }
        .danger-box{
            background:rgba(255,82,82,.1);
            border-left:5px solid #ff5252;
            padding:14px 20px;
            border-radius:0 14px 14px 0;
            margin:24px 0;
        }
        .card-quote{
            background:linear-gradient(145deg,#1c1c2e,#232338);
            border-radius:18px;
            padding:24px;
            border:1px solid rgba(255,255,255,.05);
        }
        .table-wrap{
            overflow-x:auto;
            margin:24px 0;
        }
        table{
            width:100%;
            border-collapse:collapse;
            min-width:520px;
            background:rgba(255,255,255,.02);
        }
        th{
            background:var(--primary);
            color:#fff;
            font-weight:600;
            padding:14px;
            text-align:left;
        }
        td{
            padding:12px 16px;
            border-bottom:1px solid rgba(255,255,255,.07);
        }
        .form-area{
            background:var(--card);
            padding:28px;
            border-radius:20px;
            margin:30px 0;
        }
        .form-area input, .form-area textarea{
            width:100%;
            background:rgba(255,255,255,.07);
            border:1px solid rgba(255,255,255,.1);
            padding:12px 16px;
            border-radius:12px;
            margin:10px 0;
            color:#fff;
            font-size:1rem;
            transition:.2s;
        }
        .form-area input:focus, .form-area textarea:focus{
            outline:none;
            border-color:var(--primary);
            background:rgba(233,30,99,.05);
        }
        .btn{
            background:linear-gradient(90deg,var(--primary),#ad1457);
            border:none;
            color:#fff;
            padding:14px 32px;
            border-radius:60px;
            font-size:1rem;
            cursor:pointer;
            transition:transform .2s,box-shadow .2s;
            display:inline-block;
        }
        .btn:hover{
            transform:scale(1.03);
            box-shadow:0 6px 16px rgba(233,30,99,.4);
        }
        .star-rating i{
            color:#777;
            font-size:22px;
            cursor:pointer;
            transition:color .2s;
            margin-right:4px;
        }
        .star-rating i.active, .star-rating i:hover{
            color:#ffee58;
        }
        footer{
            background:#0b0b13;
            border-top:2px solid rgba(255,255,255,.06);
            padding:38px 0 28px;
            margin-top:65px;
        }
        friend-link{
            display:block;
            padding:16px 0;
            font-size:.95rem;
        }
        friend-link a{
            margin:0 8px;
        }
        .rrssb{
            display:flex;
            gap:12px;
            list-style:none;
        }
        .rrssb a{
            font-size:20px;
        }
        .footer-bottom{
            text-align:center;
            padding-top:20px;
            border-top:1px solid rgba(255,255,255,.05);
            margin-top:18px;
            color:#999;
        }
        .mobile-nav{
            display:none;
        }
        @media (max-width:768px){
            h1{font-size:2rem}
            h2{font-size:1.7rem}
            h3{font-size:1.3rem}
            .nav-links{
                display:none;
                width:100%;
                flex-direction:column;
                text-align:center;
                gap:8px;
                padding:14px 0;
            }
            .nav-links.show{display:flex}
            .burger{
                display:block;
                margin-left:auto;
            }
            .search-bar{
                max-width:100%;
            }
            .card-grid{grid-template-columns:1fr}
        }
        .sticky-sidebar{position:sticky; top:90px}
        .content-col{
            flex:1 1 0;
        }
        @media(max-width:990px){
            .main-content{flex-direction:column}
            .sticky-sidebar{position:static}
        }