@import url('shared.css');

.bar-chart{display:flex;align-items:flex-end;gap:12px;height:200px;padding:0 10px}
.bar-group{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.bar{width:100%;max-width:48px;background:linear-gradient(180deg,#00B8A9,#4dd9cb);border-radius:3px 3px 0 0;transition:height .6s ease;position:relative;min-height:4px}
.bar:hover{background:linear-gradient(180deg,#009e92,#00B8A9)}
.bar-label{font-size:12px;color:#999}
.bar-value{font-size:11px;color:#666;font-weight:500}
.progress{height:18px;background:#E4E7ED;border-radius:10px;overflow:hidden;display:flex}
.progress-bar{height:100%;background:#00B8A9;transition:width .4s;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;font-weight:500}
.progress-bar.success{background:var(--color-success)}
.progress-bar.warning{background:var(--color-warning)}
.stars{color:var(--color-warning);letter-spacing:2px;font-size:14px}
.detail-info{grid-template-columns:repeat(3,1fr)}
.dynamic-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 2fr 1fr auto;gap:8px;align-items:center;margin-bottom:8px}
.dynamic-row .form-control{height:32px;font-size:12px}
.remove-row-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:#fef0f0;color:var(--color-danger);border-radius:4px;cursor:pointer;font-size:16px}
.remove-row-btn:hover{background:var(--color-danger);color:#fff}
.comparison-grid{display:grid;grid-template-columns:200px repeat(5,1fr);gap:1px;background:#E4E7ED;border:1px solid #E4E7ED;border-radius:4px;overflow:hidden}
.comparison-cell{background:#fff;padding:10px 14px;font-size:13px;color:#666}
.comparison-cell.header{background:#FAFAFA;font-weight:500;color:#333}
.comparison-cell.best{color:var(--color-success);font-weight:700}