body{font-family:Arial,sans-serif;background:#f6f7fb;margin:0}
.container{max-width:1200px;margin:24px auto;padding:0 16px}
.card{background:#fff;border-radius:14px;padding:16px;box-shadow:0 8px 22px rgba(0,0,0,.06)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.topbar a{margin-left:12px;text-decoration:none;color:#0b3a68;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.row{display:flex;gap:10px;margin:10px 0 16px}
input,select,textarea{width:100%;padding:10px;border:1px solid #d7dbe7;border-radius:10px}
button{padding:10px 14px;border:0;border-radius:10px;background:#0b3a68;color:#fff;cursor:pointer;font-weight:700}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px;border-bottom:1px solid #eee}
.badge{display:inline-block;padding:3px 8px;border-radius:10px;background:#eef2ff;font-size:12px}
.error{color:#b00020;font-weight:700}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.tabs a{padding:8px 10px;border-radius:10px;background:#eef2ff;text-decoration:none;color:#0b3a68;font-weight:700}
.tabs a.active{background:#0b3a68;color:#fff}
.big{font-size:28px;font-weight:800;margin:8px 0 0}
@media (max-width: 900px){.grid{grid-template-columns:1fr 1fr}}


.app-header{
  position:sticky; top:0; z-index:999;
  background:#ffffffcc; backdrop-filter: blur(8px);
  border-bottom:1px solid #e8edf6;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; gap:14px;
}
.brand{display:flex; align-items:center; gap:12px}
.brand-logo{height:46px; width:auto; display:block}
.brand-name{font-size:16px; font-weight:800; color:#0b3a68; line-height:1}
.brand-sub{font-size:12px; color:#6b7280; margin-top:2px}
.nav{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.nav a{
  text-decoration:none; padding:8px 10px; border-radius:10px;
  background:#eef2ff; color:#0b3a68; font-weight:800; font-size:13px;
}
.nav a:hover{filter:brightness(0.97)}
.app-container{max-width:1200px; margin:18px auto; padding:0 16px}


.chart-card{padding:18px}
.chart-wrap{height:280px}
.roi-green{background:rgba(34,197,94,.14); color:#166534}
.roi-yellow{background:rgba(245,158,11,.18); color:#92400e}
.roi-red{background:rgba(239,68,68,.16); color:#991b1b}
@media (prefers-color-scheme: dark){
  .roi-green{background:rgba(34,197,94,.22); color:#86efac}
  .roi-yellow{background:rgba(245,158,11,.22); color:#fde68a}
  .roi-red{background:rgba(239,68,68,.22); color:#fecaca}
}