:root{
    color-scheme:dark;
    --paper:#050B14;
    --panel:#0A1622;
    --panel-tint:#101F2E;
    --line:#1E3648;
    --ink:#DCEAF2;
    --ink-soft:#9FBBCB;
    --muted:#5C7A8C;
    --kraft:#1C2D3C;
    --kraft-line:#4A8A93;
    --stamp:#E0A548;
    --stamp-deep:#B07E2E;
    --stamp-soft:#8A6A3A;
    --danger:#D9534F;
    --ok:#4FBF8B;
    --current:#3FE8D4;
    --current-dim:#1F5F58;

    --panel-glass-rgb:10,22,34;
    --shadow-rgb:0,0,0;
    --glow-rgb:63,232,212;
    --kraft-line-rgb:74,138,147;
    --current-rgb:63,232,212;
    --stamp-rgb:224,165,72;
    --danger-rgb:217,83,79;
    --ok-rgb:79,191,139;

    --stripe1:rgba(63,232,212,0.06);
    --stripe2:rgba(63,232,212,0.04);
    --stripe3:rgba(224,165,72,0.025);
    --dot-color:rgba(63,232,212,0.09);
    --vignette-mid:rgba(63,232,212,0.05);
    --vignette-fade:rgba(5,11,20,0);
    --vignette-edge:rgba(2,5,9,0.75);
  }
  [data-theme="light"]{
    color-scheme:light;
    --paper:#F3FAF9;
    --panel:#FFFFFF;
    --panel-tint:#E8F3F1;
    --line:#D3E6E3;
    --ink:#10262B;
    --ink-soft:#3E5C60;
    --muted:#7B928F;
    --kraft:#F2E8D0;
    --kraft-line:#A9824A;
    --stamp:#C9822E;
    --stamp-deep:#9C6520;
    --stamp-soft:#E3B57A;
    --danger:#C23B32;
    --ok:#2E8F63;
    --current:#0E8C82;
    --current-dim:#BFE3E0;

    --panel-glass-rgb:255,255,255;
    --shadow-rgb:80,110,105;
    --glow-rgb:14,140,130;
    --kraft-line-rgb:169,130,74;
    --current-rgb:14,140,130;
    --stamp-rgb:201,130,46;
    --danger-rgb:194,59,50;
    --ok-rgb:46,143,99;

    --stripe1:rgba(14,140,130,0.07);
    --stripe2:rgba(14,140,130,0.05);
    --stripe3:rgba(201,130,46,0.04);
    --dot-color:rgba(14,140,130,0.12);
    --vignette-mid:rgba(14,140,130,0.06);
    --vignette-fade:rgba(243,250,249,0);
    --vignette-edge:rgba(200,225,222,0.65);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;background:var(--paper);color:var(--ink);
    font-family:'Inter',sans-serif;overflow:hidden;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  .display{font-family:'Space Grotesk',sans-serif;}

  .current-bg{
    position:fixed;inset:0;z-index:0;
    background-color:var(--paper);
    overflow:hidden;
    pointer-events:none;
  }
  .current-bg::before{
    content:'';
    position:absolute;
    top:-25%;left:-25%;width:150%;height:150%;
    background-image:
      repeating-linear-gradient(100deg, var(--stripe1) 0px, var(--stripe1) 2px, transparent 2px, transparent 140px),
      repeating-linear-gradient(75deg, var(--stripe2) 0px, var(--stripe2) 3px, transparent 3px, transparent 220px),
      repeating-linear-gradient(118deg, var(--stripe3) 0px, var(--stripe3) 2px, transparent 2px, transparent 300px);
    will-change:transform;
    animation:currentDrift 70s linear infinite;
  }
  .current-bg::after{
    content:'';
    position:absolute;inset:0;
    background-image:
      radial-gradient(circle at 1px 1px, var(--dot-color) 1.3px, transparent 0),
      radial-gradient(ellipse 75% 60% at 50% 38%, var(--vignette-mid) 0%, var(--vignette-fade) 45%, var(--vignette-edge) 100%);
    background-size: 26px 26px, 100% 100%;
  }
  @keyframes currentDrift{
    0%{ transform:translate3d(0,0,0); }
    100%{ transform:translate3d(420px, 240px, 0); }
  }

  #graph{
    position:fixed;inset:0;z-index:1;
    background:transparent;
  }

  /* ---------- floating toolbar ---------- */
  .toolbar{
    position:fixed;top:20px;left:20px;z-index:20;
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    background:rgba(var(--panel-glass-rgb),0.72);
    border:1px solid var(--line);
    border-radius:14px;
    padding:8px;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 12px 32px rgba(var(--shadow-rgb),0.4), 0 0 24px rgba(var(--glow-rgb),0.05);
  }
  /* flex-basis:100% 讓這行永遠自己獨占一整列——不用另外算寬度，
     搜尋框跟按鈕那排照樣在下一列正常排列，桌機、手機都適用。 */
  .brand-line{
    flex:1 1 100%;
    padding:2px 4px 6px;
    font-family:'Inter',sans-serif;font-size:11px;letter-spacing:0.01em;
    color:var(--ink-soft);white-space:nowrap;
  }
  .brand-line b{
    font-family:'Space Grotesk',sans-serif;font-size:12px;
    color:var(--current);letter-spacing:0.04em;font-weight:600;
  }

  .search-wrapper{position:relative;flex:1;}
  .search-box{display:flex;align-items:stretch;border-radius:9px;overflow:hidden;background:var(--panel-tint);border:1px solid var(--line);}

  .suggest-list{
    position:absolute;top:calc(100% + 8px);left:0;right:0;
    background:rgba(var(--panel-glass-rgb),0.97);
    border:1px solid var(--line);
    border-radius:10px;
    padding:4px;
    display:none;
    flex-direction:column;
    max-height:260px;overflow-y:auto;
    box-shadow:0 12px 28px rgba(var(--shadow-rgb),0.35);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    z-index:21;
  }
  .suggest-list.open{display:flex;}
  .suggest-item{
    padding:9px 12px;border-radius:7px;cursor:pointer;
    font-size:13px;color:var(--ink);font-family:'Inter',sans-serif;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .suggest-item:hover, .suggest-item.active{background:var(--panel-tint);color:var(--current);}
  /* appearance:none 拿掉了瀏覽器原生的下拉箭頭——是刻意的（原生箭頭
     樣式各瀏覽器不一致、跟整體風格也不搭），但拿掉之後完全沒有補畫
     一個回去，看起來就只是一段純文字，不熟悉的使用者很可能不知道
     這裡點下去可以切換姓名／公司／統編／法人。用 background-image
     疊一個小箭頭圖示，右邊留出對應的 padding 避免文字被蓋到。 */
  .search-box select{
    background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%237B928F' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 6px center;
    background-size:11px;
    border:none;outline:none;color:var(--ink);
    padding:0 22px 0 8px;font-size:13px;font-family:'Inter',sans-serif;
    border-right:1px solid var(--line);cursor:pointer;
    -webkit-appearance:none;appearance:none;
    color-scheme:inherit;
  }
  .search-box select option{
    background:var(--panel);color:var(--ink);
  }
  /* .search-wrapper 是 flex:1，會把工具列裡剩下的空間都吃下來，但
     這個 input 之前是寫死 width:200px——輸入框不會跟著長寬，容器（連著
     它自己的背景色跟圓角）卻還是撐好撐滿，結果視窗夠寬時，查詢按鈕
     後面會多出一大塊「看起來像輸入框、其實是空的背景」，點了完全沒
     反應。改成 flex:1 讓輸入框自己跟著容器一起長大，就不會有這塊空
     著沒用的區域，順便讓寬螢幕打長一點的公司名稱更好打。 */
  .search-box input{
    background:transparent;border:none;outline:none;color:var(--ink);
    padding:0 12px;font-size:14px;flex:1;min-width:100px;height:40px;font-family:'Inter',sans-serif;
  }
  .search-box input::placeholder{color:var(--muted);}
  .search-box button{
    border:none;cursor:pointer;padding:0 18px;
    background:var(--stamp);color:#1C1305;font-weight:600;font-size:13px;
    font-family:'Space Grotesk',sans-serif;
    transition:filter .15s ease;
  }
  .search-box button:hover{filter:brightness(1.1);}
  .search-box .clear-input-btn{
    background:transparent;color:var(--muted);
    padding:0 10px;font-size:16px;font-weight:400;
    font-family:'Inter',sans-serif;
    display:none;
  }
  .search-box .clear-input-btn:hover{filter:none;color:var(--danger);}
  .search-box .clear-input-btn.show{display:block;}

  /* 原本只有圖示、靠 title 顯示文字說明——但 title 要滑鼠停留才會
     跳出來，手機根本沒有這個手勢，等於這幾顆按鈕對手機使用者是啞的。
     改成圖示＋常駐顯示的短文字，第一次來的人不用先 hover 過一輪
     才知道每顆按鈕是做什麼；title 保留給桌機使用者當作更完整的說明。 */
  .icon-btn{
    width:44px;min-height:40px;border-radius:9px;
    border:1px solid var(--line);background:var(--panel-tint);
    color:var(--muted);cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;padding:5px 2px 4px;
    flex-shrink:0;transition:color .15s ease, border-color .15s ease;
  }
  .icon-btn:hover{color:var(--current);border-color:var(--current-dim);}
  .icon-btn.active{color:var(--current);border-color:var(--current);}
  .icon-btn-label{
    font-family:'Inter',sans-serif;font-size:9.5px;line-height:1;
    letter-spacing:0.02em;
  }

  .export-wrapper{position:relative;}
  .export-menu{
    position:absolute;top:calc(100% + 8px);left:0;
    min-width:150px;
    background:rgba(var(--panel-glass-rgb),0.95);
    border:1px solid var(--line);
    border-radius:10px;
    padding:6px;
    display:none;
    flex-direction:column;
    gap:2px;
    box-shadow:0 12px 28px rgba(var(--shadow-rgb),0.35);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    z-index:21;
  }
  .export-menu.open{display:flex;}
  .export-menu-item{
    background:transparent;border:none;text-align:left;
    padding:8px 10px;border-radius:7px;cursor:pointer;
    font-size:12px;color:var(--ink);font-family:'Inter',sans-serif;
  }
  .export-menu-item:hover{background:var(--panel-tint);color:var(--current);}
  @media (max-width:640px){
    .export-menu{left:auto;right:0;}
  }
  .icon-btn svg{width:16px;height:16px;}

  /* ---------- 帳號選單（沿用 export-menu 的下拉樣式） ---------- */
  /* 帳號鈕和其他工具鈕是不同性質的東西：那些是「對這張圖做什麼」，
     這個是「你是誰」。混在一排同樣的灰色方鈕裡完全找不到，所以用
     形狀（圓形＝頭像）和顏色（金色，跳脫既有的青綠／灰系）雙重區隔。
     兩個主題的 --stamp 都有足夠對比，不需要各寫一份。 */
  .account-wrapper{position:relative;display:flex;align-items:center;gap:10px;}
  /* 一條分隔線，把「帳號」和左邊的工具群組分開 */
  .account-wrapper::before{
    content:'';width:1px;height:20px;background:var(--line);flex:none;
  }
  .account-menu{min-width:220px;left:auto;right:0;}
  .account-email{
    padding:8px 10px 4px;font-size:12px;color:var(--ink);
    font-weight:600;word-break:break-all;
  }
  .account-state{
    padding:0 10px 8px;font-size:11px;color:var(--ink-soft);line-height:1.5;
    border-bottom:1px solid var(--line);margin-bottom:6px;
  }
  .account-state.paid{color:var(--current);}
  /* 權限狀態從一句話改成三行（功能／服務期間／剩餘次數）之後，
     要靠層次分出主次，否則三行同樣灰、同樣大小，等於什麼都沒強調。
     標題吃 .paid 的主色，細節維持弱化色。 */
  .account-state .state-head{font-weight:600;letter-spacing:.02em;}
  .account-state .state-line{color:var(--ink-soft);opacity:.85;margin-top:1px;}

  /* 未登入：金色外框 + 金色圖示。在一排灰鈕裡明顯，但不到刺眼。
     半徑原本用 50%，是在這顆鈕還是固定 40x40 正方形時算出來的完美
     圓形；加了文字標籤之後改成圖示+文字上下疊，鈕變成比較高的長
     方形，50% 就不再是圓形而是橢圓——在一排方角鈕裡看起來像多出來
     一顆凸出的膠囊，改成固定像素值，跟鈕的長寬比無關，維持圓角矩形
     不會再跑出橢圓形。 */
  #accountBtn{
    border-radius:16px;
    color:var(--stamp);
    border-color:var(--stamp-soft);
    background:rgba(var(--stamp-rgb),0.10);
  }
  #accountBtn:hover{
    color:var(--stamp);
    border-color:var(--stamp);
    background:rgba(var(--stamp-rgb),0.20);
  }
  /* 已登入：整顆填滿，不用點開選單就知道自己登入了。
     圖示用 --paper（背景色）而不是寫死白或黑，亮暗兩色都能維持對比 */
  #accountBtn.signed-in{
    color:var(--paper);
    background:var(--current);
    border-color:var(--current);
  }
  #accountBtn.signed-in:hover{
    color:var(--paper);
    background:var(--current);
    border-color:var(--current);
    filter:brightness(1.12);
  }

  /* ---------- empty-state 引導（畫布上還沒有節點時顯示） ---------- */
  .empty-state-hint{
    position:fixed;top:var(--panel-top, 78px);left:50%;z-index:5;
    transform:translateX(-50%);
    width:420px;max-width:calc(100vw - 40px);
    background:rgba(var(--panel-glass-rgb),0.72);
    border:1px solid var(--line);
    border-radius:14px;
    padding:16px 18px;
    text-align:center;
    pointer-events:none; /* 容器本身不擋任何滑鼠事件，只有下面的按鈕要能點 */
  }
  .empty-state-hint[hidden]{display:none;}
  .empty-state-hint p{
    margin:0 0 12px;font-size:12.5px;line-height:1.7;color:var(--ink-soft);
  }
  .empty-state-examples{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
  .empty-state-chip{
    pointer-events:auto;
    font-family:'Inter',sans-serif;font-size:12px;color:var(--current);
    background:var(--panel-tint);border:1px solid var(--current-dim);border-radius:999px;
    padding:6px 14px;cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  .empty-state-chip:hover{border-color:var(--current);background:var(--panel);}
  @media (max-width:640px){
    .empty-state-hint{width:calc(100vw - 40px);}
  }

  /* ---------- advanced query panel (below toolbar) ---------- */
  .adv-panel{
    /* 位置跟著工具列的實際底邊走，不寫死。

       原本桌機寫 78px、手機寫 132px，都是照「工具列會有幾列」算出來的
       常數——每次工具列多一顆按鈕、或使用者的視窗寬度剛好讓按鈕多擠一列，
       面板就會蓋住工具列。--panel-top 由 app.js 用 ResizeObserver 量出來，
       之後再加按鈕也不會再壞一次。 */
    position:fixed;top:var(--panel-top, 78px);left:20px;z-index:19;
    width:320px;max-width:calc(100vw - 40px);
    background:rgba(var(--panel-glass-rgb),0.88);
    border:1px solid var(--line);
    border-radius:14px;
    padding:18px;
    max-height:min(70vh, 560px);
    overflow-y:auto;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 16px 40px rgba(var(--shadow-rgb),0.45), 0 0 30px rgba(var(--glow-rgb),0.04);
    display:none;
  }
  .adv-panel.open{display:block;}
  /* 面板的關閉鈕。說明面板的觸發點移進帳號選單之後，沒有這顆就關不掉了 */
  .panel-close{
    background:none;border:none;padding:0 2px;cursor:pointer;
    color:var(--muted);font-size:20px;line-height:1;
  }
  .panel-close:hover{color:var(--ink);}

  /* 三個核心手勢排成兩欄，掃一眼就看完 */
  .help-keys{list-style:none;margin:0;padding:0;}
  .help-keys li{
    display:flex;align-items:baseline;gap:10px;
    padding:7px 0;border-bottom:1px solid var(--line);font-size:13px;
  }
  .help-keys li:last-child{border-bottom:0;}
  .help-keys b{
    flex:none;min-width:34px;color:var(--current);font-weight:600;
  }
  .help-keys span{margin-left:auto;color:var(--ink-soft);text-align:right;}

  .adv-panel-header{
    display:flex;justify-content:space-between;align-items:baseline;gap:8px;
    font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;
    margin-bottom:14px;
  }
  .adv-panel-name{font-size:11px;color:var(--muted);font-family:'IBM Plex Mono',monospace;text-align:right;}
  .adv-section{margin-top:14px;border-top:1px solid var(--line);padding-top:14px;}
  .adv-section:first-of-type{margin-top:0;border-top:none;padding-top:0;}

  /* ---------- 意見回饋表單 ---------- */
  .fb-row{margin-bottom:14px;}
  .fb-row label{
    display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);margin-bottom:6px;
  }
  .fb-optional{
    text-transform:none;letter-spacing:0;margin-left:6px;
    color:var(--ink-soft);opacity:.8;
  }
  .fb-row select,
  .fb-row textarea,
  .fb-row input[type=text]{
    width:100%;box-sizing:border-box;
    background:var(--paper);color:var(--ink);
    border:1px solid var(--line);border-radius:8px;
    padding:8px 10px;font:inherit;font-size:13px;line-height:1.6;
    outline:none;
  }
  .fb-row textarea{resize:vertical;min-height:88px;}
  .fb-row select:focus,
  .fb-row textarea:focus,
  .fb-row input[type=text]:focus{border-color:var(--current);}
  /* 字數只在快滿的時候才變色。一直亮著等於一直在催人，反而讓人少寫。 */
  .fb-count{text-align:right;font-size:11px;color:var(--ink-soft);margin-top:4px;}
  .fb-count.near{color:var(--stamp);}
  .fb-submit{
    width:100%;padding:9px;border-radius:8px;cursor:pointer;
    border:1px solid var(--current);background:var(--current);
    color:var(--paper);font:inherit;font-size:13px;font-weight:600;
  }
  .fb-submit:hover{opacity:.88;}
  .fb-submit:disabled{opacity:.5;cursor:default;}
  .fb-note{font-size:11.5px;line-height:1.6;color:var(--ink-soft);margin-top:10px;}
  .fb-note.bad{color:var(--stamp);}
  .fb-note.good{color:var(--current);}

  /* ---------- toast ---------- */
  .toast{
    position:fixed;left:20px;bottom:20px;z-index:20;
    max-width:calc(100vw - 40px);
    display:flex;align-items:center;gap:9px;
    background:rgba(var(--panel-glass-rgb),0.85);
    border:1px solid var(--line);
    border-radius:10px;
    padding:9px 14px;
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;color:var(--muted);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 8px 24px rgba(var(--shadow-rgb),0.35);
    opacity:0;transform:translateY(6px);
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .toast.show{opacity:1;transform:translateY(0);}
  .toast .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex-shrink:0;}
  .toast .dot.ok{background:var(--ok);box-shadow:0 0 8px rgba(var(--ok-rgb),0.6);}
  .toast .dot.err{background:var(--danger);box-shadow:0 0 8px rgba(var(--danger-rgb),0.6);}
  .toast .dot.loading{background:var(--stamp);animation:pulse 1s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}

  /* ---------- detail panel (slide in) ---------- */
  .detail-panel{
    position:fixed;top:20px;right:20px;bottom:20px;z-index:20;
    width:360px;max-width:calc(100vw - 40px);
    background:rgba(var(--panel-glass-rgb),0.9);
    border:1px solid var(--line);
    border-radius:14px;
    padding:22px;
    overflow-y:auto;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 20px 50px rgba(var(--shadow-rgb),0.5), 0 0 40px rgba(var(--glow-rgb),0.04);
    transform:translateX(calc(100% + 40px));
    transition:transform .28s cubic-bezier(.2,.8,.2,1);
  }
  .detail-panel.open{transform:translateX(0);}

  .close-btn{
    position:absolute;top:14px;right:14px;
    width:26px;height:26px;border-radius:7px;
    border:1px solid var(--line);background:var(--panel-tint);
    color:var(--muted);cursor:pointer;font-size:15px;line-height:1;
    display:flex;align-items:center;justify-content:center;
  }
  .close-btn:hover{color:var(--current);}

  /* ---------- 顯名聲明按鈕 + 彈跳視窗 ---------- */
  .attribution-btn{
    position:fixed;bottom:20px;right:20px;z-index:25;
    width:34px;height:34px;border-radius:50%;
    background:rgba(var(--panel-glass-rgb),0.85);
    border:1px solid var(--line);
    color:var(--muted);
    font-size:15px;font-family:'IBM Plex Mono',monospace;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 8px 20px rgba(var(--shadow-rgb),0.3);
    transition:color .15s ease, border-color .15s ease;
  }
  .attribution-btn:hover{color:var(--current);border-color:var(--current-dim);}

  .modal-overlay{
    position:fixed;inset:0;z-index:100;
    background:rgba(var(--shadow-rgb),0.55);
    display:none;
    align-items:center;justify-content:center;
    padding:20px;
  }
  .modal-overlay.open{display:flex;}
  .modal-box{
    position:relative;
    max-width:420px;width:100%;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:14px;
    padding:26px;
    box-shadow:0 24px 60px rgba(var(--shadow-rgb),0.4);
  }
  .modal-box h2{
    font-family:'Space Grotesk',sans-serif;font-size:16px;margin:0 0 14px;padding-right:24px;
  }
  .attribution-text p{
    font-size:12px;color:var(--ink-soft);line-height:1.8;margin:0 0 10px;
  }
  .attribution-text p:last-child{margin-bottom:0;}
  .attribution-text a{color:var(--current);}
  @media (max-width:640px){
    .attribution-btn{bottom:12px;right:12px;}
  }

  .report-modal-overlay{
    position:fixed;inset:0;z-index:110;
    background:rgba(var(--shadow-rgb),0.6);
    display:none;align-items:center;justify-content:center;
    padding:24px;
  }
  .report-modal-overlay.open{display:flex;}
  .report-modal-box{
    width:100%;max-width:960px;height:100%;max-height:calc(100vh - 48px);
    background:var(--panel);border:1px solid var(--line);border-radius:14px;
    box-shadow:0 24px 60px rgba(var(--shadow-rgb),0.45);
    display:flex;flex-direction:column;overflow:hidden;
  }
  .report-modal-bar{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 16px;border-bottom:1px solid var(--line);flex-shrink:0;
  }
  .report-modal-title{font-family:'Space Grotesk',sans-serif;font-size:14px;color:var(--ink);}
  .report-modal-actions{display:flex;align-items:center;gap:10px;}
  .report-share-btn{
    font-family:'IBM Plex Mono',monospace;font-size:12px;padding:6px 14px;
    border-radius:100px;border:1px solid var(--line);background:var(--panel-tint);
    color:var(--ink-soft);cursor:pointer;transition:border-color .15s ease,color .15s ease;
  }
  .report-share-btn:hover{border-color:var(--current);color:var(--current);}
  .report-modal-actions .close-btn{position:static;}
  .report-modal-body{flex:1;overflow:hidden;position:relative;}
  .report-modal-body iframe{border:0;width:100%;height:100%;display:block;}
  .report-modal-body .placeholder{padding:40px 24px;}
  @media (max-width:640px){
    .report-modal-overlay{padding:0;}
    .report-modal-box{max-width:none;max-height:none;border-radius:0;}
  }

  .placeholder{color:var(--muted);font-size:13px;line-height:1.7;padding-right:20px;}

  aside h2{font-family:'Space Grotesk',sans-serif;font-size:16px;margin:0 0 4px;padding-right:26px;color:var(--ink);}
  .tag{
    display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;
    letter-spacing:0.06em;text-transform:uppercase;padding:2px 7px;border-radius:3px;margin-bottom:12px;
  }
  .tag.company{background:rgba(var(--kraft-line-rgb),0.16);color:var(--kraft-line);border:1px solid rgba(var(--kraft-line-rgb),0.4);}
  .tag.person{background:rgba(var(--current-rgb),0.1);color:var(--current);border:1px solid rgba(var(--current-rgb),0.3);}
  .tag.flag{background:rgba(var(--danger-rgb),0.14);color:var(--danger);border:1px solid rgba(var(--danger-rgb),0.4);margin-left:6px;}

  /* 按鈕永遠在 DOM 裡，是否可見由 body.has-report-access 決定——這樣
     權限查詢比面板慢回來時，不用重畫面板按鈕也會自己出現。 */
  .report-trigger-btn{display:none;}
  body.has-report-access .report-trigger-btn{
    display:inline-flex;align-items:center;gap:6px;
    width:auto;margin:0 0 16px;padding:5px 12px;
    background:rgba(var(--current-rgb),0.1);
    border:1px solid rgba(var(--current-rgb),0.35);border-radius:100px;
    color:var(--current);font-size:11.5px;font-weight:600;
    font-family:'IBM Plex Mono',monospace;letter-spacing:0.02em;cursor:pointer;
    transition:background .15s ease,color .15s ease,border-color .15s ease;
  }
  .report-trigger-btn:hover{background:var(--current);border-color:var(--current);color:var(--paper);}
  .report-trigger-btn svg{width:12px;height:12px;flex-shrink:0;stroke:currentColor;}

  .field{margin-bottom:12px;}
  .field-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:3px;}
  .field-label.list-label{margin-bottom:8px;} /* 標題後面接著一份名單/清單時，需要比一般欄位標籤更多的間距 */
  .field-value{font-size:13px;font-family:'IBM Plex Mono',monospace;color:var(--ink);word-break:break-all;}
  .footnote{font-size:11px;color:var(--muted);line-height:1.6;}

  .director-list{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;}
  .director-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:8px 0 2px;font-size:13px;cursor:pointer;
  }
  .director-block{border-bottom:1px dashed var(--line);}
  .director-block:last-child{border-bottom:none;}
  .director-row:hover .director-name{color:var(--current);}
  .director-position{color:var(--muted);font-size:11px;font-family:'IBM Plex Mono',monospace;}
  .director-name{font-weight:500;color:var(--ink);}
  .juristic-row{
    font-size:11px;color:var(--kraft-line);cursor:pointer;padding:0 0 8px 4px;
    font-family:'IBM Plex Mono',monospace;
  }
  .juristic-row:hover{text-decoration:underline;color:var(--current);}

  /* ---------- 法人歷史紀錄（時間軸清單 + 單筆記錄切換） ---------- */
  .history-toggle-btn{
    display:block;width:100%;margin-top:14px;padding:9px 0;
    background:var(--panel-tint);border:1px solid var(--line);border-radius:8px;
    color:var(--ink);font-size:12px;font-family:'Inter',sans-serif;cursor:pointer;
    transition:border-color .15s ease, color .15s ease;
  }
  .history-toggle-btn:hover{border-color:var(--current-dim);color:var(--current);}
  .history-back-btn{
    display:inline-block;margin-bottom:12px;padding:0;
    background:none;border:none;color:var(--muted);
    font-size:12px;font-family:'IBM Plex Mono',monospace;cursor:pointer;
  }
  .history-back-btn:hover{color:var(--current);}
  .history-timeline{border-top:1px solid var(--line);padding-top:6px;}
  .history-list-item{
    display:flex;flex-direction:column;gap:2px;
    padding:10px 8px;margin:0 -8px;border-radius:7px;cursor:pointer;
    border-bottom:1px dashed var(--line);
  }
  .history-list-item:last-child{border-bottom:none;}
  .history-list-item:hover{background:var(--panel-tint);}
  .history-date{font-size:12px;font-family:'IBM Plex Mono',monospace;color:var(--current);}
  .history-reason{font-size:12px;color:var(--muted);}
  .director-shares{
    font-size:11px;color:var(--muted);padding:0 0 8px 4px;
    font-family:'IBM Plex Mono',monospace;
  }

  .branch-list{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;}
  .branch-item{padding:6px 0;border-bottom:1px dashed var(--line);font-size:12px;color:var(--ink);}
  .branch-item:last-child{border-bottom:none;}
  .branch-no{font-family:'IBM Plex Mono',monospace;color:var(--muted);margin-left:6px;}
  .branch-meta{font-size:11px;color:var(--muted);margin-top:2px;}

  .ext-link{
    display:inline-block;font-size:12px;color:var(--current);text-decoration:none;
    border:1px solid var(--line);background:var(--panel-tint);
    padding:7px 11px;border-radius:7px;font-weight:500;
    cursor:pointer; /* 這個類別除了 <a> 也被用在 <button id="toggleGroupBtn"> 上，button 預設不會有手指游標 */
  }
  .ext-link:hover{border-color:var(--current);}
  .ext-note{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.6;}
  .help-tip{font-size:12px;color:var(--ink);line-height:1.7;margin-bottom:8px;}
  .help-tip:last-child{margin-bottom:0;}
  .help-tip b{color:var(--current);font-weight:600;}

  .ext-btn-group{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
  .ext-btn{
    font-size:11px;color:var(--ink-soft);background:var(--panel-tint);
    border:1px solid var(--line);border-radius:6px;padding:6px 9px;cursor:pointer;
    font-family:'Inter',sans-serif;
  }
  .ext-btn:hover{border-color:var(--current);color:var(--current);}

  .penalty-section{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;}

  .penalty-item{padding:8px 0;border-bottom:1px dashed var(--line);}
  .penalty-item:last-child{border-bottom:none;}
  .penalty-case{font-size:13px;font-weight:500;color:var(--danger);}
  .penalty-fact{font-size:12px;color:var(--ink);margin-top:2px;line-height:1.5;}
  .penalty-meta{font-size:11px;color:var(--muted);font-family:'IBM Plex Mono',monospace;margin-top:3px;}

  @media (max-width:640px){
    .toolbar{left:12px;right:12px;top:12px;flex-wrap:wrap;row-gap:8px;}
    .search-wrapper{flex:1 1 100%;order:1;min-width:0;}
    /* flex 子項目預設 min-width:auto，內容撐多寬容器就得多寬，才會在窄螢幕
       被推出畫面外（法人選項文字較長時最明顯）。input 拿掉這個限制負責被
       擠壓，select 給一個上限防止長選項文字把整排撐爆，按鈕固定不擠壓，
       維持可點擊的大小。 */
    .search-box{min-width:0;}
    .search-box select{flex-shrink:0;min-width:0;max-width:88px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
    .search-box input{width:auto;flex:1;min-width:0;}
    .search-box button, .search-box .clear-input-btn{flex-shrink:0;}
    .icon-btn{order:2;}
    .export-wrapper{order:2;}
    .account-wrapper{order:2;}
    .adv-panel{left:12px;right:12px;width:auto;}
    /* 原本用 top:auto + bottom:12px + height:65vh，等於面板高度固定
       算死、位置完全不管工具列實際多高——工具列比較矮的時候（例如
       只有一行搜尋框），面板上緣跟工具列下緣之間就會空出一大段，
       中間露出後面的圖，看起來像排版壞掉。改成跟 .adv-panel 同一招：
       上緣貼著 --panel-top（工具列實際底邊，用 ResizeObserver 量出來），
       下緣貼 12px，高度自然算出來，工具列多高面板就跟著從哪裡開始，
       不會再露出中間那段空白。 */
    /* max-width 沿用桌機那條 calc(100vw - 40px)，跟這裡的 left/right:12px
       疊在一起算，變成兩層各自獨立的寬度限制打架——視窗夠窄時右邊會
       多出一截留白、面板沒有真的貼齊 right:12px。手機版重設成 none，
       單純讓 left/right 各自的 12px 決定寬度就好。 */
    .detail-panel{left:12px;right:12px;width:auto;max-width:none;top:var(--panel-top, 78px);bottom:12px;height:auto;}
  }