:root {    --primary-blue:#274eee;--primary-blue-light:#4667f0;--primary-blue-dark:#0125B4;--primary-blue-darker:#0147D4;--primary-yellow:#fccb24;--primary-yellow-light:#fde48e;--primary-yellow-faded:#ffce0040;    --text-white:#ffffff;--text-gray:#666;--text-dark:#333;--text-placeholder:#94a3b8;    --bg-white:#ffffff;--bg-white-80:rgba(255,255,255,0.8);--bg-white-95:rgba(255,255,255,0.95);--bg-white-65:rgba(255,255,255,0.65);--bg-white-blur:#ffffffb8;--bg-transparent:transparent;    --bg-dark:rgb(27,29,31);--bg-dark-80:rgba(27,29,31,0.8);--bg-dark-95:rgba(27,29,31,0.95);--bg-dark-secondary:#2a2a2a;--bg-dark-tertiary:#333;    --border-light:#abb7ec4f;--border-light-solid:#e0e4f1;--border-dark:#36393b;--border-divider-light:#afb5ba;--border-divider-dark:#ffffffba;--border-dashed:#0147D4;--border-dashed-dark:#444;    --radius-xs:4px;--radius-sm:5px;--radius-md:8px;--radius-lg:10px;--radius-xl:12px;--radius-2xl:20px;--radius-round:50%;    --spacing-xs:5px;--spacing-sm:10px;--spacing-md:15px;--spacing-lg:20px;--spacing-xl:25px;    --icon-size:50px;--icon-size-lg:240px;    --blur-sm:blur(5px);--blur-md:blur(10px);--blur-lg:blur(15px);    --transition-fast:0.2s;--transition-normal:0.3s;--transition-ease:cubic-bezier(0.68,-0.55,0.265,1.55);    --gradient-primary:linear-gradient(-45deg,var(--primary-blue),var(--primary-blue-light));--gradient-primary-reverse:linear-gradient(120deg,var(--primary-blue),var(--primary-blue-light));--gradient-yellow:linear-gradient(-45deg,var(--primary-yellow),var(--primary-yellow-light));--gradient-popup:linear-gradient(180deg,var(--primary-blue-dark) 0%,var(--primary-blue-darker) 100%);--gradient-popup-dark:linear-gradient(135deg,#011c7a 0%,#013aa0 100%);    --z-dock:999;--z-modal:1000;}
.dock-container {display:none;position:fixed;bottom:var(--spacing-lg);left:50%;transform:translateX(-50%);width:auto;z-index:var(--z-dock);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),opacity 0.3s ease;opacity:1;}
@media (min-width:980px) {.dock-container {display:block;}
;}
.dock-container.hidden-on-scroll {transform:translateX(-50%) translateY(150%);opacity:0;pointer-events:none;}
.dock {text-align:center;display:flex;align-items:center;background-color:var(--bg-white-65);backdrop-filter:var(--blur-md);border-radius:var(--radius-2xl);padding:var(--spacing-sm);overflow:visible;border:1px solid var(--border-light);}
.dock-icons {display:flex;justify-content:center;align-items:center;margin:0;padding:0;list-style:none;}
.dock-icon {will-change:transform;position:relative;width:var(--icon-size);height:var(--icon-size);background-color:var(--bg-transparent);border-radius:var(--radius-xl);margin:0 var(--spacing-xs);transition:transform var(--transition-fast) ease,margin var(--transition-fast) ease !important;transform-origin:bottom center;cursor:pointer;}
.dock-icon::before {content:'';position:absolute;inset:calc(-1 * var(--spacing-sm));z-index:-1;}
.dock-icon:hover {transform:scale(1.6) translateY(calc(-1 * var(--spacing-xs)));margin-left:18px;margin-right:18px;transition:all var(--transition-fast);}
.dock-icon.hovered {transform:scale(1.3) translateY(-3px);margin-left:var(--spacing-md);margin-right:var(--spacing-md);}
.dock-icon img {width:100%;height:100%;border-radius:var(--radius-xl);pointer-events:none;}
.dock-icon a {display:block;width:100%;height:100%;}
.dock-divider {height:var(--spacing-lg);border-right:2px solid var(--border-divider-light);margin:0 var(--spacing-xs);}
.docktooltip {position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:14px;background:var(--primary-blue-light);color:var(--text-white);padding:var(--spacing-xs);border-radius:var(--radius-sm);opacity:0;pointer-events:none;transition:all var(--transition-normal) var(--transition-ease);white-space:nowrap;}
.dock-icon:hover .docktooltip {top:-36px;opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) scale(0.7);}
.docktooltip::before {position:absolute;content:"";width:8px;height:8px;background:var(--primary-blue-light);bottom:-3px;left:50%;transform:translate(-50%) rotate(45deg);transition:all var(--transition-normal) var(--transition-ease);}
.expand-dock {position:fixed;left:0;bottom:var(--spacing-lg);width:35px;height:var(--icon-size);font-weight:bold;background:var(--gradient-primary);border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--primary-yellow);text-align:center;line-height:52px;cursor:pointer;display:none;z-index:var(--z-dock);}
.expand-dock:hover {background:var(--gradient-yellow);color:var(--primary-blue);}
.dock-modal-frontend {display:none;position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.5);backdrop-filter:blur(8px);}
.dockmodal-content {background-color:var(--bg-white-blur);backdrop-filter:var(--blur-lg);margin:10% auto;padding:var(--spacing-xl);width:70%;max-width:400px;border-radius:var(--radius-md);border:2px solid var(--border-light);}
.dockmodal-content h2 {margin-top:0;}
#appForm label {display:block;margin-bottom:var(--spacing-sm);}
#appForm input[type="text"] {width:100%;padding:8px 12px;margin-bottom:var(--spacing-xs);box-sizing:border-box;border:1px solid var(--border-light-solid);border-radius:6px;font-size:14px;transition:all var(--transition-normal) ease;background:var(--bg-white-80);backdrop-filter:var(--blur-sm);}
#appForm input[type="text"]:focus {outline:none;border-color:var(--primary-blue-light);background:var(--bg-white-95);}
#appForm input[type="text"]::placeholder {color:var(--text-placeholder);opacity:0.8;}
#appForm input[type="submit"] {width:100%;padding:12px;background:var(--gradient-primary-reverse);color:var(--text-white);border:none;border-radius:var(--radius-md);font-size:16px;font-weight:600;cursor:pointer;transition:all var(--transition-normal) ease;}
#appForm input[type="submit"]:hover {background:var(--gradient-yellow);color:var(--primary-blue);}
.dialog {display:none;position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.5);backdrop-filter:blur(8px);}
.dialog-content {position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--gradient-primary-reverse);backdrop-filter:var(--blur-lg);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:var(--spacing-lg);text-align:center;}
.dialog-content p {margin-bottom:var(--spacing-lg);color:var(--text-white);font-weight:600;}
#customDialog button {padding:var(--spacing-xs) var(--spacing-lg);margin:0 var(--spacing-sm);background:var(--bg-white);color:var(--primary-blue);border:none;border-radius:var(--radius-xs);cursor:pointer;transition:background-color var(--transition-normal);}
#customDialog button:hover {background:var(--gradient-yellow);}
.popup-modal-content {background:var(--gradient-popup);margin:6% auto;padding:0;width:76%;max-width:350px;border-radius:var(--radius-lg);position:relative;animation:modalSlideIn var(--transition-normal) ease-out;overflow:hidden;border:1px solid rgba(255,255,255,0.1);}
@keyframes modalSlideIn {from {opacity:0;transform:translateY(-30px);}
to {opacity:1;transform:translateY(0);}
;}
.close,.popup-close {display:none;}
.popup-header {background:var(--bg-transparent);padding:var(--spacing-xl) var(--spacing-lg) var(--spacing-sm);display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);}
.popup-header-line {flex:1;height:1px;background:rgba(255,255,255,0.3);}
.popup-title {text-align:center;color:var(--text-white);font-size:22px;font-weight:700;margin:0;letter-spacing:2px;text-shadow:0 2px 4px rgba(0,0,0,0.2);}
.popup-content-white {background:var(--bg-white);padding:var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);border-radius:var(--radius-lg);margin:0 var(--spacing-md) var(--spacing-md);width:calc(100% - 30px);box-sizing:border-box;}
.popup-tabs-wrapper {background:rgba(0,0,0,0.15);border-radius:25px;padding:var(--spacing-xs);margin:8px 70px var(--spacing-md);box-shadow:inset 0 2px 4px rgba(0,0,0,0.1);}
.popup-tabs {display:flex;justify-content:center;gap:var(--spacing-xs);}
.popup-tab {flex:1;padding:8px;background:var(--bg-transparent);border:none;border-radius:var(--spacing-lg);font-size:14px;font-weight:600;color:rgba(255,255,255,0.9);cursor:pointer;transition:all var(--transition-normal) ease;position:relative;}
.popup-tab.active {background:var(--bg-white);color:var(--primary-blue-dark);}
.popup-tab.active::after {content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:12px;border-left:8px solid var(--bg-transparent);border-right:8px solid var(--bg-transparent);border-bottom:8px solid var(--bg-white);z-index:10;}
.popup-qrcode-container {position:relative;width:var(--icon-size-lg);height:var(--icon-size-lg);margin:0 auto var(--spacing-lg);background:var(--bg-white);border-radius:var(--radius-lg);padding:var(--spacing-sm);}
.qrcode-display {width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.qrcode-display img {width:100%;height:100%;object-fit:contain;border-radius:var(--radius-md);}
.popup-dashed-line {height:0;border:none;border-top:2px dashed var(--border-dashed);margin-bottom:30px;position:relative;}
.popup-dashed-line::before,.popup-dashed-line::after {content:'';position:absolute;top:50%;transform:translateY(-50%);width:24px;height:24px;background:var(--border-dashed);border-radius:var(--radius-round);}
.popup-dashed-line::before {left:-33px;}
.popup-dashed-line::after {right:-33px;}
.popup-info {background:var(--bg-transparent);padding:0;}
.popup-info-item {margin:12px 0;font-size:14px;display:flex;align-items:flex-start;margin-left:var(--spacing-md);}
.popup-info-label {font-weight:600;white-space:nowrap;}
.popup-info-value {font-weight:500;}
.popup-info-item:first-child .popup-info-value {background-color:var(--primary-yellow-faded);padding:0 8px;}
.dock-container.dragging-link .dock {background-color:rgba(173,216,230,0.4);border:1px solid var(--primary-blue-light);box-shadow:0 0 var(--spacing-lg) rgba(70,103,240,0.3);transition:all var(--transition-normal) ease;}
.dock-icon.dragged-link {position:relative;}
.dock-toast {position:fixed;top:var(--spacing-lg);right:var(--spacing-lg);padding:var(--spacing-sm) var(--spacing-md);font-size:13px;font-weight:500;background:var(--bg-white-80);backdrop-filter:var(--blur-md);border:1px solid var(--border-light);z-index:calc(var(--z-modal) + 100);opacity:0;transform:translateY(-10px);transition:all var(--transition-normal) ease;max-width:280px;word-wrap:break-word;display:flex;align-items:center;gap:8px;border-radius:var(--radius-sm);}
.dock-toast.show {opacity:1;transform:translateY(0);}
.dock-toast-error {color:#d63031;}
.dock-toast-success {color:#00b894;}
.dock-toast-warning {color:#e17055;}
.dock-toast-info {color:var(--primary-blue-light);}
@media (max-width:600px) {.popup-modal-content {width:95%;max-width:340px;}
.popup-title {font-size:18px;}
.popup-qrcode-container {width:200px;height:200px;}
.popup-tab {padding:8px var(--spacing-md);font-size:13px;}
.popup-info-item {font-size:13px;}
.dock-toast {top:var(--spacing-sm);right:var(--spacing-sm);left:var(--spacing-sm);max-width:none;font-size:12px;}
;}