/*
 * 工具页面共用样式 - 日式侘寂风格
 * 覆盖 Tailwind 默认颜色
 */

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700;900&display=swap');
*{font-family:'Noto Sans SC','Hiragino Sans','Yu Gothic',sans-serif !important;}
body{background:#e8e4db !important;color:#2d2d28 !important;}

/* 导航栏 */
.tool-nav{position:fixed;top:0;width:100%;z-index:100;background:rgba(232,228,219,0.85);backdrop-filter:blur(14px);border-bottom:1px solid #d0c8b8;}
.tool-nav-inner{max-width:1100px;margin:auto;display:flex;justify-content:space-between;align-items:center;height:60px;padding:0 2rem;}
.tool-nav .logo{font-size:1.2rem;font-weight:600;color:#2d2d28;letter-spacing:0.25em;text-decoration:none;}
.tool-nav .back-link{color:#5a5a50;text-decoration:none;font-size:0.8rem;font-weight:500;letter-spacing:0.12em;transition:color .3s;}
.tool-nav .back-link:hover{color:#2d2d28;}

/* 页面标题区 */
.tool-header{background:#ddd8cd;padding:5rem 2rem 2.5rem;text-align:center;}
.tool-header h1{font-size:2.2rem;font-weight:600;color:#2d2d28;letter-spacing:0.25em;margin-bottom:0.8rem;}
.tool-header p{color:#5a5a50;font-size:0.9rem;letter-spacing:0.08em;max-width:500px;margin:auto;}
.tool-body{background:#e8e4db;padding:2rem 2rem 4rem;min-height:calc(100vh - 200px);}

/* 卡片/面板 */
.tool-card{background:rgba(255,255,255,0.55);border:1px solid #c8c0b0;}

/* 拖放区域 */
.drop-zone{border:2px dashed #c8c0b0;background:rgba(255,255,255,0.3);transition:all .3s;}
.drop-zone:hover{border-color:#8b7355;background:rgba(255,255,255,0.5);}
.drop-zone.drag-over{border-color:#8b7355;background:rgba(255,255,255,0.6);}

/* 按钮 */
.btn-wabi{display:inline-block;padding:0.5rem 1.5rem;border:1px solid #2d2d28;color:#2d2d28;background:transparent;font-size:0.8rem;font-weight:600;letter-spacing:0.08em;cursor:pointer;transition:all .3s;font-family:inherit;text-decoration:none;text-align:center;}
.btn-wabi:hover{background:#2d2d28;color:#e8e4db;}
.btn-wabi-fill{background:#2d2d28;color:#e8e4db;border-color:#2d2d28;}.btn-wabi-fill:hover{background:#4a4a40;}
.btn-wabi-accent{background:#8b7355;color:white;border-color:#8b7355;}.btn-wabi-accent:hover{background:#6b5a3a;}
.btn-wabi-outline{border-color:#8b7355;color:#2d2d28;}.btn-wabi-outline:hover{background:#8b7355;color:white;}
.btn-wabi:disabled{opacity:0.5;cursor:not-allowed;}
.btn-wabi:disabled:hover{background:transparent;color:#2d2d28;}

/* 输入框/下拉 */
input, select, textarea{border:1px solid #c8c0b0 !important;background:rgba(255,255,255,0.6) !important;color:#2d2d28 !important;padding:0.5rem 0.8rem !important;font-size:0.85rem !important;font-family:inherit !important;border-radius:0 !important;}
input:focus, select:focus, textarea:focus{outline:none !important;border-color:#8b7355 !important;box-shadow:none !important;}
select option{background:#e8e4db;color:#2d2d28;}

/* 标签/标签文字 */
.tool-label{font-size:0.85rem;font-weight:600;color:#2d2d28;margin-bottom:0.5rem;display:block;letter-spacing:0.05em;}
.tool-hint{font-size:0.75rem;color:#5a5a50;margin-top:0.25rem;}

/* 进度条 */
.progress-bg{background:#d8d0c0;border-radius:0;height:0.5rem;}
.progress-fill{background:#8b7355;height:0.5rem;border-radius:0;transition:width .3s;}

/* 文件列表 */
.file-item{background:rgba(255,255,255,0.4);border:1px solid #d8d0c0;padding:0.8rem;margin-bottom:0.5rem;}
.file-item .name{font-weight:600;color:#2d2d28;font-size:0.85rem;}
.file-item .size{color:#5a5a50;font-size:0.75rem;}
.file-item .remove-btn{color:#5a5a50;cursor:pointer;transition:color .3s;background:none;border:none;font-family:inherit;}
.file-item .remove-btn:hover{color:#2d2d28;}

/* 编码标签 */
.encoding-tag{font-family:monospace;color:#8b7355;font-weight:600;font-size:0.75rem;}

/* 滑块 */
input[type=range]{border:none !important;background:transparent !important;padding:0 !important;accent-color:#8b7355;}

/* 连接状态 */
.conn-ok{color:#4a7a4a;}.conn-fail{color:#8a4a4a;}

/* 预览文本区 */
.preview-box{background:rgba(255,255,255,0.5);border:1px solid #d8d0c0;padding:1rem;font-size:0.8rem;line-height:1.8;color:#2d2d28;resize:none;width:100%;font-family:inherit;}

/* 重置 Tailwind 一些默认 */
.shadow-none\!, .shadow-sm, .shadow, .shadow-lg, .shadow-xl, .shadow-2xl{box-shadow:none !important;}
.rounded-xl, .rounded-lg, .rounded-2xl, .rounded-full{border-radius:0 !important;}