:root{
    --bg:#FAF6F0; --panel:#ffffff; --border:#ede6d8; --border2:#ddd2c0;
    --ink:#2B2420; --sub:#8a7f6f; --sub2:#a89d8c; --sub3:#b3a992;
    --accent:#E85D42; --good:#0f9d6c; --bad:#d94f4f;
    --serif:'Noto Serif JP', serif;
    --sans:'Inter','Noto Sans JP',-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;
    /* 2026-08-23: 下部固定ナビ(.bottom-nav)がホーム画面含む全ページ共通になった
       (以前は詳細ページ専用)ため、本文末尾がナビに隠れないための余白量を
       一箇所にまとめておく(ナビの実高さが変わったらここだけ直せばよい)。 */
    --bottom-nav-space: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  *{ box-sizing:border-box; }
  body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
  a{ color:var(--accent); text-decoration:none; }
  button, input{ font-family:var(--sans); }

  /* 2026-08-24: 半透明+backdrop-filter:blurの「すりガラス」ヘッダーは、以前の
     1行だけの短いヘッダーでは目立たなかったが、ホーム画面再構成でヘッダーが
     3段(ブランド行/サブテキスト/タブ)に高くなったことで、少しスクロールしただけで
     すぐ下のダークな「マーケット概況カード」が透けて写り込み、実機で「ステータス行が
     色あせて見える・タブの上に幽霊のように重なって見える」という表示崩れとして
     再現した。ヘッダー背景を不透明にして解消する。 */
  .sticky-top{ position:sticky; top:0; z-index:40; background:var(--bg); border-bottom:1px solid var(--border); }
  .back-row{ max-width:760px; margin:0 auto; padding:16px 32px 0; }
  .back-btn{ background:none; border:none; padding:0; cursor:pointer; font-size:14px; color:var(--ink); font-weight:600; }
  /* 2026-08-23: ホーム画面再構成(PROモックアップ準拠)で、ヘッダーを単一行の
     flexから「ロゴ+アイコン行」「対象銘柄・ライブ件数のサブテキスト」「タブ行」の
     3段スタックに変更した。 */
  .header-bar{ max-width:1440px; margin:0 auto; padding:16px 32px; display:flex; flex-direction:column; gap:10px; }
  .header-top-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .header-brand{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .header-brand .name{ font-family:var(--serif); font-weight:700; font-size:23px; color:var(--ink); letter-spacing:-0.01em; }
  .header-brand .meta{ font-size:11px; color:var(--sub2); }
  .pro-badge{ display:inline-flex; align-items:center; font-size:10.5px; font-weight:800; letter-spacing:0.03em; color:#7a5a12; background:linear-gradient(135deg,#f7dd9a,#e8b23c); padding:3px 8px; border-radius:6px; }
  .header-icon-row{ display:flex; align-items:center; gap:2px; flex-shrink:0; }
  .header-icon-btn{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border:none; background:transparent; border-radius:999px; padding:0; cursor:pointer; }
  .header-icon-btn:active{ background:#efe9dd; }
  .header-subtitle{ font-size:11.5px; color:var(--sub2); }
  /* 2026-08-23: 上部タブが6項目(ホーム/ウォッチリスト/アラート/アーカイブ/比較/設定)に
     増えたことで、狭い画面幅ではflex-wrap:wrapだと2段に折り返ってしまっていた
     (折り返すとwrap優先でoverflow-x:autoのスクロールが効かないCSSの仕様のため)。
     折り返さず横スクロールする1行のタブバーにする。
     2026-08-16に.point-gridで踏んだのと同じ教訓(隠しスクロールバーだと「隠れた
     項目がある」ことにユーザーが気付けない)を踏まえ、ここではscrollbar-width:none等で
     バーを隠さず、ネイティブのスクロールバーをそのまま出す。 */
  .header-tabs{ display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; }
  .header-tabs button{ flex-shrink:0; padding:9px 16px; border-radius:999px; border:none; font-size:13px; cursor:pointer; white-space:nowrap; }

  .content{ max-width:1440px; margin:0 auto; padding:36px 32px calc(80px + var(--bottom-nav-space)); }
  .state-msg{ padding:14px 20px; text-align:center; font-size:13px; border-radius:10px; }
  .state-msg.loading{ background:#f0ebe1; color:var(--sub); }
  .state-msg.error{ background:#fbe9e4; color:#a8442c; }
  .empty-box{ background:var(--panel); border:1px dashed var(--border2); border-radius:12px; padding:40px 20px; text-align:center; color:var(--sub); font-size:13.5px; }

  .logo-box{ flex-shrink:0; background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; }
  .logo-box .logo-fallback-text{ font-weight:700; }

  .home-grid{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:36px; align-items:start; }
  /* 2026-08-16: ここが単なる"1fr"だと、gridの列は中身(ヒーロー記事のタイトル行等)の
     min-content幅より縮めてもらえず、画面幅より広いまま右にはみ出す
     (以前.point-grid/.kpi-top-gridで踏んだのと同じ、gridの"1frは中身の最小幅未満に
     縮まない"という既知の罠。実機で、タイトルや上部メタ情報が画面端で見切れる形で
     再現した)。minmax(0,1fr)にして、画面幅に収まるよう強制的に縮められるようにする。 */
  /* PCでは広い本文と右サイドバーを維持し、タブレットでは一列に切り替える。 */
  @media (max-width:1200px){
    .header-bar{ padding-left:24px; padding-right:24px; }
    .content{ padding-left:24px; padding-right:24px; }
    .home-grid{ grid-template-columns:minmax(0,1fr) 300px; gap:28px; }
  }
  @media (max-width:980px){
    .home-grid{ grid-template-columns:minmax(0,1fr); }
    .sidebar{ display:none; }
  }

  .chips-row{ display:flex; gap:8px; overflow-x:auto; margin-bottom:28px; }
  .chip{ flex-shrink:0; display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; padding:9px 18px; border-radius:999px; border:1px solid var(--border2); background:transparent; cursor:pointer; white-space:nowrap; }
  .chip-star{ background:none; border:none; padding:0; margin-right:1px; cursor:pointer; font-size:14px; line-height:1; }

  .hero{ cursor:pointer; margin-bottom:44px; display:flex; gap:24px; align-items:flex-start; }
  .hero-meta{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
  .hero-title{ font-family:var(--serif); font-weight:700; font-size:30px; color:var(--ink); line-height:1.3; margin-bottom:8px; }
  .hero-orig{ font-size:12.5px; color:var(--sub2); margin-bottom:14px; }
  .hero-lines{ border-left:2px solid; padding-left:14px; font-size:15px; line-height:1.75; color:#5c5347; margin-bottom:16px; }
  .hero-point-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
  .hero-point-card{ min-width:0; box-sizing:border-box; background:#fff; border:1px solid #e6e2dc; border-radius:9px; padding:12px 14px; text-align:left; display:flex; gap:10px; align-items:flex-start; }
  .hero-point-icon{ width:22px; height:22px; flex-shrink:0; }
  .hero-point-icon svg{ width:20px; height:20px; }
  .hero-point-body{ min-width:0; }
  .hero-point-tag{ margin:0 0 3px; color:var(--good); font-size:12px; line-height:1.35; font-weight:800; }
  .hero-point-text{ color:#3d3935; font-size:12.5px; line-height:1.55; font-weight:500; overflow-wrap:anywhere; }
  @media (max-width:640px){ .hero-point-grid{ grid-template-columns:minmax(0,1fr); } }
  .hero-footer{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--sub2); }
  .save-btn{ background:none; border:none; padding:0; cursor:pointer; font-size:inherit; font-weight:600; color:var(--ink); }

  .section-divider{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
  .section-divider .label{ font-size:11px; font-weight:700; letter-spacing:0.1em; color:var(--sub2); text-transform:uppercase; white-space:nowrap; }
  .section-divider .line{ flex:1; height:1px; background:var(--border2); }

  .list{ display:flex; flex-direction:column; gap:20px; }
  .list-item{ cursor:pointer; display:flex; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--border); }
  .list-title{ font-family:var(--serif); font-weight:700; font-size:16.5px; color:var(--ink); line-height:1.4; margin-bottom:6px; }
  .list-oneline{ font-size:12.5px; color:#5c5347; line-height:1.6; margin-bottom:8px; }
  .list-footer{ display:flex; align-items:center; justify-content:space-between; font-size:11.5px; color:var(--sub2); }

  .sidebar{ display:flex; flex-direction:column; gap:28px; position:sticky; top:96px; }
  .sidebar .label{ font-size:11px; font-weight:700; color:var(--sub2); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:10px; }
  .sidebar input{ width:100%; box-sizing:border-box; padding:10px 2px; border:none; border-bottom:1.5px solid var(--border2); background:transparent; font-size:13.5px; color:var(--ink); outline:none; }
  .kw-chip{ display:flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px; border:1px solid var(--border2); font-size:12px; color:var(--ink); }
  .kw-chip button{ background:none; border:none; padding:0; cursor:pointer; color:var(--sub2); font-size:12px; line-height:1; }
  .reading-item{ cursor:pointer; font-size:13px; color:var(--ink); line-height:1.4; font-family:var(--serif); font-weight:600; }
  .empty-note{ font-size:12.5px; color:var(--sub3); }

  /* 2026-08-16: ホーム画面(記事一覧)はPC基準のフォントサイズ・余白のままで、
     スマホ幅向けの縮小が無かった。特にヒーロー記事の見出しが30pxのまま画面幅の
     半分ちょっとの列に収まろうとして6行前後に折り返し、開いた瞬間に1記事だけで
     画面が埋まってしまう(「拡大されたまま」に見える)状態だったための調整。
     detail-view(記事詳細)側は別の@media(max-width:640px)で既に調整済みなので、
     ここではホーム/一覧の要素だけを対象にする。 */
  @media (max-width:640px){
    /* Reference layout: a dense, phone-first daily briefing rather than a
       shrunk desktop page.  These values also work at the 552px design width. */
    .sticky-top{ border-bottom:0; }
    .header-bar{ padding:10px 20px 0; gap:5px; }
    .header-brand .name{ font-size:27px; line-height:1; letter-spacing:-.04em; }
    .pro-badge{ padding:3px 8px; font-size:9px; }
    .header-icon-btn{ width:30px; height:30px; }
    .header-subtitle{ font-size:10.5px; }
    .header-tabs{ justify-content:space-between; gap:0; overflow:visible; }
    .header-tabs button{ flex:1; padding:9px 1px 8px; border-radius:0; font-size:10px; }
    .header-tabs button.active-tab{ color:var(--good) !important; background:transparent !important; border-bottom:2px solid var(--good); }
    .back-row{ padding:12px 16px 0; }
    .content{ padding:10px 20px calc(22px + var(--bottom-nav-space)); }
    .chip{ padding:7px 14px; font-size:12px; }
    .hero{ gap:14px; margin-bottom:32px; }
    .hero .logo-box{ width:64px !important; height:64px !important; }
    .hero-title{ font-size:21px; margin-bottom:6px; }
    .hero-lines{ font-size:13.5px; line-height:1.65; margin-bottom:12px; }
    .hero-orig{ font-size:11.5px; margin-bottom:10px; }
    /* 2026-08-19: 上のヒーロー記事・記事詳細ページは縮小済みだったが、その下に並ぶ
       通常の記事一覧(.list-item、大半の記事はこちら)はPC基準のサイズ(16.5px見出し等)
       のまま手つかずで、スマホで見ると見出し・本文とも大きすぎる状態だったための調整。 */
    .list{ gap:10px; }
    .list-item{ gap:12px; padding-bottom:16px; }
    .list-item .logo-box{ width:52px !important; height:52px !important; }
    .list-title{ font-size:14px; margin-bottom:4px; }
    .list-oneline{ font-size:11.5px; line-height:1.55; margin-bottom:6px; }
    .list-footer{ font-size:10.5px; }

  }

  /* ============================================================
     2026-08-23: ホーム画面再構成(ユーザー提示のPROモックアップに準拠)。
     マーケット概況カード・ステータス行・本日の最重要ニュース・ニュース種別
     チップ・記事フッターの調査導線・PRO案内バナー。
     ============================================================ */

  /* マーケット概況カード(ダーク背景) */
  .market-overview-card{
    background:linear-gradient(160deg,#1c2420,#141a17);
    border-radius:14px;
    padding:16px 18px;
    margin-bottom:16px;
    color:#fff;
  }
  .market-overview-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
    flex-wrap:wrap;
  }
  .market-overview-title{
    font-size:11px;
    font-weight:800;
    letter-spacing:0.08em;
    color:rgba(255,255,255,0.85);
  }
  .market-overview-updated{
    font-size:10.5px;
    color:rgba(255,255,255,0.45);
  }
  .market-overview-detail-link{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:2px;
    font-size:11.5px;
    font-weight:600;
    color:rgba(255,255,255,0.6);
  }
  .market-overview-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }
  .market-overview-item{ min-width:0; }
  .market-overview-label{ font-size:11px; color:rgba(255,255,255,0.55); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .market-overview-change{ font-size:15px; font-weight:800; margin-bottom:2px; }
  .market-overview-spark{ display:block; margin-bottom:2px; }
  .market-overview-price{ font-size:10.5px; color:rgba(255,255,255,0.5); }

  /* ステータス行 */
  .status-row{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
    margin-bottom:20px;
  }
  .status-item{
    min-width:0;
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 8px;
    text-align:center;
  }
  .status-item-icon{ display:flex; align-items:center; justify-content:center; margin-bottom:4px; }
  .status-item-label{ font-size:9.5px; color:var(--sub2); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .status-item-value{ font-size:14px; font-weight:800; color:var(--ink); margin-bottom:2px; }
  .status-item-sub{ font-size:8.5px; color:var(--sub3); line-height:1.3; }

  /* 本日の最重要ニュース(ダークヒーローカード)。背景は画像生成ツールが無いため、
     CSSのグラデーション+斜めの線状パターンで抽象的な基板/回路の雰囲気だけを
     再現している(実写・AI生成画像の代替であることをコード上も明示しておく)。 */
  .hero-pro-card{
    position:relative;
    overflow:hidden;
    cursor:pointer;
    border-radius:16px;
    padding:20px 20px 18px;
    margin-bottom:28px;
    color:#fff;
    background:
      radial-gradient(circle at 85% 15%, rgba(15,157,108,0.35), transparent 55%),
      repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 26px),
      repeating-linear-gradient(25deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 34px),
      linear-gradient(150deg,#10221b,#0b1512 60%,#0a1210);
    box-shadow:0 8px 24px rgba(10,20,15,0.25);
  }
  .hero-pro-eyebrow{ display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
  .hero-pro-eyebrow-label{ font-size:11px; font-weight:800; letter-spacing:0.04em; color:#3ddc97; }
  .hero-pro-change{ font-size:12px; font-weight:800; }
  .hero-pro-elapsed{ margin-left:auto; font-size:11px; color:rgba(255,255,255,0.5); }
  .hero-pro-meta-row{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
  .hero-pro-ticker{ font-size:12px; font-weight:800; color:#fff; background:rgba(255,255,255,0.14); padding:3px 9px; border-radius:6px; }
  .hero-pro-company{ font-size:12px; color:rgba(255,255,255,0.65); }
  .hero-pro-category-tag{ font-size:10.5px; font-weight:700; color:#0b1512; background:#3ddc97; padding:2px 8px; border-radius:6px; }
  .hero-pro-title{ font-family:var(--serif); font-weight:700; font-size:22px; line-height:1.4; margin-bottom:10px; color:#fff; }
  .hero-pro-body{ font-size:13px; line-height:1.7; color:rgba(255,255,255,0.75); margin-bottom:16px; }
  .hero-pro-footer{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-top:14px; border-top:1px solid rgba(255,255,255,0.12); }
  .hero-pro-footer-item{ display:flex; align-items:center; gap:5px; font-size:11px; color:rgba(255,255,255,0.55); white-space:nowrap; }
  .hero-pro-footer-link{ margin-left:auto; color:#3ddc97; font-weight:700; }
  .hero-pro-dots{ display:flex; justify-content:center; gap:6px; margin-top:16px; }
  .hero-pro-dot{ width:6px; height:6px; padding:0; border-radius:50%; border:none; background:rgba(255,255,255,0.3); cursor:pointer; }
  .hero-pro-dot.active{ background:#3ddc97; width:16px; border-radius:3px; }

  /* Desktop hero cards should remain scannable even when the source title is
     long (English press releases can otherwise make one card fill the screen). */
  @media (min-width:981px){
    :root{ --bottom-nav-space:0px; }
    .header-bar{ padding-top:12px; padding-bottom:10px; gap:6px; }
    .header-tabs{ gap:2px; }
    .header-tabs button{ padding:7px 14px; }
    .content{ padding-top:24px; padding-bottom:48px; }
    .home-grid{ gap:28px; }
    .sidebar{ gap:20px; }
    .hero-pro-title{
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;
      overflow:hidden;
    }
    .hero-pro-body{
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:3;
      overflow:hidden;
    }
    .hero-pro-card{ min-height:0; }
    .sidebar .chips-row{
      margin-bottom:0;
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    .sidebar .chips-row::-webkit-scrollbar{ display:none; }
  }

  /* 最新ニュース: 見出し行の並び替え表示・ニュース種別チップ */
  .news-section-divider{ margin-bottom:16px; }
  .sort-select-display{ font-size:11.5px; color:var(--sub2); white-space:nowrap; }
  .news-category-chips{ margin-bottom:22px; }
  /* 2026-08-24: ヘッダーのタブ行(.header-tabs)ではスクロール可能なことに気付けるよう
     ネイティブのスクロールバーをあえて残しているが、このニュース種別チップ行は
     ユーザーから「このスクロールバーは不要」と明示的に指摘があったため、ここだけは
     機能(overflow-x:autoで横スクロール自体はできる)は残しつつバーの見た目だけ消す。 */
  .news-category-chips{ scrollbar-width:none; -ms-overflow-style:none; }
  .news-category-chips::-webkit-scrollbar{ display:none; }

  /* 記事一覧の各行に添える調査導線(情報ソース/関連カテゴリ/過去の類似) */
  .news-item-research-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:2px; }
  .news-item-research-row span{ display:flex; align-items:center; gap:4px; font-size:10.5px; color:var(--sub3); white-space:nowrap; }

  /* 最新ニュースは「銘柄の値動き」と「記事の内容」が一目で分かれる二列カードにする。 */
  .news-list-item{
    align-items:stretch;
    gap:14px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px 12px;
  }
  .news-quote-box{
    width:76px;
    flex:0 0 76px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:7px;
    padding-right:11px;
    border-right:1px solid var(--border);
  }
  .news-quote-ticker{ font-size:13px; font-weight:800; letter-spacing:-.02em; }
  .news-quote-spark{ width:45px; height:16px; overflow:visible; }
  .news-quote-change{ font-size:9.5px; font-weight:700; white-space:nowrap; }
  .news-item-time{ margin-left:auto; font-size:11px; color:var(--sub2); }

  /* PRO案内バナー */
  .pro-banner{
    display:flex;
    align-items:center;
    gap:14px;
    background:#f4f1ea;
    border:1px solid var(--border2);
    border-radius:14px;
    padding:16px 18px;
    margin-top:28px;
    flex-wrap:wrap;
  }
  .pro-banner-icon{ flex-shrink:0; }
  .pro-banner-copy{ flex:1; min-width:180px; }
  .pro-banner-title{ font-family:var(--serif); font-weight:700; font-size:14.5px; color:var(--ink); margin-bottom:4px; }
  .pro-banner-desc{ font-size:11.5px; color:var(--sub); line-height:1.6; }
  .pro-banner-cta{ flex-shrink:0; background:var(--good); color:#fff; border:none; border-radius:9px; padding:11px 18px; font-size:13px; font-weight:700; cursor:pointer; }

  @media (max-width:640px){
    .market-overview-card{ padding:13px 14px; border-radius:12px; margin-bottom:12px; }
    .market-overview-grid{ gap:6px; }
    .market-overview-label{ font-size:10px; }
    .market-overview-change{ font-size:13px; }
    .market-overview-price{ font-size:9.5px; }

    .status-row{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin:0 -1px 16px; }
    .status-item{ border-radius:0; padding:9px 2px; border-right:0; }
    .status-item:first-child{ border-radius:10px 0 0 10px; }
    .status-item:last-child{ border-radius:0 10px 10px 0; border-right:1px solid var(--border); }
    .status-item-icon{ margin-bottom:3px; }
    .status-item-label{ font-size:8.5px; }
    .status-item-value{ font-size:12px; }
    .status-item-sub{ display:none; }

    .hero-pro-card{ padding:15px 15px 12px; margin-bottom:20px; border-radius:12px; }
    .hero-pro-title{ font-size:19px; line-height:1.35; }
    .hero-pro-body{ font-size:12px; line-height:1.55; margin-bottom:12px; }
    .hero-pro-footer{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:10px; }
    .hero-pro-footer-item{ font-size:9.5px; white-space:normal; }
    .hero-pro-footer-link{ grid-column:2; justify-self:end; margin-left:0; }

    .news-section-divider{ margin:0 0 10px; }
    .news-category-chips{ margin:0 -4px 14px; padding:0 4px; }
    .news-category-chips .chip{ padding:6px 12px; font-size:10px; }
    .news-list-item{ padding:11px 10px; border-radius:10px; }
    .news-quote-box{ width:68px; flex-basis:68px; padding-right:9px; gap:5px; }
    .news-quote-ticker{ font-size:12px; }
    .news-quote-change{ font-size:8.5px; }
    .news-item-time{ font-size:10px; }
    .news-item-research-row{ gap:8px; }
    .news-item-research-row span{ font-size:8.5px; }

    .pro-banner{ padding:14px; gap:10px; }
    .pro-banner-cta{ flex:1 1 100%; }
  }

  @media (max-width:420px){
    .status-row{ grid-template-columns:repeat(5,minmax(0,1fr)); }
    .status-item-sub{ display:none; }
    .market-overview-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  }

  .search-page{ max-width:720px; margin:0 auto; }
  .page-title{ font-family:var(--serif); font-size:26px; font-weight:700; color:var(--ink); margin-bottom:20px; }
  .search-input-lg{ width:100%; box-sizing:border-box; padding:12px 2px; border:none; border-bottom:1.5px solid var(--border2); background:transparent; font-size:16px; color:var(--ink); margin-bottom:26px; outline:none; }
  .search-results-count{ font-size:11px; color:var(--sub2); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:14px; }
  .search-result{ display:flex; gap:18px; cursor:pointer; }
  .no-results{ text-align:center; padding:24px 0; color:var(--sub2); font-size:14px; }

  .saved-page{ max-width:900px; margin:0 auto; }
  .saved-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:28px 24px; }
  .saved-empty{ text-align:center; padding:80px 20px; color:var(--sub2); }

  .settings-page{ max-width:640px; margin:0 auto; }
  .settings-section{ margin-bottom:32px; }
  .style-toggle{ display:flex; background:#fff; border-radius:12px; padding:4px; gap:4px; max-width:320px; }
  .style-toggle button{ flex:1; padding:10px; border-radius:9px; font-size:13.5px; font-weight:700; border:none; cursor:pointer; }
  .about-box{ background:#fff; border-radius:14px; padding:20px; font-size:13.5px; color:#5c5347; line-height:1.7; max-width:480px; }

  .detail-page{ max-width:760px; margin:0 auto; }
  .points{ display:flex; flex-direction:column; gap:12px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:20px 0; margin-bottom:20px; }
  .point-row{ display:flex; gap:10px; font-size:14.5px; line-height:1.75; color:#3a3f52; }
  .point-row .dot{ font-weight:700; flex-shrink:0; }
  .point-row .tag{ font-weight:700; color:var(--ink); }

  .kpi-loading{ font-size:12.5px; color:var(--sub2); padding:14px 0 22px; }
  .fact-bullet-list{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:10px; }
  .fact-bullet-list li{ font-size:14px; line-height:1.7; color:var(--ink); padding-left:16px; position:relative; }
  .fact-bullet-list li:before{ content:'●'; position:absolute; left:0; font-size:7px; top:8px; color:var(--sub2); }
  .fact-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
  .fact-table th, .fact-table td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); }
  .fact-table th{ color:var(--sub2); font-weight:700; font-size:11px; }
  .fact-empty{ font-size:13px; color:var(--sub2); padding:6px 0; }
  .check-card{ background:#f4f1ea; border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:10px; }
  .check-card-label{ font-size:11.5px; font-weight:700; color:var(--ink); margin-bottom:4px; }
  .check-card-text{ font-size:13px; line-height:1.6; color:#3a3f52; }

  @media (max-width:640px){
    /* 2026-08-23: 詳細ページ用の上部ヘッダーは.dp-topbar(下の新規セクション)に
       置き換わり、header-bar.detail-modeというクラス自体がJS側で付与されなく
       なったため、旧ルールは削除した。 */
    .fact-bullet-list{gap:8px;margin-bottom:12px;}
    .fact-bullet-list li{font-size:12px;line-height:1.65;}
    .fact-table{display:none;}
    .check-card{padding:11px 12px;margin-bottom:8px;}
    .check-card-label{font-size:10.8px;}
    .check-card-text{font-size:11.5px;}
  }


  /* ===== EXACT DETAIL LAYOUT — target screenshot ===== */

  /* Detail view is intentionally isolated from the normal app header. */
  body.detail-view .header-bar,
  body.detail-view .back-row{
    display:none !important;
  }

  /* 下部固定の.bottom-nav(高さ約64px+セーフエリア)が本文末尾の.disclaimer-footerに
     重ならないよう、詳細ページ表示中は.contentの下側に余白を確保する
     (--bottom-nav-spaceは:root参照、全ページ共通のナビ分の余白)。 */
  body.detail-view .content{
    max-width:none;
    padding:10px 16px calc(28px + var(--bottom-nav-space));
    overflow:visible !important;
    height:auto !important;
    max-height:none !important;
  }

  .detail-page{
    width:100%;
    max-width:1000px !important;
    margin:0 auto;
    overflow:visible !important;
    height:auto !important;
    max-height:none !important;
  }
  /* 記事の全情報をひとまとまりとして読むためのコンテナ。PCでは独立した1枚の
     読み物カード、スマホでは画面幅いっぱいの自然な記事面として見せる。 */
  .article-detail-card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:18px;
    padding:30px 34px;
    box-shadow:0 10px 30px rgba(44,36,28,.05);
    overflow:visible !important;
    height:auto !important;
    max-height:none !important;
  }

  /* 2026-08-23追加: 詳細ページ専用の上部バー(戻る/ロゴ/保存・共有、要望項目1)。
     ホーム側の.header-bar(既存の上部タブバー)とは別の見た目にするため、
     #header-root(.sticky-top、position:sticky済み)にそのまま差し込んで使う。 */
  .dp-topbar{
    max-width:1000px;
    margin:0 auto;
    padding:12px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .dp-topbar-icon-btn{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border:none;
    background:transparent;
    border-radius:999px;
    padding:0;
    cursor:pointer;
  }
  .dp-topbar-icon-btn:active{
    background:#efe9dd;
  }
  .dp-topbar-logo{
    flex:1;
    min-width:0;
    text-align:center;
    font-family:var(--serif);
    font-weight:700;
    font-size:15.5px;
    color:var(--ink);
    letter-spacing:-0.01em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .dp-topbar-actions{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:2px;
  }

  /* 2026-08-23追加: 記事ヘッダーブロック(ティッカー・会社名・カテゴリ/公式発表タグ・
     更新日時・前日比、要望項目2)。前日比は投資判断シグナルに見えないよう、
     グレーの小さな文字で右下に添えるだけにする(色分け無し)。 */
  .article-header-block{
    margin:0 0 14px;
  }
  .article-meta-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:8px;
  }
  .article-meta-left{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  .detail-ticker-logo{
    flex:0 0 54px;
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid;
    border-radius:10px;
    font-family:var(--serif);
    font-size:16px;
    font-weight:800;
  }
  .article-company-stack{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  .ticker-badge{
    flex-shrink:0;
    display:inline-block;
    font-size:12px;
    font-weight:800;
    letter-spacing:0.02em;
    padding:4px 9px;
    border-radius:6px;
  }
  .article-company-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    font-weight:600;
    color:var(--sub);
  }
  .article-updated-at{
    flex-shrink:0;
    font-size:12px;
    color:var(--sub2);
    white-space:nowrap;
  }
  .article-tags-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
  }
  .article-tags{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
  }
  .info-tag{
    font-size:10.5px;
    font-weight:700;
    color:#fff;
    background:#8a7f6f;
    padding:3px 9px;
    border-radius:6px;
    white-space:nowrap;
  }
  /* 「公式発表」タグは投資判断のシグナルではなく単なる出所の事実表示なので、
     アクセントカラーではなく落ち着いたトーン(deep green)にする。 */
  .info-tag-official{
    background:#eaf3ee;
    color:var(--good);
  }
  .article-change-muted{
    flex-shrink:0;
    font-size:11.5px;
    font-weight:500;
    color:var(--sub2);
  }
    .detail-subtitle{
      font-size:11.5px;
      line-height:1.45;
      margin-bottom:12px;
      display:block;
      overflow:visible;
      -webkit-line-clamp:unset;
      -webkit-box-orient:initial;
    }
    .article-header-block{
      margin-bottom:8px;
    }
    .article-meta-row{
      margin-bottom:4px;
    }
    .article-tags-row{
      min-height:0;
    }
    .article-updated-at,
    .article-change-muted{
      font-size:10px;
    }
    .exact-conclusion-label{
      font-size:11px;
      margin-bottom:5px;
    }
    .exact-business-heading{
      margin-bottom:8px;
    }
    .points{
      margin-bottom:16px !important;
    }
    .point-grid{
      gap:6px !important;
    }
    .point-card-icon{
      width:24px !important;
      height:24px !important;
      margin-bottom:5px !important;
    }
    .point-card-icon svg{
      width:22px;
      height:22px;
    }
    .research-list{
      gap:5px;
      margin-bottom:18px;
    }
    .primary-sources-section{
      margin-bottom:16px;
    }
    .primary-source-btn{
      padding:9px 7px;
      font-size:10.5px;
    }
    .disclaimer-footer{
      padding-top:10px;
    }
    .disclaimer-footer p{
      font-size:9px;
      line-height:1.4;
    }

  /* Title
     2026-08-23: タイトル行の右側にあった開閉シェブロン(.exact-detail-chevron)、
     日付等の横並びメタ情報行(.exact-detail-meta)、その下の区切り線
     (.exact-detail-rule)、およびタイトル直下の目立つAI免責バナー
     (.ai-disclaimer-banner)は、詳細ページ再構成で全て置き換えられた:
     戻る導線は上部の.dp-topbar、ティッカー・会社名・タグ・更新日時・前日比は
     .article-header-block、免責文言はページ末尾の.disclaimer-footerに統合された。
     対応するHTMLがrenderDetailPage側から無くなったため、ここでは.exact-detail-title
     (見出し本文、今も<h1>で使用中)だけを残し、他は削除した。 */
  .exact-detail-title{
    font-family:var(--serif);
    font-size:30px;
    line-height:1.28;
    font-weight:700;
    color:var(--ink);
    letter-spacing:-0.02em;
    margin:0 0 10px;
  }
  /* 2026-08-12: 「結論」→「概要」に変更。断定的な見解に見えないよう、
     accentカラーの太いボーダー・大文字強調ラベルなど「結論=見解」を
     示唆する強い視覚的強調を外し、単なる要約セクションとして中立化した
     (商用化検討に伴う投資助言業リスク低減の一環。中身自体は開示事実の
     要約でしかないが、見た目が断定的な判断のように見えてしまっていた)。 */
  .exact-conclusion-box{
    background:transparent;
    border:none;
    border-radius:0;
    padding:0;
    margin:0 0 26px;
  }
  .exact-conclusion-label{
    font-size:12.5px;
    font-weight:700;
    color:#7a6f5c;
    letter-spacing:0.02em;
    margin-bottom:10px;
  }
  .exact-conclusion-text{
    font-size:16px;
    line-height:1.8;
    font-weight:500;
    color:var(--ink);
    display:block !important;
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:normal !important;
    max-height:none !important;
    -webkit-line-clamp:unset !important;
    -webkit-box-orient:initial !important;
  }

  /* 30-second KPI section */
  .exact-kpi-heading{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:20px;
    font-weight:800;
    color:#24211e;
    margin:0 0 16px 2px;
  }
  .exact-kpi-heading-icon{
    color:var(--good);
    font-size:21px;
  }
  /* 2026-08-25: カードは3列グリッドのセル幅いっぱいに引き伸ばされ、中身(アイコン+
     短いラベル・数値)がセル幅の半分程度しか使わない項目では右側が丸ごと余白に
     見えていた。一度justify-items:startでカード自体を中身の幅に縮める案を試したが、
     コンテナ幅(.content)がPC向けに広いため、今度はカード同士の間に大きな空白の
     隙間ができてしまい「これは違う」との指摘があった。カードの幅(グリッドの列幅)は
     そのまま(3等分)にして、代わりにカード内の中身を中央寄せにし、余白がカードの
     片側に偏らないようにする。 */
  .kpi-top-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
    margin:0 0 14px !important;
  }
  .kpi-top-card{
    grid-column:span 1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:4px;
    min-width:0;
    min-height:76px;
    box-sizing:border-box;
    background:#fff !important;
    border:1px solid #e4e1dc !important;
    border-radius:10px !important;
    padding:8px 7px !important;
    box-shadow:0 1px 2px rgba(30,25,20,.02);
  }
  .kpi-top-card:nth-child(4),
  .kpi-top-card:nth-child(5),
  .kpi-top-card:nth-child(6){
    grid-column:span 1;
  }
  .kpi-top-icon{
    width:20px !important;
    height:20px !important;
    min-width:20px;
    margin:0 !important;
    border:none !important;
    background:transparent !important;
  }
  .kpi-top-icon svg{
    width:18px;
    height:18px;
  }
  .kpi-top-copy{
    min-width:0;
    padding-top:0;
  }
  .kpi-top-label{
    margin:0 0 2px !important;
    font-size:8.8px !important;
    line-height:1.25;
    font-weight:800;
    color:#2f2b27 !important;
  }
  .kpi-top-value{
    margin:0 0 2px !important;
    font-size:12px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    color:#171513 !important;
    overflow-wrap:anywhere;
  }
  .kpi-top-change{
    font-size:8.2px !important;
    line-height:1.2;
    font-weight:500 !important;
    color:#78716a !important;
  }

  /* 2026-08-23: 「セクションショートカット」(CONTEXT/CHECKの2タブ・.shortcuts-list系)を
     「調査に役立つ情報」(.research-list系、3行)に再構成した(詳細ページ再構成の
     要望項目7)。開閉ボタン自体の構造(1行=ボタン+開いた時だけ出るbody)は
     旧.shortcut-row/.shortcut-bodyを踏襲しつつ、各行の右側に記事固有の説明文
     (.research-row-desc)を追加した点が異なる(「背景を知る」だけでなく「何の
     背景か」が一覧の時点でわかるようにする狙い)。 */
  .exact-shortcuts-title{
    font-size:17px;
    line-height:1.3;
    font-weight:800;
    color:#2b2825;
    margin:0 0 12px 2px;
  }
  .research-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:0 0 34px;
  }
  .research-group{
    width:100%;
  }
  .research-row{
    width:100%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    border:1px solid #e3e2df;
    border-radius:9px;
    padding:14px 16px;
    color:#24211f;
    font-size:14px;
    font-weight:800;
    font-family:inherit;
    text-align:left;
    cursor:pointer;
    box-shadow:0 1px 1px rgba(20,20,20,.01);
  }
  .research-row.active{
    background:#f8f6f2;
    border-color:#dcd6c8;
  }
  .research-row-label{
    flex:0 0 auto;
    white-space:nowrap;
  }
  .research-row-desc{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:right;
    font-size:12.5px;
    font-weight:500;
    color:var(--sub2);
    padding-right:2px;
  }
  .research-row-chevron{
    flex-shrink:0;
    display:flex;
    align-items:center;
    transition:transform .15s ease;
  }
  .research-row-chevron.is-open{
    transform:rotate(90deg);
  }
  .research-row-body{
    padding:14px 16px 2px;
    margin:-2px 4px 4px;
    border:1px solid #ece8e1;
    border-top:0;
    border-radius:0 0 9px 9px;
    background:#fff;
  }

  /* Business highlights */
  .exact-business-heading{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin:0 0 14px 2px;
  }
  .exact-business-heading strong{
    font-size:17px;
    color:#292622;
  }
  .exact-business-heading span{
    font-size:13px;
    color:#767069;
    font-weight:500;
  }
  .points{
    border:none !important;
    padding:0 !important;
    margin:0 0 24px !important;
  }
  /* 2026-08-23: 詳細ページ再構成の要望項目6により、3列→2列に変更(「事業ハイライト」
     →「注目ポイント」への改称と合わせ、株式評価っぽい密なグリッドよりも、
     ゆったりした2列の方が「事実の整理」という位置づけに合うため)。以前は
     @520px側だけ2列にしていたが、これでベースから2列になったので@520px側の
     同じ指定は冗長(下の@520pxブロックで削除済み)。 */
  .point-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    margin:0 !important;
  }
  .point-card{
    min-width:0;
    box-sizing:border-box;
    background:#fff !important;
    border:1px solid #e6e2dc !important;
    border-radius:9px !important;
    padding:16px !important;
    text-align:left;
  }
  .point-card-icon{
    width:36px !important;
    height:36px !important;
    margin:0 0 10px !important;
    border:none !important;
    background:transparent !important;
    border-radius:0 !important;
  }
  .point-card-icon svg{
    width:32px;
    height:32px;
  }
  .point-card-tag{
    margin:0 0 6px !important;
    color:var(--good) !important;
    font-size:12.5px !important;
    line-height:1.35 !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
  }
  .point-card-text{
    color:#3d3935 !important;
    font-size:12.5px !important;
    line-height:1.65 !important;
    font-weight:500 !important;
    overflow-wrap:anywhere;
  }

  /* 2026-08-23: 詳細ページ再構成で、記事末尾の原文/IRリンクは.detail-actions
     (原文を開く/IRページ/保存の3ボタン行)から、静かなトーンの.primary-sources-section
     (新規追加、下の「記事詳細ページ再構成」セクションを参照)に置き換わった。
     .detail-actions・.detail-source-line・.detail-source-link・.detail-actions-buttons・
     .source-btn-secondary・.save-detail-btnに対応するHTMLはもう出力されないため削除した。
     .read-btnだけは設定画面のログインリンクCTA・有料会員ロックカードのCTAボタンとして
     今も使われているため、そちらで必要な見た目を残す。 */
  .read-btn{
    flex:1 1 190px;
    min-width:0;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    padding:15px 18px;
    font-size:15px;
    font-weight:800;
    border:none;
    background:var(--accent);
    color:#fff;
    cursor:pointer;
  }

  /* 2026-08-23追加: 「一次情報」セクション(要望項目8)。以前の主導線ボタン
     (.read-btn、彩度の高いオレンジ)とは対照的に、白地+細枠+文字色deep greenの
     控えめなトーンにする(「原文を読みに行く」という次の行動を示すだけで、
     「読め/買え」のような強い誘導には見せない)。 */
  .primary-sources-section{
    margin:0 0 28px;
  }
  .primary-sources-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .primary-source-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    box-sizing:border-box;
    background:#fff;
    border:1px solid var(--border2);
    border-radius:9px;
    padding:12px 10px;
    font-size:12px;
    font-weight:700;
    color:var(--ink);
  }
  .primary-source-btn:active{
    background:#f8f6f2;
  }

  /* 2026-08-23追加: フッター直前の小さな注意書き(要望項目9)。AI生成免責+
     投資助言でない旨を1箇所にまとめ、以前のような目立つ背景色バナーではなく
     地の文に近い控えめな見せ方にする(情報の優先順位を崩さないため)。 */
  .disclaimer-footer{
    padding-top:16px;
    border-top:1px solid var(--border);
  }
  .disclaimer-footer p{
    margin:0 0 6px;
    font-size:11px;
    line-height:1.6;
    color:var(--sub3);
  }
  .disclaimer-footer p:last-child{
    margin-bottom:0;
  }

  /* 2026-08-23追加: 詳細ページ専用の下部ナビゲーション(要望項目10)。画面下部に
     固定し、ホーム/ウォッチリスト/検索/アーカイブ/設定への導線を常時出す
     (ホーム画面側の上部タブとは見た目・位置が異なるが、遷移先は共通)。 */
  .bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:50;
    display:flex;
    align-items:stretch;
    justify-content:space-around;
    background:rgba(250,246,240,0.96);
    backdrop-filter:blur(8px);
    border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .bottom-nav-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    background:none;
    border:none;
    padding:6px 2px;
    cursor:pointer;
    color:var(--sub2);
  }
  .bottom-nav-label{
    font-size:10px;
    font-weight:600;
    color:inherit;
  }
  .bottom-nav-item.active .bottom-nav-label{
    color:var(--good);
    font-weight:700;
  }

  @media (min-width:981px){
    .bottom-nav{ display:none; }
  }

  /* PCでは下部ナビを内容幅に収め、画面が広くても項目間が間延びしないようにする。 */
  @media (min-width:761px){
    .bottom-nav{ justify-content:center; gap:34px; }
    .bottom-nav-item{ flex:0 1 132px; }
  }

  /* Expanded shortcut content remains readable without changing target closed layout. */
  .fact-bullet-list li{
    font-size:13px !important;
  }
  .check-card{
    background:#f8f6f2 !important;
  }

  @media (max-width:760px){
    .bottom-nav{ justify-content:space-around; gap:0; }
    .bottom-nav-item{ flex:1; }
    body.detail-view .content{
      padding:0 4px calc(16px + var(--bottom-nav-space));
      overflow:visible !important;
      max-height:none !important;
      height:auto !important;
    }
    .detail-page{
      max-width:none !important;
      overflow:visible !important;
      max-height:none !important;
      height:auto !important;
    }
    .article-detail-card{
      border:none;
      border-radius:8px;
      box-shadow:none;
      padding:4px 6px 8px;
    }
    .dp-topbar{
      padding:4px 6px;
    }
    .dp-topbar-logo{
      font-size:12.5px;
    }
    .article-header-block{
      margin-bottom:0;
    }
    .article-company-name{
      max-width:120px;
      font-size:10.5px;
    }
    .detail-ticker-logo{
      flex-basis:34px;
      width:34px;
      height:34px;
      font-size:10.5px;
    }
    .article-updated-at,
    .article-change-muted{
      font-size:8.2px;
    }
    .info-tag{
      font-size:8px;
      padding:2px 4px;
    }
    .exact-detail-title{
      font-size:16px;
      line-height:1.18;
      margin-bottom:3px;
    }
    .exact-conclusion-box{
      padding:0;
      margin:0 0 8px;
    }
    .exact-conclusion-label{
      font-size:8.5px;
      margin-bottom:3px;
    }
    .exact-conclusion-text{
      font-size:10.5px;
      line-height:1.32;
      display:block !important;
      overflow:visible !important;
      text-overflow:clip !important;
      white-space:normal !important;
      max-height:none !important;
      -webkit-line-clamp:unset !important;
      -webkit-box-orient:initial !important;
    }
    .exact-business-heading{
      margin-bottom:6px;
      gap:3px;
    }
    .exact-business-heading strong{
      font-size:11.5px;
    }
    .exact-business-heading span{
      font-size:8px;
    }
    .exact-kpi-heading{
      font-size:12px;
      margin-bottom:6px;
    }
    .kpi-top-grid{
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      gap:4px !important;
      margin:0 0 10px !important;
    }
    .kpi-top-card{
      grid-column:span 1 !important;
      min-height:48px;
      padding:5px 5px !important;
      gap:2px;
    }
    .kpi-top-icon{
      width:18px !important;
      height:18px !important;
      min-width:18px;
    }
    .kpi-top-icon svg{
      width:16px;
      height:16px;
    }
    .kpi-top-label{
      font-size:7.5px !important;
    }
    .kpi-top-value{
      font-size:9.5px !important;
    }
    .kpi-top-change{
      font-size:6.5px !important;
    }
    .points{
      margin-bottom:6px !important;
      padding-top:8px !important;
      padding-bottom:8px !important;
      gap:6px !important;
    }
    .point-grid{
      gap:4px !important;
    }
    .point-card{
      min-height:0;
      padding:7px 6px !important;
    }
    .point-card-tag{
      font-size:8px !important;
    }
    .point-card-text{
      font-size:8px !important;
      line-height:1.38 !important;
      display:block;
      overflow:visible;
      white-space:normal;
      -webkit-line-clamp:unset;
      -webkit-box-orient:initial;
      max-height:none;
      text-overflow:clip;
    }
    .research-list{
      gap:2px;
      margin-bottom:8px;
    }
    .research-row{
      padding:7px 8px;
      font-size:9.8px;
      gap:4px;
    }
    .research-row-desc{
      display:none;
    }
    .research-row-body{
      padding:6px 7px 0;
    }
    .primary-sources-section{
      margin:0 0 8px;
    }
    .primary-sources-list{
      gap:4px;
    }
    .primary-source-btn{
      padding:6px 5px;
      font-size:8.4px;
    }
    .disclaimer-footer{
      padding-top:4px;
      border-top:none;
    }
    .disclaimer-footer p{
      font-size:7.5px;
      line-height:1.25;
    }
  }

  @media (max-width:520px){
    .exact-detail-title{
      font-size:17px;
    }
    .article-meta-row{
      align-items:flex-start;
    }
    .article-company-name{
      max-width:88px;
    }
    .article-detail-card{
      padding-left:10px;
      padding-right:10px;
    }
    .article-updated-at{
      font-size:9px;
    }
    .info-tag{
      font-size:8.5px;
      padding:2px 5px;
    }
    .article-change-muted{
      font-size:9px;
    }

    .kpi-top-grid{
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      gap:5px !important;
    }
    .kpi-top-card{
      min-height:52px;
      display:block;
      padding:6px 5px !important;
    }
    .kpi-top-card:nth-child(4),
    .kpi-top-card:nth-child(5){
      grid-column:span 1;
      min-height:52px;
    }
    .kpi-top-icon{
      margin:0 auto 3px !important;
    }
    .kpi-top-copy{
      text-align:center;
    }
    .kpi-top-label{
      font-size:7.5px !important;
    }
    .kpi-top-value{
      font-size:10px !important;
    }
    .kpi-top-change{
      font-size:6.5px !important;
    }

    .research-row{
      padding:8px 9px;
      font-size:10px;
      gap:6px;
    }
    .research-row-desc{
      display:none;
    }

    .point-card{
      padding:8px 6px !important;
    }

    .read-btn{
      padding:11px 8px;
      font-size:10.5px;
    }
  }