/* Prompt Hub PRO v9.0 — Design System Base: HTSPHv2 (light-first, glass, glow) Extended: v2 AI-workflow components Dark mode: [data-ph-theme="dark"] on ─────────────────────────────────────────── */ /* ══════════════════════════════════════════════ THEME VARIABLES ══════════════════════════════════════════════ */ :root { /* Surfaces */ --ph-bg: #f4f6fb; --ph-surface: #ffffff; --ph-surface-alt: #f0f2f7; --ph-surface2: #f0f2f7; /* alias for v2 components */ --ph-surface-glass: rgba(255,255,255,.72); /* Borders */ --ph-border: #e0e4ed; --ph-border-subtle: #eaecf2; /* Text */ --ph-text: #111827; --ph-text-mid: #374151; --ph-text-muted: #586072; --ph-muted: #586072; /* alias for v2 components */ /* Accent – indigo */ --ph-accent: #6366f1; --ph-accent-hover: #4f46e5; --ph-accent-bg: #eef2ff; --ph-accent-text: #4338ca; --ph-accent-glow: rgba(99,102,241,.18); /* Status */ --ph-success: #10b981; --ph-success-bg: #ecfdf5; --ph-danger: #ef4444; --ph-gold: #f59e0b; --ph-gold-bg: #fffbeb; /* Shadows */ --ph-shadow: 0 1px 3px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.04); --ph-shadow-lg: 0 12px 40px rgba(0,0,0,.08); --ph-shadow-glow: 0 0 24px var(--ph-accent-glow); /* Radii */ --ph-radius: 10px; --ph-radius-sm: 6px; --ph-radius-lg: 16px; --ph-radius-xl: 22px; /* Typography */ --ph-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ph-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Motion */ --ph-transition: .18s ease; --ph-blur: blur(14px); /* Layout */ --ph-gutter: 24px; } [data-ph-theme="dark"] { --ph-bg: #0f1117; --ph-surface: #1a1d27; --ph-surface-alt: #22252f; --ph-surface2: #22252f; --ph-surface-glass: rgba(26,29,39,.82); --ph-border: #2d313d; --ph-border-subtle: #252832; --ph-text: #f1f3f7; --ph-text-mid: #c8ccd6; --ph-text-muted: #8b92a5; --ph-muted: #8b92a5; --ph-accent: #818cf8; --ph-accent-hover: #6366f1; --ph-accent-bg: rgba(129,140,248,.12); --ph-accent-text: #a5b4fc; --ph-accent-glow: rgba(129,140,248,.22); --ph-success-bg: rgba(16,185,129,.1); --ph-gold-bg: rgba(245,158,11,.1); --ph-shadow: 0 2px 6px rgba(0,0,0,.25); --ph-shadow-lg: 0 12px 40px rgba(0,0,0,.4); } /* ══════════════════════════════════════════════ BASE ══════════════════════════════════════════════ */ .ph-app, .ph-single, .ph-form-wrap, .ph-guide, .ph-glossary, .ph-launchpad, .ph-finder, .ph-auto-bridge, .ph-pack-builder, .ph-teams-grid { font-family: var(--ph-font); color: var(--ph-text); line-height: 1.55; -webkit-font-smoothing: antialiased; } .ph-app { max-width: 1280px; margin: 0 auto; padding: 24px 20px 56px; } h1.entry-title { display: none; } /* Hub nav bar */ .ph-hub-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 0 0 16px; border-bottom: 1.5px solid var(--ph-border); margin-bottom: 20px; } .ph-hub-nav-link { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--ph-radius-sm); font-size: 13px; font-weight: 500; color: var(--ph-text-muted); text-decoration: none; transition: all var(--ph-transition); border: 1.5px solid transparent; cursor: pointer; } .ph-hub-nav-link:hover { color: var(--ph-accent); background: var(--ph-accent-bg); } .ph-hub-nav-active { color: var(--ph-accent) !important; background: var(--ph-accent-bg) !important; border-color: rgba(99,102,241,.2) !important; font-weight: 600; } .ph-hub-nav-sep { flex: 1; } .ph-hub-nav-guide { color: var(--ph-text-mid); } .ph-hub-nav-submit { color: #fff !important; background: var(--ph-accent) !important; border-color: var(--ph-accent) !important; font-weight: 600; } .ph-hub-nav-submit:hover { background: var(--ph-accent-hover) !important; border-color: var(--ph-accent-hover) !important; } /* Content type blurb */ .ph-type-blurb { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; margin-bottom: 16px; background: var(--ph-accent-bg); border: 1.5px solid rgba(99,102,241,.2); border-radius: var(--ph-radius); font-size: 13.5px; color: var(--ph-text-mid); line-height: 1.5; } .ph-type-blurb[hidden] { display: none; } .ph-type-blurb-icon { font-size: 18px; flex-shrink: 0; } .ph-type-blurb strong { color: var(--ph-accent); font-weight: 700; margin-right: 2px; } .ph-type-blurb-sep { color: var(--ph-border); } /* AI launch buttons */ .ph-ai-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--ph-radius); font-size: 13px; font-weight: 600; text-decoration: none; transition: all var(--ph-transition); border: 1.5px solid var(--ph-border); background: var(--ph-surface); color: var(--ph-text); cursor: pointer; } .ph-ai-btn:hover { transform: translateY(-1px); box-shadow: var(--ph-shadow); } .ph-ai-btn.chatgpt { border-color: #10a37f; color: #10a37f; } .ph-ai-btn.chatgpt:hover { background: #10a37f; color: #fff; } .ph-ai-btn.claude { border-color: #d97706; color: #d97706; } .ph-ai-btn.claude:hover { background: #d97706; color: #fff; } .ph-ai-btn.gemini { background: #1a73e8; color: #fff; border-color: #1a73e8; } .ph-ai-btn.gemini:hover { background: #1557b0; border-color: #1557b0; } /* ══════════════════════════════════════════════ INPUTS ══════════════════════════════════════════════ */ .ph-input, .ph-select, .ph-textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--ph-border); border-radius: var(--ph-radius); background: var(--ph-surface); font-size: 14px; font-family: var(--ph-font); color: var(--ph-text); transition: border-color var(--ph-transition), box-shadow var(--ph-transition); box-sizing: border-box; } .ph-input:focus, .ph-select:focus, .ph-textarea:focus { outline: none; border-color: var(--ph-accent); box-shadow: 0 0 0 3px var(--ph-accent-glow); } .ph-textarea { resize: vertical; min-height: 80px; font-family: var(--ph-font); } .ph-select { cursor: pointer; appearance: auto; } .ph-select-sm { width: auto; padding: 6px 10px; font-size: 13px; } /* ══════════════════════════════════════════════ BUTTONS ══════════════════════════════════════════════ */ .ph-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border: 1.5px solid var(--ph-border); border-radius: var(--ph-radius); background: var(--ph-surface); color: var(--ph-text); font-size: 13px; font-weight: 600; font-family: var(--ph-font); cursor: pointer; transition: all var(--ph-transition); text-decoration: none; line-height: 1.3; white-space: nowrap; user-select: none; } .ph-btn:hover { background: var(--ph-surface-alt); transform: translateY(-1px); } .ph-btn:active { transform: translateY(0) scale(.98); } .ph-btn-primary { background: var(--ph-accent); border-color: var(--ph-accent); color: #fff; box-shadow: 0 2px 10px var(--ph-accent-glow); } .ph-btn-primary:hover { background: var(--ph-accent-hover); border-color: var(--ph-accent-hover); box-shadow: var(--ph-shadow-glow); } .ph-btn-ghost { background: transparent; border-color: transparent; } .ph-btn-ghost:hover { background: var(--ph-surface-alt); } .ph-btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; } .ph-btn-lg { padding: 12px 28px; font-size: 15px; } .ph-btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 10px; } .ph-btn.voted { background: var(--ph-gold-bg); border-color: var(--ph-gold); color: #92400e; } [data-ph-theme="dark"] .ph-btn.voted { color: var(--ph-gold); } .ph-btn.starred, .ph-btn.fav-toggle.starred { background: var(--ph-gold-bg); border-color: var(--ph-gold); color: #92400e; } /* ══════════════════════════════════════════════ TOOLBAR (glass) ══════════════════════════════════════════════ */ /* ══════════════════════════════════════════════ SEARCH ROW ══════════════════════════════════════════════ */ .ph-search-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .ph-search-main { flex: 1; position: relative; } .ph-search-main .ph-input { padding-left: 16px; font-size: 15px; } .ph-tag-group { position: relative; width: 160px; flex-shrink: 0; } .ph-search-group { position: relative; } .ph-search-group .ph-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 16px; background-position: 13px center; padding-left: 38px; } .ph-filters-toggle { white-space: nowrap; flex-shrink: 0; background: var(--ph-surface); border: 1.5px solid var(--ph-border); color: var(--ph-text-muted); } .ph-filters-toggle.ph-filters-active { background: var(--ph-accent-bg); border-color: var(--ph-accent); color: var(--ph-accent); } /* ── Filter panel (hidden by default) ── */ .ph-filter-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; background: var(--ph-surface-glass); backdrop-filter: var(--ph-blur); -webkit-backdrop-filter: var(--ph-blur); border: 1px solid var(--ph-border-subtle); border-radius: var(--ph-radius-xl); padding: 16px 20px; margin-bottom: 14px; box-shadow: var(--ph-shadow); } .ph-filter-panel[hidden] { display: none; } .ph-filter-panel .ph-select { width: 100%; } /* Chips */ .ph-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; } .ph-chips:empty { display: none; } .ph-chips-row { margin-bottom: 10px; } .ph-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--ph-accent-bg); color: var(--ph-accent-text); border-radius: 999px; font-size: 12px; font-weight: 600; animation: ph-pop .2s cubic-bezier(.34,1.56,.64,1); } .ph-chip button { all: unset; cursor: pointer; font-size: 14px; line-height: 1; opacity: .6; } .ph-chip button:hover { opacity: 1; } @keyframes ph-pop { from { transform: scale(.8); opacity: 0; } } /* Dropdown */ .ph-dropdown { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius); box-shadow: var(--ph-shadow-lg); max-height: 240px; overflow-y: auto; z-index: 50; } .ph-dropdown-item { padding: 9px 14px; cursor: pointer; font-size: 13px; transition: background .08s; } .ph-dropdown-item:hover, .ph-dropdown-item.active { background: var(--ph-accent-bg); color: var(--ph-accent-text); } .ph-dropdown-empty { padding: 10px 14px; color: var(--ph-text-muted); font-size: 13px; } /* ── Content bar: tabs + view controls ── */ .ph-content-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .ph-tabs { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .ph-tab { all: unset; padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ph-text-muted); cursor: pointer; border: 1.5px solid transparent; background: transparent; transition: all var(--ph-transition); white-space: nowrap; } .ph-tab:hover { color: var(--ph-text); background: var(--ph-surface-alt); border-color: var(--ph-border); } .ph-tab.active { background: var(--ph-accent); border-color: var(--ph-accent); color: #fff; box-shadow: 0 2px 8px var(--ph-accent-glow); } .ph-view-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* Dark toggle */ .ph-theme-toggle { all: unset; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer; font-size: 16px; border: 1.5px solid var(--ph-border); background: var(--ph-surface); transition: all var(--ph-transition); } .ph-theme-toggle:hover { background: var(--ph-surface-alt); transform: rotate(15deg); } /* ══════════════════════════════════════════════ STATS ══════════════════════════════════════════════ */ /* ── Stats strip (compact inline) ── */ .ph-stats-strip { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ph-text-muted); margin-bottom: 18px; flex-wrap: wrap; } .ph-stat-pill { color: var(--ph-text-mid); } .ph-stat-pill .ph-stat-val { font-weight: 700; color: var(--ph-accent); font-size: 14px; } .ph-stat-sep { color: var(--ph-border); font-size: 16px; line-height: 1; } /* ── Legacy .ph-stats (kept for any single-page usage) ── */ .ph-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .ph-stat { background: var(--ph-surface); border: 1px solid var(--ph-border-subtle); border-radius: var(--ph-radius-lg); padding: 18px 14px; text-align: center; box-shadow: var(--ph-shadow); transition: transform .2s, box-shadow .2s; position: relative; overflow: hidden; } .ph-stat::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ph-accent), #a78bfa, #ec4899); opacity: 0; transition: opacity .2s; } .ph-stat:hover { transform: translateY(-3px); box-shadow: var(--ph-shadow-lg); } .ph-stat:hover::after { opacity: 1; } .ph-stat-val { display: block; font-size: 1.8rem; font-weight: 800; letter-spacing: -.5px; background: linear-gradient(135deg, var(--ph-accent), #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Override inside the compact strip — must be inline, smaller */ .ph-stats-strip .ph-stat-val { display: inline; font-size: 14px; font-weight: 700; letter-spacing: 0; background: none; -webkit-background-clip: unset; -webkit-text-fill-color: unset; background-clip: unset; color: var(--ph-accent); } .ph-stat-lbl { display: block; font-size: 12px; color: var(--ph-text-muted); margin-top: 3px; font-weight: 500; } .ph-stat-label { color: var(--ph-text-muted); } .ph-stat-bar { width: 80px; height: 6px; background: var(--ph-surface-alt); border-radius: 99px; overflow: hidden; } .ph-stat-bar span { display: block; height: 100%; border-radius: 99px; } /* View toggle */ .ph-view-btn { all: unset; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 16px; cursor: pointer; color: var(--ph-text-muted); border: 1.5px solid var(--ph-border); background: var(--ph-surface); transition: all var(--ph-transition); } .ph-view-btn:hover { background: var(--ph-surface-alt); } .ph-view-btn.active { background: var(--ph-accent); color: #fff; border-color: var(--ph-accent); } /* Loading */ .ph-loading { text-align: center; padding: 72px 0; } .ph-spinner { width: 34px; height: 34px; border: 3px solid var(--ph-border); border-top-color: var(--ph-accent); border-radius: 50%; animation: ph-spin .65s linear infinite; margin: 0 auto 12px; } .ph-loading-text { font-size: 13px; color: var(--ph-text-muted); } @keyframes ph-spin { to { transform: rotate(360deg); } } /* ══════════════════════════════════════════════ TABLE ══════════════════════════════════════════════ */ .ph-table-wrap { border-radius: var(--ph-radius-lg); background: var(--ph-surface); border: 1px solid var(--ph-border-subtle); box-shadow: var(--ph-shadow); overflow: hidden; } .ph-table { width: 100%; border-collapse: collapse; font-size: 13px; } .ph-table th { padding: 10px 16px; text-align: left; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ph-text-muted); background: var(--ph-surface-alt); border-bottom: 1px solid var(--ph-border); white-space: nowrap; position: sticky; top: 0; z-index: 2; } .ph-table td { padding: 14px 16px; border-bottom: 1px solid var(--ph-border-subtle); vertical-align: top; word-break: break-word; } .ph-table tr:last-child td { border-bottom: none; } .ph-table tbody tr { transition: background .1s; cursor: pointer; } .ph-table tbody tr:hover td { background: var(--ph-accent-bg); } .ph-table .ph-col-name { min-width: 180px; max-width: 260px; } .ph-table .ph-col-prompt { min-width: 200px; max-width: 380px; } .ph-table .ph-col-why { min-width: 140px; max-width: 220px; } .ph-table .ph-col-tags { min-width: 100px; } .ph-table .ph-col-actions { width: 130px; text-align: center; white-space: nowrap; } .ph-table a { color: var(--ph-accent); text-decoration: none; font-weight: 600; } .ph-table a:hover { text-decoration: underline; } .ph-prompt-title-link { font-weight: 700; color: var(--ph-text); text-decoration: none; transition: color var(--ph-transition); font-size: 14px; } .ph-prompt-title-link:hover { color: var(--ph-accent); } .ph-excerpt { color: var(--ph-text-muted); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ph-excerpt.locked { font-style: italic; opacity: .6; } .ph-why-text { font-size: 12px; color: var(--ph-text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Expand row */ .ph-expand-row td { padding: 0 !important; border-bottom: 2px solid var(--ph-accent) !important; } .ph-expand-inner { padding: 20px 24px; background: var(--ph-accent-bg); animation: ph-slide .2s ease-out; } @keyframes ph-slide { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 600px; } } .ph-expand-prompt { font-family: var(--ph-mono); font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 14px; padding: 16px; background: var(--ph-surface); border-radius: var(--ph-radius); border: 1px solid var(--ph-border); max-height: 300px; overflow-y: auto; } .ph-expand-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ph-prompt-meta-inline { font-size: 11px; color: var(--ph-text-muted); margin-left: auto; display: flex; gap: 10px; } /* Variable highlight */ .ph-var { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; padding: 1px 5px; border-radius: 4px; font-weight: 600; font-size: .92em; cursor: help; border: 1px solid #fcd34d; } [data-ph-theme="dark"] .ph-var { background: rgba(251,191,36,.18); color: #fbbf24; border-color: rgba(251,191,36,.3); } .ph-var-bracket { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #dc2626; padding: 1px 5px; border-radius: 4px; font-weight: 600; font-size: .92em; cursor: help; border: 1px solid #fca5a5; transition: background var(--ph-transition); } .ph-var-bracket:hover { background: #fecaca; } [data-ph-theme="dark"] .ph-var-bracket { background: rgba(220,38,38,.15); color: #f87171; border-color: rgba(248,113,113,.3); } [data-ph-theme="dark"] .ph-var-bracket:hover { background: rgba(220,38,38,.25); } /* Variable fill modal */ .ph-var-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.4); backdrop-filter: blur(4px); animation: ph-fade .15s; } .ph-var-modal-box { background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-lg); padding: 28px; width: 90%; max-width: 480px; box-shadow: var(--ph-shadow-lg); max-height: 80vh; overflow-y: auto; } .ph-var-modal h3 { margin: 0 0 6px; font-size: 18px; font-weight: 800; } .ph-var-modal p { margin: 0 0 18px; font-size: 13px; color: var(--ph-text-muted); } .ph-var-field { margin-bottom: 12px; } .ph-var-field label { display: block; font-size: 12px; font-weight: 700; color: var(--ph-accent); margin-bottom: 4px; font-family: var(--ph-mono); } .ph-var-actions { display: flex; gap: 10px; margin-top: 18px; } @keyframes ph-fade { from { opacity: 0; } to { opacity: 1; } } /* ══════════════════════════════════════════════ CARDS ══════════════════════════════════════════════ */ .ph-cards, .ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .ph-card { background: var(--ph-surface); border: 1px solid var(--ph-border-subtle); border-radius: var(--ph-radius-lg); padding: 18px; box-shadow: var(--ph-shadow); display: flex; flex-direction: column; gap: 10px; transition: transform .15s, box-shadow .15s, border-color .15s; position: relative; overflow: hidden; } .ph-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, var(--ph-accent-bg), transparent); opacity: 0; transition: opacity .2s; pointer-events: none; } .ph-card:hover { transform: translateY(-3px); box-shadow: var(--ph-shadow-lg); border-color: var(--ph-accent); } .ph-card:hover::before { opacity: 1; } .ph-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .ph-card-title { font-weight: 700; font-size: 15px; color: var(--ph-text); text-decoration: none; line-height: 1.3; } .ph-card-title:hover { color: var(--ph-accent); } .ph-card-excerpt { font-size: 13px; color: var(--ph-text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } .ph-card-tags { display: flex; flex-wrap: wrap; gap: 4px; } .ph-card-footer { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--ph-border-subtle); flex-wrap: wrap; } .ph-card-footer .ph-btn { font-size: 12px; padding: 5px 10px; } .ph-card-actions { display: flex; gap: 6px; } .ph-card-stats { display: flex; gap: 8px; font-size: 12px; color: var(--ph-text-muted); } .ph-card-meta-right { margin-left: auto; font-size: 11px; color: var(--ph-text-muted); display: flex; gap: 8px; align-items: center; } /* Tags & Pills */ .ph-tag { display: inline-block; padding: 3px 8px; background: var(--ph-accent-bg); color: var(--ph-accent-text); border-radius: 999px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all var(--ph-transition); white-space: nowrap; } .ph-tag:hover { background: var(--ph-accent); color: #fff; } .ph-pill { display: inline-flex; align-items: center; padding: 2px 7px; background: var(--ph-surface-alt); border: 1px solid var(--ph-border); border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--ph-text-muted); white-space: nowrap; } .ph-pill-sm { font-size: 10px; padding: 1px 5px; } .ph-lock-pill { background: var(--ph-gold-bg); border-color: var(--ph-gold); color: #92400e; } /* Type badge */ .ph-type-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid var(--ph-border); background: var(--ph-surface-alt); color: var(--ph-text-muted); white-space: nowrap; } .ph-type-badge[data-type="skill"] { color: #4f46e5; background: #eef2ff; border-color: #c7d2fe; } .ph-type-badge[data-type="agent"] { color: #7c3aed; background: #f5f3ff; border-color: #ddd6fe; } .ph-type-badge[data-type="ai-team"] { color: #b45309; background: #fffbeb; border-color: #fde68a; } .ph-type-badge[data-type="workflow-pack"] { color: #0369a1; background: #f0f9ff; border-color: #bae6fd; } .ph-type-badge[data-type="context-file"] { color: #047857; background: #ecfdf5; border-color: #a7f3d0; } .ph-type-badge[data-type="quality-gate"] { color: #b91c1c; background: #fef2f2; border-color: #fecaca; } .ph-type-badge[data-type="automation-ready"] { color: #d97706; background: #fffbeb; border-color: #fcd34d; } .ph-type-badge[data-type="prompt"] { color: #6366f1; background: #eef2ff; border-color: #c7d2fe; } [data-ph-theme="dark"] .ph-type-badge[data-type="skill"] { color: #818cf8; background: rgba(99,102,241,.15); border-color: rgba(99,102,241,.3); } [data-ph-theme="dark"] .ph-type-badge[data-type="agent"] { color: #c4b5fd; background: rgba(124,58,237,.15); border-color: rgba(124,58,237,.3); } [data-ph-theme="dark"] .ph-type-badge[data-type="ai-team"] { color: #fbbf24; background: rgba(180,83,9,.15); border-color: rgba(180,83,9,.3); } [data-ph-theme="dark"] .ph-type-badge[data-type="workflow-pack"] { color: #38bdf8; background: rgba(3,105,161,.15); border-color: rgba(3,105,161,.3); } [data-ph-theme="dark"] .ph-type-badge[data-type="context-file"] { color: #34d399; background: rgba(4,120,87,.15); border-color: rgba(4,120,87,.3); } [data-ph-theme="dark"] .ph-type-badge[data-type="quality-gate"] { color: #f87171; background: rgba(185,28,28,.15); border-color: rgba(185,28,28,.3); } [data-ph-theme="dark"] .ph-type-badge[data-type="automation-ready"] { color: #fbbf24; background: rgba(217,119,6,.15); border-color: rgba(217,119,6,.3); } [data-ph-theme="dark"] .ph-type-badge[data-type="prompt"] { color: #818cf8; background: rgba(99,102,241,.15); border-color: rgba(99,102,241,.3); } /* Compat badges */ .ph-compat-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .ph-compat-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid var(--ph-border); background: var(--ph-surface-alt); color: var(--ph-text-muted); } .ph-compat-badge.ph-compat-claude { color: #7c3aed; border-color: rgba(124,58,237,.25); background: rgba(124,58,237,.08); } .ph-compat-badge.ph-compat-chatgpt { color: #059669; border-color: rgba(5,150,105,.25); background: rgba(5,150,105,.08); } .ph-compat-badge.ph-compat-gemini { color: #4f46e5; border-color: rgba(79,70,229,.25); background: rgba(79,70,229,.08); } .ph-compat-badge.ph-compat-local { color: #b45309; border-color: rgba(180,83,9,.25); background: rgba(180,83,9,.08); } .ph-compat-badge.ph-compat-mcp { color: #db2777; border-color: rgba(219,39,119,.25); background: rgba(219,39,119,.08); } .ph-compat-badge.ph-compat-warn { color: #dc2626; border-color: rgba(220,38,38,.25); background: rgba(220,38,38,.08); } /* Health score */ .ph-health-score { font-size: 12px; font-weight: 700; color: var(--ph-text-muted); } .ph-health-bar { height: 4px; background: var(--ph-border); border-radius: 99px; margin-top: 4px; overflow: hidden; } .ph-health-bar-fill { height: 100%; border-radius: 99px; transition: width .6s ease; } /* Version / safety badges */ .ph-version-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--ph-surface-alt); color: var(--ph-text-muted); border: 1px solid var(--ph-border); } .ph-safety-badge { font-size: 11px; padding: 3px 10px; border-radius: 999px; font-weight: 600; } /* Star */ .ph-star { all: unset; cursor: pointer; font-size: 20px; transition: transform .12s; opacity: .4; line-height: 1; } .ph-star:hover { transform: scale(1.25); opacity: .7; } .ph-star.starred { opacity: 1; color: var(--ph-gold); } .ph-star[disabled] { cursor: not-allowed; opacity: .2; } /* Action buttons */ .ph-copy-btn { display: inline-flex; align-items: center; gap: 5px; } .ph-copy-btn.copied { background: var(--ph-success); border-color: var(--ph-success); color: #fff; } .ph-add-to-pack-btn { background: transparent; } .ph-add-to-pack-btn:hover { background: var(--ph-accent); color: #fff; } .ph-add-to-pack-btn.in-pack { background: var(--ph-surface-alt); color: var(--ph-text-muted); } .ph-upvote-btn { display: inline-flex; align-items: center; gap: 5px; } .ph-upvote-btn:hover, .ph-upvote-btn.voted { color: var(--ph-accent); border-color: var(--ph-accent); } /* Pagination */ .ph-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; flex-wrap: wrap; gap: 12px; } .ph-pagination { display: flex; gap: 4px; } .ph-page-btn { all: unset; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--ph-surface); border: 1.5px solid var(--ph-border); transition: all var(--ph-transition); } .ph-page-btn:hover { background: var(--ph-surface-alt); } .ph-page-btn.active { background: var(--ph-accent); color: #fff; border-color: var(--ph-accent); } .ph-page-btn:disabled { opacity: .4; cursor: not-allowed; } /* Toast */ .ph-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); padding: 10px 22px; border-radius: var(--ph-radius); color: #fff; font-weight: 600; font-size: 13px; background: #334155; box-shadow: var(--ph-shadow-lg); opacity: 0; transition: opacity .15s, transform .2s cubic-bezier(.34,1.56,.64,1); z-index: 9999; pointer-events: none; } .ph-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .ph-toast.success { background: var(--ph-success); } .ph-toast.error { background: var(--ph-danger); } /* Empty state */ .ph-empty, .ph-empty-state { text-align: center; padding: 56px 24px; color: var(--ph-text-muted); } .ph-empty-icon { font-size: 38px; line-height: 1; margin-bottom: 10px; opacity: .65; } .ph-empty-title { font-size: 16px; font-weight: 700; color: var(--ph-text); margin: 0 0 4px; } .ph-empty-text, .ph-empty-state p { font-size: 14px; margin: 0 0 16px; } .ph-empty .ph-btn { margin: 0 auto; } .ph-empty-state a { color: var(--ph-accent); } .ph-hidden, .hidden { display: none !important; } /* ══════════════════════════════════════════════ COMMAND PALETTE ══════════════════════════════════════════════ */ .ph-cmd-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.35); backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: center; padding-top: min(20vh, 160px); animation: ph-fade .12s; } .ph-cmd-box { width: 90%; max-width: 560px; background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-xl); box-shadow: var(--ph-shadow-lg), 0 0 60px var(--ph-accent-glow); overflow: hidden; } .ph-cmd-input { width: 100%; padding: 18px 22px; border: none; outline: none; font-size: 17px; font-family: var(--ph-font); font-weight: 500; background: transparent; color: var(--ph-text); box-sizing: border-box; } .ph-cmd-input::placeholder { color: var(--ph-text-muted); } .ph-cmd-results { max-height: 340px; overflow-y: auto; border-top: 1px solid var(--ph-border-subtle); } .ph-cmd-item { padding: 12px 22px; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: background .06s; font-size: 14px; } .ph-cmd-item:hover, .ph-cmd-item.active { background: var(--ph-accent-bg); } .ph-cmd-item-title { font-weight: 600; color: var(--ph-text); } .ph-cmd-item-sub { font-size: 12px; color: var(--ph-text-muted); margin-left: auto; } .ph-cmd-hint { padding: 10px 22px; font-size: 11px; color: var(--ph-text-muted); border-top: 1px solid var(--ph-border-subtle); display: flex; gap: 12px; } .ph-cmd-hint kbd { background: var(--ph-surface-alt); border: 1px solid var(--ph-border); border-radius: 4px; padding: 1px 5px; font-size: 10px; font-weight: 600; } /* ══════════════════════════════════════════════ SKELETON LOADING ══════════════════════════════════════════════ */ .ph-skeleton-wrap { display: grid; gap: 14px; } .ph-skel-table { display: grid; gap: 0; border: 1px solid var(--ph-border-subtle); border-radius: var(--ph-radius-lg); overflow: hidden; background: var(--ph-surface); } .ph-skel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .ph-skel-row { display: flex; gap: 16px; align-items: center; padding: 16px; border-bottom: 1px solid var(--ph-border-subtle); } .ph-skel-row:last-child { border-bottom: none; } .ph-skel-card { background: var(--ph-surface); border: 1px solid var(--ph-border-subtle); border-radius: var(--ph-radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--ph-shadow); } .ph-skel { background: linear-gradient(90deg, var(--ph-surface-alt) 25%, var(--ph-border-subtle) 37%, var(--ph-surface-alt) 63%); background-size: 400% 100%; border-radius: 6px; animation: ph-shimmer 1.3s ease-in-out infinite; } .ph-skel-line { height: 12px; } .ph-skel-line.lg { height: 16px; } .ph-skel-line.w40 { width: 40%; } .ph-skel-line.w60 { width: 60%; } .ph-skel-line.w80 { width: 80%; } .ph-skel-line.w100 { width: 100%; } .ph-skel-pill { height: 20px; width: 60px; border-radius: 999px; } .ph-skel-grow { flex: 1; } @keyframes ph-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* ══════════════════════════════════════════════ RELATED CARDS ══════════════════════════════════════════════ */ .ph-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .ph-related-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--ph-border); border-radius: 16px; background: var(--ph-surface); text-decoration: none; color: var(--ph-text); box-shadow: var(--ph-shadow); transition: transform var(--ph-transition), box-shadow var(--ph-transition), border-color var(--ph-transition); } .ph-related-card:hover { transform: translateY(-2px); box-shadow: var(--ph-shadow-lg); border-color: var(--ph-accent); } .ph-related-title { font-weight: 700; } .ph-related-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--ph-text-muted); } .ph-related-meta span { padding: 3px 8px; border-radius: 999px; background: var(--ph-surface-alt); } .ph-related-excerpt { font-size: 13px; color: var(--ph-text-muted); line-height: 1.5; } /* ══════════════════════════════════════════════ SINGLE PROMPT / SKILL PAGE ══════════════════════════════════════════════ */ .ph-single { background: var(--ph-surface); border: 1px solid var(--ph-border-subtle); border-radius: var(--ph-radius-xl); box-shadow: var(--ph-shadow-lg); padding: 40px 40px 48px; max-width: 820px; margin: 32px auto 60px; } .ph-single-header { padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--ph-border); } .ph-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ph-single-title { margin: 0; font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 900; color: var(--ph-text); line-height: 1.15; letter-spacing: -.02em; } .ph-single-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; } .ph-single-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .ph-meta-chip { padding: 5px 12px; background: var(--ph-surface-alt); border: 1px solid var(--ph-border-subtle); border-radius: 8px; font-size: 13px; color: var(--ph-text-muted); } .ph-meta-chip strong { color: var(--ph-text); margin-right: 3px; } .ph-single-tags, .ph-single-compat { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .ph-single-stats { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; } .ph-single-actions { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; } .ph-prompt-block { margin-bottom: 20px; border-radius: var(--ph-radius-lg); overflow: hidden; border: 2px solid var(--ph-accent); box-shadow: 0 4px 20px var(--ph-accent-glow); } .ph-prompt-label { padding: 8px 18px; background: var(--ph-text); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; } .ph-prompt-label .ph-word-count { font-weight: 400; opacity: .6; text-transform: none; letter-spacing: 0; } .ph-prompt-body { padding: 22px; background: var(--ph-accent-bg); font-family: var(--ph-mono); font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; } .ph-prompt-body p { margin: 0 0 .75em; } .ph-prompt-body p:last-child { margin-bottom: 0; } .ph-single-bar { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; } /* Trigger box */ .ph-trigger-box { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--ph-surface-alt); border: 1.5px solid rgba(99,102,241,.25); border-radius: var(--ph-radius); } .ph-trigger-code { font-family: var(--ph-mono); font-size: 15px; color: var(--ph-accent); flex: 1; } /* Prompt content */ .ph-prompt-content { background: var(--ph-surface); border: 1.5px solid var(--ph-border); border-radius: var(--ph-radius); padding: 24px; font-size: 15px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; } /* Before/after */ .ph-before-after-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ph-before-col, .ph-after-col { padding: 16px; border-radius: var(--ph-radius); } .ph-before-col { background: rgba(239,68,68,.04); border: 1.5px solid rgba(239,68,68,.15); } .ph-after-col { background: rgba(16,185,129,.04); border: 1.5px solid rgba(16,185,129,.15); } .ph-before-col h4, .ph-after-col h4 { margin: 0 0 10px; font-size: 14px; } .ph-ba-content { font-size: 13px; color: var(--ph-text-muted); } /* Code block */ .ph-code-block { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--ph-surface-alt); border-radius: var(--ph-radius); border: 1px solid var(--ph-border); margin: 8px 0; } .ph-code-block code { font-family: var(--ph-mono); font-size: 13px; flex: 1; color: v /* ── Single page action bar ── */ .ph-single-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 0; margin: 0 0 20px; border-top: 1.5px solid var(--ph-border); border-bottom: 1.5px solid var(--ph-border); } .ph-bar-sep { width: 1px; height: 22px; background: var(--ph-border); align-self: center; margin: 0 4px; } /* Word count in section header */ .ph-single-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .ph-single-section-header h3 { margin: 0; flex: 1; } .ph-word-count { font-size: 12px; color: var(--ph-text-muted); background: var(--ph-surface-2); padding: 2px 8px; border-radius: 20px; border: 1px solid var(--ph-border); } /* Download buttons */ .ph-download-btn { font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: var(--ph-radius-sm); } /* Prompt body */ .ph-prompt-content { background: var(--ph-surface-2); border: 1.5px solid var(--ph-border); border-radius: var(--ph-radius); padding: 18px 20px; font-size: 14.5px; line-height: 1.75; white-space: pre-wrap; font-family: var(--ph-font-mono, 'Fira Code', 'Cascadia Code', monospace); } .ph-var { color: #7c3aed; background: rgba(124,58,237,.08); padding: 1px 4px; border-radius: 3px; font-weight: 600; } .ph-var-bracket { color: #d97706; background: rgba(217,119,6,.08); padding: 1px 4px; border-radius: 3px; font-weight: 600; } [data-ph-theme="dark"] .ph-prompt-content { background: rgba(255,255,255,.04); } [data-ph-theme="dark"] .ph-var { color: #a78bfa; background: rgba(167,139,250,.12); } [data-ph-theme="dark"] .ph-var-bracket { color: #fbbf24; background: rgba(251,191,36,.10); } /* ══════════════════════════════════════════════ RESPONSIVE — TABLET (max 900px) ══════════════════════════════════════════════ */ @media (max-width: 900px) { .ph-hub-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 12px; gap: 3px; } .ph-hub-nav::-webkit-scrollbar { height: 3px; } .ph-hub-nav::-webkit-scrollbar-thumb { background: var(--ph-border); border-radius: 99px; } .ph-hub-nav-sep { display: none; } .ph-hub-nav-guide, .ph-hub-nav-submit { flex-shrink: 0; } .ph-filter-panel { grid-template-columns: 1fr 1fr; } } /* ══════════════════════════════════════════════ RESPONSIVE — MOBILE (max 640px) ══════════════════════════════════════════════ */ @media (max-width: 640px) { /* App container */ .ph-app { padding: 12px 12px 48px; } /* Nav — horizontal scroll, compact pills */ .ph-hub-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 4px; padding-bottom: 10px; margin-bottom: 14px; } .ph-hub-nav-link { font-size: 12px; padding: 5px 9px; white-space: nowrap; } .ph-hub-nav-guide, .ph-hub-nav-submit { flex-shrink: 0; } .ph-hub-nav-sep { display: none; } /* Search row — stack vertically */ .ph-search-row { flex-wrap: wrap; gap: 8px; } .ph-search-main { min-width: 0; flex: 1 1 100%; } .ph-tag-group { flex: 1 1 auto; width: auto; } .ph-filters-toggle { width: 100%; justify-content: center; } /* Filter panel — single column */ .ph-filter-panel { grid-template-columns: 1fr; } /* Content bar — stack tabs above controls */ .ph-content-bar { flex-direction: column; align-items: stretch; gap: 8px; } .ph-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 4px; justify-content: flex-start; } .ph-tab { font-size: 12px; padding: 6px 12px; white-space: nowrap; flex-shrink: 0; } .ph-view-controls { justify-content: flex-end; } /* Stats strip — compact inline */ .ph-stats-strip { font-size: 12px; gap: 5px; } .ph-stat-pill .ph-stat-val { font-size: 13px; } /* Table → mobile card-like rows */ .ph-table thead { display: none; } .ph-table, .ph-table tbody, .ph-table tr, .ph-table td { display: block; width: 100%; } .ph-table tr { border: 1px solid var(--ph-border); border-radius: var(--ph-radius); margin-bottom: 10px; padding: 12px; background: var(--ph-surface); } .ph-table td { border: none; padding: 3px 0; font-size: 13px; } .ph-col-prompt, .ph-col-why { display: none; } .ph-col-name { font-weight: 600; font-size: 14px; } /* Cards */ .ph-cards { grid-template-columns: 1fr !important; } .ph-card { padding: 14px; } .ph-card-title { font-size: 15px; } /* Single page action bar */ .ph-single-bar { flex-wrap: wrap; gap: 6px; } .ph-bar-sep { display: none; } .ph-single-bar .ph-btn, .ph-single-bar .ph-ai-btn { font-size: 12px; padding: 6px 10px; } .ph-single-bar .copy-btn { flex: 1 1 100%; justify-content: center; } /* Single page header */ .ph-single { padding: 0; } .ph-single-title { font-size: 1.4rem; } .ph-single-stats { gap: 10px; font-size: 12px; } .ph-stat-bar { width: 50px; } /* Before/after grid — stack */ .ph-before-after-grid { grid-template-columns: 1fr !important; } /* Wizard platforms — 2 cols */ .ph-wizard-platforms { grid-template-columns: 1fr 1fr; } /* Pagination */ .ph-pagination { gap: 4px; } .ph-page-btn { padding: 6px 10px; font-size: 12px; } /* Footer */ .ph-footer { flex-direction: column; gap: 10px; } .ph-footer #ph-add-btn { width: 100%; } }