/* c2c-db 共用樣式（2026-10-08）。taste：淺色、單一主色 WeKen 黃只當強調、圓角一套 12px（按鈕與篩選用全圓）
   Luke：手機優先、主要動作在拇指範圍、一個畫面一件事。他的硬規則：不准黑底、不准任何左右滑動 */
:root{--ink:#1F2937;--sub:#5B6573;--mute:#8A93A0;--line:#E7EAEE;--bg:#F6F7F9;--card:#FFFFFF;--accent:#F5C518;--accent-ink:#1F2937;--danger:#B42318;--ok:#067647;--r:12px}
html{color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 system-ui,-apple-system,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;-webkit-font-smoothing:antialiased;line-break:strict}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.top{position:sticky;top:0;z-index:5;background:rgba(246,247,249,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px;min-height:56px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;text-decoration:none;font-size:16px;white-space:nowrap}
.brand img{width:26px;height:26px;display:block}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.nav a{min-height:40px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:600;color:var(--sub)}
.nav a[aria-current=page]{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.me{display:flex;align-items:center;gap:6px}.me img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--line)}
main{padding:32px 0 calc(40px + env(safe-area-inset-bottom))}
main.wrap{padding-top:24px;padding-bottom:calc(32px + env(safe-area-inset-bottom))}      /* 10/8 他抓到：.wrap 的 padding 蓋掉了上面那行，標題貼著選單的線 */      /* 外人審查 10/8：標題太貼導覽列 */
h1{font-size:24px;line-height:1.3;margin:0 0 4px;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere}
.lead{margin:0 0 16px;color:var(--sub);font-size:14px;text-wrap:balance;max-width:65ch}
/* taste 10/8：圓角只有三種。按鈕、篩選鈕、標籤全圓；卡片、輸入框、視窗 12px（--r）；小縮圖 8px */
.slab{display:block;font-size:13px;font-weight:600;color:var(--sub);margin:0 0 6px}
.chip:active{transform:scale(.97)}
/* 免責聲明（10/8 他要：要清楚，不能淡到看不清楚）：黃底深咖啡字，對比約 8 倍 */
.legal{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start;margin:0 0 14px;padding:10px 12px;border-radius:var(--r);background:#FEF6D8;border:1px solid #EFD27A;color:#5C4500;font-size:13px;font-weight:600;line-height:1.55;text-wrap:pretty;max-width:none}.legal svg{margin-top:2px;color:#9A6B00}
.btn{font:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn.ghost{background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-weight:600}
.btn.small{min-height:36px;padding:0 14px;font-size:13px}
.btn.warn{background:var(--card);color:var(--danger);box-shadow:inset 0 0 0 1px #F2D0CC}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.55;cursor:default}
.btn[aria-busy=true]::before,.spin{content:"";display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;text-decoration:none}
.chip span{color:var(--sub);font-weight:500;font-variant-numeric:tabular-nums}
.chip.on{background:var(--accent);border-color:var(--accent)}.chip.on span{color:var(--ink)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:13px;font-weight:600;color:var(--sub)}
input,select{font:inherit;min-height:44px;width:100%;min-width:0;padding:0 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.muted{color:var(--sub)}.small{font-size:13px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}h1{font-size:28px}}
@media(min-width:960px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{position:relative;display:block;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:#E9ECF0;border:0;padding:0;cursor:pointer;width:100%}
.tile img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.tile:active{transform:scale(.98)}
.vid{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:rgba(31,41,55,.78);color:#fff;font-size:12px;font-weight:600}
.nm{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 7px;font-size:12px;line-height:1.35;color:#fff;text-align:left;background:linear-gradient(to top,rgba(17,24,39,.72),rgba(17,24,39,0));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:28px 18px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);color:var(--sub)}
.empty b{color:var(--ink);font-size:16px}
.skel{aspect-ratio:1;border-radius:var(--r);background:linear-gradient(90deg,#E9ECF0 0%,#F1F3F6 50%,#E9ECF0 100%);background-size:200% 100%;animation:sk 1.2s ease-in-out infinite}
@keyframes sk{to{background-position:-200% 0}}
.err{padding:12px 14px;border-radius:var(--r);background:#FEF3F2;color:var(--danger);font-size:14px}
.badge{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:700;background:#F2F4F7;color:var(--sub);white-space:nowrap}
.badge.y{background:#FEF6D8;color:#7A5B00}.badge.g{background:#E7F6EC;color:var(--ok)}.badge.r{background:#FEF3F2;color:var(--danger)}
dialog{border:0;padding:0;border-radius:var(--r);max-width:min(560px,calc(100vw - 24px));width:100%;background:var(--card);color:var(--ink)}
dialog::backdrop{background:rgba(17,24,39,.55)}
.viewer img,.viewer video{display:block;width:100%;max-height:62vh;object-fit:contain;background:#F2F4F7}
.viewer .info{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.viewer .row{display:flex;gap:8px;flex-wrap:wrap}
.viewer .row .btn{flex:1 1 140px}
.x{position:absolute;right:10px;top:10px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.login{max-width:440px;margin:40px auto;text-align:left}
.login .btn{width:100%;margin-top:14px}
@media (prefers-reduced-motion:reduce){.btn:active,.tile:active,.chip:active{transform:none}.skel{animation:none}}
/* 10/8 改名「共享素材庫」變長，320 寬選單擠成兩行：窄螢幕縮字級與按鈕內距 */
@media(max-width:374px){.top .wrap{gap:8px}.brand{font-size:15px;gap:6px}.brand img{width:22px;height:22px}.nav{gap:0}.nav a{padding:0 9px;font-size:13px}}
.credit{max-width:1080px;margin:32px auto 0;padding:0 16px calc(20px + env(safe-area-inset-bottom));font-size:11px;color:#A3ABB6;text-align:center}
body.selecting .credit{padding-bottom:140px}
.pv{background:#FEF6D8;border-bottom:1px solid #F3E2A0}.pv .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding-top:6px;padding-bottom:6px}
.pv span{font-weight:700;font-size:14px;min-width:0}.pv small{display:block;font-weight:500;font-size:12px;color:#7A5B00}