/* Claude Code 大师课 — shared styles (Neo-Brutalism, cloned from openclaw-fullday-workshop) */
:root{--indigo:#6366f1;--teal:#10b981;--red:#ff5757;--orange:#FF914D;--yellow:#FFDE59;--green:#7ED957;--blue:#38B6FF;--purple:#CB6CE6;--dark:#10162f;--bg:#fafafa;--border:#000;--cc:#D97706}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'DM Sans','Noto Sans SC',sans-serif;background:var(--bg);color:#1a1a1a;line-height:1.6}
a{color:var(--indigo);text-decoration:none}a:hover{text-decoration:underline}
.mono{font-family:'Space Mono',monospace}
code,kbd{font-family:'Space Mono',monospace;background:#10162f;color:#FFDE59;padding:2px 6px;font-size:0.9em;border-radius:2px}

/* Header (sticky brand bar) */
.header{background:var(--dark);color:#fff;padding:40px 0;text-align:center;border-bottom:4px solid var(--border)}
.header h1{font-family:'Bricolage Grotesque',sans-serif;font-size:36px;font-weight:900;letter-spacing:-1px}
.header .sub{font-size:16px;opacity:0.7;margin-top:8px}
.header .nav{margin-top:16px;font-size:14px}
.header .nav a{color:#fff;opacity:0.7;margin:0 8px}
.header .nav a:hover{opacity:1}

/* Tags */
.tags{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.tag{padding:5px 14px;font-size:12px;font-weight:700;font-family:'Space Mono',monospace;border:2px solid rgba(255,255,255,0.3)}
.tag.a{background:var(--yellow);color:#000;border-color:var(--yellow)}
.tag.b{background:var(--indigo);color:#fff;border-color:var(--indigo)}

/* Stat bar */
.bar{display:flex;justify-content:center;gap:32px;padding:16px 0;background:#fff;border-bottom:3px solid var(--border);flex-wrap:wrap}
.bar .s{text-align:center}
.bar .n{font-size:24px;font-weight:900;color:var(--cc);font-family:'Bricolage Grotesque',sans-serif}
.bar .l{font-size:11px;color:#888;font-family:'Space Mono',monospace}

/* Container */
.c{max-width:1200px;margin:0 auto;padding:32px 24px}

/* Generic box (neo-brutalism card) */
.box{border:3px solid #000;background:#fff;box-shadow:6px 6px 0 #000;overflow:hidden;margin-bottom:28px}
.box-h{padding:14px 24px;border-bottom:3px solid #000;color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:900;font-size:18px}
.box-h.cc{background:var(--cc)}
.box-h.dark{background:var(--dark)}
.box-h.indigo{background:var(--indigo)}
.box-h.teal{background:var(--teal)}
.box-h.orange{background:var(--orange)}
.box-h.purple{background:var(--purple)}
.box-body{padding:24px}

/* Pill / badges */
.pill{display:inline-block;padding:3px 10px;font-weight:700;font-size:11px;font-family:'Space Mono',monospace;border:1px solid #000}
.pill.live{background:var(--green);color:#000}
.pill.online{background:var(--indigo);color:#fff}
.pill.offline{background:var(--orange);color:#fff}

/* Hero CTA button */
.hero-cta{display:inline-block;padding:14px 32px;background:#10162f;color:#FFDE59;font-family:'Bricolage Grotesque',sans-serif;font-weight:900;font-size:16px;border:3px solid #000;box-shadow:5px 5px 0 #000;text-decoration:none;transition:all 0.15s;cursor:pointer}
.hero-cta:hover{box-shadow:none;transform:translate(3px,3px);text-decoration:none}
.hero-cta.secondary{background:var(--yellow);color:#10162f}
.hero-cta.ghost{background:#fff;color:#10162f}

/* Section heading (centered) */
.section-h{font-family:'Bricolage Grotesque',sans-serif;font-size:32px;font-weight:900;line-height:1.15;color:#10162f;text-align:center;margin-bottom:8px}
.section-tag{font-family:'Space Mono',monospace;font-size:12px;color:var(--cc);font-weight:700;letter-spacing:2px;text-transform:uppercase;text-align:center;display:block;margin-bottom:14px}
.section-sub{text-align:center;color:#555;font-size:14px;margin-bottom:24px;max-width:760px;margin-left:auto;margin-right:auto}

/* Pain / pillar grid */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.grid3,.grid4{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}

.pain-card{background:#fff;border:3px solid #000;box-shadow:6px 6px 0 #000;padding:22px;transition:all 0.15s}
.pain-card:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 #000}
.pain-card .icon{font-size:32px;display:block;margin-bottom:10px}
.pain-card h4{font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:900;color:#10162f;margin-bottom:8px;line-height:1.25}
.pain-card p{font-size:13px;color:#444;line-height:1.7}
.pain-card p strong{color:var(--cc)}

/* Selling-point card */
.sp-card{background:#fffbeb;border:3px solid #000;box-shadow:6px 6px 0 var(--cc);padding:22px;transition:all 0.15s}
.sp-card:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--cc)}
.sp-card .badge{display:inline-block;padding:4px 10px;background:var(--cc);color:#fff;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
.sp-card h4{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:900;color:#10162f;line-height:1.2;margin-bottom:8px}
.sp-card p{font-size:13px;color:#333;line-height:1.7}

/* Outcome list */
.outcome-list{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.outcome-list li{padding:14px 16px;background:#fff;border:2px solid #000;font-size:14px;line-height:1.6;display:flex;gap:10px}
.outcome-list li::before{content:counter(item);counter-increment:item;width:28px;height:28px;flex-shrink:0;background:#10162f;color:var(--yellow);font-family:'Space Mono',monospace;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;border:2px solid #000}
.outcome-list{counter-reset:item}
@media(max-width:768px){.outcome-list{grid-template-columns:1fr}}

/* Asset list (6 takeaways) */
.asset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.asset-card{padding:18px;border:3px solid #000;background:#fff;box-shadow:5px 5px 0 var(--dark);transition:all 0.15s}
.asset-card:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--dark)}
.asset-card .icon{font-size:28px;display:block;margin-bottom:6px}
.asset-card h5{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:900;color:#10162f;margin-bottom:6px;line-height:1.25}
.asset-card p{font-size:12px;color:#555;line-height:1.6}
@media(max-width:900px){.asset-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.asset-grid{grid-template-columns:1fr}}

/* Hero banner (top fact band) */
.hero-banner{background:var(--yellow);border-top:3px solid #000;border-bottom:3px solid #000;padding:18px 24px}
.hero-banner-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.hero-fact{font-family:'Bricolage Grotesque',sans-serif;font-weight:900}
.hero-fact .label{font-size:11px;font-family:'Space Mono',monospace;color:#10162f;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:2px;opacity:0.6;font-weight:700}
.hero-fact .v{font-size:22px;color:#10162f;line-height:1.1}
.hero-fact .v small{font-size:13px;font-weight:600;opacity:0.7}

/* Agenda table (course outline) */
.agenda{width:100%;border-collapse:collapse;font-size:14px}
.agenda thead th{background:#10162f;color:#fff;text-align:left;padding:12px 16px;font-family:'Space Mono',monospace;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;border:2px solid #000}
.agenda tbody td{padding:14px 16px;border:2px solid #000;background:#fff;vertical-align:top}
.agenda tbody tr:nth-child(even) td{background:#fafafa}
.agenda .t-time{font-family:'Space Mono',monospace;font-weight:700;color:var(--cc);white-space:nowrap;width:120px}
.agenda .t-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:900;font-size:15px;color:#10162f}
.agenda .t-sub{font-size:12px;color:#666;margin-top:4px;line-height:1.6}
.agenda .t-do{font-size:13px;color:#444;line-height:1.65}
@media(max-width:768px){.agenda{display:block;overflow-x:auto}}

/* Callout */
.callout{margin:24px 0;padding:24px 26px;border:3px solid var(--cc);background:#fffbeb;border-left-width:10px;font-size:15px;line-height:1.8}
.callout strong{color:var(--cc)}
.callout .lead{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:900;color:#10162f;margin-bottom:10px;display:block;line-height:1.2}

/* FAQ */
details{border:2px solid #000;margin-bottom:8px;background:#fff}
details summary{padding:12px 18px;font-weight:700;font-size:14px;cursor:pointer;background:#fafafa;list-style:none;display:flex;justify-content:space-between;align-items:center}
details summary::after{content:'+';font-family:'Space Mono',monospace;font-size:20px;font-weight:700;color:var(--cc)}
details[open] summary::after{content:'−'}
details[open] summary{background:#10162f;color:#fff}
details>div{padding:14px 18px;font-size:14px;line-height:1.8;border-top:2px solid #000}

/* Copy-center cards (event-announcement / mp-article) */
.copy-card{border:3px solid #000;background:#fff;box-shadow:6px 6px 0 #000;margin-bottom:24px;overflow:hidden}
.copy-card-head{padding:14px 20px;background:var(--dark);color:#fff;display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid #000;flex-wrap:wrap;gap:12px}
.copy-card-head .title{font-family:'Bricolage Grotesque',sans-serif;font-weight:900;font-size:16px}
.copy-card-head .meta{font-family:'Space Mono',monospace;font-size:11px;opacity:0.7;text-transform:uppercase;letter-spacing:1px}
.copy-card-body{padding:20px;font-size:14px;line-height:1.85;color:#1a1a1a;white-space:pre-wrap;font-family:'DM Sans','Noto Sans SC',sans-serif;background:#fafafa;border-bottom:2px dashed #ccc;max-height:600px;overflow-y:auto}
.copy-card-actions{padding:12px 20px;display:flex;gap:10px;flex-wrap:wrap}
.copy-btn{padding:8px 18px;background:var(--yellow);color:#10162f;border:2px solid #000;font-family:'Space Mono',monospace;font-weight:700;font-size:13px;cursor:pointer;transition:all 0.12s;box-shadow:3px 3px 0 #000}
.copy-btn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.copy-btn.success{background:var(--green);color:#000}

/* MP article body styles */
.mp-body{max-width:780px;margin:0 auto;padding:32px 24px;background:#fff;border:3px solid #000;box-shadow:6px 6px 0 #000;font-size:15px;line-height:1.9}
.mp-body h2{font-family:'Bricolage Grotesque',sans-serif;font-size:24px;font-weight:900;color:#10162f;margin:28px 0 12px;border-left:6px solid var(--cc);padding-left:12px;line-height:1.3}
.mp-body h3{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;color:#10162f;margin:20px 0 10px}
.mp-body p{margin-bottom:16px;color:#222}
.mp-body strong{color:var(--cc);font-weight:700}
.mp-body ul,.mp-body ol{margin:12px 0 16px 24px}
.mp-body li{margin-bottom:6px}
.mp-body blockquote{border-left:4px solid var(--cc);padding:8px 16px;margin:16px 0;background:#fffbeb;color:#444;font-style:italic}
.mp-body code{background:#10162f;color:#FFDE59;padding:2px 8px;font-family:'Space Mono',monospace;font-size:0.9em}
.mp-body hr{border:0;border-top:2px dashed #ccc;margin:24px 0}

/* Internal-use ribbon */
.internal-ribbon{background:var(--red);color:#fff;padding:10px 24px;text-align:center;font-family:'Space Mono',monospace;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;border-bottom:3px solid #000}

/* Footer */
.footer{margin-top:40px;padding:24px;text-align:center;border-top:3px solid var(--border);color:#888;font-size:13px}
.footer a{color:var(--indigo)}

/* CTA block (dark) */
.cta-block{margin:32px 0;padding:32px 24px;background:#10162f;color:#fff;border:3px solid #000;box-shadow:6px 6px 0 var(--yellow);text-align:center}
.cta-block h2{font-family:'Bricolage Grotesque',sans-serif;font-size:30px;font-weight:900;margin-bottom:10px;line-height:1.2}
.cta-block .sub{opacity:0.8;margin-bottom:20px;font-size:15px}
.cta-block .price{font-family:'Bricolage Grotesque',sans-serif;font-size:48px;font-weight:900;color:var(--yellow);line-height:1;margin:12px 0}
.cta-block .price small{font-size:18px;opacity:0.7;font-weight:600}
.cta-block .strike{text-decoration:line-through;opacity:0.5;font-size:24px;margin-left:8px}

/* Compare two-format table (online vs offline) */
.compare-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px}
.compare-table th{background:#10162f;color:#fff;padding:12px 16px;text-align:left;border:2px solid #000;font-family:'Bricolage Grotesque',sans-serif;font-size:15px}
.compare-table td{padding:12px 16px;border:2px solid #000;background:#fff;vertical-align:top}
.compare-table tr:nth-child(even) td{background:#fafafa}
.compare-table .label{font-family:'Space Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#888;width:120px}
@media(max-width:768px){.compare-table{display:block;overflow-x:auto}}

/* Mobile responsive */
@media(max-width:768px){
  body{font-size:14px}
  .c{padding:20px 14px}
  .header{padding:28px 16px}
  .header h1{font-size:24px;line-height:1.2;letter-spacing:-0.5px}
  .header .sub{font-size:13px}
  .section-h{font-size:22px}
  .box{box-shadow:4px 4px 0 #000;margin-bottom:20px}
  .box-body{padding:18px}
  .hero-cta{display:block;text-align:center;width:100%;margin:6px 0}
  .copy-card-head{flex-direction:column;align-items:flex-start}
  .mp-body{padding:20px 16px}
  .mp-body h2{font-size:20px}
  .mp-body h3{font-size:16px}
  .cta-block{padding:24px 16px}
  .cta-block h2{font-size:22px}
  .cta-block .price{font-size:36px}
}