/* ============================
   wheen.css - Shared Theme
   Inspired by gps.html + ToolGen
   ============================ */

/* ===== Reset & Base ===== */
*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}
html{font-size:14px;line-height:1.5}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:#f5f7fa;color:#1f2937;min-height:100vh
}

/* ===== Typography ===== */
h1{font-size:22px;font-weight:700;text-align:center;margin-bottom:4px;color:#111}
h2{font-size:16px;color:#6b7280;text-align:center;margin-bottom:20px;font-weight:400}
.ttl{font-size:22px;font-weight:700;text-align:center;margin-bottom:4px;color:#111}
.sub{font-size:13px;color:#9ca3af;text-align:center;margin-bottom:24px}
.subtitle{font-size:13px;color:#9ca3af;margin-bottom:20px;text-align:center}

/* ===== Layout ===== */
.wrap{max-width:640px;margin:0 auto;padding:20px 16px}
.page-content{max-width:640px;margin:0 auto;padding:20px 16px}
.layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1200px;margin:0 auto;padding:20px 16px}
@media(max-width:800px){.layout{grid-template-columns:1fr}}

/* ===== Navigation Header (injected by wheen.js) ===== */
.wheen-header{
  background:#fff;border-bottom:1px solid #e5e7eb;padding:0 16px;
  display:flex;align-items:center;height:48px;position:sticky;top:0;z-index:100;
  box-shadow:0 1px 3px rgba(0,0,0,.04)
}
.wheen-header .brand{font-size:15px;font-weight:700;color:#2563eb;text-decoration:none;margin-right:auto}
.wheen-header .brand span{color:#111}
.wheen-header .nav{display:flex;align-items:center;gap:12px;font-size:13px}
.wheen-header .nav a{color:#6b7280;text-decoration:none}
.wheen-header .nav a:hover{color:#2563eb;text-decoration:none}
.wheen-header .back-btn{color:#6b7280;font-size:13px;cursor:pointer;background:none;border:none;padding:4px 8px}
.wheen-header .back-btn:hover{color:#2563eb}
.wheen-header .page-title{color:#374151;font-size:14px;font-weight:500}
.wheen-header .nav-sep{color:#d1d5db;font-size:12px}

/* ===== Cards ===== */
.card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.card-header{
  background:#2563eb;color:#fff;padding:12px 16px;font-size:14px;font-weight:600;
  border-bottom:1px solid #1d4ed8
}
.card-body{padding:16px}

/* ===== Forms & Inputs ===== */
.form-group{margin-bottom:12px}
.form-group label,.lbl{display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:4px}
input[type=text],input[type=number],input[type=url],input[type=email],select,textarea{
  width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;
  color:#1f2937;background:#fff;outline:none;transition:border-color .15s,box-shadow .15s
}
input:focus,select:focus,textarea:focus{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.15)}
input[type=radio],input[type=checkbox]{accent-color:#2563eb;margin-right:4px}

/* Inline form row */
.form-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.form-row label{font-size:13px;font-weight:600;color:#374151;white-space:nowrap}
.form-row input[type=number]{width:100px}
.form-row .unit{font-size:12px;color:#9ca3af}

.input-group{margin-bottom:12px}
.input-group label{display:block;margin-bottom:4px;font-size:13px;font-weight:600;color:#374151}
.input-group input{width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:13px}

/* Radio group */
.radio-group{display:flex;gap:20px;margin-bottom:12px}
.radio-label{display:inline-flex;align-items:center;gap:4px;cursor:pointer;font-size:13px;color:#374151}

/* ===== Buttons ===== */
.btn,button.btn,button[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;
  background:#2563eb;color:#fff;border:none;border-radius:6px;
  padding:8px 20px;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .15s;text-decoration:none;line-height:1.4
}
.btn:hover{background:#1d4ed8}
.btn:disabled{background:#9ca3af;cursor:not-allowed}
.btn-block{width:100%;display:block;text-align:center;padding:10px 0}

/* Secondary */
.btn-sm,.btn-secondary{
  background:#f3f4f6;color:#374151;border:1px solid #e5e7eb;border-radius:6px;
  padding:6px 14px;font-size:12px;cursor:pointer;transition:background .15s
}
.btn-sm:hover,.btn-secondary:hover{background:#e5e7eb}

/* Success/download */
.btn-download,.download-link{
  display:inline-block;background:#16a34a;color:#fff;border:none;border-radius:6px;
  padding:10px 28px;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:background .15s
}
.btn-download:hover,.download-link:hover{background:#15803d;text-decoration:none}

/* Toggle */
.toggle-button{
  width:100%;padding:10px;background:#16a34a;color:#fff;border:none;border-radius:6px;
  font-size:14px;cursor:pointer;margin-bottom:12px
}
.toggle-button:hover{background:#15803d}

/* ===== Upload Zones ===== */
.upload-zone,.upload-area,.dz,.file-zone{
  border:2px dashed #d1d5db;border-radius:8px;padding:24px;text-align:center;
  background:#fafbfc;cursor:pointer;transition:all .15s;margin-bottom:12px
}
.upload-zone:hover,.upload-area:hover,.dz:hover,.file-zone:hover,
.upload-zone.dragover,.upload-area.dragover,.dz.dragover,.file-zone.dragover{
  border-color:#2563eb;background:#f0f7ff
}
.upload-zone .icon,.file-zone .icon{font-size:36px;color:#9ca3af;margin-bottom:8px}
.upload-zone .text,.file-zone .text{font-size:13px;color:#6b7280}
.upload-zone .hint{font-size:12px;color:#9ca3af;margin-top:4px}
.upload-zone input[type=file],.file-zone input[type=file]{display:none}
.file-zone .filename{font-size:12px;color:#2563eb;margin-top:4px}

/* ===== File Info ===== */
.file-info{font-size:12px;color:#6b7280;margin:8px 0}
.file-info .name{color:#2563eb;font-weight:600}
.file-info .size{color:#9ca3af;margin-left:4px}

/* ===== Status & Results ===== */
.status,.result-box{
  border-radius:8px;padding:14px;margin-top:12px;font-size:13px;display:none;line-height:1.6
}
.status.loading,.result-box.loading{display:block;background:#eff6ff;border:1px solid #bfdbfe;border-left:3px solid #2563eb;color:#1e40af}
.status.success,.result-box.success{display:block;background:#f0fdf4;border:1px solid #bbf7d0;border-left:3px solid #16a34a;color:#166534}
.status.error,.result-box.error{display:block;background:#fef2f2;border:1px solid #fecaca;border-left:3px solid #dc2626;color:#991b1b}
.result-box h3{font-size:13px;margin-bottom:8px}
.stat b{color:#2563eb}

/* ===== Output Display ===== */
#output,.output{
  margin-top:16px;padding:16px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;
  font-size:14px;line-height:1.8
}
#output p{margin:4px 0}

/* ===== Progress Bar ===== */
.progress-bar{height:4px;background:#e5e7eb;border-radius:2px;margin-top:8px;overflow:hidden;display:none}
.progress-bar .fill{height:100%;background:#2563eb;border-radius:2px;transition:width .5s}

/* ===== Tables ===== */
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:#2563eb;color:#fff;padding:8px 12px;text-align:left;font-weight:600}
td{padding:8px 12px;border-bottom:1px solid #e5e7eb;color:#1f2937}
tr:hover td{background:#f9fafb}

/* ===== Preview ===== */
.preview{max-height:300px;overflow:auto;border:1px solid #e5e7eb;border-radius:6px;margin-top:12px;display:none}
.preview th{position:sticky;top:0}
.preview table{font-size:12px}
.preview td{font-family:monospace;font-size:11px}

/* ===== Download Section ===== */
.download-section{
  display:none;margin-top:16px;padding:20px;background:#f0fdf4;border:1px solid #bbf7d0;
  border-radius:8px;text-align:center
}
.download-section .summary{color:#166534;font-size:14px;margin-bottom:12px}

/* ===== Detail Section (collapsible) ===== */
.detail-section{margin-top:16px}
.detail-toggle{display:none}
.detail-label{
  display:inline-block;padding:6px 16px;background:#f3f4f6;color:#374151;border-radius:6px;
  font-size:12px;cursor:pointer
}
.detail-label:hover{background:#e5e7eb}
.detail-content{display:none;margin-top:8px;max-height:400px;overflow-y:auto;border:1px solid #e5e7eb;border-radius:6px;padding:4px}
.detail-toggle:checked~.detail-content{display:block}

/* ===== Rules ===== */
.rules{background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:16px;margin-top:16px;font-size:13px;color:#6b7280}
.rules strong{color:#1f2937}
.rules code{background:#f3f4f6;padding:1px 4px;border-radius:3px;font-size:12px}
.rules ul{margin-top:6px;padding-left:18px}

/* ===== Info / Help ===== */
.info{font-size:13px;color:#6b7280;line-height:1.7;margin-bottom:10px}
.info code{background:#f3f4f6;padding:1px 4px;border-radius:3px;font-size:12px}
.val{color:#dc2626}

/* ===== Sample Grid ===== */
.sample-grid{margin-top:8px;overflow-x:auto}
.sample-grid table{font-size:11px}
.sample-grid th{background:#f3f4f6;color:#374151;padding:5px 6px;border-bottom:1px solid #d1d5db;white-space:nowrap;text-align:left}
.sample-grid td{padding:4px 6px;border-bottom:1px solid #f0f0f0;white-space:nowrap}

/* ===== Links ===== */
a{color:#2563eb;text-decoration:none}
a:hover{text-decoration:underline}

/* ===== Hidden ===== */
.hidden{display:none}

/* ===== Help Section ===== */
.help-section{font-size:13px;line-height:1.8;color:#4b5563}
.help-section b{color:#2563eb}
.help-section code{background:#f3f4f6;padding:1px 4px;border-radius:3px;font-size:12px}

/* ===== Band colors (ovital) ===== */
.band-r{color:#E53935}.band-o{color:#FB8C00}.band-y{color:#FDD835}.band-g{color:#43A047}.band-b{color:#1E88E5}
.band-p{color:#8E24AA}.band-c{color:#00ACC1}.band-brown{color:#6D4C41}

/* ===== Result box color overrides ===== */
.result-box h3 b{color:#2563eb}

/* ===== Container ===== */
.container{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:28px;max-width:1200px;margin:0 auto;box-shadow:0 1px 3px rgba(0,0,0,.06)}

/* ===== Center / Flex ===== */
.flex-center{display:flex;align-items:center;justify-content:center;gap:12px}
.text-center{text-align:center}