/* ————————————————————————————————
   每日 AI 情報 — 訊號黃日報
   亮底、墨黑大字、電光黃 highlight
   零外部資源，系統字體堆疊
———————————————————————————————— */

:root {
  --bg: #F7F6F2;
  --surface: #FFFFFF;
  --ink: #17191D;
  --muted: #5A616C;
  --faint: #8B919B;
  --line: #E5E3DC;
  --hl: #FFD43B;           /* 電光黃 highlight */
  --hl-ink: #17191D;
  --hl-band: #FFD43B;      /* masthead 數字底下那條 */
  --chip-bg: #EDEBE4;
  --chip-on-bg: #17191D;
  --chip-on-ink: #FFFFFF;
  --card-r: 18px;

  /* 八分類色 */
  --c1: #0B7285;  /* 股票資金 */
  --c2: #D9480F;  /* Claude 官方 */
  --c3: #6741D9;  /* 開源精選 */
  --c4: #C2255C;  /* 廣告影音 */
  --c5: #2F9E44;  /* 電商政策 */
  --c6: #A07400;  /* 賺錢募資 */
  --c7: #1971C2;  /* 表演創作 */
  --c8: #9C36B5;  /* 同業競品 */

  /* 決定標籤 */
  --d-installed-bg: #D3F2DD; --d-installed-ink: #14602E;
  --d-suggest-bg: #FFE8B3;   --d-suggest-ink: #7A4E00;
  --d-skip-bg: #E7E7E4;      --d-skip-ink: #5A616C;
  --d-insp-bg: #EBE1FA;      --d-insp-ink: #5B3494;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141518;
    --surface: #1E2025;
    --ink: #EFEEE9;
    --muted: #A2A8B2;
    --faint: #7C828C;
    --line: #2C2F35;
    --hl: #E5BE2E;
    --hl-ink: #141518;
    --hl-band: #55470F;   /* 暗金：白字壓上去仍可讀 */
    --chip-bg: #26282E;
    --chip-on-bg: #EFEEE9;
    --chip-on-ink: #141518;

    --c1: #4CC3D9; --c2: #FF8A5C; --c3: #A48CFF; --c4: #FF7BA9;
    --c5: #6FD68A; --c6: #E3BE4E; --c7: #6FB3F2; --c8: #D48AE8;

    --d-installed-bg: #1C3A27; --d-installed-ink: #8FE0AA;
    --d-suggest-bg: #4A3A10;   --d-suggest-ink: #FFD980;
    --d-skip-bg: #2A2C31;      --d-skip-ink: #A2A8B2;
    --d-insp-bg: #322349;      --d-insp-ink: #CDB3F5;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto,
    "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  /* 底部留給浮動送出列，避免蓋住最後一張卡 */
  padding-bottom: 110px;
}

/* ————— 頂欄（sticky，不用 backdrop-filter） ————— */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.topstat {
  flex: 1;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unread-toggle {
  flex-shrink: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
}
.unread-toggle:active { transform: scale(.96); }
.unread-toggle[aria-pressed="true"] {
  background: var(--hl);
  border-color: var(--hl);
  color: var(--hl-ink);
}

/* ————— 巨大日期 masthead ————— */
.masthead {
  max-width: 720px;
  margin: 0 auto;
  padding: 26px 16px 8px;
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
.md-num {
  font-size: clamp(64px, 18vw, 96px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(transparent 58%, var(--hl-band) 58%, var(--hl-band) 94%, transparent 94%);
  padding: 0 6px;
}
.md-side { padding-bottom: 6px; min-width: 0; }
.md-week {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
}
.md-count {
  font-size: 15px;
  color: var(--muted);
  margin-top: 2px;
}
.md-cta {
  margin-top: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  color: var(--d-suggest-ink);
  background: var(--d-suggest-bg);
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: transform .1s;
}
.md-cta:active { transform: scale(.96); }

/* ————— 日期列 ————— */
.datestrip {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 16px 4px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.datestrip::-webkit-scrollbar { display: none; }
.dpill {
  flex-shrink: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 9px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: transform .1s;
}
.dpill:active { transform: scale(.96); }
.dpill.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.dpill .dnew {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--hl);
  margin-left: 6px;
  vertical-align: 2px;
}

/* ————— 篩選 chips（勾選式） ————— */
.filters {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 16px 6px;
}
.f-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.f-row2 { margin-top: 8px; }
.chip {
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--chip-bg);
  color: var(--muted);
  cursor: pointer;
  transition: transform .1s, background .15s, color .15s, border-color .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip:active { transform: scale(.95); }
.chip .n {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  opacity: .75;
}
.chip.on {
  border-color: var(--cc, var(--ink));
  color: var(--cc, var(--ink));
  background: var(--surface);
}
.chip.on::before {
  content: "✓";
  font-size: 12px;
  font-weight: 800;
}
.f-reset {
  margin-top: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 4px 2px;
}

/* ————— 卡片列表 ————— */
.list {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--card-r);
  padding: 16px 16px 14px 20px;
  cursor: pointer;
  transition: opacity .25s;
  /* fill-mode 一定要 backwards：both 會把 to{opacity:1} 永久釘住，
     蓋掉 .read 的變灰（animation 優先於一般宣告） */
  animation: cardin .3s ease backwards;
}
@keyframes cardin {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.card::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 4px;
  border-radius: 4px;
  background: var(--cc);
}
.card .cat {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--cc);
  margin-bottom: 5px;
}
.card h2 {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.01em;
  padding-right: 40px;
}
.card .sum {
  margin-top: 6px;
  font-size: 16px;
  color: var(--muted);
}
.badges { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  font-size: 13px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 8px;
}
.badge.d-installed { background: var(--d-installed-bg); color: var(--d-installed-ink); }
.badge.d-suggest   { background: var(--d-suggest-bg);   color: var(--d-suggest-ink); }
.badge.d-skip      { background: var(--d-skip-bg);      color: var(--d-skip-ink); }
.badge.d-insp      { background: var(--d-insp-bg);      color: var(--d-insp-ink); }

/* ————— 購物車（勾選 → 一次送回凱恩） ————— */
.cartrow {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cartbtn {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--muted);
  background: var(--bg);
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .1s, background .15s, color .15s, border-color .15s;
}
.cartbtn:active { transform: scale(.97); }
.cartbtn.in {
  background: var(--hl);
  border: 1.5px solid var(--hl);
  color: var(--hl-ink);
}
.sentmark {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 8px;
  background: var(--d-skip-bg);
  color: var(--d-skip-ink);
}
/* 已送出的卡片變灰（純本機記號，不上傳） */
.card.sent { opacity: .55; }
.card.sent.open { opacity: 1; }

/* 浮動送出列（右下、單手拇指區） */
.cartbar {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart-send {
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--hl);
  color: var(--hl-ink);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  cursor: pointer;
  transition: transform .1s;
}
.cart-send:active { transform: scale(.96); }
.cart-clear {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}

/* 已讀圓點按鈕 */
.readdot {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
  color: transparent;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.readdot:active { transform: scale(.9); }

/* 已讀狀態：整卡變灰＋打勾（展開閱讀中維持全對比，收合才灰） */
.card.read { opacity: .55; }
.card.read.open { opacity: 1; }
.card.read h2 { font-weight: 600; }
.card.read::before { background: var(--faint); }
.card.read .cat { color: var(--faint); }
.card.read .readdot {
  background: var(--faint);
  border-color: var(--faint);
  color: var(--surface);
}

/* 展開細節 */
.detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}
.detail > div { overflow: hidden; }
.card.open .detail { grid-template-rows: 1fr; }
.d-in { padding-top: 12px; }
.why {
  background: var(--bg);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 15.5px;
}
.why b {
  display: block;
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--faint);
  margin-bottom: 3px;
}
.reason {
  margin-top: 9px;
  font-size: 15px;
  color: var(--muted);
}
.meta {
  margin-top: 9px;
  font-size: 14px;
  color: var(--faint);
}
.url {
  margin-top: 7px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13.5px;
  word-break: break-all;
}
.url a { color: var(--c7); text-decoration: none; }
.url a:active { text-decoration: underline; }

/* 空／錯誤狀態 */
.state-msg {
  text-align: center;
  color: var(--muted);
  font-size: 16px;
  padding: 48px 16px;
  line-height: 1.8;
}
.state-msg button {
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: var(--hl);
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  margin-top: 10px;
  cursor: pointer;
}
@media (prefers-color-scheme: dark) {
  .state-msg button { color: var(--hl-ink); }
}

.foot {
  max-width: 720px;
  margin: 28px auto 0;
  padding: 0 16px;
  font-size: 13px;
  color: var(--faint);
  text-align: center;
}

/* ————— 桌機 ————— */
@media (min-width: 760px) {
  body { font-size: 17px; }
  .card h2 { font-size: 21px; }
  .card .sum { font-size: 16.5px; }
  .md-num { font-size: 110px; }
}