/* ====== 基础 ====== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,system-ui,sans-serif;background:#070b1e;color:#c0c8d8;font-size:13px;min-height:100vh;display:flex;flex-direction:column}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;outline:none;font-family:inherit;-webkit-tap-highlight-color:transparent}
input,select,textarea{font-family:inherit;outline:none}
.hidden{display:none!important}

/* ====== 顶部导航 ====== */
.topbar{background:rgba(8,16,50,.9);border-bottom:1px solid rgba(0,180,255,.1);position:sticky;top:0;z-index:100;backdrop-filter:blur(8px)}
.topbar-inner{max-width:1200px;margin:0 auto;padding:0 16px;height:50px;display:flex;align-items:center;gap:16px}
.logo{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:#00d4ff;text-shadow:0 0 8px rgba(0,212,255,.3)}
.logo i{font-size:18px}
.search-box{position:relative;flex:1;max-width:320px}
.search-box i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#3a5070;font-size:12px}
.search-box input{width:100%;padding:7px 10px 7px 32px;background:rgba(255,255,255,.04);border:1px solid rgba(0,180,255,.12);border-radius:4px;color:#c0c8d8;font-size:12px}
.search-box input:focus{border-color:rgba(0,180,255,.35)}
.search-box input::placeholder{color:#3a5070}
.topbar-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.btn-login,.btn-register{padding:5px 14px;border-radius:4px;font-size:12px}
.btn-login{background:rgba(0,180,255,.08);color:#00b4ff;border:1px solid rgba(0,180,255,.2)}
.btn-register{background:rgba(0,200,255,.1);color:#00d4ff;border:1px solid rgba(0,200,255,.25)}
.user-info{display:flex;align-items:center;gap:8px}
.username{color:#5a7a9a;font-size:12px}
.vip-badge{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:1px 6px;border-radius:3px;font-size:10px;font-weight:600}
.btn-vip{background:rgba(245,158,11,.1);color:#f59e0b;padding:4px 8px;border-radius:4px;font-size:12px}
.btn-logout{background:rgba(255,82,82,.1);color:#ff5252;padding:4px 8px;border-radius:4px;font-size:12px}

/* ====== 分类导航 ====== */
.category-nav{background:rgba(8,16,50,.7);border-bottom:1px solid rgba(0,180,255,.06);padding:10px 0}
.category-list{max-width:1200px;margin:0 auto;padding:0 16px;display:flex;gap:6px;overflow-x:auto}
.cat-item{display:flex;align-items:center;gap:5px;padding:6px 14px;border-radius:4px;font-size:12px;color:#5a7a9a;white-space:nowrap;cursor:pointer;transition:all .2s;border:1px solid transparent}
.cat-item:hover{color:#c0c8d8;background:rgba(0,180,255,.04)}
.cat-item.active{color:#00d4ff;background:rgba(0,180,255,.1);border-color:rgba(0,180,255,.3)}

/* ====== 工具网格 ====== */
.main{flex:1;max-width:1200px;margin:0 auto;padding:16px;width:100%}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.tool-card{background:rgba(8,16,50,.65);border:1px solid rgba(0,180,255,.1);border-radius:6px;padding:20px 16px;text-align:center;cursor:pointer;transition:all .3s;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.tool-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,.2),transparent)}
.tool-card:hover{border-color:rgba(0,180,255,.3);transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,120,255,.15)}
.tool-card:active{transform:translateY(0);box-shadow:none;border-color:rgba(0,180,255,.15)}
.tool-card.vip-card{border-color:rgba(245,158,11,.2);background:rgba(245,158,11,.03)}
.tool-card.vip-card::before{background:linear-gradient(90deg,transparent,rgba(245,158,11,.3),transparent)}
.tool-card.vip-card:hover{border-color:rgba(245,158,11,.4);box-shadow:0 4px 20px rgba(245,158,11,.15)}
.tool-icon{width:44px;height:44px;margin:0 auto 10px;background:rgba(0,180,255,.08);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#00d4ff}
.vip-card .tool-icon{background:rgba(245,158,11,.1);color:#f59e0b}
.tool-name{font-size:13px;color:#c0c8d8}
.vip-tag{position:absolute;top:6px;right:6px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:1px 6px;border-radius:3px;font-size:9px;font-weight:600}

/* ====== 空状态 ====== */
.empty-state{text-align:center;padding:60px 20px;color:#3a5070}
.empty-state i{font-size:36px;margin-bottom:12px;opacity:.5}

/* ====== 底部 ====== */
.footer{border-top:1px solid rgba(0,180,255,.06);padding:16px;text-align:center;color:#3a5070;font-size:12px}

/* ====== 弹窗 ====== */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;display:none;align-items:center;justify-content:center}
.modal-mask.show{display:flex}
.modal-box{background:rgba(10,17,40,.95);border:1px solid rgba(0,180,255,.15);border-radius:8px;padding:24px;max-width:400px;width:90%;max-height:80vh;overflow-y:auto;position:relative}
.modal-large{max-width:700px}
.modal-title{color:#e0e8f0;font-size:15px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.modal-title i{color:#00d4ff}
.modal-close{position:absolute;top:12px;right:14px;background:none;color:#3a5070;font-size:20px;cursor:pointer}
.modal-close:hover{color:#c0c8d8}
.modal-field{margin-bottom:12px}
.modal-field label{display:block;color:#5a7a9a;font-size:11px;margin-bottom:4px}
.modal-field input,.modal-field select,.modal-field textarea{width:100%;padding:8px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(0,180,255,.12);border-radius:4px;color:#c0c8d8;font-size:12px}
.modal-field input:focus,.modal-field select:focus,.modal-field textarea:focus{border-color:rgba(0,180,255,.35);box-shadow:0 0 0 3px rgba(0,180,255,.08)}
.modal-field input::placeholder,.modal-field textarea::placeholder{color:#3a5070}
.modal-body{padding:0}
.modal-actions{display:flex;gap:8px;margin-top:16px}

/* ====== 按钮 ====== */
.btn-primary{padding:8px 20px;border-radius:4px;font-size:13px;background:linear-gradient(135deg,#0066cc,#00aaff);color:#fff;border:none;cursor:pointer;transition:all .2s}
.btn-primary:hover{box-shadow:0 4px 16px rgba(0,120,255,.3);transform:translateY(-1px)}
.btn-block{display:flex;justify-content:center;width:100%;padding:10px;font-size:14px}
.btn-vip-action{padding:8px 20px;border-radius:4px;font-size:13px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;cursor:pointer}

/* ====== VIP提示 ====== */
.vip-lock-icon{width:48px;height:48px;margin:0 auto 12px;background:rgba(245,158,11,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;color:#f59e0b}
.vip-title{font-size:16px;color:#e0e8f0;margin-bottom:4px}
.vip-sub{font-size:12px;color:#5a7a9a;margin-bottom:16px}

/* ====== 表单 ====== */
.form-footer{text-align:center;margin-top:12px;font-size:12px;color:#5a7a9a}
.form-footer a{color:#00d4ff}

/* ====== 滑块验证码 ====== */
.captcha-box{background:rgba(255,255,255,.03);border-radius:4px;padding:10px}
.captcha-track{position:relative;height:34px;background:rgba(255,255,255,.06);border-radius:17px;overflow:hidden;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;max-width:260px;margin:0 auto}
.captcha-thumb{position:absolute;left:0;top:0;width:44px;height:34px;background:linear-gradient(135deg,#0066cc,#00aaff);border-radius:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;z-index:2;transition:background .2s;touch-action:none}
.captcha-thumb::after{content:'\f054';font-family:'Font Awesome 6 Free';font-weight:900;font-size:11px}
.captcha-thumb.success{background:linear-gradient(135deg,#00c853,#00e676)}
.captcha-text{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:11px;color:#3a5070;pointer-events:none}

/* ====== Toast ====== */
.toast-container{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:6px}
.toast{background:rgba(10,17,40,.95);border:1px solid rgba(0,180,255,.15);border-radius:6px;padding:10px 16px;display:flex;align-items:center;gap:8px;font-size:12px;animation:toastIn .3s;min-width:200px;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.toast.success{border-left:3px solid #00e676}
.toast.error{border-left:3px solid #ff5252}
.toast.warning{border-left:3px solid #f59e0b}
.toast i{font-size:14px}
.toast.success i{color:#00e676}
.toast.error i{color:#ff5252}
.toast.warning i{color:#f59e0b}
@keyframes toastIn{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}

/* ====== 响应式 ====== */
@media(max-width:767px){
    .topbar-inner{gap:10px}
    .search-box{max-width:160px}
    .tools-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
    .category-list{gap:4px}
    .cat-item{padding:5px 10px;font-size:11px}
}