/* ============================================================
   工具页组件样式 —— 官网品牌配色（#D97706 / #FFF8F0 / #2D1B0E）
   仅在工具页加载，配合 web.css 使用，不覆盖导航与页脚
   ============================================================ */

/* 工具页主体（与官网同壳，无额外导航条） */
.tool-main{min-height:calc(100vh - 70px - 220px);padding:30px 0 50px;background:#FFF8F0}
.tool-main>.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* 按钮补充（web.css 已有 .btn/.btn-primary/.btn-outline） */
.btn-danger{background:#e74c3c;color:#fff}
.btn-success{background:#16a34a;color:#fff}
.btn-sm{padding:7px 16px;font-size:13px;border-radius:20px}
.btn-block{display:block;width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* 表单 */
.form-group{margin-bottom:18px}
.form-group label{display:block;margin-bottom:6px;font-size:14px;color:#555;font-weight:500}
.form-control{width:100%;padding:10px 14px;border:1px solid #E5E7EB;border-radius:8px;font-size:14px;font-family:inherit;transition:border-color .2s;background:#fff}
.form-control:focus{outline:none;border-color:#D97706;box-shadow:0 0 0 3px rgba(217,119,6,.12)}
textarea.form-control{min-height:100px;resize:vertical}
select.form-control{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:36px}

/* 卡片 */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.04);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(217,119,6,.12)}
.card-img{width:100%;height:180px;background:linear-gradient(135deg,#FEF3C7,#FDE68A);display:flex;align-items:center;justify-content:center;color:#D97706;font-size:40px}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-body{padding:16px}
.card-title{font-size:16px;font-weight:600;margin-bottom:8px;color:#333}
.card-desc{font-size:13px;color:#888;margin-bottom:10px;line-height:1.7}
.card-price{font-size:18px;color:#D97706;font-weight:700}
.card-price small{font-size:12px;color:#999;font-weight:normal}

/* 筛选条 */
.filter-bar{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap;align-items:center}
.filter-bar .form-control{width:auto;min-width:140px}

/* 提示 */
.alert{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:14px}
.alert-success{background:#d4edda;color:#155724}
.alert-error{background:#f8d7da;color:#721c24}
.alert-info{background:#FEF3C7;color:#92400E}

/* 标签 */
.tag{display:inline-block;padding:2px 10px;border-radius:12px;font-size:12px}
.tag-red{background:#f8d7da;color:#721c24}
.tag-pending{background:#fff3cd;color:#856404}
.tag-confirmed{background:#d1ecf1;color:#0c5460}
.tag-cancelled{background:#f8d7da;color:#721c24}
.tag-expired{background:#e2e3e5;color:#383d41}
.tag-completed,.tag-paid{background:#d4edda;color:#155724}
.badge{position:absolute;top:-6px;right:-12px;background:#e74c3c;color:#fff;font-size:11px;border-radius:10px;padding:1px 5px;min-width:16px;text-align:center}

/* 详情页 */
.detail-box{background:#fff;border-radius:16px;padding:30px;box-shadow:0 2px 12px rgba(0,0,0,.04)}
.detail-title{font-size:22px;font-weight:700;margin-bottom:12px;color:#333}
.detail-meta{font-size:13px;color:#999;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #F3F4F6}
.detail-content{font-size:15px;line-height:1.8;margin-bottom:24px;color:#555}
.detail-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:24px}
.detail-images img{width:100%;border-radius:10px}

/* 社区 */
.forum-list{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.04)}
.forum-item{padding:18px 20px;border-bottom:1px solid #F3F4F6;display:flex;gap:14px}
.forum-item:last-child{border-bottom:none}
.forum-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#D97706,#8B5A2B);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.forum-content{flex:1}
.forum-title{font-size:16px;font-weight:600;margin-bottom:6px;color:#333}
.forum-meta{font-size:12px;color:#999;display:flex;gap:16px;flex-wrap:wrap}
.forum-images{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.forum-images img{width:80px;height:80px;object-fit:cover;border-radius:8px}
.comment-list{margin-top:30px}
.comment-item{padding:14px 0;border-bottom:1px solid #F3F4F6}
.comment-user{font-weight:600;font-size:14px;margin-bottom:4px;color:#333}
.comment-text{font-size:14px;color:#555}
.comment-time{font-size:12px;color:#bbb}

/* 作品墙 */
.works-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.work-item{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.04);transition:transform .2s}
.work-item:hover{transform:translateY(-4px)}
.work-item img{width:100%;height:200px;object-fit:cover}
.work-info{padding:12px}
.work-title{font-size:14px;font-weight:600;margin-bottom:4px;color:#333}
.work-author{font-size:12px;color:#999}

/* 表格 */
.data-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}
.data-table th{background:#FEF3C7;padding:12px 14px;text-align:left;font-size:13px;color:#92400E;font-weight:600}
.data-table td{padding:12px 14px;border-top:1px solid #F3F4F6;font-size:14px}
.data-table tr:hover td{background:#FFF8F0}

/* 分页 */
.pagination{display:flex;gap:6px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.pagination a,.pagination span{padding:6px 12px;border:1px solid #E5E7EB;border-radius:8px;font-size:13px;color:#666;background:#fff}
.pagination a:hover{border-color:#D97706;color:#D97706}
.pagination .current{background:#D97706;color:#fff;border-color:#D97706}

/* 登录页（保留可访问，不出现在导航） */
.auth-wrapper{min-height:calc(100vh - 70px - 220px);display:flex;align-items:center;justify-content:center;padding:40px 20px;background:#FFF8F0}
.auth-box{background:#fff;padding:40px;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.08);width:100%;max-width:400px}
.auth-box h2{text-align:center;margin-bottom:28px;color:#333}
.auth-tip{text-align:center;margin-top:16px;font-size:13px;color:#999}

/* 空状态 */
.tool-empty{text-align:center;padding:60px 20px;color:#999;grid-column:1/-1}
.tool-empty .icon{font-size:48px;margin-bottom:12px}

@media (max-width:768px){
  .tool-main{padding:20px 0 40px;min-height:calc(100vh - 62px - 320px)}
  .detail-box{padding:20px}
  .auth-box{padding:28px 22px}
}