*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top left,#dff0ff 0,#f6f9ff 32%,#eef4ff 100%);color:#122033;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,"PingFang SC","Microsoft YaHei",sans-serif}.hidden{display:none!important}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e8f2ff,#f8fbff)}.login-card{width:92%;max-width:430px;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border:1px solid rgba(185,211,245,.8);border-radius:30px;padding:34px;box-shadow:0 28px 90px rgba(24,83,158,.18)}.logo{width:60px;height:60px;border-radius:20px;background:linear-gradient(135deg,#1b6dff,#24d3ff);display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;font-weight:900;box-shadow:0 15px 30px rgba(36,123,255,.32)}.logo.small{width:44px;height:44px;border-radius:15px;font-size:22px}.login-card h1{margin:20px 0 6px}.login-card p{margin:0 0 22px;color:#73839a}input,select{height:44px;border:1px solid #d7e4f5;border-radius:14px;padding:0 13px;background:#fbfdff;outline:none;font-size:14px;transition:.18s}input:focus,select:focus{border-color:#2979ff;box-shadow:0 0 0 4px rgba(41,121,255,.12)}.login-card input{width:100%;margin-bottom:12px}button,.btn{height:44px;border:0;border-radius:14px;padding:0 16px;background:linear-gradient(135deg,#2575ff,#12c7ff);color:#fff;font-weight:850;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;box-shadow:0 10px 22px rgba(37,117,255,.18);transition:.16s}button:hover,.btn:hover{transform:translateY(-1px);filter:saturate(1.06)}button:active,.btn:active{transform:translateY(0)}.btn.ghost{background:#eef5ff;color:#24517e;box-shadow:none}.tip{margin-top:14px;color:#7b8aa0;font-size:13px}.app{display:flex;min-height:100vh}.sidebar{width:246px;background:rgba(255,255,255,.86);backdrop-filter:blur(16px);border-right:1px solid rgba(216,229,247,.9);padding:18px;position:fixed;left:0;top:0;bottom:0}.brand{display:flex;align-items:center;gap:12px;margin-bottom:24px;padding:8px}.brand b{display:block}.brand span{display:block;color:#7a8798;font-size:12px}.nav{width:100%;justify-content:flex-start;margin-bottom:10px;background:#f0f6ff;color:#24405f;box-shadow:none}.nav.active{background:linear-gradient(135deg,#2575ff,#12c7ff);color:#fff;box-shadow:0 12px 28px rgba(37,117,255,.22)}.nav.danger{background:#fff0f0;color:#d93025}.main{margin-left:246px;width:calc(100% - 246px);padding:24px}.topbar{background:rgba(255,255,255,.86);backdrop-filter:blur(16px);border:1px solid rgba(216,229,247,.95);border-radius:28px;padding:20px 22px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 16px 42px rgba(26,88,160,.08);margin-bottom:20px}.topbar h1{margin:0 0 5px;font-size:25px;letter-spacing:.2px}.topbar p{margin:0;color:#73839a}.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:20px}.stat{background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid #e0eafa;border-radius:24px;padding:20px;box-shadow:0 14px 36px rgba(26,88,160,.08);position:relative;overflow:hidden}.stat:after{content:"";position:absolute;right:-20px;top:-20px;width:90px;height:90px;border-radius:99px;background:rgba(37,117,255,.08)}.stat .label{color:#61748c;font-weight:800}.stat .num{font-size:34px;font-weight:950;margin-top:10px}.stat .mini{color:#94a3b8;font-size:12px;margin-top:5px}.panel,.card{background:rgba(255,255,255,.9);border:1px solid #e0eafa;border-radius:26px;padding:20px;box-shadow:0 14px 36px rgba(26,88,160,.08);margin-bottom:18px}.panel h2,.toolbar-title h2{margin:0 0 8px}.panel p,.toolbar-title p{color:#6f7f94;line-height:1.7;margin:0}.filter-card{padding:18px}.toolbar-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.toolbar-title span{background:#edf5ff;color:#225b95;border:1px solid #d9eaff;border-radius:999px;padding:9px 13px;font-weight:900;white-space:nowrap}.toolbar{display:flex;gap:10px;flex-wrap:wrap}.toolbar input{min-width:280px;flex:1}.table-wrap{background:#fff;border:1px solid #e2ebf7;border-radius:24px;overflow:auto;box-shadow:0 14px 36px rgba(26,88,160,.08)}table{width:100%;border-collapse:separate;border-spacing:0;min-width:1120px;font-size:13px}th,td{padding:14px 12px;border-bottom:1px solid #edf3fb;text-align:left;vertical-align:middle}th{position:sticky;top:0;background:#f8fbff;color:#51647d;z-index:2}tbody tr{transition:.14s}tbody tr:hover{background:#f8fbff}.mono{font-family:Menlo,Consolas,monospace;word-break:break-all}.keytext{font-weight:800;color:#18375f}.badge,.type-pill{padding:6px 10px;border-radius:99px;font-weight:900;font-size:12px;display:inline-flex}.b-valid{background:#e7fff2;color:#078a3e}.b-unused{background:#f0f3f8;color:#64748b}.b-expired{background:#fff0f0;color:#d93025}.type-pill{background:#eff6ff;color:#2362a3}.actions{display:flex;gap:6px;flex-wrap:wrap}.actions button{height:32px;border-radius:10px;padding:0 10px;box-shadow:none}.btn-gray{background:#eef4fb;color:#24405f;box-shadow:none}.btn-red{background:#fff0f0;color:#d93025;box-shadow:none}.btn-warn{background:#fff7e6;color:#a15c00;box-shadow:none}.pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:14px}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.dangerPanel{border-color:#ffd1d1}.dangerPanel button{background:linear-gradient(135deg,#ff4d4f,#ff8a65)}.modal{position:fixed;inset:0;background:rgba(13,28,48,.48);display:flex;align-items:center;justify-content:center;padding:20px;z-index:99}.modal-card{width:96%;max-width:660px;background:#fff;border-radius:26px;padding:24px;position:relative;box-shadow:0 35px 110px rgba(0,0,0,.25)}.x{position:absolute;right:16px;top:14px;width:36px;height:36px;border-radius:12px;background:#f1f6ff;color:#24405f;padding:0;box-shadow:none}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid label{display:flex;flex-direction:column;gap:6px;color:#5d6e84;font-size:13px;font-weight:800}.form-grid input,.form-grid select{width:100%}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.toast{position:fixed;right:22px;bottom:22px;background:#12233a;color:#fff;padding:14px 18px;border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.18);z-index:120;max-width:420px}.toast.err{background:#b42318}.empty{text-align:center;color:#7b8aa0;padding:30px!important}pre{background:#0f1d31;color:#e7f2ff;padding:16px;border-radius:16px;overflow:auto;line-height:1.7}.bulkbar{display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,.9);border:1px solid #e2ebf7;border-radius:24px;padding:14px;margin:0 0 14px;box-shadow:0 14px 36px rgba(26,88,160,.07)}.bulk-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.bulk-group b{color:#18375f;margin-right:4px}.bulkbar button{height:36px;border-radius:12px;padding:0 12px}.danger-zone{border-top:1px dashed #dbe8f7;padding-top:10px}.checkline{display:inline-flex;align-items:center;gap:8px;color:#24405f;font-weight:850;white-space:nowrap}.checkline input,.key-check{width:18px;height:18px;accent-color:#2979ff}.selcol{width:70px;text-align:center}.selcol input{vertical-align:middle}#selectedInfo{color:#60758f;background:#f3f7ff;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:900}@media(max-width:1000px){.sidebar{position:static;width:100%;height:auto}.app{display:block}.main{margin:0;width:100%;padding:14px}.stats,.grid2{grid-template-columns:1fr}.topbar,.toolbar-title{flex-direction:column;align-items:flex-start}.toolbar input{min-width:100%;width:100%}.bulkbar{align-items:stretch}.bulk-group{align-items:stretch}.bulkbar button,#selectedInfo,.checkline,.bulk-group b{width:100%;justify-content:center}.form-grid{grid-template-columns:1fr}}
/* ===== 2026-04-28 修复与美化：选择框、批量操作区、表格紧凑化 ===== */
.main{padding:28px;background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,0))}
.filter-card,.bulkbar,.table-wrap{border-color:#d8e7fb;box-shadow:0 18px 45px rgba(31,91,160,.10)}
.bulkbar{padding:18px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,251,255,.92));gap:14px}
.bulk-group{padding:10px;border-radius:20px;background:#f7fbff;border:1px solid #edf4ff}
.bulk-group.danger-zone{background:#fffaf8;border-color:#ffe3d8}
.bulk-group b{font-size:15px;min-width:76px}
.bulkbar button{height:40px;border-radius:14px;font-size:13px}
.btn-gray{background:#edf5ff;color:#234462;border:1px solid #dcecff}
.btn-warn{background:linear-gradient(135deg,#1b7cff,#10c8ff)!important;color:#fff!important;box-shadow:0 10px 22px rgba(18,136,255,.20)!important}
.btn-red{background:#fff0f0!important;color:#e02b2b!important;border:1px solid #ffdcdc!important;box-shadow:none!important}
.checkline{height:40px;padding:0 13px;border-radius:14px;background:#eef6ff;border:1px solid #dcecff}
#selectedInfo{height:40px;display:inline-flex;align-items:center;background:#17233a;color:#fff;box-shadow:0 8px 18px rgba(23,35,58,.12)}
.selcol{width:82px;text-align:center!important}.selcol input{position:static!important;opacity:1!important;margin:0!important}
.row-check{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:12px;background:#f0f6ff;border:1px solid #d7e8ff;cursor:pointer;transition:.15s}
.row-check input{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important}
.row-check span{width:18px;height:18px;border-radius:6px;border:2px solid #96b4d8;background:#fff;display:block;position:relative}
.row-check input:checked+span{background:linear-gradient(135deg,#2575ff,#12c7ff);border-color:#2575ff}
.row-check input:checked+span:after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
tbody tr:has(.key-check:checked){background:#edf7ff!important;box-shadow:inset 3px 0 0 #2584ff}
th{font-size:13px;font-weight:950}td{font-size:13px;color:#1d2e45}.actions button{height:34px;font-weight:900}.toolbar input,.toolbar select{background:#fff}.toolbar button,.toolbar .btn{height:44px;border-radius:15px}.modal-card{border:1px solid #e3edfb}.form-actions button{min-width:110px}
@media(max-width:1000px){.bulk-group b{min-width:auto}.checkline{justify-content:center}.row-check{width:42px;height:42px}}

/* 选择框统一美化 + 每页数量 */
select{
  -webkit-appearance:none;
  appearance:none;
  min-width:150px;
  height:46px;
  padding:0 44px 0 16px;
  border:1px solid #d8e6f7;
  border-radius:16px;
  background-color:rgba(255,255,255,.96);
  background-image:
    linear-gradient(45deg, transparent 50%, #2f6fe4 50%),
    linear-gradient(135deg, #2f6fe4 50%, transparent 50%),
    linear-gradient(135deg, rgba(37,117,255,.10), rgba(18,199,255,.10));
  background-position:
    calc(100% - 23px) 20px,
    calc(100% - 16px) 20px,
    right 9px center;
  background-size:7px 7px,7px 7px,30px 30px;
  background-repeat:no-repeat;
  color:#18375f;
  font-size:14px;
  font-weight:850;
  box-shadow:0 10px 24px rgba(26,88,160,.07);
  cursor:pointer;
}
select:hover{border-color:#8bbcff;box-shadow:0 12px 28px rgba(37,117,255,.13);transform:translateY(-1px)}
select:focus{border-color:#2979ff;box-shadow:0 0 0 4px rgba(41,121,255,.13),0 12px 28px rgba(37,117,255,.12)}
select option{font-size:14px;color:#18375f;background:#fff;font-weight:700;padding:10px}
#statusFilter,#typeFilter,#pageSizeFilter{min-width:150px;background-color:#fff}
#pageSizeFilter{min-width:158px;border-color:#b9d6ff;background-color:#f8fbff;color:#1756a9}
.toolbar{align-items:center}.toolbar input{height:46px;border-radius:16px;background:#fff;font-weight:750}.toolbar input::placeholder{color:#8da1ba}.toolbar button,.toolbar .btn{height:46px;border-radius:16px}
.form-grid select{min-width:100%;height:46px}
.pager button{height:40px;border-radius:13px}.pager #pageInfo{min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.9);border:1px solid #dfeafa;color:#24405f;font-weight:900;box-shadow:0 8px 20px rgba(26,88,160,.06)}
@media(max-width:1000px){select,#statusFilter,#typeFilter,#pageSizeFilter{width:100%;min-width:100%}}

/* 添加卡密弹窗：单张/批量生成美化 */
.tabs{display:flex;gap:10px;margin:4px 0 18px;padding:6px;background:#f1f7ff;border:1px solid #dbeaff;border-radius:18px}
.tab{flex:1;height:42px;border-radius:14px;background:transparent;color:#31506f;box-shadow:none;border:0;font-weight:950}
.tab.active{background:linear-gradient(135deg,#2575ff,#12c7ff);color:#fff;box-shadow:0 10px 22px rgba(37,117,255,.22)}
.nice-form{background:linear-gradient(180deg,#fbfdff,#f6faff);border:1px solid #e0ebfb;border-radius:20px;padding:16px}
.form-note{margin-bottom:14px;padding:12px 14px;border-radius:16px;background:#eef7ff;color:#31506f;border:1px solid #dcecff;line-height:1.65;font-size:13px}
.form-note b{color:#1769d8}
.gen-result{margin-top:14px;border:1px solid #dfeafa;border-radius:18px;background:#fbfdff;overflow:hidden}
.gen-title{padding:12px 14px;background:#f2f8ff;border-bottom:1px solid #dfeafa;color:#18375f;font-weight:950}
.gen-result pre{margin:0;border-radius:0;max-height:320px;background:#0f1d31;color:#dff2ff;font-size:13px}
#genForm input[name="prefix"]{text-transform:uppercase;font-weight:900;letter-spacing:.5px}
#genForm input[name="count"],#genForm input[name="length"]{font-weight:900;color:#18375f}
.modal-card{max-height:92vh;overflow:auto}
#createTabs + .tab-panels .nice-form{min-height:100%;display:flex;flex-direction:column}
#createTabs + .tab-panels .nice-form .form-actions{margin-top:auto}
#createTabs + .tab-panels .gen-result pre{max-height:210px}
@media(max-width:700px){#createTabs + .tab-panels{height:620px;min-height:620px}}
@media(max-width:700px){.tabs{flex-direction:column}.tab{width:100%}}

/* 高危删除确认：超过 10 条必须等待 5 秒 */
.danger-confirm{text-align:center;padding:8px 4px 2px}.danger-icon{width:58px;height:58px;margin:0 auto 12px;border-radius:20px;background:#fff0f0;color:#e02b2b;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:1000;border:1px solid #ffd8d8}.danger-confirm h3{margin:0 0 10px;color:#16233a;font-size:22px}.danger-confirm p{white-space:pre-line;line-height:1.75;color:#5d6e84;margin:8px 0}.danger-warn{background:#fff7e6;border:1px solid #ffe0a6;border-radius:16px;padding:12px 14px;color:#9a5a00!important;font-weight:900}.danger-confirm button:disabled{opacity:.65;cursor:not-allowed;filter:grayscale(.25);box-shadow:none!important}

/* 统一替换系统 confirm/prompt 弹窗：弹入/弹出动画 */
.modal{animation:modalFadeIn .18s ease-out both;backdrop-filter:blur(8px)}
.modal.modal-closing{animation:modalFadeOut .18s ease-in both}
.modal .modal-card{animation:modalPopIn .22s cubic-bezier(.2,.9,.2,1.1) both;transform-origin:center}
.modal.modal-closing .modal-card{animation:modalPopOut .18s ease-in both}
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}
@keyframes modalPopIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes modalPopOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(16px) scale(.96)}}
.custom-dialog{text-align:center;padding:8px 4px 2px}.custom-dialog .dialog-icon{width:62px;height:62px;margin:0 auto 14px;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:1000;border:1px solid #dcecff;background:linear-gradient(135deg,#eef7ff,#f8fbff);color:#2575ff;box-shadow:0 12px 28px rgba(37,117,255,.12)}
.custom-dialog.warn .dialog-icon{background:#fff7e6;color:#a15c00;border-color:#ffe0a6}.custom-dialog.danger .dialog-icon{background:#fff0f0;color:#e02b2b;border-color:#ffd8d8}.custom-dialog h3{margin:0 0 10px;color:#16233a;font-size:22px;font-weight:1000}.custom-dialog p{white-space:pre-line;line-height:1.75;color:#5d6e84;margin:8px auto 14px;max-width:560px}.custom-dialog.prompt input{width:100%;max-width:420px;height:48px;border-radius:16px;text-align:center;font-size:16px;font-weight:900;margin-top:6px}.custom-dialog .form-actions{justify-content:center;margin-top:20px}.custom-dialog .form-actions button{min-width:128px}.modal-card h2{padding-right:42px}.x{transition:.18s}.x:hover{transform:rotate(90deg);background:#e9f3ff}


/* ===== 细节动画增强：添加卡密弹窗 / 表单 / 按钮 / 表格 ===== */
.tabs{position:relative;overflow:hidden;transition:box-shadow .25s ease,border-color .25s ease,background .25s ease;}
.tabs::before{content:"";position:absolute;left:8px;top:8px;width:calc(50% - 8px);height:calc(100% - 16px);border-radius:16px;background:linear-gradient(135deg,#2575ff,#10c8ff);box-shadow:0 16px 34px rgba(37,117,255,.28);transform:translateX(0);transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .25s ease;z-index:0;}
.tabs.tab-many::before{transform:translateX(calc(100% + 0px));}
.tabs .tab{position:relative;z-index:1;transition:color .22s ease,transform .22s ease,background .22s ease,box-shadow .22s ease;}
.tabs .tab.active{background:transparent!important;box-shadow:none!important;color:#fff;transform:translateY(-1px)}
.tabs .tab:not(.active):hover{background:rgba(255,255,255,.55);transform:translateY(-1px)}
.tab-panels{position:relative;height:520px;min-height:520px;overflow:hidden;border-radius:22px;}
.tab-panel{position:absolute;inset:0;overflow:auto;padding:1px;animation:panelSlideUpIn .34s cubic-bezier(.22,1,.36,1) both;will-change:transform,opacity,filter;}
.tab-panel.active{z-index:2;}
.tab-panel.leaving{z-index:1;animation:panelPushUpOut .26s cubic-bezier(.4,0,.2,1) both;pointer-events:none;}
.tab-panel::-webkit-scrollbar{width:8px}.tab-panel::-webkit-scrollbar-thumb{background:#c8dcf8;border-radius:999px}.tab-panel::-webkit-scrollbar-track{background:transparent}
@keyframes panelSlideUpIn{0%{opacity:0;transform:translateY(88px) scale(.985);filter:blur(4px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes panelPushUpOut{0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}100%{opacity:0;transform:translateY(-88px) scale(.985);filter:blur(4px)}}
button,.btn,.nav,.stat,.table-wrap,.filter-card,.bulkbar,.nice-form,.modal-card,.row-check,.badge,.type-pill{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,opacity .18s ease,color .18s ease;}
button:hover,.btn:hover{transform:translateY(-2px);}button:active,.btn:active{transform:translateY(0) scale(.985);}
.nice-form:hover,.filter-card:hover,.bulkbar:hover{border-color:#bdd8ff;box-shadow:0 22px 50px rgba(31,91,160,.12)}
.form-grid label{transition:transform .2s ease,color .2s ease;}.form-grid label:focus-within{transform:translateY(-2px);color:#1769d8;}
input,select,textarea{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;}
input:focus,textarea:focus{transform:translateY(-1px);box-shadow:0 0 0 4px rgba(41,121,255,.12),0 12px 28px rgba(37,117,255,.10)!important;border-color:#2979ff!important;}
select:active{transform:translateY(0) scale(.99)}
tbody tr{transition:background .18s ease,transform .18s ease,box-shadow .18s ease;}tbody tr:hover{background:#f7fbff;transform:translateX(2px);box-shadow:inset 3px 0 0 rgba(37,132,255,.28)}
.row-check:hover{transform:scale(1.06);box-shadow:0 10px 22px rgba(37,117,255,.12)}.row-check input:checked+span{animation:checkPop .2s cubic-bezier(.22,1.4,.36,1) both;}
@keyframes checkPop{0%{transform:scale(.7)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.toast{animation:toastIn .22s cubic-bezier(.22,1,.36,1) both;}@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.gen-result{animation:panelIn .24s cubic-bezier(.22,1,.36,1) both;}
.modal-card::-webkit-scrollbar{width:8px}.modal-card::-webkit-scrollbar-thumb{background:#c8dcf8;border-radius:999px}.modal-card::-webkit-scrollbar-track{background:transparent}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}