@charset "utf-8";
/* CSS Document */
* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .floating-buttons {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 14px;
            z-index: 9999;
        }

        .float-item {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            position: relative;
        }

        .float-label {
            color: #fff;
            font-family: 'Segoe UI', system-ui, sans-serif;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
            padding: 7px 12px 7px 14px;
            border-radius: 20px 4px 4px 20px;
            white-space: nowrap;
            cursor: pointer;
            user-select: none;
            display: flex;
            align-items: center;
            gap: 7px;
            position: relative;
            overflow: hidden;
            transition: background 0.2s;
        }

        .float-label::after {
            content: '';
            position: absolute;
            top: 0;
            left: -60%;
            width: 40%;
            height: 100%;
            background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.32) 50%, transparent 100%);
            animation: shimmer 3.5s ease-in-out infinite;
            pointer-events: none;
        }

        .item-2 .float-label::after {
            animation-delay: 1.75s;
        }

        @keyframes shimmer {
            0% {
                left: -60%;
                opacity: 0;
            }

            15% {
                opacity: 1;
            }

            65% {
                left: 120%;
                opacity: 0.7;
            }

            100% {
                left: 120%;
                opacity: 0;
            }
        }

        .item-1 .float-label {
            background: #1a3a5c;
            box-shadow: -3px 0 14px rgba(26, 58, 92, 0.5);
        }

        .item-2 .float-label {
            background: #2e86c1;
            box-shadow: -3px 0 14px rgba(46, 134, 193, 0.5);
        }

        .item-1:hover .float-label {
            background: #234d7a;
        }

        .item-2:hover .float-label {
            background: #3a97d4;
        }

        .item-1.pinned .float-label {
            background: #0f2740;
        }

        .item-2.pinned .float-label {
            background: #1a6fa8;
        }

        .arrow-hint {
            font-size: 13px;
            font-weight: 900;
            line-height: 1;
            flex-shrink: 0;
            opacity: 0.85;
        }

        .float-panel {
            position: absolute;
            right: 0;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
            white-space: nowrap;
            z-index: 10000;
        }

        .item-1 .float-panel {
            bottom: calc(100% + 8px);
            transform-origin: bottom right;
            transform: scaleY(0.8) translateY(8px);
        }

        .item-1:hover .float-panel,
        .item-1.pinned .float-panel {
            opacity: 1;
            pointer-events: auto;
            transform: scaleY(1) translateY(0);
        }

        .item-2 .float-panel {
            top: calc(100% + 8px);
            transform-origin: top right;
            transform: scaleY(0.8) translateY(-8px);
        }

        .item-2:hover .float-panel,
        .item-2.pinned .float-panel {
            opacity: 1;
            pointer-events: auto;
            transform: scaleY(1) translateY(0);
        }

        .panel-box {
            background: #fff;
            border-radius: 16px 4px 4px 16px;
            box-shadow: -6px 6px 28px rgba(0, 0, 0, 0.16);
            padding: 20px 22px 20px 24px;
            min-width: 260px;
            border-left: 4px solid #ccc;
            position: relative;
            overflow: hidden;
        }

        .item-1 .panel-box {
            border-left-color: #1a3a5c;
        }

        .item-2 .panel-box {
            border-left-color: #2e86c1;
        }

        .panel-box .p-tag,
        .panel-box .p-title,
        .panel-box .p-divider,
        .panel-box .p-sub,
        .panel-box .p-features,
        .panel-box .wa-link {
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .panel-box.revealed .p-tag {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.04s;
        }

        .panel-box.revealed .p-title {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.10s;
        }

        .panel-box.revealed .p-divider {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.15s;
        }

        .panel-box.revealed .p-sub {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.20s;
        }

        .panel-box.revealed .p-features {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.26s;
        }

        .panel-box.revealed .wa-link {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.34s;
        }

        .p-tag {
            display: inline-block;
            font-family: 'Segoe UI', system-ui, sans-serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.9px;
            text-transform: uppercase;
            padding: 3px 9px;
            border-radius: 4px;
            margin-bottom: 8px;
        }

        .item-1 .p-tag {
            background: #e8f0f8;
            color: #1a3a5c;
        }

        .item-2 .p-tag {
            background: #e3f0fb;
            color: #1a6fa8;
        }

        .p-title {
            font-family: 'Segoe UI', system-ui, sans-serif;
            font-size: 14px;
            font-weight: 700;
            color: #111;
            margin-bottom: 2px;
            line-height: 1.3;
            display: block;
        }

        .p-divider {
            height: 1px;
            background: #eee;
            margin: 10px 0;
            border: none;
        }

        .p-sub {
            font-family: 'Segoe UI', system-ui, sans-serif;
            font-size: 12px;
            color: #555;
            margin-bottom: 10px;
            line-height: 1.55;
            display: block;
        }

        .p-features {
            list-style: none;
            margin-bottom: 14px;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .p-features li {
            font-family: 'Segoe UI', system-ui, sans-serif;
            font-size: 11.5px;
            color: #444;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .p-features li::before {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .item-1 .p-features li::before {
            background: #1a3a5c;
        }

        .item-2 .p-features li::before {
            background: #2e86c1;
        }

        .wa-link {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #25D366;
            color: #fff;
            text-decoration: none;
            font-family: 'Segoe UI', system-ui, sans-serif;
            font-size: 13px;
            font-weight: 700;
            padding: 9px 16px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(37, 211, 102, 0.35);
            transition: background 0.2s, transform 0.15s, opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .wa-link:hover {
            background: #1ebe5a;
            transform: translateY(-1px) !important;
        }

        .wa-link svg {
            width: 17px;
            height: 17px;
            flex-shrink: 0;
        }

	.link {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #579ecd;
            color: #fff;
            text-decoration: none;
            font-family: 'Segoe UI', system-ui, sans-serif;
            font-size: 13px;
            font-weight: 700;
            padding: 9px 16px;
            border-radius: 10px;
            box-shadow: 0 2px 10px #579ecd;
            transition: background 0.2s, transform 0.15s, opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .link:hover {
            background: #2e86c1;
            transform: translateY(-1px) !important;
        }

        .link svg {
            width: 17px;
            height: 17px;
            flex-shrink: 0;
        }

		
        .pin-badge {
            position: absolute;
            top: 7px;
            right: 9px;
            font-family: 'Segoe UI', system-ui, sans-serif;
            font-size: 10px;
            color: #bbb;
            cursor: pointer;
            user-select: none;
            background: #f5f5f5;
            border-radius: 4px;
            padding: 2px 6px;
            transition: color 0.2s, opacity 0.2s;
            opacity: 0;
        }

        .float-item:hover .pin-badge {
            opacity: 1;
        }

        .float-item.pinned .pin-badge {
            opacity: 1;
            color: #e55;
        }

        .pin-badge:hover {
            color: #c00;
        }