:root {
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --primary-light: #60a5fa;
    --secondary: #8b5cf6;
    --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --card-bg: rgba(255,255,255,0.95);
    --text-dark: #1e293b;
    --text-light: #64748b;
    --shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    --border-glow: 0 0 20px rgba(59,130,246,0.3);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    position: relative;
}
body::before{
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.05"><path fill="%233b82f6" d="M50 0L61.8 38.2L100 50L61.8 61.8L50 100L38.2 61.8L0 50L38.2 38.2z"/></svg>') repeat;
    pointer-events: none;
}
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.9);backdrop-filter:blur(20px);padding:12px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid rgba(59,130,246,0.2);flex-wrap:wrap;box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);}
.logo{display:flex;align-items:center;gap:8px;}
.logo-icon{width:36px;height:36px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;box-shadow:0 0 20px rgba(59,130,246,0.3);}
.logo-text{font-size:1.1rem;font-weight:700;}
.logo-text a{text-decoration:none;background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent;}
.brand-tag{font-size:0.55rem;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;padding:2px 8px;border-radius:30px;margin-left:6px;}
.credit-share-area{display:flex;align-items:center;gap:8px;background:rgba(59,130,246,0.1);padding:6px 16px 6px 20px;border-radius:40px;cursor:pointer;transition:all 0.2s;border:1px solid rgba(59,130,246,0.2);}
.credit-share-area:hover{background:rgba(59,130,246,0.15);transform:scale(1.02);}
.credit-badge{color:#3b82f6;font-size:0.9rem;font-weight:700;}
.share-icon{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;padding:4px 12px;border-radius:30px;font-size:0.7rem;font-weight:600;}
.user-area{display:flex;align-items:center;gap:8px;}
.gallery-btn,.clear-chat{padding:6px 14px;border-radius:30px;font-size:0.75rem;cursor:pointer;font-weight:500;transition:all 0.2s;}
.gallery-btn{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;border:none;text-decoration:none;}
.clear-chat{background:rgba(255,255,255,0.8);border:1px solid #e2e8f0;color:#ef4444;}

/* 移动端头部精简 */
@media (max-width:640px){
.header{padding:10px 12px;gap:8px;}
.logo-icon{width:30px;height:30px;font-size:15px;}
.logo-text{font-size:0.9rem;}
.brand-tag{display:none;}
.credit-share-area{padding:5px 10px;gap:0;}
.credit-badge{font-size:0.75rem;}
.share-icon{display:none;}
.gallery-btn{font-size:0;padding:6px 10px;}
.gallery-btn:before{content:"🏠";font-size:0.9rem;}
.clear-chat{font-size:0;padding:6px 10px;}
.clear-chat:before{content:"🗑️";font-size:0.9rem;}
}

.chat-area{flex:1;overflow-y:auto;padding:20px;padding-bottom:100px;height:calc(100vh - 140px);}
.messages-container{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:16px;}
.message-card{display:flex;gap:12px;animation:fadeIn 0.3s ease;}
.message-card.user{align-self:flex-end;flex-direction:row-reverse;}
.message-card.bot{align-self:flex-start;}
.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;flex-shrink:0;box-shadow:0 4px 12px rgba(59,130,246,0.2);}
.message-card.bot .avatar{background:#fff;color:#3b82f6;border:2px solid #3b82f6;}
.bubble{max-width:70%;padding:12px 18px;border-radius:20px;font-size:0.9rem;line-height:1.5;background:rgba(255,255,255,0.95);border:1px solid rgba(59,130,246,0.1);box-shadow:0 2px 12px rgba(0,0,0,0.04);color:#1e293b;}
.message-card.user .bubble{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;border:none;}
.chat-tip{text-align:center;font-size:0.7rem;color:#3b82f6;margin-top:16px;padding:10px 16px;background:rgba(59,130,246,0.08);border-radius:30px;width:fit-content;margin-left:auto;margin-right:auto;border:1px solid rgba(59,130,246,0.15);}
.input-area{position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);padding:16px 24px;border-top:1px solid rgba(59,130,246,0.15);z-index:100;}
.input-wrapper{display:flex;gap:12px;background:#fff;border:1px solid #e2e8f0;border-radius:60px;padding:4px 4px 4px 20px;max-width:800px;margin:0 auto;transition:all 0.2s;box-shadow:0 2px 8px rgba(0,0,0,0.04);}
.input-wrapper:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.1);}
.input-wrapper input{flex:1;border:none;background:transparent;padding:12px 0;font-size:0.95rem;outline:none;font-family:inherit;}
.input-wrapper button{background:linear-gradient(135deg,#3b82f6,#8b5cf6);border:none;border-radius:60px;padding:10px 28px;color:#fff;font-weight:600;cursor:pointer;transition:all 0.2s;}
.input-wrapper button:hover{transform:scale(1.02);box-shadow:0 4px 12px rgba(59,130,246,0.3);}
.batch-hint{font-size:0.7rem;color:#3b82f6;margin-top:8px;text-align:center;min-height:24px;}
.typing-bubble{background:rgba(255,255,255,0.95);border:1px solid rgba(59,130,246,0.15);border-radius:20px;padding:12px 18px;}
.progress-bar-container{width:100%;height:3px;background:#e2e8f0;border-radius:2px;margin-top:10px;overflow:hidden;}
.progress-bar-fill{width:50%;height:100%;background:linear-gradient(90deg,#3b82f6,#8b5cf6);animation:progress 1s ease-in-out infinite;}
@keyframes progress{0%{width:0%;}50%{width:70%;}100%{width:100%;}}
.preview-link,.download-link,.ftp-upload-link,.share-card-link,.app-convert-link{display:inline-block;margin-top:8px;margin-right:8px;padding:5px 14px;border-radius:30px;font-size:0.7rem;text-decoration:none;cursor:pointer;transition:all 0.2s;font-weight:500;}
.preview-link{background:rgba(59,130,246,0.1);color:#3b82f6;}
.download-link{background:rgba(16,185,129,0.1);color:#059669;}
.ftp-upload-link{background:rgba(139,92,246,0.1);color:#7c3aed;}
.share-card-link{background:rgba(245,158,11,0.1);color:#d97706;}
.app-convert-link{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;}
.site-id-badge,.file-count-badge{font-size:0.6rem;padding:2px 8px;border-radius:20px;margin-left:8px;}
.site-id-badge{background:#e2e8f0;color:#475569;}
.file-count-badge{background:rgba(59,130,246,0.1);color:#3b82f6;}
.features-text{font-size:0.75rem;color:#64748b;margin-top:8px;padding-top:8px;border-top:1px solid #e2e8f0;}
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:1000;}
.modal-card{background:#fff;border-radius:28px;padding:24px;width:90%;max-width:420px;max-height:85vh;overflow-y:auto;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);}
.modal-title{font-size:1.2rem;font-weight:700;color:#3b82f6;margin-bottom:20px;border-left:3px solid #3b82f6;padding-left:12px;}
.share-url{background:#f8fafc;padding:12px;border-radius:16px;margin:15px 0;display:flex;gap:10px;}
.share-url input{flex:1;border:none;background:transparent;font-size:0.75rem;outline:none;}
.copy-btn{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;border:none;padding:6px 16px;border-radius:30px;cursor:pointer;}
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:0.75rem;font-weight:600;color:#475569;margin-bottom:6px;}
.form-group input,.form-group select{width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:14px;font-size:0.85rem;outline:none;}
.form-group input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,0.1);}
.btn-primary{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;border:none;padding:12px 24px;border-radius:40px;font-size:0.85rem;font-weight:600;cursor:pointer;width:100%;transition:all 0.2s;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(59,130,246,0.3);}
.btn-secondary{background:#f1f5f9;color:#475569;border:none;padding:10px 20px;border-radius:40px;font-size:0.8rem;cursor:pointer;}
.config-list-item{background:#f8fafc;border-radius:16px;padding:14px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;}
.config-info{font-size:0.75rem;}
.config-info strong{color:#3b82f6;}
.delete-config{cursor:pointer;color:#ef4444;font-size:0.7rem;padding:4px 12px;background:#fee2e2;border-radius:30px;}
.expand-preview{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:20px;padding:16px;margin-top:8px;}
.expand-preview-title{font-size:0.8rem;font-weight:600;color:#166534;margin-bottom:12px;}
.expand-preview-list{display:flex;flex-wrap:wrap;gap:8px;}
.expand-tag{background:#dcfce7;color:#166534;padding:4px 12px;border-radius:30px;font-size:0.7rem;}
.expand-confirm-btn{background:#22c55e;color:#fff;border:none;padding:10px 20px;border-radius:40px;font-size:0.8rem;font-weight:600;cursor:pointer;margin-top:12px;width:100%;}
.expand-cancel-btn{background:#e2e8f0;color:#475569;border:none;padding:8px 16px;border-radius:40px;font-size:0.75rem;cursor:pointer;margin-top:8px;width:100%;}
.storage-warning{background:#fef3c7;color:#d97706;font-size:0.7rem;text-align:center;padding:8px;display:none;position:fixed;bottom:90px;left:0;right:0;z-index:99;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@media (max-width:640px){.chat-area{padding:16px;padding-bottom:90px;}.bubble{max-width:85%;font-size:0.85rem;}.input-area{padding:12px 16px;}.input-wrapper{padding:3px 3px 3px 16px;}.input-wrapper button{padding:8px 20px;}}