/* Charmgen uses GNUCMS theme.css for fonts, colors, controls and theme state.
   These scoped rules only arrange the collection service's own components. */
.charmgen-site { font-size:16px; }
.charmgen-site .cg-main { min-height:60vh; padding-block:1.75rem 3.5rem; }
.cg-header .navbar { justify-content:space-between; }
.cg-header .cg-brand-mark, .cg-footer .cg-brand-mark { font-size:23px; font-weight:800; letter-spacing:-2px; }
.cg-header-actions { display:flex; align-items:center; gap:.5rem; }
.cg-header-actions .btn-sm { font-size:14px; min-height:40px; }
.cg-header .account-menu { position:relative; }
.cg-header .account-menu summary { list-style:none; cursor:pointer; }
.cg-header .account-menu summary::-webkit-details-marker { display:none; }
.cg-header .account-menu[open] summary svg { transform:rotate(180deg); }
.cg-header .member-links { position:absolute; z-index:100; top:calc(100% + .5rem); left:0; min-width:190px; padding:.5rem; border:1px solid var(--bc-10); border-radius:var(--radius-box); background:var(--color-base-100); box-shadow:var(--shadow-3); }
.cg-header .account-menu:not([open]) .member-links { display:none; }
.cg-header .member-links a, .cg-header .member-links button { display:flex; align-items:center; gap:.6rem; width:100%; min-height:44px; padding:.6rem .8rem; font:inherit; font-size:14px; border:0; border-radius:var(--radius-field); background:transparent; color:var(--color-base-content); text-align:left; white-space:nowrap; cursor:pointer; }
.cg-header .member-links a:hover, .cg-header .member-links button:hover { background:var(--color-base-200); color:var(--color-primary); }
.charmgen-site .cg-footer .footer-note { font-size:13px; }
.charmgen-site .auth-card .card-title { font-size:24px; }
.cg-content { --cg-muted:var(--bc-soft); --cg-border:var(--bc-10); }
.cg-content .wrap { max-width:none; padding-inline:0; }
.cg-content h1 { font-size:clamp(30px,3.2vw,42px); font-weight:800; line-height:1.35; letter-spacing:-.04em; text-wrap:balance; }
.cg-content h2 { font-size:25px; font-weight:800; line-height:1.45; letter-spacing:-.025em; }
.cg-content h3 { font-size:18px; font-weight:750; line-height:1.5; }
.cg-content p { line-height:1.8; }
.cg-content .eyebrow { display:inline-flex; align-items:center; gap:.5rem; color:var(--color-primary); font-size:13px; font-weight:750; letter-spacing:.02em; margin-bottom:.75rem; }
.cg-content .text-link { color:var(--color-primary); font-size:15px; font-weight:650; }
.cg-content .text-link:hover { text-decoration:underline; }
.cg-content .section-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.cg-content .section-heading p { margin-top:.65rem; color:var(--cg-muted); }
.cg-content .cg-hero { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:3rem; padding:2.5rem; margin-block:2rem; border:1px solid var(--cg-border); border-radius:var(--radius-box); background:var(--color-base-100); box-shadow:var(--shadow-1); }
.cg-content .hero-copy h1 em { color:var(--color-primary); font-style:normal; }
.cg-content .hero-copy>p { color:var(--cg-muted); margin-block:1.25rem 1.5rem; }
.cg-content .hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1rem; }
.cg-content .hero-actions .btn { flex-shrink:0; white-space:nowrap; }
.cg-content .hero-points { display:flex; flex-wrap:wrap; gap:.4rem 1rem; color:var(--cg-muted); font-size:13px; margin-top:1.5rem; }
.cg-content .hero-art { position:relative; padding:1.25rem .75rem 2.5rem; min-width:0; }
.cg-content .collection-demo { padding:1.5rem; border:1px solid var(--cg-border); border-radius:var(--radius-box); background:var(--color-base-200); }
.cg-content .demo-top { display:flex; gap:.7rem; align-items:center; padding-bottom:1rem; }
.cg-content .demo-avatar { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; border-radius:12px; color:var(--color-primary); background:var(--brand-wash); font-weight:800; font-size:24px; }
.cg-content .demo-top strong, .cg-content .demo-item strong { display:block; font-size:15px; }
.cg-content .demo-top small, .cg-content .demo-item small { display:block; font-size:12px; color:var(--cg-muted); margin-top:.2rem; }
.cg-content .private-chip { margin-left:auto; font-size:11px; white-space:nowrap; color:var(--color-primary); background:var(--brand-wash); border-radius:999px; padding:.25rem .6rem; }
.cg-content .demo-item { display:flex; align-items:center; gap:.8rem; padding:1rem 0; border-top:1px solid var(--cg-border); }
.cg-content .demo-icon { display:grid; place-items:center; width:48px; height:48px; flex-shrink:0; font-size:26px; background:var(--color-base-100); border-radius:12px; }
.cg-content .demo-item b { margin-left:auto; color:var(--color-success); }
.cg-content .demo-placeholder { padding:.75rem; text-align:center; font-size:12px; color:var(--cg-muted); border:1px dashed var(--cg-border); border-radius:var(--radius-field); }
.cg-content .example-label { display:block; text-align:right; font-size:11px; color:var(--cg-muted); margin-top:.5rem; }
.cg-content .floating-plus { position:absolute; right:0; top:0; border-radius:50%; width:56px; height:56px; background:#176b52; box-shadow:var(--shadow-2); font-size:0; }
.cg-content .floating-plus::before, .cg-content .floating-plus::after { content:""; position:absolute; left:50%; top:50%; width:44%; height:3px; border-radius:2px; background:#fff; transform:translate(-50%,-50%); }
.cg-content .floating-plus::after { transform:translate(-50%,-50%) rotate(90deg); }
.cg-content .floating-note { position:absolute; bottom:.5rem; right:0; padding:.75rem 1rem; font-size:13px; border:1px solid var(--cg-border); border-radius:var(--radius-field); background:var(--color-base-100); box-shadow:var(--shadow-1); }
.cg-content .floating-note span { color:var(--color-primary); margin-right:.4rem; }
.cg-content .stats-section { padding-block:1.5rem 2rem; }
.cg-content .live-label { color:var(--cg-muted); font-size:13px; white-space:nowrap; }
.cg-content .total-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.cg-content .total-grid article, .cg-content .period-grid article, .cg-content .cg-steps article { padding:1.5rem; border:1px solid var(--cg-border); border-radius:var(--radius-box); background:var(--color-base-100); box-shadow:var(--shadow-1); }
.cg-content .total-grid article>span { color:var(--cg-muted); font-size:15px; }
.cg-content .total-grid strong { display:block; font-size:40px; font-weight:800; letter-spacing:-.04em; }
.cg-content .total-grid small { font-size:16px; color:var(--cg-muted); font-weight:500; margin-left:.5rem; }
.cg-content .total-grid p { color:var(--cg-muted); font-size:14px; }
.cg-content .period-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.cg-content .period-grid article.today { border-color:var(--color-primary); }
.cg-content .period-grid h3 { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:1rem; font-size:16px; }
.cg-content .period-grid h3 span { color:var(--color-primary); background:var(--brand-wash); border-radius:999px; font-size:11px; padding:.2rem .5rem; }
.cg-content .period-grid dl>div { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-top:.5rem; }
.cg-content .period-grid dt { font-size:14px; color:var(--cg-muted); }
.cg-content .period-grid dd { font-size:24px; font-weight:750; }
.cg-content .period-grid small { font-size:13px; font-weight:400; margin-left:.4rem; color:var(--cg-muted); }
.cg-content .stats-note { margin-top:1rem; color:var(--cg-muted); font-size:14px; }
.cg-content .export-panel { margin:1.5rem 0; }
.cg-content .export-panel .btn { height:auto; min-height:2.75rem; white-space:normal; text-align:center; padding:.7rem 1rem; }
.cg-content .how { padding-block:1.5rem 2rem; }
.cg-content .cg-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.cg-content .step-number { display:grid; place-items:center; width:36px; height:36px; margin-bottom:1rem; border-radius:10px; background:var(--brand-wash); color:var(--color-primary); font-weight:800; font-size:14px; }
.cg-content .cg-steps p { color:var(--cg-muted); font-size:15px; margin-top:.75rem; }
.cg-content .partner-strip { display:flex; align-items:center; flex-wrap:wrap; gap:1rem 1.5rem; margin-top:1.5rem; font-size:14px; }
.cg-content .partner { color:var(--cg-muted); }
.cg-content .partner.active { color:var(--color-primary); font-weight:700; }
.cg-content .partner small { font-size:12px; margin-left:.25rem; }
.cg-content .notice { display:flex; gap:.75rem; padding:1.5rem; border:1px solid var(--cg-border); border-radius:var(--radius-box); background:var(--color-base-100); }
.cg-content .notice h2 { font-size:18px; margin-bottom:.5rem; }
.cg-content .notice p { color:var(--cg-muted); font-size:15px; }
.cg-content .notice-symbol { display:grid; place-items:center; flex-shrink:0; width:23px; height:23px; margin-top:2px; border:1px solid var(--color-primary); color:var(--color-primary); border-radius:50%; font-size:14px; }
.cg-content .dashboard h1 { font-size:30px; }
.cg-content .partner-tabs { display:flex; overflow-x:auto; margin-block:1.75rem; border-bottom:1px solid var(--cg-border); }
.cg-content .partner-tabs a { padding:.75rem 1.1rem; white-space:nowrap; color:var(--cg-muted); font-size:15px; border-bottom:3px solid transparent; }
.cg-content .partner-tabs .selected { border-color:var(--color-primary); color:var(--color-primary); font-weight:700; }
.cg-content .empty { text-align:center; padding:3rem 1.5rem; background:var(--color-base-100); border:1px solid var(--cg-border); border-radius:var(--radius-box); }
.cg-content .empty-plus { display:block; font-size:40px; color:var(--color-primary); }
.cg-content .empty p { margin-block:.75rem 1.25rem; color:var(--cg-muted); }
.cg-content .product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.cg-content .product-card { display:flex; flex-direction:column; gap:.85rem; padding:1.1rem; border:1px solid var(--cg-border); border-radius:var(--radius-box); background:var(--color-base-100); box-shadow:var(--shadow-1); min-width:0; }
.cg-content .product-card img { width:100%; height:190px; object-fit:contain; border-radius:var(--radius-field); background:white; }
.cg-content .product-card small { font-size:11px; font-weight:700; color:var(--color-primary); letter-spacing:.05em; }
.cg-content .product-card h2 { flex:1; font-size:16px; font-weight:650; line-height:1.65; overflow-wrap:anywhere; }
.cg-content .product-links { display:flex; flex-wrap:wrap; gap:.5rem 1rem; font-size:13px; color:var(--cg-muted); }
.cg-content .product-links a:hover { text-decoration:underline; }
.cg-content .copy-link { width:100%; font-size:14px; height:auto; min-height:42px; padding:.5rem; white-space:normal; }
.cg-content .delete-button { color:var(--color-error); }
.cg-content .key-panel { margin-top:2rem; padding:1.75rem; border:1px solid var(--cg-border); border-radius:var(--radius-box); background:var(--color-base-100); }
.cg-content .key-panel h2 { font-size:22px; }
.cg-content .key-panel p { color:var(--cg-muted); margin-block:.75rem 1.25rem; }
.cg-content .key-panel label { display:block; margin-block:1rem .5rem; font-size:14px; }
.cg-content .key-copy, .cg-content .key-panel form { display:flex; flex-wrap:wrap; gap:.75rem; }
.cg-content .key-copy { margin-bottom:1rem; }
.cg-content .key-copy input { flex:1; width:100%; min-width:180px; font-family:var(--mono); font-size:14px; }
.cg-content .pagination { display:flex; justify-content:center; gap:2rem; padding:1.5rem; }
.cg-content .extension-guide { max-width:850px; margin-inline:auto; padding:2rem; border:1px solid var(--cg-border); border-radius:var(--radius-box); background:var(--color-base-100); }
.cg-content .extension-guide>p { margin-block:1rem; color:var(--cg-muted); }
.cg-content .extension-guide ol { list-style:decimal; margin:2rem 0; padding-left:1.5rem; }
.cg-content .extension-guide li { padding-block:.4rem; }
.cg-content .extension-guide ol a { color:var(--color-primary); text-decoration:underline; }
.cg-content .extension-guide code { overflow-wrap:anywhere; }
.cg-content .faq-highlights { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.5rem 0 2rem; }
.cg-content .faq-highlights span { border:1px solid var(--cg-border); border-radius:var(--radius-field); padding:.5rem .8rem; background:var(--color-base-200); font-size:14px; }
.cg-content .faq-item { margin:0 0 .75rem; border:1px solid var(--cg-border); border-radius:var(--radius-box); background:var(--color-base-100); }
.cg-content .faq-item summary { padding:1.2rem; font-weight:700; cursor:pointer; line-height:1.6; }
.cg-content .faq-item summary:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; border-radius:var(--radius-box); }
.cg-content .faq-item>div { padding:0 1.2rem 1.2rem; color:var(--cg-muted); }
.cg-content .faq-item p+p { margin-top:.85rem; }
.cg-content .faq-guide a { color:var(--color-primary); text-decoration:underline; }
.cg-content .faq-item blockquote { margin:1rem 0; border-left:3px solid var(--color-primary); padding:.5rem 1rem; background:var(--color-base-200); }
.cg-content .extension-stores { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:1rem; margin:2rem 0; }
.cg-content .extension-stores article { display:block; margin:0; padding:1.25rem; }
.cg-content .extension-stores h2 { margin:0 0 1rem; }
.cg-content .extension-stores .btn { margin-top:1rem; white-space:normal; }
.cg-content .extension-stores ol { margin:1.25rem 0 0; }
.cg-content .home-promotion { margin-bottom:2rem; }
.cg-content .home-promotion-label { display:block; color:var(--cg-muted); font-size:12px; font-weight:700; letter-spacing:.04em; margin-bottom:.65rem; }
.cg-content .home-promotion-banner { display:block; overflow:hidden; border:1px solid var(--cg-border); border-radius:var(--radius-box); background:var(--color-base-100); box-shadow:var(--shadow-1); }
.cg-content .home-promotion-banner img { width:100%; height:auto; }
.cg-content .home-promotion-cta { display:block; padding:1rem 1.5rem; color:var(--color-primary); font-size:16px; font-weight:750; }
.cg-content .home-promotion-banner:hover .home-promotion-cta { text-decoration:underline; }
.cg-content .home-promotion-disclosure { margin-top:.75rem; font-size:13px; color:var(--cg-muted); line-height:1.8; }
@media(max-width:1000px) {
  .cg-content .cg-hero { gap:1.5rem; padding:1.75rem; }
  .cg-content .period-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cg-content .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .cg-header .navbar { flex-wrap:wrap; padding-block:.75rem; gap:.6rem; }
  .cg-header-actions { gap:.25rem; flex-wrap:wrap; flex-basis:100%; }
  .cg-header-actions .btn-sm { font-size:13px; padding-inline:.65rem; }
  .cg-header .cg-extension-link { display:inline-flex; }
  .cg-content .cg-hero { grid-template-columns:1fr; padding:1.5rem; }
  .cg-content .hero-art { width:100%; max-width:420px; margin-inline:auto; }
  .cg-content .cg-steps { grid-template-columns:1fr; }
  .cg-content .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cg-content .section-heading { flex-wrap:wrap; }
  .cg-content .dashboard h1 { font-size:26px; }
  .cg-content .key-panel, .cg-content .extension-guide { padding:1.25rem; }
}
@media(max-width:420px) {
  .cg-header .navbar { gap:.5rem; }
  .cg-header .brand { gap:.4rem; }
  .cg-header .brand-logo { width:30px; height:30px; font-size:21px; }
  .cg-header .brand-name { font-size:19px; }
  .cg-header-actions .btn-sm { padding-inline:.45rem; }
  .cg-header-actions .theme-toggle { width:36px; height:40px; }
  .cg-header .member-links { left:auto; right:0; }
  .cg-content .cg-hero { padding:1.2rem; }
  .cg-content .collection-demo { padding:1rem; }
  .cg-content .private-chip { display:none; }
  .cg-content .total-grid article, .cg-content .period-grid article { padding:1rem; }
  .cg-content .total-grid strong { font-size:34px; }
  .cg-content .product-grid { grid-template-columns:1fr; }
}