#article-metrics-dialog { width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid #c7d9eb; border-radius: 16px; background: #fff; color: #24364b; box-shadow: 0 24px 80px #10243e66; }
    #article-metrics-dialog::backdrop { background: #10243eb3; }
    #article-metrics-dialog .metrics-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: linear-gradient(110deg, #1f345c, #087f8c); color: white; }
    #article-metrics-dialog .metrics-heading h2 { margin: 0; padding: 0; border: 0; font: 700 1.15rem system-ui, sans-serif; color: white; }
    #article-metrics-dialog .metrics-close { width: 38px; height: 38px; flex-shrink: 0; border: 1px solid #ffffff80; border-radius: 50%; color: white; background: #ffffff20; cursor: pointer; font-size: 1.5rem; }
    #article-metrics-dialog #article-usage { margin: 0; border: 0; border-radius: 0; padding: 1.25rem; background: #f8fbff; }
    #article-metrics-dialog #article-usage .usage-cards div { border: 1px solid #bfd9f5; background: #e8f2ff; color: #174d87; padding: 1rem .5rem; border-radius: 10px; }
    #article-metrics-dialog #article-usage .usage-cards div:nth-child(2) { background: #dcf6ee; color: #08644e; border-color: #a5ddcb; }
    #article-metrics-dialog #article-usage .usage-cards div:nth-child(3) { background: #fff0da; color: #885000; border-color: #f1ce97; }
    #article-metrics-dialog #article-usage .usage-cards strong { font-size: 2rem; }
    #article-metrics-dialog #article-usage .usage-cards span { font-weight: 600; font-size: .8rem; }
    #article-metrics-dialog [data-metrics-status] { color: #465b70; background: #eaf0f7; border-radius: 6px; padding: .65rem .8rem; margin: .9rem 0; }
    #article-metrics-dialog details { background: white; border: 1px solid #dbe5ee; border-radius: 6px; padding: .7rem .8rem; }
    #article-metrics-dialog summary { color: #245889; font-weight: 600; }
    .ja-actions .ja-btn-metrics { background: linear-gradient(110deg, #5144af, #176ab1); color: #fff; border: 1px solid #635cc0; box-shadow: 0 3px 8px #5144af30; }
    .ja-actions .ja-btn-metrics:hover { opacity: 1; filter: brightness(1.12); }
    .ja-btn-metrics:focus-visible, #article-metrics-dialog button:focus-visible { outline: 3px solid #e8aa27; outline-offset: 3px; }

      #article-usage { border: 1px solid #e5ddd0; border-radius: 8px; padding: 1rem; margin: 0 0 1.5rem; font-family: system-ui, sans-serif; }
      #article-usage h2 { margin: 0 0 .75rem; padding: 0; border: 0; font-size: 1rem; color: #325d88; }
      #article-usage .usage-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
      #article-usage .usage-cards div { padding: .75rem .4rem; background: #f7f5f1; border-radius: 6px; text-align: center; color: #1f345c; }
      #article-usage strong { display: block; font-size: 1.6rem; }
      #article-usage span { display: block; font-size: .75rem; }
      #article-usage p, #article-usage details { font-size: .75rem; line-height: 1.5; }
      #article-usage [data-metrics-status] { margin: .6rem 0; }
      #article-usage summary { cursor: pointer; }
      @media (max-width: 400px) { #article-usage .usage-cards { grid-template-columns: 1fr; } }
    
#article-metrics-dialog .metrics-start-note {font-size:.72rem;color:#526579;margin:.85rem 0 .3rem;}
#article-metrics-dialog [data-metrics-status]:empty {display:none;}