/* ============================================================
   台股報價小工具 — tw-stock-widget.css
   大郁斜槓工作室 | wpdu.me
   ============================================================ */

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

/* ── CSS 變數 ── */
.twsw-card {
    --c-bg:       #ffffff;
    --c-border:   #e8e8e8;
    --c-name:     #c0392b;
    --c-symbol:   #888;
    --c-price:    #1a1a1a;
    --c-meta:     #666;
    --c-hl-bg:    #fafafa;
    --c-up:       #d32f2f;
    --c-down:     #1565c0;
    --c-btn:      #ddd;
    --c-shadow:   rgba(0,0,0,.08);
    --radius:     10px;
    --font-mono:  'DM Mono', 'Courier New', monospace;
    --font-serif: 'Noto Serif TC', serif;
}

/* ── Dark theme ── */
.twsw-card.theme-dark {
    --c-bg:       #1a1c22;
    --c-border:   #2e3140;
    --c-name:     #e06c6c;
    --c-symbol:   #6b7280;
    --c-price:    #f1f1f1;
    --c-meta:     #9ca3af;
    --c-hl-bg:    #22252f;
    --c-up:       #ef5350;
    --c-down:     #42a5f5;
    --c-btn:      #333;
    --c-shadow:   rgba(0,0,0,.35);
}

/* ── Card Base ── */
.twsw-card {
    position:        relative;
    display:         inline-block;
    min-width:       260px;
    max-width:       400px;
    background:      var(--c-bg);
    border:          1px solid var(--c-border);
    border-radius:   var(--radius);
    padding:         22px 24px 18px;
    box-shadow:      0 4px 18px var(--c-shadow);
    font-family:     var(--font-serif);
    transition:      box-shadow .25s, opacity .25s;
    box-sizing:      border-box;
}

.twsw-card.loading {
    opacity: .55;
    pointer-events: none;
}

/* ── Company Name ── */
.twsw-name {
    font-size:   1rem;
    font-weight: 900;
    color:       var(--c-name);
    line-height: 1.35;
    margin-bottom: 10px;
    letter-spacing: .03em;
}

/* ── Meta row (symbol + date) ── */
.twsw-meta {
    display:     flex;
    align-items: baseline;
    gap:         8px;
    margin-bottom: 4px;
}

.twsw-symbol {
    font-family: var(--font-mono);
    font-size:   .78rem;
    font-weight: 500;
    color:       var(--c-symbol);
    background:  var(--c-hl-bg);
    border:      1px solid var(--c-border);
    border-radius: 4px;
    padding:     1px 7px;
    letter-spacing: .06em;
}

.twsw-date {
    font-size:  .78rem;
    color:      var(--c-meta);
    font-weight: 400;
}

/* ── Price Row ── */
.twsw-price-row {
    display:     flex;
    align-items: baseline;
    gap:         12px;
    margin:      8px 0 2px;
}

.twsw-price {
    font-family: var(--font-mono);
    font-size:   2.4rem;
    font-weight: 500;
    color:       var(--c-price);
    letter-spacing: -.02em;
    line-height: 1;
}

.twsw-change {
    font-family: var(--font-mono);
    font-size:   .95rem;
    font-weight: 500;
    letter-spacing: .01em;
    padding:     2px 8px;
    border-radius: 4px;
}

.twsw-change.up   { color: var(--c-up);   background: rgba(211,47,47,.08); }
.twsw-change.down { color: var(--c-down); background: rgba(21,101,192,.08); }

.theme-dark .twsw-change.up   { background: rgba(239,83,80,.15); }
.theme-dark .twsw-change.down { background: rgba(66,165,245,.15); }

/* ── Change Absolute ── */
.twsw-change-abs {
    font-family: var(--font-mono);
    font-size:   .8rem;
    margin-bottom: 12px;
}
.twsw-change-abs.up   { color: var(--c-up); }
.twsw-change-abs.down { color: var(--c-down); }

/* ── High / Low ── */
.twsw-highlow {
    display:      flex;
    align-items:  center;
    gap:          8px;
    background:   var(--c-hl-bg);
    border:       1px solid var(--c-border);
    border-radius: 6px;
    padding:      8px 12px;
    font-family:  var(--font-mono);
    font-size:    .82rem;
    color:        var(--c-price);
    margin-top:   4px;
}

.hl-item {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.hl-item em {
    font-style:  normal;
    font-size:   .72rem;
    color:       var(--c-meta);
    white-space: nowrap;
}

.hl-sep {
    color:   var(--c-border);
    font-size: 1rem;
}

/* ── Volume ── */
.twsw-volume {
    font-size:  .78rem;
    color:      var(--c-meta);
    margin-top: 8px;
    font-family: var(--font-mono);
}

/* ── Refresh Button ── */
.twsw-refresh {
    position:    absolute;
    top:         12px;
    right:       12px;
    background:  var(--c-btn);
    border:      none;
    border-radius: 50%;
    width:       26px;
    height:      26px;
    line-height: 26px;
    text-align:  center;
    font-size:   .85rem;
    cursor:      pointer;
    color:       var(--c-meta);
    padding:     0;
    transition:  transform .4s ease, background .2s;
}

.twsw-refresh:hover {
    background: var(--c-border);
    transform: rotate(180deg);
}

/* ── IR Button 投資人專區 ── */
.twsw-ir-btn {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      12px;
    padding:         9px 14px;
    background:      var(--c-name);
    color:           #fff;
    font-family:     var(--font-serif);
    font-size:       .82rem;
    font-weight:     700;
    letter-spacing:  .04em;
    border-radius:   6px;
    text-decoration: none;
    transition:      opacity .2s, transform .2s;
}

.twsw-ir-btn:hover {
    opacity:   .88;
    transform: translateY(-1px);
    color:     #fff;
    text-decoration: none;
}

.twsw-ir-arrow {
    font-size:    1rem;
    margin-left:  8px;
    transition:   transform .2s;
}

.twsw-ir-btn:hover .twsw-ir-arrow {
    transform: translateX(4px);
}

/* Dark theme 按鈕 */
.theme-dark .twsw-ir-btn {
    background: var(--c-name);
}
.twsw-error {
    color:       #c0392b;
    font-size:   .875rem;
    padding:     8px 12px;
    background:  #fff5f5;
    border:      1px solid #f5c6c6;
    border-radius: 6px;
    display:     inline-block;
}