@charset "utf-8";
/* ============================================
   威漢.慈祐跨境雲商物流 - 前台主樣式
   現代科技風 UI v2.0
   © 2026 威漢.慈祐跨境雲商物流 版權所有
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap');

/* ===== CSS 變數 ===== */
:root {
    --primary: #0d47a1;
    --primary-dark: #002171;
    --primary-light: #5472d3;
    --accent: #00b8d4;
    --accent-glow: rgba(0, 184, 212, 0.3);
    --accent2: #6c5ce7;
    --success: #00c853;
    --warning: #ff9100;
    --danger: #e51d27;
    --bg-dark: #0a1628;
    --bg-medium: #0f2137;
    --bg-light: #f5f7fa;
    --text-primary: #1a1a2e;
    --text-secondary: #5a6a7e;
    --text-muted: #8899aa;
    --white: #ffffff;
    --border: rgba(0, 0, 0, 0.08);
    --border-light: rgba(255, 255, 255, 0.1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 20px rgba(0, 184, 212, 0.2);
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --gradient-hero: linear-gradient(135deg, #0a1628 0%, #0d47a1 50%, #002171 100%);
    --gradient-accent: linear-gradient(135deg, #00b8d4 0%, #6c5ce7 100%);
    --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.95) 100%);
}

/* ===== 全域基礎 ===== */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans TC', 'Microsoft YaHei', 'PingFang TC', 'Segoe UI', sans-serif;
    font-size: 16px;
    color: var(--text-primary);
    background: var(--bg-light);
    overflow-x: hidden;
    line-height: 1.6;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    text-decoration: none !important;
    color: var(--accent);
}

li {
    list-style: none;
}

img {
    border: 0;
    max-width: 100%;
}

/* ===== 工具類 ===== */
.font-color-theme { color: var(--accent); }
.margin-top-5 { margin-top: 5px; }
.margin-bottom-5 { margin-bottom: 5px; }
.margin-right-5 { margin-right: 5px; }
.margin-left-5 { margin-left: 5px; }
.margin-top-10 { margin-top: 10px; }
.margin-bottom-10 { margin-bottom: 10px; }
.margin-right-10 { margin-right: 10px; }
.margin-left-10 { margin-left: 10px; }
.margin-right-20 { margin-right: 20px; }
.margin-left-20 { margin-left: 20px; }
.margin-top-20 { margin-top: 20px; }
.margin-bottom-20 { margin-bottom: 20px; }
.margin-0-20 { margin: 0 20px; }
.margin-left-15 { margin-left: 15px; }
.padding-5 { padding: 5px; }
.padding-10 { padding: 10px; }
.padding-20 { padding: 20px; }
.padding-10-20 { padding: 10px 20px; }
.padding-20-10 { padding: 20px 10px; }
.padding-0-20 { padding: 0px 20px; }
.padding-20-0 { padding: 20px 0px; }
.padding-0-10 { padding: 0px 10px; }
.padding-10-0 { padding: 10px 0px; }
.padding-5-10 { padding: 5px 10px; }
.padding-0-5 { padding: 0px 5px; }
.padding-5-0 { padding: 5px 0px; }
.padding-20-40 { padding: 20px 40px; }
.font-size-12 { font-size: 12px; }
.font-size-13 { font-size: 13px; }
.font-size-14 { font-size: 14px; }
.font-size-16 { font-size: 16px; }
.font-size-20 { font-size: 20px; }
.font-size-24 { font-size: 24px; }
.box-border-side { border: 2px solid var(--accent); border-radius: var(--radius); }
.all-width { width: 100%; }
.height-30 { height: 30px; }
.height-35 { height: 35px; }
.line-height-30 { line-height: 30px; }

/* ===== 右側浮動 ===== */
.fixed-r {
    position: absolute;
    right: 100px;
    top: 300px;
    z-index: 999;
}

.html {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ===== 頂部導航 ===== */
.head-nav {
    background: var(--white);
    box-shadow: var(--shadow);
    position: relative;
    z-index: 100;
}

.head-top {
    background: var(--gradient-hero);
    height: 38px;
    position: relative;
    overflow: hidden;
}

.head-top::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--gradient-accent);
    opacity: 0.5;
}

.headtop-1 {
    margin-top: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    background: url("../images/star.png") left center no-repeat;
    transition: var(--transition);
}

.headtop-1 a span {
    color: rgba(255, 255, 255, 0.8);
    margin-left: 35px;
    transition: var(--transition);
}

.headtop-1 a:hover span {
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent-glow);
}

.headtop-2 {
    margin-top: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    background: url("../images/clock.png") left center no-repeat;
    padding-left: 20px;
    display: inline-block;
}

.head-rv {
    background: var(--gradient-accent);
    font-size: 13px;
    color: var(--white);
    height: 38px;
    border-radius: 0 0 0 var(--radius-lg);
    box-shadow: 0 2px 15px var(--accent-glow);
}

.right-l {
    margin-top: 10px;
    background: url("../images/login.png") left center no-repeat;
    margin-left: 20px;
    padding-left: 26px;
}

.right-l a {
    color: var(--white);
    font-weight: 500;
    transition: var(--transition);
}

.right-l a:hover {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.right-r {
    margin-top: 10px;
    margin-right: 20px;
    margin-left: 80px;
}

.right-a {
    padding-left: 100px;
    margin-top: 18px;
}

/* ===== Bootstrap 導航覆蓋 ===== */
.nav-fluid {
    padding-left: 0;
    padding-right: 0;
}

.navbar-default.head-n {
    background-color: var(--white);
    border-color: transparent;
    padding: 12px 0;
    transition: var(--transition);
}

.navbar-default .navbar-nav > li {
    padding: 0 20px;
}

.navbar-default .navbar-nav > li > a {
    border-bottom: 3px solid transparent;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 500;
    transition: var(--transition);
    position: relative;
}

.navbar-default .navbar-nav > li > a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--gradient-accent);
    transition: width 0.3s ease;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background-color: transparent;
}

.navbar-default .navbar-nav > li > a:hover::after,
.navbar-default .navbar-nav > .active > a::after {
    width: 60%;
}

.navbar-brand {
    padding: 0;
}

.navbar-brand img {
    max-height: 45px;
    transition: var(--transition);
}

.navbar {
    margin-bottom: 0;
}

.navbar-nav > li > a {
    padding-bottom: 10px;
    line-height: 28px;
}

.nav > li > a {
    padding: 20px 0;
}

.navbar-collapse .coucou-nav {
    margin-left: 60px;
    margin-top: 4px;
}

/* ===== 輪播區塊 ===== */
.carousel-control.left,
.carousel-control.right {
    background-image: none;
}

.bar-left em {
    display: block;
    width: 50px;
    height: 100px;
    background: url(../images/arrow.png) 0px 0px no-repeat;
    margin: 0 auto;
    margin-top: -50px;
    top: 50%;
    position: absolute;
    left: 50px;
    transition: var(--transition);
}

.bar-right em {
    display: block;
    width: 50px;
    height: 100px;
    background: url(../images/arrow.png) -50px 0px no-repeat;
    margin: 0 auto;
    margin-top: -50px;
    top: 50%;
    position: absolute;
    right: 50px;
    transition: var(--transition);
}

.bar-left em:hover {
    background-position: 0 -100px;
    filter: drop-shadow(0 0 8px var(--accent-glow));
}

.bar-right em:hover {
    background-position: -50px -100px;
    filter: drop-shadow(0 0 8px var(--accent-glow));
}

.carousel-indicators li {
    border: 3px solid var(--white);
    cursor: pointer;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: transparent;
    transition: var(--transition);
}

.carousel-indicators {
    bottom: -5px;
}

.carousel-indicators .active {
    width: 20px;
    height: 20px;
    border-color: var(--accent);
    background-color: rgba(0, 184, 212, 0.3);
    box-shadow: var(--shadow-glow);
}

/* ===== 運單跟踪 ===== */
.clo-tt {
    height: 56px;
    line-height: normal;
    font-size: 17px;
}

.search-b {
    border-left: none;
    border-radius: 0;
    background: var(--gradient-accent);
    padding: 16px 20px;
    color: var(--white);
    transition: var(--transition);
    cursor: pointer;
}

.search-b:hover {
    box-shadow: var(--shadow-glow);
}

.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group {
    margin-left: 0;
}

.form-control.clo-tt {
    border-right: none;
    -webkit-box-shadow: none;
    border-radius: 0;
    font-size: 16px;
}

.form-control.clo-tt:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.follow-c {
    margin: 30px 0;
}

.search-text-1 {
    display: inline-block;
    position: absolute;
    height: 56px;
    line-height: 56px;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.search-text-2 {
    float: none;
    display: inline-block;
    margin-left: 90px;
    height: 56px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.search-text-2:focus-within {
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

/* ===== 威漢轉運區塊 ===== */
.transshipment {
    background: var(--gradient-hero);
    margin-top: 20px;
    color: var(--accent);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.transshipment::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(0, 184, 212, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 184, 212, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.title-h1 {
    font-size: 52px;
    margin-top: 30px;
    font-weight: 900;
    background: linear-gradient(135deg, #ffffff 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.title-h2 {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
    padding-top: 15px;
}

.content-t1 {
    padding: 0;
    margin: 0;
}

.content-t1 .col-md-4 {
    padding: 0 20px;
    margin-top: 60px;
    font-size: 18px;
    font-weight: bold;
    color: var(--white);
}

.content-t1 .col-md-4.left-first {
    padding-right: 40px;
    padding-left: 0;
}

.content-t1 .col-md-4.left-last {
    padding-right: 0px;
    padding-left: 40px;
}

.content-col {
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: block;
    border-radius: var(--radius-lg);
    transition: var(--transition);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.03);
}

.content-col:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.content-nn1, .content-nn2, .content-nn3,
.content-nn4, .content-nn5, .content-nn6 {
    padding: 60px 0;
    transition: var(--transition);
}

.content-nn1 { background: url("../images/dtys1_1.png") left 43px center no-repeat; }
.content-nn2 { background: url("../images/dtys2_1.png") left 43px center no-repeat; }
.content-nn3 { background: url("../images/dtys3_1.png") left 43px center no-repeat; }
.content-nn4 { background: url("../images/dtys4_1.png") left 43px center no-repeat; }
.content-nn5 { background: url("../images/dtys5_1.png") left 43px center no-repeat; }
.content-nn6 { background: url("../images/dtys6_1.png") left 43px center no-repeat; }

.content-nn1:hover { background: var(--gradient-accent) url("../images/dtys1_2.png") left 43px center no-repeat; color: var(--white); border-radius: var(--radius-lg); }
.content-nn2:hover { background: var(--gradient-accent) url("../images/dtys2_2.png") left 43px center no-repeat; color: var(--white); border-radius: var(--radius-lg); }
.content-nn3:hover { background: var(--gradient-accent) url("../images/dtys3_2.png") left 43px center no-repeat; color: var(--white); border-radius: var(--radius-lg); }
.content-nn4:hover { background: var(--gradient-accent) url("../images/dtys4_2.png") left 43px center no-repeat; color: var(--white); border-radius: var(--radius-lg); }
.content-nn5:hover { background: var(--gradient-accent) url("../images/dtys5_2.png") left 43px center no-repeat; color: var(--white); border-radius: var(--radius-lg); }
.content-nn6:hover { background: var(--gradient-accent) url("../images/dtys6_2.png") left 43px center no-repeat; color: var(--white); border-radius: var(--radius-lg); }

.content-nt {
    margin-left: 45px;
    display: inline-block;
}

.bottom-bo {
    margin-top: 50px;
}

/* ===== 公告/新聞 ===== */
.announcement {
    background: var(--white);
    padding-bottom: 80px;
    position: relative;
}

.announcement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-accent);
}

.yuetu-m {
    padding-top: 100px;
}

.announ-tt {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-primary);
}

.announ-t2 {
    font-size: 18px;
    padding-top: 8px;
    color: var(--text-secondary);
}

.bottom-l {
    height: 30px;
    width: 60px;
    border-bottom: 3px solid var(--accent);
    padding-top: 10px;
    margin-left: 0;
    transition: var(--transition);
}

.announ-ul {
    margin-top: 60px;
}

.announ-ul li {
    margin: 12px 0;
    transition: var(--transition);
}

.announ-ul li a {
    font-size: 14px;
    color: var(--primary);
    transition: var(--transition);
}

.announ-ul li a:hover {
    color: var(--accent);
    padding-left: 5px;
}

.announ-ul li a span {
    color: var(--text-secondary);
    margin-right: 5px;
}

.announ-ul li .announ-lir {
    margin-right: 200px;
}

/* ===== 獎勵區塊 ===== */
.reward {
    background: var(--gradient-accent);
    padding-top: 20px;
    padding-bottom: 20px;
    color: var(--white);
    font-weight: bold;
    position: relative;
    overflow: hidden;
}

.title-table1 {
    font-size: 18px;
    padding: 20px 0;
    text-align: center;
}

.reward-table {
    font-size: 14px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.reward-table tr,
.reward-table th {
    color: var(--white);
    text-align: center;
}

.tr-one {
    background: var(--primary-dark);
    font-weight: bold;
}

.tr-two {
    background: #00897b;
}

.tr-three {
    background: #e65100;
}

.reward-table > tbody > tr > td,
.reward-table > tbody > tr > th,
.reward-table > tfoot > tr > td,
.reward-table > tfoot > tr > th,
.reward-table > thead > tr > td,
.reward-table > thead > tr > th {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.reward-table {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.title-table2 {
    font-size: 18px;
    padding: 20px 0;
    text-align: center;
    margin-top: 20px;
}

/* ===== 轉運流程 ===== */
.process {
    padding-top: 70px;
    background: var(--bg-light);
}

.process-h {
    margin-bottom: 10px;
}

.process-list {
    padding: 90px 0;
    background: var(--primary);
    position: relative;
    overflow: hidden;
}

.process-list::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.show-bs {
    width: 100%;
}

.process-table tr td img {
    width: 100%;
    padding: 5px;
}

.process-table {
    text-align: center;
    color: white;
    font-size: 16px;
    vertical-align: middle !important;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.process-table > tbody > tr > td,
.process-table > tbody > tr > th,
.process-table > tfoot > tr > td,
.process-table > tfoot > tr > th,
.process-table > thead > tr > td,
.process-table > thead > tr > th {
    border: none;
}

/* ===== LOGO 滾動 ===== */
.logo-scroll {
    padding: 50px 0;
    background-color: var(--white);
}

.test {
    overflow: hidden;
    float: none;
    text-align: center;
    width: 1005px;
}

.test .item a img {
    padding: 0 15px;
    display: inline-block;
    height: 45px;
    filter: grayscale(30%);
    transition: var(--transition);
}

.test .item a img:hover {
    filter: grayscale(0%);
}

.left-bar,
.right-bar {
    width: auto;
    height: 65px;
    background-color: var(--white);
}

.left-bar img,
.right-bar img {
    background-color: var(--white);
}

.next-p {
    height: 65px;
}

.item-md2 {
    padding: 0;
}

.item-image {
    padding: 0 10px;
}

/* ===== 底部區塊 ===== */
.foot-d1 {
    background: var(--bg-dark);
    color: rgba(255, 255, 255, 0.7);
    padding: 35px 0;
    position: relative;
    overflow: hidden;
}

.foot-d1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gradient-accent);
}

.foot-d1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: radial-gradient(ellipse at 50% 100%, rgba(0, 184, 212, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.pt-1 {
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
}

.pt-2 {
    width: 40px;
    border-bottom: 2px solid var(--accent);
    margin: 10px 0;
}

.pt-3 {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.pt-3 a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.pt-3 a:hover {
    color: var(--accent);
}

.phone-r {
    background: url("../images/teltip.jpg") left center no-repeat;
    padding-left: 60px;
    margin-top: 60px;
}

.phone-r p {
    margin-bottom: 0;
    font-size: 19px;
    color: rgba(255, 255, 255, 0.8);
}

.erweima img {
    width: 100px;
    margin-top: 30px;
    margin-left: 30px;
    border-radius: var(--radius);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.line-r {
    margin-right: 40px;
    margin-top: 20px;
    height: 165px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.foot-d2 {
    background: #060d18;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.select-a {
    padding: 15px 0;
    font-size: 14px;
}

.select-a a {
    padding: 0 15px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
}

.select-a a:first-child {
    padding-left: 0;
}

.select-a a:last-child {
    border-right: none;
}

.select-a a:hover {
    color: var(--accent);
}

.right-bb {
    padding: 15px 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

.right-bb span {
    color: var(--accent);
}

/* ===== 左側浮動客服 ===== */
.left-float {
    position: fixed;
    left: 0px;
    top: 300px;
    z-index: 999999;
    line-height: 0px;
    display: block;
}

.left-ul li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 10px;
    background-color: rgba(255, 255, 255, 0.95);
    transition: var(--transition);
    border-radius: 0;
}

.left-ul li:last-child {
    border-bottom: none;
}

.left-image {
    display: block;
    padding: 15px 0;
}

.left-ul li:hover {
    background-color: var(--accent);
}

.left-ul li:hover .name-b {
    color: var(--white);
}

.name-b {
    color: var(--text-primary);
    font-weight: bold;
    font-size: 13px;
    margin: 10px 20px;
}

.left-1 {
    position: absolute;
    left: 89px;
    top: -20px;
    display: none;
}

.left-2 {
    position: absolute;
    left: 90px;
    top: 109px;
    display: none;
    background: var(--gradient-accent);
    height: 219px;
    width: 136px;
    border: 0px solid rgb(255, 0, 0);
    padding-left: 15px;
    padding-top: 20px;
    line-height: 26px;
    text-align: left;
    width: 136px;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    box-shadow: var(--shadow-lg);
}

.left-3 {
    position: absolute;
    left: 89px;
    top: 226px;
    display: none;
    background: var(--gradient-accent);
    line-height: 15px;
    text-align: left;
    font-size: 13px;
    color: var(--white);
    padding: 20px 10px 10px 25px;
    width: 136px;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    box-shadow: var(--shadow-lg);
}

.left-ul li:hover .left-1,
.left-ul li:hover .left-2,
.left-ul li:hover .left-3,
.left-ul li:focus .left-1,
.left-ul li:focus .left-2,
.left-ul li:focus .left-3 {
    display: block;
}

.left-1 img {
    width: 151px;
    height: 239px;
    max-width: 151px;
}

.service-qq li {
    border-bottom: none;
    padding-bottom: 10px;
    background-color: transparent;
}

.service-qq li a img {
    border-radius: var(--radius-sm);
    padding: 0;
    width: 20px;
    float: left;
    margin: 0 10px;
}

.service-qq li a {
    font-size: 16px;
    display: inline-block;
    color: var(--white);
}

/* ===== 價格與服務 ===== */
.html {
    background-color: var(--bg-light);
}

figure img {
    width: 100%;
}

.calculator {
    display: block;
}

.calculator-l1 {
    padding-left: 20px;
    background: url("../images/cal.png") left 20px center no-repeat;
    padding-left: 50px;
    font-size: 26px;
    font-weight: 700;
}

.calculator-c {
    background-color: var(--white);
    font-size: 20px;
    padding-top: 25px;
    padding-bottom: 25px;
    border: 2px solid var(--accent);
    margin-top: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.first-con,
.second-con,
.three-con {
    display: inline-block;
}

.second-con {
    font-size: 18px;
    margin-left: 20px;
    color: var(--text-primary);
    font-size: 20px;
}

.form-control {
    -webkit-border-radius: var(--radius) !important;
    -moz-border-radius: var(--radius) !important;
    -khtml-border-radius: var(--radius) !important;
    border-radius: var(--radius) !important;
    transition: var(--transition);
}

.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.select-way1 {
    font-size: 18px;
    margin-top: 4px;
    margin-left: 20px;
    color: var(--text-primary);
    height: 34px;
    border-radius: var(--radius) !important;
    padding: 0;
    line-height: 34px;
    -webkit-border-radius: var(--radius);
    -moz-border-radius: var(--radius);
    -khtml-border-radius: var(--radius);
}

.title-select {
    line-height: 34px;
}

.select-way2 {
    font-size: 18px;
    padding-left: 10px;
    color: var(--text-primary);
    height: 34px;
    width: 100px;
    border-radius: var(--radius) !important;
    padding: 0;
    line-height: 34px;
}

.price-list {
    background-color: var(--white);
}

.gusuan-btn {
    font-size: 18px;
    border: 0;
    border-radius: var(--radius);
    background: var(--gradient-accent);
    color: var(--white);
    padding: 6px 24px;
    margin-left: 5px;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 600;
}

.gusuan-btn:hover {
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
}

.calculator-r1 {
    padding-left: 20px;
    font-weight: bold;
    font-size: 25px;
    color: var(--text-primary);
}

.calculator-l3 label {
    font-size: 20px;
    line-height: 34px;
    margin: 0;
    font-weight: bold;
    margin-left: 10px;
}

.form-text {
    border-radius: var(--radius);
    font-size: 20px;
}

.price-claims {
    margin-top: 40px;
    color: var(--text-primary);
}

.md-6 {
    padding: 0;
}

.md-6 a {
    font-size: 30px;
    background-color: var(--white);
    color: var(--accent);
    padding: 30px;
    text-align: center;
    width: 100%;
    display: inline-block;
    border-radius: var(--radius-lg);
    transition: var(--transition);
    font-weight: 700;
}

.md-6 a:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.show-b1 a {
    background: var(--gradient-accent);
    color: var(--white);
}

.line-bg {
    height: 10px;
}

.line-bg {
    background: url("../images/downarrowred.png") center no-repeat;
    display: none;
}

.show-b1 .line-bg {
    display: block;
}

.price-con {
    margin-top: 60px;
}

.title-pr1 {
    font-size: 30px;
    background: url("../images/priceicon.png") left center no-repeat;
    padding-left: 40px;
    margin-bottom: 30px;
    font-weight: 700;
}

.price-c1 {
    background-color: var(--white);
    text-align: center;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.title-tab1 {
    font-size: 20px;
    color: var(--danger);
    font-weight: bold;
    padding: 60px 0 30px 0;
}

.first-btd1 {
    font-size: 16px;
    background: var(--primary);
    color: var(--white);
    text-align: left;
}

.price-table1 > thead > tr > td,
.price-table1 > thead > tr > th {
    border-bottom-width: 0;
}

.first-btd1 span,
.first-btd2 span {
    font-size: 20px;
    font-weight: bold;
}

.price-table1 {
    border: 0;
    margin-bottom: 0;
    font-size: 14px;
}

.first-btd2 {
    font-size: 16px;
    background: #e65100;
    color: var(--white);
    text-align: left;
}

.last-td a,
.last-td span {
    color: var(--danger);
    font-weight: bold;
    font-size: 16px;
}

.graybg-1 {
    background-color: #f8f9fb;
}

.title-table3 {
    font-size: 20px;
    font-weight: bold;
    padding: 40px 0 10px 0;
}

.content-tt1 {
    padding-top: 50px;
    font-size: 14px;
    color: var(--text-primary);
}

.title-pr2 {
    font-size: 20px;
    font-weight: bold;
}

.content-tc1 {
    padding-top: 10px;
    line-height: 28px;
}

.content-tc2 p:first-child {
    margin-top: 30px;
}

.title-prh {
    margin-top: 60px;
}

.content-tc2 p:first-child,
.content-tc2 span {
    color: var(--danger);
}

.content-cn {
    padding: 40px;
    font-size: 14px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

/* ===== 關於我們 ===== */
.md-2 {
    padding: 0;
}

.abount {
    margin-top: 10px;
}

.about-ul {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.md-10 {
    padding-left: 15px;
    padding-right: 0;
}

.about-ul {
    margin-bottom: 0;
}

.about-ul li {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: var(--transition);
}

.about-ul li:first-child {
    background: var(--gradient-accent);
    font-size: 20px;
    color: var(--white);
    font-weight: 700;
}

.about-ul > .active > a,
.about-ul li:hover a {
    color: var(--accent);
}

.about-ul li:hover {
    background: rgba(0, 184, 212, 0.04);
}

.md10-r {
    padding: 0 70px 120px 70px;
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.title-ab1 {
    text-align: center;
    color: var(--accent);
    font-size: 32px;
    padding-top: 42px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.06);
    font-weight: 700;
}

.title-ab2 {
    text-align: center;
    padding-top: 40px;
    padding-bottom: 20px;
}

.title-cc1 {
    color: var(--text-primary);
    font-size: 24px;
    font-weight: bold;
    line-height: 42px;
    margin-top: 40px;
}

.title-cc2 {
    font-weight: bold;
    font-size: 18px;
    padding-top: 80px;
}

.title-cc2 p {
    margin: 20px 0;
    line-height: 42px;
}

/* ===== 新聞/詳細頁 ===== */
.newsvideo-right-title {
    padding-right: 20px;
    height: 31px;
    margin-bottom: 16px;
    position: relative;
    width: 100%;
    text-align: left;
    padding-bottom: 20px;
}

.newsvideo-right-tt {
    height: 31px;
    text-align: center;
    background: var(--white) url(../images/tt-left.png) left center no-repeat;
    display: table;
    padding-right: 20px;
    display: inline-block;
}

.newsvideo-right-left1 {
    font-size: 14px;
    height: 31px;
    line-height: 31px;
    margin-left: 15px;
}

.newsvideo-right-tt .newsvideo-right-left1 span {
    color: var(--accent);
}

.pagination {
    margin-top: 50px;
}

.pagination > li > a {
    margin: 0 5px;
    border-radius: var(--radius) !important;
    color: var(--text-primary);
    font-size: 13px;
    transition: var(--transition);
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > li > a:hover {
    background: var(--gradient-accent);
    color: var(--white);
    border-color: transparent;
}

.newsvideo-r2 {
    height: 31px;
    line-height: 31px;
    padding: 0 10px;
    background: var(--accent);
    right: 0;
    position: absolute;
    font-size: 14px;
    color: var(--white);
    border-radius: var(--radius);
}

.newsvideo-r2 span {
    margin-left: 5px;
}

.detail-t {
    padding: 10px;
    display: block;
    position: relative;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.detail-t1 {
    text-align: center;
    margin: 0 50px;
    font-size: 20px;
    padding: 15px 0;
    border-bottom: 2px dashed rgba(0, 0, 0, 0.08);
    font-weight: 700;
}

.detail-c {
    padding: 0 15px;
}

.detail-t2 {
    font-size: 12px;
    padding: 10px 0;
    margin-bottom: 10px;
}

.detail-t2 span {
    padding: 0 5px;
    color: var(--text-muted);
}

.detail-t3 {
    font-size: 14px;
    line-height: 2;
}

.detail-t3 p {
    text-indent: 24px;
    color: var(--text-secondary);
    line-height: 24px !important;
}

.detail-t4 {
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.detail-t4 img {
    padding-bottom: 10px;
}

.detail-i2 {
    margin-bottom: 10px;
}

.select-tt {
    display: inline-block;
    margin-top: 10px;
}

.select-tt a {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
    padding-top: 5px;
}

.share-r1,
.share-r2 {
    margin-top: 7px;
    height: 44px;
    line-height: 44px;
    text-align: center !important;
}

.share-r2 {
    font-size: 12px;
    color: var(--text-muted);
    margin-right: 10px;
}

.share-bt1 {
    padding-top: 7px;
}

/* ===== 新聞列表 ===== */
.news.news-1 {
    font-size: 14px;
    color: var(--text-secondary);
}

.date.date-m {
    font-size: 14px;
    color: var(--text-muted);
}

.right-new {
    padding: 20px;
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.news {
    padding: 0 5px;
}

.news li a {
    display: block;
    border-bottom: dashed 1px rgba(0, 0, 0, 0.08);
    padding-top: 15px;
    padding-bottom: 15px;
}

.title-new {
    display: inline-block;
}

/* ===== 側邊欄 ===== */
.nav-left {
    background: var(--white);
    padding: 15px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.nav-left h3 {
    padding-bottom: 10px;
    font-size: 22px;
    color: var(--text-primary);
    font-weight: 700;
}

.left-center {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.left-centert ul {
    padding: 15px;
}

.left-center ul li {
    text-align: center;
    border-bottom: dotted 1px rgba(0, 0, 0, 0.08);
    height: 55px;
    font-size: 20px;
    line-height: 55px;
    list-style: none;
}

.left-center ul li a {
    height: 55px;
    color: var(--text-primary);
    line-height: 55px;
}

.left-center ul li a:hover {
    color: var(--accent);
}

.left-center ul li span {
    padding-right: 15px;
}

.left .left-center .left-img {
    text-align: center;
}

.news-tt {
    background: var(--white);
    border: solid 1px rgba(0, 0, 0, 0.08);
    padding: 20px;
    text-align: center;
    margin-top: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.news-tt p {
    font-size: 24px;
    color: var(--text-primary);
    font-weight: 700;
}

.news-tt .news-time {
    font-size: 12px;
    color: var(--text-muted);
}

.news-nr {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 42px;
    padding: 15px;
}

.news-nr table {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-collapse: collapse;
    display: table;
}

.news-nr table td {
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0px 5px;
}

.news-nr table th {
    border: 1px solid rgba(0, 0, 0, 0.08);
    background-color: #f7f7f7;
    padding: 0px 5px;
}

.news {
    padding: 20px;
}

.news .title {
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    height: 30px;
    line-height: 25px;
    position: relative;
}

.news .dd {
    border-bottom: solid 4px var(--accent);
    width: 90px;
    position: absolute;
    bottom: -2px;
    border-radius: 2px;
}

.breadcrumb {
    height: 35px;
    background: transparent;
}

.breadcrumb > li {
    display: inline-block;
}

.breadcrumb > li .a {
    height: 30px;
}

.breadcrumb li.active {
    color: var(--accent);
}

.font18 {
    font-size: 22px;
    color: var(--text-primary);
    font-weight: 700;
}

.login-link {
    margin: 0 auto;
    display: table;
}

/* ===== 響應式 ===== */
@media screen and (max-width: 1199px) {
    .container { width: 970px; }
    .navbar-collapse .coucou-nav { margin-left: 20px; }
    .navbar-default .navbar-nav > li { padding: 0 11px; }
    .select-way1, .select-way2 { width: 140px; }
    .three-con, .calculator-r1 { margin-top: 20px; }
    .test { width: 850px; }
}

@media screen and (max-width: 991px) {
    .container { width: 750px; }
    .right-r { margin-left: 25px; }
    .logo-image { height: 50px; }
    .navbar-collapse .coucou-nav { margin-top: 0; }
    .right-a { padding-left: 10px; margin-top: 5px; }
    .nav > li > a { padding: 10px 0; }
    .content-t1 .col-md-4.left-first,
    .content-t1 .col-md-4.left-last { padding: 0 20px; }
    .test .item a img { margin: 10px 0; }
    .select-a { width: 100%; text-align: center; }
    .right-bb { width: 100%; text-align: center; padding-top: 0; }
    .phone-r p { font-size: 18px; }
    .md-6 { width: 50%; float: left; }
    .calculator-r1 { float: left !important; width: 100%; }
    .abount { margin-top: 0; }
    .md-2, .md-10 { padding: 0 15px; margin-top: 20px; }
    .detail-t4 img { width: 100%; }
    .select-tt { float: left !important; }
    .test { width: 100%; }
}

@media screen and (max-width: 767px) {
    .container { width: 100%; }
    .headtop-1, .headtop-2 { display: none; }
    .head-con { padding-left: 0; padding-right: 0; }
    .right-a { display: none; }
    .coucou-nav { width: 100%; margin: 0; }
    .head-rv { width: 100%; border-radius: 0; }
    .bar-right em { right: 0; background: none; }
    .bar-left em { left: 0; background: none; }
    .carousel-indicators li, .carousel-indicators .active { width: 10px; height: 10px; }
    .follow-c { margin: 15px 0; }
    .search-text-2 { height: 35px; }
    .content-t1 .col-md-4 { margin-top: 30px; }
    .yuetu-m { padding-top: 30px; }
    .announ-ul { margin-top: 30px; }
    .announ-ul li .announ-lir { margin-right: 0; }
    .announcement { padding-bottom: 30px; }
    .bottom-l { height: 8px; padding-top: 0; }
    .reward { padding-top: 0px; padding-bottom: 0; }
    .process { padding-top: 10px; }
    .process-list { padding: 15px 0; }
    .process-table { font-size: 10px; }
    .logo-scroll { padding: 20px 0; }
    .pt-1, .pt-3 { width: 100%; text-align: center; }
    .pt-2 { display: none; }
    .none-folat { float: none !important; }
    .erweima { float: none; width: 100%; text-align: center; }
    .erweima img { margin: 0; }
    .phone-r { float: none !important; text-align: center; margin-top: 20px; display: inline-block; }
    .line-r { display: none; }
    .con-center { text-align: center; }
    .title-prh { margin-top: 20px; }
    .title-h1 { font-size: 32px; }
    .content-nn1, .content-nn2, .content-nn3,
    .content-nn4, .content-nn5, .content-nn6 { padding: 35px 0; }
    .phone-r { background-size: 15%; padding-left: 40px; }
    .phone-r p { font-size: 15px; text-align: left; }
    .calculator-l1 { background: url("../images/cal.png") left 10px center no-repeat; padding-left: 40px; font-size: 20px; }
    .second-con { width: 100%; margin-top: 20px; margin-left: 10px; }
    .gusuan-btn { float: left; }
    .text-lc, .gusuan-btn { margin-left: 10px; }
    .gusuan-btn { padding: 10px 30px; margin-top: 10px; }
    .calculator-r1 { padding-left: 10px; }
    .price-con { margin-top: 30px; }
    .price-claims { margin-top: 0px; }
    .md-6 { width: 100%; float: left; margin-top: 20px; }
    .title-tab1 { padding: 20px 0; }
    .title-pr1 { margin-bottom: 20px; }
    .select-way1, .select-way2 { height: 40px; margin-top: 0; font-size: 15px; height: 30px; padding: 2px 15px; }
    .title-select { line-height: 30px; }
    .calculator-l3 label { font-size: 18px; }
    .second-con, .title-tab1, .first-btd1 span, .first-btd2 span { font-size: 17px; }
    .first-btd1, .first-btd2, .font-con tr, .last-td a, .last-td span { font-size: 14px; }
    .search-text-1 { height: 40px; line-height: 40px; }
    .clo-tt { padding: 0 10px; height: 42px; line-height: 42px; font-size: 14px; }
    .search-b { padding: 10px 12px; }
    .transshipment { margin-top: 5px; }
    .title-h2 { font-size: 15px; }
    .title-ab2 img { width: 100%; }
    .md10-r { padding: 0 10px 20px 10px; }
    .title-cc1 { margin-top: 20px; font-size: 18px; }
    .title-ab1 { padding-top: 20px; }
    .title-ab2 { padding-top: 0; }
    .title-cc1 { margin-top: 0; }
    .title-cc2 { padding-top: 20px; font-size: 16px; }
    .md-6 a { font-size: 25px; }
    .calculator-r1 { font-size: 20px; }
    .title-pr1 { font-size: 25px; }
    .content-tt1 { padding-top: 10px; }
    .content-tc2 p:first-child { margin-top: 10px; }
    .content-cn { padding: 0px; margin-top: 20px; margin-bottom: 20px; }
    .news li a { padding-top: 10px; padding-bottom: 10px; }
    .title-new { width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; }
    .date-m { float: left !important; }
    .none-padding { padding: 0; }
    .pagination, .news-n { display: none; }
    .news.news-1, .date.date-m { font-size: 12px; }
    .newsvideo-right-tt { background: none; }
    .newsvideo-right-left1 { display: none; }
    .newsvideo-r2 { font-size: 12px; }
    .detail-t1 { margin: 0; }
    .detail-t3 { font-size: 12px; }
    .foot-d2 { padding-bottom: 60px; }
    .left-float { top: auto; bottom: 0; width: 100%; }
    .left-float li { float: left; width: 33.333333%; height: 60px; padding-bottom: 0; border-bottom: none; border-right: 1px solid rgba(0, 0, 0, 0.08); position: relative; }
    .service-qq li { float: none !important; height: auto; display: inline-block; border: none; width: auto; margin: 5px 0; }
    .left-image { width: 16%; padding-top: 10px; padding-bottom: 5px; }
    .left-1 { position: absolute; left: -14px; top: -233px; width: 100%; }
    .left-2 { position: absolute; top: -219px; left: -14px; }
    .left-3 { position: absolute; top: -100px; left: -14px; }
    .left-ul { margin-bottom: 0px; }
    .name-b { font-size: 10px; }
}

/* ============================================
   行動裝置全面支援 (Android + iOS)
   ============================================ */

/* iOS Safe Area */
@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    .left-float { padding-bottom: env(safe-area-inset-bottom); }
    .foot-d1, .foot-d2 { padding-bottom: calc(35px + env(safe-area-inset-bottom)); }
}

/* 觸控優化 */
@media (pointer: coarse) {
    a, button, input[type="submit"], input[type="button"],
    .btn, .navbar-toggle, .nav > li > a,
    .social-btn, .social-btn-mini, .carousel-indicators li {
        min-height: 44px;
        min-width: 44px;
    }
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
    input, textarea, [contenteditable] {
        -webkit-user-select: auto;
        user-select: auto;
    }
    .carousel-inner, .test, .login-page, .banner {
        -webkit-overflow-scrolling: touch;
    }
}

/* 平板 (768-1024) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .container { width: 100%; padding: 0 20px; }
    .navbar-default .navbar-nav > li { padding: 0 8px; }
    .navbar-default .navbar-nav > li > a { font-size: 14px; }
    .title-h1 { font-size: 40px; }
    .content-t1 .col-md-4 { margin-top: 40px; }
}

/* 大型手機 (481-767) */
@media screen and (min-width: 481px) and (max-width: 767px) {
    .container { width: 100%; padding: 0 15px; }
    .title-h1 { font-size: 28px; }
    .content-t1 .col-md-4 { width: 50%; float: left; margin-top: 25px; padding: 0 10px; }
    .process-table { font-size: 12px; }
    .item-md2 { width: 33.333%; float: left; }
    .cp-list li { width: 50%; }
    .md-6 a { font-size: 20px; padding: 20px; }
}

/* 小型手機 (<=480) */
@media screen and (max-width: 480px) {
    .container { width: 100%; padding: 0 12px; }
    .navbar-brand img { max-height: 32px; }
    .navbar-default .navbar-nav > li > a { font-size: 14px; padding: 8px 15px; }
    .title-h1 { font-size: 24px; margin-top: 15px; }
    .title-h2 { font-size: 13px; }
    .content-t1 .col-md-4 { width: 100%; margin-top: 20px; padding: 0 5px; }
    .content-col { text-align: center; }
    .content-nn1, .content-nn2, .content-nn3,
    .content-nn4, .content-nn5, .content-nn6 {
        padding: 25px 0;
        background-position: center 10px !important;
        background-size: 28px auto !important;
    }
    .content-nt { margin-left: 0; margin-top: 40px; display: block; text-align: center; font-size: 14px; }
    .announ-tt { font-size: 20px; }
    .announ-ul li .announ-lir { display: none; }
    .yuetu-m { padding-top: 20px; }
    .reward-table { font-size: 12px; }
    .title-table1, .title-table2 { font-size: 15px; }
    .process-list { padding: 20px 0; }
    .process-table { font-size: 10px; }
    .process-table tr td img { width: 80%; }
    .item-md2 { width: 50%; float: left; }
    .carousel-indicators li { width: 8px; height: 8px; }
    .cp-list li { width: 50%; padding: 0 5px; margin-bottom: 15px; }
    .md-6 a { font-size: 18px; padding: 15px; }
    .foot-d2 { padding-bottom: 60px; }
    .left-float { top: auto; bottom: 0; width: 100%; z-index: 9999; }
    .left-float li { float: left; width: 25%; height: 50px; }
    .left-image { padding: 8px 0; width: 20%; }
    .left-image img { width: 24px; }
    .name-b { font-size: 9px; margin: 5px; }
    .left-1, .left-2, .left-3,
    .left-ul li:hover .left-1,
    .left-ul li:hover .left-2,
    .left-ul li:hover .left-3 { display: none !important; }
}

/* 極小螢幕 (<=360) */
@media screen and (max-width: 360px) {
    .title-h1 { font-size: 20px; }
    .container { padding: 0 8px; }
    .process-table { font-size: 8px; }
    .cp-list li { width: 100%; }
    .item-md2 { width: 50%; }
    .navbar-brand img { max-height: 28px; }
}

/* 文字輸入防止縮放 */
@media screen and (max-width: 767px) {
    input, textarea, select, button {
        font-size: 16px !important;
    }
}

/* 橫向模式 */
@media screen and (max-width: 991px) and (orientation: landscape) {
    .login-page { min-height: auto; padding: 15px; }
    .login-row { min-height: auto; }
    .brand-panel, .line-login-panel { min-height: 200px; }
    .banner { height: 300px; }
    .banner .item { height: 300px; }
    .banner .item img { height: 300px !important; }
}

/* 減少動畫偏好 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .shape-1, .shape-2, .shape-3 { animation: none !important; }
}

/* ============================================
   全域對話框 — 暗色科技風
   ============================================ */
.aui_outer { text-align: left; background: transparent !important; }
.aui_border {
    border: none !important;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 8px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,184,212,0.15), 0 0 60px rgba(0,184,212,0.1) !important;
    background: rgba(15,25,50,0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.aui_nw, .aui_n, .aui_ne, .aui_w, .aui_c, .aui_e, .aui_sw, .aui_s, .aui_se { background: transparent !important; }
.aui_title {
    color: #e0e8f0 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 16px 20px 12px !important;
    font-family: 'Noto Sans TC','Microsoft YaHei',sans-serif !important;
}
.aui_close {
    color: rgba(255,255,255,0.4) !important;
    font-size: 20px !important;
    padding: 12px 16px !important;
    transition: color 0.2s;
    text-decoration: none !important;
}
.aui_close:hover { color: #00b8d4 !important; text-decoration: none !important; }
.aui_main {
    color: #c0c8d8 !important;
    font-size: 14px !important;
    padding: 8px 20px 20px !important;
    font-family: 'Noto Sans TC','Microsoft YaHei',sans-serif !important;
    text-align: center !important;
    min-width: 220px !important;
}
.aui_icon { display: none !important; }
.aui_footer {
    padding: 12px 20px 18px !important;
    text-align: center !important;
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    margin: 0 20px !important;
}
.aui_buttons button {
    display: inline-block !important;
    height: 38px !important;
    padding: 0 28px !important;
    border: none !important;
    border-radius: 19px !important;
    background: linear-gradient(135deg, #0d47a1, #1565c0) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'Noto Sans TC','Microsoft YaHei',sans-serif !important;
    cursor: pointer !important;
    letter-spacing: 1px;
    transition: all 0.25s;
    box-shadow: 0 0 16px rgba(13,71,161,0.3);
    margin: 4px 6px;
}
.aui_buttons button:hover {
    box-shadow: 0 0 24px rgba(13,71,161,0.5);
    transform: translateY(-1px);
}
.aui_state_highlight .aui_border {
    box-shadow: 0 8px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(229,29,39,0.3), 0 0 60px rgba(229,29,39,0.1) !important;
}
.aui_state_highlight .aui_buttons button {
    background: linear-gradient(135deg, #c62828, #e53935) !important;
    box-shadow: 0 0 16px rgba(229,29,39,0.3);
}
.aui_state_succeed .aui_buttons button {
    background: linear-gradient(135deg, #06C755, #05a849) !important;
    box-shadow: 0 0 16px rgba(6,199,85,0.3);
}
.aui_lock { background: rgba(6,13,26,0.85) !important; }