:root{
  --bg:#f6f8ff;
  --surface:rgba(255,255,255,.92);
  --surface2:rgba(248,250,255,.95);
  --text:#0f172a;
  --muted:rgba(15,23,42,.72);
  --border:rgba(15,23,42,.12);
  --accent:#2563eb;
  --accent2:#38bdf8;
  /* New theme colors (derived; no extra hard-coded palette) */
  --accent3:color-mix(in oklab, var(--accent) 62%, var(--accent2) 38%);
  --accent-soft:color-mix(in oklab, var(--accent) 14%, white);
  --ok:#16a34a;
  --warn:#f59e0b;
  --danger:#ef4444;
  --shadow:0 10px 26px rgba(15,23,42,.10);
  --radius:14px;
  --radius-sm:10px;
  --maxw:1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  color:var(--text);
  font-size:clamp(14px, 1.1vw, 16px);
  background:
    radial-gradient(1000px 520px at 10% 0%, rgba(37,99,235,.14), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(56,189,248,.12), transparent 60%),
    radial-gradient(1000px 800px at 50% 110%, rgba(37,99,235,.10), transparent 60%),
    var(--bg);
  line-height:1.55;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--maxw);margin:0 auto;padding:0 18px}

/* Small screens: tighter side gutters */
@media (max-width: 420px){
  .container{padding-left:8px;padding-right:8px}
}

/* True full-width layout on wide screens (flush to edges) */
@media (min-width: 1200px){
  .container{max-width:none;margin:0;padding-left:12px;padding-right:12px}
}

/* Header */
.topbar{
  position:sticky;top:0;z-index:50;
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  backdrop-filter:saturate(150%) blur(10px);
  background:linear-gradient(to bottom, rgba(246,248,255,.88), rgba(246,248,255,.72));
  border-bottom:1px solid var(--border);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:12px}
.brand{display:flex;align-items:center;gap:10px;min-width:200px}
.brand:hover{text-decoration:none}
.brand:focus-visible{outline:2px solid color-mix(in oklab, var(--accent3) 55%, transparent);outline-offset:3px;border-radius:12px}
.logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 8px 20px rgba(37,99,235,.20)}
.brand-title{display:flex;flex-direction:column;line-height:1.1}
.brand-title strong{font-size:15px;letter-spacing:.4px}
.brand-title span{font-size:12px;color:var(--muted)}

.nav{display:flex;align-items:center;gap:10px}
.nav a{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;border:1px solid transparent;
  color:var(--muted);white-space:nowrap;
}
.nav a:hover{color:var(--text);border-color:var(--border);background:rgba(15,23,42,.04);text-decoration:none}
.nav a[aria-current="page"]{
  color:var(--text);
  border-color:color-mix(in oklab, var(--accent3) 30%, transparent);
  background:linear-gradient(135deg, var(--accent-soft), color-mix(in oklab, var(--accent2) 14%, white));
}
.nav a[aria-current="page"]:hover{
  background:linear-gradient(135deg, color-mix(in oklab, var(--accent3) 18%, white), color-mix(in oklab, var(--accent2) 16%, white));
  text-decoration:none;
}

.menu-btn{
  display:none;
  border:1px solid var(--border);
  background:rgba(15,23,42,.04);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  touch-action:manipulation;
}
.menu-btn:focus{outline:2px solid color-mix(in oklab, var(--accent3) 55%, transparent);outline-offset:2px}

.mobile-drawer{display:none;border-top:1px solid var(--border);padding:10px 0 14px}
.mobile-drawer a{display:flex;padding:12px 10px;border-radius:12px;color:var(--muted)}
.mobile-drawer a:hover{background:rgba(15,23,42,.04);color:var(--text);text-decoration:none}
.mobile-drawer a[aria-current="page"]{
  color:var(--text);
  border:1px solid color-mix(in oklab, var(--accent3) 30%, transparent);
  background:linear-gradient(135deg, var(--accent-soft), color-mix(in oklab, var(--accent2) 14%, white));
}
.mobile-drawer a[aria-current="page"]:hover{background:linear-gradient(135deg, color-mix(in oklab, var(--accent3) 18%, white), color-mix(in oklab, var(--accent2) 16%, white))}
.mobile-drawer[data-open="true"]{display:block}

/* Cards / sections */
.hero{
  padding:26px 0 18px;
}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;align-items:stretch}

.card{background:linear-gradient(180deg,var(--surface), rgba(255,255,255,.84));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
@media (hover:hover){
  .card:hover{
    border-color:color-mix(in oklab, var(--border) 62%, var(--accent3) 38%);
    background:linear-gradient(180deg, color-mix(in oklab, var(--surface) 82%, var(--accent-soft) 18%), rgba(255,255,255,.84));
  }
}
.card-body{padding:18px}

.kicker{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
.dot{width:8px;height:8px;border-radius:999px;background:var(--ok);box-shadow:0 0 0 4px rgba(22,163,74,.15)}

h1{margin:10px 0 10px;font-size:clamp(22px, 2.2vw, 30px);line-height:1.2}
.lead{margin:0;color:var(--muted);font-size:clamp(13.5px, 1.1vw, 15.5px)}

/* Index hero: services list */
.hero-services{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border)}
.hero-services > b{display:block;font-size:13px;letter-spacing:.2px;margin-bottom:6px}
.service-list{margin:0;padding-left:18px;color:var(--muted);line-height:1.65}
.service-list li{margin:4px 0}

/* Headings: colored block style (opt-in) */
.title-block{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:14px;
  border:1px solid color-mix(in oklab, var(--accent3) 28%, transparent);
  background:linear-gradient(135deg, var(--accent-soft), color-mix(in oklab, var(--accent2) 12%, white));
}
.title-block::before{
  content:"";
  width:10px;
  height:28px;
  border-radius:999px;
  background:var(--accent3);
}

.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

/* Accent blocks (used on index section grouping) */
.data-block{
  background:linear-gradient(180deg,var(--surface2), rgba(255,255,255,.84));
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px;
}
.data-block.ok{border-left:6px solid var(--ok)}
.data-block.info{border-left:6px solid var(--accent)}
.data-block.warn{border-left:6px solid var(--warn)}
.data-block.danger{border-left:6px solid var(--danger)}
.data-block.secondary{border-left:6px solid rgba(15,23,42,.30)}

.block-title{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.55);
}
.block-title b{display:block;font-size:15px}
.block-title small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.block-title .swatch{width:12px;height:36px;border-radius:999px;background:var(--accent)}
.block-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.block-actions{align-self:flex-start}
.data-block[data-collapsed="true"] .block-content{display:none}
.data-block[data-collapsed="true"] .table-wrap{display:none}

/* Index: segmented toggle (notexpired filter) */
.seg-toggle{
  display:inline-flex;
  border:1px solid var(--border);
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.55);
}
.seg-toggle .btn{
  border:0;
  border-radius:0;
  background:transparent;
}
.seg-toggle .btn + .btn{border-left:1px solid var(--border)}
.seg-toggle .btn:hover{background:rgba(15,23,42,.05)}
.seg-toggle #btn_showHaveGoods[aria-pressed="true"]{background:rgba(22,163,74,.14)}
.seg-toggle #btn_showAllGoods[aria-pressed="true"]{background:rgba(37,99,235,.14)}

/* Index: show toggle only when expanded */
#blk-notexpired[data-collapsed="true"] .seg-toggle{display:none !important}
.data-block.ok .block-title .swatch{background:var(--ok)}
.data-block.info .block-title .swatch{background:var(--accent)}
.data-block.warn .block-title .swatch{background:var(--warn)}
.data-block.danger .block-title .swatch{background:var(--danger)}
.data-block.secondary .block-title .swatch{background:rgba(15,23,42,.30)}

/* --- Member page (moved from inline) --- */
.member-page .member-card{margin:40px auto;text-align:center}
.member-page .member-card--narrow{max-width:480px}
.member-page .member-card--wide{max-width:520px}

.member-page .member-icon-wrap{margin-bottom:20px}
.member-page .member-icon-wrap--sm{margin-bottom:16px}

.member-page .member-icon{color:#cbd5e1}
.member-page .member-icon--xl{font-size:3rem}
.member-page .member-icon--lg{font-size:2rem}

.member-page .member-title{margin-bottom:10px}
.member-page .member-title--sm{margin-bottom:8px}
.member-page .member-meta{margin-bottom:16px}
.member-page .member-hint{color:#64748b}
.member-page .member-link{text-decoration:underline}
.member-page .member-terms{margin-top:20px;font-size:.85rem;color:#94a3b8}

/* Member page logout bar */
.member-logout-bar{padding:18px 0 calc(28px + env(safe-area-inset-bottom, 0px));text-align:center}

/* Member / index2 shared banner */
.site-banner{
  width:100%;
  height:280px;
  background-image:url('./resources/Gemini_Generated_Image_ql9myiql9myiql9m.png');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  position:relative;
}
.site-banner::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.10);
}

/* Small-screen hero tweaks (previously inline) */
@media (max-width: 768px){
  .hero{display:block;padding-top:20px;padding-bottom:20px}
  .hero-intro h1{font-size:1.5rem}
  /* Override the rule that hides lead on some mobile layouts */
  .hero .card.hero-intro .lead{display:block !important}
  .site-banner{height:150px}
}

/* Delete button (row hide) */
.btn-delete{
  padding:6px 10px;
  font-size:0.85rem;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(37,99,235,.12);
  color:var(--text);
  cursor:pointer;
}
.btn-delete:hover{background:rgba(37,99,235,.18)}

/* LINE 登入按鈕專用樣式 */
.btn-line-login{
  background-color:#06C755;
  color:#fff;
  border:none;
  padding:12px 24px;
  font-size:1.1rem;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:background-color .2s;
  cursor:pointer;
  width:100%;
  justify-content:center;
  max-width:300px;
}
.btn-line-login:hover{background-color:#05b34c;color:#fff}
.btn-line-login i{font-size:1.5rem}

/* Index: on small screens, put filter buttons under collapse (notexpired block only) */
@media (max-width: 768px){
  #blk-notexpired .block-actions{flex-direction:column;align-items:flex-end}
  #blk-notexpired .block-actions .btn-collapse{order:1}
  #blk-notexpired .seg-toggle{order:2}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:10px 12px;border-radius:12px;border:1px solid var(--border);
  background:rgba(15,23,42,.03);
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  font-weight:600;
}
.btn:hover{background:rgba(15,23,42,.05);text-decoration:none}
.btn.primary{border-color:rgba(37,99,235,.28);background:linear-gradient(135deg, rgba(37,99,235,.18), rgba(56,189,248,.16))}
.btn.primary{border-color:color-mix(in oklab, var(--accent3) 30%, transparent);background:linear-gradient(135deg, var(--accent-soft), color-mix(in oklab, var(--accent2) 14%, white))}
.btn.primary:hover{background:linear-gradient(135deg, color-mix(in oklab, var(--accent3) 18%, white), color-mix(in oklab, var(--accent2) 16%, white))}
.btn:focus{outline:2px solid color-mix(in oklab, var(--accent3) 55%, transparent);outline-offset:2px}
.btn:focus-visible{outline:2px solid color-mix(in oklab, var(--accent3) 55%, transparent);outline-offset:2px}

/* Neutral/secondary button (used in Razor pages) */
.btn.secondary,
.btn.btn-secondary{
  background:rgba(255,255,255,.62);
}
.btn.secondary:hover,
.btn.btn-secondary:hover{
  background:rgba(255,255,255,.78);
}

/* Index-style LINE CTA button (used in top nav + mobile drawer) */
.btn-line{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:none;
  background-color:#06C755;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .2s;
}
.btn-line:hover{
  background-color:#05b34c;
  text-decoration:none;
}
.btn-line:focus-visible{outline:2px solid rgba(6,199,85,.35);outline-offset:2px}
.mobile-drawer .btn-line{margin-top:10px;width:fit-content}

.btn.danger{border-color:rgba(239,68,68,.30);background:rgba(239,68,68,.10)}
.btn.danger:hover{background:rgba(239,68,68,.14)}

.btn-collapse{border-color:rgba(37,99,235,.22);background:rgba(37,99,235,.10)}
.btn-collapse:hover{background:rgba(37,99,235,.14)}

.btn-pub{border-color:rgba(22,163,74,.25);background:rgba(22,163,74,.10)}
.btn-pub:hover{background:rgba(22,163,74,.14)}

.btn-all{border-color:rgba(245,158,11,.25);background:rgba(245,158,11,.12)}
.btn-all:hover{background:rgba(245,158,11,.16)}

/* Light warning/amber (pale yellow) CTA buttons */
.btn.cta-yellow{border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.14)}
.btn.cta-yellow:hover{background:rgba(245,158,11,.18)}

/* Loading overlay (used on dynamic pages) */
.loading-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(246,248,255,.86);
  background:color-mix(in oklab, var(--bg) 86%, transparent);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  backdrop-filter:saturate(150%) blur(10px);
}
.loading-overlay[hidden]{display:none}
.loading-card{
  width:min(360px, 92vw);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg,var(--surface), rgba(255,255,255,.84));
  box-shadow:var(--shadow);
  padding:16px 16px 14px;
  text-align:center;
}
.loading-img{
  width:54px;
  height:54px;
  display:block;
  margin:4px auto 10px;
  color:var(--accent);
  animation:loading-rotate 0.9s linear infinite;
}
.loading-text{font-size:14px;color:var(--muted)}
@keyframes loading-rotate{to{transform:rotate(360deg)}}

.pill{border:1px solid var(--border);border-radius:var(--radius-sm);background:rgba(15,23,42,.02);padding:12px}
.pill b{display:block;font-size:14px}
.pill small{display:block;color:var(--muted);margin-top:4px}

/* Allow pills to be used as links */
a.pill{text-decoration:none;display:block}
a.pill:hover{border-color:rgba(37,99,235,.22);background:rgba(37,99,235,.06)}

/* Prominent block label inside pills */
.pill .title-block{padding:6px 10px;border-radius:12px;font-size:13.5px}
.pill .title-block::before{height:22px}

/* Index hero-side: plain text links (no pill box) */
.hero-link{display:inline-flex;align-items:center;font-weight:800}
.hero-link-danger{color:var(--danger);text-decoration:underline;text-underline-offset:3px}
.hero-link-danger:hover{text-decoration-thickness:2px}
.hero-link-danger:focus-visible{outline:2px solid rgba(239,68,68,.45);outline-offset:3px;border-radius:10px}

/* Inline red emphasis + plain red link (no box) */
.danger-inline{color:var(--danger)}
.danger-link{color:inherit;text-decoration:underline;text-underline-offset:3px}
.danger-link:hover{text-decoration-thickness:2px}
.danger-link:focus-visible{outline:2px solid rgba(239,68,68,.45);outline-offset:3px;border-radius:10px}

.section{padding:12px 0 18px}
.section h2{margin:0 0 10px;font-size:18px}

/* Space stacked blocks inside cards (replaces inline margin-top styles) */
.card-body .data-block + .data-block{margin-top:16px}

/* Consistent spacing under block headers (replaces inline margin-bottom) */
.block-title{margin-bottom:10px}

.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.search{display:flex;align-items:center;gap:10px;flex:1;min-width:240px}
.search i{color:rgba(15,23,42,.45)}
.search input{width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.75);color:var(--text)}
.search input::placeholder{color:rgba(15,23,42,.45)}

.spinner{
  display:inline-block;
  width:18px;
  height:18px;
  border:2px solid rgba(37,99,235,.20);
  border-left-color:rgba(37,99,235,.95);
  border-radius:50%;
  animation:spin .8s linear infinite;
  vertical-align:text-bottom;
  flex:0 0 auto;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* iOS Safari: prevent auto-zoom on input focus (needs >= 16px) */
@media (max-width: 780px){
  .search input{font-size:16px}
}

.meta{color:var(--muted);font-size:12px}
.notice{margin-top:10px;color:var(--muted);font-size:12px}
.muted{color:var(--muted)}

@media (max-width: 768px) {
    /* 僅保留前 3 個按鈕，第 4 個 (n+4) 以後隱藏 */
    .notice > button.btn:nth-of-type(n+4) {
        display: none !important;
    }
    /* 讓按鈕區塊正常排版 */
    .notice {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }
}

@media (max-width: 520px) {
    .page-historygoods .toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px
    }

    .page-historygoods .search {
        width: 100%
    }
    /* 讓熱搜按鈕區域可換行，不撐開寬度 */
    .notice {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        line-height: 1.8;
    }
}

@media (max-width: 768px) {
    #myhistoryTable {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: fixed !important;
    }
        /* 隱藏不必要欄位 */
        #myhistoryTable th:nth-child(1), #myhistoryTable td:nth-child(1),
        #myhistoryTable th:nth-child(2), #myhistoryTable td:nth-child(2),
        #myhistoryTable th:nth-child(7), #myhistoryTable td:nth-child(7),
        #myhistoryTable th:nth-child(8), #myhistoryTable td:nth-child(8),
        #myhistoryTable th:nth-child(9), #myhistoryTable td:nth-child(9) {
            display: none !important;
        }

        /* 重新分配寬度：縮小 代號(股名) 與 股價，騰出空間給紀念品名稱 */
        #myhistoryTable th:nth-child(3), #myhistoryTable td:nth-child(3) {
            width: 28%;
        }
        /* 代號(股名) 縮小 */
        #myhistoryTable th:nth-child(4), #myhistoryTable td:nth-child(4) {
            width: 14%;
        }
        /* 股價 縮小 */
        #myhistoryTable th:nth-child(5), #myhistoryTable td:nth-child(5) {
            width: 29%;
        }
        /* 25年紀念品 放大 */
        #myhistoryTable th:nth-child(6), #myhistoryTable td:nth-child(6) {
            width: 29%;
        }
        /* 24年紀念品 放大 */

        #myhistoryTable td, #myhistoryTable th {
            white-space: normal !important;
            word-break: break-all;
            padding: 8px 4px !important;
            font-size: 13px;
        }
}

@media (min-width: 769px){
  /* Hide: 合併欄 代號(股名) */
  #myhistoryTable th:nth-child(3),
  #myhistoryTable td:nth-child(3){
    display:none;
  }
}

/* Main: About section prose */
.about-prose{margin-top:10px;max-width:72ch;margin-left:auto;margin-right:auto}
.about-prose p{margin:0}
.about-prose p + p{margin-top:10px}
.about-prose ul{margin:10px 0 0;padding-left:18px;color:var(--muted);line-height:1.65}
.about-prose li{margin:6px 0}

/* Table */
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--radius);background:rgba(255,255,255,.80)}
.table-wrap.is-scrollable{
  box-shadow:
    inset 10px 0 12px -14px rgba(15,23,42,.55),
    inset -10px 0 12px -14px rgba(15,23,42,.55);
}

/* Mobile: show a subtle hint that tables scroll horizontally (only when needed) */
.scroll-hint{display:none;margin:10px 2px 0;color:var(--muted);font-size:12px;text-align:right;letter-spacing:.2px}
@media (max-width: 780px){
  .scroll-hint[data-show="true"]{display:block}
}

table{border-collapse:separate;border-spacing:0;width:100%}

thead th{
  position:sticky;top:0;
  text-align:left;
  font-size:12px;
  letter-spacing:.2px;
  color:rgba(15,23,42,.86);
  background:color-mix(in oklab, var(--surface2) 74%, var(--accent-soft) 26%);
  border-bottom:1px solid var(--border);
  padding:12px;
  white-space:nowrap;
}

tbody td{
  padding:12px;
  border-bottom:1px solid rgba(15,23,42,.08);
  color:rgba(15,23,42,.92);
  font-size:clamp(13px, 1.2vw, 14.5px);
  vertical-align:top;
}

tr.no-data-row td{
  text-align:center;
  padding:18px 12px;
  font-weight:600;
}

/* Subtle zebra striping for readability */
tbody tr:nth-child(even) td{background:rgba(15,23,42,.018)}

tbody tr:hover td{background:rgba(37,99,235,.04)}

/* Stock id + recency badge wrapper (used by index) */
.stockid-wrap{display:inline-flex;align-items:center}

.sort-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.sort-btn:focus{outline:2px solid color-mix(in oklab, var(--accent3) 55%, transparent);outline-offset:3px;border-radius:8px}
.sort-ind{opacity:.65;font-size:11px}

.tag{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:12px;color:rgba(15,23,42,.84);background:rgba(15,23,42,.03);white-space:nowrap}
.tag.ok{border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.10)}
.tag.warn{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.10)}
.tag.danger{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10)}

/* Wrap-friendly reference note (used for '去年常會：...') */
.refnote{
  display:block;
  border:1px solid rgba(22,163,74,.35);
  background:rgba(22,163,74,.10);
  border-radius:12px;
  padding:6px 10px;
  color:rgba(15,23,42,.84);
  font-size:12px;
  line-height:1.35;
  white-space:normal;
  overflow-wrap:anywhere;
}

.datepill{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(37,99,235,.25);
  background:rgba(37,99,235,.10);
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  color:rgba(15,23,42,.86);
  white-space:nowrap;
}
.datepill.ok{border-color:rgba(22,163,74,.25);background:rgba(22,163,74,.10)}
.datepill.warn{border-color:rgba(245,158,11,.25);background:rgba(245,158,11,.12)}
.datepill.info{border-color:rgba(37,99,235,.25);background:rgba(37,99,235,.10)}

.mobile-only{display:none;color:var(--muted);font-size:12px;margin-top:4px}
@media (max-width: 668px){
  .mobile-only{display:block}
}

footer{margin:26px 0 36px;padding:18px 0;color:var(--muted);font-size:12px;text-align:center;border-top:1px solid var(--border);background:rgba(255,255,255,.45)}
footer a{color:rgba(15,23,42,.80)}

/* Index-style footer (used site-wide for consistent look) */
.site-footer{
  margin:26px 0 36px;
  padding:26px 0;
  border-top:1px solid var(--border);
  background:rgba(255,255,255,.55);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 0.8fr;
  gap:22px;
  align-items:start;
}
.footer-col h3{margin:0 0 10px;font-size:16px;color:var(--text)}
.footer-col h4{margin:0 0 10px;font-size:13px;color:rgba(15,23,42,.86);letter-spacing:.2px}
.footer-desc{margin:0;color:var(--muted);line-height:1.65}

.footer-info-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;color:var(--muted)}
.footer-info-list li{display:flex;gap:10px;align-items:flex-start}
.footer-info-list li i{margin-top:3px;opacity:.9}

.footer-links-vertical{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.footer-links-vertical a{color:rgba(15,23,42,.80);text-decoration:none}
.footer-links-vertical a:hover{text-decoration:underline}

.footer-bottom{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(15,23,42,.08);
  display:flex;
  justify-content:center;
  color:var(--muted);
  font-size:12px;
}

@media (max-width: 768px){
  .footer-grid{
    grid-template-columns:1fr;
    gap:18px;
    text-align:center;
  }
  .footer-links-vertical{align-items:center}
  .footer-info-list li{justify-content:center}
  .footer-info-list li{flex-direction:row}
  .footer-bottom{flex-direction:column;text-align:center}
}

/* 僅在寬螢幕設定最小寬度，手機版設為 0 */
@media (min-width: 769px) {
    #deadlineTable {
        min-width: 980px;
    }

    #notexpiredTable, #expiredTable {
        min-width: 860px;
    }
}

@media (max-width: 768px) {
    #notexpiredTable, #expiredTable {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

        /* 欄位寬度最佳化：代號 18% / 公司 20% / 股價 14% / 紀念品 48% */
        #notexpiredTable th:nth-child(1), #notexpiredTable td:nth-child(1),
        #expiredTable th:nth-child(1), #expiredTable td:nth-child(1) {
            width: 18%;
        }

        #notexpiredTable th:nth-child(2), #notexpiredTable td:nth-child(2),
        #expiredTable th:nth-child(2), #expiredTable td:nth-child(2) {
            width: 20%;
        }

        #notexpiredTable th:nth-child(3), #notexpiredTable td:nth-child(3),
        #expiredTable th:nth-child(3), #expiredTable td:nth-child(3) {
            width: 14%;
        }

        #notexpiredTable th:nth-child(4), #notexpiredTable td:nth-child(4),
        #expiredTable th:nth-child(4), #expiredTable td:nth-child(4) {
            width: 48%;
        }
}

/* Index: mobile readability (reduce horizontal scrolling + wrap specific headers) */
@media (max-width: 768px){
  #notexpiredTable{min-width:0;width:100%}
  #expiredTable{min-width:0;width:100%}
  #deadlineTable{min-width:0;width:100%}

  /* In '買進日未到期', move 今天/昨天/近期 badges to next line */
  #notexpiredTable .stockid-wrap{flex-direction:column;align-items:flex-start}
  #notexpiredTable .stockid-wrap .badge{margin-left:0;margin-top:4px}

  /* In '買進日未到期', keep 改選 on its own line */
  #notexpiredTable .election-line{margin-top:4px}

  /* In '近期可委託', mobile shows only: 代號 / 公司 / 紀念品 */
  #deadlineTable th:nth-child(1),
  #deadlineTable td:nth-child(1),
  #deadlineTable th:nth-child(4),
  #deadlineTable td:nth-child(4),
  #deadlineTable th:nth-child(6),
  #deadlineTable td:nth-child(6),
  #deadlineTable th:nth-child(7),
  #deadlineTable td:nth-child(7){display:none}

  /* Price header: show mm/dd and 盤後價 on two lines */
  #stockprice1, #stockprice2, #stockprice3{white-space:normal}
  #stockprice1 .sort-btn,
  #stockprice2 .sort-btn,
  #stockprice3 .sort-btn{display:inline-block;white-space:pre-line;line-height:1.15}
}

/* Historygoods: table width + mobile column visibility */
@media (min-width: 769px){
  #myTable{min-width:980px}
  /* Wide screens: hide the combined column '代號(股名)' */
  #myTable th:nth-child(3),
  #myTable td:nth-child(3){display:none}
}
#myTable tbody tr{background-color:transparent !important}
@media (max-width: 768px){
  /* Keep: 3代號(股名) 4股價 5/6近兩年紀念品 */
  #myTable th:nth-child(1),
  #myTable td:nth-child(1),
  #myTable th:nth-child(2),
  #myTable td:nth-child(2),
  #myTable th:nth-child(n+7),
  #myTable td:nth-child(n+7){display:none}

  /* Mobile: avoid horizontal scroll by wrapping and fixed layout */
  #myTable{width:100%;table-layout:fixed}
  #myTable thead th,
  #myTable tbody td{
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
    padding:10px 8px;
  }

  /* Column widths (remaining: 3代號(股名) 4股價 5/6近兩年紀念品) */
  #myTable th:nth-child(3),
  #myTable td:nth-child(3){width:26%}
  #myTable th:nth-child(4),
  #myTable td:nth-child(4){width:14%}
  #myTable th:nth-child(5),
  #myTable td:nth-child(5){width:30%}
  #myTable th:nth-child(6),
  #myTable td:nth-child(6){width:30%}
}

/* RWD: index table column visibility
   deadline: 1操作 2代號 3公司 4盤後價 5紀念品 6最後買進日 7收件截止日 8券商/股務 9類型
   others: 1代號 2公司 3盤後價 4紀念品 5最後買進日 6預估開會日 7券商/股務 8類型 */
@media (max-width: 768px){
  #deadlineTable th:nth-child(n+8),
  #deadlineTable td:nth-child(n+8){display:none}

  #notexpiredTable th:nth-child(n+6),
  #notexpiredTable td:nth-child(n+6),
  #expiredTable th:nth-child(n+6),
  #expiredTable td:nth-child(n+6){display:none}
}
@media (max-width: 668px){
  #deadlineTable th:nth-child(6),
  #deadlineTable td:nth-child(6){display:none}

  #notexpiredTable th:nth-child(5),
  #notexpiredTable td:nth-child(5),
  #expiredTable th:nth-child(5),
  #expiredTable td:nth-child(5){display:none}
}

/* RWD: header/menu */
@media (max-width: 920px){
  .hero-grid{grid-template-columns:1fr}
}
@media (max-width: 780px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
}

/* Mobile: show hero but keep it compact (CTA only) */
@media (max-width: 668px){
  /* Defensive: ensure CTA row never disappears on mobile */
  .hero-intro{display:block}
  .hero .card.hero-intro{display:block}
  .hero .card.hero-intro h1,
  .hero .card.hero-intro .lead{display:none}

  .hero .card.hero-intro .card-body{padding:12px}
  .hero .card.hero-intro .kicker{display:inline-flex;margin-bottom:8px}
  .hero .cta-row{
    display:flex !important;
    margin-top:0;
    flex-wrap:nowrap;
    gap:8px;
    justify-content:space-between;
  }
  .hero .cta-row .btn{
    display:inline-flex !important;
    flex:0 0 calc((100% - 16px) / 3);
    min-width:0;
    padding:9px 6px;
    font-size:12px;
    line-height:1;
    font-weight:700;
    white-space:nowrap;
    text-align:center;
  }
}

@media (max-width: 360px){
  .hero .cta-row{gap:6px}
  .hero .cta-row .btn{font-size:11px;padding:9px 4px}
}

/* Generic page layout helpers */
.grid{display:grid;grid-template-columns:1fr;gap:16px;padding:18px 0 22px}
.flow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.img{max-width:100%;height:auto;display:block;border-radius:var(--radius);border:1px solid var(--border);background:rgba(255,255,255,.65)}
@media (max-width: 780px){
  .flow{grid-template-columns:1fr}
}

/* Flow: interactive (guideline) */
.flow-steps{width:100%}
.flow-steps-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.flow-steps-grid.stack{grid-template-columns:1fr}
@media (max-width: 780px){
  .flow-steps-grid{grid-template-columns:1fr}
}

.flow-panel{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:rgba(255,255,255,.80);
  overflow:hidden;
}
.flow-panel-hd{
  padding:12px 14px;
  background:rgba(15,23,42,.03);
  border-bottom:1px solid var(--border);
}
.flow-panel-hd b{display:block;font-size:14px}
.flow-panel-hd small{display:block;color:var(--muted);margin-top:2px}

/* Guideline: title block larger inside flow panels */
.flow-panel-hd .title-block{
  font-size:clamp(15px, 1.4vw, 18px);
  padding:6px 10px;
  border-radius:12px;
}
.flow-panel-hd .title-block::before{height:24px}

/* Guideline: horizontal flow (flow2.png-like) */
.steps.horiz{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:10px 18px;
  padding:12px;
}
.steps.horiz .step{position:relative}
.steps.horiz .step:not(:last-child){padding-right:18px}
.steps.horiz .step:not(:last-child)::after{
  content:"→";
  position:absolute;
  right:2px;
  top:16px;
  color:rgba(239,68,68,.85);
  font-weight:800;
}
.steps.horiz .step details{height:100%;min-width:160px}
.steps.horiz .step summary{justify-content:center;text-align:center;padding:12px 12px}
.steps.horiz .step-body{max-width:360px}
@media (max-width: 780px){
  .steps.horiz{flex-direction:column;gap:10px}
  .steps.horiz .step:not(:last-child){padding-right:0}
  .steps.horiz .step:not(:last-child)::after{display:none}
  .steps.horiz .step details{min-width:unset;width:100%}
  .steps.horiz .step summary{justify-content:flex-start;text-align:left}
  .steps.horiz .step-body{max-width:none}
}

.steps{list-style:none;margin:0;padding:8px 10px;display:grid;gap:8px}
.step details{border:1px solid rgba(15,23,42,.10);border-radius:12px;background:rgba(255,255,255,.72);overflow:hidden}
.step summary{cursor:pointer;list-style:none;padding:10px 12px;display:flex;align-items:center;gap:10px;font-weight:700}
.step summary::-webkit-details-marker{display:none}
.step summary:focus{outline:2px solid rgba(37,99,235,.35);outline-offset:2px}

/* Main + Guideline: summary background as pale yellow */
.page-warn-summary .step summary{background:rgba(245,158,11,.12)}
.page-warn-summary .faq summary{background:rgba(245,158,11,.10)}
.step-num{
  width:26px;height:26px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
  background:rgba(37,99,235,.10);
  color:rgba(15,23,42,.86);
  flex:0 0 auto;
}
.step-body{padding:0 12px 12px;color:rgba(15,23,42,.88);font-size:13px}

/* FAQ */
.faq details{border:1px solid var(--border);border-radius:var(--radius-sm);background:rgba(255,255,255,.78);overflow:hidden}
.faq details + details{margin-top:10px}
.faq summary{cursor:pointer;list-style:none;padding:14px 44px 14px 14px;background:rgba(15,23,42,.03);font-weight:700;position:relative}
.faq summary:hover{background:color-mix(in oklab, var(--surface2) 78%, var(--accent-soft) 22%)}
.faq details[open] > summary{background:linear-gradient(135deg, var(--accent-soft), rgba(15,23,42,.02))}
.faq details > summary::after{content:"⌄";position:absolute;right:14px;top:50%;transform:translateY(-48%);color:rgba(15,23,42,.55);font-weight:900;transition:transform .15s ease,color .15s ease}
.faq details[open] > summary::after{transform:translateY(-48%) rotate(180deg);color:rgba(15,23,42,.75)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus{outline:2px solid color-mix(in oklab, var(--accent3) 55%, transparent);outline-offset:2px}
.faq summary:focus-visible{outline:2px solid color-mix(in oklab, var(--accent3) 55%, transparent);outline-offset:2px}
.faq-body{padding:14px 14px;color:rgba(15,23,42,.88)}
.faq-body p{margin:0}
.faq-body p + p{margin-top:10px}

.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid var(--border);background:rgba(15,23,42,.03);color:rgba(15,23,42,.84);vertical-align:middle;margin-left:6px}
.badge.danger{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10)}

.table-center thead th,.table-center tbody td{text-align:center}

/* Back to top */
.backtop{position:fixed;right:16px;bottom:16px;z-index:60;border:1px solid var(--border);background:rgba(255,255,255,.82);color:var(--text);border-radius:999px;padding:10px 12px;cursor:pointer;box-shadow:var(--shadow);display:none}
.backtop:focus{outline:2px solid color-mix(in oklab, var(--accent3) 55%, transparent);outline-offset:2px}
.backtop[data-show="true"]{display:inline-flex}

/* Anchor offset (sticky header) */
#qa,#about,#contact,#guadeline,#goods{scroll-margin-top:90px}

/* Compatibility: bootstrap-ish badges/buttons used in legacy markup */
.badge{gap:6px}
.rounded-pill{border-radius:999px}
.bg-light{background:rgba(255,255,255,.78)}
.text-dark{color:var(--text)}
.badge-pill{border-radius:999px}
.badge-primary{border-color:rgba(37,99,235,.28);background:rgba(37,99,235,.10)}
.badge-info{border-color:rgba(56,189,248,.35);background:rgba(56,189,248,.12)}
.badge-success{border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.10)}
.badge-warning{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.10)}
.badge-danger{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10)}
.badge-secondary{border-color:rgba(15,23,42,.18);background:rgba(15,23,42,.05)}
.badge-dark{border-color:rgba(15,23,42,.18);background:rgba(15,23,42,.05)}

.btn-sm{padding:8px 10px;font-size:13px;border-radius:10px}
.btn-outline-primary{border-color:rgba(37,99,235,.28);background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(56,189,248,.10))}
.btn-outline-info{border-color:rgba(56,189,248,.35);background:rgba(56,189,248,.10)}

.text-wrap{white-space:normal}
.right{float:right}

/* Compatibility: hide old W3 sidebar/header if present */
.w3-sidebar,
.w3-overlay,
header.w3-bar.w3-top{display:none !important}
.w3-main{margin-left:0 !important}
.w3-content{max-width:none !important}