*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans",sans-serif;background:#ffffff;color:#1f2937}
a{color:#16a34a;text-decoration:none}
header{background:#ffffff;border-bottom:1px solid #e5e7eb}
.nav{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:24px;padding:14px 20px}
.nav a{padding:8px 10px;border-radius:6px}
.nav a.active{background:#ecfdf5}
.container{max-width:1250px;margin:24px auto;padding:0 20px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-6{grid-template-columns:repeat(6,1fr);gap:8px}
.settings-layout{display:grid;grid-template-columns:220px 1fr;gap:16px}
.settings-menu{display:flex;flex-direction:column;gap:8px}
.settings-item{display:block;padding:10px 12px;border:1px solid #e5e7eb;border-radius:8px;background:#ffffff;color:#1f2937;text-decoration:none}
.settings-item:hover{border-color:#16a34a;color:#16a34a;background:#f0fdf4}
.settings-item.active{background:#ecfdf5;color:#16a34a;border-color:#16a34a;font-weight:600}
.card{background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;margin:10px 0;}
.title{font-size:20px;font-weight:600;margin:0 0 10px}
.sub{color:#6b7280;font-size:13px}
.kpis{display:flex;gap:16px}
.kpi{flex:1;background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;padding:12px}
.kpi .label{color:#6b7280;font-size:12px}
.kpi .value{font-size:18px;font-weight:600}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #e5e7eb;padding:8px;text-align:center;font-size:13px}
.table th{background:#f3f4f6;color:#374151}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{position:relative;padding:10px 12px 10px 26px;border-left:2px solid #e5e7eb}
.timeline li .tag{display:inline-block;background:#ecfdf5;color:#16a34a;border:1px solid #16a34a;border-radius:999px;padding:2px 8px;font-size:12px;margin-right:8px}
.qr{display:flex;align-items:center;gap:16px}
.qrbox{width:120px;height:120px;background:#ffffff;border:1px dashed #d1d5db;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:600;color:#1f2937}
.defect-gallery .devcard{padding:8px}
.defect-gallery .qrbox{width:100%;height:88px}
.tabs{display:flex;gap:8px;margin-bottom:10px}
.tab{padding:6px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#ffffff;cursor:pointer}
.tab.active{background:#ecfdf5;color:#16a34a;border-color:#16a34a}
.tabs.tabs-hero{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px;width:100%}
.tab.tab-hero{padding:14px 16px;border:2px solid #e5e7eb;border-radius:10px;background:#ffffff;cursor:pointer;text-align:center;font-size:16px;font-weight:600;color:#1f2937}
.tab.tab-hero:hover{border-color:#16a34a;color:#16a34a;background:#f0fdf4}
.tab.tab-hero.active{background:#16a34a;color:#ffffff;border-color:#16a34a}
.chart{height:180px;background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#374151}
.chart-lg{height:260px}
.dashboard-hero{align-items:start}
.panel-hero .title{font-size:22px}
.panel-sub .title{font-size:18px}
.kpis-hero .kpi .value{font-size:28px}
.btn-range,.btn-stage{background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;color:#1f2937;padding:6px 10px;cursor:pointer}
.btn-range.active,.btn-stage.active{background:#ecfdf5;color:#16a34a;border-color:#16a34a;font-weight:600}
.pie{height:180px;background:#ffffff;border:1px solid #e5e7eb;border-radius:50%}
.list{list-style:none;margin:0;padding:0}
.list li{padding:6px 0;border-bottom:1px dashed #e5e7eb}
.footer{max-width:1120px;margin:30px auto;padding:0 20px 30px;color:#6b7280}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center}
.drawer{width:720px;background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.15)}
.drawer-body{padding:16px;max-height:60vh;overflow:auto}
.drawer-actions{display:flex;justify-content:flex-end;padding:12px;border-top:1px solid #e5e7eb}
.controls{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.controls input{flex:1;min-width:180px;background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;color:#1f2937;padding:6px 8px}
.controls select{background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;color:#1f2937;padding:6px 8px}
.controls button{background:#16a34a;border:1px solid #16a34a;border-radius:8px;color:#ffffff;padding:6px 10px;cursor:pointer}
.form{display:flex;flex-direction:column;gap:10px}
.form-row{display:flex;align-items:center;gap:12px}
.form-row label{width:140px;color:#374151;font-size:13px}
.form-row input,.form-row select{flex:1;background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;color:#1f2937;padding:6px 8px}
.form-row button{background:#16a34a;border:1px solid #16a34a;border-radius:8px;color:#ffffff;padding:8px 12px;cursor:pointer}
.devgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.devcard{border:1px solid #e5e7eb;border-radius:12px;padding:12px;background:#ffffff}
.devcard .name{font-weight:600;margin-bottom:6px}
.devcard .badge{display:inline-block;padding:2px 6px;border-radius:999px;font-size:12px;margin-left:6px;background:#ecfdf5;color:#16a34a;border:1px solid #16a34a}
.badge.red{background:#fee2e2;color:#b91c1c;border-color:#ef4444}
.metrics{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.metric{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:8px;padding:4px 8px;font-size:12px;color:#374151}
.mini{margin-top:8px}
.dashboard-hero{gap:20px}
.kpis-hero{gap:20px;margin-bottom:16px}
.panel-hero .grid{gap:20px}
.panel-hero .chart{margin-top:12px}
.controls{margin-bottom:16px}