*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--ui-font);
  color:var(--ui-text);
  background:linear-gradient(160deg,var(--ui-bg-a),var(--ui-bg-b) 55%,var(--ui-bg-c));
  min-height:100vh;
}
a{color:inherit}
.ui-shell{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:24px 16px 64px}
.ui-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.ui-title{margin:0;font-size:28px;font-weight:800;letter-spacing:0}
.ui-subtitle{margin:6px 0 0;color:var(--ui-sub);font-size:13px;line-height:1.7}
.ui-skin-switch{display:flex;gap:8px;flex-wrap:wrap}
.ui-chip{
  text-decoration:none;padding:8px 10px;border-radius:999px;
  background:var(--ui-surface);border:1px solid var(--ui-border);font-size:11px;font-weight:700;
  transition:transform var(--ui-speed-fast) ease, background var(--ui-speed-fast) ease;
}
.ui-chip:hover{transform:translateY(-1px);background:var(--ui-surface-strong)}
.ui-grid{display:grid;gap:16px}
.ui-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ui-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ui-card{
  background:var(--ui-surface);
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius-card);
  box-shadow:var(--ui-shadow-card);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.ui-card__body{padding:18px}
.ui-section-title{margin:0 0 12px;font-size:16px;font-weight:800}
.ui-kpi{display:grid;gap:6px}
.ui-kpi__label{font-size:11px;color:var(--ui-sub);font-weight:700;text-transform:uppercase}
.ui-kpi__value{font-size:28px;font-weight:900}
.ui-kpi__meta{font-size:12px;color:var(--ui-sub)}
.ui-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 16px;border-radius:12px;border:1px solid transparent;
  text-decoration:none;font-size:13px;font-weight:800;cursor:pointer;
  transition:transform var(--ui-speed-fast) ease, filter var(--ui-speed-fast) ease, background var(--ui-speed-fast) ease;
}
.ui-btn:hover{transform:translateY(-1px);filter:brightness(1.02)}
.ui-btn--primary{background:linear-gradient(135deg,var(--ui-primary),var(--ui-primary-2));color:#fff}
.ui-btn--ghost{background:var(--ui-surface);border-color:var(--ui-border);color:var(--ui-text)}
.ui-form{display:grid;gap:18px}
.ui-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ui-field{display:grid;gap:8px}
.ui-label{font-size:12px;font-weight:700;color:var(--ui-sub)}
.ui-input,.ui-select,.ui-textarea{
  width:100%;border-radius:12px;border:1px solid var(--ui-border);
  background:var(--ui-surface-strong);color:var(--ui-text);padding:12px 14px;
  font:inherit;outline:none;transition:border-color var(--ui-speed-fast) ease, transform var(--ui-speed-fast) ease;
}
.ui-input:focus,.ui-select:focus,.ui-textarea:focus{border-color:var(--ui-primary);transform:translateY(-1px)}
.ui-textarea{min-height:120px;resize:vertical}
.ui-switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-surface-strong)}
.ui-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ui-sub)}
.ui-legend__item{display:inline-flex;align-items:center;gap:6px}
.ui-legend__dot{width:10px;height:10px;border-radius:999px;background:var(--ui-primary)}
.ui-chart,.ui-donut{display:block;width:100%;height:auto}
.ui-chart__grid{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1}
.ui-chart__line{fill:none;stroke:var(--chart-stroke,#ff7b45);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.ui-donut__track{fill:none;stroke:rgba(255,255,255,.15);stroke-width:10}
.ui-donut__value{fill:none;stroke:var(--donut-stroke,#ff5f8f);stroke-width:10;transform:rotate(-90deg);transform-origin:50% 50%;stroke-linecap:round}
.ui-donut__number{fill:var(--ui-text);font-size:18px;font-weight:900}
.ui-donut__label{fill:var(--ui-sub);font-size:7px;font-weight:700;text-transform:uppercase}
.ui-list{display:grid;gap:10px}
.ui-item{
  display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;
  padding:12px 14px;border-radius:12px;border:1px solid var(--ui-border);background:var(--ui-surface-strong);
}
.ui-item__title{font-size:13px;font-weight:700}
.ui-item__meta{font-size:11px;color:var(--ui-sub)}
@media (max-width: 860px){
  .ui-grid--2,.ui-grid--3,.ui-form-grid{grid-template-columns:1fr}
}