@charset "utf-8";
/*
---------------------------------------------------------
combine/combine-f54d373a.css
---------------------------------------------------------
00. /var/www/archibm/public/css/site/shell.css
01. /var/www/archibm/public/css/site/shell-integration.css
02. /var/www/archibm/public/css/site/components.css
03. /var/www/archibm/public/css/site/demo.css
*/

/*
---------------------------------------------------------
00. /var/www/archibm/public/css/site/shell.css
---------------------------------------------------------
*/

/* ============================================================
   BIMTeki 新版網站：共用外殼（header／手機抽屜／footer／公告列）
   ------------------------------------------------------------
   來源：Sara 115.09.17 全站交付包 v5 的 index.html（外殼以首頁為準；115.09.16 v4 初版移植）
     §1 設計 tokens、全域 box-sizing、Lenis   ← index 頁面 CSS 開頭
     §2 skip-link                              ← index 頁面 CSS
     §3 外殼原稿（gongda-live-hf 整段）        ← 原樣移植，只拿掉預覽用的 #notification-box{display:none}
     §4 header／footer 中性化、導覽列寬度      ← index 頁面 CSS
     §5 手機選單分層式（115.09.17）           ← <style id="bt-drawer-drill">
     §6 Responsive QA 共用部分（115.09.17）   ← <style id="bt-rwd-0917-shared">
     站台整合層（本站自己的補充）              ← 見 shell-integration.css
   設計師改外殼時：以她 repo 的 index.html 為準重新移植 §1–§6，整合層另檔不受影響。
   規格：_docs/全站改版規格與計畫.md §4.1
   ============================================================ */

/* ── §1 設計 tokens ─────────────────────────── */
:root {
  --bt-700:#5A54C4;
  --bt-600:#7872E0;
  --bt-500:#958FFF;
  --bt-400:#AAA5FF;
  --bt-300:#CAC7FF;
  --bt-200:#E4E3FF;
  --bt-100:#F2F1FF;
  --or-500:#FF7E5C;
  --or-300:#FFCBBE;
  --or-100:#FFF2EF;
  --ink:#222222;
  --ink-2:#555555;
  --ink-3:#666666;
  --deco:#C8C8C8;
  --line:#E4E4E4;
  --line-soft:#EEECFA;
  --dark:#211D3A;
  --dark-2:#15122A;
  --pdark-1:#241F52;
  --pdark-2:#1B1740;
  --pdark-3:#100E2A;
  --pdark-card:#302A6B;
  --pdark-line:rgba(255,255,255,.055);
  --pdark-ink:#FFFFFF;
  --pdark-ink-2:rgba(255,255,255,.76);
  --pdark-ink-3:rgba(255,255,255,.55);
  --pdark-brand:#ADA8F2;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
a { text-decoration:none; color:inherit; }
html.lenis, html.lenis body { scroll-behavior:auto; }

/* ── §2 skip-link ─────────────────────────── */
.skip-link { position:fixed; left:12px; top:-64px; z-index:1000; padding:10px 18px; border-radius:50px; background:var(--bt-600); color:#fff; font-size:14px; font-weight:500; transition:top .16s ease; }
.skip-link:focus { top:12px; }

/* ── §3 外殼原稿 ─────────────────────────── */
/* ===== 功達正式站 header/footer 原樣 CSS（bim.arkiteki.com combine bundles 抽取 2026-07-22，勿手改——正式整合時直接用功達的 bundle）===== */
#app-homepage #header-wrapper{ height: 0;}
#app-homepage #hero-section .inner{ height: 100vh; }
#app-homepage #hero-slogan .button{ margin-right: 8px; background-color: #fff; width: 180px; }
#app-homepage #hero-slogan .button:hover{ background-color: var(--theme-button-color); }
#app-homepage #tools-section .grid-item .holder p.flex-grow{ width: 100%;}
#app-homepage #tools-section .button-wrapper .button{ min-width: 160px;}
#cta-section .buttons-wrapper{ margin-top: 30px; gap:20px; }
#cta-section .buttons-wrapper .button{ min-width: 170px;}
#cta-section .buttons-wrapper .button:first-child{ margin-left: auto;	}
#cta-section .buttons-wrapper .button:last-child{ margin-right: auto;	}
@media screen and (max-width: 1600px){
#app-homepage #tools-section .grid-item .holder .button{ height: 32px; line-height: 32px;}
}
@media screen and (max-width: 1024px){
#app-homepage #features-section > .inner{ flex-direction: column;}
#app-homepage #fact-section > .inner{ flex-direction: column;}
#app-homepage #tools-section .button-wrapper{ margin-top: 20px;}
#cta-section .buttons-wrapper{ gap: 10px; flex-wrap: wrap; justify-content: center;}
#cta-section .buttons-wrapper .button{ min-width: 140px; font-size: 1em; }
}
@media screen and (max-width: 320px){
#cta-section .buttons-wrapper{ gap: 10px; flex-wrap: wrap; justify-content: center;}
#cta-section .buttons-wrapper .button{ margin: 0 !important;}
}
html, body{ 
	font-family:"Noto Sans TC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Helvetica Neue", Helvetica, "Arial";  
	font-size:14px; 
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal; 
	text-size-adjust: 100%; 
	-webkit-text-size-adjust: 100%; 
}
.bg-white{ background-color: #fff;}
html, body{  }
form .row.submit-row.flex-justify .button{ margin-right: 5px;}
form .row.submit-row.flex-justify .button.right{ margin-right: 0; margin-left: auto;}
form .row.submit-row.flex-justify .button.right + .button{ margin-left: 5px;}
form .right .button{ display: inline-block; margin-left:3px;}
.custom-radio:checked + .button{ background-color: var(--theme-bg-color); color: #fff !important;}
.center{ text-align:center; }
.custom-scrollbar::-webkit-scrollbar{ width: 7px; height: 7px; }
.custom-scrollbar::-webkit-scrollbar-track{ background: var(--scrollbar-track); }
.custom-scrollbar::-webkit-scrollbar-thumb{ background: var(--scrollbar-thumb); min-height: 80px; border-radius: 7px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover{ background: var(--scrollbar-thumb); }
.custom-scrollbar-thin::-webkit-scrollbar{ width: 5px; height: 5px; }
.fr-view p a.button{ background-color: var(--theme-bg-color); color: #fff; padding: 0 1em; height: 36px; line-height: 36px; font-size: 1rem; }
.fr-view p a.button::after{ display: none;}
.flex{ display:flex; }
.flex-center{ display:flex; align-items:center; }
.flex-right{ display:flex; justify-content:flex-end; }
.flex-top{ display:flex; align-items:flex-start; }
.flex-bottom{ display:flex; align-items:flex-end; }
.flex-stretch{ display:flex; align-items:stretch; }
.flex-justify{ display:flex; justify-content:space-between; }
.flex-around{ display:flex; justify-content:space-around; }
.flex-evenly{ display:flex; justify-content:space-evenly; }
.flex-reverse{ display:flex; flex-direction:row-reverse; }
.flex-wrap{ display:flex; flex-wrap:wrap; }
.flex-vertical{ display:flex; flex-direction: column; }
.flex-grow{ flex-grow: 1;}
.flex-shrink{ flex-shrink: 1;}
.flex-not-grow{ flex-grow: 0;}
.flex-not-shrink{ flex-shrink: 0;}
.flex-not-grow-shrink{ flex-shrink: 0; flex-grow: 0;}
.button, .button-md, .button-lg, .button-sq{ display:inline-block; padding:0 1.1em; transition:background .2s; white-space:nowrap; cursor: pointer; transition: all .2s;
											background:var(--theme-button-color); color:#fff; border:none; text-align: center; text-decoration: none !important; }
.button{ height: 38px; line-height: 36px; border-radius:4px; font-size:1em; border: 1px solid var(--theme-button-color);}
.button-md{ height: 42px; line-height: 40px; border-radius:6px; font-size:1.1em; }
.button-lg{ height: 48px; line-height: 46px; border-radius:6px; font-size:1.2em; padding:0 2.4em; }
.button-xl{ height: 56px; line-height: 54px; border-radius:6px; font-size:1.2em; padding:0 1.5em; }
.button-sq{ width: 38px; padding: 0; line-height: 38px; border-radius:4px; }
.button-ft{ height: 34px; line-height: 32px; letter-spacing: .06em; border-radius:4px; font-size:1em; }
.button-ft.button-sq{ width: 34px;}
.button i{ margin-right:.5em; }
.button-sq i{ margin-right:0; font-size: 18px; color:var(--light-text-color); }
.button-ft i{ transform: scale(.8, .8); margin-right: 5px; }
.button:hover, .button-md:hover, .button-lg:hover{  }
.button-wrapper{ display:block; }
.button.disabled, .button-md.disabled, .button-lg.disabled{ pointer-events: none; opacity: .6;}
.button:hover{ border: 1px solid var(--dark-button-color); color: #fff; background-color: var(--dark-button-color);}
.button-white{ background-color: #fff; color: var(--light-text-color); border: 1px solid var(--mid-border-color);}
.button-white:hover, .button-white.active{ background-color: var(--midtone-bg-color); color: #fff;}
.button-white i{ color: var(--light-text-color);}
.button-gray{ border: 1px solid #f3f4f6; background: #f3f4f6; color: #666; transition: all .2s;}
.button-gray i{ color: var(--theme-text-color);}
.button-gray:hover{ border: 1px solid var(--light-bg-color); background-color: #fff; color: var(--theme-text-color); box-shadow: 3px 3px 12px rgba(0,63,64,.15); filter: none;}
.button-light{ border: 1px solid var(--light-bg-color); background: var(--light-bg-color); color: var(--theme-text-color); transition: all .2s;}
.button-light:hover{ border: 1px solid var(--theme-bg-color); background-color: var(--theme-bg-color); color: #fff; box-shadow: 3px 3px 12px rgba(0,63,64,.15); filter: none;}
.button-mid{ border: 1px solid var(--midtone2-bg-color); background: var(--midtone2-bg-color); color: #fff; transition: all .2s;}
.button-mid:hover{ border: 1px solid var(--theme-bg-color); background-color: var(--theme-bg-color); color: #fff; box-shadow:none; filter: none;}
.button-soft{ border: none; background-color: #fff; color: var(--light-text-color); border-radius: 4px; box-shadow: 2px 2px 6px #7a73ff26; transition: all .2s;}
.button-soft i{ color: var(--light-text-color); }
.button-soft:hover{ border: none; background-color: var(--light-bg-color); color: var(--theme-text-color) !important; filter: none; }
.button-article-light{ background-color: #fff; color: #2f6a6b; min-width: 140px; margin-right: 8px; border: 1px solid #2f6a6b; border-radius: 8px; box-shadow: 3px 3px 12px rgba(0,63,64,.15); filter: none;}
.button-article-light:hover{ background-color:#2f6a6b; color: #fff; filter: none;}
.button-article-dark{ background-color: #2f6a6b; color: #fff; min-width: 140px; margin-right: 8px; border: 1px solid #2f6a6b; border-radius: 8px; box-shadow: 3px 3px 12px rgba(0,63,64,.15); filter: none;}
.button-article-dark:hover{ background-color:#fff; color: #2f6a6b; filter: none;}
.button-highlighted{ background-color: #D7C79D; border:1px solid #D7C79D; color: #fff;  }
.button-highlighted:hover{ background-color: #fff; color: #D7C79D; box-shadow: 3px 3px 10px rgba(240,222,174,.3); animation: cta-flash 2s linear infinite; }
.button-full{ width: 100%; text-align: center;}
.tab-toolbar .lt .button{ margin-right: 5px;}
.tab-toolbar .rt .button{ margin-left: 5px;}
.social-share{ padding: 15px 0;}
.social-share .sharer-label{ margin-right: 15px;}
.social-share .sharer-icons{ }
.social-share .jssocials-share-link{ border-radius: 50%; border: none !important; font-size:.8em; }
.social-share .jssocials-share-link:hover{ color: #000; }
.dropdown{ position:relative; }
.dropdown .label{ cursor:pointer; }
.dropdown .menu{ z-index: 99; position:absolute; left:-10px; padding-top: 12px; display:none; }
.dropdown .menu > *{ background: #fff; padding:5px 20px; width: 270px; }
.dropdown .menu li{ margin:14px 0; white-space:nowrap; color: #666; }
.dropdown .menu li i{ margin-right: 5px;}
.dropdown:not(.dropdown-click):hover .menu, .dropdown-click.opened .menu{ display:block; }
.dropdown .menu.right{ left: auto; right: -10px; text-align: left;}
.dropdown-button{ display: flex; align-items: center;}
.dropdown-button .button{ height: 36px; border-radius: 0; }
.dropdown-button .label{ margin: 0;  height: 36px; border-radius: 0 4px 4px 0; }
.dropdown-button .label i{ margin: 0;}
.tips .buttons{ margin-right: 10px;}
.tips .buttons a{ margin-right: 15px; white-space: nowrap;}
.tips .buttons a:last-child{ margin: 0;}
.tips .buttons a:hover{ text-decoration: underline;}
.confirmation .buttons{ margin-top: 40px;}
.confirmation .buttons .button{ margin-left: 5px;}
.expandable-title .buttons .sort-handle{ cursor:move; width: 0; overflow: hidden; }
.expandable-body .buttons{ margin-top: 15px;}
.expandable-body .buttons > div{ margin-right: 24px; color: #999; cursor: pointer; display: inline-block; transition: color .2s; }
.expandable-body .buttons > div:hover{ color: #555;}
.expandable-body .buttons i{ margin-right: 1px;}
.expandable-body .tips .buttons{ margin-top: 0;}
.expandable.sortable .buttons .sort-handle{ width: 10px; }
.expandable-group.box-border .expandable:last-child, .expandable-group.box-border-gray .expandable:last-child{ border-bottom: none;}
.box-shadow{ box-shadow: 0 0 2px #7a73ff26;}
.box-shadow-sm{ box-shadow: 0 2px 6px #7a73ff26;}
.box-shadow-md{ box-shadow: 0 4px 10px #7a73ff26;}
.box-shadow-lg{ box-shadow: 0 0 15px #7a73ff26;}
.box-shadow-soft{ box-shadow: 3px 3px 10px #7A73FF33; }
.box-shadow-gray{ box-shadow: 2px 2px 6px #0000000D; }
.box-round{ border-radius: 4px;}
.box-round-md{ border-radius: 8px;}
.box-round-lg{ border-radius: 15px;}
.box-round-xl{ border-radius: 25px;}
.box-border{ border: 1px solid var(--theme-border-color); }
.box-border-light{ border: 1px solid var(--light-border-color); }
.box-border-mid{ border: 1px solid var(--mid-border-color); }
.box-border-gray{ border: 1px solid var(--gray-border-color); }
.box-group{ border-radius: 15px; box-shadow: 0 0 15px rgba(0,63,64,.15); padding: 40px 4%; margin-top: 25px; }
.box-group:first-child{ margin-top: 0;}
:root{

	--color-theme-100: #F2F1FF;
	--color-theme-200: #E4E3FF;
	--color-theme-300: #CAC7FF;
	--color-theme-400: #AAA5FF;
	--color-theme-500: #958FFF;
	--color-theme-600: #7872E0;
	--color-theme-700: #4C4894;
	--color-theme-800: #35326F;
	--color-orange-100: #FFF2EF;
	--color-orange-200: #FFE5DE;
	--color-orange-300: #FFCBBE;
	--color-orange-400: #FF987D;
	--color-orange-500: #FF7E5C;
	--color-black-50: #C8C8C8;
	--color-black-100: #666666;
	--color-black-200: #575757;
	--color-black-300: #555555;
	--color-black-400: #595959;
	--color-black-500: #222222;

	--color-theme-transparent-100: #F2F1FF00;
	--color-theme-transparent-200: #E4E3FF00;
	--color-theme-transparent-300: #CAC7FF00;
	--color-theme-transparent-400: #AAA5FF00;
	--color-orange-transparent-400: #FF987D44;

	--softer-border-color: var(--color-theme-100);
	--soft-border-color: var(--color-theme-200);
	--lighter-border-color: var(--color-theme-200);
	--light-border-color: var(--color-theme-300);
	--mid2-border-color: var(--color-theme-400);
	--mid-border-color: var(--color-theme-500);
	--theme-border-color: var(--color-theme-600);
	--gray-border-color: var(--color-black-50);
	--highlight-border-color: var(--color-theme-500);

	--default-light-text-color: var(--color-black-400);
	--default-text-color: var(--color-black-500);
	--sharp-text-color: var(--color-black-500);
	--default-title-color: var(--color-black-500);
	--light-title-color: var(--color-black-50);
	--theme-title-color: var(--color-theme-600);
	--dark-title-color: var(--color-theme-600);
	--secondary-light-title-color: var(--color-orange-400);
	--secondary-title-color: var(--color-orange-500);
	--secondary-text-color: var(--color-orange-500);

	--lighter-text-color: var(--color-theme-300);
	--light-text-color: var(--color-theme-400);
	--mid-text-color: var(--color-theme-500);
	--theme-text-color: var(--color-theme-600);
	--dark-text-color: var(--color-theme-700);

	--softer-bg-color: var(--color-theme-100);
	--soft-bg-color: var(--color-theme-200);
	--light-bg-color: var(--color-theme-300);
	--midtone2-bg-color: var(--color-theme-400);
	--midtone-bg-color: var(--color-theme-500);
	--theme-bg-color: var(--color-theme-600);
	--gradient-reversed-lighter-bg-color: linear-gradient(180deg, var(--color-theme-transparent-100) 50%, var(--color-theme-100) 100%);
	--gradient-lighter-bg-color: linear-gradient(180deg, var(--color-theme-100) 0%, var(--color-theme-transparent-100) 100%);
	--gradient-light-bg-color: linear-gradient(180deg, var(--color-theme-200) 0%, var(--color-theme-transparent-200) 100%);
	--gradient-bg-color: linear-gradient(180deg, var(--color-theme-400) 0%, var(--color-theme-transparent-400) 100%);

	--scrollbar-track: var(--color-theme-200);
	--scrollbar-thumb: var(--color-theme-400);
	--tooltipster-scrollbar-track: #ffffff;
	--tooltipster-scrollbar-thumb: var(--color-theme-400);

	/* 1g-neutral（115.09.02 Sara：滾軸也要中性色）：捲軸原本吃 --color-theme-*，
	   軌 #E4E3FF／滑塊 #AAA5FF 都是紫。改走教學頁灰階（#CACACA 分隔線階／#F2F2F2 淺底），
	   與本版 Hero 的中性骨架一致。
	   ⚠️ 只覆寫 --scrollbar-* 這兩個，不動上面的 --color-theme-* 本身——那是功達正式站的變數，
	   按鈕、漸層、tooltip 都在吃它，改了會波及整站元件。 */
	--scrollbar-track: #F0F0F0;
	/* 115.09.03 Sara 兩次指定加深：#CACACA → #9A9A9A → #6E6E6E，軌道同步淡到 #F0F0F0。
	   thumb 與 track 的對比從最初的 1.2:1 拉到約 3.5:1，滑塊位置一眼可見。
	   一修時保留在 #9A9A9A 是怕它成為畫面右側最重的一條線，實際看過後 Sara 要更強，
	   #6E6E6E 仍比內文的 #333 淡，不會搶過內容。 */
	--scrollbar-thumb: #6E6E6E;

	--gray-button-color: var(--color-black-50);
	--light-button-color: var(--color-theme-300);
	--midtone-button-color: var(--color-theme-400);
	--midtone2-button-color: var(--color-theme-600);
	--theme-button-color: var(--color-theme-600);
	--dark-button-color: var(--color-theme-600);
	
	--secondary-button-color: var(--color-orange-400);
	--secondary-dark-button-color: var(--color-orange-500);

	--play-button-bg: #ffffff;
	--play-button-text: var(--color-theme-600);
	--play-button-size: 60px;

	--header-wrapper-height: 100px;
	--header-bar-top: 48px;
	--header-bar-height: 48px;
	
	--page-header-padding: 90px;
	--page-header-fontsize: 2.6em;

}
html{ scroll-behavior: smooth; overflow-x: hidden; }/* 115.09.14 Sara：拿掉正式站 grid-bg.png 背景格紋 */
html, body{ color: var(--default-text-color);}
.box-header{ padding: 18px 3%; border-bottom: 1px solid var(--mid-border-color); }
.box-content{ padding: 30px 3%; min-height: 280px;}
.expandable.box-round-xl{ border: 1px solid var(--theme-border-color); padding: 0 15px; margin-bottom: 15px; overflow: hidden;}
.expandable.box-round-xl .expandable-title{ padding: 8px 3px; background-color: #fff; }
.expandable.box-round-xl .expandable-body .text{ margin: 0 5%;}
.button, .button-md, .button-lg{ border-radius: 50px;}
.button-sq{ border-radius: 6px; width: 34px; height: 34px; line-height: 34px;}
.button-sq i{ font-size: 16px; color: inherit;}
.button:hover{ background-color: var(--midtone2-button-color);}
.button-outline{ background-color: #fff; border: 1px solid var(--theme-button-color); color: var(--theme-button-color); }
.button-outline:hover, .button-outline.active{ background-color: var(--theme-button-color); border: 1px solid var(--theme-button-color); color: #fff;}
.button-two-tone{ background-color: transparent; border: 1px solid var(--gray-button-color); color: var(--gray-button-color);}
.button-two-tone:hover{ background-color: #fff; border: 1px solid var(--theme-button-color); color: var(--theme-button-color);}
.button-light{ background-color: var(--softer-bg-color); color: var(--theme-button-color); border: 1px none;}
.button-light:hover{ background-color: var(--soft-bg-color); color: var(--theme-button-color); border: 1px none; box-shadow: none; }
.button-soft:hover{ background-color: var(--soft-bg-color); }
.button-midtone{ background-color: var(--midtone-button-color); color: #fff;}
.button-midtone:hover{ background-color: var(--theme-button-color); border: 1px solid var(--theme-button-color);}
.button-secondary{ background-color: var(--secondary-button-color); border: 1px solid var(--secondary-button-color);}
.button-secondary:hover{ background-color: var(--secondary-dark-button-color); border: 1px solid var(--secondary-dark-button-color);}
.button-secondary-outline{ background-color: #fff; border: 1px solid var(--secondary-button-color); color: var(--secondary-button-color); }
.button-secondary-outline:hover{ background-color: #fff; border: 1px solid var(--secondary-dark-button-color); color: var(--secondary-dark-button-color);}
.button-secondary-soft{ background-color: #fff; border: 1px solid #fff; color: var(--secondary-button-color); box-shadow: 2px 2px 4px var(--color-orange-transparent-400);}
.button-secondary-soft:hover{ background-color: #fff; border: 1px solid var(--secondary-button-color); color: var(--secondary-button-color); }
.page-section-header .buttons{ margin-bottom: 30px;}
.page-section-header .buttons .button{ margin: 0 5px; min-width: 160px;}
.faq-section .inner{ max-width: 1200px; margin: auto; }
.inner{ width: 92%; max-width: 1440px; margin:auto; }
.inner-lg{ width: 92%; max-width: 1350px; margin:auto; }
.inner-md{ width: 92%; max-width: 1150px; margin:auto; }
.inner-sm{ width: 92%; max-width: 960px; margin:auto; }
.inner-wd{ width: 92%; max-width: 1500px; margin:auto; }
#header-wrapper{ width: 100%; height: var(--header-wrapper-height); }
#header-wrapper h2{ font-size: 2.2em; font-weight: 500; letter-spacing: .04em; }
#header-inner{ z-index: 1000; position: fixed; left: 50%; top: var(--header-bar-top); height: var(--header-bar-height); padding:0 9px 0 4%; transform: translateX(-50%); border: 1px solid var(--theme-border-color); border-radius: 50px; color: var(--default-text-color); }
#header-inner h1{ width: 95px; flex-grow:0; flex-shrink: 0; }
#header-inner h1 a{ display: block; width: 100%; height: 0; padding-top:22.32%; background: url(https://bim.arkiteki.com/image/logos/bimteki.svg) no-repeat 50% 50%; background-size: contain; text-indent: -999px; overflow: hidden;}
#header-nav{ margin-right: 60px; margin-left: auto; }
.not-login #header-nav{ margin-right: 30px;}
#header-nav > ul >li{ margin-left: 50px;}
#header-nav > ul >li:first-child{ margin-left: 0;}
#header-nav > ul >li > a{ font-size: 1.02em; letter-spacing: .05em;}
#header-nav > ul >li.active > a{ color: var(--theme-text-color);}
#header-nav i{ margin-right: 10px; width: 14px; height: 14px; }
#header-nav a:hover{ color:var(--theme-text-color); }
#header-nav > ul >li.dropdown .menu{ left: 50%; transform: translateX(-50%); padding-top: 22px; }
#header-nav > ul >li.dropdown .menu > *{ padding:4px 25px; min-width: 120px; width: fit-content; }
#header-nav > ul >li.dropdown .menu a:hover, #header-nav > ul >li.dropdown .menu .active a{ color:var(--theme-text-color); }
#header-nav > ul >li.dropdown .menu li{ margin:16px 0; }
#header-icons{ margin-right: 15px;  }
#header-icons li{ margin-left: 15px; width: 21px; height: 21px;}
#header-icons li:first-child{ margin-left: 0;}
#header-icons i{ margin-right: 5px; font-size: 1.5em;}
#header-icons a:hover, #header-icons .label:hover{ color:var(--theme-text-color); }
#header-trial-button{ margin-left: 40px; }
.headroom #header-inner{ transition: all .5s; }
.headroom--pinned #header-inner{ background-color: rgba(255,255,255,1); }
.headroom--unpinned #header-inner{ transform: translate(-50%, -100px); }
.headroom--not-top #header-inner{ backdrop-filter: blur(6px); background-color: rgba(255,255,255,.7);  }
#site-switch-wrapper #site-switch-menu{ padding-top: 20px !important; right: -80px !important; }
#site-switch-wrapper #site-switch-menu ul{ border: 1px solid var(--theme-border-color) !important;}
#notification-box{ top: 55px !important; right: 4% !important; border: 1px solid var(--theme-border-color) !important; }
#nav-wrapper{ z-index: 1002; overflow-y: auto; position: fixed; left: 0; top:0; height: 100vh; height: 100dvh; width: 100vw; max-width: 400px; transform: translateX(-110%); transition: transform .4s;}
#nav-inner{ width: 95%; height: 100%; padding-bottom: 30px; }
#nav-inner ul li a{ opacity: .8; transition: all .2s;}
#nav-inner ul li a:hover{ opacity: 1; }
#nav-inner ul li.active a{ }
#nav-inner .dropdown .label{ width: auto; display: inline-block;}
#nav-inner .dropdown .menu{ position: static;}
#nav-inner .dropdown .menu ul{ border: none; padding: 0; border-radius: 0; box-shadow:none; background: none; text-align: left;}
#nav-inner .dropdown .menu li{ margin: 1.5rem 0 1rem 1rem; font-size: 1.02rem; color: var(--default-text-color);}
#nav-inner .nav-links{ margin: auto 12%; padding-top: 20px; }
#nav-inner .nav-links li{ margin: 2em 0; font-size: 1.15rem;  }
#nav-inner .nav-links li a{ display: block; width: 100%; white-space: nowrap; letter-spacing: .2em; }
#nav-inner .nav-links li i{ margin-right: .8em;}
#nav-inner .social-links{ margin: 0 12%; padding-bottom: 30px; }
#nav-inner .social-links > .flex{ justify-content: flex-start; }
#nav-inner .social-links ul{ justify-content: center;}
#nav-inner .social-links li{ margin:0 10px 0 0; }
#nav-inner .social-links li a{ display:inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; border: 1px solid var(--light-border-color);  }
#nav-inner .social-links li i{ font-size: 1.33em; color: var(--theme-text-color);}
#menu-button{ display: none; width: 18px; height: 18px; margin-right: 15px; cursor: pointer; position: relative; }
#menu-button span{ display: block; position: absolute; height: 1px; width: 100%; background-color:var(--theme-border-color); opacity: .7; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; }
#menu-button span:nth-child(1){ top: 5px; transform-origin: left center; }
#menu-button span:nth-child(2){ top: 10px; transform-origin: left center; }
#menu-button span:nth-child(3){ top: 15px; transform-origin: left center; }
#menu-close{ display: none;}
#footer-wrapper{ padding-top: 30px; min-height: 300px; background: url(https://bim.arkiteki.com/image/assets/footer-bg.jpg) no-repeat center top; background-size: cover; }
#footer-inner{ padding: 25px 0;  border-top: 1px solid var(--light-border-color); }
#footer-top-bar{ margin-bottom: 10px;}
#footer-logo{ width: 170px;}
#footer-nav li{ margin-left: 36px; }
#footer-nav li a:hover{ color: var(--theme-text-color); }
#footer-nav-primary{ font-weight: 500; margin: 20px 0 30px 0; }
#footer-nav-secondary{ font-size: .95em; }
#footer-inner .social-links-label{ font-size: .9em; margin-bottom: 10px; color: var(--secondary-text-color); }
#footer-inner .social-links li{ margin-right: 14px; }
#footer-inner .social-links li a{ display: block; width: 38px; height: 38px; line-height: 38px; text-align: center; color: var(--theme-text-color); border-radius: 50%; border: 1px solid var(--theme-border-color);}
#footer-inner .social-links li a:hover{ background-color: var(--theme-button-color); color: #fff;}
#footer-copyright{ font-size: 12px; letter-spacing: .1em; }
.cta-text .button-wrapper{ margin: 30px 0;}
@media screen and (max-width: 1600px){
:root{
		--page-header-padding: 60px;
		--page-header-fontsize: 2.2em;
	}
#header-nav{ margin-right: 40px;}
#header-nav	li{ margin-left: 50px;}
#footer-wrapper{ min-height: 240px;}
#footer-logo{ width: 140px;}
#footer-nav-primary{ margin: 10px 0 30px 0;}
}
@media screen and (max-width: 1440px){
:root{
		--page-header-padding: 50px;
		--page-header-fontsize: 1.8em;
	}
#header-nav	li{ margin-left: 40px;}
#footer-wrapper{ min-height: 200px; margin-top: 20px;}
#footer-inner{ padding: 20px 0;}
}
@media screen and (max-width: 1280px){
#header-inner{ padding-left: 20px;}
#header-nav > ul >li{ margin-left: 30px;}
#header-trial-button{ margin-left: 20px;}
}
@media screen and (max-width: 1024px){
:root{
		--header-wrapper-height: 80px;
		--header-bar-top: 30px;
		--header-bar-height: 42px;
		--page-header-padding: 40px;
		--page-header-fontsize: 1.5em;
	}
.button-soft{ box-shadow: none;}
.button{ height: 36px; line-height: 34px; }
.button-lg{ height: 44px; line-height: 42px; font-size: 1.2em; }
.button-sq{ width: 36px; padding: 0; line-height: 36px;}
.box-group{ padding: 30px 4%; margin-top: 15px; }
.inner{ width: 92%; margin:auto; }
#header-inner{ }
#header-inner h1{ }
#header-icons{ margin-right: 15px; margin-left: auto; }
#header-icons i{ }
#header-nav{ display: none;}
#header-trial-button{ display: none;}
#nav-wrapper{ background-color: rgba(255,255,255,.86); backdrop-filter: blur(6px); }
#menu-button{ display: block; }
#menu-close{ display: block; position: absolute; left: 12%; top: 20px;}
.show-nav #nav-wrapper{ transform: translateX(0);}
#footer-wrapper{ margin: 0; padding: 0;}
#footer-nav li{ margin-left: 20px;}
#footer-copyright{ font-size: 10px;}
}
@media screen and (max-width: 920px){
.button-lg{ height: 40px; line-height: 38px; font-size: 1.1em; }
}
@media screen and (max-width: 768px){
#footer-inner{ padding-top: 30px;}
#footer-header{ width: 100%;}
#footer-top-bar{ flex-direction: column;}
#footer-nav-primary{ flex-direction: column; margin: 20px 0 15px 0;}
#footer-nav li{ margin: 12px 0;}
#footer-inner .social-links li{ margin-right: 10px;}
#footer-bottom-bar{ display: block;}
#footer-copyright{ margin-top: 20px;}
.cta-text .button-wrapper{ margin: 20px 0;}
.cta-text .button-md{ font-size: 1em; width: 100%;}
}
@media screen and (max-width: 640px){
:root{
		--page-header-padding: 30px;
		--page-header-fontsize: 1.5em;
	}
}
#subscription-status-bar .button{ height: 32px; line-height: 30px; margin-left: auto; border-radius: 8px; font-size: .92em; padding: 0 .86em; }
#my-application-list .application-buttons .button{ margin-left: 8px; border-radius: 8px;}
#my-application-list .content-holder .list-table li > div:not(.buttons){ font-weight: 500; font-size: 1.02em; letter-spacing: .05em;}
#my-application-list .content-holder .button{ margin-left: 5px; border-radius: 8px; }
#offline-code-form .button{ margin: 0 2px;}
.box-app-downloads{ padding: 40px 6%; margin:0 auto 30px auto; color: var(--sharp-text-color);}
.box-app-downloads h3{ margin:0 0 5px 0; font-size: 2em; color: var(--theme-title-color); }
.box-app-downloads .meta{ margin-top: 30px;}
.box-app-downloads .meta p{ margin-right: 30px;}
.box-app-downloads .description{ margin-top: 20px; font-size: 1rem; line-height: 1.5em;}
.box-app-downloads .buttons .button:not(.button-soft){ margin-left: 8px; min-width: 150px; border-radius: 5px;}
.box-app-downloads .buttons .button:not(.button-soft):hover{ background-color: #fff; border: 1px solid var(--theme-border-color); color: var(--theme-text-color);}
.box-app-downloads .all-versions-btn{ margin-top: 25px; color: var(--default-text-color); cursor: pointer; transition: all .2s;}
.box-app-downloads .all-versions-btn:hover{ color: var(--theme-text-color);}
.box-app-downloads .all-versions-btn i{ font-size: 12px; margin-left: 4px; transition: all .2s;}
.box-app-downloads .all-versions-btn.opened i{ transform: rotate(180deg);}
.box-app-downloads .file-archives{ margin-top: 30px; display: none;}
.box-app-downloads .file-archives li{ border-bottom: 1px solid var(--gray-border-color); padding: 30px 5px;}
.box-app-downloads .file-archives li:first-child{ color: var(--theme-text-color);}
.box-app-downloads .file-archives li:not(.header-row) .filename{ font-size: 1.2em; }
.box-app-downloads .file-archives .filename{ width: 40%; line-height: 1.2em; }
.box-app-downloads .file-archives .filesize{ width: 90px;}
.box-app-downloads .file-archives .version{ width: 90px;}
.box-app-downloads .file-archives .updated{ width: 80px;}
.box-app-downloads .file-archives .buttons{ width: 120px;}
.box-app-downloads .file-archives .button{ min-width: 0;}
.box-app-downloads .file-archives .note{ font-size: 1rem; line-height: 1.2em; color: var(--default-text-color);}
.box-app-downloads .mobile-label{ display: none;}
@media screen and (max-width: 1440px){
#my-application-list .application-buttons .button{ font-size: .95rem; }
}
@media screen and (max-width: 1280px){
#my-application-list .application-buttons .button i{ display: none;}
.box-app-downloads{ padding: 30px 4%; margin:0 auto 20px auto; border-radius: 15px; }
.box-app-downloads h3{ font-size: 1.8em; margin-bottom: 0;}
.box-app-downloads .file-archives li:not(.header-row) .filename{ font-size: 1.1em;}
}
@media screen and (max-width: 1024px){
#my-application-list .application-buttons .button{ height: 34px; line-height: 32px; margin: 0 6px 0 0;}
#my-application-list .application-buttons .button i{ display: inline-block;}
#my-application-list .application-expandable .list-table li .buttons{ margin: 5px 0;}
#my-application-list .application-expandable .list-table li .buttons > div{ justify-content: flex-start;}
#my-application-list .application-expandable .list-table li .buttons .button{ height: 34px; line-height: 32px; margin: 0 6px 0 0;}
.box-app-downloads-wrapper{ margin-top: 15px;}
.box-app-downloads > .flex-justify{ flex-direction: column;}
.box-app-downloads .info{ width: 100%;}
.box-app-downloads .buttons{ margin-top: 20px;}
.box-app-downloads .buttons .button{ margin-left: 0 !important;  }
.box-app-downloads .file-archives li{ padding: 20px 5px; position: relative;}
.box-app-downloads .file-archives li.header-row{ display: none;}
.box-app-downloads .file-archives li > div{ flex-direction: column; align-items: flex-start; gap: 14px; padding-right: 40px; }
.box-app-downloads .file-archives li .filename,
    .box-app-downloads .file-archives li .filesize,
    .box-app-downloads .file-archives li .version,
    .box-app-downloads .file-archives li .updated{ display: flex; width: 100%; }
.box-app-downloads .file-archives li:not(.header-row) .filename{ font-size: 1em;}
.box-app-downloads .file-archives .buttons{ width: auto; position: absolute; right: 0; top: 0;}
.box-app-downloads .file-archives .buttons .button{ width: 30px; height: 30px; line-height: 30px; box-shadow: 2px 2px 6px #7a73ff26; }
.box-app-downloads .file-archives .note{ display: flex; flex-direction: row; gap: 0; margin-top: 14px;}
.box-app-downloads .file-archives .mobile-label{ display: block; color: var(--theme-text-color); width: 80px; flex-shrink: 0; flex-grow: 0;}
}
@media screen and (max-width: 768px){
.box-app-downloads h3{ font-size: 1.6em;}
.box-app-downloads .meta{ margin-top: 20px; }
}
@media screen and (max-width: 640px){
.box-app-downloads .meta{ flex-direction: column; gap: 8px;}
}
.plan-table .buy .buttons{ position: absolute; bottom:40px; width: 84%; gap:8px; }
.plan-table .buy .buttons button, .plan-table .buy .buttons a{ flex-grow: 1; font-weight: 400 !important; border-radius: 8px; color: var(--theme-text-color); background: none; transition: all .2s; cursor: pointer;}
.plan-table .buy .buttons button:hover, .plan-table .buy .buttons a:hover{ background-color: var(--mid2-border-color); border: 1px solid var(--mid2-border-color); color: #fff;}
.plan-table .buy .buttons .sep{ margin: 0 8px; display: inline-block; font-size: 12px; transform: translateY(-2px); }
#app-addons .plan-table .buy .buttons{ position: static; width: auto; }
@media screen and (max-width: 1280px){
.plan-table .buy .buttons button, 
    .plan-table .buy .buttons a{ font-size: 1em; padding: 0 .6em; height: 36px; line-height: 34px; }
.plan-table .buy .buttons .sep{ margin: 0 5px;}
}
@media screen and (max-width: 920px){
.plan-table .buy .buttons{ flex-direction: column; bottom:20px; }
.plan-table .buy .buttons button, 
    .plan-table .buy .buttons a{ width: 100%;}
}
@media screen and (max-width: 768px){
.plan-table .buy .buttons{ flex-direction: row; bottom:30px; width: 88%; }
.plan-table .buy .buttons button, 
    .plan-table .buy .buttons a{ width: auto; }
}
.subscription{ width:100%; max-width:360px; margin: 20px 0 30px 0;}
.subscription-title{ margin-bottom:10px; }
.subscription-fields{ position:relative;  }
.subscription-fields input{ flex-grow: 1; width: auto !important; height:38px !important; background-color: #fff !important; border:1px solid var(--theme-button-color) !important; padding:0 .8em; line-height: 36px; border-radius:4px 0 0 4px !important; outline:none; }
.subscription-fields button{ height:38px; padding:0 .8em; line-height: 36px; background:var(--theme-button-color); color:#fff; border-radius:0 4px 4px 0; border:1px solid var(--theme-button-color); }
.subscription-policy{ margin-top: 15px; font-size: 12px; line-height: 1.33em; color: #888;}
.subscription-result{ font-size: .95rem; color: #666; margin-top:10px; display:none; }

/* ===== 2026-07-28 footer 優化（Sara 規格）：訂閱膠囊化＋選單改三欄資訊架構 ===== */
.subscription-title{ font-weight:700; font-size:15px; color:var(--ink); margin-bottom:12px; letter-spacing:.05em; }
.subscription{ max-width:400px; }
.subscription-fields{ background:#fff; border:1px solid var(--bt-200); border-radius:50px; padding:5px 5px 5px 10px; }
.subscription-fields input{ border:0 !important; background:transparent !important; border-radius:50px !important; height:40px !important; }
.subscription-fields input:focus{ outline:none; }
.subscription-fields button{ height:40px; padding:0 24px; line-height:40px; border-radius:50px; border:0; background:var(--bt-600); color:#fff; font-weight:500; letter-spacing:.05em; cursor:pointer; transition:background .15s ease; }
.subscription-fields button:hover{ background:var(--bt-500); }
.subscription-policy{ margin-top:14px; font-size:13px; line-height:1.7; color:var(--ink-3); letter-spacing:.03em; }
.subscription-policy a{ color:var(--bt-600); margin:0 3px; }
#footer-nav{ display:flex; flex-wrap:wrap; gap:clamp(28px,4.5vw,80px); }
#footer-nav .fn-col h4{ margin:20px 0 8px; font-size:14px; font-weight:700; color:var(--ink); letter-spacing:.05em; }
#footer-nav .fn-col ul{ list-style:none; margin:0; padding:0; }
#footer-nav .fn-col li{ margin:0; }
#footer-nav .fn-col a{ display:block; padding:7px 0; font-size:14px; color:var(--ink-2); letter-spacing:.05em; }
#footer-nav .fn-col a:hover{ color:var(--bt-600); }
/* 115.09.03 Sara：「間距開一點，現在很難呼吸」。
   實測 CTA 區底到 footer 的 logo 只有 25px（全部來自 footer-inner 自己的 padding）——
   #start 的 50px 下內距被貼底的細線柱列佔滿，等於柱列一結束就撞上 footer。
   2026-07-28 把這裡歸零是為了「接縫只留一條 footer-inner 頂線」，
   但那條線今天已依 Sara 指示移除，這個理由不再成立，空間可以還回來。
   給 64px 之後總間距約 89px，與全站 100px 的區塊間距同一個級距。 */
/* 115.09.07 Sara：這段留白改短。⚠️ 這個值不等於畫面上看到的間距——
   #footer-inner 自己還有 25px 上內距，總間距 = 這裡 + 25。
   64 → 34 之後，CTA 底到 logo 頂由 89px 收到 59px。
   （09/03 設 64 是因為 Sara 當時說「很難呼吸」，那時 CTA 的柱列緊貼底部；
     柱列位置 115.09.07 修正後不再貼死，這段留白就不需要那麼多。） */
#footer-wrapper{ padding-top:clamp(22px,2.4vw,34px); }
/* 115.09.03 Sara：「這條線還是沒有拿掉」——就是這條 footer-inner 的頂線（不是襯底的基準線，那條已先移除）。
   2026-07-28 當時留著它是為了給 CTA→footer 一個分界，但結尾區塊改成細線襯底之後，
   襯底本身已經把兩區分開了，再多一條實線就變成畫蛇添足。
   ⚠️ 用覆寫而不是改上面 L1862 的原規則：那一整段是功達正式站的原樣，
   保持原樣才能跟正式站對照，本頁的調整一律集中在這一區。 */
#footer-inner{ border-top:0; }
/* 115.09.03 Sara：「footer 漸層也改成中性色」。
   原本 L1169 的底是外部圖 https://bim.arkiteki.com/image/assets/footer-bg.jpg，
   實際下載檢視後確認那張圖**只是一道白→極淡紫的漸層、沒有任何圖樣**，
   所以不需要請功達另出中性版——直接用 CSS 漸層覆蓋掉即可（也順便少一支外部請求）。
   必須放在 L1169 之後才蓋得過：兩者特異性相同（都是單一 id），後寫的贏。
   末端 #F2F2F4 對齊 Hero 漸層末端 --bt-100(.neutral → #F5F5F5) 的明度，首尾才是同一個灰。
   ⚠️ 交付時要註明這是本頁 override；正式站若沿用，功達要嘛改 CSS、要嘛換掉那張 jpg。 */
#footer-wrapper{ background:linear-gradient(180deg,#FFFFFF 0%,#FAFAFA 46%,#F2F2F4 100%); }
#footer-nav{ margin-right:clamp(24px,6vw,110px); } /* 2026-07-28 Sara：右欄選單往左推、保留右側呼吸空間 */
@media screen and (max-width: 768px){
.subscription{ margin: 20px 0 10px 0;}
}
#auth-toolbar{ flex-shrink: 0; margin-right: 15px;}
#auth-toolbar .dropdown > .label{ opacity: 1; transition: all .2s;}
#auth-toolbar .dropdown > .label:hover{ opacity: 1; color: var(--theme-text-color);}
#auth-toolbar .dropdown > .label i{ font-size: 1.5em; }
#auth-toolbar .label .name{ margin-left: 12px; white-space: nowrap; font-size: .96em; line-height: 1.33em; }
#auth-toolbar .label img{ width: 40px; height: 40px; border-radius: 50%; flex-grow: 0; flex-shrink: 0; }
#auth-toolbar .menu{ padding-top: 20px;}
#auth-toolbar .menu > div{ padding: 0; border: 1px solid var(--theme-border-color);}
#auth-toolbar .profile-info{ padding: 15px; border-bottom: 1px solid var(--light-border-color);}
#auth-toolbar .profile-info > a{ flex-grow: 0; flex-shrink: 0 }
#auth-toolbar .profile-info img{ margin-right: 10px;}
#auth-toolbar .profile-info .name{ margin:0 0 4px 0; font-weight: 500; font-size: 1.05em; color: var(--theme-text-color);}
#auth-toolbar .profile-info .email{ font-size: .95em;}
#auth-toolbar ul{ padding: 10px 0; }
#auth-toolbar ul li{ margin: 0; }
#auth-toolbar ul li a{ color: var(--default-text-color); display: block; padding: .7em 20px; transition: all .2s;}
#auth-toolbar ul li a:hover{ background-color: var(--soft-bg-color); color: var(--theme-text-color); }
#auth-toolbar ul li i{ width: 16px;}
#auth-toolbar-login-button{ font-size: 1rem; margin-left: 5px; }
#auth-toolbar-login-button span{ opacity: .86; }
#auth-toolbar-login-button span:hover{ opacity: 1; transition: all .2s;}
#auth-toolbar-login-button i{ font-size: 1.46em; margin-right: 8px;}
.social-login{ width:100%; max-width:360px; margin:30px auto; }
.social-login-button{ background:#000; color:#fff; padding:.8em 0 .9em 0; margin:8px 0; text-align:center; display:block; 
									border-radius:3px; }
.social-login-button i{ margin-right:8px; }
.social-login-button.facebook{ background:#3b5998; }
.social-login-button.google{ background:#dd4b39; }
.social-login-button.line{ background:#53b635; }
@media screen and (max-width: 1024px){
#auth-toolbar .label img{ width: 30px; height: 30px;}
#auth-toolbar-login-button span{ display: none;}
#auth-toolbar-login-button i{ margin-right: 0;}
}
@media screen and (max-width: 640px){
#auth-toolbar .label .name{ display: none;}
.social-login{  }
}
:root{--f-spinner-width: 36px;--f-spinner-height: 36px;--f-spinner-color-1: rgba(0, 0, 0, 0.1);--f-spinner-color-2: rgba(17, 24, 28, 0.8);--f-spinner-stroke: 2.75}
:root{--f-button-width: 40px;--f-button-height: 40px;--f-button-border: 0;--f-button-border-radius: 0;--f-button-color: #374151;--f-button-bg: #f8f8f8;--f-button-hover-bg: #e0e0e0;--f-button-active-bg: #d0d0d0;--f-button-shadow: none;--f-button-transition: all 0.15s ease;--f-button-transform: none;--f-button-svg-width: 20px;--f-button-svg-height: 20px;--f-button-svg-stroke-width: 1.5;--f-button-svg-fill: none;--f-button-svg-filter: none;--f-button-svg-disabled-opacity: 0.65}
html.with-fancybox{width:auto;overflow:visible;scroll-behavior:auto}
html.with-fancybox body{touch-action:none}
html.with-fancybox body.hide-scrollbar{width:auto;margin-right:calc(var(--fancybox-body-margin, 0px) + var(--fancybox-scrollbar-compensate, 0px));overflow:hidden !important;overscroll-behavior-y:none}
:root{--swiper-theme-color:#007aff}
:root{--swiper-navigation-size:44px}
/* shim：內容區另有自己的 reset，這裡補正式站全域 reset 在 header/footer 需要的部分 */
#header-wrapper ul,#nav-wrapper ul,#footer-wrapper ul{list-style:none;margin:0;padding:0}
#header-wrapper h1{margin:0;letter-spacing:0}
#header-wrapper a,#nav-wrapper a,#footer-wrapper a{text-decoration:none}

/* =====================================================================
   Mega Menu（2026-07-27 Sara 規格；只作用於桌機 >1024px，手機沿用抽屜）
   定位原理：#header-inner 有 transform，本身即 absolute 的 containing block，
   面板用 left:50% + translateX(-50%) 就會相對「整個 Header」置中。
   ===================================================================== */
/* 主選單項目：hover／展開時淡紫圓角膠囊，鍵盤 focus 才顯示外框 */
#header-nav > ul > li{ margin-left:22px; }
#header-nav > ul > li:first-child{ margin-left:0; }
#header-nav > ul > li > a,
#header-nav .nav-drop-label{ display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border:1px solid transparent; border-radius:8px; background:none; font-family:inherit; font-size:1.02em; letter-spacing:.05em; line-height:1.4; color:var(--default-text-color); white-space:nowrap; cursor:pointer; transition:background-color .18s ease, color .18s ease; }
/* 115.09.08 Sara：「主選單 hover 不要有底色，文字變色就好」。
   ⚠️ 展開中（.is-open）那條也一起去底色，兩個狀態才一致——只拿掉 hover 的話，
      滑鼠停在已展開的項目上會看到底色忽然出現，像是壞掉。
      （右側 icon 列 115.07.28 就是這樣處理的，這裡跟上。）
   ⚠️ 顏色維持 --bt-700 不改回 bt-600：現在是白底不是 bt-100 底，對比只會更好，
      沒有理由為了「底色沒了」就把字色調淺。 */
#header-nav > ul > li > a:hover,
#header-nav .nav-drop-label:hover,
#header-nav .nav-drop.is-open > .nav-drop-label{ background-color:transparent; color:var(--bt-700); }
#header-nav > ul > li > a:focus-visible,
#header-nav .nav-drop-label:focus-visible{ outline:2px solid var(--bt-600); outline-offset:2px; }/* 2026-07-28 harden：改回全站 2px 紫 outline，1px 深灰框對鍵盤使用者太弱 */
#header-nav .caret{ margin:0; width:auto; height:auto; font-size:.72em; transition:transform .2s ease; }
#header-nav .nav-drop.is-open .caret{ transform:rotate(180deg); }

/* 面板容器：淡入＋下移 8px，180ms；padding-top 當作滑鼠橋接區，移入面板不會關 */
#header-inner .nav-drop{ position:static; }
#header-inner .mega{ position:absolute; left:50%; top:100%; z-index:1001; padding-top:10px; opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,-8px); transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
#header-inner .nav-drop.is-open > .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); transition:opacity .18s ease, transform .18s ease, visibility 0s; }
#header-inner .mega-inner{ background:#fff; border:1px solid var(--bt-200); border-radius:16px; box-shadow:0 12px 32px rgba(33,29,58,.10); overflow:hidden; }
/* 115.09.03 Sara：「空太多 不用這麼大空間」。1040px 是四欄時代的寬度，
   減成三欄後每欄約 340px、但最長的項目只有 6-11 個字，右側各空一大塊。
   縮到 800px：每欄約 250px 扣掉 26px 內距後約 200px。
   ⚠️ 當時的臨界字串是「產出檢討結果與圖面表格」（11 字）；115.09.04 三步驟改文案後
   最長變成「BIMTeki MCP 串接 AI」，中文只剩 4 字＋英數，比舊的短，所以寬度不必再放大。 */
/* 115.09.07 Sara：「這兩個地方不用空那麼大」——工具一覽兩欄的右側各空了 160／148px。
   量法：取欄內所有文字（標題、項目名、說明、查看所有工具）的實際最右緣，與欄框右緣相減。
   文字實際只需要 306／294px（已含欄內距 26 與 hover 箭頭的位置），所以 800 → 640。
   ⚠️ 不要再往下收：說明文字（如「自動整理面積並計算設計容積率」）會被逼成兩行，
      整個面板反而變高，而且五個項目的高度會參差不齊。 */
#header-inner .mega--wide .mega-inner{ width:min(940px, calc(100vw - 48px)); }/* 115.09.08：加了第三欄（MCP 工具／如何運作），640 塞不下三欄 */
#header-inner .mega--mid .mega-inner{ width:min(360px, calc(100vw - 48px)); }
/* 115.09.08 Sara：「教學與支援下拉應該出現在正下方」。
   .mega 是 absolute + left:50% + translateX(-50%)，定位基準是最近的已定位祖先——
   原本是 #header-inner（它有 transform，本身就是包含區塊），所以每個面板都對齊
   整條導覽列的中心。面板寬 620 時看起來還算合理，收窄到 360 之後就明顯偏離按鈕了。
   ⚠️ 只讓「教學與支援」這一個 li 變成 position:relative：
      工具一覽的面板是兩欄大面板，掛在按鈕正下方會超出視窗右緣，那個維持對 header 置中。
   ⚠️ li 比 header bar 矮，top:100% 會落在 header 底緣**之上**，
      所以 padding-top 由 10 加到 18 把面板推回 header 下方。
      這段一定要用 padding 不能用 margin——它同時是滑鼠從按鈕移到面板的橋接區，
      改成 margin 會在中途離開 li，面板就關掉了。 */
/* 115.09.08 Sara：「工具一覽下拉應該在主選單下方，現在偏左」。
   成因與「教學與支援」那次同源：.mega 的定位基準是 #header-inner（它有 transform，
   本身就是包含區塊），left:50% 等於**對整條 header 置中**——而導覽列整個在右半邊，
   所以面板看起來一直往左偏。
   ⚠️ 這一個不能照 --mid 的做法「掛在按鈕正下方」：面板寬 940，
      對按鈕置中的話 1024–1280 這段會衝出視窗右緣（--mid 只有 360 所以沒事）。
   ⚠️ 改成**靠導覽列的右緣對齊**：把 #header-nav 設為包含區塊，面板 right:0。
      面板因此收在「工具一覽 … 聯絡我們」這一排的正下方、右緣切齊最後一個項目，
      左緣則往左展開，寬度再大也不會超出視窗右側。
   ⚠️ #header-nav 比 header bar 矮，top:100% 會落在 bar 底緣之上，
      所以 padding-top 由 10 加到 18 把面板推回 bar 下方——與 --mid 同一個道理。
      這段必須是 padding 不能是 margin：它同時是滑鼠從按鈕移到面板的橋接區。 */
#header-inner #header-nav{ position:relative; }
#header-inner .nav-drop--tools > .mega--wide{ left:auto; right:0; transform:translate(0,-8px); padding-top:18px; }
#header-inner .nav-drop--tools.is-open > .mega--wide{ transform:translate(0,0); }
/* ⚠️ 1279 以下還原成原本的「對 header 置中」。
   靠右對齊的前提是導覽列右緣離視窗左邊至少有一個面板的寬度（940＋餘裕）。
   實測導覽列右緣約等於「視窗寬 − 300」：1600→1283、1280→974（面板左緣 32，剛好放得下）、
   1025→730（面板左緣 −212，整片衝出視窗左側，前三分之一直接看不到）。
   臨界點就在 1280 附近，所以斷點取 1279。
   桌機導覽列本身在 1024 以下就換成抽屜，所以真正會用到這條的只有 1025–1279 這一段。 */
@media screen and (max-width:1279px){
  #header-inner .nav-drop--tools > .mega--wide{ left:50%; right:auto; transform:translate(-50%,-8px); padding-top:10px; }
  #header-inner .nav-drop--tools.is-open > .mega--wide{ transform:translate(-50%,0); }
}
#header-inner .nav-drop--mid{ position:relative; }
#header-inner .nav-drop--mid > .mega--mid{ padding-top:18px; }/* 115.09.08：「取得協助」欄移除後改單欄，620 會空掉一半 */

/* 分欄 */
#header-inner .mega-inner--features{ display:grid; grid-template-columns:.86fr .78fr 1.36fr;/* 115.09.03：4→3 欄。第三欄的三步驟字最長，比例給多一點；前兩欄項目短，收窄避免右側留白。115.09.04 換文案後仍是第三欄最長，比例不動 */ }
/* 115.09.08 Sara：再開第三欄放 MCP 工具與「如何運作」文章。
   三欄不等寬是刻意的：第一欄有五個帶 icon 的項目（最長的標題是「自訂面積檢討工具」），
   第三欄是純文字的文章列表、不需要 icon 的 32px 佔位，所以給它最窄。
   ⚠️ 沿革：三欄（–115.09.03）→ 兩欄（115.09.04）→ 三欄（115.09.08）。
      前一次縮成兩欄的理由是「AI 表格是該欄唯一剩下的項目，獨立成欄太空」，
      這次的第三欄有 1＋3 個項目，不會再發生那個問題。 */
#header-inner .mega-inner--tools{ display:grid; grid-template-columns:1.06fr .96fr .88fr; }
#header-inner .mega-inner--support{ display:grid; grid-template-columns:1fr; }/* 115.09.08：雙欄改單欄 */
#header-inner .mega-col{ padding:26px 26px 28px; min-width:0; }
#header-inner .mega-col + .mega-col{ border-left:1px solid var(--line-soft); }
/* 115.09.08 Sara：同一欄內放兩個分類（表格工具／繪圖工具），中間畫一條分隔線。
   上下留白用 22px（大於欄標題自己的 18px margin）——分隔線要同時分開「上一組的最後一個項目」
   與「下一組的標題」，留白比欄內間距大一階才看得出是「另一組」而不是「換行」。 */
#header-inner .mega-group + .mega-group{ margin-top:22px; padding-top:22px; border-top:1px solid var(--line-soft); }
/* 115.09.08 Sara：第三欄的那條線拿掉。
   ⚠️ 只拿掉第三欄的，第二欄（表格工具／繪圖工具）保留——那兩組是**並列的兩類工具**，
      需要一條線說「這是另一類」；第三欄底下講的是上面那個 MCP 工具「怎麼運作」，
      是同一件事的延伸而不是另一類，畫線反而把它切成兩件事。
   ⚠️ 線拿掉之後 margin 要補回來：原本 22＋22 有一半是靠 padding 撐的，
      只刪 border 會讓兩組黏在一起。 */
#header-inner .mega-group--flow{ margin-top:26px !important; padding-top:0 !important; border-top:0 !important; }
/* 2026-07-28 選單字級改 px 對齊設計系統（原 em 縮小造成描述字 11.8px 難讀）：最小 13px、項目標題 14px */
#header-inner .mega-col-title{ margin:0 0 18px;/* 115.09.07 Sara：30px 太開，改 18px。⚠️ 這個值不等於畫面上看到的空隙——項目 a 自己有 padding-top:9px，所以視覺間距是 18+9=27px。沿革：12px（視覺 21，Sara 嫌擠）→ 30px（視覺 39，太開）→ 18px。兩個下拉選單共用這條 */ font-size:12px; font-weight:500; letter-spacing:.14em; line-height:1.4; color:var(--ink-3); }/* 115.09.19 Sara：三層級拉開——欄標題 13→12px、字距 .09→.14em、色 ink-2→ink-3（#666，白底 5.7:1 過 AA），退成小標籤 *//* 2026-07-28 harden：小字改 bt-700 過 AA。115.09.15 Sara「改灰色」→ --ink-2（#555，玻璃底壓在深色區塊上仍過 AA；見檔尾毛玻璃面板那段） */

/* 選單項目：整列可點，hover 淡紫底＋標題轉紫（不做每項框線） */
#header-inner .mega-list{ margin:0; padding:0; list-style:none; }
#header-inner .mega-list li{ margin:0; }
/* 115.09.07 Sara：「文字上下間距要看起來舒適」。下面三個值要一起調才有感——
   只加項目之間的 padding，標題與說明還是黏成一團；只加標題下的 margin，項目之間又變擠。 */
#header-inner .mega-list li a{ display:block; padding:11px 12px; margin:0 -12px; border-radius:10px; transition:background-color .18s ease; }
#header-inner .mega-list li a:hover{ background-color:var(--bt-100); }
#header-inner .mi-t{ display:block; font-size:15px; font-weight:700; line-height:1.5; color:var(--ink); transition:color .18s ease; }/* 115.09.19 Sara：三層級拉開——項目名 14→15px、500→700 */
/* 標題→說明 2px → 6px：2px 幾乎等於沒有，標題與說明看起來是黏在一起的一團。
   說明行高 1.55 → 1.8：說明折到第二行時，中文在 1.55 的行距下上下兩行會互相干擾。
   全站連續內文的規範值是 2.0，這裡是選單小字，取中間值不要撐太開。 */
#header-inner .mi-d{ display:block; margin-top:4px; font-size:13px; font-weight:400; line-height:1.7; color:var(--ink-2); }/* 115.09.19 Sara：說明維持 13px 細字，上距 6→4px 貼緊自己的標題 */
#header-inner .mega-list li a:hover .mi-t{ color:var(--bt-700); }
#header-inner .mega-list--plain li a{ padding:8px 12px; }
/* 115.09.08：「如何運作」的文章列表。與工具項的差別只有「沒有 icon」——
   刻意不另外給顏色或框：它們同屬一個面板，多一套視覺語彙只會讓面板變吵。
   ⚠️ .mi-d 在這裡會換行（說明句比工具項長），所以 line-height 要放開一點，
      否則兩行會黏在一起、看起來像同一句話被硬折。 */
#header-inner .mega-list--doc li a{ padding:9px 12px; }
#header-inner .mega-list--doc .mi-d{ line-height:1.6; }

/* 帶圖示的工具列：小圖示＋名稱＋說明＋右側箭頭（hover 才淡入右移） */
#header-inner .mega-list--icon li a{ display:flex; align-items:flex-start; gap:12px; }
/* 115.09.19 Sara：「工具一覽」的 icon 拿掉（markup 不再輸出 .mi-i、清單改掛 --plain），版面同 --icon 只是少了圖示格；
   同日一併拿掉第三欄「如何運作」三篇與欄底「查看所有工具 →」（桌機＋手機抽屜）。 */
#header-inner .mega-list--plain li a{ display:flex; align-items:flex-start; gap:12px; }
#header-inner .mi-i{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; margin-top:1px; width:32px; height:32px; border-radius:9px; background:var(--bt-100); color:var(--bt-600); }
#header-inner .mi-i--or{ background:var(--or-100); color:var(--or-500); }
#header-inner .mi-b{ flex:1 1 auto; min-width:0; }
#header-inner .mi-go{ flex:0 0 auto; align-self:center; font-size:.92em; color:var(--bt-600); opacity:0; transform:translateX(-4px); transition:opacity .18s ease, transform .18s ease; }
#header-inner .mega-list--icon li a:hover .mi-go{ opacity:1; transform:translateX(0); }
#header-inner .mega-list--plain li a:hover .mi-go{ opacity:1; transform:translateX(0); }
/* 115.09.19 Sara（附圖）：「工具一覽中 MCP 的部分也改深色系」→ 看過後改成「hover 上去才變深色」。
   第三欄預設與另外兩欄一樣淺色，滑鼠滑進這一欄（或鍵盤焦點進入）才淡入深色：
   同一組三段深紫漸層＋兩顆橘光團＋白字，與 MCP 功能頁、首頁的 MCP 卡是同一個家族。
   ⚠️ 深底畫在 ::before 上、用 opacity 淡入：漸層背景本身不能 transition，直接切會閃一下。
   ⚠️ z-index:-1 ＋ isolation:isolate：欄自己成為 stacking context，::before 才會落在欄底色之上、文字之下。
   ⚠️ :focus-within 與 :hover 同等對待：Tab 進到那一項時也要變深。
   ⚠️ 欄與欄之間的分隔線 hover 時轉透明（含 #app-homepage 那條半透明版），否則淺色線壓在深底上會是一道亮縫。 */
#header-inner .mega-col--dark{ position:relative; overflow:hidden; isolation:isolate; transition:border-color .25s ease; }
#header-inner .mega-col--dark::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .25s ease;
  background:
    radial-gradient(260px 260px at 108% -8%, rgba(255,126,92,.42) 0%, rgba(255,126,92,.16) 42%, rgba(255,126,92,0) 70%),
    radial-gradient(240px 240px at -10% 112%, rgba(255,126,92,.30) 0%, rgba(255,126,92,.11) 42%, rgba(255,126,92,0) 70%),
    linear-gradient(180deg, #211D3A 0%, #1A1631 55%, #15122A 100%); }
#header-inner .mega-col--dark:hover::before, #header-inner .mega-col--dark:focus-within::before{ opacity:1; }
#header-inner .mega-col + .mega-col--dark:hover, #header-inner .mega-col + .mega-col--dark:focus-within,
#app-homepage #header-inner .mega-col + .mega-col--dark:hover, #app-homepage #header-inner .mega-col + .mega-col--dark:focus-within{ border-left-color:transparent; }
#header-inner .mega-col--dark .mega-col-title, #header-inner .mega-col--dark .mi-d, #header-inner .mega-col--dark .mi-go{ transition:color .25s ease, opacity .18s ease, transform .18s ease; }
#header-inner .mega-col--dark:hover .mega-col-title, #header-inner .mega-col--dark:focus-within .mega-col-title{ color:rgba(255,255,255,.55); }
#header-inner .mega-col--dark:hover .mi-t, #header-inner .mega-col--dark:focus-within .mi-t{ color:#fff; }
#header-inner .mega-col--dark:hover .mi-d, #header-inner .mega-col--dark:focus-within .mi-d{ color:rgba(255,255,255,.78); }
#header-inner .mega-col--dark:hover .mi-go, #header-inner .mega-col--dark:focus-within .mi-go{ color:#FF9A7E; }
#header-inner .mega-col--dark .mega-list li a:hover, #app-homepage #header-inner .mega-col--dark .mega-list li a:hover{ background-color:rgba(255,255,255,.08); }
#header-inner .mega-col--dark .mega-list li a:hover .mi-t{ color:#FFB39E; }
#header-inner .mega-col--dark a:focus-visible{ outline-color:#fff; }

/* 功能特色右側精選區 */
/* 2026-07-28 精選區底色去紫（Sara 規格）：白底＋中性灰 16px 細格紋（格再縮小、線再調淡）；步驟分隔線移除，避免表格線與格紋打架 */
#header-inner .mega-feature{ padding:26px 26px 28px; border-left:1px solid var(--line-soft);
  background:
    linear-gradient(rgba(33,29,58,.03) 1px, transparent 1px) 0 -1px/16px 16px,
    linear-gradient(90deg, rgba(33,29,58,.03) 1px, transparent 1px) -1px 0/16px 16px,
    #fff; }
/* 115.09.04：以下四條已成死碼——三步驟清單原本在「功能特色」選單裡，該選單整個移除了。
   規則保留備查：若日後要在別的選單再放一次三步驟，樣式直接可用。 */
#header-inner .mega-steps{ margin:0; padding:0; list-style:none; counter-reset:none; }
#header-inner .mega-steps li{ display:flex; align-items:baseline; gap:12px; padding:10px 0; }
#header-inner .ms-n{ flex:0 0 auto; font-family:'Lato',sans-serif; font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--bt-700); }
#header-inner .ms-t{ font-size:14px; line-height:1.5; color:var(--ink); }
#header-inner .mega-more{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:14px; font-weight:500; color:var(--bt-700); transition:gap .18s ease; }
#header-inner .mega-more:hover{ gap:10px; }
#header-inner .mega-col > .mega-more{ margin-top:14px; }

/* 會員下拉：觸發＝icon 列的頭像鈕（2026-07-27 Sara 指定用附圖的頭像 icon，不是文字），面板靠右對齊不置中 */
/* 正式站 #header-icons li 是 21×21（給 icon 用）且未限定直接子代，會把下拉內的 li 一起壓扁 → 全部還原 */
#header-icons li.nav-drop--account,
#header-icons .account-list li{ width:auto; height:auto; }
#header-icons .nav-drop-label--icon{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; margin:0 -4px; padding:0; border:1px solid transparent; border-radius:50%; background:none; color:inherit; cursor:pointer; transition:background-color .18s ease, color .18s ease; }
#header-icons .nav-drop-label--icon i{ margin:0; width:auto; height:auto; font-size:1.5em; }
/* 115.09.07 Sara：「hover icon 變色就好，不要圓圈」。底色移除，只留 icon 換色。
   ⚠️ 展開中（.is-open）的那條也一起拿掉，兩個狀態才一致——只拿掉 hover 的話，
      滑過去沒有底、點開卻突然多一個圓圈，看起來像 bug。狀態仍由 icon 顏色表示。
   ⚠️ 30×30 的尺寸與 border-radius:50% 保留：那是**點擊範圍**不是視覺，
      拿掉會讓可點區縮成 icon 本身（約 18px），手機上很難按到。 */
#header-icons .nav-drop-label--icon:hover,
#header-icons .nav-drop--account.is-open > .nav-drop-label--icon{ background-color:transparent; color:var(--bt-600); }
#header-icons .nav-drop-label--icon:focus-visible{ outline:2px solid var(--bt-600); outline-offset:2px; }/* 2026-07-28 harden：同上，focus 統一全站標準 */
/* 115.09.07 Sara：「破掉了」——服務切換器下拉的四個角。
   成因：功達正式站的 CSS 有一條 `#site-switch-wrapper #site-switch-menu ul{ border:1px solid var(--theme-border-color) !important }`，
   在他們站上那個 ul 就是面板本體，所以要有框；但我們把它放進 .mega-inner（白底＋16px 圓角＋overflow:hidden）裡，
   於是變成「圓角面板裡面裝一個直角的框」——四個角各露出一小塊直角，被 overflow 切掉一半，看起來就是破圖。
   而且 --theme-border-color 在中性化改寫後解析成 #333，是深色，更明顯。
   ⚠️ 修在這裡不去動 #gongda-live-hf 那一段：那整塊是從功達 bundle 抽出來的原樣副本，
      正式整合時會直接換成他們的 bundle，改了會在下次同步時被蓋回去。 */
#site-switch-wrapper #site-switch-menu ul.icon-menu-list,
#site-switch-wrapper #site-switch-menu ul.site-list{ border:0 !important; }/* 115.09.10：ul 換成 .site-list 之後這條override要一起補，否則那圈近黑的框又會冒出來（Sara：「拿掉細部黑線」） */
#header-inner .nav-drop--account{ position:relative; }
#header-inner .mega--account{ left:auto; right:-10px; top:100%; padding-top:14px; transform:translate(0,-8px); }
#header-inner .nav-drop--account.is-open > .mega--account{ transform:translate(0,0); }
#header-inner .mega--account .mega-inner{ width:280px; }
#header-inner .account-head{ display:flex; align-items:center; gap:12px; padding:16px; border-bottom:1px solid var(--bt-200); }
#header-inner .account-head .avatar{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--bt-100); color:var(--bt-600); }
#header-inner .account-head .avatar i{ margin:0; width:auto; height:auto; font-size:1.15em; }
/* 2026-07-28 harden：em 改 px，跟上 07-28「選單字級對齊設計系統（最小13px）」決策，同一次 hover 旅程不再兩套字級 */
#header-inner .account-head .name{ margin:0 0 3px; font-size:15px; font-weight:500; line-height:1.4; color:var(--bt-700); }
#header-inner .account-head .email{ margin:0; font-size:13px; line-height:1.4; color:var(--ink-3); word-break:break-all; }
#header-inner .account-list{ margin:0; padding:8px 0; list-style:none; }
#header-inner .account-list li{ margin:0; }
#header-inner .account-list li a{ display:flex; align-items:center; padding:11px 18px; font-size:14px; line-height:1.4; color:var(--default-text-color); transition:background-color .18s ease, color .18s ease; }
#header-inner .account-list li a i{ margin:0 12px 0 0; width:20px; height:auto; font-size:1.05em; text-align:center; }
#header-inner .account-list li a:hover{ background-color:var(--bt-100); color:var(--bt-700); }
/* 2026-07-28 harden P2：網址未定項由 href="#" 改 button 佔位，樣式與 a 完全一致 */
#header-inner .account-list li button{ display:flex; align-items:center; width:100%; padding:11px 18px; border:0; background:none; font-family:inherit; font-size:14px; line-height:1.4; text-align:left; color:var(--default-text-color); cursor:pointer; transition:background-color .18s ease, color .18s ease; }
#header-inner .account-list li button i{ margin:0 12px 0 0; width:20px; height:auto; font-size:1.05em; text-align:center; }
#header-inner .account-list li button:hover{ background-color:var(--bt-100); color:var(--bt-700); }
/* 2026-07-28 harden P1：漢堡鈕／關閉鈕 div 改 button 後的樣式重置（外觀維持功達正式站原樣） */
#menu-button, #menu-close{ background:none; border:0; padding:0; font:inherit; color:inherit; text-align:inherit; cursor:pointer; }
#menu-button:focus-visible, #menu-close:focus-visible{ outline:2px solid var(--bt-600); outline-offset:3px; border-radius:8px; }

/* 2026-07-28 harden P2：鈴鐺／九宮格已整組併入 nav-drop 機制（面板＝.mega--account > .mega-inner），
   此區只剩面板內容樣式；legacy .dropdown 覆寫已移除 */
#header-icons .icon-menu-empty{ padding:30px 20px; text-align:center; color:var(--ink-3); }
#header-icons .icon-menu-empty i{ margin:0; width:auto; height:auto; font-size:1.5em; }
#header-icons .icon-menu-empty p{ margin:10px 0 0; font-size:14px; line-height:1.5; }
#header-icons .icon-menu-list{ margin:0; padding:8px 0; list-style:none; }
#header-icons .icon-menu-list li{ width:auto; height:auto; margin:0; }/* 還原 #header-icons li 的 21×21 icon 尺寸限制 */
#header-icons .icon-menu-list li a{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 18px; font-size:14px; line-height:1.4; color:var(--default-text-color); transition:background-color .18s ease, color .18s ease; }
#header-icons .icon-menu-list li a:hover{ background-color:var(--bt-100); color:var(--bt-700); }
/* ═══ 115.09.10 Sara：「下拉選單出現的內容幫我一模一樣刻出來」（九宮格＋小鈴鐺）═══
   值不是目測的，是從正式站兩支 CSS 抄下來的：
     https://account.arkiteki.com/css/site.switch.menu.css
     https://account.arkiteki.com/css/notification.css
   ⚠️ 兩顆 app 圖示也是正式站那兩張（storage.googleapis.com/archiac/...），
      已下載到 assets/app-icon-arkiteki.png、assets/app-icon-bimteki.png。
      不要改用本地既有的 logo-icon.png——那是 BIMTeki 的品牌標，不是切換器用的圓形 app 圖示。
   ⚠️ 外框（白底／圓角／陰影）沿用本檔的 .mega-inner，不照抄正式站的 .box-round／.box-shadow-lg：
      那兩個 class 這份檔案沒有，硬搬要連它們的依賴一起搬，而外框長相本來就一樣。 */
/* 115.09.10 三修：對齊 bim.arkiteki.com（不是 arkiteki.com——兩站的主題色不同）。
   下列顏色都是從 Sara 的實站截圖取樣出來的：
     面板外框 #7872E0／分隔線與圖示圓框 #CAC7FF／箭頭 #AAA5FF／說明 #A7A9AC
     名稱黑色，但「目前所在」那一列（BIMTeki）是 #7872E0。
   ⚠️ 外框畫在 .mega-inner（圓角那一層）上，不要照正式站畫在 ul 上：
      正式站的 ul 就是面板本體，我們多包了一層圓角容器，框畫在 ul 上會變成
      「圓角盒子裡裝一個直角框」，四個角露出來——115.09.07 已經踩過一次。 */
#header-inner #site-switch-menu .mega-inner{ width:300px; border-color:#FFFFFF; }/* 115.09.10 四修 Sara：「沒有紫色外框，白色就好」——正式站是紫框，但在我們這個深紫 header 底下太搶；框留著（維持 1px 的形狀）只把顏色換白，等於看不見 *//* ⚠️ 一定要帶 #header-inner：本檔已有 `#header-inner .mega--account .mega-inner{width:280px}`，特異性比單一 id 高，少寫這一段就會被壓回 280 */
/* 115.09.10 二修 Sara：「拿掉細部黑線」。那條是 <ul> 自己的 1px 邊框——
   正式站寫 border:1px solid var(--light-border-color)（淺灰），但本檔這一區在 .neutral 主題下
   那個變數被算成 rgb(51,51,51)＝近黑，四邊就變成一圈黑框。
   ⚠️ 面板的外框／圓角／陰影由 .mega-inner 提供，ul 這一條本來就是多的，直接關掉。 */
#site-switch-menu .site-list{ margin:0; padding:0; list-style:none; border:none; }
#site-switch-menu .site-list li{ width:auto; height:auto; margin:0; padding:0; border-bottom:1px solid #CAC7FF; }
#site-switch-menu .site-list li:last-child{ border-bottom:none; }
#site-switch-menu .site-list li a{ display:flex; align-items:center; box-sizing:border-box; width:100%; padding:15px 20px; color:inherit; }/* ⚠️ box-sizing 一定要寫：本檔的 a 是 content-box，width:100% 再加左右各 20 的內距＝338，比 300 的面板寬，右邊的箭頭就被面板的 overflow:hidden 裁掉（症狀是「箭頭不見了」，但元素量得到寬高） */
#site-switch-menu .site-list li a:hover{ background:none; }/* 正式站沒有整列反白，只有文字與箭頭變色 */
#site-switch-menu .site-logo{ position:relative; flex:0 0 auto; width:40px; height:40px; margin-right:20px; border-radius:50%; border:1px solid #CAC7FF; box-shadow:0 3px 3px rgba(0,0,0,.05); }
#site-switch-menu .site-logo img{ position:absolute; left:50%; top:50%; width:50%; transform:translate(-50%,-50%); }
#site-switch-menu .site-label{ flex-grow:1; min-width:0; }
#site-switch-menu .site-name{ margin-bottom:6px; font-size:1.12em; font-weight:600; letter-spacing:.08em; color:#000; transition:color .2s; }
#site-switch-menu .site-description{ font-size:.95em; color:#A7A9AC; }
#site-switch-menu .site-icon{ flex:0 0 auto; margin:0; width:16px; height:16px; color:#AAA5FF; transition:color .2s; }
#site-switch-menu a:hover .site-name,
#site-switch-menu a:hover .site-icon{ color:#7872E0; }
/* 目前所在的站（BIMTeki）名稱是紫的——正式站就是這樣標示「你在這裡」 */
#site-switch-menu li[aria-current="true"] .site-name{ color:#7872E0; }
/* 小鈴鐺：正式站的空狀態就是一塊空白＋置中灰字，沒有圖示也沒有說明句 */
#header-inner #mega-notice .mega-inner{ width:min(88vw,360px); min-height:300px; }/* 同上，要帶 #header-inner 才壓得過 280px */
#mega-notice .notice-empty{ display:flex; align-items:center; justify-content:center; min-height:300px; padding:20px; text-align:center; font-size:1.33em; line-height:1.2em; color:#bbb; }

#header-icons .icon-menu-now{ flex:0 0 auto; padding:2px 8px; border-radius:20px; background:var(--bt-100); font-size:13px; line-height:1.4; color:var(--bt-700); }/* 服務切換器「目前所在」標記 */

@media (prefers-reduced-motion: reduce){
  #header-inner .mega{ transition:opacity .01s; transform:translate(-50%,0); }
  #header-inner .mega--account{ transform:translate(0,0); }
  #header-inner .caret, #header-inner .mi-go{ transition:none; }
}

/* ===== 手機抽屜 Accordion（≤1024px；2026-07-27）===== */
#nav-inner .nav-links{ padding-top:52px; }/* 讓開左上角的關閉鈕 ✕ */
#nav-inner .nav-links li.acc{ margin:0; }
#nav-inner .acc-label{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:14px 0; border:none; background:none; font-family:inherit; font-size:1.15rem; font-weight:500; letter-spacing:.2em; line-height:1.4; color:var(--default-text-color); text-align:left; cursor:pointer; transition:color .18s ease; }
#nav-inner .acc-label:hover, #nav-inner .acc.is-open > .acc-label{ color:var(--bt-700); }
#nav-inner .acc-label:focus-visible{ outline:2px solid var(--bt-600); outline-offset:3px; border-radius:4px; }
#nav-inner .acc .caret{ margin:0; width:auto; height:auto; font-size:.7em; transition:transform .2s ease; }
#nav-inner .acc.is-open .caret{ transform:rotate(180deg); }
#nav-inner .acc-panel{ display:none; padding:2px 0 10px; }
#nav-inner .acc.is-open > .acc-panel{ display:block; }
#nav-inner .acc-group{ margin:10px 0 2px; font-size:.86rem; font-weight:500; letter-spacing:.08em; color:var(--bt-700); }
#nav-inner .acc-panel ul{ margin:0 0 6px; padding:0; list-style:none; }
#nav-inner .acc-panel li{ margin:0; font-size:1rem; }
#nav-inner .acc-panel li a{ display:block; padding:9px 0 9px 14px; font-size:1rem; letter-spacing:.05em; line-height:1.5; color:var(--ink-2); }
#nav-inner .acc-panel li a:hover{ color:var(--bt-700); }
#nav-inner .acc-more{ color:var(--bt-700) !important; font-weight:500; }
#nav-inner .acc-panel > .acc-more{ display:block; padding:9px 0 9px 14px; font-size:1rem; letter-spacing:.05em; line-height:1.5; }/* 2026-07-28 harden：acc-more 移到面板層級後補回原本在 li a 上的間距與字級 */
#nav-inner .nav-links li.acc + li{ margin-top:1.2em; }
#nav-inner .nav-links li.acc--member{ margin-top:1.2em; padding-top:1.2em; border-top:1px solid var(--bt-200); }
#nav-inner .nav-cta{ display:inline-block; margin-top:.4em; padding:11px 26px; border-radius:50px; background:var(--bt-600); color:#fff !important; font-weight:500; letter-spacing:.1em; }
#nav-inner .nav-cta:hover{ background:var(--bt-500); }

/* ===== 115.09.08 Sara：手機版 header 左右各留 25px =====
   header bar 是 `width:min(92%, var(--shell-max))` 置中，390 寬的手機上左右只剩 15.6px，
   膠囊幾乎貼著螢幕邊。
   ⚠️ 斷點 625px 是算出來的不是隨手挑：92% 在 625px 時左右恰好各 25px，
      所以在這個點以下才切換成 calc(100% - 50px)，兩條規則在交界處數值相同，
      拉動視窗寬度不會看到寬度跳一下。挑 600 或 480 都會在交界處產生跳動。
   ⚠️ 用兩個 id 提高特異性：功達那份 CSS 有多條 `#app-homepage …` 前綴的規則，
      只寫 `#header-inner` 在某些頁會被蓋回去。 */
@media screen and (max-width:625px){
  /* ⚠️ box-sizing 一定要一起寫：#header-inner 預設是 content-box，
     width 不含它自己的 padding（左 4%、右 9px）與 1px 框線，
     只寫 calc(100% - 50px) 的話盒子會被 padding 撐回去，實測左右只剩 10px 而不是 25px。
     （同一個坑 115.09.07 在 .hero-split 上踩過一次。） */
  #app-homepage #header-inner{ width:calc(100% - 50px); box-sizing:border-box; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   115.09.08 三修 Sara：淺色狀態改「白細邊＋毛玻璃」，拿掉原本的深色框線
   （參考 Linear／Laravel Nightwatch：極細的邊、很重的模糊、幾乎沒有陰影）
   ⚠️ 原本的框線是 var(--theme-border-color) → 中性化後解析成 #333，
      在白底頁面上是一條近黑的硬線，正是 Sara 說的「原本的黑色」。
      白細邊 rgba(255,255,255,.9) 沿用 .feat-card 的同一個值——
      在半透明白底上它不是「看得見的白線」，而是玻璃受光的亮邊。
   ⚠️ 陰影只留到「剛好把膠囊從頁面上分離」為止：0 1px 2px + 0 10px 30px，
      而且色是 rgba(33,29,58,*)（帶紫的深色）不是純黑。
      純黑陰影在淺紫調的頁面上會顯髒，這也是 07-27「彩色暈影全清」那次選中性紫黑的理由。
   ⚠️ 用兩個 id：要壓過 .headroom--pinned（實心白，會把玻璃蓋掉）與 .headroom--not-top。
      也因此 .on-dark 那組必須跟著升成兩個 id，否則深色狀態會被這條蓋掉。
   ═══════════════════════════════════════════════════════════════════════════ */
#app-homepage #header-inner{
  /* 115.09.08 四修 Sara：「深色轉淺色、淺色轉深色的轉場不自然」（參考 attio.com）。
     ⚠️ 真正的原因不是時間太短，是**根本沒有 transition**：
        功達那份 CSS 把它寫成 `.headroom #header-inner{ transition: all .5s }`，
        但 .headroom 這個 class 從來沒有被加到頁面上（實測 computed 值是 `all` 加 0s），
        所以深淺一直是硬切。這種「規則存在但選擇器條件不成立」的失效，
        看 CSS 檔案完全看不出來——要讀 computed style 才會發現。
     ⚠️ 只列需要動的四個屬性，不用 all：all 會把 width／transform 也算進去，
        改視窗大小或 headroom 收起 header 時會出現不該有的補間。
     ⚠️ .25s：比子元素的 .18s 略長一點點，讓底色與文字幾乎同時到位。
        拉到 .5s 會看到「一半白一半紫」的中間態停留太久，反而更不自然。 */
  transition:background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
  border-color:rgba(255,255,255,.9);
  /* 115.09.08 七修 Sara：「像核心功能那樣有一點淡淡的灰，加一點白色細邊」。
     ⚠️ 純白半透明的問題：白區底下也是白的，等於沒有底色，bar 只剩一條邊在撐形狀。
        淡灰底才讓它成為一個「物件」。
     ⚠️ 灰要冷一階（#F2F2F5 帶一點藍）不要純灰——暖白頁面上的純灰會顯髒，
        這是核心功能卡當初挑色溫時就記下的判斷，這裡沿用同一個值。
     ⚠️ 白色細邊已經是 .9（與 .feat-card 同值），這次沒改；
        它在淡灰底上才看得出來，先前配純白底時等於隱形——
        所以「加白邊」實際上是靠「把底變灰」達成的。
     ⚠️ 斜向的白色柔光沿用卡片的 155deg：光從左上來，全站一致。 */
  background-color:rgba(244,244,247,.72);
  background-image:linear-gradient(155deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 72%);
  -webkit-backdrop-filter:blur(12px) saturate(130%); backdrop-filter:blur(12px) saturate(130%);/* 115.09.08 六修：18→12、140→130，玻璃調輕 */
  box-shadow:0 1px 2px rgba(33,29,58,.04), 0 10px 30px rgba(33,29,58,.07);
}

/* ═══════════════════════════════════════════════════════════════════════════
   115.09.08 Sara：header 捲到深色區塊時轉深色（參考 attio.com）
   目前的深色區塊＝Hero 與使用者回饋，兩者都掛 data-header-dark。
   ⚠️ 不需要 !important：這些選擇器都帶 #header-inner（一個 id），
      而要壓過的 .headroom--pinned / .headroom--not-top 只有兩個 class，
      id 的權重比幾個 class 都高，特異性一定贏，與寫在哪一行無關。
   ⚠️ logo 是 CSS 背景圖（功達正式站的 bimteki.svg，彩色），沒有白色版，
      所以用 filter:brightness(0) invert(1) 就地轉白。
      這會連紫色的圖示一起變白——刻意的：深底上留一個彩色小圖示會變成噪點，
      而且那支 SVG 在遠端，我們也改不了它的填色。
   ⚠️ 深色底用 .72 半透明＋模糊，不是實心：捲動時底下的內容會透一點過來，
      這正是「header 貼在深色區塊上」該有的感覺；實心的話會變成一條浮在頁面上的黑帶。
   ═══════════════════════════════════════════════════════════════════════════ */
/* 115.09.08 二修 Sara：「header 希望有毛玻璃的效果，加上一點點核心功能的細白邊」。
   ⚠️ 沿用的是 .feat-card 已經在用的那一套（backdrop-filter:blur(10px) ＋ 1px rgba(255,255,255,.9)），
      不是另外發明一種玻璃：核心功能卡是全站最常被看到的「玻璃」，header 對齊它，
      兩者才會讀成同一個材質。
   ⚠️ 底色從 .72 調到 .52：毛玻璃的「玻璃感」來自**看得到背後的東西**。
      不透明度太高時 blur 再大也只是一塊糊掉的深色板，把透明度讓出來效果才出得來。
   ⚠️ saturate(140%) 是關鍵的一半：只有 blur 的話背後的紫會被平均成灰濁色；
      補回飽和度，玻璃後面才留得住 Hero 的紫。
   ⚠️ 白邊用 border .24 ＋ 上緣 inset 高光 .30，不直接抄卡片的 .9——
      .9 白邊畫在深底上是一圈刺眼的亮環（卡片是淺底所以 .9 只是柔和的邊）。
      「細白邊」在深底上的等效寫法是「低透明度的邊 ＋ 只在上緣的高光」，
      因為真實玻璃的亮邊只出現在受光的那一側。 */
/* 115.09.08 三修 Sara：「陰影太重、不夠專業」。
   ⚠️ 減量的同時把顏色從近黑 rgba(12,9,34) 換成深紫 rgba(46,38,110)：
      Linear 與 Nightwatch 的深色 header 之所以看起來乾淨，不是因為陰影小，
      是因為**陰影跟底色同一個色相**——黑色陰影疊在紫底上會出現一圈灰濁的暈，
      那圈灰就是「不專業」的來源。
   ⚠️ .34 → .16 並把模糊從 34 收到 22：陰影的作用只是把膠囊從背景分離，
      不是製造深度。捲到影片上方時大範圍的暗影會直接壓在畫面上。
   ⚠️ 選擇器升成兩個 id：下方新增的淺色玻璃規則用了 #app-homepage #header-inner，
      只有一個 id 的話深色狀態會被它蓋掉。 */
/* 115.09.08 四修 Sara：「邊框不夠細緻、白邊要再乾淨一點，要有專業軟體的感覺」。
   ⚠️ 問題不是「有沒有白邊」，是**白邊四周一樣亮**。
      .24 的均勻白框在深底上讀起來是一條「畫上去的外框線」，不是玻璃的邊。
      真實的玻璃只有受光的那一側會亮，背光側反而更暗——
      Linear／Vercel 這類深色介面的乾淨感就來自這個方向性。
   對治＝把均勻的邊拆成三層，各自只做一件事：
     border .10  → 只負責讓形狀成立，弱到單獨看幾乎看不出是白色
     inset 上 .13 → 受光的上緣（唯一「亮」的地方）
     inset 下 -.10 黑 → 背光的下緣，做出玻璃的厚度
   ⚠️ 邊變弱之後不要用「加粗」或「提高不透明度」補回存在感——
      那會走回原點。存在感交給 blur 與底色（.52），邊只負責輪廓。
   ⚠️ 外陰影同步收緊（22→28px 但不透明度降到 .22、顏色再壓深）：
      邊細了之後，鬆散的大陰影會變成整條 bar 最顯眼的東西。 */
#app-homepage #header-inner.on-dark{
  /* 115.09.08 六修 Sara：「毛玻璃效果不要太重」。
     .52＋blur(18) 讀起來幾乎是實心色板，玻璃感被自己的底色蓋掉了。
     ⚠️ 兩個值要一起降，只降一個沒用：
        只降底色 → 背後的東西被 18px 糊成一片色塊，還是看不出是玻璃；
        只降模糊 → 背後細節太清楚，文字會跟影片內容打架。
     ⚠️ 這個值跟素材綁在一起：Hero 影片後段是白色審查表，捲過 header 底下時
        白字必須還讀得到。金澧換掉 Hero 影片就要重看一次這裡。 */
  background-color:rgba(31,27,69,.40);
  /* ⚠️ 淺色態 115.09.08 七修加了一層 background-image（白色柔光），
     深色態只覆寫 background-color 的話那層柔光會被繼承下來，在深紫上變成一塊白霧。
     多層背景的覆寫要連 image 一起寫，這是很容易漏的一步。 */
  background-image:none;
  /* 115.09.08 Sara：「外框線可以加上一點點白線，比較有質感」。
     .06 是照 Raycast 抄的值，但 Raycast 的 bar 底下是純深色頁面，邊再弱都看得出輪廓；
     我們這條壓在 Hero 的漸層與影片上，背景明度一直在變，.06 在亮的地方就消失了。
     ⚠️ 回到 .14 而不是最初的 .24：.24 是「一條畫上去的外框線」，
        .14 仍然是玻璃的邊，只是不會在亮背景上消失。上緣高光維持 .15 不動。 */
  border-color:rgba(255,255,255,.20);/* 115.09.08 Sara：「白線框有點太暗，可以亮一點」——.14 → .20 */
  color:#FFFFFF;
  -webkit-backdrop-filter:blur(12px) saturate(130%); backdrop-filter:blur(12px) saturate(130%);/* 115.09.08 六修：18→12、140→130，玻璃調輕 */
  /* 115.09.08 五修 Sara：「要像 raycast.com 那種細緻」。
     ⚠️ 我去量了 raycast.com 導覽列的實際值，不是憑感覺調：
          border      1px rgba(255,255,255,.06)
          box-shadow  inset 0 1px 1px rgba(255,255,255,.15)
          background  完全透明（靠 blur 與底下的深色頁面）
          外陰影      none
     它的乾淨感來自三件事，其中兩件是「拿掉」：
       1. 邊幾乎不存在（.06，比我上一版的 .10 還弱一半）
       2. **完全沒有外陰影**——落影是「浮起來」的語言，玻璃要的是「貼在上面」
       3. 上緣高光有 1px 模糊（0 1px 1px），不是一條硬線；模糊過的高光才像受光，
          硬線像描邊
     ⚠️ 只有背景不照抄：Raycast 底下是純深色頁面，全透明也讀得到；
        我們的 header 會壓在 Hero 影片上（白色審查表），全透明會讓文字直接撞上影片內容。
        保留 .52 的底色是為了可讀性，不是為了視覺。 */
  /* ⚠️ 上緣高光要跟著往上抬（.15 → .28），而且必須**比框亮**：
     兩者一樣亮的話又會回到「四周一樣亮的外框線」，也就是最初被打回的那一版。
     玻璃的邊之所以看起來是玻璃，靠的是「上緣最亮、側邊次之」這個落差，不是絕對亮度。 */
  box-shadow: inset 0 1px 1px rgba(255,255,255,.28);
}
/* 115.09.08 Sara：深色模式維持原本的彩色 logo，不做反白。
   （原本是 filter:brightness(0) invert(1)，會把紫色圖示一起吃掉。） */
#app-homepage #header-inner.on-dark #header-nav > ul > li > a,
#app-homepage #header-inner.on-dark #header-nav .nav-drop-label{ color:#FFFFFF; }
#app-homepage #header-inner.on-dark #header-nav > ul > li > a:hover,
#app-homepage #header-inner.on-dark #header-nav .nav-drop-label:hover,
#app-homepage #header-inner.on-dark #header-nav .nav-drop.is-open > .nav-drop-label{ background-color:transparent; color:#C9C4FF; }
#app-homepage #header-inner.on-dark #header-icons .nav-drop-label--icon{ color:#FFFFFF; }
#app-homepage #header-inner.on-dark #header-icons .nav-drop-label--icon:hover,
#app-homepage #header-inner.on-dark #header-icons .nav-drop--account.is-open > .nav-drop-label--icon{ background-color:transparent; color:#C9C4FF; }
/* CTA：淺色版是紫框紫字，深底上改白框白字。hover 反白＝深底上最強的一種強調，
   留給這顆唯一的行動點。 */
#app-homepage #header-inner.on-dark #header-trial-button{
  border-color:rgba(255,255,255,.55); color:#FFFFFF; background-color:transparent;
}
#app-homepage #header-inner.on-dark #header-trial-button:hover{
  border-color:#FFFFFF; background-color:#FFFFFF; color:#231F4C;
}
/* 漢堡鈕（手機）也要跟著白。
   ⚠️ 115.09.09 Sara 回報「左側漢堡選單應該要是白色」：這裡原本只有下面那兩行 color，
      而三條線是 <span> 用 **background-color** 畫的
      （正式站：#menu-button span{ background-color:var(--theme-border-color); opacity:.7 }），
      color 對它完全沒有作用——覆寫打在沒有人在讀的屬性上，所以深紫 header 上漢堡幾乎看不見。
   ⚠️ opacity 必須一起蓋掉：正式站給的是 .7，白線再打七折在深底上就是一條灰線。
   下面那兩行 color 保留：功達的 markup 若哪天把 span 換成 <i> icon，不必再查一次。 */
#app-homepage #header-inner.on-dark #menu-button{ color:#FFFFFF; }
#app-homepage #header-inner.on-dark #menu-button i{ color:#FFFFFF; }
#app-homepage #header-inner.on-dark #menu-button span{ background-color:#FFFFFF; opacity:1; }
/* 115.09.09 Sara 回報「header 白線線框粗細不一致」。
   深色態的邊是 border .20（四邊都有）＋ inset 0 1px 1px rgba(255,255,255,.28)（只有上緣），
   桌機上這個落差讀起來是「玻璃的受光面」（115.09.08 四修刻意做出來的），
   但手機膠囊只有 40 出頭高、又貼在畫面最上緣，上緣 1+1 與側邊 1 的差就直接讀成「上面比較粗」。
   ⚠️ 修法是**拿掉高光**不是把側邊加粗：四邊都補到 2px 會變成一條描邊，
      那正是 09-08 四修被打回的那一版。
   ⚠️ border 順手從 .20 補到 .24：高光沒了之後整條邊會弱一階，這是補回存在感，
      不是走回「均勻亮框」——.24 仍在四修定的「弱到只負責輪廓」的範圍內。
   ⚠️ 只在 ≤1024 生效＝漢堡鈕出現的同一個斷點（#menu-button{display:block} 在那裡），
      桌機的受光感原樣保留。 */
@media screen and (max-width:1024px){
  #app-homepage #header-inner.on-dark{ box-shadow:none; border-color:rgba(255,255,255,.24); }
  /* 115.09.09 二修：三條線 1px → 2px。
     正式站給的 height:1px 是桌機時代的值——桌機上這顆鈕根本不出現（≤1024 才 display:block），
     等於這個尺寸從來沒有為手機調過。1px 白線疊在毛玻璃 header 上、
     周圍又是 blur 過的深紫，細到幾乎讀不出是一顆按鈕。
     ⚠️ 深淺兩態一起加粗，不只改深色態：只改深色的話捲動時漢堡會忽粗忽細。
     ⚠️ top 要跟著重排（5／10／15 → 4／10／16）：線變厚而 top 不動的話，
        三條線之間的縫會從 4／4 變成 3／3，看起來是「擠在一起的三條」而不是漢堡。
        現在是 2px 線＋4px 縫，總高 14，在 18px 的鈕裡上下各留 2。 */
  #menu-button span{ height:2px; }
  #menu-button span:nth-child(1){ top:4px; }
  #menu-button span:nth-child(2){ top:10px; }
  #menu-button span:nth-child(3){ top:16px; }
}
/* focus 環在深底上改白，紫環會看不見 */
#app-homepage #header-inner.on-dark .nav-drop-label:focus-visible,
#app-homepage #header-inner.on-dark #header-nav > ul > li > a:focus-visible{ outline-color:#FFFFFF; }

/* ═══════════════════════════════════════════════════════════════════════════
   115.09.15 Sara：「這個菜單希望改成跟上面 toolbar 一樣的表現法」＋「如何運作 改灰色」
   下拉面板（工具一覽、教學與支援）改用 header 同一套淺色毛玻璃：
   淡冷灰半透明底＋155° 白色柔光＋白細邊＋同一組淡陰影。
   ⚠️ 必須先把 header 自己的 backdrop-filter 移到 ::before：
      帶 backdrop-filter 的元素會變成「backdrop root」，它裡面的子孫再寫 backdrop-filter
      只模糊得到 header 自己畫的東西，**模糊不到頁面**——面板會變成透明玻璃，
      底下的內文清清楚楚透上來跟選單字疊在一起（115.09.15 實測過，完全不能讀）。
      移到 ::before 後 header 本身不再是 backdrop root，面板的模糊才吃得到頁面。
   ⚠️ 115.09.15 二修 Sara「header 原本的毛玻璃效果怎麼沒看到了」：
      第一版只把 backdrop-filter 搬到 ::before、底色留在 header 本體。
      但 ::before 是負 z-index 子層，畫的順序在 header 的底色、框線、inset 高光**之後**，
      它的模糊會把這三樣一起糊掉——深色態的白細邊與上緣高光整個消失，淺色態的柔光也變鈍。
      ⇒ 底色、柔光、inset 高光全部搬進 ::before（元素自己的背景畫在自己的模糊結果之上，
        所以不會被糊掉）；header 本體只留框線與外陰影。
        ::before 用 inset:0 不蓋到框線——框線在 padding box 外面，保持銳利。
   ⚠️ 面板底色 .72 → .86、模糊 12 → 20：header 只是一條細 bar，面板是一大塊密集小字。
      壓在深色 Hero 上時 .72 的底會混成灰紫（約 #BCBACC），13px 灰字對比只剩 3 左右，過不了 AA；
      .86 在白底頁面上看起來與 header 同一種玻璃，在深底上仍讀得到。
   ⚠️ 欄標題改 --ink-2（#555）不用 --ink-3（#666）：同上，深底情境下 #666 對比不足 4.5。 */
#app-homepage #header-inner,
#app-homepage #header-inner.on-dark{ -webkit-backdrop-filter:none; backdrop-filter:none; background-color:transparent; background-image:none; }
#app-homepage #header-inner.on-dark{ box-shadow:none; }/* 上緣高光改由 ::before 畫 */
#app-homepage #header-inner::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background-color:rgba(244,244,247,.72);
  background-image:linear-gradient(155deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 72%);
  -webkit-backdrop-filter:blur(12px) saturate(130%); backdrop-filter:blur(12px) saturate(130%);
  transition:background-color .25s ease, box-shadow .25s ease;
}
/* ═══ 115.09.15 三修 Sara（附深色 header 截圖）：「希望看得出來就是毛玻璃，像 Apple 介面的毛玻璃」═══
   舊值（底 rgba(31,27,69,.40)＋均勻白框 .20）看不出玻璃的原因：
     ① 底色是**深紫**，跟底下的 Hero 同一個色相、同一個明度——玻璃跟背景融成一片，只剩一圈框線在撐形狀。
     ② Hero 上緣是平滑漸層，模糊一片平滑漸層＝什麼都沒變，blur 再大也「看不到」。
   Apple（visionOS／macOS 深色材質）的玻璃靠的不是模糊量，是三件事：
     ① **淺色半透明膜**：在深底上疊一層白 .12→.04，玻璃比背景亮一階，才讀得出「有一片東西」
     ② **高飽和**：saturate(180%)，後面的紫被濃縮出來，玻璃裡的顏色比外面更鮮——這是 Apple 玻璃最明顯的特徵
     ③ **受光的漸層亮邊**：左上最亮、往右下淡掉再在右下角微微回亮，不是一圈均勻的線
   ⚠️ 亮邊用 ::after＋mask 挖空中間做（border 本身不能上漸層）。header 原本的 border 改透明但**寬度保留**，
      版面尺寸一 px 都不動。
   ⚠️ 外陰影只給極淡的深紫：玻璃是「貼在上面」不是「浮起來」（115.09.08 五修量 raycast 的結論仍成立）。 */
/* ═══ 115.09.15 四修 Sara（附截圖）：「細框跟玻璃感覺不夠有質感」═══
   三修那版的問題（對著截圖逐項看）：
     ① 白膜 .13＋saturate(180%) 疊在紫底上＝整條變成一塊**更亮更飽和的紫**，讀起來是「塗了一層漆」不是玻璃。
     ② 亮邊左右兩端 .60／.34 太亮，整圈看起來是一條均勻的淺色描邊。
     ③ 沒有厚度：玻璃只有正面，沒有邊緣的受光與背光。
   這版照高級介面（visionOS／macOS 深色材質、Linear）的做法重配：
     ① 底色回到**深色半透明**（.34），飽和降到 140%——玻璃是「讓後面變暗、變柔」，不是發亮
     ② 上半部一層很薄的受光（白 .07→0，只到 55%），加左上角一塊斜向的反光（.09）：光從左上來，全站一致
     ③ 極淡的顆粒（SVG 雜訊，alpha 約 .05）：真實的霧面玻璃不是完全平滑的，這一層是「質感」的主要來源，
        近看才看得出來，遠看只覺得表面比較「實」
     ④ **雙層細邊**：內側一圈只在上緣亮的白（受光）＋外側一圈 .5px 的深色（跟背景分開）——
        Apple 的玻璃邊都是這個結構，單一一圈亮線才會顯廉價
     ⑤ 下緣內側一條極淡的暗線做出玻璃的厚度 */
#app-homepage #header-inner.on-dark{
  border-color:transparent;
  box-shadow:0 0 0 .5px rgba(6,4,22,.55), 0 14px 34px -14px rgba(6,4,22,.65);
}
#app-homepage #header-inner.on-dark::before{
  /* ⚠️ 底色 .34 深紫同時是可讀性保險：Hero 右側的白色對話卡捲到 header 下方時，白字仍讀得到（三修實測過的問題） */
  background-color:rgba(22,18,56,.20);/* 115.09.15 五修 Sara「玻璃更透一點」：.34 → .20（模糊同步 28 → 20，太重的模糊也會讓玻璃看起來不透） */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(90% 180% at 8% 0%, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 55%);
  -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.22);
}
/* 內側亮邊：上緣最亮、兩側很快淡掉、下緣幾乎沒有；左上角多一點（光源方向）。
   ⚠️ 用 180deg 為主而不是三修的 120deg 斜向：這條 bar 寬 1500、高 48，斜向漸層在這個比例下
      會變成「左端一大段亮、右端一大段亮」，就是截圖上兩端發白的原因。 */
#app-homepage #header-inner.on-dark::after{
  content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; pointer-events:none;
  padding:1px;
  background:
    radial-gradient(40% 160% at 6% 0%, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.08) 45%, rgba(255,255,255,.03) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
/* 手機膠囊拿掉上緣高光（115.09.09「白線框粗細不一致」那條的延續） */
@media screen and (max-width:1024px){
  #app-homepage #header-inner.on-dark::before{ box-shadow:none; }
  /* 手機膠囊只有 40 出頭高，漸層亮邊在這個尺寸會讀成「上面粗、側邊細」（就是 115.09.09 被打回的那種），
     改回均勻細邊。 */
  #app-homepage #header-inner.on-dark::after{ display:none; }
  #app-homepage #header-inner.on-dark{ border-color:rgba(255,255,255,.24); }
}
#app-homepage #header-inner .mega-inner{
  border-color:rgba(255,255,255,.9);
  /* 115.09.15 六修 Sara：「毛玻璃感覺強烈一點」。
     三件事一起做才會「更像玻璃」，只調其中一項都只是變濁或變淡：
       ① 底色讓出來（.86 → .80）：玻璃感來自看得到背後的東西，底色太實的話 blur 再大也只是一塊霧板
       ② 模糊加重（20 → 36px）：背後的字與圖要糊到只剩色塊，才不會跟選單文字打架
       ③ 飽和拉高（130% → 165%）：純模糊會把背後的紫平均成灰，補飽和才留得住顏色——Apple 材質的關鍵一步
     ⚠️ 底色不能再往下讓：.80 已經是「壓在深色 Hero 上、13px 灰字仍過 AA」的下限（實測 .74 就不夠）。
     ⚠️ 另加上緣高光與下緣暗線：玻璃要有厚度，單一塊半透明底看起來只是貼了張描圖紙。 */
  background-color:rgba(244,244,247,.80);
  background-image:linear-gradient(155deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 72%);
  -webkit-backdrop-filter:blur(36px) saturate(165%); backdrop-filter:blur(36px) saturate(165%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(33,29,58,.05), 0 1px 2px rgba(33,29,58,.04), 0 14px 38px rgba(33,29,58,.10);
}
/* 分欄線與分組線在玻璃上改半透明深色：原本的 #EAEAEA 實色線疊在灰底上會比底還亮，看起來像一道白縫 */
#app-homepage #header-inner .mega-col + .mega-col{ border-left-color:rgba(33,29,58,.08); }
#app-homepage #header-inner .mega-group + .mega-group{ border-top-color:rgba(33,29,58,.08); }
/* hover 淡紫底在灰玻璃上幾乎看不見，改半透明白＝玻璃上「亮起來」的一塊 */
#app-homepage #header-inner .mega-list li a:hover{ background-color:rgba(255,255,255,.7); }

/* ═══ 115.09.15 Sara（附 laravel.com/cloud 截圖）：header 上方的公告列 ═══
   文案與日期 Sara 之後再給，這裡先把結構與行為做好，內容是占位。要換的東西只有三處，都在 markup 上：
     ‧ data-until  倒數的截止時間（ISO，例如 2026-09-22T19:00:00+08:00）；拿掉這個屬性就不顯示倒數
     ‧ .ann-txt    公告文字
     ‧ .ann-cta    按鈕文字與連結
   ⚠️ 這條列**在文件流的最上面**，不是 fixed：跟 Laravel 一樣，往下捲它就離開畫面，
      header 接著貼回原來的位置。fixed 的話它會永遠佔掉一條，短螢幕上很擾人。
   ⚠️ header 是 fixed 的膠囊（top:var(--header-bar-top)），所以捲動時要把它往下推「公告列還露出多少」，
      這一段由下方 JS 每幀更新 --ann-offset（只寫一個變數，不碰版面）。
   ⚠️ 關掉之後記在 localStorage，同一則公告不再出現（key 帶 data-ann-id，換公告就換 id）。 */
/* 115.09.15 二修 Sara：改用**金澧的語彙**（MCP 頁那一套）——深紫黑底＋兩顆模糊光團，橘只出現在重點上。
   比過整條橘的版本：橘最顯眼，但整片橘會分掉「橘＝要按下去」的獨佔性，而且與 Hero／MCP 頁不是同一個家族。
   ⚠️ 光團的值照 MCP 頁的 .mcp-blob（橘 rgba(255,126,92)、紫 rgba(149,143,255)、blur 40 上下），
      只是尺度縮到一條 44px 的 bar 上。
   ⚠️ overflow:hidden 是必要的：光團比 bar 高，不裁的話會糊到 header 上。
   ⚠️ 內容要 position:relative + z-index，否則會被光團蓋住。 */
/* ═══ 115.09.15 七修 Sara：「上一版比較好看，但倒數那邊太像 AI 感」═══
   ⇒ 底色與光暈**復原**成六修之前那一版（深色漸層＋左右兩顆模糊光團、橘色折扣碼、實心橘按鈕）。
   ⇒ 只處理倒數：把它從「橘框膠囊」改成**純文字＋一條分隔線**。
      膠囊＋外框＋強調色，是模板化最明顯的地方；同一條帶子裡已經有折扣碼膠囊與按鈕兩個圓角塊，
      再加第三個就變成「三顆藥丸排排站」。改成等寬數字直接落在底色上，右邊一條細線分隔，
      讀起來是報頭的體例，不是元件庫拼出來的。 */
.ann-bar{ position:relative; overflow:hidden; z-index:1001;
  background:linear-gradient(90deg,#1A1631 0%,#211D3A 55%,#1A1631 100%); color:#fff; }
.ann-bar::before, .ann-bar::after{ content:; position:absolute; top:-120%; height:340%; pointer-events:none; }
/* 115.09.19 開發部：公告列整條改單色系（原本是橘＋紫光暈、橘底折扣碼、橘色按鈕）。
   交付包改的是頁內的外殼樣式區塊，匯入器會把外殼剝掉（外殼一律以站上的 shell.css 為準），
   所以這種改動只能由我們重新移植——匯入報告的「外殼還沒跟上」提醒就是在講這件事。 */
.ann-bar::before{ left:-4%; width:360px; background:radial-gradient(circle, rgba(255,255,255,.10), rgba(255,255,255,0) 70%); filter:blur(46px); }
.ann-bar::after{ right:-4%; width:340px; background:radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,0) 70%); filter:blur(48px); }
.ann-in{ position:relative; z-index:1; }
.ann-x{ z-index:2; }
.ann-bar[hidden]{ display:none; }
/* 115.09.15：高度對齊參考站（laravel.com/cloud 實測：列高 44px、按鈕 26px／12px 字、倒數 12px）。
   ⚠️ 只在 641px 以上鎖 44px：手機上文字會折行，鎖死高度會被切掉，所以窄螢幕改成最低 44、可以往下長。 */
.ann-in{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  min-height:44px; padding:0 clamp(44px,5vw,64px); text-align:center; }
/* 115.09.17 Sara：「公告資訊條要在畫面置中」。原本左內距 24、右內距 64（右邊讓位給關閉鈕），
   flex 置中是在扣掉內距之後的寬度裡置中，整串內容因此往左偏 20px（1440 寬實測）。
   ⇒ 左右內距改成一樣大：關閉鈕是 absolute，本來就不佔排版寬度。 */
@media screen and (min-width:641px){ .ann-in{ height:44px; flex-wrap:nowrap; } }
/* 115.09.15 五修 Sara：「倒數顏色可以顯眼一點」。原本是白 .12 的底＋白字，跟深色底幾乎同一階。
   改成橘色底＋白字：倒數是這條公告最有急迫感的資訊，該是整條裡最亮的一塊。
   ⚠️ 用 .32 不用實心橘：實心會與右邊的橘色按鈕變成「兩顆同樣的橘」，看不出哪個才是要按的。 */
/* 115.09.15 九修 Sara（附參考圖）：倒數照參考圖的體例——**數字在亮色方塊裡、單位在方塊外面**。
   與八修的差別只有一處但讀起來差很多：單位移出方塊之後，方塊裡永遠只有兩個字元寬的數字，
   四個方塊等寬等距，才像碼表的數字輪；單位留在外面當說明文字。
   ⚠️ 方塊改亮底深字（白 .92 ＋ #1D1936）：參考圖就是這個對比，在深底上讀得最快。
   ⚠️ 等寬數字＋固定最小寬：個位數變兩位數時整條不會抖。
   ⚠️ 不放 emoji（🔥 之類）：DESIGN-bimteki 明令禁用，參考圖那顆火焰不跟。 */
/* 115.09.15：倒數與文字之間再開一點（Sara：中間間隔大一點）。
   ⚠️ 加在倒數的右外距、不改 .ann-in 的 gap：gap 一改，訊息與按鈕之間也會跟著變寬。 */
.ann-count{ display:inline-flex; align-items:center; gap:3px; padding:0; margin-right:10px; }
.ann-count b{ display:inline-block; min-width:26px; padding:2px 5px; border-radius:5px; text-align:center;
  background:rgba(255,255,255,.92); color:#1D1936;
  font-family:'Lato',system-ui,sans-serif; font-size:12.5px; font-weight:700; letter-spacing:.01em;
  font-variant-numeric:tabular-nums; line-height:1.3; }
.ann-count i{ font-style:normal; margin:0 6px 0 1px; font-size:11.5px; font-weight:400; color:rgba(255,255,255,.62); }
.ann-count i:last-child{ margin-right:0; }
.ann-count[hidden]{ display:none; }
.ann-txt{ font-size:14px; line-height:1.6; letter-spacing:.02em; font-weight:400; color:rgba(255,255,255,.78); }
/* 活動名稱純白粗體，其餘敘述壓成 .78：一條帶子裡只讓一句話跳出來。
   ⚠️ 這個 class 由 Announcements 產生（<strong class="ann-lead">），改文案時兩邊要一起看。 */
.ann-txt .ann-lead{ font-weight:700; color:#fff; }
.ann-code{ display:inline-block; margin:0 2px; padding:1px 7px; border-radius:5px; background:rgba(255,255,255,.12); color:#fff; font-family:'Lato',ui-monospace,monospace; font-weight:700; letter-spacing:.08em; }
.ann-cta{ flex:none; padding:3px 11px; border-radius:6px; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.38);
  font-size:12px; font-weight:700; line-height:1.5; white-space:nowrap; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.ann-cta:hover{ background:#fff; color:#211D3A; border-color:#fff; }
.ann-x{ position:absolute; right:10px; top:50%; translate:0 -50%; display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border:0; border-radius:8px; background:none; color:rgba(255,255,255,.75); cursor:pointer;
  transition:background .15s ease, color .15s ease; }
.ann-x:hover{ background:rgba(255,255,255,.16); color:#fff; }
.ann-x:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@media screen and (max-width:640px){
  /* 115.09.15 Sara：「手機版上下沒有足夠呼吸空間」。
     桌機是固定 44px 高、內容單行，所以上下內距 0 沒問題；手機會折成兩行（倒數一行、文字一行），
     上下內距 0 就變成兩行字直接貼著邊。補 11px 上下內距＋9px 行距。
     ⚠️ 不要改成固定高度：文案長度會變（換檔期、換語言），鎖死高度就會把字切掉。 */
  .ann-in{ gap:8px; row-gap:9px; padding:11px 40px 11px 16px; }
  .ann-txt{ font-size:13px; line-height:1.7; }
}
/* header 往下讓開「公告列還露出多少」。--ann-offset 由 JS 寫，預設 0 ⇒ 沒有公告列時行為完全不變。 */
#header-inner{ top:calc(var(--header-bar-top) + var(--ann-offset, 0px)); }
/* ═══ 115.09.17 Sara（iPhone 截圖）：「公告列的手機版排版很亂」「header 在手機版看短短的，應該與下面區塊對好」═══
   ① 公告列（≤640）原本是 flex 折行＋置中：倒數、文字、按鈕各自一行置中，關閉鈕又 absolute 在垂直正中，
      剛好壓在文字那一行的右邊，三行長度不一、左右參差，讀起來沒有起點。
      ⇒ 改成兩列、全部靠左：第一列公告文字（右側讓出關閉鈕），第二列左倒數、右按鈕。
      左右留白用 5vw，與下方所有區塊（section 的左右內距就是 5vw）同一條線。
      ⚠️ 用 grid-template-areas 排位置，不動 markup：桌機仍是倒數→文字→按鈕的單行順序。
      ⚠️ 關閉鈕改成對齊第一列文字（top 固定），不再垂直置中——兩列高時置中會落在兩列中間的縫。
      ⚠️ right 用 5vw - 8px：按鈕 30px、叉叉圖 14px，圖形本身離按鈕邊 8px，這樣叉叉的右緣剛好落在 5vw 那條線上。
   ② header 膠囊（≤625）原本左右各 25px，下方區塊左右是 5vw（390 寬＝19.5px），兩條邊線差 5px，看起來比內容短一截。
      ⇒ 改成左右各 5vw，與區塊切齊。
      ⚠️ 只動 ≤625：626 以上沿用原本的 min(92%, …)；桌機完全不變。 */
@media screen and (max-width:640px){
  .ann-in{ display:grid; grid-template-columns:1fr auto; grid-template-areas:"txt txt" "count cta";
    align-items:center; column-gap:12px; row-gap:8px; padding:10px 5vw 12px; text-align:left; }
  .ann-txt{ grid-area:txt; padding-right:28px; font-size:13px; line-height:1.6; }
  .ann-count{ grid-area:count; justify-self:start; margin-right:0; }
  .ann-cta{ grid-area:cta; justify-self:end; }
  .ann-x{ top:5px; translate:none; right:calc(5vw - 8px); }
}
/* 115.09.17 二修 Sara：「還沒處理的部分都幫我處理」——平板寬度（626–1024）的 header 也要與內容切齊。
   原本這個範圍吃桌機的 width:min(92%, …) 而且是 content-box（再加左 20px、右 9px 內距），
   實測 768 寬時 header 左右只剩 15px，內容區是 38px。⇒ 上面 ≤625 那條直接擴大到 ≤1024，並補 border-box。
   ⚠️ 1025 以上是已驗收的桌機，不動；1024→1025 交界 header 會從對齊內容跳回桌機寬度，這是刻意的。 */
@media screen and (max-width:1024px){
  #app-homepage #header-inner{ width:calc(100% - 10vw); box-sizing:border-box; }
}

/* ── §4 header／footer 中性化、導覽列寬度 ─────────────────────────── */

  /* ===== 1g-neutral｜header／footer 中性化（115.09.02 Sara：「好 試試看」）=====
     做法：在三個 wrapper 上覆寫 --color-theme-* 八階，而不是逐一改元件樣式。
     功達正式站的 header／footer 元件（膠囊框線、選單 hover、社群圓框、分隔線…）
     全部透過衍生變數吃這八階（--theme-button-color / --theme-border-color /
     --theme-text-color / --light-border-color 都是 var(--color-theme-xxx)），
     所以覆寫源頭這一層，整組就一起轉灰，不必動到任何一條既有規則。
     ⚠️ 只在這三個 wrapper 的作用域內覆寫，:root 的原始值不動——那八階是全站共用，
     改了會波及頁面其他地方（scrollbar 當初也是同樣理由只覆寫 --scrollbar-*）。
     ⚠️ footer 底色是外部圖片 footer-bg.jpg（bim.arkiteki.com），CSS 改不到。
     那張圖若帶紫，中性化在 footer 會不完整，需請功達另出一張中性版替換。 */
  #header-wrapper, #nav-wrapper, #footer-wrapper {
    --color-theme-100:#F5F5F5; --color-theme-200:#E4E4E4; --color-theme-300:#CACACA;
    --color-theme-400:#AAAAAA; --color-theme-500:#888888; --color-theme-600:#333333;
    --color-theme-700:#222222; --color-theme-800:#111111;
    /* FOLLOW US 標籤走 --secondary-text-color → var(--color-orange-500)，一併轉灰 */
    --color-orange-500:#888888;
    --color-theme-transparent-100:#F5F5F500; --color-theme-transparent-200:#E4E4E400;
    --color-theme-transparent-300:#CACACA00; --color-theme-transparent-400:#AAAAAA00;
    --color-orange-400:#AAAAAA;
    /* ⚠️ 衍生變數必須在**同一個作用域重新宣告一次**，光改上面的源頭八階沒有用。
       原因：`--theme-button-color: var(--color-theme-600)` 寫在 :root，var() 的替換
       在 :root 就完成了，繼承給後代的是**已經算好的顏色值**（#7872E0），不是引用關係。
       所以在 wrapper 改 --color-theme-600 不會讓它重算——第一版就是這樣改完全沒生效。
       在這裡重寫一次同樣的 `var(--color-theme-N)`，才會用上面覆寫過的值解析。 */
    --softer-border-color:var(--color-theme-100);
    --soft-border-color:var(--color-theme-200);
    --lighter-border-color:var(--color-theme-200);
    --light-border-color:var(--color-theme-300);
    --mid2-border-color:var(--color-theme-400);
    --mid-border-color:var(--color-theme-500);
    --theme-border-color:var(--color-theme-600);
    --highlight-border-color:var(--color-theme-500);
    --theme-title-color:var(--color-theme-600);
    --dark-title-color:var(--color-theme-600);
    --secondary-light-title-color:var(--color-orange-400);
    --secondary-title-color:var(--color-orange-500);
    --secondary-text-color:var(--color-orange-500);
    --lighter-text-color:var(--color-theme-300);
    --light-text-color:var(--color-theme-400);
    --mid-text-color:var(--color-theme-500);
    --theme-text-color:var(--color-theme-600);
    --dark-text-color:var(--color-theme-700);
    --softer-bg-color:var(--color-theme-100);
    --soft-bg-color:var(--color-theme-200);
    --light-bg-color:var(--color-theme-300);
    --midtone2-bg-color:var(--color-theme-400);
    --midtone-bg-color:var(--color-theme-500);
    --theme-bg-color:var(--color-theme-600);
    --gradient-reversed-lighter-bg-color:linear-gradient(180deg, var(--color-theme-transparent-100) 50%, var(--color-theme-100) 100%);
    --gradient-lighter-bg-color:linear-gradient(180deg, var(--color-theme-100) 0%, var(--color-theme-transparent-100) 100%);
    --gradient-light-bg-color:linear-gradient(180deg, var(--color-theme-200) 0%, var(--color-theme-transparent-200) 100%);
    --gradient-bg-color:linear-gradient(180deg, var(--color-theme-400) 0%, var(--color-theme-transparent-400) 100%);
  }
  /* header「免費使用」維持品牌紫：它與 Hero、結尾 CTA 是同一顆按鈕、同一個動作，
     三處必須一致。.button-outline 的框線／文字／hover 底色全部吃 --theme-button-color，
     所以只要把這一個變數拉回紫就好，不必逐條覆寫顏色屬性。
     （footer 訂閱鈕走的是 --bt-600 不是 color-theme，本來就維持紫，不需處理） */
  #header-trial-button { --theme-button-color:#7872E0; }
  /* 115.09.03 二修 Sara：「免費使用樣式改回來，只有 header」。
     一度把這顆改成實心紫＋光澤（與 Hero、結尾 CTA 同一種長相），Sara 看過後決定退回。
     header 的按鈕與頁面內容同時在畫面上，實心紫在導覽列裡份量太重，會一直把視線從內容拉走；
     外框版仍然是紫的、仍然讀得出是主要動作，但不搶。
     ⚠️ Hero 與結尾 CTA 的實心紫＋光澤維持不動，這次只退 header 這一顆。 */
  /* 隱私政策連結：走 --bt-600 不是 --color-theme-*，所以上面那組 wrapper 覆寫吃不到。
     它是說明文字裡的連結、不是動作，依中性化原則轉灰（對照結尾 CTA 的導入諮詢連結也是 #222）。
     不直接覆寫 footer 的 --bt-600，因為訂閱鈕也吃它，改了會把該留紫的按鈕一起弄灰。 */
  #footer-wrapper .subscription-policy a { color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; }
  :root { --shell-max:1712px; }
  /* 導覽列從 .inner-lg 的 1350 放寬到 1712 對齊 Hero（Sara 115.08.25 同意加寬）。
     ⚠️ #header-inner 是功達正式站原樣移植的程式碼，這是本頁 override——交付時要另外註明 */
  #header-inner { width:min(92%, var(--shell-max)); max-width:none; }

/* ── §5 手機選單分層式 ─────────────────────────── */
/* ═══ 115.09.17 Sara（iPhone 截圖）：「手機版選單文字太小不好點，參考 laravel.com 手機版的方式一模一樣做，下拉選單部分」═══
   laravel.com 手機選單實測（390×844）：
     ‧ 全螢幕白底；上方 80px 一列：左 logo、右 ✕（p-6＝左右 24px）
     ‧ 主選單每列 53px 高、字 20px／500、列與列之間一條細線；有子選單的列右側一個品牌色 ›
     ‧ 點有子選單的列 → 整個面板換成子選單（從右滑入）；頂列變成「品牌色 ← ＋ 上層名稱」，點了回主選單
     ‧ 子選單的列跟主選單同一種長相（20px、53px、細線）
   我們沿用原本的 markup（.acc／.acc-label／.acc-panel，15 頁各一份、連結路徑各不同），只換樣式＋補返回鈕與 logo：
     ‧ 原本的 JS 已經會在點 .acc-label 時切換 .is-open，這裡把「展開」改畫成「滑入一層」
     ‧ 與 laravel 不同的一處：工具一覽有 15 項，保留「檢討工具／表格工具…」小分類標題，否則一長串分不出類別
   ⚠️ 只作用在 ≤1024（抽屜只在這個範圍出現），桌機的 mega menu 完全不受影響。
   ⚠️ 選擇器一律以 #nav-wrapper #nav-inner 開頭（兩個 id）：要壓過功達那份 CSS 裡 #nav-inner … 的舊規則。 */
@media screen and (max-width:1024px){
  /* overflow-x:hidden：收起來的子選單停在右邊 translateX(100%)，不擋的話抽屜會多出一整個螢幕寬、可以左右滑（115.09.17 實測 scrollWidth 767） */
  #nav-wrapper{ overflow-x:hidden; max-width:none; background:#FFFFFF !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none; }
  #nav-wrapper:has(.acc.is-open){ overflow:hidden; }
  /* overflow-x:clip（不是 hidden）：把停在右邊的子選單裁掉、不撐寬抽屜；clip 不會變成捲動容器，子選單裡的 sticky 返回列才不受影響 */
  #nav-wrapper #nav-inner{ position:relative; width:100%; min-height:100%; padding-bottom:32px; overflow-x:clip; }
  /* 頂列：logo（JS 補上）＋ ✕ */
  #nav-wrapper .nav-logo{ position:absolute; left:24px; top:0; height:80px; display:flex; align-items:center; z-index:1; }/* 在子選單（z 2）之下：子選單滑進來時 logo 被蓋掉，頂列換成返回鈕 */
  #nav-wrapper .nav-logo img{ display:block; height:26px; width:auto; }
  #nav-wrapper #menu-close{ position:absolute; left:auto; right:20px; top:24px; z-index:4; width:32px; height:32px;
    display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1; color:#222222; }
  /* 主選單 */
  #nav-wrapper #nav-inner .nav-links{ margin:0 24px; padding-top:92px; }
  #nav-wrapper #nav-inner .nav-links > li{ margin:0; font-size:20px; border-bottom:1px solid #E8E8EC; }
  /* ⚠️ border-box：功達的 CSS 這幾個元素是 content-box，min-height 53px 會再加上下內距 28px 變成 81px（115.09.17 實測），
     免費使用鈕 width:100% 再加左右內距也會超出畫面、撐出橫向捲軸 */
  #nav-wrapper #nav-inner .nav-links > li > a, #nav-wrapper #nav-inner .acc-label, #nav-wrapper #nav-inner .acc-panel li a,
  #nav-wrapper #nav-inner .acc-panel > .acc-more, #nav-wrapper .acc-back, #nav-wrapper #nav-inner .acc-panel{ box-sizing:border-box; }
  #nav-wrapper #nav-inner .nav-links > li > a,
  #nav-wrapper #nav-inner .acc-label{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
    min-height:53px; padding:14px 0; font-size:20px; font-weight:500; line-height:1.25; letter-spacing:.04em; color:#222222; opacity:1; white-space:normal; }
  #nav-wrapper #nav-inner .acc-label:hover, #nav-wrapper #nav-inner .acc.is-open > .acc-label{ color:#222222; }
  /* › 用原本的 chevron-down 轉 -90°，不另外換 icon（15 頁的 markup 都不用動） */
  #nav-wrapper #nav-inner .acc .caret, #nav-wrapper #nav-inner .acc.is-open .caret{ margin:0; font-size:16px; color:#7872E0; transform:rotate(-90deg); }
  #nav-wrapper #nav-inner .nav-links li.acc + li{ margin-top:0; }
  #nav-wrapper #nav-inner .nav-links li.acc--member{ margin-top:0; padding-top:0; border-top:0; }
  /* 免費使用：主選單最下方一顆滿版按鈕（不畫分隔線） */
  #nav-wrapper #nav-inner .nav-links > li:has(> .nav-cta){ border-bottom:0; padding-top:24px; }
  #nav-wrapper #nav-inner .nav-links > li > .nav-cta{ justify-content:center; min-height:48px; margin:0; padding:12px 24px; border-radius:999px;
    background:#7872E0; color:#FFFFFF !important; font-size:17px; letter-spacing:.08em; }
  #nav-wrapper #nav-inner .social-links{ margin:28px 24px 0; padding-bottom:0; }

  /* 子選單：蓋在主選單上、從右滑入 */
  #nav-wrapper #nav-inner .acc-panel{ display:block; position:absolute; inset:0; z-index:2; min-height:100%; padding:0 24px 32px;
    background:#FFFFFF; transform:translateX(100%); visibility:hidden; transition:transform .32s cubic-bezier(.22,1,.36,1), visibility 0s linear .32s;
    overflow-y:auto; }
  #nav-wrapper #nav-inner .acc.is-open > .acc-panel{ transform:none; visibility:visible; transition:transform .32s cubic-bezier(.22,1,.36,1), visibility 0s; }
  /* 返回列黏在子選單頂端：工具一覽有 15 項，捲下去時返回鈕不能跟著捲走（laravel 的頂列也是固定的） */
  #nav-wrapper .acc-back{ position:sticky; top:0; z-index:1; width:calc(100% + 48px); height:92px; margin:0 -24px; display:flex; align-items:center; gap:14px; padding:0 24px 10px; border:0; background:#FFFFFF;
    font-family:inherit; font-size:20px; font-weight:500; letter-spacing:.04em; color:#222222; cursor:pointer; }
  #nav-wrapper .acc-back svg{ width:20px; height:20px; color:#7872E0; flex:none; }
  #nav-wrapper .acc-back:focus-visible{ outline:2px solid #7872E0; outline-offset:3px; border-radius:6px; }
  #nav-wrapper #nav-inner .acc-group{ margin:22px 0 0; padding:0 0 6px; font-size:13px; font-weight:500; letter-spacing:.08em; color:#888888; }
  #nav-wrapper #nav-inner .acc-group:first-of-type{ margin-top:0; }
  #nav-wrapper #nav-inner .acc-panel ul{ margin:0; padding:0; border-top:1px solid #E8E8EC; }
  #nav-wrapper #nav-inner .acc-panel li{ margin:0; font-size:20px; border-bottom:1px solid #E8E8EC; }
  #nav-wrapper #nav-inner .acc-panel li a,
  #nav-wrapper #nav-inner .acc-panel > .acc-more{ display:flex; align-items:center; min-height:53px; padding:14px 0; font-size:20px; font-weight:500;
    line-height:1.25; letter-spacing:.04em; color:#222222; opacity:1; white-space:normal; }
  #nav-wrapper #nav-inner .acc-panel > .acc-more{ margin-top:8px; color:#7872E0 !important; }
  @media (prefers-reduced-motion: reduce) {
    #nav-wrapper #nav-inner .acc-panel, #nav-wrapper #nav-inner .acc.is-open > .acc-panel{ transition:none; }
  }
}

/* ── §6 Responsive QA 共用部分 ─────────────────────────── */
/* ═══ 115.09.17 Sara：Responsive QA 第一輪修正（全站共用的部分：header 面板）═══
   M1  手機點通知鈴鐺，面板左緣跑出畫面（390 寬實測 −63px）。
       原因：面板寬 min(88vw,360px)，對齊的是「鈴鐺那一格」的右緣（li.nav-drop 是 position:relative），
       鈴鐺不在 header 最右邊，面板就往左長出去。
   m6  九宮格（站台切換）面板 390 寬貼齊畫面右緣、768 寬超出 3px——right:-80px !important 是從功達 bundle 抄來的。
   ⇒ ≤900：三顆圖示的 li 取消 position:relative，面板改以 header 膠囊（#header-inner，fixed＋transform）為定位基準，
          右緣對齊膠囊右緣。膠囊本身離畫面邊 ≥ 4%，所以面板一定在畫面內。
     ≤640：面板改成與膠囊同寬，左右留白＝膠囊的留白（首頁／功能頁 5vw，390 寬 19.5px）。
       複刻頁膠囊只留 4%（390 寬 15.6px、360 寬 14.4px），不到 Sara 要的 16px，
       所以左右再各補 max(0px, 16px − 4vw)：5vw 的頁面補 0，4% 的頁面補到剛好 16px。
   ⚠️ 選擇器用兩個 id（#header-inner #header-icons）：要壓過 #header-inner #mega-notice .mega-inner 這類既有規則。
   ⚠️ 只在 ≤900／≤640 生效；桌機（≥1025）完全不動。 */
@media screen and (max-width:900px){
  #header-inner #header-icons .nav-drop--account{ position:static; }
  #header-inner #header-icons .mega--account{ left:auto; right:0 !important; top:100%; }
}
@media screen and (max-width:640px){
  #header-inner #header-icons .mega--account{ left:max(0px, calc(16px - 4vw)); right:max(0px, calc(16px - 4vw)) !important; }
  #header-inner #header-icons .mega--account .mega-inner{ width:auto; }
}
/* M3 補充（實測後）：641–720 就算換成短版文案也放不進一行——倒數 183＋短文案 324＋按鈕 87＋間距 24＋左右留白 88 ≈ 706px。
   ⇒ 641–720 沿用 ≤640 已驗證的兩列排版（上排文字、下排倒數＋按鈕），不讓兩行字塞進 44px；721–1149 才是短文案單行（Sara 確認 641–720 維持兩列）。
   ⚠️ 要一併解除 ≥641 的 height:44px 鎖高，否則兩列會被切掉。 */
@media screen and (min-width:641px) and (max-width:720px){
  .ann-in{ height:auto; display:grid; grid-template-columns:1fr auto; grid-template-areas:"txt txt" "count cta";
    align-items:center; column-gap:12px; row-gap:8px; padding:10px var(--ann-gutter, 5vw) 12px; text-align:left; }
  .ann-txt{ grid-area:txt; padding-right:28px; font-size:13px; line-height:1.6; }
  .ann-count{ grid-area:count; justify-self:start; margin-right:0; }
  .ann-cta{ grid-area:cta; justify-self:end; }
  .ann-x{ top:5px; translate:none; right:calc(var(--ann-gutter, 5vw) - 8px); }
}


/*
---------------------------------------------------------
01. /var/www/archibm/public/css/site/shell-integration.css
---------------------------------------------------------
*/

/* ============================================================
   BIMTeki 新版網站：外殼的站台整合層
   ------------------------------------------------------------
   shell.css 是 Sara 稿原樣移植；這裡只處理「正式站真實元件」與設計稿示意結構不同的地方：
     1. 站台切換：清單由帳號中心回傳 HTML 寫入內層 #site-switch-menu（結構與設計稿的 .site-list 不同）
     2. 鈴鐺：開合與清單由帳號中心 notification.js 控制（#notification-icon／#notification-box）
     3. 會員頭像：真實頭像圖片
   設計師改外殼時本檔不需要重新移植，但要檢查選擇器是否仍對得上。
   ============================================================ */


/* ── 1. 站台切換 ───────────────────────────────
   帳號中心的 site.switch.menu.css 與舊版外殼都把 #site-switch-menu 當成「浮出的面板本體」
   （right:-80px、padding-top、ul 外框）；新版的面板是外層 .mega，#site-switch-menu 只是內容容器，
   所以把那幾條定位與外框全部歸零，再套回 Sara 的 .site-list 外觀。 */

#app-homepage #header-inner #site-switch-wrapper .mega-inner{ width:300px; }
#site-switch-wrapper #site-switch-menu{ position:static !important; left:auto !important; right:auto !important; padding:0 !important; }
#site-switch-wrapper #site-switch-menu ul{ width:auto; margin:0; padding:0; list-style:none; border:0 !important; border-radius:0; box-shadow:none; background:none; }
#site-switch-wrapper #site-switch-menu li{ width:auto; height:auto; margin:0; padding:0; border-bottom:1px solid #CAC7FF; }
#site-switch-wrapper #site-switch-menu li:last-child{ border-bottom:none; }
#site-switch-wrapper #site-switch-menu li a{ display:flex; align-items:center; box-sizing:border-box; width:100%; padding:15px 20px; color:inherit; }
#site-switch-wrapper #site-switch-menu .site-logo{ flex:0 0 auto; border-color:#CAC7FF; }
#site-switch-wrapper #site-switch-menu .site-label{ min-width:0; }
#site-switch-wrapper #site-switch-menu a:hover .site-name{ color:#7872E0; }
#site-switch-wrapper #site-switch-menu li[aria-current="true"] .site-name{ color:#7872E0; }

/* 帳號中心回傳的箭頭是 <i class="fa-light fa-arrow-up-right">，但目前的 Font Awesome kit 沒有這顆字符
   （Sara 115.09.10 實測：只佔位不顯示）。改用同形狀的 SVG 遮罩畫出來，顏色仍吃 currentColor。 */
#site-switch-wrapper #site-switch-menu .site-icon{
  flex:0 0 auto; width:16px; height:16px; margin:0; color:#AAA5FF; background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 11.5 11.5 4.5M6 4.5h5.5V10' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 11.5 11.5 4.5M6 4.5h5.5V10' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition:color .2s;
}
#site-switch-wrapper #site-switch-menu .site-icon::before{ content:none; }
#site-switch-wrapper #site-switch-menu a:hover .site-icon{ color:#7872E0; }


/* ── 2. 鈴鐺與通知面板 ─────────────────────────────
   鈴鐺不掛 .nav-drop（開合交給 notification.js），但外觀沿用 Sara 的 icon 鈕；
   面板 #notification-box 套 Sara 的玻璃面板外觀，水平位置由 shell.js 對齊鈴鐺（--bt-notice-right）。 */

#header-icons li#notification-icon{ width:auto; height:auto; }
#notification-icon .count{ right:2px; top:4px; }
#app-homepage #header-inner #notification-box{
  top:calc(100% + 14px) !important; right:var(--bt-notice-right, 4%) !important;
  width:min(88vw, 360px); min-height:300px;
  border:1px solid rgba(255,255,255,.9) !important; border-radius:16px; color:var(--ink);
  background-color:rgba(244,244,247,.94);
  background-image:linear-gradient(155deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 72%);
  -webkit-backdrop-filter:blur(36px) saturate(165%); backdrop-filter:blur(36px) saturate(165%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 1px 2px rgba(33,29,58,.04), 0 14px 38px rgba(33,29,58,.10);
}
#app-homepage #header-inner #notification-box-header{ border-bottom-color:rgba(33,29,58,.08); }
#app-homepage #header-inner #notification-list li{ border-bottom-color:rgba(33,29,58,.06); }
#app-homepage #header-inner #notification-list li:hover{ background-color:rgba(255,255,255,.6); }
#app-homepage #header-inner #notification-list li.unread::before{ background-color:#7872E0; }

/* 115.09.17 Sara Responsive QA M1（shell.css §6）：≤900 面板改對齊 header 膠囊右緣、≤640 與膠囊同寬。
   §6 的規則只選得到 .mega--account，通知面板是獨立的 #notification-box，這裡照同一套數值補上。 */
@media screen and (max-width:900px){
  #app-homepage #header-inner #notification-box{ right:0 !important; }
}
@media screen and (max-width:640px){
  #app-homepage #header-inner #notification-box{ left:max(0px, calc(16px - 4vw)) !important; right:max(0px, calc(16px - 4vw)) !important; width:auto; }
  #app-homepage #header-inner #site-switch-wrapper .mega-inner{ width:auto; }
}


/* ── 3. 會員頭像 ───────────────────────────────── */

#header-inner .account-head .avatar img{ display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }


/*
---------------------------------------------------------
02. /var/www/archibm/public/css/site/components.css
---------------------------------------------------------
*/

/* ============================================================
   BIMTeki 新版網站：掛在 body 底下的共用元件（對話框、提示訊息、下拉選單、提示框）
   ------------------------------------------------------------
   jquery-confirm／jquery-toast／select2／tooltipster 產生的元素不在 .bt-app 裡，
   Sara 複刻稿抽出的內容區樣式套不到；舊版靠 common.css／app.css 撐外觀，新外殼不載入那兩支。
   這裡把舊版的元件規則搬過來，顏色改用 shell.css §1 的設計 tokens（中性字色＋品牌紫按鈕，與複刻稿一致）。
   ============================================================ */


/* ── 對話框（jquery-confirm）──────────────────────── */

.jconfirm .jconfirm-box{ max-width:540px; padding:18px 0 15px; border-radius:16px; font-family:"Noto Sans TC", "Microsoft JhengHei", sans-serif; box-shadow:0 1px 2px rgba(33,29,58,.04), 0 14px 38px rgba(33,29,58,.14); }
.jconfirm .jconfirm-box div.jconfirm-title-c{ padding:0 20px; font-size:18px; font-weight:600; color:var(--ink); }
.jconfirm .jconfirm-box div.jconfirm-closeIcon{ font-size:16px !important; font-weight:500; }
.jconfirm .jconfirm-box div.jconfirm-content-pane{ margin-bottom:0; padding:0 20px; }
.jconfirm .jconfirm-content{ padding:3px 0; line-height:1.6em; color:var(--ink-3); }
.jconfirm .jconfirm-box .jconfirm-buttons{ padding:10px 20px 0; }
.jconfirm .jconfirm-box .jconfirm-buttons button{ border-radius:8px; font-weight:500; }
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-theme,
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-red{ background-color:var(--bt-600); color:#FFFFFF; }
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-theme:hover,
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-red:hover{ background-color:var(--bt-700); }
.jconfirm .jconfirm-box input[type="text"]{ background-color:#FFFFFF; }
.jconfirm-content,
div.jconfirm-content-pane.no-scroll,
.jconfirm .jconfirm-box{ overflow:visible !important; }

/* 對話框尺寸與版型（呼叫端以 class 指定） */
.jconfirm.lazy-appear{ opacity:0; visibility:hidden; }
.jconfirm.lazy-appear.appear{ opacity:1; visibility:visible; transition:opacity .2s, visibility 0s; }
.jconfirm.dialog-large .jconfirm-box{ max-width:1000px; }
.jconfirm.dialog-medium .jconfirm-box{ max-width:800px; }
.jconfirm.dialog-compact .jconfirm-box{ max-width:520px; }
.jconfirm.dialog-small .jconfirm-box{ max-width:320px; }
.jconfirm.dialog-round-md .jconfirm-box{ border-radius:15px; }
.jconfirm.dialog-center-buttons .jconfirm-box .jconfirm-buttons{ float:none; text-align:center; }
.jconfirm.circle-close .jconfirm-box{ overflow:visible; }
.jconfirm.circle-close .jconfirm-box div.jconfirm-closeIcon{ top:-15px; right:-15px; width:32px; height:32px; line-height:30px !important; text-align:center; font-size:1.6em !important; font-weight:normal; }
@media screen and (max-width:640px){
  .jconfirm.circle-close .jconfirm-box div.jconfirm-closeIcon{ top:-12px; right:-12px; width:24px; height:24px; line-height:22px !important; font-size:1em !important; }
}


/* ── 提示訊息（jquery-toast，Helper.toast）─────────────
   舊版 margin-top 55px 是舊 header 高度；新版 header 膠囊下緣約 90px（公告列捲走後）。 */

.jq-toast-wrap{ margin-top:90px; z-index:999999999 !important; }
.jq-toast-loader{ display:none !important; }
.jq-toast-single{ padding:8px 14px; border-radius:20px; font-family:"Noto Sans TC", "Microsoft JhengHei", sans-serif; }


/* ── 下拉選單（select2）─────────────────────────── */

.select2-container{ width:100% !important; }
.select2-container--default .select2-selection--single{ height:36px; border:1px solid #D2D2D2; outline:none; }
.select2-container--default .select2-selection--single .select2-selection__rendered{ padding-left:12px; line-height:36px; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ width:36px; height:36px; }
.select2-dropdown{ z-index:99999999; border:none; box-shadow:3px 3px 10px rgba(33,29,58,.12); }
.select2-results__option{ padding:.7em 15px; white-space:nowrap; color:var(--ink); }
.select2-container--default .select2-results__option--selected{ background-color:var(--bt-100) !important; color:var(--bt-600) !important; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{ background-color:#F7F7F7; color:var(--ink); }


/* ── 提示框（tooltipster）───────────────────────── */

.tooltipster-box{ width:100%; }
.tooltipster-show{ z-index:999999998 !important; }
.tooltipster-sidetip.tooltipster-shadow .tooltipster-box{ overflow:hidden; box-shadow:0 0 7px 3px rgba(0,0,0,.08); }


/* ── 新版預覽標示 ─────────────────────────────
   後台設成「僅預覽」或自己帶 ?site_v2=1 時才會出現：提醒現在只有自己看得到新版，並提供退出。 */

.bt-preview-flag{
  position:fixed; right:16px; bottom:16px; z-index:2147483000;
  display:flex; align-items:center; gap:10px; padding:8px 14px;
  border-radius:999px; border:1px solid rgba(255,255,255,.18);
  background:rgba(33,29,58,.92); color:#FFFFFF; font-size:13px; letter-spacing:.04em;
  box-shadow:0 8px 24px rgba(33,29,58,.22);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.bt-preview-flag a{ color:#CAC7FF; text-decoration:underline; text-underline-offset:2px; }
.bt-preview-flag a:hover{ color:#FFFFFF; }
@media screen and (max-width:640px){
  .bt-preview-flag{ right:12px; bottom:12px; padding:7px 12px; font-size:12px; }
}


/*
---------------------------------------------------------
03. /var/www/archibm/public/css/site/demo.css
---------------------------------------------------------
*/

/* ============================================================
   BIMTeki 新版網站：預約 Demo 區塊（site.partials.demo）
   ------------------------------------------------------------
   區塊掛在外殼層（頁尾之前），不屬於匯入的頁面內容。

   ⚠ 兩條規矩，換了設計稿也不會壞：
     1. 所有 class 以 bt-demo- 開頭。設計稿的頁面 CSS 由 site/page.blade 輸出在
        @yield('head')，**排在這支之後**，同名 class（.btn／.lead／.form-card／
        .form-card label 都是設計稿在用的）會反過來蓋掉我們。
     2. 每一條規則都掛在 .bt-demo 底下（特異度 ≥ 0,1,1），才壓得過設計稿裡
        input{…}、button{…}、h2{…} 這類裸元素選擇器。

   顏色一律走 shell.css :root 的品牌 token——那是我們維護的檔案，
   設計稿改版不會動到它。
   ============================================================ */

.bt-demo{
    position:relative;
    padding:clamp(48px,4.5vw,72px) clamp(18px,5vw,72px);
    /* 上方（首頁 CTA）是白底、下方頁尾有底圖，用白→淡紫收尾把兩者接起來 */
    background:linear-gradient(180deg,#FFFFFF 0%,var(--bt-100) 100%);
    font-family:"Noto Sans TC","Heiti TC","微軟正黑體","Microsoft JhengHei",Helvetica,Arial,sans-serif;
    color:var(--ink);
    line-height:1.6;
}
.bt-demo *,
.bt-demo *::before,
.bt-demo *::after{ box-sizing:border-box; }

.bt-demo .bt-demo-in{
    max-width:1080px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(28px,4vw,64px);
    align-items:start;
}

/* ── 左欄：說明 ─────────────────────────── */

.bt-demo .bt-demo-eyebrow{
    margin:0 0 14px;
    font-size:15px;
    font-weight:700;
    letter-spacing:.08em;
    color:var(--bt-700);
}
.bt-demo .bt-demo-title{
    margin:0;
    font-size:clamp(26px,3.2vw,38px);
    font-weight:700;
    line-height:1.35;
    letter-spacing:.05em;
    color:var(--ink);
}
.bt-demo .bt-demo-lead{
    margin:20px 0 0;
    font-size:16px;
    line-height:1.85;
    letter-spacing:.05em;
    color:var(--ink-2);
}
.bt-demo .bt-demo-points{
    margin:24px 0 0;
    padding:0;
    list-style:none;
}
.bt-demo .bt-demo-points li{
    position:relative;
    padding-left:26px;
    margin-top:12px;
    font-size:15px;
    line-height:1.8;
    letter-spacing:.03em;
    color:var(--ink-2);
}
/* 打勾用 CSS 畫，不依賴 Font Awesome 的 kit（外部資源掛掉時清單照樣讀得懂） */
.bt-demo .bt-demo-points li::before{
    content:"";
    position:absolute;
    left:2px;
    top:.62em;
    width:11px;
    height:6px;
    border-left:2px solid var(--bt-600);
    border-bottom:2px solid var(--bt-600);
    transform:rotate(-45deg);
}

/* ── 右欄：表單卡 ─────────────────────────── */

.bt-demo .bt-demo-form{ margin:0; }

.bt-demo .bt-demo-card{
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:clamp(24px,2.6vw,34px);
    border:1px solid var(--line-soft);
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 30px rgba(120,114,224,.10);
}

.bt-demo .bt-demo-field{ display:flex; flex-direction:column; }

.bt-demo .bt-demo-label{
    display:block;
    margin-bottom:7px;
    padding:0;
    font-size:13px;
    font-weight:500;
    letter-spacing:.05em;
    color:var(--ink-2);
}

.bt-demo .bt-demo-card input[type="text"],
.bt-demo .bt-demo-card input[type="email"],
.bt-demo .bt-demo-card input[type="tel"]{
    width:100%;
    height:44px;
    margin:0;
    padding:0 14px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    font-family:inherit;
    font-size:15px;
    color:var(--ink);
    transition:border-color .15s ease,box-shadow .15s ease;
}
.bt-demo .bt-demo-card input::placeholder{ color:#AFAFAF; }
.bt-demo .bt-demo-card input:hover{ border-color:var(--bt-300); }
.bt-demo .bt-demo-card input:focus{
    outline:none;
    border-color:var(--bt-600);
    box-shadow:0 0 0 3px var(--bt-200);
}

/* 錯誤：紅框只在送出後標上，使用者一開始修正就收掉（見 demo.js） */
.bt-demo .bt-demo-err{
    display:none;
    margin-top:6px;
    font-size:12.5px;
    line-height:1.6;
    letter-spacing:.03em;
    color:#D6452F;
}
.bt-demo .bt-demo-field.is-invalid input{ border-color:#E38070; }
.bt-demo .bt-demo-field.is-invalid .bt-demo-err{ display:block; }

/* ── 更多資訊（選填）：展開用 grid-template-rows，收合時不吃 gap ── */

.bt-demo .bt-demo-more{
    display:grid;
    grid-template-rows:0fr;
    margin-top:-18px;    /* 收合時抵銷卡片的 gap，才真的看不出這裡有東西 */
    opacity:0;
    visibility:hidden;
    transition:grid-template-rows .3s cubic-bezier(.22,1,.36,1),opacity .25s ease,margin-top .3s cubic-bezier(.22,1,.36,1);
}
.bt-demo .bt-demo-more.is-open{
    grid-template-rows:1fr;
    margin-top:0;
    opacity:1;
    visibility:visible;
}
.bt-demo .bt-demo-more-in{
    overflow:hidden;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:16px;
}
/* 展開動畫跑完才放行 overflow，否則日曆面板會被裁掉 */
.bt-demo .bt-demo-more.is-done .bt-demo-more-in{ overflow:visible; }

.bt-demo .bt-demo-more-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding-top:4px;
    font-size:12.5px;
    letter-spacing:.06em;
    color:var(--ink-3);
}
.bt-demo .bt-demo-more-head::after{
    content:"";
    flex:1 1 auto;
    height:1px;
    background:var(--line-soft);
}

.bt-demo .bt-demo-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:14px;
}

/* ── 期望預約時段 ─────────────────────────── */

.bt-demo .bt-demo-dt{ position:relative; }

.bt-demo .bt-demo-dt-field{
    width:100%;
    height:44px;
    margin:0;
    padding:0 42px 0 14px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    font-family:inherit;
    font-size:15px;
    text-align:left;
    color:var(--ink);
    cursor:pointer;
    transition:border-color .15s ease,box-shadow .15s ease;
}
.bt-demo .bt-demo-dt-field:hover{ border-color:var(--bt-300); }
.bt-demo .bt-demo-dt-field:focus-visible,
.bt-demo .bt-demo-dt.is-picking .bt-demo-dt-field{
    outline:none;
    border-color:var(--bt-600);
    box-shadow:0 0 0 3px var(--bt-200);
}
.bt-demo .bt-demo-dt-face{ color:#AFAFAF; letter-spacing:.02em; }
.bt-demo .bt-demo-dt.has-value .bt-demo-dt-face{ color:var(--ink); }

.bt-demo .bt-demo-dt-clear{
    position:absolute;
    right:9px;
    bottom:11px;
    z-index:2;
    width:24px;
    height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:50%;
    background:none;
    color:var(--ink-3);
    cursor:pointer;
}
.bt-demo .bt-demo-dt-clear:hover{ background:var(--bt-100); color:var(--bt-700); }
.bt-demo .bt-demo-dt-clear[hidden]{ display:none; }
.bt-demo .bt-demo-dt-clear svg{ width:14px; height:14px; display:block; }

/* 面板：預設開在欄位下方，放不下時由 demo.js 加 .bt-demo-dtp-up 翻到上方 */
.bt-demo .bt-demo-dtp{
    position:absolute;
    left:50%;
    top:calc(100% + 10px);
    transform:translateX(-50%);
    z-index:40;
    width:min(320px,calc(100vw - 48px));
    padding:14px;
    border:1px solid var(--line-soft);
    border-radius:14px;
    background:#fff;
    box-shadow:0 18px 40px rgba(33,29,58,.16);
}
.bt-demo .bt-demo-dtp.bt-demo-dtp-up{ top:auto; bottom:calc(100% + 10px); }
.bt-demo .bt-demo-dtp[hidden]{ display:none; }

.bt-demo .bt-demo-dtp-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
}
.bt-demo .bt-demo-dtp-title{
    font-size:14.5px;
    font-weight:600;
    letter-spacing:.03em;
    color:var(--bt-700);
}
.bt-demo .bt-demo-dtp-nav{
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:8px;
    background:none;
    color:var(--ink-3);
    cursor:pointer;
}
.bt-demo .bt-demo-dtp-nav:hover{ background:var(--bt-100); color:var(--bt-700); }
.bt-demo .bt-demo-dtp-nav svg{ width:16px; height:16px; display:block; }
.bt-demo .bt-demo-dtp-nav.is-off{ visibility:hidden; }

.bt-demo .bt-demo-dtp-wd,
.bt-demo .bt-demo-dtp-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:2px;
}
.bt-demo .bt-demo-dtp-wd{ margin-bottom:2px; }
.bt-demo .bt-demo-dtp-wd span{
    text-align:center;
    font-size:12px;
    line-height:24px;
    color:var(--deco);
}
.bt-demo .bt-demo-dtp-day{
    height:32px;
    padding:0;
    border:0;
    border-radius:8px;
    background:none;
    font-family:inherit;
    font-size:13.5px;
    color:var(--ink);
    cursor:pointer;
}
.bt-demo .bt-demo-dtp-day:hover{ background:var(--bt-100); }
.bt-demo .bt-demo-dtp-day.is-out{ color:#C7C7C7; }
.bt-demo .bt-demo-dtp-day.is-today{ box-shadow:inset 0 0 0 1px var(--bt-300); }
.bt-demo .bt-demo-dtp-day.is-sel,
.bt-demo .bt-demo-dtp-day.is-sel:hover{
    background:var(--bt-600);
    color:#fff;
    box-shadow:none;
}
/* 開放日之前的日期：關掉但仍看得到，使用者才知道是「還不能約」而不是壞掉 */
.bt-demo .bt-demo-dtp-day.is-off,
.bt-demo .bt-demo-dtp-day.is-off:hover{
    color:#D6D6D6;
    background:none;
    cursor:not-allowed;
}

.bt-demo .bt-demo-dtp-slot{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--line-soft);
}
.bt-demo .bt-demo-dtp-lbl{ flex:none; font-size:12.5px; color:var(--ink-3); }
.bt-demo .bt-demo-dtp-chips{ display:flex; gap:5px; flex-wrap:wrap; }
.bt-demo .bt-demo-dtp-chip{
    padding:5px 10px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    font-family:inherit;
    font-size:12.5px;
    color:var(--ink-2);
    cursor:pointer;
}
.bt-demo .bt-demo-dtp-chip:hover{ border-color:var(--bt-300); }
.bt-demo .bt-demo-dtp-chip.is-on{
    background:var(--bt-600);
    border-color:var(--bt-600);
    color:#fff;
}

.bt-demo .bt-demo-dtp-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--line-soft);
}
.bt-demo .bt-demo-dtp-acts{ display:flex; gap:8px; }
.bt-demo .bt-demo-dtp-txt{
    padding:6px 4px;
    border:0;
    background:none;
    font-family:inherit;
    font-size:13px;
    color:var(--ink-3);
    cursor:pointer;
}
.bt-demo .bt-demo-dtp-txt:hover{ color:var(--bt-700); }
.bt-demo .bt-demo-dtp-cancel,
.bt-demo .bt-demo-dtp-ok{
    padding:7px 18px;
    border-radius:999px;
    font-family:inherit;
    font-size:13px;
    cursor:pointer;
}
.bt-demo .bt-demo-dtp-cancel{ border:1px solid var(--line); background:#fff; color:var(--ink-2); }
.bt-demo .bt-demo-dtp-cancel:hover{ border-color:var(--ink-3); }
.bt-demo .bt-demo-dtp-ok{ border:1px solid var(--bt-600); background:var(--bt-600); color:#fff; }
.bt-demo .bt-demo-dtp-ok:hover{ background:var(--bt-700); border-color:var(--bt-700); }
.bt-demo .bt-demo-dtp-ok[disabled]{ opacity:.4; cursor:not-allowed; }

/* ── 期望 Demo 方式 ─────────────────────────── */

.bt-demo .bt-demo-modes{
    margin:0;
    padding:0;
    border:0;
    min-width:0;   /* fieldset 預設 min-width:min-content，會撐破窄畫面 */
}
.bt-demo .bt-demo-modes legend{ float:none; width:auto; }
.bt-demo .bt-demo-mode-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.bt-demo .bt-demo-mode{ position:relative; display:inline-flex; margin:0; cursor:pointer; }
/* 原生 radio 藏起來但仍在焦點序列裡（不是 display:none），鍵盤與讀屏照舊。
   ⚠ 上面那條 position:relative 不能省：少了它，絕對定位的 radio 會跑到最近的
   定位祖先（.bt-demo）左上角，焦點與點擊判定就離開了這顆 chip。 */
.bt-demo .bt-demo-mode input{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    border:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}
.bt-demo .bt-demo-mode span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:84px;
    height:38px;
    padding:0 18px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    font-size:14px;
    letter-spacing:.05em;
    color:var(--ink-2);
    transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.bt-demo .bt-demo-mode:hover span{ border-color:var(--bt-300); }
.bt-demo .bt-demo-mode input:checked + span{
    background:var(--bt-600);
    border-color:var(--bt-600);
    color:#fff;
}
.bt-demo .bt-demo-mode input:focus-visible + span{
    outline:2px solid var(--bt-600);
    outline-offset:3px;
}

/* ── 說明、送出鈕、狀態 ─────────────────────────── */

.bt-demo .bt-demo-note{
    margin:0;
    font-size:12.5px;
    line-height:1.8;
    letter-spacing:.03em;
    color:var(--ink-3);
}

.bt-demo .bt-demo-submit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:48px;
    margin-top:18px;
    padding:0 34px;
    border:1px solid var(--bt-600);
    border-radius:50px;
    background:var(--bt-600);
    font-family:inherit;
    font-size:16px;
    font-weight:500;
    letter-spacing:.05em;
    color:#fff;
    cursor:pointer;
    transition:background .15s ease,border-color .15s ease,transform .12s cubic-bezier(.22,1,.36,1);
}
.bt-demo .bt-demo-submit:hover{ background:var(--bt-700); border-color:var(--bt-700); }
.bt-demo .bt-demo-submit:active{ transform:scale(.99); }
.bt-demo .bt-demo-form.is-sending .bt-demo-submit{ opacity:.65; cursor:progress; }

/* 失敗橫幅與成功卡預設都不顯示，由 demo.js 切 form 上的 class */
.bt-demo .bt-demo-alert,
.bt-demo .bt-demo-done{ display:none; }

.bt-demo .bt-demo-form.has-error .bt-demo-alert{
    display:block;
    margin:0 0 14px;
    padding:12px 16px;
    border:1px solid #F0C8BF;
    border-radius:12px;
    background:var(--or-100);
    font-size:13.5px;
    line-height:1.7;
    color:#A8341C;
}
.bt-demo .bt-demo-alert a{ text-decoration:underline; }

/* 成功：整張表單換成結果卡，避免使用者重複送出 */
.bt-demo .bt-demo-form.is-sent .bt-demo-card,
.bt-demo .bt-demo-form.is-sent .bt-demo-submit,
.bt-demo .bt-demo-form.is-sent .bt-demo-alert{ display:none; }
.bt-demo .bt-demo-form.is-sent .bt-demo-done{
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:clamp(24px,2.6vw,34px);
    border:1px solid var(--bt-200);
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 30px rgba(120,114,224,.10);
}
.bt-demo .bt-demo-done-icon{
    flex:none;
    width:38px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--bt-100);
    color:var(--bt-600);
}
.bt-demo .bt-demo-done-icon svg{ width:18px; height:18px; display:block; }
.bt-demo .bt-demo-done-h{ font-size:17px; font-weight:700; letter-spacing:.05em; color:var(--ink); }
.bt-demo .bt-demo-done-p{ margin:8px 0 0; font-size:14px; line-height:1.8; color:var(--ink-2); }

/* ── RWD ─────────────────────────── */

@media screen and (max-width:900px){
    .bt-demo .bt-demo-in{ grid-template-columns:minmax(0,1fr); gap:28px; }
}
@media screen and (max-width:520px){
    .bt-demo .bt-demo-row{ grid-template-columns:minmax(0,1fr); }
    .bt-demo .bt-demo-dtp{ left:0; transform:none; width:100%; }
    /* 窄螢幕時段 chips 會折成兩行，標籤跟著改成擺上方，才不會孤零零地垂直置中 */
    .bt-demo .bt-demo-dtp-slot{ flex-direction:column; align-items:flex-start; gap:8px; }
    .bt-demo .bt-demo-mode span{ min-width:72px; }
}