body{font-family:'Roboto','Arial','PingFang SC','Microsoft YaHei',sans-serif;}
:root{--primary-color:#0053eb;--secondary-color:#EB5200;--error-color:red;--warning-color:#fbbc05;--text-color:#202124;--light-gray:#f8f9fa;--medium-gray:#dadce0;--dark-gray:#5f6368;}
.fontSpotterContainer{margin:0 auto;display:flex;flex-direction:column;gap:25px;max-width:1500px;background:white;}
.section{border-top:1px dashed lightgray;}
header{text-align:center;background:var(--primary-color);}
header h1{font-size:1.8rem;color:white;margin:1rem auto;}
.hidden{display:none!important;}
.error-box{color:var(--error-color);margin-top:1rem;}
#uploadSection{border-top:none!important;}
.upload-area{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100px;border:2px dashed var(--primary-color);border-radius:10px;padding:40px 20px;cursor:pointer;transition:all 0.3s ease;background-color:var(--light-gray);margin-bottom:10px;}
.upload-area:hover,.upload-area.active{border:2px solid var(--primary-color);background-color:rgba(66,133,244,0.2);}
.upload-area h3{font-size:2rem;color:var(--primary-color);}
.upload-area p{color:var(--dark-gray);font-size:0.95rem;}
#fileInput{display:none;}
.instructions{font-size:0.85rem;color:var(--secondary-color);border-left:6px solid var(--secondary-color);padding-left:0.5rem;}
.btn{background-color:var(--primary-color);color:white;border:none;padding:12px 24px;border-radius:6px;cursor:pointer;font-size:1rem;font-weight:500;transition:all 0.3s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.btn:hover{background-color:#3367d6;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.1);}
.btn-large{padding:14px 28px;font-size:1.1rem;}
.btn-secondary{background-color:var(--light-gray);color:var(--text-color);border:1px solid #ccc;}
.btn-secondary:hover{background-color:var(--medium-gray);}
.action-container{display:flex;gap:15px;margin-top:20px;}
/* 字符网格样式 */
.segments-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:15px;margin:20px 0;}
.char-segment{border:1px solid var(--medium-gray);border-radius:8px;overflow:hidden;cursor:pointer;transition:all 0.3s ease;}
.char-segment:hover{transform:translateY(-3px);box-shadow:0 4px 8px rgba(0,0,0,0.1);border-color:var(--primary-color);}
.char-segment.selected{border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(66,133,244,0.3);}
.char-image{width:100%;height:40px;object-fit:contain;background-color:var(--light-gray);}
.char-input-container{display:flex;align-items:center;gap:10px;margin-top:10px;}
.char-input-container label{font-weight:500;}
.char-input{width:60px;padding:8px 12px;border:1px solid var(--medium-gray);border-radius:6px;font-size:1.1rem;text-align:center;}
/* 结果区域样式 */
.results-container{display:flex;flex-direction:column;gap:15px;margin-top:20px;}
.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:20px;}
.font-card{cursor:pointer;border:1px solid var(--medium-gray);border-radius:10px;overflow:hidden;transition:all 0.3s ease;display:flex;flex-direction:column;}
.font-card:hover{box-shadow:0 6px 12px rgba(0,0,0,0.1);}
.font-card-link{display:block;text-decoration:none;color:inherit;}
.font-card-link:hover .font-card{transform:translateY(-5px);box-shadow:0 8px 15px rgba(0,0,0,0.15);}
.font-header{color:#333333;padding:0 0 0 15px;display:flex;justify-content:space-between;align-items:center;}
.font-header h3{font-size:1rem;font-weight:400;}
.font-name{font-size:1.3rem;font-weight:600;}
.font-similarity{font-size:1.3rem;font-weight:900;background:rgba(255,255,255,0.2);padding:3px 10px;border-radius:10px 10px 0 0;text-align:center;color:var(--primary-color);}
.char-samples{background-color:white;display:flex;flex-wrap:wrap;gap:15px;}
.char-sample{display:flex;flex-direction:column;align-items:center;}
.sample-image{width:50px;height:50px;object-fit:contain;margin-bottom:5px;}
.char-label{font-size:0.85rem;color:var(--dark-gray);}
.preview-container{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:#f0f0f0;}
.preview-image{max-width:100%;max-height:300px;object-fit:contain;}
.preview-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.7);color:white;padding:10px 20px;border-radius:6px;opacity:0;transition:opacity 0.3s;white-space:nowrap;/* 防止文字换行 */ z-index:10;}
.upload-area.has-preview:hover .preview-overlay{opacity:1;}
/* 裁切弹窗 */
#cropModal{z-index:9999;background:rgba(0,0,0,0.8);}
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:1000;}
.modal p{padding:0 15px;margin:0;font-size:0.85rem;color:var(--secondary-color);}
.modal.hidden{display:none;}
.modal-content{background-color:white;border-radius:8px;width:90%;max-width:800px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;}
.modal-header{position:relative;padding:15px 15px 0 15px;}
.modal-header h3{margin:0;font-size:1.8rem;}
.image-container{flex:1;overflow:hidden;margin-top:0.5rem;}
.image-container img{max-width:100%;display:block;}
.crop-toolbar{display:flex;gap:10px;}
.crop-tool{width:36px;height:36px;border:none;background:#f5f5f5;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:18px;color:#333;}
.crop-tool:hover{background:#e0e0e0;}
.close-btn{position:absolute;top:12px;right:15px;background:transparent;border:none;font-size:24px;cursor:pointer;color:#ff0000;font-weight:bold;z-index:10;}
.modal-actions{display:flex;justify-content:space-between;padding:15px;}
.zoom-controls{display:flex;gap:8px;align-items:center;}
/* 手动识别模态框样式 */
#manualModal{display:flex;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.6);align-items:center;justify-content:center;}
#manualModal .modal-content{background-color:#fff;padding:20px;border-radius:8px;max-width:500px;width:90%;box-shadow:0 5px 15px rgba(0,0,0,0.3);}
#manualModal .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;}
#manualModal .modal-body{margin:20px 0;}
#userEmail{width:92%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:16px;}
.char-tag{display:inline-block;padding:2px 8px;background:#e0e0e0;border-radius:4px;margin:0 2px;font-family:monospace;}
.char-input-container{margin-top:5px;}
.char-input{width:100%;text-align:center;padding:4px;}
/* 状态指示器 */
.status-indicator{display:flex;align-items:center;gap:10px;padding:15px;background-color:rgba(66,133,244,0.05);border-radius:8px;margin:20px 0;}
.spinner{width:24px;height:24px;border:3px solid rgba(66,133,244,0.2);border-top:3px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;}
@keyframes spin{0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
/* 响应式设计 */
@media (max-width:1024px){.container{grid-template-columns:1fr;}
.results-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
}
body.loading{cursor:wait;}
body.loading::before{content:none !important;}
body.loading::after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:9999;pointer-events:all;}
#processingSection:not(.hidden)::before,#manualProcessingSection:not(.hidden)::before{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:15px 30px;background:var(--primary-color);color:white;border-radius:4px;z-index:10000;font-size:18px;box-shadow:0 2px 10px rgba(0,0,0,0.2);}
#processingSection:not(.hidden)::before{content:"Analyzing image content...";}
#manualProcessingSection:not(.hidden)::before{content:"Sending your request...";}
footer{display:inline-block;width:100%;margin-top:3rem;border-top:1px solid var(--medium-gray);padding-top:1rem;}
.footerWrapper{max-width:1500px;margin:0 auto}
.footerLinks{width:auto;height:auto;float:left}
.footerLinks ul{margin:0;padding:0;}
.footerLinks li{float:left;margin-right:2em;list-style:none;}
.footerLinks a{color:var(--primary-color);font-weight:700;text-decoration:none;}
.footerText{float:right}
.footerText span{color:#333}