/* ============================================================
   Archlet Components - Theme CSS
   ============================================================ */

/* ---- Design Tokens ---- */
:root {
  --ac-color-primary: #3b82f6;
  --ac-color-primary-hover: #2563eb;
  --ac-color-primary-light: rgba(59, 130, 246, 0.1);
  --ac-color-bg: #ffffff;
  --ac-color-bg-secondary: #f8fafc;
  --ac-color-bg-tertiary: #f1f5f9;
  --ac-color-surface: #ffffff;
  --ac-color-text: #0f172a;
  --ac-color-text-secondary: #475569;
  --ac-color-border: #e2e8f0;
  --ac-color-success: #22c55e;
  --ac-color-warning: #f59e0b;
  --ac-color-error: #ef4444;
  --ac-color-info: #3b82f6;
  --ac-radius-sm: 4px;
  --ac-radius-md: 8px;
  --ac-radius-lg: 12px;
  --ac-radius-xl: 16px;
  --ac-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --ac-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
  --ac-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
  --ac-transition: 150ms ease;
}

/* ---- Design Token Aliases (for framework component interop) ---- */
:root {
  --color-primary: var(--ac-color-primary);
  --color-bg: var(--ac-color-bg);
  --color-surface: var(--ac-color-surface);
  --color-text: var(--ac-color-text);
  --color-border: var(--ac-color-border);
}

[data-theme="dark"], .dark {
  --ac-color-bg: #0f172a;
  --ac-color-bg-secondary: #1e293b;
  --ac-color-bg-tertiary: #334155;
  --ac-color-surface: #1e293b;
  --ac-color-text: #f1f5f9;
  --ac-color-text-secondary: #94a3b8;
  --ac-color-border: #334155;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ac-color-bg: #0f172a;
    --ac-color-bg-secondary: #1e293b;
    --ac-color-bg-tertiary: #334155;
    --ac-color-surface: #1e293b;
    --ac-color-text: #f1f5f9;
    --ac-color-text-secondary: #94a3b8;
    --ac-color-border: #334155;
  }
}

/* ---- Callout ---- */
.archlet-callout {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--ac-radius-md);
  border: 1px solid var(--ac-color-border);
  background: var(--ac-color-bg-secondary);
  margin: 1.5rem 0;
  font-size: 0.95rem;
}
.archlet-callout-icon { flex-shrink:0; font-size:1.25rem; line-height:1.5; }
.archlet-callout-title { font-weight:600; margin-bottom:0.25rem; }
.archlet-callout--info { border-left:3px solid var(--ac-color-info); }
.archlet-callout--warning { border-left:3px solid var(--ac-color-warning); }
.archlet-callout--error { border-left:3px solid var(--ac-color-error); }
.archlet-callout--success { border-left:3px solid var(--ac-color-success); }
.archlet-callout--tip { border-left:3px solid #a855f7; }
.archlet-callout--note { border-left:3px solid #64748b; }

/* ---- Badge ---- */
.archlet-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15em 0.6em;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  background: var(--ac-color-bg-tertiary);
  color: var(--ac-color-text-secondary);
}
.archlet-badge--primary { background: var(--ac-color-primary-light); color: var(--ac-color-primary); }
.archlet-badge--success { background: rgba(34,197,94,0.1); color: var(--ac-color-success); }
.archlet-badge--warning { background: rgba(245,158,11,0.1); color: var(--ac-color-warning); }
.archlet-badge--error { background: rgba(239,68,68,0.1); color: var(--ac-color-error); }
.archlet-badge--info { background: rgba(59,130,246,0.1); color: var(--ac-color-info); }

/* ---- Button ---- */
.archlet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  border-radius: var(--ac-radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--ac-transition);
  font-family: inherit;
}
.archlet-btn--sm { padding: 0.375rem 0.75rem; font-size:0.8rem; }
.archlet-btn--md { padding: 0.5rem 1rem; font-size:0.9rem; }
.archlet-btn--lg { padding: 0.75rem 1.5rem; font-size:1rem; }
.archlet-btn--primary { background:var(--ac-color-primary); color:#fff; }
.archlet-btn--primary:hover { background:var(--ac-color-primary-hover); }
.archlet-btn--secondary { background:var(--ac-color-bg-tertiary); color:var(--ac-color-text); }
.archlet-btn--secondary:hover { background:var(--ac-color-border); }
.archlet-btn--outline { border-color:var(--ac-color-border); color:var(--ac-color-text); background:transparent; }
.archlet-btn--outline:hover { border-color:var(--ac-color-primary); color:var(--ac-color-primary); }
.archlet-btn--ghost { color:var(--ac-color-text-secondary); background:transparent; }
.archlet-btn--ghost:hover { background:var(--ac-color-bg-tertiary); color:var(--ac-color-text); }
.archlet-btn:disabled, .archlet-btn[aria-disabled="true"] { opacity:0.5; cursor:not-allowed; pointer-events:none; }

/* ---- Card ---- */
.archlet-card {
  background: var(--ac-color-surface);
  border: 1px solid var(--ac-color-border);
  border-radius: var(--ac-radius-lg);
  transition: all var(--ac-transition);
}
.archlet-card--pad-sm { padding: 0.75rem; }
.archlet-card--pad-md { padding: 1.25rem; }
.archlet-card--pad-lg { padding: 1.75rem; }
.archlet-card--outline { background:transparent; border:2px solid var(--ac-color-border); }
.archlet-card--elevated { border-color:transparent; box-shadow: var(--ac-shadow-lg); }
.archlet-card--hover:hover { box-shadow: var(--ac-shadow-lg); transform:translateY(-2px); }

/* ---- Tabs ---- */
.archlet-tabs-header { display:flex; border-bottom:2px solid var(--ac-color-border); margin-bottom:1rem; }
.archlet-tab-btn {
  padding:0.5rem 1rem; background:none; border:none; border-bottom:2px solid transparent;
  margin-bottom:-2px; cursor:pointer; font-weight:500; color:var(--ac-color-text-secondary);
  font-size:0.9rem; transition:all var(--ac-transition); font-family:inherit;
}
.archlet-tab-btn:hover { color:var(--ac-color-text); }
.archlet-tab-btn--active { color:var(--ac-color-primary); border-bottom-color:var(--ac-color-primary); }
.archlet-tab-panel { padding:0.5rem 0; }
.archlet-tab-panel:not(.archlet-tab-panel--active) { display:none; }

/* ---- Steps ---- */
.archlet-steps { list-style:none; padding:0; margin:1.5rem 0; }
.archlet-steps--vertical .archlet-step { display:flex; gap:1rem; padding-bottom:1.5rem; position:relative; }
.archlet-steps--vertical .archlet-step:not(:last-child)::after { content:''; position:absolute; left:1.25rem; top:2.5rem; bottom:0; width:2px; background:var(--ac-color-border); }
.archlet-steps--horizontal { display:flex; gap:1rem; }
.archlet-steps--horizontal .archlet-step { flex:1; text-align:center; }
.archlet-step-marker { width:2.5rem; height:2.5rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; background:var(--ac-color-bg-tertiary); color:var(--ac-color-text-secondary); flex-shrink:0; }
.archlet-step--done .archlet-step-marker { background:var(--ac-color-success); color:#fff; }
.archlet-step--current .archlet-step-marker { background:var(--ac-color-primary); color:#fff; }
.archlet-step-title { font-weight:600; margin-bottom:0.25rem; }
.archlet-step-desc { font-size:0.85rem; color:var(--ac-color-text-secondary); }

/* ---- Back to Top ---- */
.archlet-back-to-top { position:fixed; bottom:2rem; right:2rem; width:2.75rem; height:2.75rem; border-radius:50%; background:var(--ac-color-primary); color:#fff; border:none; cursor:pointer; font-size:1.25rem; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all var(--ac-transition); z-index:50; box-shadow:var(--ac-shadow-md); }
.archlet-back-to-top.visible { opacity:1; visibility:visible; }
.archlet-back-to-top:hover { background:var(--ac-color-primary-hover); transform:translateY(-2px); }

/* ---- Modal ---- */
.archlet-modal { position:fixed; inset:0; z-index:100; display:none; }
.archlet-modal[data-open="true"] { display:flex; align-items:center; justify-content:center; }
.archlet-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.5); animation:ac-fade-in 0.2s; }
.archlet-modal-content { position:relative; background:var(--ac-color-surface); border-radius:var(--ac-radius-xl); max-width:32rem; width:90%; max-height:85vh; overflow-y:auto; box-shadow:var(--ac-shadow-lg); animation:ac-slide-up 0.2s; }
.archlet-modal-header { display:flex; justify-content:space-between; align-items:center; padding:1.25rem 1.5rem 0.5rem; }
.archlet-modal-title { font-size:1.15rem; font-weight:700; }
.archlet-modal-close { background:none; border:none; font-size:1.25rem; cursor:pointer; color:var(--ac-color-text-secondary); padding:0.25rem; border-radius:var(--ac-radius-sm); }
.archlet-modal-close:hover { background:var(--ac-color-bg-tertiary); color:var(--ac-color-text); }
.archlet-modal-body { padding:0.5rem 1.5rem 1.5rem; }
@keyframes ac-fade-in { from{opacity:0} to{opacity:1} }
@keyframes ac-slide-up { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ---- Toast ---- */
.archlet-toast {
  display:flex; align-items:flex-start; gap:0.75rem; padding:1rem 1.25rem;
  border-radius:var(--ac-radius-md); background:var(--ac-color-surface);
  border:1px solid var(--ac-color-border); box-shadow:var(--ac-shadow-lg);
  max-width:24rem; animation:ac-slide-in-right 0.3s;
}
.archlet-toast[data-closing] { animation:ac-slide-out-right 0.2s forwards; }
.archlet-toast-icon { font-size:1.25rem; flex-shrink:0; }
.archlet-toast-content { flex:1; }
.archlet-toast-title { font-weight:600; }
.archlet-toast-message { font-size:0.85rem; color:var(--ac-color-text-secondary); }
.archlet-toast-close { background:none; border:none; cursor:pointer; color:var(--ac-color-text-secondary); padding:0.25rem; font-size:0.85rem; border-radius:var(--ac-radius-sm); }
.archlet-toast--success { border-left:3px solid var(--ac-color-success); }
.archlet-toast--warning { border-left:3px solid var(--ac-color-warning); }
.archlet-toast--error { border-left:3px solid var(--ac-color-error); }
.archlet-toast--info { border-left:3px solid var(--ac-color-info); }
@keyframes ac-slide-in-right { from{opacity:0;transform:translateX(100%)} to{opacity:1;transform:translateX(0)} }
@keyframes ac-slide-out-right { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(100%)} }

/* ---- Accordion ---- */
.archlet-accordion { border:1px solid var(--ac-color-border); border-radius:var(--ac-radius-md); overflow:hidden; }
.archlet-accordion-item { border-bottom:1px solid var(--ac-color-border); }
.archlet-accordion-item:last-child { border-bottom:none; }
.archlet-accordion-trigger { display:flex; align-items:center; gap:0.75rem; padding:1rem 1.25rem; cursor:pointer; font-weight:600; list-style:none; user-select:none; }
.archlet-accordion-trigger::-webkit-details-marker { display:none; }
.archlet-accordion-icon::before { content:'▸'; display:inline-block; transition:transform var(--ac-transition); font-size:0.85rem; }
.archlet-accordion-item[open] .archlet-accordion-icon::before { transform:rotate(90deg); }
.archlet-accordion-panel { overflow:hidden; }
.archlet-accordion-content { padding:0 1.25rem 1rem 2.5rem; font-size:0.95rem; color:var(--ac-color-text-secondary); }
.archlet-accordion-item[disabled] .archlet-accordion-trigger { opacity:0.5; cursor:not-allowed; }

/* ---- Progress Bar ---- */
.archlet-progress { width:100%; }
.archlet-progress-label-outside { display:block; margin-bottom:0.25rem; font-size:0.8rem; font-weight:600; color:var(--ac-color-text-secondary); }
.archlet-progress-track { width:100%; background:var(--ac-color-bg-tertiary); border-radius:9999px; overflow:hidden; }
.archlet-progress-bar { height:100%; border-radius:9999px; transition:width 0.3s; display:flex; align-items:center; justify-content:center; background:var(--ac-color-primary); }
.archlet-progress-bar--sm { height:0.375rem; }
.archlet-progress-bar--md { height:0.625rem; }
.archlet-progress-bar--lg { height:1rem; }
.archlet-progress-bar--success { background:var(--ac-color-success); }
.archlet-progress-bar--warning { background:var(--ac-color-warning); }
.archlet-progress-bar--error { background:var(--ac-color-error); }
.archlet-progress-bar--striped { background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent); background-size:1rem 1rem; }
.archlet-progress-bar--animated.archlet-progress-bar--striped { animation:ac-progress-stripes 1s linear infinite; }
.archlet-progress-label { font-size:0.7rem; font-weight:700; color:#fff; }
@keyframes ac-progress-stripes { from{background-position:1rem 0} to{background-position:0 0} }

/* ---- Tooltip ---- */
.archlet-tooltip-wrapper { position:relative; display:inline-block; }
.archlet-tooltip {
  position:absolute; z-index:60; padding:0.25rem 0.5rem; border-radius:var(--ac-radius-sm);
  background:var(--ac-color-text); color:var(--ac-color-bg); font-size:0.75rem;
  white-space:nowrap; opacity:0; visibility:hidden; transition:all var(--ac-transition);
  pointer-events:none; max-width:16rem; text-align:center;
}
.archlet-tooltip-wrapper:hover .archlet-tooltip { opacity:1; visibility:visible; }
.archlet-tooltip--top { bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:0.5rem; }
.archlet-tooltip--bottom { top:100%; left:50%; transform:translateX(-50%); margin-top:0.5rem; }
.archlet-tooltip--left { right:100%; top:50%; transform:translateY(-50%); margin-right:0.5rem; }
.archlet-tooltip--right { left:100%; top:50%; transform:translateY(-50%); margin-left:0.5rem; }

/* ---- Table ---- */
.archlet-table-wrapper { overflow-x:auto; margin:1.5rem 0; border-radius:var(--ac-radius-md); border:1px solid var(--ac-color-border); }
.archlet-table { width:100%; border-collapse:collapse; font-size:0.9rem; }
.archlet-table--bordered .archlet-table-th, .archlet-table--bordered .archlet-table-td { border:1px solid var(--ac-color-border); }
.archlet-table-th { padding:0.75rem 1rem; text-align:left; font-weight:600; background:var(--ac-color-bg-secondary); border-bottom:1px solid var(--ac-color-border); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ac-color-text-secondary); }
.archlet-table-th--sortable { cursor:pointer; user-select:none; }
.archlet-table-th--sortable:hover { background:var(--ac-color-bg-tertiary); }
.archlet-table-sort-icon::after { content:'⇅'; margin-left:0.25rem; font-size:0.75rem; opacity:0.4; }
.archlet-table-th[aria-sort="ascending"] .archlet-table-sort-icon::after { content:'↑'; opacity:1; }
.archlet-table-th[aria-sort="descending"] .archlet-table-sort-icon::after { content:'↓'; opacity:1; }
.archlet-table-td { padding:0.625rem 1rem; border-bottom:1px solid var(--ac-color-border); }
.archlet-table-tr--stripe { background:var(--ac-color-bg-secondary); }
.archlet-table-tr--hover:hover { background:var(--ac-color-primary-light); }
.archlet-table--compact .archlet-table-th, .archlet-table--compact .archlet-table-td { padding:0.375rem 0.75rem; }
.archlet-table-empty { text-align:center; padding:2rem; color:var(--ac-color-text-secondary); }

/* ---- Pagination ---- */
.archlet-pagination { display:flex; align-items:center; gap:0.5rem; margin:1.5rem 0; }
.archlet-pagination-prev, .archlet-pagination-next { padding:0.375rem 0.75rem; border-radius:var(--ac-radius-md); text-decoration:none; font-size:0.85rem; font-weight:500; color:var(--ac-color-text-secondary); border:1px solid var(--ac-color-border); transition:all var(--ac-transition); }
.archlet-pagination-prev:hover, .archlet-pagination-next:hover { border-color:var(--ac-color-primary); color:var(--ac-color-primary); }
.archlet-pagination-item--disabled { opacity:0.4; pointer-events:none; }
.archlet-pagination-pages { display:flex; gap:0.25rem; }
.archlet-pagination-item { display:flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:var(--ac-radius-md); text-decoration:none; font-size:0.85rem; color:var(--ac-color-text-secondary); transition:all var(--ac-transition); }
.archlet-pagination-item:hover { background:var(--ac-color-bg-tertiary); }
.archlet-pagination-item--active { background:var(--ac-color-primary); color:#fff; font-weight:600; }
.archlet-pagination-ellipsis { display:flex; align-items:center; justify-content:center; width:2rem; height:2rem; color:var(--ac-color-text-secondary); }

/* ---- Breadcrumbs ---- */
.archlet-breadcrumbs { padding:0.75rem 0; font-size:0.85rem; }
.archlet-breadcrumbs-list { display:flex; align-items:center; gap:0.25rem; list-style:none; padding:0; margin:0; flex-wrap:wrap; }
.archlet-breadcrumbs-link { color:var(--ac-color-text-secondary); text-decoration:none; }
.archlet-breadcrumbs-link:hover { color:var(--ac-color-primary); }
.archlet-breadcrumbs-current { color:var(--ac-color-text); font-weight:500; }
.archlet-breadcrumbs-separator { margin:0 0.25rem; color:var(--ac-color-text-secondary); }

/* ---- PrevNext ---- */
.archlet-prevnext { border-top:1px solid var(--ac-color-border); margin-top:2rem; padding-top:1.5rem; }
.archlet-prevnext-inner { display:flex; justify-content:space-between; gap:1rem; }
.archlet-prev-link, .archlet-next-link { display:flex; flex-direction:column; text-decoration:none; color:var(--ac-color-text); padding:0.75rem 1rem; border:1px solid var(--ac-color-border); border-radius:var(--ac-radius-md); transition:all var(--ac-transition); max-width:50%; }
.archlet-prev-link:hover, .archlet-next-link:hover { border-color:var(--ac-color-primary); }
.archlet-prev-link { text-align:left; }
.archlet-next-link { text-align:right; margin-left:auto; }
.archlet-prev-link--disabled { opacity:0; pointer-events:none; }
.archlet-prevnext-label { font-size:0.75rem; color:var(--ac-color-text-secondary); }
.archlet-prevnext-title { font-weight:500; font-size:0.9rem; margin-top:0.25rem; }

/* ---- Theme Toggle ---- */
.archlet-theme-toggle { background:none; border:1px solid var(--ac-color-border); border-radius:var(--ac-radius-md); cursor:pointer; padding:0.375rem 0.5rem; color:var(--ac-color-text); font-size:1.15rem; transition:all var(--ac-transition); }
.archlet-theme-toggle:hover { background:var(--ac-color-bg-tertiary); }

/* ---- Search ---- */
.archlet-search { position:relative; margin-bottom:1.5rem; }
.archlet-search-box { position:relative; }
.archlet-search-input { width:100%; padding:0.625rem 1rem; border:1px solid var(--ac-color-border); border-radius:var(--ac-radius-md); background:var(--ac-color-bg); color:var(--ac-color-text); font-size:0.9rem; font-family:inherit; outline:none; transition:border-color var(--ac-transition); }
.archlet-search-input:focus { border-color:var(--ac-color-primary); }
.archlet-search-results { position:absolute; top:100%; left:0; right:0; background:var(--ac-color-surface); border:1px solid var(--ac-color-border); border-radius:var(--ac-radius-md); box-shadow:var(--ac-shadow-lg); z-index:40; max-height:20rem; overflow-y:auto; margin-top:0.25rem; }
.archlet-search-result { display:block; padding:0.625rem 1rem; text-decoration:none; color:var(--ac-color-text); border-bottom:1px solid var(--ac-color-border); transition:background var(--ac-transition); }
.archlet-search-result:last-child { border-bottom:none; }
.archlet-search-result:hover { background:var(--ac-color-primary-light); }
.archlet-search-result strong { display:block; font-size:0.9rem; }
.archlet-search-type { font-size:0.7rem; color:var(--ac-color-text-secondary); text-transform:uppercase; }
.archlet-search-result p { font-size:0.8rem; color:var(--ac-color-text-secondary); margin:0.25rem 0 0; }
.archlet-search-empty { padding:1rem; text-align:center; color:var(--ac-color-text-secondary); font-size:0.85rem; }

/* ---- Blog Card ---- */
.archlet-blogcard { background:var(--ac-color-surface); border:1px solid var(--ac-color-border); border-radius:var(--ac-radius-lg); overflow:hidden; transition:all var(--ac-transition); }
.archlet-blogcard:hover { box-shadow:var(--ac-shadow-md); }
.archlet-blogcard--featured { border-color:var(--ac-color-primary); }
.archlet-blogcard-image img { width:100%; height:12rem; object-fit:cover; display:block; }
.archlet-blogcard-body { padding:1.25rem; }
.archlet-blogcard-category { display:inline-block; font-size:0.75rem; font-weight:600; color:var(--ac-color-primary); text-transform:uppercase; margin-bottom:0.5rem; }
.archlet-blogcard-title { font-size:1.1rem; margin:0 0 0.5rem; }
.archlet-blogcard-title a { color:var(--ac-color-text); text-decoration:none; }
.archlet-blogcard-title a:hover { color:var(--ac-color-primary); }
.archlet-blogcard-meta { display:flex; gap:0.75rem; font-size:0.8rem; color:var(--ac-color-text-secondary); margin-bottom:0.5rem; }
.archlet-blogcard-excerpt { font-size:0.9rem; color:var(--ac-color-text-secondary); margin:0 0 0.75rem; line-height:1.6; }
.archlet-blogcard-tags { display:flex; gap:0.375rem; flex-wrap:wrap; }
.archlet-blogcard-tag { font-size:0.75rem; color:var(--ac-color-text-secondary); }

/* ---- Blog Listing ---- */
.archlet-blog-listing-featured { margin-bottom:2rem; }
.archlet-blog-listing-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }
.archlet-blog-listing-empty { text-align:center; padding:3rem 1rem; color:var(--ac-color-text-secondary); }

/* ---- Hero ---- */
.archlet-hero { padding:4rem 0; background:linear-gradient(135deg,var(--ac-color-bg-secondary),var(--ac-color-bg-tertiary)); }
.archlet-hero-inner { max-width:72rem; margin:0 auto; padding:0 1.5rem; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.archlet-hero-badge { display:inline-block; font-size:0.8rem; font-weight:600; padding:0.25rem 0.75rem; border-radius:9999px; background:var(--ac-color-primary-light); color:var(--ac-color-primary); margin-bottom:1rem; }
.archlet-hero-title { font-size:3rem; font-weight:800; line-height:1.15; margin-bottom:1rem; color:var(--ac-color-text); }
.archlet-hero-subtitle { font-size:1.2rem; color:var(--ac-color-text-secondary); margin-bottom:2rem; line-height:1.7; }
.archlet-hero-ctas { display:flex; gap:0.75rem; margin-bottom:2rem; }
.archlet-hero-cta--primary { background:var(--ac-color-primary); color:#fff; padding:0.75rem 1.75rem; border-radius:var(--ac-radius-md); font-weight:600; text-decoration:none; transition:background var(--ac-transition); }
.archlet-hero-cta--primary:hover { background:var(--ac-color-primary-hover); }
.archlet-hero-cta--secondary { background:transparent; color:var(--ac-color-text); padding:0.75rem 1.75rem; border-radius:var(--ac-radius-md); border:2px solid var(--ac-color-border); font-weight:600; text-decoration:none; transition:all var(--ac-transition); }
.archlet-hero-cta--secondary:hover { border-color:var(--ac-color-primary); color:var(--ac-color-primary); }
.archlet-hero-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding-top:1.5rem; border-top:1px solid var(--ac-color-border); }
.archlet-hero-stat-value { display:block; font-size:1.5rem; font-weight:800; color:var(--ac-color-primary); }
.archlet-hero-stat-label { font-size:0.8rem; color:var(--ac-color-text-secondary); }
.archlet-hero-image img { width:100%; border-radius:var(--ac-radius-xl); box-shadow:var(--ac-shadow-lg); }
@media(max-width:768px) {
  .archlet-hero-inner { grid-template-columns:1fr; }
  .archlet-hero-title { font-size:2rem; }
  .archlet-hero-stats { grid-template-columns:repeat(2,1fr); }
}

/* ---- Feature Card & Grid ---- */
.archlet-feature-card { padding:1.5rem; border:1px solid var(--ac-color-border); border-radius:var(--ac-radius-lg); transition:all var(--ac-transition); position:relative; }
.archlet-feature-card:hover { box-shadow:var(--ac-shadow-md); border-color:var(--ac-color-primary); }
.archlet-feature-card-highlight { position:absolute; top:0.75rem; right:0.75rem; font-size:0.7rem; font-weight:600; background:var(--ac-color-primary); color:#fff; padding:0.1rem 0.5rem; border-radius:9999px; }
.archlet-feature-card-icon { font-size:1.5rem; margin-bottom:0.75rem; }
.archlet-feature-card-title { font-weight:600; margin-bottom:0.5rem; font-size:1.05rem; }
.archlet-feature-card-desc { font-size:0.9rem; color:var(--ac-color-text-secondary); line-height:1.6; }
.archlet-feature-grid { padding:3rem 0; }
.archlet-feature-grid-header { text-align:center; margin-bottom:2.5rem; }
.archlet-feature-grid-title { font-size:2rem; font-weight:800; margin-bottom:0.5rem; }
.archlet-feature-grid-subtitle { font-size:1.1rem; color:var(--ac-color-text-secondary); }
.archlet-feature-grid--2 .archlet-feature-grid-items { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.archlet-feature-grid--3 .archlet-feature-grid-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; }
.archlet-feature-grid--4 .archlet-feature-grid-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.5rem; }

/* ---- Pricing Card ---- */
.archlet-pricing-card { background:var(--ac-color-surface); border:1px solid var(--ac-color-border); border-radius:var(--ac-radius-xl); padding:2rem; transition:all var(--ac-transition); position:relative; }
.archlet-pricing-card:hover { box-shadow:var(--ac-shadow-md); }
.archlet-pricing-card--popular { border-color:var(--ac-color-primary); box-shadow:0 0 0 1px var(--ac-color-primary); }
.archlet-pricing-card-badge { position:absolute; top:-0.75rem; left:50%; transform:translateX(-50%); background:var(--ac-color-primary); color:#fff; font-size:0.75rem; font-weight:600; padding:0.2rem 0.75rem; border-radius:9999px; }
.archlet-pricing-card-name { font-size:1.25rem; font-weight:700; margin-bottom:0.5rem; }
.archlet-pricing-card-desc { font-size:0.9rem; color:var(--ac-color-text-secondary); margin-bottom:1.5rem; }
.archlet-pricing-card-price { margin-bottom:1.5rem; }
.archlet-pricing-card-amount { font-size:2.5rem; font-weight:800; color:var(--ac-color-text); }
.archlet-pricing-card-period { font-size:0.9rem; color:var(--ac-color-text-secondary); margin-left:0.25rem; }
.archlet-pricing-card-features { list-style:none; padding:0; margin:0 0 1.5rem; }
.archlet-pricing-card-features li { padding:0.5rem 0; font-size:0.9rem; }
.archlet-pricing-card-feature--excluded { color:var(--ac-color-text-secondary); text-decoration:line-through; }
.archlet-pricing-card-cta { display:block; text-align:center; background:var(--ac-color-primary); color:#fff; padding:0.75rem; border-radius:var(--ac-radius-md); font-weight:600; text-decoration:none; transition:background var(--ac-transition); }
.archlet-pricing-card-cta:hover { background:var(--ac-color-primary-hover); }

/* ---- Post Meta & Related ---- */
.archlet-post-meta { display:flex; gap:1rem; flex-wrap:wrap; font-size:0.85rem; color:var(--ac-color-text-secondary); margin-bottom:1rem; }
.archlet-post-tags { display:flex; gap:0.375rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.archlet-post-tag { font-size:0.8rem; background:var(--ac-color-primary-light); color:var(--ac-color-primary); padding:0.15rem 0.5rem; border-radius:9999px; font-weight:500; }
.archlet-post-share { display:flex; align-items:center; gap:0.5rem; margin:1.5rem 0; padding:1rem 0; border-top:1px solid var(--ac-color-border); border-bottom:1px solid var(--ac-color-border); font-size:0.85rem; color:var(--ac-color-text-secondary); }
.archlet-share-btn { background:var(--ac-color-bg-tertiary); border:none; padding:0.3rem 0.75rem; border-radius:var(--ac-radius-sm); cursor:pointer; font-size:0.8rem; color:var(--ac-color-text-secondary); text-decoration:none; transition:all var(--ac-transition); font-family:inherit; }
.archlet-share-btn:hover { background:var(--ac-color-primary-light); color:var(--ac-color-primary); }
.archlet-related-posts { margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--ac-color-border); }
.archlet-related-posts h3 { font-size:1.15rem; margin-bottom:1rem; }
.archlet-related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.archlet-related-card { display:block; padding:1rem; border:1px solid var(--ac-color-border); border-radius:var(--ac-radius-md); text-decoration:none; color:var(--ac-color-text); transition:all var(--ac-transition); }
.archlet-related-card:hover { border-color:var(--ac-color-primary); }
.archlet-related-card strong { display:block; font-size:0.9rem; margin-bottom:0.25rem; }
.archlet-related-card p { font-size:0.8rem; color:var(--ac-color-text-secondary); margin:0; }

/* ---- Sidebar ---- */
.archlet-sidebar { width:260px; min-height:100vh; border-right:1px solid var(--ac-color-border); background:var(--ac-color-bg-secondary); position:fixed; top:0; left:0; z-index:30; transition:transform 0.25s; overflow-y:auto; }
.archlet-sidebar.sidebar-right { left:auto; right:0; border-right:none; border-left:1px solid var(--ac-color-border); }
.archlet-sidebar.collapsed { transform:translateX(-100%); }
.archlet-sidebar.sidebar-right.collapsed { transform:translateX(100%); }
.archlet-sidebar-inner { padding:1.25rem; }
.archlet-sidebar-toggle { position:fixed; top:0.75rem; left:268px; width:2rem; height:2rem; min-width:2rem; padding:0; border:1px solid var(--ac-color-border); border-radius:var(--ac-radius-md); background:var(--ac-color-surface); cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:40; transition:left 0.25s; }
.archlet-sidebar.sidebar-right ~ .archlet-sidebar-toggle { left:auto; right:268px; transition:right 0.25s; }
.archlet-sidebar.collapsed + .archlet-sidebar-toggle,
.archlet-sidebar.collapsed ~ .archlet-sidebar-toggle { left:0.75rem; }
.archlet-sidebar.sidebar-right.collapsed ~ .archlet-sidebar-toggle { left:auto; right:0.75rem; }
.archlet-sidebar-toggle-icon::before { content:'☰'; }
@media (max-width: 768px) {
  .archlet-sidebar { width:280px; z-index:50; box-shadow:0 4px 24px rgba(0,0,0,0.15); transform:translateX(-100%); }
  .archlet-sidebar.sidebar-right { transform:translateX(100%); }
  .archlet-sidebar:not(.collapsed) { transform:translateX(0); }
  .archlet-sidebar.sidebar-right:not(.collapsed) { transform:translateX(0); }
  .archlet-sidebar-toggle { top:0.5rem; left:0.5rem; z-index:55; width:2.25rem; height:2.25rem; }
  .archlet-sidebar.sidebar-right ~ .archlet-sidebar-toggle { left:auto; right:0.5rem; }
  .archlet-sidebar:not(.collapsed) ~ .archlet-sidebar-toggle,
  .archlet-sidebar.sidebar-right:not(.collapsed) ~ .archlet-sidebar-toggle { left:288px; right:auto; }
  .archlet-sidebar.sidebar-right:not(.collapsed) ~ .archlet-sidebar-toggle { left:auto; right:288px; }
}

/* ---- TOC ---- */
.archlet-toc { border:1px solid var(--ac-color-border); border-radius:var(--ac-radius-md); padding:1rem; font-size:0.85rem; margin:1.5rem 0; }
.archlet-toc-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem; }
.archlet-toc-title { font-weight:600; }
.archlet-toc-toggle { background:none; border:none; cursor:pointer; color:var(--ac-color-text-secondary); }
.archlet-toc-toggle-icon::before { content:'−'; }
.archlet-toc.collapsed .archlet-toc-body { display:none; }
.archlet-toc.collapsed .archlet-toc-toggle-icon::before { content:'+'; }
.archlet-toc-list { list-style:none; padding:0; margin:0; }
.archlet-toc-item { padding:0.15rem 0; }
.archlet-toc-item.depth-2 { padding-left:0.75rem; }
.archlet-toc-item.depth-3 { padding-left:1.5rem; }
.archlet-toc-item.depth-4 { padding-left:2.25rem; }
.archlet-toc-link { color:var(--ac-color-text-secondary); text-decoration:none; transition:color var(--ac-transition); }
.archlet-toc-link:hover, .archlet-toc-link.active { color:var(--ac-color-primary); }

.archlet-toc[data-position="left"],
.archlet-toc[data-position="right"] {
  position:fixed; top:70px; z-index:90;
  max-width:260px; max-height:calc(100vh - 100px); overflow-y:auto;
  background:var(--ac-color-bg,#fff); margin:0;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.archlet-toc[data-position="left"] { left:1rem; }
.archlet-toc[data-position="right"] { right:1rem; }

.archlet-toc[data-position="inplace"] {
  max-width:none; margin:1.5rem 0;
}

/* ---- Code Highlight (fallback) ---- */
.archlet-code-block { background:var(--ac-color-bg-secondary); border:1px solid var(--ac-color-border); border-radius:var(--ac-radius-md); overflow:hidden; margin:1.5rem 0; }
.archlet-code-block-header { display:flex; justify-content:space-between; align-items:center; padding:0.5rem 1rem; border-bottom:1px solid var(--ac-color-border); font-size:0.8rem; font-weight:600; color:var(--ac-color-text-secondary); }
.archlet-code-block pre { margin:0; padding:1rem; overflow-x:auto; font-family:'JetBrains Mono', monospace; font-size:0.85rem; line-height:1.6; }
.archlet-code-block code { font-family:inherit; }