@charset "utf-8";
/*
---------------------------------------------------------
combine/combine-7098eb0c.css
---------------------------------------------------------
00. /var/www/archibm/public/css/site/app/app-shell.css
01. /var/www/archibm/public/css/site/app/contact.css
*/

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

/* ============================================================
   BIMTeki 新版網站：應用頁（plans／addons／downloads／my-applications／contact）共用的外殼微調
   ------------------------------------------------------------
   來源：Sara 115.09.17 v5 四個複刻頁 <style id="bt-app-css"> 的最後一段（四頁內容相同）。
   應用頁的內容卡片沿用正式站的 .inner（寬 92%，左右各 4%），不是設計頁的 5vw，
   所以 header 膠囊與公告列留白在窄螢幕跟著 4% 走，才會與下方卡片切齊。
   公告列其餘樣式在 shell.css。
   ============================================================ */

@media screen and (max-width:1024px){
  #app-homepage #header-inner{ width:92%; box-sizing:border-box; }
}
@media screen and (max-width:720px){
  .ann-bar{ --ann-gutter:4vw; }
  .ann-in{ padding-left:4vw; padding-right:4vw; }
  .ann-x{ right:calc(4vw - 8px); }
}


/*
---------------------------------------------------------
01. /var/www/archibm/public/css/site/app/contact.css
---------------------------------------------------------
*/

/* ============================================================
   BIMTeki 新版網站：聯絡我們頁內容區（.bt-app）
   ------------------------------------------------------------
   來源：Sara 115.09.17 v5 複刻稿 contact.html 的 <style id="bt-app-css">
   （正式站內容區樣式以 :where(.bt-app) 範圍化，外加 115.09.15 起的中性色與卡片調整）。
   公告列樣式在 shell.css；應用頁共用的 header／公告列寬度在 app-shell.css。
   ============================================================ */
/* ===== 正式站內容區樣式（115.09.15 從 bim.arkiteki.com/contact 存檔頁自動抽出）=====
   只收「內容區元素實際會套到」的規則，選擇器一律加 :where(.bt-app) 前綴（:where 不增加權重，與正式站原本的權重一致，
   才不會蓋掉 Font Awesome 之類其他樣式表的 class 規則），
   不影響 header／footer（那兩塊沿用首頁的中性化外殼）。
   ⚠️ .bt-app 上的 font／color 是正式站 body 繼承下來的值，外殼 body 的設定不同，所以要在這裡補回。
   ⚠️ 顏色變數在這裡重新宣告：外殼的 .neutral 覆寫只作用在 header／nav／footer，內容區要維持品牌紫。 */
.bt-app{font-family:"Noto Sans TC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Helvetica Neue", Helvetica, Arial;font-size:14px;line-height:1;color:var(--default-text-color);--theme-text-color:#7872E0;--theme-button-color:#7872E0;--light-text-color:#AAA5FF;--dark-button-color:#7872E0;--light-bg-color:#CAC7FF;--mid-border-color:#958FFF;--default-title-color:#222222;--midtone2-button-color:#7872E0;--soft-bg-color:#E4E3FF;--page-header-padding:50px;--page-header-fontsize:1.8em;--sharp-text-color:#222222;--theme-title-color:#7872E0;--theme-border-color:#7872E0;--default-text-color:#222222;--gray-border-color:#C8C8C8;}
.bt-app{--mid-border-color:var(--color-theme-500);--theme-border-color:var(--color-theme-600);--gray-border-color:var(--color-black-50);--default-text-color:var(--color-black-500);--sharp-text-color:var(--color-black-500);--default-title-color:var(--color-black-500);--theme-title-color:var(--color-theme-600);--light-text-color:var(--color-theme-400);--theme-text-color:var(--color-theme-600);--soft-bg-color:var(--color-theme-200);--light-bg-color:var(--color-theme-300);--midtone2-button-color:var(--color-theme-600);--theme-button-color:var(--color-theme-600);--dark-button-color:var(--color-theme-600);--page-header-padding:90px;--page-header-fontsize:2.6em}
@media screen and (max-width: 1600px){
.bt-app{--page-header-padding:60px;--page-header-fontsize:2.2em}
}
@media screen and (max-width: 1440px){
.bt-app{--page-header-padding:50px;--page-header-fontsize:1.8em}
}
@media screen and (max-width: 1024px){
.bt-app{--page-header-padding:40px;--page-header-fontsize:1.5em}
}
@media screen and (max-width: 640px){
.bt-app{--page-header-padding:30px;--page-header-fontsize:1.5em}
}
/* 外殼（快速上手頁）有 h1,h2,h3{letter-spacing:.05em}、p{letter-spacing:.05em}，正式站沒有，會漏進內容區把字撐寬 */
.bt-app{letter-spacing:normal;}
:where(.bt-app) h1,:where(.bt-app) h2,:where(.bt-app) h3,:where(.bt-app) p{letter-spacing:normal;}

:where(.bt-app) #contact-wrapper #contact-form{width: 66%; margin-left: 5%; text-align: left}
:where(.bt-app) #contact-wrapper #contact-form .form-body{padding: 50px clamp(15px, 4%, 40px); background-color: rgb(255, 255, 255)}
:where(.bt-app) #contact-wrapper #contact-form #form-description{color: var(--theme-text-color); font-size: 1.02em; line-height: 1.25em; margin: -10px 0px 40px 50px}
:where(.bt-app) #contact-wrapper #contact-form .label{white-space: nowrap}
:where(.bt-app) #contact-wrapper #contact-form .row.one-line .label{margin-bottom: 0px; margin-right: 20px}
:where(.bt-app) #contact-wrapper #contact-form input{height: 38px}
:where(.bt-app) #contact-wrapper #contact-form input,
:where(.bt-app) #contact-wrapper #contact-form textarea{background-color: rgb(255, 255, 255); border: 1px solid var(--light-border-color)}
:where(.bt-app) #contact-wrapper #contact-form .result{color: rgb(89, 89, 89); line-height: 1.2em}
:where(.bt-app) #contact-wrapper #contact-form .result a{text-decoration: underline}
:where(.bt-app) #contact-wrapper #contact-form .error{text-align: left; color: var(--dark-text-color)}
:where(.bt-app) #contact-wrapper #contact-form button[type="submit"]{min-width: 140px; border-radius: 5px}
:where(.bt-app) #contact-wrapper #contact-form #result-message{color: rgb(89, 89, 89); margin: 0px 0px 0px 30px}
:where(.bt-app) #contact-wrapper #contact-form .select2-container--default .select2-selection--single{border: 1px solid var(--light-border-color); height: 38px}
:where(.bt-app) #contact-wrapper #contact-form .select2-container--default .select2-selection--single .select2-selection__arrow b{border-color: var(--mid-border-color) transparent transparent transparent}
:where(.bt-app) #contact-wrapper #contact-form .select2-container--default .select2-selection--single .select2-selection__rendered{color: var(--theme-text-color)}
@media screen and (max-width: 1024px){
:where(.bt-app) #contact-wrapper{flex-direction: column; text-align: center}
:where(.bt-app) #contact-wrapper img{width: 96%; max-width: 400px; margin: auto}
:where(.bt-app) #contact-wrapper #contact-form{width: 100%; margin-left: 0px; border: 1px solid var(--mid-border-color); box-shadow: rgba(122, 115, 255, 0.15) 0px 4px 10px; background-color: rgb(255, 255, 255); border-radius: 15px; overflow: hidden}
:where(.bt-app) #contact-wrapper #contact-form .form-body{border-width: medium; border-style: none; border-color: currentcolor; border-image: none; box-shadow: none; border-radius: 0px; background: none; padding-top: 40px; padding-bottom: 0px}
:where(.bt-app) #contact-wrapper #contact-form .bottom-row{padding: 30px clamp(15px, 4%, 40px)}
:where(.bt-app) #contact-wrapper #contact-form textarea{height: 120px}
:where(.bt-app) #contact-wrapper #contact-form .error{text-align: right}
}
@media screen and (max-width: 640px){
:where(.bt-app) #contact-wrapper form .row{flex-direction: column}
:where(.bt-app) #contact-wrapper form .row .col{width: 100%}
:where(.bt-app) #contact-wrapper form .row .col + .col{margin-top: 15px}
}
:where(.bt-app) .select2-container{box-sizing: border-box; display: inline-block; margin: 0px; position: relative; vertical-align: middle}
:where(.bt-app) .select2-container .select2-selection--single{box-sizing: border-box; cursor: pointer; display: block; height: 28px; user-select: none}
:where(.bt-app) .select2-container .select2-selection--single .select2-selection__rendered{display: block; padding-left: 8px; padding-right: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
:where(.bt-app) .select2-container .select2-selection--single .select2-selection__clear{background-color: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; font-size: 1em}
:where(.bt-app) .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right: 8px; padding-left: 20px}
:where(.bt-app) .select2-container .select2-selection--multiple{box-sizing: border-box; cursor: pointer; display: block; min-height: 32px; user-select: none}
:where(.bt-app) .select2-container .select2-selection--multiple .select2-selection__rendered{display: inline; list-style: none; padding: 0px}
:where(.bt-app) .select2-container .select2-selection--multiple .select2-selection__clear{background-color: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; font-size: 1em}
:where(.bt-app) .select2-container .select2-search--inline .select2-search__field{box-sizing: border-box; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; font-size: 100%; margin-top: 5px; margin-left: 5px; padding: 0px; max-width: 100%; resize: none; height: 18px; vertical-align: bottom; font-family: sans-serif; overflow: hidden; word-break: keep-all}
:where(.bt-app) .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{appearance: none}
:where(.bt-app) .select2-dropdown{background-color: white; border: 1px solid rgb(170, 170, 170); border-radius: 4px; box-sizing: border-box; display: block; position: absolute; left: -100000px; width: 100%; z-index: 1051}
:where(.bt-app) .select2-results{display: block}
:where(.bt-app) .select2-results__options{list-style: none; margin: 0px; padding: 0px}
:where(.bt-app) .select2-results__option{padding: 6px; user-select: none}
:where(.bt-app) .select2-results__option--selectable{cursor: pointer}
:where(.bt-app) .select2-container--open .select2-dropdown{left: 0px}
:where(.bt-app) .select2-container--open .select2-dropdown--above{border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px}
:where(.bt-app) .select2-container--open .select2-dropdown--below{border-top-width: medium; border-top-style: none; border-top-color: currentcolor; border-top-left-radius: 0px; border-top-right-radius: 0px}
:where(.bt-app) .select2-search--dropdown{display: block; padding: 4px}
:where(.bt-app) .select2-search--dropdown .select2-search__field{padding: 4px; width: 100%; box-sizing: border-box}
:where(.bt-app) .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{appearance: none}
:where(.bt-app) .select2-search--dropdown.select2-search--hide{display: none}
:where(.bt-app) .select2-close-mask{border: 0px; margin: 0px; padding: 0px; display: block; position: fixed; left: 0px; top: 0px; min-height: 100%; min-width: 100%; height: auto; width: auto; opacity: 0; z-index: 99; background-color: rgb(255, 255, 255)}
:where(.bt-app) .select2-hidden-accessible{border: 0px !important; clip: rect(0px, 0px, 0px, 0px) !important; clip-path: inset(50%) !important; height: 1px !important; overflow: hidden !important; padding: 0px !important; position: absolute !important; width: 1px !important; white-space: nowrap !important}
:where(.bt-app) .select2-container--default .select2-selection--single{background-color: rgb(255, 255, 255); border: 1px solid rgb(170, 170, 170); border-radius: 4px}
:where(.bt-app) .select2-container--default .select2-selection--single .select2-selection__rendered{color: rgb(68, 68, 68); line-height: 28px}
:where(.bt-app) .select2-container--default .select2-selection--single .select2-selection__clear{cursor: pointer; float: right; font-weight: bold; height: 26px; margin-right: 20px; padding-right: 0px}
:where(.bt-app) .select2-container--default .select2-selection--single .select2-selection__placeholder{color: rgb(153, 153, 153)}
:where(.bt-app) .select2-container--default .select2-selection--single .select2-selection__arrow{height: 26px; position: absolute; top: 1px; right: 1px; width: 20px}
:where(.bt-app) .select2-container--default .select2-selection--single .select2-selection__arrow b{border-color: rgb(136, 136, 136) transparent transparent; border-style: solid; border-width: 5px 4px 0px; height: 0px; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0px}
:where(.bt-app) .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float: left}
:where(.bt-app) .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left: 1px; right: auto}
:where(.bt-app) .select2-container--default.select2-container--disabled .select2-selection--single{background-color: rgb(238, 238, 238); cursor: default}
:where(.bt-app) .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display: none}
:where(.bt-app) .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color: transparent transparent rgb(136, 136, 136); border-width: 0px 4px 5px}
:where(.bt-app) .select2-container--default .select2-selection--multiple{background-color: white; border: 1px solid rgb(170, 170, 170); border-radius: 4px; cursor: text; padding-bottom: 5px; padding-right: 5px; position: relative}
:where(.bt-app) .select2-container--default .select2-selection--multiple.select2-selection--clearable{padding-right: 25px}
:where(.bt-app) .select2-container--default .select2-selection--multiple .select2-selection__clear{cursor: pointer; font-weight: bold; height: 20px; margin-right: 10px; margin-top: 5px; position: absolute; right: 0px; padding: 1px}
:where(.bt-app) .select2-container--default .select2-selection--multiple .select2-selection__choice{background-color: rgb(228, 228, 228); border: 1px solid rgb(170, 170, 170); border-radius: 4px; box-sizing: border-box; display: inline-block; margin-left: 5px; margin-top: 5px; padding: 0px 0px 0px 20px; position: relative; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap}
:where(.bt-app) .select2-container--default .select2-selection--multiple .select2-selection__choice__display{cursor: default; padding-left: 2px; padding-right: 5px}
:where(.bt-app) .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{background-color: transparent; border-width: medium 1px medium medium; border-style: none solid none none; border-color: currentcolor rgb(170, 170, 170) currentcolor currentcolor; border-image: none; border-top-left-radius: 4px; border-bottom-left-radius: 4px; color: rgb(153, 153, 153); cursor: pointer; font-size: 1em; font-weight: bold; padding: 0px 4px; position: absolute; left: 0px; top: 0px}
:where(.bt-app) .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
:where(.bt-app) .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus{background-color: rgb(241, 241, 241); color: rgb(51, 51, 51); outline: none}
:where(.bt-app) .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left: 5px; margin-right: auto}
:where(.bt-app) .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display{padding-left: 5px; padding-right: 2px}
:where(.bt-app) .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{border-left: 1px solid rgb(170, 170, 170); border-right-width: medium; border-right-style: none; border-right-color: currentcolor; border-radius: 0px 4px 4px 0px}
:where(.bt-app) .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__clear{float: left; margin-left: 10px; margin-right: auto}
:where(.bt-app) .select2-container--default.select2-container--focus .select2-selection--multiple{border: 1px solid black; outline: 0px}
:where(.bt-app) .select2-container--default.select2-container--disabled .select2-selection--multiple{background-color: rgb(238, 238, 238); cursor: default}
:where(.bt-app) .select2-container--default.select2-container--disabled .select2-selection__choice__remove{display: none}
:where(.bt-app) .select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
:where(.bt-app) .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius: 0px; border-top-right-radius: 0px}
:where(.bt-app) .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
:where(.bt-app) .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius: 0px; border-bottom-right-radius: 0px}
:where(.bt-app) .select2-container--default .select2-search--dropdown .select2-search__field{border: 1px solid rgb(170, 170, 170)}
:where(.bt-app) .select2-container--default .select2-search--inline .select2-search__field{background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; outline: 0px; box-shadow: none; appearance: textfield}
:where(.bt-app) .select2-container--default .select2-results > .select2-results__options{max-height: 200px; overflow-y: auto}
:where(.bt-app) .select2-container--default .select2-results__option .select2-results__option{padding-left: 1em}
:where(.bt-app) .select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left: 0px}
:where(.bt-app) .select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left: -1em; padding-left: 2em}
:where(.bt-app) .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left: -2em; padding-left: 3em}
:where(.bt-app) .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left: -3em; padding-left: 4em}
:where(.bt-app) .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left: -4em; padding-left: 5em}
:where(.bt-app) .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left: -5em; padding-left: 6em}
:where(.bt-app) .select2-container--default .select2-results__option--group{padding: 0px}
:where(.bt-app) .select2-container--default .select2-results__option--disabled{color: rgb(153, 153, 153)}
:where(.bt-app) .select2-container--default .select2-results__option--selected{background-color: rgb(221, 221, 221)}
:where(.bt-app) .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background-color: rgb(88, 151, 251); color: white}
:where(.bt-app) .select2-container--default .select2-results__group{cursor: default; display: block; padding: 6px}
:where(.bt-app) .select2-container--classic .select2-selection--single{background-color: rgb(247, 247, 247); border: 1px solid rgb(170, 170, 170); border-radius: 4px; outline: 0px; background-image: linear-gradient(rgb(255, 255, 255) 50%, rgb(238, 238, 238) 100%); background-repeat: repeat-x}
:where(.bt-app) .select2-container--classic .select2-selection--single:focus{border: 1px solid rgb(88, 151, 251)}
:where(.bt-app) .select2-container--classic .select2-selection--single .select2-selection__rendered{color: rgb(68, 68, 68); line-height: 28px}
:where(.bt-app) .select2-container--classic .select2-selection--single .select2-selection__clear{cursor: pointer; float: right; font-weight: bold; height: 26px; margin-right: 20px}
:where(.bt-app) .select2-container--classic .select2-selection--single .select2-selection__placeholder{color: rgb(153, 153, 153)}
:where(.bt-app) .select2-container--classic .select2-selection--single .select2-selection__arrow{background-color: rgb(221, 221, 221); border-width: medium medium medium 1px; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor rgb(170, 170, 170); border-image: none; border-top-right-radius: 4px; border-bottom-right-radius: 4px; height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; background-image: linear-gradient(rgb(238, 238, 238) 50%, rgb(204, 204, 204) 100%); background-repeat: repeat-x}
:where(.bt-app) .select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color: rgb(136, 136, 136) transparent transparent; border-style: solid; border-width: 5px 4px 0px; height: 0px; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0px}
:where(.bt-app) .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{float: left}
:where(.bt-app) .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{border-width: medium 1px medium medium; border-style: none solid none none; border-color: currentcolor rgb(170, 170, 170) currentcolor currentcolor; border-image: none; border-radius: 4px 0px 0px 4px; left: 1px; right: auto}
:where(.bt-app) .select2-container--classic.select2-container--open .select2-selection--single{border: 1px solid rgb(88, 151, 251)}
:where(.bt-app) .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none}
:where(.bt-app) .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color: transparent transparent rgb(136, 136, 136); border-width: 0px 4px 5px}
:where(.bt-app) .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top-width: medium; border-top-style: none; border-top-color: currentcolor; border-top-left-radius: 0px; border-top-right-radius: 0px; background-image: linear-gradient(rgb(255, 255, 255) 0%, rgb(238, 238, 238) 50%); background-repeat: repeat-x}
:where(.bt-app) .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-image: linear-gradient(rgb(238, 238, 238) 50%, rgb(255, 255, 255) 100%); background-repeat: repeat-x}
:where(.bt-app) .select2-container--classic .select2-selection--multiple{background-color: white; border: 1px solid rgb(170, 170, 170); border-radius: 4px; cursor: text; outline: 0px; padding-bottom: 5px; padding-right: 5px}
:where(.bt-app) .select2-container--classic .select2-selection--multiple:focus{border: 1px solid rgb(88, 151, 251)}
:where(.bt-app) .select2-container--classic .select2-selection--multiple .select2-selection__clear{display: none}
:where(.bt-app) .select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color: rgb(228, 228, 228); border: 1px solid rgb(170, 170, 170); border-radius: 4px; display: inline-block; margin-left: 5px; margin-top: 5px; padding: 0px}
:where(.bt-app) .select2-container--classic .select2-selection--multiple .select2-selection__choice__display{cursor: default; padding-left: 2px; padding-right: 5px}
:where(.bt-app) .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{background-color: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-top-left-radius: 4px; border-bottom-left-radius: 4px; color: rgb(136, 136, 136); cursor: pointer; font-size: 1em; font-weight: bold; padding: 0px 4px}
:where(.bt-app) .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color: rgb(85, 85, 85); outline: none}
:where(.bt-app) .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left: 5px; margin-right: auto}
:where(.bt-app) .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display{padding-left: 5px; padding-right: 2px}
:where(.bt-app) .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{border-radius: 0px 4px 4px 0px}
:where(.bt-app) .select2-container--classic.select2-container--open .select2-selection--multiple{border: 1px solid rgb(88, 151, 251)}
:where(.bt-app) .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top-width: medium; border-top-style: none; border-top-color: currentcolor; border-top-left-radius: 0px; border-top-right-radius: 0px}
:where(.bt-app) .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px}
:where(.bt-app) .select2-container--classic .select2-search--dropdown .select2-search__field{border: 1px solid rgb(170, 170, 170); outline: 0px}
:where(.bt-app) .select2-container--classic .select2-search--inline .select2-search__field{outline: 0px; box-shadow: none}
:where(.bt-app) .select2-container--classic .select2-dropdown{background-color: rgb(255, 255, 255); border: 1px solid transparent}
:where(.bt-app) .select2-container--classic .select2-dropdown--above{border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor}
:where(.bt-app) .select2-container--classic .select2-dropdown--below{border-top-width: medium; border-top-style: none; border-top-color: currentcolor}
:where(.bt-app) .select2-container--classic .select2-results > .select2-results__options{max-height: 200px; overflow-y: auto}
:where(.bt-app) .select2-container--classic .select2-results__option--group{padding: 0px}
:where(.bt-app) .select2-container--classic .select2-results__option--disabled{color: grey}
:where(.bt-app) .select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable{background-color: rgb(56, 117, 215); color: rgb(255, 255, 255)}
:where(.bt-app) .select2-container--classic .select2-results__group{cursor: default; display: block; padding: 6px}
:where(.bt-app) .select2-container--classic.select2-container--open .select2-dropdown{border-color: rgb(88, 151, 251)}
:where(.bt-app) div,
:where(.bt-app) span,
:where(.bt-app) iframe,
:where(.bt-app) h2,
:where(.bt-app) a,
:where(.bt-app) img,
:where(.bt-app) strong,
:where(.bt-app) b,
:where(.bt-app) form{margin: 0px; padding: 0px; border: 0px; font: inherit; vertical-align: baseline}
:where(.bt-app) main{display: block}
:where(.bt-app) *{box-sizing: border-box}
:where(.bt-app) a{color: inherit; text-decoration: none; transition: 0.2s}
:where(.bt-app) strong,
:where(.bt-app) b{font-weight: 500}
:where(.bt-app) img{max-width: 100%}
:where(.bt-app) h2{font-weight: 500; color: var(--theme-text-color)}
:where(.bt-app) form{}
:where(.bt-app) form .row{margin-bottom: 20px; position: relative}
:where(.bt-app) form .col{width: 48.5%}
:where(.bt-app) form .label{margin-bottom: 10px}
:where(.bt-app) form input[type="text"],
:where(.bt-app) form textarea,
:where(.bt-app) form select{width: 100%; height: 42px; padding: 0.6em 1em; background: rgb(247, 247, 247); border: 1px solid rgb(223, 223, 223); border-radius: 4px; font-family: inherit; outline: none; appearance: none}
:where(.bt-app) form textarea{height: 120px}
:where(.bt-app) form select{padding: 5px}
:where(.bt-app) form button{font-family: inherit; outline: none}
:where(.bt-app) form button[type="submit"]{display: inline-block}
:where(.bt-app) form input:-webkit-autofill,
:where(.bt-app) form input:-webkit-autofill:hover,
:where(.bt-app) form input:-webkit-autofill:focus{-webkit-text-fill-color: rgb(0, 0, 0); box-shadow: rgb(255, 255, 255) 0px 0px 0px 1000px inset; transition: background-color 5000s ease-in-out}
:where(.bt-app) form .error{display: block; text-align: right; margin-top: 5px; color: rgb(213, 68, 73); font-size: 0.96em; line-height: 1.25em}
:where(.bt-app) form .result{margin-top: 20px; color: rgb(102, 102, 102)}
:where(.bt-app) form input::placeholder,
:where(.bt-app) form textarea::placeholder{color: rgb(170, 170, 170); font-weight: 400}
:where(.bt-app) form input:disabled,
:where(.bt-app) form button:disabled{pointer-events: none; opacity: 0.5}
:where(.bt-app) button{font-family: inherit; font-weight: 500 !important}
:where(.bt-app) .flex-center{display: flex; align-items: center}
:where(.bt-app) .flex-justify{display: flex; justify-content: space-between}
:where(.bt-app) .button{display: inline-block; padding: 0px 1.1em; white-space: nowrap; cursor: pointer; transition: 0.2s; background: var(--theme-button-color); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; text-align: center; text-decoration: none !important}
:where(.bt-app) .button{height: 38px; line-height: 36px; border-radius: 4px; font-size: 1em; border: 1px solid var(--theme-button-color)}
:where(.bt-app) .button:hover{}
:where(.bt-app) .button:hover{border: 1px solid var(--dark-button-color); color: rgb(255, 255, 255); background-color: var(--dark-button-color)}
:where(.bt-app) .select2-custom-option img{width: 36px; height: 36px; border-radius: 50%; margin-right: 10px}
:where(.bt-app) .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar{width: 5px; height: 5px}
:where(.bt-app) .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-track{background: var(--scrollbar-track) !important}
:where(.bt-app) .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb{border-radius: 5px; background: var(--scrollbar-thumb) !important}
:where(.bt-app) .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb:hover{background: var(--scrollbar-thumb) !important}
:where(.bt-app) .box-shadow-md{box-shadow: rgba(122, 115, 255, 0.15) 0px 4px 10px}
:where(.bt-app) .box-round-lg{border-radius: 15px}
:where(.bt-app) .box-border-mid{border: 1px solid var(--mid-border-color)}
@media screen and (max-width: 1024px){
:where(.bt-app) form input[type="text"],
:where(.bt-app) form textarea,
:where(.bt-app) form select{height: 36px; padding: 0.4em 0.7em}
}
:where(.bt-app) h2{color: var(--default-title-color); font-weight: 700}
:where(.bt-app) h2{font-size: 2.7em; line-height: 1.2em}
:where(.bt-app) .select2-container{width: 100% !important}
:where(.bt-app) .select2-container--default .select2-selection--single{height: 36px; border: 1px solid rgb(210, 210, 210); outline: none}
:where(.bt-app) .select2-container--default .select2-selection--single .select2-selection__rendered{line-height: 36px; padding-left: 12px}
:where(.bt-app) .select2-container--default .select2-selection--single .select2-selection__arrow{height: 36px; width: 36px}
:where(.bt-app) .select2-container--default .select2-selection--single .select2-selection__clear{font-size: 12px; color: rgb(102, 102, 102); height: 36px; margin-right: 36px}
:where(.bt-app) .select2-container--default .select2-selection--multiple .select2-selection__choice{padding: 5px 0px 6px 20px; background-color: rgb(161, 181, 182)}
:where(.bt-app) .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{height: 30px; color: rgb(255, 255, 255); border-right-width: medium; border-right-style: none; border-right-color: currentcolor}
:where(.bt-app) .select2-container--default .select2-selection--multiple .select2-selection__choice__display{padding: 0px 10px 0px 3px; color: rgb(255, 255, 255)}
:where(.bt-app) .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{background-color: rgb(161, 181, 182); color: var(--theme-text-color)}
:where(.bt-app) .select2-container--default .select2-selection--multiple{min-height: 36px; border: 1px solid rgb(210, 210, 210)}
:where(.bt-app) .select2-container--default .select2-results__option--selected{background-color: var(--softer-bg-color) !important; color: var(--theme-text-color) !important}
:where(.bt-app) .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background-color: rgb(247, 247, 247); color: var(--default-text-color)}
:where(.bt-app) .select2-container--default .select2-results__option--disabled{font-weight: 500; color: rgb(68, 68, 68)}
:where(.bt-app) .select2-container--default.select2-container--focus .select2-selection--multiple{border: 1px solid rgb(210, 210, 210)}
:where(.bt-app) .select2-container .select2-search--inline .select2-search__field{margin-left: 8px; margin-top: 10px; height: 22px}
:where(.bt-app) .select2-dropdown{z-index: 99999999; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; box-shadow: rgba(0, 63, 64, 0.12) 3px 3px 10px}
:where(.bt-app) .select2-results__option{white-space: nowrap; color: var(--default-text-color); padding: 0.7em 15px}
:where(.bt-app) .select2-container--default .select2-results__group{padding: 0.7em 15px}
:where(.bt-app) .select2-container--default .select2-search--dropdown .select2-search__field{outline: none; border-radius: 3px}
:where(.bt-app) .button{border-radius: 50px}
:where(.bt-app) .button:hover{background-color: var(--midtone2-button-color)}
:where(.bt-app) .button-outline{background-color: rgb(255, 255, 255); border: 1px solid var(--theme-button-color); color: var(--theme-button-color)}
:where(.bt-app) .button-outline:hover{background-color: var(--theme-button-color); border: 1px solid var(--theme-button-color); color: rgb(255, 255, 255)}
:where(.bt-app) .inner{width: 92%; max-width: 1440px; margin: auto}
:where(.bt-app) .inner-lg{width: 92%; max-width: 1350px; margin: auto}
:where(.bt-app) #page-header-inner{padding: var(--page-header-padding) 15px calc(var(--page-header-padding) * .65) 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap}
:where(.bt-app) #page-header-inner h2{color: var(--default-title-color); font-weight: 500; font-size: var(--page-header-fontsize)}
:where(.bt-app) #main-wrapper{min-height: 50vh}
:where(.bt-app) .main-content-wrapper{position: relative}
:where(.bt-app) .main-content-wrapper .main-content{padding-bottom: 60px}
:where(.bt-app) .main-content-wrapper .main-content .content-headroom{padding: 18vh 0px 0px}
@media screen and (max-width: 1600px){
:where(.bt-app) h2{font-size: 2.4em}
:where(.bt-app) .main-content-wrapper .main-content .content-headroom{padding: 8vh 0px 0px}
}
@media screen and (max-width: 1024px){
:where(.bt-app) h2{font-size: 2.1em}
:where(.bt-app) .button{height: 36px; line-height: 34px}
:where(.bt-app) .inner{width: 92%; margin: auto}
:where(.bt-app) .main-content-wrapper .main-content{padding: 0px 0px 40px}
:where(.bt-app) .main-content-wrapper .main-content .content-headroom{padding: 0px}
}
@media screen and (max-width: 640px){
:where(.bt-app) h2{font-size: 1.9em}
:where(.bt-app) #page-header-inner{padding: var(--page-header-padding) 10px calc(var(--page-header-padding) * .25) 10px}
}
@media screen and (max-width: 480px){
:where(.bt-app) h2{font-size: 1.7em}
}
@media screen and (max-width: 360px){
:where(.bt-app) h2{font-size: 1.5em}
}
:where(.bt-app) .plan-table .option-selector-wrapper .select2-container--default .select2-selection--single{height: 38px; border: 1px solid var(--mid-border-color); border-radius: 6px}
:where(.bt-app) .plan-table .option-selector-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered{line-height: 36px; color: rgb(136, 136, 136); padding-left: 25px}
:where(.bt-app) .plan-table .option-selector-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow{width: 38px; height: 38px}
:where(.bt-app) .plan-table .option-selector-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow b{border-color: var(--mid-border-color) transparent transparent transparent}
:where(.bt-app) #application-plans .select2-results__option{padding-left: 25px}
:where(.bt-app) .subscription-fields{position: relative}
:where(.bt-app) .subscription-fields input{flex-grow: 1; padding: 0px 0.8em; line-height: 36px; outline: none; width: auto !important; height: 38px !important; background-color: rgb(255, 255, 255) !important; border: 1px solid var(--theme-button-color) !important; border-radius: 4px 0px 0px 4px !important}

/* ===== 以下是抽取之後手動補的 ===== */
/* select2 的下拉面板是點開時才生出來、掛在 #bt-app-layer，存檔頁的 DOM 裡沒有，抽取器看不到它的寬度規則。
   正式站主旨欄的寬度由 select2 依選項字寬算出（實測 303px），這裡用同一個值。 */
:where(.bt-app) #contact-form .row.one-line .select2-container{width:303px;}
@media screen and (max-width:1024px){:where(.bt-app) #contact-form .row.one-line .select2-container{width:100%;}}
/* ⚠️ class 撞名：表單的「欲訂購方案／授權數量」那一列叫 .subscription-fields，跟 footer 電子報表單同名。
   正式站本來就撞到了——那兩格輸入框偏窄（213px）、深紫框，就是吃到電子報輸入框的規則，上面抽出來的規則照樣保留，才會一模一樣。
   但外殼的 footer 是改版過的膠囊樣式（白底、圓角 50px、內距 5/5/5/10），那組沒有 .bt-app 範圍，
   會把這一列畫成一顆膠囊、標籤往右偏 10px（115.09.15 截圖抓到），這裡把外殼加的那幾項還原掉。 */
.bt-app #contact-form .subscription-fields{background:none;border:0;border-radius:0;padding:0;}


/* ═══ 115.09.15 Sara：「複刻頁的顏色全部改成中性色，與首頁調性一致」═══
   這幾頁是從正式站複刻的，內容區當初刻意維持正式站的品牌紫（外殼的中性化只作用在 header／footer），
   所以整頁讀起來跟首頁是兩套。
   ⚠️ 做法是**改變數**不是逐條改規則：這些頁的內容區全靠下面這組變數上色，
      逐條改會漏掉 hover／focus／selected 這些沒被掃描抓到的狀態（實測掃描只看得到靜態那一層）。
   ⚠️ 依首頁的規則「紫只留在要按下去或要看過去的點」：
      --theme-button-color／--dark-button-color／--midtone2-button-color **保持紫**（實心主鈕＝主要動作），
      其餘文字、標題、框線、淡底一律轉灰。
   ⚠️ 灰階沿用首頁那組：#222 主要文字、#333 強調、#888 輔助、#E4E4E4 線、#F2F2F5 淡底。 */
.bt-app{
  --theme-text-color:#333333;
  --theme-title-color:#222222;
  --theme-border-color:#E4E4E4;
  --mid-border-color:#E4E4E4;
  --light-text-color:#888888;
  --soft-bg-color:#F2F2F5;
  --light-bg-color:#E4E4E4;
}
/* 正式站的陰影是帶紫的（rgba(122,115,255,…)），在灰階版面上會透出一層紫霧；換成中性深紫黑，
   與首頁卡片的 rgba(33,29,58,…) 同一組。 */
:where(.bt-app) .box-shadow-md{ box-shadow:0 4px 10px rgba(33,29,58,.10); }
:where(.bt-app) .box-shadow-soft{ box-shadow:3px 3px 10px rgba(33,29,58,.12); }
:where(.bt-app) .box-shadow-lg{ box-shadow:0 10px 30px rgba(33,29,58,.12); }

/* 聯絡我們專屬 */
/* 輸入框預設灰框，**聚焦才變紫**——紫留給「現在正在操作的那一格」。
   ⚠️ 選擇器要帶 #contact-wrapper：正式站原規則是 `#contact-wrapper #contact-form input`（兩個 id），
      只寫一個 id 的覆寫權重不夠，實測完全沒生效（框線仍是 #CAC7FF）。 */
:where(.bt-app) #contact-wrapper #contact-form input,
:where(.bt-app) #contact-wrapper #contact-form textarea{ border-color:#E4E4E4; }
:where(.bt-app) #contact-wrapper #contact-form input:focus,
:where(.bt-app) #contact-wrapper #contact-form textarea:focus{ border-color:#7872E0; outline:none; }
/* 錯誤訊息：原本是帶紫的深色（正式站的 --dark-text-color），在中性版面上看起來只是深字、讀不出是錯誤。
   改成磚紅——與教學頁警告框同一支紅，是這套設計系統裡既有的語意色。 */
:where(.bt-app) #contact-wrapper #contact-form .error{ color:#C0392B; }
/* 主旨下拉：收起時灰框、展開時紫框（與輸入框同一套邏輯） */
:where(.bt-app) #contact-wrapper #contact-form .select2-container--default .select2-selection--single{ border-color:#E4E4E4; }
:where(.bt-app) #contact-form .select2-container--default .select2-selection--single{ border-color:#E4E4E4; }
:where(.bt-app) #contact-form .select2-container--open .select2-selection--single{ border-color:#7872E0; }
:where(.bt-app) #contact-form .select2-container--default .select2-selection--single .select2-selection__rendered{ color:#222222; }
:where(.bt-app) #contact-form .select2-container--default .select2-selection--single .select2-selection__arrow b{ border-top-color:#888888; }
/* 送出是這一頁唯一的主要動作，維持紫框紫字 */
:where(.bt-app) #contact-form button[type="submit"]{ border-color:#7872E0; color:#7872E0; }
:where(.bt-app) #contact-form button[type="submit"]:hover{ background:#7872E0; color:#FFFFFF; }

/* ═══ 115.09.15 Sara：「這塊需要有三步驟毛玻璃的效果」═══
   ⚠️ 玻璃不是「把卡片變半透明」就成立，**背後要有東西**。這幾頁原本是整片白底，
      卡片再透也只是透出白色。所以先把內容區的底換成首頁三步驟那一區的淡色光暈（同一組值），
      卡片才有東西可以透。
   ⚠️ 底色很淡（最濃的一團 .38，疊在 #FCFBFF 上）：這幾頁是功能性頁面，
      底色只是給玻璃用的材質，不能搶內容。 */
/* ═══ 115.09.15 二修 Sara：「聯絡我們／下載／我的應用程式都不要有背景」═══
   前一版給內容區鋪了淡紫淡藍的光暈，是為了讓卡片的毛玻璃有東西可透。
   底色拿掉之後**玻璃就沒有意義了**（背後是純白，模糊出來還是白），所以卡片一起改回實體卡：
   近白底、一條中性細框、很輕的落影。留著 backdrop-filter 只會多一層沒作用的合成層。
   ⚠️ 這也是比較接近金澧那套語彙的做法：他在 MCP 頁只用**一種**刻意的材質（深色玻璃＋兩顆橘光團），
      其餘一律素面。功能性頁面鋪裝飾性漸層，正是他會拿掉的東西。 */
/* 桌機的卡片是 .form-body；≤1024 時外框改掛在 #contact-form 上（正式站的做法），兩個都要給 */
:where(.bt-app) #contact-wrapper #contact-form .form-body{
  background:linear-gradient(155deg, #FFFFFF 0%, #FCFCFD 100%) !important;
  border:1px solid #E8E8EC !important;
  box-shadow:0 1px 2px rgba(33,29,58,.04), 0 10px 24px rgba(33,29,58,.06) !important;
}
@media screen and (max-width:1024px){ :where(.bt-app) #contact-wrapper #contact-form{
  background:linear-gradient(155deg, #FFFFFF 0%, #FCFCFD 100%) !important;
  border:1px solid #E8E8EC !important;
  box-shadow:0 1px 2px rgba(33,29,58,.04), 0 10px 24px rgba(33,29,58,.06) !important;
} }
/* 115.09.17 Sara（手機截圖）：「圓角的線條沒有很順，下面卡了一塊陰影」。
   上面那條桌機規則用 !important 給 .form-body 框線＋陰影，但沒有限定斷點——
   ≤1024 外框已經改掛在 #contact-form 上，.form-body 卻還帶著自己那組，變成兩層卡片疊在一起：
   ‧ 內層是直角，四個角被外層 15px 圓角＋overflow:hidden 切掉一半 → 角落的線看起來斷斷的
   ‧ 內層下緣只到提示文字，框線＋落影就停在「送出」上方 → 那一塊陰影
   ⇒ ≤1024 時內層的框、影、底全部拿掉，只留外層一張卡。 */
@media screen and (max-width:1024px){ :where(.bt-app) #contact-wrapper #contact-form .form-body{
  background:none !important; border:0 !important; box-shadow:none !important;
} }

/* 正式站的 header 在文件流裡（桌機 100px、≤1024 為 80px），外殼的 header 是 fixed，內容區要自己讓出這段 */
.bt-app:not(.bt-app-layer){padding-top:100px;}
@media (max-width:1024px){.bt-app:not(.bt-app-layer){padding-top:80px;}}
/* 115.09.15 Sara：頁標題與表單之間的空白太大（實測 80px，加上頁標題區自己的下緣，看起來像少放了一段內容）。
   ⚠️ 只收上緣不動下緣：下緣那段是表單與 footer 的呼吸，收掉會變成表單貼著頁尾。
   ⚠️ 用 :where(.bt-app) 前綴維持與其他複刻頁一致的覆寫方式。 */
:where(.bt-app) #main-inner > .main-content-wrapper .inner{ padding-top:36px; }

/* ===== 站台補充（舊版 markup 的 inline style 移到這裡）===== */
:where(.bt-app) #contact-form .bottom-row{ padding-top:30px; }
:where(.bt-app) #contact-form select[name="category"]{ text-align:left; background-color:#FFFFFF; }
:where(.bt-app) #result-message{ display:none; }