/* ============================================================
   108 Taste Upgrade Layer
   Editorial refinement over the existing mobile-first theme.
   Loaded LAST so selectors with equal specificity win the cascade.
   Scope: all frontend pages (guest + logged-in member).
   ============================================================ */

/* ------- 1. Design tokens ------- */
:root {
    --tu-ink: #14171f;
    --tu-ink-soft: #2a2f3b;
    --tu-muted: #6b6f7c;
    --tu-hair: #e7e2d8;
    --tu-paper: #faf8f3;
    --tu-paper-2: #f3ede1;
    --tu-cream: #efe7d6;
    --tu-white: #ffffff;
    --tu-bg: #ff8da1;

    --tu-accent: #3E8ED8;
    --tu-accent-2: #75B3E8;
    --tu-accent-ink: #1E5C95;
    --tu-teal: #1f4541;
    --tu-lilac: #6b5ca5;
    --tu-danger: #d43a5a;
    --tu-success: #2d7a55;

    --tu-r-sm: 10px;
    --tu-r-md: 18px;
    --tu-r-lg: 28px;
    --tu-r-xl: 36px;
    --tu-r-pill: 999px;

    --tu-shadow-xs: 0 1px 2px rgba(20, 23, 31, .05);
    --tu-shadow-sm: 0 4px 14px rgba(20, 23, 31, .06);
    --tu-shadow-md: 0 12px 32px -12px rgba(20, 23, 31, .14);
    --tu-shadow-lg: 0 28px 60px -24px rgba(20, 23, 31, .22);

    --tu-f-display: "Outfit", "Noto Sans TC", system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
    --tu-f-body: "Noto Sans TC", "Outfit", system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
}

/* ------- 2. Base + ambient background ------- */
html,
body {
    scroll-behavior: smooth;
}

body.blog-color,
body {
    font-family: var(--tu-f-body) !important;
    color: var(--tu-ink) !important;
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(117, 179, 232, .18), transparent 60%),
        radial-gradient(900px 500px at -10% 20%, rgba(107, 92, 165, .10), transparent 60%),
        radial-gradient(700px 400px at 50% 100%, rgba(31, 69, 65, .08), transparent 65%),
        var(--tu-paper) !important;
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.chatting-color {
    background:
        radial-gradient(900px 500px at 90% -10%, rgba(107, 92, 165, .14), transparent 60%),
        var(--tu-paper) !important;
}

/* kill horizontal bleed caused by motion transforms */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* content shell */
.custom-container {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 22px;
}

/* ------- 3. Typography rhythm ------- */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--tu-f-display) !important;
    color: var(--tu-ink) !important;
    letter-spacing: -0.01em;
}

h1 {
    font-weight: 700;
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    line-height: 1.08;
}

h2 {
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.15;
}

h3 {
    font-weight: 600;
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    line-height: 1.2;
}

h4 {
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.3;
}

h5 {
    font-weight: 500;
    font-size: 1.02rem;
    line-height: 1.45;
    color: var(--tu-ink-soft) !important;
}

p {
    color: var(--tu-ink-soft);
    line-height: 1.7;
}

a {
    color: var(--tu-ink);
    transition: color .25s ease;
}

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

/* ------- 4. Loader elegance ------- */
.min-loader-wrapper {
    background: var(--tu-paper) !important;
}

.min-loader-wrapper .loader-section {
    background: var(--tu-ink) !important;
}

.min-loader-wrapper .loader {
    filter: grayscale(0) contrast(1.05);
    max-width: 120px;
}

/* ------- 5. Header (desktop + mobile unified) ------- */
header.header-style-6,
.chatting-header {
    position: sticky !important;
    top: 0;
    z-index: 120;
    padding: 14px 22px !important;
    background: rgba(250, 248, 243, 0.78) !important;
    backdrop-filter: saturate(1.4) blur(16px);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
    border-bottom: 1px solid rgba(20, 23, 31, .06);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, var(--tu-shadow-xs);
}

header.header-style-6 .left-header {
    gap: 14px;
}

header.header-style-6 .menu-icon {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: var(--tu-r-pill);
    background: var(--tu-white);
    box-shadow: var(--tu-shadow-sm);
    border: 1px solid var(--tu-hair);
    transition: transform .25s ease, box-shadow .25s ease;
    cursor: pointer;
}

header.header-style-6 .menu-icon:hover {
    transform: translateY(-1px);
    box-shadow: var(--tu-shadow-md);
}

/* make the <i id="menu-icon"> fill the whole circle so jQuery click handler on #menu-icon fires from anywhere inside */
header.header-style-6 .menu-icon #menu-icon,
header.header-style-6 .menu-icon>i {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 22px;
    color: var(--tu-ink) !important;
    cursor: pointer;
}

header.header-style-6 img {
    max-height: 40px;
    width: auto;
}

header.header-style-6 .right-header {
    gap: 10px;
}

header.header-style-6 .right-header a {
    padding: 9px 16px;
    border-radius: var(--tu-r-pill);
    font-weight: 600;
    font-size: .9rem;
    color: var(--tu-ink) !important;
    background: var(--tu-white);
    border: 1px solid var(--tu-hair);
    box-shadow: var(--tu-shadow-xs);
    transition: all .25s ease;
    white-space: nowrap;
}

header.header-style-6 .right-header a:hover {
    transform: translateY(-1px);
    box-shadow: var(--tu-shadow-sm);
    border-color: var(--tu-ink);
}

header.header-style-6 .at-last-page-area a {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--tu-muted) !important;
}

header.header-style-6 .at-last-page-area a:hover {
    color: var(--tu-ink) !important;
}

/* ------- 6. Side menu (accordion drawer) ------- */
.at-menu-area {
    width: 300px !important;
    background:
        radial-gradient(380px 240px at 12% -10%, rgba(62, 142, 216, .18), transparent 60%),
        radial-gradient(420px 320px at 100% 110%, rgba(107, 92, 165, .25), transparent 60%),
        linear-gradient(180deg, #14171f 0%, #0c0f15 100%) !important;
    color: #f5f2ec !important;
    box-shadow: 24px 0 60px -20px rgba(20, 23, 31, .55), 0 0 0 1px rgba(255, 255, 255, .04) inset !important;
    padding: 28px 18px 120px !important;
    overflow-y: auto !important;
    border-right: 1px solid rgba(255, 255, 255, .06);
    border-top-right-radius: 28px;
    border-bottom-right-radius: 28px;
}

.at-menu-area {
    left: -340px !important;
    transition: left .38s cubic-bezier(.2, .7, .2, 1) !important;
}

.at-menu-area.active {
    left: 0 !important;
}

.at-menu-area::before {
    content: "108 保母銀行";
    display: block;
    font-family: var(--tu-f-display);
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .22em;
    color: rgba(255, 255, 255, .45);
    padding: 4px 10px 20px;
    text-transform: uppercase;
}

.at-menu-area .accordion,
.at-menu-area .accordion-item {
    background: transparent !important;
}

.at-menu-area .accordion-item {
    border: 0 !important;
    margin-bottom: 6px;
    border-radius: 16px !important;
    overflow: hidden;
    transition: background .25s ease;
}

.at-menu-area .accordion-item:has(.accordion-button:not(.collapsed)) {
    background: rgba(255, 255, 255, .04) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset;
}

.at-menu-area .accordion-button {
    font-family: var(--tu-f-display) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: rgba(255, 255, 255, .92) !important;
    background: transparent !important;
    padding: 16px 18px !important;
    box-shadow: none !important;
    border-radius: 16px !important;
    border: 0 !important;
    transition: color .25s ease, background .25s ease;
}

.at-menu-area .accordion-button:hover {
    background: rgba(255, 255, 255, .05) !important;
    color: #fff !important;
}

.at-menu-area .accordion-button:not(.collapsed) {
    color: #8fc3ef !important;
    background: transparent !important;
}

.at-menu-area .accordion-button::after {
    filter: invert(1) brightness(2);
    opacity: .55;
    width: 14px;
    height: 14px;
    background-size: 14px 14px;
    transition: transform .3s ease, opacity .25s ease;
}

.at-menu-area .accordion-button:not(.collapsed)::after {
    opacity: 1;
    filter: invert(56%) sepia(32%) saturate(1050%) hue-rotate(175deg) brightness(96%) contrast(92%);
}

.at-menu-area .accordion-collapse,
.at-menu-area .accordion-body {
    background: transparent !important;
    padding: 4px 8px 14px !important;
    border: 0 !important;
}

.at-menu-area .at-main-menu-list {
    list-style: none;
    margin: 0;
    padding: 0 !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    background: transparent !important;
    color: rgba(255, 255, 255, .8) !important;
}

.at-menu-area .at-main-menu-list li {
    background: transparent !important;
    list-style: none;
}

.at-menu-area .at-main-menu-list li a {
    display: block;
    padding: 9px 12px;
    color: rgba(255, 255, 255, .72) !important;
    font-size: .85rem;
    font-weight: 500;
    border-radius: 10px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
    text-decoration: none;
}

.at-menu-area .at-main-menu-list li a:hover {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(62, 142, 216, .28), rgba(107, 92, 165, .22)) !important;
    transform: translateY(-1px);
    padding-left: 12px;
}

.at-menu-area::-webkit-scrollbar {
    width: 6px;
}

.at-menu-area::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .12);
    border-radius: 3px;
}

/* ------- 7. Mobile bottom tab bar (glass pill) ------- */
.mobile-style-8 {
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: min(560px, calc(100% - 24px));
    padding: 10px 12px !important;
    border-radius: var(--tu-r-pill) !important;
    background: var(--tu-bg) !important;
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 20px 50px -20px rgba(20, 23, 31, .45);
    z-index: 110;
}

.mobile-style-8 ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-style-8 ul li {
    flex: 1;
    text-align: center;
}

.mobile-style-8 ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    border-radius: var(--tu-r-pill);
    color: rgba(255, 255, 255, .72) !important;
    transition: color .25s ease, background .25s ease;
}

.mobile-style-8 ul li a i {
    font-size: 18px;
}

.mobile-style-8 ul li a h6 {
    color: inherit !important;
    font-size: .68rem !important;
    font-weight: 500 !important;
    margin: 0 !important;
    letter-spacing: .03em;
}

.mobile-style-8 ul li.active a,
.mobile-style-8 ul li a:hover {
    color: #fff !important;
}

.mobile-style-8 ul li.active a {
    background: linear-gradient(135deg, var(--tu-accent), var(--tu-accent-2));
    box-shadow: 0 6px 20px -6px rgba(62, 142, 216, .55);
}

/* add space so bottom nav never covers content */
.bottom-space {
    height: 140px !important;
}

/* ------- 8. Home tabs (免費加入家長 / 加入保母) ------- */
.at-home-tab-list-area {
    padding-top: 28px;
}

.at-home-tab-list-area .container {
    max-width: 1180px;
    padding-inline: 22px;
}

.tab-style-4.nav-pills {
    gap: 8px;
    background: var(--tu-white);
    padding: 8px;
    border-radius: var(--tu-r-pill);
    box-shadow: var(--tu-shadow-sm);
    border: 1px solid var(--tu-hair);
}

.tab-style-4.nav-pills .nav-item {
    flex: 1;
}

.tab-style-4.nav-pills .nav-link {
    width: 100%;
    padding: 12px 16px !important;
    border-radius: var(--tu-r-pill) !important;
    color: var(--tu-ink-soft) !important;
    background: transparent !important;
    font-weight: 600;
    font-size: .95rem;
    transition: all .3s ease;
}

.tab-style-4.nav-pills .nav-link.active {
    background: var(--tu-bg) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px -10px rgba(20, 23, 31, .5);
}

.at-home-list-link {
    margin-top: 22px;
    padding: 22px;
    background: var(--tu-white);
    border: 1px solid var(--tu-hair);
    border-radius: var(--tu-r-lg);
    box-shadow: var(--tu-shadow-sm);
}

.at-home-list-link .row {
    row-gap: 12px;
}

.at-home-list-link a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 14px;
    font-weight: 600;
    font-size: .95rem;
    color: var(--tu-ink) !important;
    background: var(--tu-paper-2);
    border: 1px solid transparent;
    border-radius: var(--tu-r-md);
    transition: all .3s ease;
    text-align: center;
}

.at-home-list-link a i {
    font-size: 18px;
    color: var(--tu-accent-ink);
}

.at-home-list-link a:hover,
.at-home-list-link a.featured {
    background: var(--tu-bg);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: var(--tu-shadow-md);
}

.at-home-list-link a:hover i,
.at-home-list-link a.featured i {
    color: var(--tu-accent-2);
}

/* ------- 9. Section rhythm / title blocks ------- */
section.choose-topic-section,
section.at-topic-section,
section.at-home-news-section,
section.learning-auth,
.chatting-section {
    padding-block: clamp(40px, 6vw, 72px) !important;
}

.topic-title,
.title-2,
.title-2-sm,
.chatting-title {
    margin-bottom: 22px !important;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px dashed var(--tu-hair);
    padding-bottom: 12px;
}

.topic-title h2,
.title-2 h4,
.title-2-sm h4,
.chatting-title h2,
.chatting-title h4 {
    font-family: var(--tu-f-display) !important;
    font-weight: 700 !important;
    color: var(--tu-ink) !important;
    font-size: clamp(1.35rem, 2.4vw, 1.8rem) !important;
    margin: 0 !important;
    letter-spacing: -.01em;
}

.title-2.title-color h4,
.title-2 .title-color,
.topic-title h2 .title-color {
    color: var(--tu-ink) !important;
}

/* soft editorial eyebrow before section titles */
.topic-title::before,
.title-2::before,
.title-2-sm::before {
    display: none;
}

/* ------- 10. Quick-query topic grid (在宅保母 / 到府保母…) ------- */
.topic-list.selectionUI {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
    grid-auto-flow: dense;
}

@media (min-width: 720px) {
    .topic-list.selectionUI {
        grid-template-columns: repeat(4, 1fr);
    }
}

.topic-list.selectionUI li {
    margin: 0 !important;
}

.topic-list.selectionUI .topic-box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    gap: 26px;
    min-height: 140px;
    padding: 18px;
    background: var(--tu-white);
    border: 1px solid var(--tu-hair);
    border-radius: var(--tu-r-lg);
    overflow: hidden;
    transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s, border-color .4s;
}

.topic-list.selectionUI .topic-box::after {
    content: "";
    position: absolute;
    inset: auto -40% -60% auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(62, 142, 216, .35), transparent 65%);
    opacity: 0;
    transition: opacity .5s ease;
}

.topic-list.selectionUI .topic-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--tu-shadow-lg);
    border-color: var(--tu-ink);
}

.topic-list.selectionUI .topic-box:hover::after {
    opacity: 1;
}

.topic-list.selectionUI .topic-box i {
    font-size: 28px;
    color: var(--tu-accent-ink);
    background: var(--tu-paper-2);
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
}

.topic-list.selectionUI .topic-box h5 {
    font-family: var(--tu-f-display) !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    color: var(--tu-ink) !important;
    margin: 0 !important;
}

/* next / primary navigation button */
.next-button-box {
    margin-top: 22px;
}

.blog-btn,
.next-button,
.dark-btn,
.btn-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px !important;
    font-family: var(--tu-f-display) !important;
    font-weight: 600 !important;
    font-size: .98rem !important;
    letter-spacing: .02em;
    border-radius: var(--tu-r-pill) !important;
    border: 1px solid transparent !important;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background .3s ease, color .3s ease;
    text-decoration: none !important;
}

.blog-btn.dark-btn,
.dark-btn,
button.dark-btn {
    background: var(--tu-ink) !important;
    color: #fff !important;
    box-shadow: 0 12px 30px -12px rgba(20, 23, 31, .55);
}

.blog-btn.dark-btn:hover,
.dark-btn:hover {
    background: #000 !important;
    transform: translateY(-2px);
}

.btn-gradient {
    background: linear-gradient(135deg, var(--tu-accent), var(--tu-accent-2)) !important;
    color: #fff !important;
    box-shadow: 0 14px 32px -12px rgba(62, 142, 216, .55);
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -14px rgba(62, 142, 216, .7);
}

.blog-btn:not(.dark-btn):not(.btn-gradient) {
    background: var(--tu-white) !important;
    color: var(--tu-ink) !important;
    border-color: var(--tu-hair) !important;
}

.blog-btn:not(.dark-btn):not(.btn-gradient):hover {
    border-color: var(--tu-ink) !important;
    transform: translateY(-2px);
}

/* ------- 11. Latest case table ------- */
.at-case-table-list-area {
    background: var(--tu-white);
    border: 1px solid var(--tu-hair);
    border-radius: var(--tu-r-lg);
    box-shadow: var(--tu-shadow-sm);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.at-case-table-list-area .at-case-table-list {
    min-width: 720px;
}

/* 預設不換行；只讓「托育地區」「小孩年齡」兩欄換行 */
.at-case-table-list-area .at-case-table-list tbody td {
    white-space: nowrap;
}
.at-case-table-list-area .at-case-table-list tbody td:nth-child(2),
.at-case-table-list-area .at-case-table-list tbody td:nth-child(3) {
    white-space: normal;
}

.at-case-table-list {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.at-case-table-list thead {
    background: var(--tu-ink);
}

.at-case-table-list thead th {
    padding: 14px 12px;
    font-family: var(--tu-f-display) !important;
    font-weight: 600;
    color: #fff;
    font-size: .8rem;
    text-align: center;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--tu-hair);
}

.at-case-table-list tbody tr {
    transition: background .25s ease;
    border-bottom: 1px solid rgba(231, 226, 216, .6);
}

.at-case-table-list tbody tr:last-child {
    border-bottom: 0;
}

.at-case-table-list tbody tr:hover {
    background: var(--tu-paper-2);
}

.at-case-table-list tbody td {
    padding: 14px 12px;
    color: var(--tu-ink);
    font-weight: 500;
    vertical-align: middle;
}

/* ------- 12. News list ------- */
.category-content-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.category-content-box {
    padding: 18px 20px;
    background: var(--tu-white);
    border: 1px solid var(--tu-hair);
    border-radius: var(--tu-r-md);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.category-content-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--tu-shadow-md);
    border-color: var(--tu-ink);
}

.category-content-box h6 {
    font-family: var(--tu-f-display) !important;
    font-weight: 600 !important;
    color: var(--tu-ink) !important;
    font-size: 1.02rem !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.4;
}

.time-zone-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 14px;
    align-items: center;
}

.time-zone-box {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--tu-muted);
    font-size: .82rem;
}

.time-zone-box i {
    font-size: 14px;
    color: var(--tu-accent-ink);
}

.at-home-more-news-button {
    display: block;
    margin: 22px auto 0;
    padding: 14px 22px;
    max-width: 240px;
    text-align: center;
    background: var(--tu-white);
    border: 1px solid var(--tu-hair);
    border-radius: var(--tu-r-pill);
    color: var(--tu-ink) !important;
    font-weight: 600;
    font-size: .92rem;
    transition: all .25s ease;
}

.at-home-more-news-button:hover {
    background: var(--tu-ink);
    color: #fff !important;
    transform: translateY(-2px);
}

/* ------- 13. City pill cloud (at_list_style_one) ------- */
.at-usually-city-area {
    margin-block: 16px 22px;
    padding: 14px;
    background: var(--tu-white);
    border: 1px solid var(--tu-hair);
    border-radius: var(--tu-r-lg);
}

.at-usually-city-list .row {
    row-gap: 8px;
}

.at-usually-city-list a {
    display: block;
    padding: 10px 6px;
    text-align: center;
    font-size: .86rem;
    font-weight: 500;
    border-radius: var(--tu-r-pill);
    background: var(--tu-paper);
    color: var(--tu-ink) !important;
    border: 1px solid transparent;
    transition: all .25s ease;
}

.at-usually-city-list a:hover {
    background: var(--tu-bg);
    color: #fff !important;
    transform: translateY(-1px);
}

/* city/area filter (HTMX search form) */
.at-city-list {
    margin-bottom: 22px;
}

.at-city-search-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    padding: 12px;
    background: var(--tu-white);
    border: 1px solid var(--tu-hair);
    border-radius: var(--tu-r-lg);
    box-shadow: var(--tu-shadow-sm);
}

.at-city-search-form select {
    appearance: none;
    -webkit-appearance: none;
    padding: 12px 36px 12px 14px;
    font-size: .95rem;
    font-family: var(--tu-f-body);
    background: var(--tu-paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314171f' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center / 14px;
    border: 1px solid var(--tu-hair);
    border-radius: var(--tu-r-md);
    color: var(--tu-ink);
    min-width: 0;
}

.at-city-search-form select:focus {
    outline: 2px solid var(--tu-accent);
    outline-offset: 1px;
}

.at-city-search-form button {
    padding: 12px 22px;
    background: var(--tu-bg);
    color: #fff;
    font-weight: 600;
    border: 0;
    border-radius: var(--tu-r-md);
    cursor: pointer;
    transition: background .25s, transform .25s;
}

.at-city-search-form button:hover {
    background: var(--tu-accent-ink);
    transform: translateY(-1px);
}

/* ------- 14. Login / Register / Auth ------- */
.inter-body.learning-color {
    background: transparent !important;
}

.learning-auth {
    min-height: auto;
}

.learning-header.px-15 {
    padding: 32px 22px 10px !important;
}

.learning-header .home-contain {
    max-width: 780px;
    margin-inline: auto;
    text-align: center;
}

.learning-header h2 {
    font-family: var(--tu-f-display) !important;
    font-weight: 700 !important;
    font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
    color: #fff !important;
    margin-bottom: 10px !important;
}

.learning-header h5 {
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1rem !important;
}

.form-style-1 {
    max-width: 480px;
    margin: 28px auto 0 !important;
    padding: 32px;
    background: var(--tu-white);
    border: 1px solid var(--tu-hair);
    border-radius: var(--tu-r-xl);
    box-shadow: var(--tu-shadow-md);
}

.form-style-1 .form-label {
    font-weight: 600;
    font-size: .9rem;
    color: var(--tu-ink) !important;
    margin-bottom: 6px !important;
}

.at-input-required {
    color: var(--tu-accent);
    margin-left: 4px;
    font-weight: 700;
}

.form-control,
input.form-control,
select.form-control,
textarea.form-control {
    padding: 13px 16px !important;
    font-size: .98rem !important;
    font-family: var(--tu-f-body) !important;
    background: var(--tu-paper) !important;
    border: 1px solid var(--tu-hair) !important;
    border-radius: var(--tu-r-md) !important;
    color: var(--tu-ink) !important;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease !important;
    box-shadow: none !important;
}

.form-control:focus {
    background: #fff !important;
    border-color: var(--tu-ink) !important;
    box-shadow: 0 0 0 4px rgba(20, 23, 31, .06) !important;
    outline: none !important;
}

.form-control.is-invalid {
    border-color: var(--tu-danger) !important;
    background: #fff5f7 !important;
}

.form-style-1 .btn-gradient {
    width: 100%;
    margin-top: 18px !important;
}

.forgot-password {
    display: block;
    margin-top: 14px;
    font-size: .88rem;
    color: var(--tu-muted) !important;
    text-align: right;
}

.forgot-password:hover {
    color: var(--tu-accent-ink) !important;
}

.create-new {
    display: block;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--tu-hair);
    text-align: center;
    color: var(--tu-ink-soft) !important;
    font-size: .88rem;
}

.create-new:hover {
    color: var(--tu-accent-ink) !important;
}

.login_error_message {
    max-width: 480px;
    margin: 18px auto 0 !important;
    padding: 12px 16px;
    background: #fdecef;
    border: 1px solid rgba(212, 58, 90, .3);
    border-radius: var(--tu-r-md);
    color: var(--tu-danger) !important;
    font-weight: 600;
}

/* captcha tweak */
.at-captcha-area img,
.at-captcha img {
    border-radius: var(--tu-r-sm);
    border: 1px solid var(--tu-hair);
}

/* ------- 15. Alerts ------- */
.alert {
    padding: 14px 18px !important;
    border-radius: var(--tu-r-md) !important;
    border: 1px solid transparent !important;
    font-weight: 500;
    font-size: .92rem;
}

.alert-danger {
    background: #fdecef !important;
    border-color: rgba(212, 58, 90, .25) !important;
    color: var(--tu-danger) !important;
}

.alert-info {
    background: #eef4f3 !important;
    border-color: rgba(31, 69, 65, .18) !important;
    color: var(--tu-teal) !important;
}

.alert-success {
    background: #e8f2ec !important;
    border-color: rgba(45, 122, 85, .22) !important;
    color: var(--tu-success) !important;
}

/* ------- 16. Member profile ------- */
.blog-author-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    background: linear-gradient(135deg, var(--tu-ink), #26303d);
    color: #fff;
    border-radius: var(--tu-r-xl);
    box-shadow: 0 24px 60px -24px rgba(20, 23, 31, .55);
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
}

.blog-author-box::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(62, 142, 216, .45), transparent 65%);
    pointer-events: none;
}

.blog-author-box .author-image img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .2);
    object-fit: cover;
    background: var(--tu-paper);
}

.blog-author-box .author-name h4 {
    font-family: var(--tu-f-display) !important;
    color: #fff !important;
    font-size: 1.35rem !important;
    margin: 0 0 6px 0 !important;
}

.blog-author-box .author-name h5 {
    color: rgba(255, 255, 255, .72) !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
    margin: 2px 0 !important;
}

.blog-profile-box {
    padding-block: 4px;
}

.profile-box-list {
    list-style: none;
    padding: 0;
    margin: 18px 0 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    grid-auto-flow: dense;
}

@media (min-width: 560px) {
    .profile-box-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.profile-box-list li {
    margin: 0 !important;
}

.profile-box-list li a,
.profile-box-list a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 14px;
    min-height: 110px;
    background: var(--tu-white);
    border: 1px solid var(--tu-hair);
    border-radius: var(--tu-r-lg);
    color: var(--tu-ink) !important;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.profile-box-list li a:hover,
.profile-box-list a:hover {
    transform: translateY(-3px);
    box-shadow: var(--tu-shadow-md);
    border-color: var(--tu-ink);
}

.profile-box-list li a i,
.profile-box-list a i {
    font-size: 24px;
    color: var(--tu-accent-ink);
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--tu-paper-2);
    display: grid;
    place-items: center;
    margin-left: auto;
    margin-right: auto;
}

.profile-box-list a h5 {
    font-family: var(--tu-f-display) !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    color: var(--tu-ink) !important;
    margin: 0 !important;
}

/* logout button spacing */
.blog-profile-box .blog-btn.dark-btn {
    margin-top: 22px !important;
}

/* ------- 17. Offcanvas (bottom drawer) ------- */
.offcanvas.theme-bottom-offcanvas,
.offcanvas.offcanvas-bottom {
    border-radius: var(--tu-r-xl) var(--tu-r-xl) 0 0 !important;
    border: 0 !important;
    box-shadow: 0 -20px 60px -20px rgba(20, 23, 31, .35);
    background: var(--tu-paper) !important;
}

.offcanvas-header {
    padding: 22px 22px 10px !important;
    border-bottom: 1px dashed var(--tu-hair) !important;
}

.offcanvas-title {
    font-family: var(--tu-f-display) !important;
    font-weight: 700 !important;
    color: var(--tu-ink) !important;
}

.offcanvas-body {
    padding: 22px !important;
}

.filter-box-list.at-box-link-area {
    display: grid;
    gap: 10px;
}

.filter-box.at-link-box a {
    display: block;
    padding: 16px 18px;
    background: var(--tu-white);
    border: 1px solid var(--tu-hair);
    border-radius: var(--tu-r-md);
    color: var(--tu-ink) !important;
    font-weight: 600;
    font-size: .98rem;
    transition: all .25s ease;
}

.filter-box.at-link-box a:hover {
    background: var(--tu-ink);
    color: #fff !important;
    transform: translateX(3px);
}

/* ------- 18. Chat list + chat room ------- */
.chatting-header {
    padding: 14px 22px !important;
}

.chatting-header .header-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.chatting-title h2,
.chatting-title h4 {
    font-size: 1.4rem !important;
}

.chatting-list-box {
    margin-top: 12px;
}

.chatting-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.chatting-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--tu-white);
    border: 1px solid var(--tu-hair);
    border-radius: var(--tu-r-lg);
    color: var(--tu-ink) !important;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    text-decoration: none !important;
}

.chatting-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--tu-shadow-md);
    border-color: var(--tu-ink);
}

.chatting-box .chatting-image img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--tu-hair);
}

.chatting-box .chatting-content {
    flex: 1;
    min-width: 0;
}

.chatting-box .chatting-name h5,
.chatting-box .chatting-name h6 {
    font-family: var(--tu-f-display) !important;
    font-weight: 600 !important;
    color: var(--tu-ink) !important;
    margin: 0 0 2px 0 !important;
}

.chatting-box .chatting-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: .86rem;
    color: var(--tu-muted) !important;
}

.chatting-box .chatting-message p {
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
    color: var(--tu-muted) !important;
}

.chatting-box .msg-count {
    background: linear-gradient(135deg, var(--tu-accent), var(--tu-accent-2));
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
}

.chatting-box.unread-story {
    border-color: rgba(62, 142, 216, .4);
    background: #fff8f3;
}

/* chat room bubbles (if structure present) */
.chatting-section .received-msg,
.chatting-section .sent-msg,
.chatting-section .receiver-msg,
.chatting-section .sender-msg {
    padding: 10px 14px;
    border-radius: 18px;
    max-width: 78%;
    line-height: 1.5;
    font-size: .95rem;
    box-shadow: var(--tu-shadow-xs);
}

.chatting-section .received-msg,
.chatting-section .receiver-msg {
    background: var(--tu-white);
    border: 1px solid var(--tu-hair);
    color: var(--tu-ink);
    border-bottom-left-radius: 6px;
}

.chatting-section .sent-msg,
.chatting-section .sender-msg {
    background: linear-gradient(135deg, var(--tu-ink), #26303d);
    color: #fff;
    border-bottom-right-radius: 6px;
}

/* ------- 19. Resume / info edit forms (shared) ------- */
form .form-label,
form label {
    font-weight: 600;
    color: var(--tu-ink);
}

form select,
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="number"],
form input[type="date"],
form input[type="tel"],
form textarea {
    padding: 12px 14px;
    font-size: .96rem;
    background: var(--tu-paper);
    border: 1px solid var(--tu-hair);
    border-radius: var(--tu-r-md);
    color: var(--tu-ink);
    transition: border-color .25s, background .25s, box-shadow .25s;
    font-family: var(--tu-f-body);
}

form select:focus,
form input:focus,
form textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--tu-ink);
    box-shadow: 0 0 0 4px rgba(20, 23, 31, .06);
}

form .row {
    row-gap: 14px;
}

fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 22px 0;
}

legend {
    font-family: var(--tu-f-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--tu-ink);
    padding: 0;
    margin-bottom: 12px;
}

.form-check-input:checked {
    background-color: var(--tu-ink) !important;
    border-color: var(--tu-ink) !important;
}

.form-check-label {
    color: var(--tu-ink-soft);
    font-size: .92rem;
}

/* card-like panel wrapper common on edit pages */
.at-form-panel,
.at-edit-section,
.edit-info-area,
.at-card,
.profile-section-box {
    padding: 22px;
    background: var(--tu-white);
    border: 1px solid var(--tu-hair);
    border-radius: var(--tu-r-lg);
    box-shadow: var(--tu-shadow-sm);
    margin-bottom: 16px;
}

/* ------- 20. Apply / Receive history cards ------- */
.apply-item,
.receive-item,
.history-list-item,
.at-history-item {
    padding: 18px;
    background: var(--tu-white);
    border: 1px solid var(--tu-hair);
    border-radius: var(--tu-r-lg);
    box-shadow: var(--tu-shadow-xs);
    margin-bottom: 12px;
    transition: transform .3s, box-shadow .3s;
}

.apply-item:hover,
.receive-item:hover,
.history-list-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--tu-shadow-md);
}

/* ------- 21. Single post / taxonomy ------- */
article.post,
.single-post,
.single-page,
.at-single-wrap {
    max-width: 780px;
    margin: 28px auto;
    padding: 26px;
    background: var(--tu-white);
    border: 1px solid var(--tu-hair);
    border-radius: var(--tu-r-xl);
    box-shadow: var(--tu-shadow-sm);
}

article.post h1,
.single-post h1,
.single-page h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 10px;
}

article.post .entry-content p,
.single-post p,
.single-page p {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--tu-ink-soft);
}

article.post a,
.single-post a,
.single-page a {
    color: var(--tu-accent-ink);
    border-bottom: 1px solid rgba(62, 142, 216, .3);
}

article.post a:hover {
    border-bottom-color: var(--tu-accent-ink);
}

/* taxonomy list */
.tax-list,
.post-list {
    display: grid;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ------- 22. Search result cards (nanny/parent listings) ------- */
#at-search-results .search-list,
#at-search-results ul,
.at-search-list {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {

    #at-search-results .search-list,
    .at-search-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

#at-search-results li,
.at-search-list>li,
.search-result-item,
.at-result-card,
.nanny-card,
.parent-card {
    list-style: none;
    padding: 18px;
    background: var(--tu-white);
    border: 1px solid var(--tu-hair);
    border-radius: var(--tu-r-lg);
    box-shadow: var(--tu-shadow-xs);
    transition: transform .3s, box-shadow .3s, border-color .3s;
}

#at-search-results li:hover,
.search-result-item:hover,
.nanny-card:hover,
.parent-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--tu-shadow-md);
    border-color: var(--tu-ink);
}

/* pagination */
.pagination,
.at-pagination {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 26px;
    list-style: none;
    padding: 0;
}

.pagination a,
.pagination span,
.at-pagination a,
.at-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--tu-r-pill);
    background: var(--tu-white);
    border: 1px solid var(--tu-hair);
    color: var(--tu-ink) !important;
    font-weight: 600;
    font-size: .9rem;
    transition: all .25s ease;
    text-decoration: none;
}

.pagination a:hover {
    background: var(--tu-ink);
    color: #fff !important;
}

.pagination .current,
.pagination .active,
.at-pagination .current {
    background: var(--tu-ink);
    color: #fff !important;
    border-color: var(--tu-ink);
}

/* ------- 23. Tables generic ------- */
table.at-table,
table.profile-table,
table.resume-table,
table.info-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--tu-white);
    border-radius: var(--tu-r-md);
    overflow: hidden;
    box-shadow: var(--tu-shadow-xs);
}

table.at-table th,
table.at-table td,
table.profile-table th,
table.profile-table td,
table.resume-table th,
table.resume-table td,
table.info-table th,
table.info-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--tu-hair);
    font-size: .92rem;
}

table.at-table th,
table.profile-table th,
table.resume-table th,
table.info-table th {
    background: var(--tu-paper-2);
    font-weight: 600;
    text-align: left;
    color: var(--tu-ink);
}

/* ------- 24. Scroll reveal hook ------- */
/* Intentionally a no-op — content must always be visible. Reveal animation was
   removed because IntersectionObserver did not fire reliably in some contexts,
   leaving entire sections stuck at opacity 0. */
[data-tu-reveal] {
    opacity: 1;
    transform: none;
}

/* ------- 25. Theme setting / palette swatch cleanup (hide legacy controls) ------- */
.theme-setting-box {
    display: none !important;
}

/* ------- 26. Scrollbar polish ------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(20, 23, 31, .18);
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(20, 23, 31, .35);
}

/* ------- 26b. Single page content + 404 ------- */
.at-news-content {
    max-width: 780px;
    margin: 0 auto;
    padding: 28px;
    background: var(--tu-white);
    border: 1px solid var(--tu-hair);
    border-radius: var(--tu-r-xl);
    box-shadow: var(--tu-shadow-sm);
    font-size: 1rem;
    line-height: 1.85;
    color: var(--tu-ink-soft);
}

.at-news-content p {
    margin: 0 0 14px 0;
}

.at-news-content h2,
.at-news-content h3,
.at-news-content h4 {
    margin-top: 28px;
    margin-bottom: 12px;
}

.at-news-content a {
    color: var(--tu-accent-ink);
}

.at-news-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--tu-r-md);
    margin: 14px 0;
}

.at-news-content ul,
.at-news-content ol {
    padding-left: 20px;
    margin: 0 0 14px 0;
}

.section-t-space-3 {
    padding-top: clamp(32px, 4vw, 56px) !important;
}

.at-page-not-found {
    max-width: 640px;
    margin: clamp(40px, 8vw, 100px) auto;
    padding: 40px 32px;
    text-align: center;
    background: var(--tu-white);
    border: 1px solid var(--tu-hair);
    border-radius: var(--tu-r-xl);
    box-shadow: var(--tu-shadow-md);
}

.at-page-not-found-title {
    font-family: var(--tu-f-display) !important;
    font-weight: 800 !important;
    font-size: clamp(1.8rem, 5vw, 2.8rem) !important;
    color: var(--tu-ink) !important;
    margin-bottom: 18px !important;
    letter-spacing: -.02em;
}

.at-page-not-found p {
    color: var(--tu-ink-soft);
    line-height: 1.7;
    margin: 6px 0;
}

/* ------- 27. Utility ------- */
.tu-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tu-hair), transparent);
    margin: 28px 0;
    border: 0;
}

/* selection */
::selection {
    background: var(--tu-ink);
    color: #fff;
}

/* ------- 27. Profile / info tables (search-parent, search-nanny detail views) ------- */
body.loaded .min-loader-wrapper {
    display: none !important;
}

.at-table-main-area {
    max-width: 980px;
    margin: 0 auto;
    padding: 36px 22px 140px;
}

.at-table-main-area .breadcrumb-wrap,
.at-table-main-area>p:first-of-type,
.at-table-main-area>.breadcrumb {
    color: var(--tu-muted);
    font-size: .82rem;
    letter-spacing: .04em;
    margin-bottom: 6px;
}

.at-table-main-area h1,
.at-table-main-area h2,
.at-table-main-area h3,
.at-table-main-area h4 {
    font-family: var(--tu-f-display);
    font-weight: 700;
    color: var(--tu-ink);
    margin: 0 0 18px;
    position: relative;
    padding-left: 14px;
    line-height: 1.25;
}

.at-table-main-area h4 {
    font-size: 1.25rem;
}

.at-table-main-area h1::before,
.at-table-main-area h2::before,
.at-table-main-area h3::before,
.at-table-main-area h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 75%;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--tu-accent), var(--tu-accent-ink));
}

.at-table-main-area table {
    width: 100% !important;
    background: var(--tu-white);
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: var(--tu-r-lg);
    overflow: hidden;
    box-shadow: var(--tu-shadow-sm);
    border: 1px solid var(--tu-hair);
    margin: 0 0 32px;
}

.at-table-main-area table tr {
    transition: background .2s ease;
}

.at-table-main-area table tr:hover td,
.at-table-main-area table tr:hover th {
    background-color: rgba(62, 142, 216, .04);
}

.at-table-main-area table tr:not(:last-child)>th,
.at-table-main-area table tr:not(:last-child)>td {
    border-bottom: 1px solid var(--tu-hair) !important;
}

.at-table-main-area table th {
    background: linear-gradient(180deg, rgba(62, 142, 216, .08), rgba(62, 142, 216, .04)) !important;
    color: var(--tu-accent-ink) !important;
    font-family: var(--tu-f-display);
    font-weight: 600 !important;
    font-size: .92rem !important;
    letter-spacing: .02em;
    text-align: left !important;
    padding: 16px 20px !important;
    width: 32% !important;
    min-width: 140px;
    border: 0 !important;
    vertical-align: middle;
    position: relative;
}

.at-table-main-area table th::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--tu-accent);
    opacity: .55;
}

.at-table-main-area table td {
    padding: 16px 20px !important;
    border: 0 !important;
    color: var(--tu-ink) !important;
    font-size: .95rem;
    vertical-align: middle;
    background: var(--tu-white) !important;
    word-break: break-word;
}

.at-table-main-area table td:empty::after,
.at-table-main-area table td:-webkit-any(:empty)::after {
    content: "—";
    color: var(--tu-muted);
}

.at-table-main-area table a {
    color: var(--tu-accent-ink);
    border-bottom: 1px dashed rgba(62, 142, 216, .4);
}

.at-table-main-area table a:hover {
    color: var(--tu-accent);
    border-bottom-style: solid;
}

/* Action buttons inside / after tables (e.g. 聯絡 / 收藏) */
.at-table-main-area .at-btn-area,
.at-table-main-area .btn-area {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.at-table-main-area .at-btn-area a,
.at-table-main-area .at-btn-area button,
.at-table-main-area .btn-area a,
.at-table-main-area .btn-area button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--tu-r-pill);
    background: linear-gradient(135deg, var(--tu-accent), var(--tu-accent-2));
    color: #fff !important;
    font-weight: 600;
    font-size: .9rem;
    border: 0;
    box-shadow: 0 10px 24px -10px rgba(62, 142, 216, .45);
    transition: transform .2s ease, box-shadow .25s ease, filter .2s ease;
    text-decoration: none;
}

.at-table-main-area .at-btn-area a:hover,
.at-table-main-area .at-btn-area button:hover,
.at-table-main-area .btn-area a:hover,
.at-table-main-area .btn-area button:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 14px 30px -10px rgba(62, 142, 216, .55);
}

@media (max-width: 640px) {
    .at-table-main-area {
        padding: 24px 14px 140px;
    }

    .at-table-main-area table th,
    .at-table-main-area table td {
        display: block;
        width: 100% !important;
        padding: 12px 16px !important;
    }

    .at-table-main-area table th {
        border-bottom: 0 !important;
        padding-bottom: 2px !important;
        font-size: .78rem !important;
        background: transparent !important;
    }

    .at-table-main-area table th::before {
        display: none;
    }

    .at-table-main-area table tr:not(:last-child)>td {
        border-bottom: 1px solid var(--tu-hair) !important;
    }
}

/* ------- 27b. Listing tables (.at-list-table — case lists etc.) ------- */
.at-list-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: var(--tu-r-lg);
    overflow: hidden;
    background: var(--tu-white);
    box-shadow: var(--tu-shadow-sm);
    border: 1px solid var(--tu-hair);
    margin: 18px 0 32px;
    font-size: .95rem;
}

.at-list-table thead th,
.at-list-table>tbody>tr:first-child>th {
    background: linear-gradient(135deg, var(--tu-accent-ink), var(--tu-accent)) !important;
    color: #ffffff !important;
    font-family: var(--tu-f-display);
    font-weight: 700 !important;
    font-size: .92rem !important;
    letter-spacing: .04em;
    text-align: center !important;
    padding: 16px 14px !important;
    border: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
    white-space: nowrap;
}

.at-list-table td {
    padding: 14px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--tu-hair) !important;
    color: var(--tu-ink) !important;
    background: transparent !important;
    text-align: center;
    vertical-align: middle;
}

.at-list-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.at-list-table tbody tr:not(:first-child):nth-child(even) td {
    background: rgba(62, 142, 216, .025) !important;
}

.at-list-table tbody tr:hover td {
    background: rgba(62, 142, 216, .07) !important;
}

.at-list-table a {
    color: var(--tu-accent-ink);
    font-weight: 600;
    border-bottom: 1px dashed rgba(62, 142, 216, .4);
}

.at-list-table a:hover {
    color: var(--tu-accent);
    border-bottom-style: solid;
}

@media (max-width: 640px) {

    .at-list-table,
    .at-list-table thead,
    .at-list-table tbody,
    .at-list-table tr,
    .at-list-table th,
    .at-list-table td {
        display: block;
        width: 100% !important;
        text-align: left;
    }

    .at-list-table {
        border-radius: var(--tu-r-md);
    }

    .at-list-table thead {
        display: none;
    }

    .at-list-table>tbody>tr:first-child {
        display: none;
    }

    .at-list-table tbody tr {
        padding: 12px 14px;
        border-bottom: 1px solid var(--tu-hair);
    }

    .at-list-table td {
        padding: 4px 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
}

/* ------- 27c. Send-message block (at-action-button-area) ------- */
.at-action-button-area {
    max-width: 720px;
    margin: 40px auto 120px !important;
    padding: 26px 22px !important;
    background: linear-gradient(160deg, var(--tu-white) 0%, #f6fbff 100%);
    border: 1px solid var(--tu-hair);
    border-radius: var(--tu-r-lg);
    box-shadow: var(--tu-shadow-md);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
}

.at-action-button-area::before {
    content: "";
    position: absolute;
    inset: -40% -20% auto auto;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(62, 142, 216, .14), transparent 65%);
    pointer-events: none;
}

.at-action-button-area h3,
.at-action-button-area h4,
.at-action-button-area h5,
.at-action-button-area>p:first-child,
.at-action-button-area .at-section-title {
    margin: 0 0 6px !important;
    font-family: var(--tu-f-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--tu-ink);
    background: transparent !important;
    padding: 0 !important;
    text-align: left;
    position: relative;
    padding-left: 14px !important;
}

.at-action-button-area h3::before,
.at-action-button-area h4::before,
.at-action-button-area h5::before,
.at-action-button-area .at-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--tu-accent), var(--tu-accent-ink));
}

/* The original theme renders the "私訊" title as a full-width blue bar (div). Flatten it. */
.at-action-button-area>div:first-child:not(:has(form)):not(.form-group),
.at-action-button-area .at-send-title,
.at-action-button-area .at-title {
    background: transparent !important;
    color: var(--tu-ink) !important;
    font-family: var(--tu-f-display);
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0 0 0 14px !important;
    text-align: left !important;
    border-radius: 0 !important;
    position: relative;
    margin-bottom: 8px !important;
}

.at-action-button-area input[type="text"],
.at-action-button-area textarea {
    width: 100%;
    padding: 14px 18px !important;
    border-radius: 14px !important;
    border: 1px solid var(--tu-hair) !important;
    background: #fff !important;
    font-size: .95rem;
    color: var(--tu-ink) !important;
    box-shadow: inset 0 1px 2px rgba(20, 23, 31, .03);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.at-action-button-area input[type="text"]:focus,
.at-action-button-area textarea:focus {
    outline: 0;
    border-color: var(--tu-accent) !important;
    box-shadow: 0 0 0 3px rgba(62, 142, 216, .15);
}

.at-action-button-area button,
.at-action-button-area input[type="submit"],
.at-action-button-area #resume_send_button,
#resume_send_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px !important;
    border-radius: var(--tu-r-pill) !important;
    background: linear-gradient(135deg, var(--tu-accent), var(--tu-accent-2)) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .04em;
    border: 0 !important;
    box-shadow: 0 14px 30px -12px rgba(62, 142, 216, .55);
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease, box-shadow .25s ease;
}

.at-action-button-area button:hover,
.at-action-button-area input[type="submit"]:hover,
#resume_send_button:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 18px 36px -12px rgba(62, 142, 216, .65);
}

/* ------- 28. Small screens tightening ------- */
@media (max-width: 480px) {
    .form-style-1 {
        padding: 22px;
        border-radius: var(--tu-r-lg);
    }

    .blog-author-box {
        flex-direction: column;
        text-align: center;
        padding: 28px 20px;
    }

    .blog-author-box::after {
        right: -80px;
        bottom: -80px;
    }

    .at-city-search-form {
        grid-template-columns: 1fr 1fr;
    }

    .at-city-search-form button {
        grid-column: 1 / -1;
    }

    .topic-title,
    .title-2,
    .title-2-sm {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* 前台展示圖片限高，等比例縮小並置中 */
.at-table-main-area td img,
.at-table-main-area .row img {
    max-height: 180px;
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.at-table-main-area td .row > [class*="col-"] {
    text-align: center;
    margin-bottom: 28px;
}

.at-table-main-area td .row > [class*="col-"] img {
    margin-bottom: 12px;
}
}

/* ------- 29. VIP Hot badge (search lists) ------- */
.at-name-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    line-height: 1.2;
}

.at-name-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.at-vip-badge {
    display: inline-block;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #f5a623, #d97706);
    border-radius: 999px;
    letter-spacing: .5px;
    line-height: 1.5;
}

.at-hot-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px 2px 6px;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #ff4d4d 0%, #ff7a18 50%, #ffb347 100%);
    background-size: 200% 200%;
    border-radius: 999px;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(255, 77, 77, .45), 0 0 0 0 rgba(255, 122, 24, .55);
    animation: atHotPulse 1.6s ease-in-out infinite, atHotShift 3s linear infinite;
    transform-origin: center;
    position: relative;
    z-index: 1;
}

.at-hot-flame {
    display: inline-block;
    font-size: 12px;
    animation: atHotFlicker 0.9s ease-in-out infinite;
    transform-origin: 50% 80%;
}

@keyframes atHotPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(255, 77, 77, .45), 0 0 0 0 rgba(255, 122, 24, .55);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 3px 12px rgba(255, 77, 77, .65), 0 0 0 6px rgba(255, 122, 24, 0);
    }
}

@keyframes atHotShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes atHotFlicker {
    0%, 100% { transform: rotate(-4deg) scale(1); }
    25%      { transform: rotate(3deg) scale(1.1); }
    50%      { transform: rotate(-2deg) scale(.95); }
    75%      { transform: rotate(4deg) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .at-hot-badge,
    .at-hot-flame {
        animation: none;
    }
}