.pak-card {border-radius: 16px;overflow: hidden;position: relative;transition: box-shadow 0.22s ease, transform 0.22s ease;}.pak-card::before {content: '';position: absolute;left: 0;top: 12%;bottom: 12%;width: 3px;border-radius: 0 3px 3px 0;background: linear-gradient(180deg, #763CD4, #E22861);opacity: 0;transition: opacity 0.22s ease, width 0.22s ease;}.pak-card:hover {box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);transform: translateY(-1px);}.pak-card:hover::before {opacity: 1;width: 4px;}.pak-card--connected {box-shadow: 0 2px 10px rgba(118, 60, 212, 0.08);}.pak-card--connected::before {opacity: 0.7;width: 4px;}.dark .pak-card:hover {box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);}.pak-card-header {display: flex;align-items: center;background: none;border: none;cursor: pointer;outline: none;-webkit-tap-highlight-color: transparent;user-select: none;transition: background 0.15s ease;}.pak-card-header:hover {background: rgba(118, 60, 212, 0.025);}.dark .pak-card-header:hover {background: rgba(255, 255, 255, 0.025);}.pak-icon-wrap {background: #f5f5f7;border: 1px solid #ebebef;transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);}.pak-card-header:hover .pak-icon-wrap {transform: scale(1.07);}.pak-icon-wrap--connected {background: linear-gradient(135deg, #f3f0ff, #faf0ff);border-color: rgba(118, 60, 212, 0.15);}.dark .pak-icon-wrap {background: #1e1e1e;border-color: #3a3a3a;}.dark .pak-icon-wrap--connected {background: linear-gradient(135deg, #1e1630, #1e1e1e);border-color: rgba(118, 60, 212, 0.22);}.pak-badge {display: inline-flex;align-items: center;gap: 4px;padding: 2px 8px;border-radius: 100px;font-size: 10.5px;font-weight: 600;line-height: 1.6;letter-spacing: 0.01em;}.pak-badge-dot {display: inline-block;width: 5px;height: 5px;border-radius: 50%;background: currentColor;}.pak-badge--connected {background: rgba(16, 185, 129, 0.09);color: #059669;border: 1px solid rgba(16, 185, 129, 0.20);}.dark .pak-badge--connected {background: rgba(16, 185, 129, 0.12);color: #34d399;border-color: rgba(52, 211, 153, 0.22);}.pak-badge--empty {background: rgba(137, 137, 137, 0.07);color: #898989;border: 1px solid rgba(137, 137, 137, 0.13);}.dark .pak-badge--empty {background: rgba(255, 255, 255, 0.05);color: rgba(255, 255, 255, 0.28);border-color: rgba(255, 255, 255, 0.07);}.pak-chevron {display: flex;align-items: center;justify-content: center;width: 26px;height: 26px;border-radius: 7px;color: #c4c4cc;transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), background 0.18s ease, color 0.18s ease;flex-shrink: 0;}.pak-card-header:hover .pak-chevron {background: rgba(118, 60, 212, 0.07);color: #763CD4;}.dark .pak-chevron {color: rgba(255, 255, 255, .22);}.dark .pak-card-header:hover .pak-chevron {background: rgba(118, 60, 212, 0.14);color: #a78bfa;}.pak-chevron--open {transform: rotate(180deg);}.pak-card-body {display: grid;grid-template-rows: 0fr;transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;opacity: 0;}.pak-card-body--open {grid-template-rows: 1fr;opacity: 1;}.pak-card-body-inner {overflow: hidden;min-height: 0;}.pak-input-icon {position: absolute;left: 13px;top: 50%;transform: translateY(-50%);color: #c4c4cc;display: flex;align-items: center;pointer-events: none;line-height: 0;}.dark .pak-input-icon {color: rgba(255, 255, 255, .22);}.pak-key-input {height: 44px;padding: 0 44px;font-size: 13px;font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;letter-spacing: 0.05em;transition: border-color 0.2s ease, box-shadow 0.2s ease;}.pak-key-input::placeholder {font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;letter-spacing: 0.04em;opacity: 0.38;}.pak-key-input:focus {border-color: #763CD4 !important;box-shadow: 0 0 0 3px rgba(118, 60, 212, 0.10);}.pak-eye-btn {position: absolute;right: 12px;top: 50%;transform: translateY(-50%);background: none;border: none;cursor: pointer;padding: 4px;border-radius: 6px;color: #c4c4cc;display: flex;align-items: center;justify-content: center;transition: color 0.15s ease, background 0.15s ease;line-height: 0;}.pak-eye-btn:hover {color: #763CD4;background: rgba(118, 60, 212, 0.07);}.dark .pak-eye-btn {color: rgba(255, 255, 255, .25);}.dark .pak-eye-btn:hover {color: #a78bfa;background: rgba(118, 60, 212, 0.12);}input[type="password"]::-ms-reveal,input[type="password"]::-ms-clear{display:none;}