/* ============================================================ litlink boost! — Shared Components P3-B(2026-07-28): Google Fonts / tokens.css の @import はこのファイル自体の ダウンロード・パースが終わるまで発見されず直列に読み込まれるため、各HTMLの でによる並列読み込みに変更した（tokens.cssはこのファイルより前に 読み込む順序を維持）。読み込み側: creator/client/ops/index.html のを参照。 ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--bg-base); color: var(--text-primary); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } button { cursor: pointer; border: none; background: none; font-family: inherit; } a { color: inherit; text-decoration: none; } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-full); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 12px var(--sp-6); border-radius: var(--r-full); font-size: 15px; font-weight: 700; letter-spacing: -.01em; transition: transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-base) var(--ease-spring); user-select: none; } .btn:active { transform: scale(.96); } .btn-primary { background: var(--violet); color: #fff; box-shadow: 0 4px 20px var(--violet-glow); } .btn-primary:hover { background: var(--violet-bright); box-shadow: 0 6px 28px var(--violet-glow); } .btn-ghost { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); } .btn-ghost:hover { border-color: var(--violet); } .btn-danger { background: var(--danger); color: #fff; } .btn-lg { padding: 16px 32px; font-size: 17px; } .btn-sm { padding: 8px 16px; font-size: 13px; } .btn-full { width: 100%; } .btn-icon { padding: 10px; border-radius: var(--r-md); aspect-ratio: 1; } /* ── Boost Glow Button（CTA: バイオレットグラデ #6464FD→#B455FD） ── */ .btn-boost { background: var(--grad-cta); color: #fff; box-shadow: 0 4px 24px var(--violet-glow), 0 0 0 0 var(--violet); animation: pulse-glow 2s ease-in-out infinite; font-size: 18px; font-weight: 900; padding: 18px 40px; letter-spacing: -.02em; } .btn-boost:active { transform: scale(.94); } /* ============================================================ BOOST GAUGE COMPONENT ============================================================ */ .boost-gauge-wrap { width: 100%; position: relative; display: flex; flex-direction: column; align-items: center; } /* Full (2-2 ライブブースト) */ .boost-gauge-full { width: 100%; aspect-ratio: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; } .gauge-ring { position: absolute; inset: 0; } .gauge-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .gauge-ring-track { fill: none; stroke: var(--bg-elevated); stroke-width: 12; } .gauge-ring-fill { fill: none; stroke-width: 12; stroke: var(--gauge-low); stroke-linecap: round; transition: stroke-dashoffset var(--dur-gauge) var(--ease-spring), stroke var(--dur-slow) var(--ease-spring); } .gauge-ring-fill.near { stroke: var(--gauge-near); filter: drop-shadow(0 0 8px var(--gauge-near)); } .gauge-ring-fill.full { stroke: var(--gauge-full); filter: drop-shadow(0 0 12px var(--gauge-full)); } .gauge-center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; } .gauge-pct { font-size: clamp(48px, 14vw, 80px); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--text-primary); transition: color var(--dur-slow); } .gauge-pct.near { color: var(--gauge-near); text-shadow: 0 0 24px var(--gauge-near); } .gauge-pct.full { color: var(--gauge-full); text-shadow: 0 0 40px var(--gauge-full); } .gauge-label { font-size: 13px; color: var(--text-secondary); font-weight: 500; letter-spacing: .04em; } .gauge-participants { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; } /* Mini (ホーム等) */ .boost-gauge-mini { width: 100%; height: 8px; background: var(--bg-elevated); border-radius: var(--r-full); overflow: hidden; } .boost-gauge-mini-fill { height: 100%; background: var(--grad-cta); border-radius: var(--r-full); transition: width var(--dur-gauge) var(--ease-spring); } .boost-gauge-mini-fill.near { background: var(--grad-gauge); } .boost-gauge-mini-fill.full { background: linear-gradient(90deg, var(--gauge-full), #fbbf24); } /* Tiny (マーケット棚) */ .boost-gauge-tiny { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); } .boost-gauge-tiny-bar { flex: 1; height: 4px; background: var(--bg-elevated); border-radius: var(--r-full); overflow: hidden; } .boost-gauge-tiny-fill { height: 100%; border-radius: var(--r-full); background: var(--violet); transition: width var(--dur-gauge) var(--ease-spring); } /* ============================================================ STATUS BADGE (CampaignStatusBadge) ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-full); font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; } .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* 12 states */ .badge-draft { background: rgba(85,85,106,.25); color: var(--text-muted); } .badge-review { background: rgba(56,189,248,.15); color: var(--info); } .badge-approved { background: rgba(100,100,253,.18); color: var(--violet-bright); } .badge-recruiting { background: rgba(34,197,94,.15); color: var(--success); } .badge-in-progress { background: rgba(100,100,253,.2); color: var(--violet-bright); animation: pulse-glow 2s ease-in-out infinite; } .badge-submit-wait { background: rgba(245,158,11,.15); color: var(--warning); } .badge-review-wait { background: rgba(245,158,11,.18); color: var(--warning); } .badge-revision { background: rgba(239,68,68,.15); color: var(--danger); } .badge-achieved { background: rgba(34,197,94,.2); color: var(--success); } .badge-closed { background: rgba(85,85,106,.2); color: var(--text-muted); } .badge-canceled { background: rgba(239,68,68,.12); color: var(--danger); opacity:.7; } .badge-frozen { background: rgba(56,189,248,.1); color: var(--info); opacity:.7; } /* ============================================================ CAMPAIGN CARD ============================================================ */ .campaign-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--dur-fast) var(--ease-bounce), border-color var(--dur-base), box-shadow var(--dur-base); cursor: pointer; } .campaign-card:active { transform: scale(.97); } .campaign-card:hover { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet-trace); } .campaign-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--bg-elevated); } .campaign-card__body { padding: var(--sp-4); } .campaign-card__brand { font-size: 11px; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; } .campaign-card__title { font-size: 15px; font-weight: 700; line-height: 1.3; margin-top: var(--sp-1); } .campaign-card__meta { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; } .campaign-card__reward { font-size: 16px; font-weight: 900; color: var(--text-primary); } .campaign-card__gauge { margin-top: var(--sp-3); } /* Shelf variant (3-1) */ .campaign-card-shelf { aspect-ratio: 3/4; width: 160px; flex-shrink: 0; } .campaign-card-shelf .campaign-card__img { aspect-ratio: 1; } /* ============================================================ CREATOR CARD ============================================================ */ .creator-card { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); } .creator-card__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--bg-elevated); flex-shrink: 0; border: 2px solid var(--border); } .creator-card__info { flex: 1; min-width: 0; } .creator-card__name { font-size: 14px; font-weight: 700; } .creator-card__sns { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ INPUTS ============================================================ */ .input { width: 100%; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text-primary); font-family: var(--font); font-size: 15px; padding: 13px var(--sp-4); outline: none; transition: border-color var(--dur-fast); } .input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-trace); } .input::placeholder { color: var(--text-muted); } .input-label { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: var(--sp-2); display: block; letter-spacing: .02em; } .input-group { display: flex; flex-direction: column; gap: 2px; } /* ============================================================ NOTIFICATION ITEM ============================================================ */ .notif-item { display: flex; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); transition: background var(--dur-fast); cursor: pointer; } .notif-item:hover { background: var(--bg-surface); } .notif-item.unread { background: var(--violet-trace); } .notif-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; } .notif-body { flex: 1; min-width: 0; } .notif-title { font-size: 14px; font-weight: 600; line-height: 1.3; } .notif-text { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } .notif-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; } /* ============================================================ SCORE / RANK ============================================================ */ .rank-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--r-full); font-size: 13px; font-weight: 900; letter-spacing: -.01em; } .rank-bronze { background: linear-gradient(135deg, #a16207, #78350f); color: #fde68a; } .rank-silver { background: linear-gradient(135deg, #6b7280, #374151); color: #e5e7eb; } .rank-gold { background: linear-gradient(135deg, #d97706, #b45309); color: #fef3c7; } .rank-platinum { background: linear-gradient(135deg, #7c3aed, #4c1d95); color: #e9d5ff; } .rank-diamond { background: linear-gradient(135deg, #6464FD, #a855f7); color: #fff; box-shadow: 0 0 16px var(--violet-glow); } .xp-bar { width: 100%; height: 6px; background: var(--bg-elevated); border-radius: var(--r-full); overflow: hidden; } .xp-bar-fill { height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--violet), #a855f7); transition: width 800ms var(--ease-spring); } /* ============================================================ TOAST ============================================================ */ #toast-container { position: fixed; top: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); z-index: 9999; pointer-events: none; width: min(420px, 100%); } .toast { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 600; animation: slideUp var(--dur-base) var(--ease-snap) both; pointer-events: auto; } .toast-success { border-color: rgba(34,197,94,.4); } .toast-error { border-color: rgba(239,68,68,.4); } /* ============================================================ PAYMENT STATUS ROW ============================================================ */ .payment-row { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); } .payment-amount { font-size: 17px; font-weight: 900; } .payment-status { font-size: 12px; } .payment-pending { color: var(--warning); } .payment-confirmed { color: var(--success); } .payment-paid { color: var(--text-muted); } /* ============================================================ MEDIA UPLOADER ============================================================ */ .media-uploader { border: 2px dashed var(--border); border-radius: var(--r-lg); padding: var(--sp-8); text-align: center; transition: border-color var(--dur-fast), background var(--dur-fast); cursor: pointer; } .media-uploader:hover, .media-uploader.drag-over { border-color: var(--violet); background: var(--violet-trace); } .upload-icon { font-size: 32px; margin-bottom: var(--sp-3); } .upload-label { font-size: 14px; color: var(--text-secondary); } .upload-sub { font-size: 12px; color: var(--text-muted); margin-top: var(--sp-1); } .progress-bar { width: 100%; height: 4px; background: var(--bg-elevated); border-radius: var(--r-full); overflow: hidden; margin-top: var(--sp-3); } .progress-fill { height: 100%; background: var(--violet); border-radius: var(--r-full); transition: width var(--dur-base); } /* ============================================================ IGNITE (発射演出) OVERLAY ============================================================ */ #ignite-overlay { position: fixed; inset: 0; background: radial-gradient(ellipse at center, var(--violet-glow) 0%, rgba(0,0,0,0) 70%), var(--bg-base); z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s; } #ignite-overlay.active { opacity: 1; pointer-events: auto; animation: ignite .8s var(--ease-spring) both; } .ignite-rocket { font-size: 80px; animation: float-up 1.2s ease-in-out infinite; } .ignite-title { font-size: 36px; font-weight: 900; letter-spacing: -.03em; margin-top: var(--sp-5); text-align: center; } .ignite-sub { font-size: 16px; color: var(--text-secondary); margin-top: var(--sp-2); text-align: center; } .ignite-ripples { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .ignite-ripple { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; border: 2px solid rgba(100,100,253,.5); animation: ripple 1.5s ease-out infinite; } .ignite-ripple:nth-child(2) { animation-delay: .4s; } .ignite-ripple:nth-child(3) { animation-delay: .8s; } /* ── IGNITE v2: 3フェーズの感情弧（タメ→爆発→余韻） ── */ .ignite-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; } #ignite-overlay.phase-burst .ignite-flash { animation: ignite-flash .6s ease-out both; } @keyframes ignite-flash { 0% { opacity: 0 } 30% { opacity: .9 } 100% { opacity: 0 } } .ignite-burst { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .ignite-av { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: var(--bg-elevated); border: 2px solid var(--violet-bright); display: flex; align-items: center; justify-content: center; font-size: 18px; opacity: 0; transform: translate(0,0) scale(.4); } #ignite-overlay.phase-burst .ignite-av, #ignite-overlay.phase-afterglow .ignite-av { animation: ignite-burst 1.4s var(--ease-snap) forwards; } @keyframes ignite-burst { 0% { opacity: 0; transform: translate(0,0) scale(.4) } 20% { opacity: 1; transform: translate(calc(var(--tx)*.4), calc(var(--ty)*.4)) scale(1) } 70% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1) } 100% { opacity: 0; transform: translate(calc(var(--tx)*1.15), calc(var(--ty)*1.15)) scale(.8) } } /* フェーズ1: タメ（静寂・収束） */ .ignite-tame { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); opacity: 0; pointer-events: none; transition: opacity .4s; } #ignite-overlay.phase-tame .ignite-tame { opacity: 1; } .ignite-tame-text { font-size: 18px; font-weight: 700; color: var(--text-primary); letter-spacing: .04em; } .ignite-tame-ring { width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--violet); box-shadow: 0 0 40px var(--violet-glow); animation: ignite-converge 1s var(--ease-snap) both; } @keyframes ignite-converge { 0% { transform: scale(2.2); opacity: 0 } 100% { transform: scale(1); opacity: 1 } } /* フェーズ2: 爆発 */ #ignite-overlay .ignite-rocket, #ignite-overlay .ignite-title, #ignite-overlay .ignite-ripples { opacity: 0; transition: opacity .3s; } #ignite-overlay.phase-burst .ignite-rocket, #ignite-overlay.phase-afterglow .ignite-rocket, #ignite-overlay.phase-burst .ignite-title, #ignite-overlay.phase-afterglow .ignite-title, #ignite-overlay.phase-burst .ignite-ripples { opacity: 1; } /* 紙吹雪 */ .ignite-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .confetti-piece { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: confetti-fall linear forwards; } /* フェーズ3: 余韻（貢献称賛＋仲間クレジット） */ .ignite-afterglow { margin-top: var(--sp-5); text-align: center; max-width: 320px; opacity: 0; transition: opacity .5s; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); } #ignite-overlay.phase-afterglow .ignite-afterglow { opacity: 1; } .ignite-credit-you { font-size: 18px; font-weight: 900; color: var(--pink); text-shadow: 0 0 24px var(--pink-soft); } .ignite-credit-count { font-size: 13px; color: var(--text-secondary); } .ignite-actions { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; margin-top: var(--sp-2); } /* ============================================================ 応援コンポーネント（クラファン的熱量の可視化） ============================================================ */ /* SupporterRow: 参加者アバター帯＋人数 */ .supporter-row { display: flex; align-items: center; gap: var(--sp-3); } .supporter-avatars { display: flex; } .supporter-avatars .sp-av { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-elevated); border: 2px solid var(--bg-base); margin-left: -8px; font-size: 14px; display: flex; align-items: center; justify-content: center; } .supporter-avatars .sp-av:first-child { margin-left: 0; } .supporter-count { font-size: 13px; color: var(--text-secondary); font-weight: 600; } .supporter-count b { color: var(--text-primary); } /* RemainCounter: 発射までの残り（近づくとピンク） */ .remain-counter { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--r-full); background: var(--violet-trace); border: 1px solid rgba(100,100,253,.3); font-size: 13px; font-weight: 900; color: var(--violet); } .remain-counter.near { background: var(--pink-soft); border-color: rgba(245,48,138,.4); color: var(--pink); } /* CheerComment: 推しポイント（公開応援コメント） */ .cheer-list { display: flex; flex-direction: column; gap: var(--sp-2); } .cheer-item { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); } .cheer-item .cheer-av { font-size: 22px; flex-shrink: 0; } .cheer-item .cheer-handle { font-size: 12px; font-weight: 700; color: var(--violet); } .cheer-item .cheer-text { font-size: 13px; line-height: 1.5; margin-top: 2px; } .cheer-input-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); } .cheer-input-row .input { flex: 1; } .cheer-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); } /* CreditList: 一緒に発射した仲間 */ .credit-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-height: 96px; overflow: hidden; } .credit-chip { font-size: 11px; font-weight: 700; color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border); padding: 3px 10px; border-radius: var(--r-full); } .credit-chip.you { color: var(--pink); border-color: rgba(245,48,138,.5); } /* StickerBadge: 集める称号ステッカー（デコ・キラキラ） */ .sticker-badge { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-2); background: radial-gradient(circle at 30% 20%, rgba(148,148,249,.18), var(--bg-surface) 70%); border: 1px solid var(--border); border-radius: var(--r-lg); text-align: center; } .sticker-badge .sticker-emoji { font-size: 34px; filter: drop-shadow(0 0 10px var(--violet-glow)); } .sticker-badge .sticker-name { font-size: 11px; font-weight: 700; line-height: 1.3; } .sticker-badge .sticker-sub { font-size: 10px; color: var(--text-muted); } .sticker-badge.earned { border-color: rgba(148,148,249,.5); animation: sticker-pop .5s var(--ease-bounce) both; } .sticker-badge.earned::after { content: '✦'; position: absolute; top: 6px; right: 8px; color: var(--energy); font-size: 12px; animation: sparkle 1.8s ease-in-out infinite; } .sticker-badge.locked { opacity: .38; filter: grayscale(.8); } /* 公認ブーストバッジ（PR表記を誇るデザイン） */ .official-boost-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-full); background: linear-gradient(135deg, rgba(100,100,253,.14), rgba(180,85,253,.12)); border: 1px solid rgba(100,100,253,.4); font-size: 11px; font-weight: 900; letter-spacing: .04em; color: var(--violet); } /* ============================================================ UTILITIES ============================================================ */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .flex-1 { flex: 1; } .text-muted { color: var(--text-secondary); } .text-tiny { font-size: 12px; } .text-sm { font-size: 13px; } .text-bold { font-weight: 700; } .text-black { font-weight: 900; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .divider { height: 1px; background: var(--border); margin: var(--sp-4) 0; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .skeleton { background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-surface) 50%, var(--bg-elevated) 75%); background-size: 200% 100%; animation: skeleton-wave 1.4s linear infinite; border-radius: var(--r-sm); } @keyframes skeleton-wave { from { background-position: 200% 0 } to { background-position: -200% 0 } } /* section switching */ .screen { display: none; flex-direction: column; flex: 1; overflow-y: auto; } /* P3-B(2026-07-28): 画面切替フェードを250ms→120msへ短縮（体感の切替速度改善）。 --dur-base はボーダー/box-shadow/幅遷移等でも共有される汎用トークンのため、 ここを変えると無関係な遷移まで速くなってしまう。フェード専用に値を直書きする。 */ .screen.active { display: flex; animation: fadeIn 120ms var(--ease-spring); } /* ── Filter chips (shared across all surfaces) ── */ .filter-chip { padding: 8px 16px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--bg-elevated); border: 1px solid var(--border); cursor: pointer; transition: all var(--dur-fast); flex-shrink: 0; color: var(--text-secondary); } .filter-chip.active { background: var(--violet); border-color: var(--violet); color: #fff; } .filter-chip:hover:not(.active) { border-color: var(--violet); color: var(--text-primary); } /* ── Select element inherits input style ── */ select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238888a8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } textarea.input { resize: vertical; min-height: 80px; } /* ============================================================ G-1: PIISecureInput ============================================================ */ .pii-field { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); } .pii-label { font-size: 13px; font-weight: 700; color: var(--text-secondary); letter-spacing: .02em; display: flex; align-items: center; gap: var(--sp-2); } .pii-input-wrap { position: relative; display: flex; align-items: center; } .pii-input { width: 100%; padding: 14px var(--sp-10) 14px var(--sp-4); background: var(--bg-elevated); border: 1.5px solid var(--border); border-radius: var(--r-md); font-size: 15px; color: var(--text-primary); font-family: var(--font-mono); letter-spacing: .08em; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); outline: none; } .pii-input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--violet-trace); } .pii-input.confirmed { border-color: var(--success); background: rgba(34,197,94,.05); } .pii-input.error { border-color: var(--danger); background: rgba(239,68,68,.05); } .pii-toggle { position: absolute; right: var(--sp-4); background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 18px; padding: 0; transition: color var(--dur-fast); line-height: 1; } .pii-toggle:hover { color: var(--text-primary); } .pii-hint { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; } .pii-hint.success { color: var(--success); } .pii-hint.error { color: var(--danger); } .pii-confirm-step { overflow: hidden; max-height: 0; transition: max-height var(--dur-base) var(--ease-snap), opacity var(--dur-base); opacity: 0; } .pii-confirm-step.open { max-height: 100px; opacity: 1; } .pii-vault-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--bg-elevated); border: 1px solid var(--border); padding: 4px 10px; border-radius: var(--r-full); margin-top: var(--sp-2); } /* ============================================================ G-1: VideoEmbedPlayer ============================================================ */ .video-embed { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--dur-fast); } .video-embed:hover { border-color: var(--violet); } .video-url-bar { display: flex; gap: var(--sp-2); padding: var(--sp-3); border-bottom: 1px solid var(--border); } .video-url-input { flex: 1; padding: 10px var(--sp-4); background: var(--bg-surface); border: 1.5px solid var(--border); border-radius: var(--r-md); font-size: 14px; color: var(--text-primary); outline: none; transition: border-color var(--dur-fast); } .video-url-input:focus { border-color: var(--border-focus); } .video-load-btn { padding: 10px 16px; border-radius: var(--r-md); background: var(--violet); color: #fff; border: none; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: opacity var(--dur-fast); } .video-load-btn:hover { opacity: .85; } .video-preview-area { position: relative; width: 100%; aspect-ratio: 9/16; max-height: 480px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-surface); cursor: pointer; overflow: hidden; } .video-preview-area.wide { aspect-ratio: 16/9; } .video-thumb-icon { font-size: 48px; } .video-thumb-label { font-size: 14px; color: var(--text-secondary); margin-top: var(--sp-2); } .video-play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8,8,16,.6); opacity: 0; transition: opacity var(--dur-fast); } .video-preview-area:hover .video-play-overlay { opacity: 1; } .video-play-btn { width: 64px; height: 64px; border-radius: 50%; background: var(--violet); display: flex; align-items: center; justify-content: center; font-size: 28px; transition: transform var(--dur-fast) var(--ease-bounce); } .video-preview-area:hover .video-play-btn { transform: scale(1.1); } .video-iframe { width: 100%; height: 100%; border: none; } .video-meta { padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); background: var(--bg-surface); } .video-platform-badge { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-full); } .video-platform-badge.tiktok { background: rgba(0,0,0,.6); color: #fff; border: 1px solid rgba(255,255,255,.2); } .video-platform-badge.instagram { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af); color: #fff; } .video-platform-badge.youtube { background: #ff0000; color: #fff; } .video-meta-url { font-size: 12px; color: var(--text-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================ G-1: AIVerdictDisplay ============================================================ */ .ai-verdict { background: var(--bg-surface); border: 1.5px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .ai-verdict.ok { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.04); } .ai-verdict.improve{ border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.04); } .ai-verdict.ng { border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.04); } .ai-verdict-header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); } .ai-verdict-icon { font-size: 22px; } .ai-verdict-title { font-size: 15px; font-weight: 900; flex: 1; } .ai-verdict-score { font-size: 24px; font-weight: 900; } .ai-verdict-score.ok { color: var(--success); } .ai-verdict-score.improve{ color: var(--warning); } .ai-verdict-score.ng { color: var(--danger); } .ai-verdict-label { font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: var(--r-full); margin-left: var(--sp-2); } .ai-verdict-label.ok { background: rgba(34,197,94,.2); color: var(--success); } .ai-verdict-label.improve{ background: rgba(245,158,11,.2); color: var(--warning); } .ai-verdict-label.ng { background: rgba(239,68,68,.2); color: var(--danger); } .ai-verdict-body { padding: var(--sp-5); } .ai-dim-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); } .ai-dim { display: flex; align-items: center; gap: var(--sp-3); } .ai-dim-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); width: 100px; flex-shrink: 0; } .ai-dim-bar { flex: 1; height: 8px; background: var(--bg-elevated); border-radius: var(--r-full); overflow: hidden; } .ai-dim-fill { height: 100%; border-radius: var(--r-full); transition: width var(--dur-slow) var(--ease-snap) .3s; background: var(--success); } .ai-dim-fill.warn { background: var(--warning); } .ai-dim-fill.fail { background: var(--danger); } .ai-dim-val { font-size: 12px; font-weight: 900; width: 32px; text-align: right; flex-shrink: 0; } .ai-reasons { display: flex; flex-direction: column; gap: var(--sp-2); } .ai-reason { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: 13px; line-height: 1.5; color: var(--text-secondary); } .ai-reason-icon { flex-shrink: 0; margin-top: 1px; } /* ============================================================ G-1: CreatorCard 詳細版 ============================================================ */ .creator-card-detail { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; transition: border-color var(--dur-base), box-shadow var(--dur-base); } .creator-card-detail:hover { border-color: var(--violet); box-shadow: 0 8px 32px rgba(100,100,253,.15); } .cc-header { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-5); } .cc-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-elevated); font-size: 26px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--violet); flex-shrink: 0; box-shadow: 0 0 12px var(--violet-glow); } .cc-info { flex: 1; } .cc-name { font-size: 17px; font-weight: 900; } .cc-handle { font-size: 13px; color: var(--text-muted); margin-top: 2px; } .cc-rank-row { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); } .cc-stats { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .cc-stat { padding: var(--sp-4); text-align: center; } .cc-stat + .cc-stat { border-left: 1px solid var(--border); } .cc-stat-val { font-size: 18px; font-weight: 900; } .cc-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; letter-spacing: .02em; } .cc-sns { display: flex; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); } .cc-sns-chip { display: flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--r-full); font-size: 12px; font-weight: 700; background: var(--bg-elevated); border: 1px solid var(--border); } .cc-sns-chip .followers { color: var(--text-secondary); margin-left: 4px; } .cc-history { padding: var(--sp-4) var(--sp-5) var(--sp-5); } .cc-history-title { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--sp-3); } .cc-history-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); font-size: 13px; } .cc-history-item:last-child { border-bottom: none; } .cc-history-brand { font-weight: 700; flex: 1; } .cc-history-reward { color: var(--success); font-weight: 700; } /* ============================================================ G-1: Rich Campaign Card ============================================================ */ .campaign-card-rich { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; cursor: pointer; transition: border-color var(--dur-base) var(--ease-snap), box-shadow var(--dur-base), transform var(--dur-fast) var(--ease-bounce); } .campaign-card-rich:hover { border-color: var(--violet); box-shadow: 0 8px 40px rgba(100,100,253,.15); transform: translateY(-2px); } .campaign-card-rich:active { transform: scale(.99); } .ccr-hero { position: relative; width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--bg-elevated) 0%, #1a1a38 100%); display: flex; align-items: center; justify-content: center; font-size: 48px; overflow: hidden; } .ccr-live-tag { position: absolute; top: var(--sp-3); left: var(--sp-3); display: flex; align-items: center; gap: 5px; background: rgba(8,8,16,.8); backdrop-filter: blur(8px); border: 1px solid rgba(239,68,68,.4); padding: 4px 10px; border-radius: var(--r-full); font-size: 11px; font-weight: 700; color: var(--danger); } .ccr-gauge-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--bg-elevated); } .ccr-gauge-bar { height: 100%; background: linear-gradient(90deg, var(--violet) 0%, var(--energy) 100%); transition: width var(--dur-slow) var(--ease-snap); position: relative; } .ccr-gauge-bar::after { content: ''; position: absolute; right: 0; top: -2px; bottom: -2px; width: 3px; background: #fff; border-radius: var(--r-full); box-shadow: 0 0 8px var(--violet-glow); } .ccr-body { padding: var(--sp-4); } .ccr-brand { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; } .ccr-title { font-size: 15px; font-weight: 900; margin: var(--sp-1) 0 var(--sp-3); line-height: 1.3; } .ccr-footer { display: flex; align-items: center; justify-content: space-between; } .ccr-reward { font-size: 15px; font-weight: 900; color: var(--success); } .ccr-people { font-size: 13px; font-weight: 700; color: var(--text-secondary); } .ccr-people b { color: var(--text-primary); font-size: 15px; } .ccr-pct { font-size: 13px; font-weight: 900; color: var(--violet); } /* ============================================================ Confirm モーダル（危険/課金操作の確認・理由入力） ============================================================ */ .bc-overlay { position: fixed; inset: 0; background: var(--bg-overlay); z-index: 11000; display: none; align-items: center; justify-content: center; padding: var(--sp-4); } .bc-overlay.open { display: flex; animation: fadeIn .15s ease-out; } .bc-panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); max-width: 460px; width: 100%; padding: var(--sp-5); box-shadow: var(--shadow-lg); animation: slideUp .2s var(--ease-snap); } .bc-title { font-size: 17px; font-weight: 800; margin-bottom: var(--sp-2); } .bc-body { font-size: 14px; color: var(--text-secondary); line-height: 1.7; } .bc-summary { margin: var(--sp-3) 0; padding: var(--sp-3); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 13px; } .bc-summary b { color: var(--text-primary); } .bc-reason { width: 100%; margin-top: var(--sp-3); min-height: 64px; resize: vertical; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-primary); padding: var(--sp-3); font: inherit; font-size: 13px; } .bc-reason:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-trace); } .bc-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-5); } .bc-btn { padding: 10px 18px; border-radius: var(--r-sm); font-weight: 700; font-size: 14px; cursor: pointer; border: 1px solid var(--border); } .bc-btn-cancel { background: transparent; color: var(--text-secondary); } .bc-btn-confirm { background: var(--violet); color: #fff; border-color: var(--violet); } .bc-btn-confirm.danger { background: var(--danger); border-color: var(--danger); } .bc-btn:disabled { opacity: .5; cursor: not-allowed; } /* ── Empty State（データなし時のブランクデザイン・3サーフェス共通） ── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 24px; text-align: center; color: var(--text-muted); } .empty-state svg { width: 40px; height: 40px; opacity: .45; } .empty-state-title { font-size: 14px; font-weight: 700; color: var(--text-secondary); } .empty-state-desc { font-size: 12px; line-height: 1.7; max-width: 360px; } /* ============================================================ FILTER BAR（運営FB 2-1・2026-07-29） 一覧の絞り込み（ステータスタブ＋検索）を最上部でひとつの帯として 目立たせる汎用コンポーネント。列ソート/列フィルタのロジックは変えず、 「見せ方」だけを底上げする。 ============================================================ */ .filter-bar { display: flex; flex-direction: column; gap: var(--sp-3); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-4); box-shadow: 0 1px 3px rgba(0,0,0,.05); } .filter-bar-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .filter-bar-label { font-size: 12px; font-weight: 700; color: var(--text-muted); white-space: nowrap; } .filter-bar-hint { font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding-top: var(--sp-2); border-top: 1px dashed var(--border); } /* このバー内のステータスタブだけ一段強調し、他画面（審査キュー・承認キュー等）の 共通 .filter-tab はそのまま維持する（スコープを絞ったセレクタ） */ .filter-bar .filter-tabs { margin-bottom: 0; } .filter-bar .filter-tab { font-weight: 600; }