/* ===== VibeCoding Channel Design System v2 ===== */
/* ===== COLOR MAP (match to GST Editor > Styles > Palette) =====
 * Color 1 (#000001):   Deep text / headings
 * Color 2 (#ffffff):   White backgrounds
 * Color 3 (#8b5cf6):   Primary / links (Bright Violet)
 * Color 4 (#dc2626):   Accent / danger (Red)
 * Color 5 (#f59e0b):   Warning (Amber)
 * Color 6 (#2563eb):   Affirmative / info links (Blue)
 * Color 7 (#16a34a):   Success (Green)
 * Color 8 (#475569):   Body text fallback
 * lightbg    (#f8fafc):   Card / section backgrounds
 * lightgrey  (#94a3b8):   Meta / secondary text
 * lightborder(#e2e8f0):   Borders / dividers
 * ============================================================ */

/* == Article Container == */
.t-article { max-width:768px; margin:0 auto; padding:40px 24px; background:#ffffff; }
.t-h1 { font-size:clamp(1.8rem,3.5vw,2.4rem); font-weight:700; line-height:1.2; color:#000001; margin:0 0 12px 0; }
.t-lead { font-size:1.1rem; line-height:1.7; color:#475569; margin:0 0 32px 0; }
.t-h2 { font-size:clamp(1.3rem,2.5vw,1.6rem); font-weight:700; color:#000001; margin:40px 0 16px 0; border-bottom:2px solid #e2e8f0; padding-bottom:8px; }
.t-body { font-size:1rem; line-height:1.8; color:#475569; margin:0 0 20px 0; }
.t-sep { border:0; border-top:1px solid #e2e8f0; margin:40px 0; }
.t-article a { color:#2563eb; }
.t-article code { background:#f1f5f9; padding:2px 6px; border-radius:4px; font-size:0.88rem; color:#dc2626; }

/* == Tool Card == */
.tool-card { background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:20px; margin-bottom:20px; }
.tool-card-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.tool-icon { font-size:2rem; line-height:1; flex-shrink:0; }
.tool-card-meta { flex:1; min-width:0; }
.tool-card-name { font-size:1.05rem; font-weight:700; color:#000001; }
.tool-card-desc { font-size:0.85rem; color:#94a3b8; margin-top:4px; }
.tool-card-price { font-size:0.9rem; color:#475569; font-weight:600; text-align:right; white-space:nowrap; flex-shrink:0; }
.tool-card-body { font-size:0.95rem; line-height:1.7; color:#475569; margin:0; }

/* == Hot Take == */
.hot-take { margin-top:12px; padding:12px 16px; border-left:4px solid #dc2626; background:#fef2f2; border-radius:0 8px 8px 0; }
.ht-label { display:inline-block; font-size:0.8rem; font-weight:700; color:#dc2626; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
.ht-body { font-size:0.92rem; line-height:1.7; color:#1e3a5f; margin:0; }
.ht-body strong { color:#dc2626; }

/* == Tags == */
.tag { display:inline-block; font-size:0.75rem; font-weight:600; padding:2px 8px; border-radius:4px; margin-left:4px; }
.tag-pick { background:#dcfce7; color:#166534; }
.tag-beginner { background:#dbeafe; color:#1e40af; }
.tag-backend { background:#f3e8ff; color:#6b21a8; }
.tag-zero { background:#fef9c3; color:#854d0e; }
.tag-proto { background:#ffedd5; color:#9a3412; }

/* == Action Card == */
.action-card { background:#FEF08A; border:2px solid #CA8A04; border-radius:12px; padding:20px; margin:24px 0; }
.action-card .card-header { font-size:1rem; font-weight:600; margin-bottom:12px; color:#1E293B; }
.action-card pre { background:#1E293B; color:#E2E8F0; padding:16px; border-radius:8px; font-size:14px; line-height:1.6; font-family:monospace; white-space:pre-wrap; overflow-x:auto; margin:0; }
.action-card .copy-btn-wrap { text-align:right; margin-top:8px; }
.action-card .copy-btn { background:#0EA5E9; color:white; border:none; padding:8px 16px; border-radius:6px; cursor:pointer; font-size:14px; font-weight:500; }
.action-card .coach-channel { margin-top:12px; padding:8px 12px; background:#FFFBEB; border-radius:6px; font-size:14px; color:#92400E; border-left:3px solid #FF8800; }

/* == Tip Card == */
.tip-card { background:#EFF6FF; border:1px solid #BFDBFE; border-radius:10px; padding:16px; margin:20px 0; }
.tip-card .tip-label { font-weight:700; font-size:0.85rem; color:#1E40AF; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
.tip-card .tip-body { font-size:0.92rem; line-height:1.7; color:#1E3A5F; margin:0; }
.tip-card-warn { background:#FEF2F2; border:1px solid #FECACA; }
.tip-card-warn .tip-label { color:#DC2626; }

/* == Decision Grid == */
.decision-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:24px 0; }
.decision-card { padding:16px; border-radius:10px; }
.decision-card-green { background:#f0fdf4; border:1px solid #bbf7d0; }
.decision-card-blue { background:#eff6ff; border:1px solid #bfdbfe; }
.decision-card-purple { background:#faf5ff; border:1px solid #e9d5ff; }
.decision-card-teal { background:#f0fdfa; border:1px solid #99f6e4; }
.decision-label { font-weight:700; font-size:0.9rem; margin-bottom:6px; color:#000001; }
.decision-body { font-size:0.85rem; line-height:1.6; color:#475569; margin:0; }

/* == Pricing Panel == */
.pricing-panel { background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:20px; margin:24px 0; }
.pricing-panel .pricing-grid { font-size:0.92rem; line-height:1.8; color:#475569; margin:0; }
.pricing-panel .red { color:#dc2626; font-weight:700; }
.pricing-panel .warn { font-weight:700; color:#d97706; }

/* == Toast == */
.copy-toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#1E293B; color:#E2E8F0; padding:10px 20px; border-radius:8px; font-size:14px; z-index:9999; opacity:0; transition:opacity 0.3s; pointer-events:none; }
.copy-toast.show { opacity:1; }
.t-article-home { max-width:none !important; }