:root{--skcp-navy:#12344d;--skcp-navy-2:#0b2537;--skcp-green:#3fc58d;--skcp-cyan:#3aa6c9;--skcp-amber:#f5b942;--skcp-red:#e05d67;--skcp-surface:#f3f7f9}
body{background:var(--skcp-surface)}
.skcp-sidebar{background:linear-gradient(180deg,var(--skcp-navy-2),var(--skcp-navy))!important}
.skcp-sidebar .menu-link,.skcp-sidebar .menu-header-text,.skcp-sidebar .app-brand-text{color:#dce9ef!important}
.skcp-sidebar .menu-item.active>.menu-link{background:rgba(63,197,141,.17)!important;color:#fff!important}
.skcp-sidebar .menu-item.active>.menu-link:before{background:var(--skcp-green)!important}
.skcp-logo-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#fff;overflow:hidden;padding:5px;box-shadow:0 5px 14px rgba(0,0,0,.16)}
.skcp-logo-mark img{display:block;width:100%;height:100%;object-fit:contain}
.skcp-navbar-logo{width:38px;height:38px;border-radius:50%;background:#fff;padding:5px;overflow:hidden;box-shadow:0 5px 14px rgba(18,52,77,.16)}
.skcp-navbar-logo img{display:block;width:100%;height:100%;object-fit:contain}
.skcp-brand-panel{border:1px solid rgba(18,52,77,.08);overflow:hidden;background:linear-gradient(135deg,#fff 0%,#f8fbfc 100%);box-shadow:0 10px 30px rgba(18,52,77,.06)}
.skcp-brand-copy{max-width:620px}
.skcp-brand-image{display:block;width:min(360px,38vw);max-height:150px;object-fit:contain;flex:0 0 auto}
.skcp-readonly-card{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px;border-radius:14px;background:rgba(255,255,255,.08);color:#fff}
.skcp-readonly-card small{width:100%;color:#a9c0cc;line-height:1.35}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--skcp-green);box-shadow:0 0 0 4px rgba(63,197,141,.13)}
.page-kicker{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--skcp-cyan);font-weight:700}.page-title{font-size:1.8rem;font-weight:750;color:var(--skcp-navy);margin:.25rem 0}.page-subtitle{color:#697b86}
.metric-card{border:0;box-shadow:0 8px 24px rgba(18,52,77,.07)}.metric-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;font-size:24px}.metric-value{font-size:1.65rem;font-weight:750;color:var(--skcp-navy)}
.bg-soft-green{background:rgba(63,197,141,.14);color:#16825b}.bg-soft-cyan{background:rgba(58,166,201,.14);color:#237e9c}.bg-soft-amber{background:rgba(245,185,66,.17);color:#9a6c06}.bg-soft-navy{background:rgba(18,52,77,.1);color:var(--skcp-navy)}.bg-soft-red{background:rgba(224,93,103,.13);color:#b33d48}
.energy-flow{position:relative;min-height:390px;background:radial-gradient(circle at center,rgba(63,197,141,.09),transparent 44%)}.flow-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:138px;height:138px;border-radius:32px;background:var(--skcp-navy);color:#fff;display:grid;place-items:center;text-align:center;box-shadow:0 18px 40px rgba(18,52,77,.2)}.flow-node{position:absolute;width:150px;padding:16px;border:1px solid #e0e9ed;border-radius:18px;background:#fff;text-align:center;box-shadow:0 8px 22px rgba(18,52,77,.08)}.flow-node i{font-size:28px}.flow-pv{left:50%;top:10px;transform:translateX(-50%)}.flow-grid{left:12px;top:50%;transform:translateY(-50%)}.flow-load{right:12px;top:50%;transform:translateY(-50%)}.flow-battery{left:50%;bottom:10px;transform:translateX(-50%)}.flow-line{position:absolute;background:linear-gradient(90deg,var(--skcp-green),var(--skcp-cyan));opacity:.65}.flow-line-v{width:3px;height:74px;left:50%;transform:translateX(-50%)}.flow-line-top{top:93px}.flow-line-bottom{bottom:93px}.flow-line-h{height:3px;width:92px;top:50%;transform:translateY(-50%)}.flow-line-left{left:153px}.flow-line-right{right:153px}
.site-card{transition:.2s ease;border:1px solid transparent}.site-card:hover{transform:translateY(-3px);border-color:rgba(63,197,141,.38);box-shadow:0 14px 30px rgba(18,52,77,.1)}
.chart-box{min-height:350px}.system-service{border-left:4px solid var(--skcp-green)}.placeholder-logo{border:2px dashed #cbd9df;border-radius:16px;padding:22px;text-align:center;color:#7c8e98;background:#f8fbfc}
@media(max-width:767px){.page-title{font-size:1.45rem}.energy-flow{min-height:500px}.flow-grid{left:50%;top:140px;transform:translateX(-50%)}.flow-load{right:auto;left:50%;top:auto;bottom:140px;transform:translateX(-50%)}.flow-pv{top:0}.flow-battery{bottom:0}.flow-line{display:none}.flow-center{width:118px;height:118px}.flow-node{width:140px;padding:12px}}

/* SKCP mobile refinement v0.3.1 */
@media (max-width: 767.98px) {
  .content-wrapper .container-xxl,
  .content-wrapper .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .page-title { font-size: 1.35rem; }
  .page-subtitle { font-size: 0.9rem; }
  .metric-value { font-size: 1.3rem; }
  .metric-icon { width: 42px; height: 42px; font-size: 21px; }

  .card-header { padding: 1rem 1rem 0.7rem; }
  .card-body { padding: 1rem; }
  .row.g-5, .row.g-6 { --bs-gutter-x: 0.85rem; --bs-gutter-y: 0.85rem; }

  /* Two-by-two mobile flow layout with the inverter as a full-width center. */
  .energy-flow {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "pv grid"
      "center center"
      "load battery";
    gap: 0.8rem;
    padding: 0.25rem 0;
    background: radial-gradient(circle at center, rgba(63,197,141,.09), transparent 58%);
  }

  .energy-flow .flow-line { display: none; }

  .energy-flow .flow-node,
  .energy-flow .flow-center {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
  }

  .energy-flow .flow-node {
    padding: 0.8rem 0.55rem;
    border-radius: 16px;
    line-height: 1.25;
  }

  .energy-flow .flow-node i { font-size: 24px; }
  .energy-flow .flow-node strong { font-size: 0.95rem; }
  .energy-flow .flow-node span,
  .energy-flow .flow-node small {
    display: block;
    overflow-wrap: anywhere;
    font-size: 0.86rem;
  }

  .energy-flow .flow-pv { grid-area: pv; }
  .energy-flow .flow-grid { grid-area: grid; }
  .energy-flow .flow-load { grid-area: load; }
  .energy-flow .flow-battery { grid-area: battery; }

  .energy-flow .flow-center {
    grid-area: center;
    min-height: 82px;
    padding: 0.85rem 1rem;
    border-radius: 20px;
  }

  .energy-flow .flow-center > div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 0.6rem;
    row-gap: 0.15rem;
  }

  .energy-flow .flow-center i { font-size: 1.55rem !important; }
  .energy-flow .flow-center strong { font-size: 0.95rem; }
  .energy-flow .flow-center small { width: 100%; font-size: 0.8rem; }

  .chart-box { min-height: 280px; }
  .card-header.d-flex.justify-content-between {
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .card-header .form-select.w-auto { width: 100% !important; }
}

@media (max-width: 374.98px) {
  .energy-flow { gap: 0.55rem; }
  .energy-flow .flow-node { padding: 0.7rem 0.4rem; }
  .energy-flow .flow-node span,
  .energy-flow .flow-node small { font-size: 0.78rem; }
  .metric-value { font-size: 1.18rem; }
}

@media (max-width: 991.98px){.skcp-brand-image{width:min(330px,80vw);max-height:135px}.skcp-brand-panel .card-body{padding-top:1.25rem;padding-bottom:1.25rem}}
@media (max-width: 575.98px){.skcp-logo-mark{width:36px;height:36px;padding:4px}.skcp-navbar-logo{width:34px;height:34px;padding:4px}.skcp-brand-image{width:min(290px,88vw);max-height:120px}.skcp-brand-copy .h4{font-size:1.1rem}}