:root{--bg:#fff;--bg2:#f8f9fa;--bg-card:#fff;--bg-hover:#f5f6f8;--bg-input:#f5f6f8;--border:#e2e5ea;--border-focus:#4a7fe0;--text1:#1a1a2e;--text2:#5a6078;--text3:#9ca3b4;--accent:#4a7fe0;--accent-h:#3a6fd0;--warm:#e8943a;--ok:#3dae7e;--err:#d95050;--err-h:#c44040;--r-sm:6px;--r-md:10px;--r-lg:16px;--shadow:0 2px 12px rgba(0,0,0,.06);--shadow-lg:0 4px 24px rgba(0,0,0,.08);--ease:.2s ease;--sans:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg2);color:var(--text1);line-height:1.6;min-height:100vh}
a{color:var(--accent);cursor:pointer;text-decoration:none}
a:hover{color:var(--accent-h)}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:0 2rem;height:56px;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.nav-brand{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:1.25rem;font-weight:700;color:var(--accent)}
.brand-icon{font-size:1.4rem;animation:twinkle 2s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.9)}}
.nav-links{display:flex;gap:.5rem}
.nav-link{padding:6px 16px;border-radius:var(--r-sm);color:var(--text2);cursor:pointer;font-size:.9rem;transition:all var(--ease)}
.nav-link:hover{color:var(--text1);background:rgba(74,127,224,.06)}
.nav-link.active{color:var(--accent);background:rgba(74,127,224,.08)}
.nav-user{display:flex;align-items:center;gap:.75rem}
.user-name{color:var(--text1);font-weight:500;font-size:.9rem}
.user-badge{background:linear-gradient(135deg,#4a7fe0,#7c5ce0);color:#fff;padding:2px 8px;border-radius:20px;font-size:.7rem;font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 20px;border-radius:var(--r-sm);border:none;font-size:.9rem;font-weight:500;cursor:pointer;transition:all var(--ease);font-family:inherit;gap:6px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-h)}
.btn-outline{background:transparent;color:var(--accent);border:1px solid var(--accent)}.btn-outline:hover:not(:disabled){background:rgba(74,127,224,.06)}
.btn-ghost{background:transparent;color:var(--text2)}.btn-ghost:hover:not(:disabled){color:var(--text1);background:rgba(0,0,0,.04)}
.btn-danger{background:var(--err);color:#fff}.btn-danger:hover:not(:disabled){background:var(--err-h)}
.btn-sm{padding:4px 12px;font-size:.8rem}
.btn-block{width:100%}
.auth-container{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem;background:linear-gradient(160deg,#f0f4ff 0%,#fff 40%,#fff8f0 100%)}
.auth-logo{text-align:center;font-size:3rem;margin-bottom:.5rem;animation:breathe 3s ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(74,127,224,.2))}
@keyframes breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}
.auth-desc{text-align:center;color:var(--text2);margin-bottom:2rem;font-size:.9rem}
.auth-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:2.5rem;width:100%;max-width:420px;box-shadow:var(--shadow-lg)}
.auth-card h2{text-align:center;margin-bottom:.5rem;font-size:1.5rem}
.auth-switch{text-align:center;margin-top:1.5rem;color:var(--text2);font-size:.9rem}
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;margin-bottom:.4rem;font-size:.85rem;color:var(--text2);font-weight:500}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text1);font-size:.9rem;font-family:inherit;transition:border-color var(--ease);outline:none}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px rgba(74,127,224,.1)}
.form-group textarea{resize:vertical;min-height:80px}
.form-error{color:var(--err);font-size:.85rem;margin-bottom:1rem;padding:8px 12px;background:rgba(217,80,80,.06);border-radius:var(--r-sm)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-hint{font-size:.78rem;color:var(--text3);margin-left:4px}
.container{max-width:1200px;margin:0 auto;padding:2rem}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}
.page-header h2{font-size:1.5rem}
.sheet-wrapper{background:rgba(255,255,255,.75);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.sheet-scroll{overflow-x:auto;overflow-y:auto;max-height:calc(100vh - 220px)}
.sheet-table{width:100%;border-collapse:collapse;font-size:.85rem;table-layout:fixed}
.sheet-table th{position:sticky;top:0;z-index:10;background:rgba(244,246,249,.8);padding:0;text-align:left;font-weight:600;color:var(--text2);font-size:.8rem;white-space:nowrap;border-bottom:2px solid var(--border);user-select:none;overflow:hidden}
.sheet-table th:last-child{}
.sheet-table th .th-inner{display:flex;align-items:center;gap:4px;padding:10px 10px;cursor:pointer;transition:background .15s}
.sheet-table th .th-inner:hover{background:rgba(74,127,224,.05)}
.sheet-table th.col-row-num .th-inner{cursor:default;justify-content:center;padding:10px 6px;color:var(--text3)}
.sheet-table th.col-row-num{width:36px;min-width:36px;background:rgba(237,240,245,.8)}
.sheet-table th:nth-child(2){width:110px}.sheet-table th:nth-child(3){width:50px}.sheet-table th:nth-child(4){width:50px}.sheet-table th:nth-child(5){width:70px}.sheet-table th:nth-child(6){width:70px}.sheet-table th:nth-child(7){width:65px}.sheet-table th:nth-child(8){width:100px}.sheet-table th:nth-child(9){width:auto;min-width:140px}.sheet-table th:nth-child(10){width:80px}.sheet-table th:nth-child(11){width:100px}.sheet-table th:nth-child(12){width:80px}
.sheet-table td{padding:8px 10px;border-bottom:1px solid #f0f1f5;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-table td:last-child{}
.sheet-table td.col-row-num{text-align:center;color:var(--text3);font-size:.75rem;background:rgba(250,251,252,.5);padding:8px 6px}
.sheet-table tbody tr:nth-child(even) td{background:rgba(250,251,253,.5)}
.sheet-table tbody tr:nth-child(odd) td{background:rgba(255,255,255,.5)}
.sheet-table tbody tr:hover td{background:rgba(74,127,224,.04)!important}
.sheet-table tbody tr:last-child td{border-bottom:none}
.th-sort{display:inline-flex;flex-direction:column;margin-left:2px;line-height:0}
.th-sort::before,.th-sort::after{content:'';display:block;width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent}
.th-sort::before{border-bottom:4px solid #c8cdd6;margin-bottom:1px}
.th-sort::after{border-top:4px solid #c8cdd6}
.th-sort.asc::before{border-bottom-color:var(--accent)}
.th-sort.desc::after{border-top-color:var(--accent)}
.th-filter{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:3px;color:var(--text3);cursor:pointer;transition:all .15s;flex-shrink:0}
.th-filter:hover{background:rgba(74,127,224,.08);color:var(--accent)}
.th-filter.active{color:var(--warm);background:rgba(232,148,58,.1)}
.global-tip{position:fixed;z-index:9999;background:#fff;border:1px solid var(--border);border-radius:8px;padding:10px 14px;box-shadow:0 4px 20px rgba(0,0,0,.12);max-width:320px;white-space:pre-wrap;word-break:break-all;font-size:.85rem;line-height:1.5;color:var(--text1);pointer-events:none}
.filter-dropdown{position:fixed;z-index:500;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 8px 32px rgba(0,0,0,.1);min-width:220px;max-height:360px;display:flex;flex-direction:column;animation:filterDropIn .15s ease}
@keyframes filterDropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.filter-dropdown-header{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.filter-dropdown-header input{flex:1;padding:6px 10px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text1);font-size:.82rem;outline:none;font-family:inherit}
.filter-dropdown-header input:focus{border-color:var(--border-focus)}
.filter-dropdown-actions{display:flex;gap:6px}
.filter-dropdown-actions button{padding:4px 10px;border-radius:var(--r-sm);border:none;font-size:.78rem;cursor:pointer;font-family:inherit;transition:all .15s}
.filter-btn-select-all{background:rgba(74,127,224,.08);color:var(--accent)}.filter-btn-select-all:hover{background:rgba(74,127,224,.15)}
.filter-btn-clear{background:rgba(217,80,80,.06);color:var(--err)}.filter-btn-clear:hover{background:rgba(217,80,80,.12)}
.filter-dropdown-list{overflow-y:auto;max-height:260px;padding:6px 0}
.filter-item{display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;transition:background .1s;font-size:.84rem;color:var(--text1)}
.filter-item:hover{background:rgba(74,127,224,.05)}
.filter-item input[type="checkbox"]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer;flex-shrink:0}
.filter-item .filter-item-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter-item .filter-item-count{font-size:.72rem;color:var(--text3);flex-shrink:0}
.filter-toolbar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.search-box{position:relative;display:flex;align-items:center}
.search-icon{position:absolute;left:12px;color:var(--text3);pointer-events:none}
.search-box input{padding:8px 16px 8px 34px;background:var(--bg-card);border:1px solid var(--border);border-radius:20px;color:var(--text1);font-size:.88rem;width:240px;outline:none;font-family:inherit;transition:border-color .2s}
.search-box input:focus{border-color:var(--border-focus)}
.active-filters{display:flex;gap:6px;flex-wrap:wrap}
.filter-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;background:rgba(232,148,58,.08);border:1px solid rgba(232,148,58,.2);border-radius:14px;font-size:.76rem;color:var(--warm);cursor:pointer;transition:all .15s}
.filter-tag:hover{background:rgba(232,148,58,.14)}
.filter-tag .filter-tag-close{font-size:1rem;line-height:1;opacity:.7}.filter-tag:hover .filter-tag-close{opacity:1}
.sheet-status-bar{display:flex;align-items:center;gap:1rem;padding:8px 16px;background:rgba(250,251,253,.6);border-top:1px solid rgba(255,255,255,.3);font-size:.78rem;color:var(--text3)}
.sheet-status-bar #sheet-filter-count{color:var(--warm)}
.table-wrapper{overflow-x:auto;background:rgba(255,255,255,.75);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:var(--r-lg)}
.data-table{width:100%;border-collapse:collapse;font-size:.88rem}
.data-table th{background:rgba(244,246,249,.8);padding:12px 16px;text-align:left;font-weight:600;color:var(--text2);font-size:.82rem;white-space:nowrap;border-bottom:1px solid var(--border)}
.data-table td{padding:12px 16px;border-bottom:1px solid #f0f1f5;vertical-align:middle}
.data-table tr:hover td{background:rgba(74,127,224,.06)}
.data-table tr:last-child td{border-bottom:none}
.empty-text{text-align:center!important;color:var(--text3)!important;padding:3rem!important}
.cell-images{display:flex;gap:4px}
.cell-img-thumb{width:36px;height:36px;border-radius:4px;object-fit:cover;cursor:pointer;border:1px solid var(--border);transition:transform var(--ease)}
.cell-img-thumb:hover{transform:scale(1.15)}
.cell-tag{display:inline-block;padding:2px 8px;border-radius:12px;font-size:.78rem;font-weight:500}
.tag-male{background:rgba(74,127,224,.1);color:#3a6fd0}
.tag-female{background:rgba(216,100,140,.1);color:#c8508a}
.tag-other{background:rgba(124,92,224,.1);color:#6a4fd0}
.tag-card-male{background:rgba(74,127,224,.08);color:#3a6fd0}
.tag-card-female{background:rgba(216,100,140,.08);color:#c8508a}
.tag-card-none{background:rgba(61,174,126,.08);color:#2d8e60}
.profile-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem;margin-bottom:1.5rem}
.profile-section h3{margin-bottom:1.5rem;font-size:1.1rem;color:var(--accent)}
.no-profile{text-align:center;padding:3rem;color:var(--text2)}
.no-profile p{margin-bottom:1.5rem}
.image-upload-area{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
.image-item{position:relative;width:100px;height:100px}
.image-item img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--border)}
.image-item .img-delete{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--err);color:#fff;border:none;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.upload-placeholder{position:relative;overflow:hidden;width:100px;height:100px;border:2px dashed var(--border);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);font-size:2rem;transition:all var(--ease)}
.upload-placeholder:hover{border-color:var(--accent);color:var(--accent)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;padding:2rem}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);max-width:640px;width:100%;max-height:80vh;overflow-y:auto;padding:2rem;position:relative}
.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--text2);font-size:1.5rem;cursor:pointer}
.modal-close:hover{color:var(--text1)}
.profile-detail-header{display:flex;gap:1.5rem;margin-bottom:1.5rem;align-items:center}
.profile-detail-header .nickname{font-size:1.3rem;font-weight:700}
.profile-detail-header .meta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.3rem}
.detail-images{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.detail-images img{width:120px;height:120px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--border);cursor:pointer;transition:transform var(--ease)}
.detail-images img:hover{transform:scale(1.05)}
.detail-field{margin-bottom:1rem}
.detail-field .label{font-size:.82rem;color:var(--text3);margin-bottom:.3rem}
.detail-field .value{color:var(--text1)}
.admin-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem}
.admin-tab{padding:8px 20px;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);border-radius:var(--r-sm);color:var(--text2);cursor:pointer;font-family:inherit;font-size:.9rem;transition:all var(--ease)}
.admin-tab:hover{color:var(--text1)}
.admin-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
#toast-container{position:fixed;top:80px;right:20px;z-index:999;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 20px;border-radius:var(--r-sm);color:#fff;font-size:.9rem;animation:slideIn .3s ease;box-shadow:var(--shadow);min-width:200px}
.toast-success{background:var(--ok)}.toast-error{background:var(--err)}.toast-info{background:var(--accent)}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:6px;z-index:110}
.hamburger span{display:block;width:22px;height:2px;background:var(--text1);border-radius:2px;transition:all .3s}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.mobile-menu{display:none;position:fixed;top:56px;left:0;right:0;background:var(--bg-card);border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg);z-index:99;padding:8px 0;animation:slideDown .2s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.mobile-menu-link{display:block;padding:14px 24px;color:var(--text1);font-size:1rem;cursor:pointer;transition:background .15s}
.mobile-menu-link:hover{background:var(--bg-hover)}
.mobile-menu-link.active{color:var(--accent);background:rgba(74,127,224,.06)}
.mobile-menu-danger{color:var(--err)!important}
.mobile-menu-divider{height:1px;background:var(--border);margin:6px 0}
.mobile-cards{display:none}
.mobile-filter-bar{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0;margin-bottom:4px;align-items:center}
.mf-group{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.mf-label{font-size:.75rem;color:var(--text3);margin-right:2px;flex-shrink:0}
.mf-chip{padding:4px 12px;border-radius:14px;border:1px solid var(--border);background:var(--bg-card);color:var(--text2);font-size:.78rem;cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap}
.mf-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.mf-chip:hover:not(.active){border-color:var(--accent);color:var(--accent)}
.mf-date{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.mf-date input{padding:3px 6px;border:1px solid var(--border);border-radius:4px;font-size:.75rem;width:110px;font-family:inherit;outline:none}
.mf-date input:focus{border-color:var(--border-focus)}
.mobile-status-bar{padding:6px 0;font-size:.82rem;color:var(--text3)}
.profile-card{background:rgba(255,255,255,.72);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:var(--r-md);padding:14px;margin-bottom:10px;transition:box-shadow .2s}
.profile-card:active{box-shadow:var(--shadow)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.card-nickname{font-weight:700;font-size:1rem}
.card-username{font-size:.78rem;color:var(--text3);margin-left:6px}
.card-tags{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.card-info-row{display:flex;flex-wrap:wrap;gap:4px 14px;margin-bottom:8px;font-size:.85rem;color:var(--text2)}
.card-info-row .info-label{color:var(--text3);font-size:.8rem}
.card-intro{font-size:.84rem;color:var(--text2);line-height:1.5;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-images{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.card-images img{width:60px;height:60px;object-fit:cover;border-radius:6px;cursor:pointer;border:1px solid var(--border)}
.card-footer{display:flex;align-items:center;justify-content:space-between;font-size:.76rem;color:var(--text3)}
.card-actions{display:flex;gap:6px}
.card-actions .btn-sm{padding:3px 10px;font-size:.76rem}
.mobile-filter-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:490}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:300;display:flex;align-items:center;justify-content:center;cursor:pointer}
.lightbox img{max-width:90%;max-height:90%;object-fit:contain;border-radius:var(--r-md)}
@media(max-width:768px){
.hamburger{display:flex}
.nav-links,.nav-user{display:none!important}
.navbar{padding:0 1rem}
.container{padding:1rem .75rem}
.form-row{grid-template-columns:1fr}
.auth-container{padding:1rem}
.auth-card{padding:1.5rem 1.25rem;max-width:100%}
.auth-logo{font-size:2.5rem}
.auth-card h2{font-size:1.25rem}
.sheet-wrapper{display:none!important}
.mobile-cards{display:block!important}
.filter-toolbar{width:100%}
.search-box input{width:100%}
.search-box{width:100%}
.page-header{flex-direction:column;align-items:stretch}
.page-header h2{font-size:1.25rem}
.profile-section{padding:1rem}
.profile-section h3{font-size:1rem}
.modal-overlay{padding:0;align-items:flex-end}
.modal{max-width:100%;border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:85vh;padding:1.5rem 1.25rem}
.modal-close{top:.75rem;right:.75rem}
.detail-images img{width:80px;height:80px}
.filter-dropdown{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:100%!important;max-height:60vh;border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -4px 24px rgba(0,0,0,.12)}
.image-item{width:80px;height:80px}
.upload-placeholder{position:relative;overflow:hidden;width:80px;height:80px}
.admin-tabs{gap:.25rem}
.admin-tab{padding:6px 14px;font-size:.85rem}
.data-table th,.data-table td{padding:8px 10px;font-size:.82rem}
#toast-container{top:70px;right:10px;left:10px}
.toast{min-width:auto;font-size:.85rem;padding:10px 16px}
}
@media(max-width:400px){
.card-images img{width:52px;height:52px}
.card-info-row{gap:4px 10px}
.mf-chip{padding:3px 10px;font-size:.74rem}
}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#d0d4dc;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#b0b6c2}

/* 手机端触摸特效样式 */
.tap-sparkle{
  position:fixed;z-index:99999;pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,230,100,1),rgba(255,190,60,.8),rgba(255,160,40,.3),transparent);box-shadow:0 0 4px rgba(255,220,100,.8);
  animation:tapBurst .65s ease-out forwards;
}
@keyframes tapBurst{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}
}
.swipe-trail{
  position:fixed;z-index:99998;pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(130,180,255,1),rgba(100,160,255,.8),rgba(80,140,255,.4),transparent);
  box-shadow:0 0 8px rgba(100,160,255,.8),0 0 18px rgba(80,140,255,.5);
  animation:trailFade 1s ease-out forwards;
}
@keyframes trailFade{
  0%{transform:scale(1);opacity:1}
  60%{opacity:.5}
  100%{transform:scale(.3);opacity:0}
}