*{box-sizing:border-box}body{margin:0;font-family:Arial,"Microsoft YaHei",sans-serif;background:#f5f7fb;color:#142033}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.app{display:flex;min-height:100vh}.side{width:235px;background:#111827;color:#d1d5db;padding:18px 14px}.brand{font-size:20px;font-weight:800;color:#fff;padding:8px 10px 22px}.brand span{color:#60a5fa}.nav a{display:block;padding:11px 12px;border-radius:8px;margin:3px 0}.nav a:hover,.nav a.active{background:#1f2937;color:#fff}.main{flex:1}.top{height:68px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 26px}.content{padding:24px;max-width:1500px;margin:auto}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.card,.panel{background:#fff;border:1px solid #e5e7eb;border-radius:12px}.card{padding:18px}.label{font-size:13px;color:#64748b}.value{font-size:28px;font-weight:800;margin-top:8px}.panel{margin-top:18px;overflow:hidden}.panel-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid #e5e7eb}.panel-head h2{font-size:16px;margin:0}.btn{display:inline-block;background:#2563eb;color:#fff;padding:9px 13px;border:0;border-radius:8px}.btn.gray{background:#eef2f7;color:#334155}.toolbar{padding:13px 18px;display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid #eef2f7}.toolbar input,.toolbar select,.form input,.form select,.form textarea{padding:10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff}.toolbar input{min-width:260px}.table{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:12px 15px;border-bottom:1px solid #eef2f7;text-align:left;font-size:13px;white-space:nowrap}th{background:#fafafa;color:#64748b}.tag{padding:4px 8px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:12px}.tag.green{background:#ecfdf5;color:#15803d}.tag.orange{background:#fff7ed;color:#c2410c}.tag.red{background:#fef2f2;color:#dc2626}.two{display:grid;grid-template-columns:1.4fr .8fr;gap:18px}.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form label{font-size:12px;color:#475569}.form input,.form select,.form textarea{width:100%;margin-top:6px}.full{grid-column:1/-1}.notice{padding:11px 13px;border-radius:8px;background:#ecfdf5;color:#166534;margin-bottom:14px}.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0f172a,#1d4ed8)}.login-card{width:min(430px,92vw);background:#fff;padding:30px;border-radius:14px}.login-card h1{margin-top:0}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.detail{padding:12px;border:1px solid #e5e7eb;border-radius:9px}.detail b{display:block;font-size:11px;color:#64748b;margin-bottom:5px}@media(max-width:900px){.side{display:none}.cards{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.content{padding:14px}.cards{grid-template-columns:1fr}.form{grid-template-columns:1fr}.full{grid-column:auto}.detail-grid{grid-template-columns:1fr}}
/* FRONTECH CRM Phase 1 refined UI */
body{background:#f4f6f9;color:#172033}.side{background:#0f172a;box-shadow:1px 0 0 rgba(255,255,255,.04)}.top{position:sticky;top:0;z-index:10;box-shadow:0 1px 0 rgba(15,23,42,.05)}.content{padding:28px 30px}.page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.page-title h1{margin:0;font-size:26px;letter-spacing:-.4px}.page-title p{margin:6px 0 0;color:#718096;font-size:13px}.panel{border:1px solid #e8edf3;border-radius:14px;box-shadow:0 4px 18px rgba(15,23,42,.04)}.no-margin{margin-top:0}.panel-body{padding:20px}.form-section{background:#fff;border:1px solid #e8edf3;border-radius:14px;box-shadow:0 4px 18px rgba(15,23,42,.035);margin-bottom:18px;overflow:hidden}.section-title{display:flex;gap:12px;align-items:center;padding:18px 20px;border-bottom:1px solid #edf1f5}.section-title>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eff6ff;color:#1d4ed8;font-weight:800;font-size:12px}.section-title h3{margin:0;font-size:15px}.section-title p{margin:4px 0 0;font-size:12px;color:#8190a5}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:20px}.form-grid label{font-size:12px;font-weight:600;color:#46556b}.form-grid input,.form-grid select,.form-grid textarea{width:100%;margin-top:7px;padding:11px 12px;border:1px solid #d7dee8;border-radius:9px;background:#fff;outline:none;transition:.15s}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:#4f8df7;box-shadow:0 0 0 3px rgba(37,99,235,.08)}.form-grid em{color:#dc2626;font-style:normal}.form-actions{display:flex;justify-content:flex-end;gap:10px;padding:0 20px 20px}.btn{font-weight:600;cursor:pointer;box-shadow:none}.btn.tiny{padding:6px 9px;font-size:12px;border-radius:7px}.link{color:#2563eb}.strong{font-weight:700}.profile-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.detail-grid.compact{grid-template-columns:repeat(2,1fr)}.note-box{margin-top:16px;padding:14px 16px;background:#f8fafc;border:1px solid #edf1f5;border-radius:10px}.note-box b{font-size:12px;color:#64748b}.note-box p{margin:7px 0 0;line-height:1.6}.contact-list{padding:4px 18px 12px}.contact-card{display:grid;grid-template-columns:1fr 1.35fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid #edf1f5}.contact-card:last-child{border-bottom:0}.contact-card p{margin:5px 0 0;color:#8190a5;font-size:12px}.contact-meta{display:flex;flex-direction:column;gap:5px;color:#526173;font-size:12px}.timeline{padding:8px 20px 18px}.timeline-item{position:relative;display:grid;grid-template-columns:18px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid #edf1f5}.timeline-dot{width:9px;height:9px;margin-top:5px;border-radius:50%;background:#2563eb}.timeline-item p{margin:7px 0;line-height:1.55}.timeline-item small{color:#748398}.empty{padding:22px;color:#8290a3;text-align:center}.alert{padding:12px 14px;border-radius:10px;margin:0 0 16px;border:1px solid}.alert.error{background:#fff1f2;border-color:#fecdd3;color:#b42318}.alert.success{background:#ecfdf3;border-color:#bbf7d0;color:#166534}.upgrade-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}.upgrade-card{width:min(760px,96vw)}
.qa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.qa-item{padding:14px;border:1px solid #e6ebf1;border-radius:10px}.qa-item b{display:block;margin-bottom:6px}.qa-pass{color:#15803d}.qa-fail{color:#dc2626}.qa-warn{color:#b45309}
@media(max-width:900px){.profile-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.contact-card{grid-template-columns:1fr}.page-title{align-items:flex-start;flex-direction:column}.qa-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.content{padding:18px 14px}.qa-grid{grid-template-columns:1fr}}