/* Auth hero (dashboard-like first screen) */
    .hero-auth{display:none;}
    .hero-auth .dash{
      width:100%;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 28px;
      background: rgba(16,16,26,.72);
      padding: 18px;
      box-shadow: 0 18px 60px rgba(0,0,0,.35);
    }
    .dash-grid{
      display:grid;
      grid-template-columns: 1fr 2fr;
      grid-template-rows: 1fr 1fr 1fr;
      gap: 14px;
      min-height: 340px;
    }
    .dash-card{
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 22px;
      background: rgba(10,10,18,.35);
      padding: 14px 16px;
      overflow:hidden;
    }
    .dash-metric{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}
    .dash-metric .t{color:rgba(242,243,247,.72);font-weight:850;font-size:15px;text-align:center;}
    .dash-metric .v{margin-top:6px;font-size:30px;font-weight:950;letter-spacing:.2px;text-align:center;}
    .dash-metric .mini{margin-top:10px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;color:rgba(242,243,247,.82);font-size:15px;width:100%;text-align:center;}
    .dash-metric .mini b{font-weight:900;}
    .dash-logo{display:flex;align-items:center;justify-content:center;padding:0;}
    .dash-logo img{max-width:260px;width:92%;height:auto;opacity:.98;filter: drop-shadow(0 10px 28px rgba(0,0,0,.35));}
    .dash-chart{grid-row: 1 / span 2; grid-column: 2; padding: 12px 14px;}
    .dash-chart .h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px;}
    .dash-chart .h .t{font-weight:950;font-size:22px;}
    .dash-chart .h .s{color:rgba(242,243,247,.68);font-size:13px;font-weight:650;}
    /* Sub-label under "Приход и расход" is not needed */
    #profitSub{display:none;}
    #profitChart{width:100%;height:200px;display:block;}
    .dash-advice{grid-column: 1 / -1; display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;}
    .dash-advice .t{font-weight:950;}
    .dash-advice .p{color:rgba(242,243,247,.82);max-width:95ch;text-align:center;}
    @media (max-width: 920px){
      .dash-grid{grid-template-columns: 1fr; grid-template-rows: auto; min-height: unset;}
      .dash-chart{grid-row:auto; grid-column:auto;}
      .dash-advice{grid-column:auto;}
    }
  
    /* WB-like chart layout on auth hero */
    .wb-kpis{display:flex;align-items:flex-end;justify-content:flex-start;gap:28px;flex-wrap:wrap;margin:10px 0 12px;}
    .wb-title{font-weight:950;font-size:18px;text-align:center;margin:2px 0 10px;}
    .wb-kpi{min-width:160px;}
    .wb-kpi .k{color:rgba(242,243,247,.72);font-weight:850;font-size:13px;}
    /* Keep income/expense values on one line on mobile */
    /* Values were too large on small screens and started overlapping.
       Make them ~2x smaller while keeping them on one line. */
    .wb-kpi .v{margin-top:6px;font-size:clamp(10px, 3.4vw, 14px);font-weight:980;letter-spacing:.2px;white-space:nowrap;line-height:1.15;}
    .wb-kpi .v.neg{color:var(--accent);}
    /* Make the side details a bit narrower so the chart gets more focus */
    .wb-main{display:grid;grid-template-columns: 1fr 210px;gap:14px;align-items:start;}
    .wb-canvasWrap{min-width:0;}
    #profitChart{height:220px;}
    .wb-details{border-left:1px solid rgba(255,255,255,.08);padding-left:14px;}
    .wb-details .dt{color:rgba(242,243,247,.72);font-weight:900;font-size:12px;margin-bottom:8px;}
    .detail-list{display:flex;flex-direction:column;gap:8px;}
    .detail-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px;color:rgba(242,243,247,.82);}
    .detail-row .name{opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}
    .detail-row .val{font-weight:900;}
    .wb-legend{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:10px;color:rgba(242,243,247,.80);font-size:12px;}
    /* Hover tooltip like WB */
    .wb-canvasWrap{position:relative;}
    .wb-tip{position:absolute;left:0;top:0;pointer-events:none;opacity:0;transform:translateY(-6px);transition:opacity .08s ease, transform .08s ease;z-index:6;
      padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(16,16,26,.94);
      box-shadow:0 16px 50px rgba(0,0,0,.45);min-width:240px;font-size:13px;}
    .wb-tip .t{font-weight:950;margin-bottom:6px;}
    .wb-tip .r{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:4px 0;color:rgba(242,243,247,.86);}
    .wb-tip .l{display:flex;align-items:center;gap:8px;}
    .wb-tip .dot{width:10px;height:10px;border-radius:999px;display:inline-block;}
    .wb-tip .v{font-weight:950;color:rgba(242,243,247,.96);}
    .leg-dot{width:10px;height:10px;border-radius:999px;display:inline-block;transform:translateY(1px);}
    .leg-item{display:flex;align-items:center;gap:8px;}
    @media (max-width: 920px){
      .wb-main{grid-template-columns: 1fr;}
      .wb-details{border-left:none;padding-left:0;border-top:1px solid rgba(255,255,255,.08);padding-top:12px;}
      .detail-row .name{max-width:unset;}
    }


    @media (max-width: 560px){
      .dash-chart .h{flex-direction:column;align-items:flex-start;}
      .dash-chart .h > div:last-child{width:100%;justify-content:flex-start;}
      .dash-chart .h select{width:100%;max-width:420px;}
      .dash-chart .h a.btn{width:100%;max-width:420px;justify-content:center;}
      .wb-kpis{gap:12px;justify-content:space-between;}
      .wb-kpi{min-width:0;flex:1;}
      .wb-kpi .v{font-size:clamp(9px, 4.2vw, 12px);}
    }


/* SEO-friendly guest hero additions without breaking auth dashboard */
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px;justify-content:center;}
.hero-badge{display:inline-flex;align-items:center;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);font-weight:800;color:rgba(242,243,247,.88);font-size:14px;}
.footer-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:0 0 12px;}
.footer-links a{color:rgba(242,243,247,.78);text-decoration:none;border-bottom:1px solid transparent;}
.footer-links a:hover{border-color:rgba(242,243,247,.3);}
@media (max-width: 640px){
  .hero-badges{justify-content:flex-start;}
  .hero-badge{font-size:13px;padding:9px 12px;}
}