:root{--bg-color: #f8fafc;--panel-bg: #ffffff;--border-color: #e2e8f0;--accent-blue: #31686F;--accent-light: #e6eef0;--text-primary: #0f172a;--text-secondary: #64748b;--card-radius: 10px;--font-main: "Inter", sans-serif;--font-heading: "Outfit", sans-serif;--shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-main);line-height:1.5;-webkit-font-smoothing:antialiased}#app{max-width:1400px;margin:0 auto;padding:30px 40px}header{margin-bottom:30px;display:flex;align-items:center;gap:40px}@media (max-width: 1000px){header{flex-direction:column;align-items:flex-start}}.logo-container{flex-shrink:0}.logo-container img{height:50px;width:auto;display:block}.summary-cards{display:flex;gap:16px;flex-grow:1}.card{background:var(--panel-bg);border:1px solid var(--border-color);padding:16px 20px;border-radius:var(--card-radius);box-shadow:var(--shadow);flex:1;min-width:180px;transition:all .2s ease}.card:hover{border-color:var(--accent-blue);box-shadow:var(--shadow-hover)}.card label{display:block;font-size:.7rem;color:var(--text-secondary);font-weight:600;text-transform:uppercase;margin-bottom:4px;letter-spacing:.05em}.card .value{font-size:1.75rem;font-weight:700;color:var(--accent-blue);font-family:var(--font-heading)}.card input{background:var(--bg-color);border:1px solid var(--border-color);color:var(--text-primary);font-size:1.25rem;font-weight:700;width:100%;padding:6px 10px;border-radius:6px;outline:none}main{display:grid;grid-template-columns:320px 1fr;gap:30px}@media (max-width: 1100px){main{grid-template-columns:1fr}}h2{font-size:.9rem;margin-bottom:20px;color:var(--text-secondary);font-weight:700;text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;gap:8px}h2:after{content:"";height:2px;background:var(--accent-blue);flex-grow:1;opacity:.3}.controls{background:var(--panel-bg);padding:24px;border-radius:var(--card-radius);border:1px solid var(--border-color);box-shadow:var(--shadow)}.input-grid{display:flex;flex-direction:column;gap:16px}.input-group{display:flex;justify-content:space-between;align-items:center;gap:10px}.input-group label{font-size:.8rem;font-weight:500;color:var(--text-secondary);flex-grow:1}.input-group input{background:var(--bg-color);border:1px solid var(--border-color);color:var(--text-primary);padding:6px 10px;border-radius:6px;width:100px;font-size:.9rem;font-weight:600;text-align:right;transition:all .2s ease}.input-group input:focus{border-color:var(--accent-blue);background:#fff;outline:none}.process-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.process-card{background:var(--panel-bg);padding:16px 20px;border-radius:var(--card-radius);border:1px solid var(--border-color);box-shadow:var(--shadow)}.proc-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.proc-name{font-weight:600;font-size:.85rem;color:var(--text-primary)}.proc-value{background:var(--accent-light);color:var(--accent-blue);padding:2px 8px;border-radius:10px;font-weight:700;font-size:.75rem}.progress-bar{height:8px;background:#f1f5f9;border-radius:4px;overflow:hidden}.progress-fill{height:100%;border-radius:4px;background:var(--accent-blue);transition:width .6s cubic-bezier(.4,0,.2,1)}
