.navbar{position:sticky;top:0;z-index:100;background:var(--color-bg);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-sm)}.navbar__container{max-width:1200px;margin:0 auto;padding:var(--space-4) var(--space-6);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.navbar__brand{text-decoration:none;color:var(--color-text);display:flex;align-items:center}.navbar__title{font-size:var(--fs-lg);font-weight:var(--fw-bold);margin:0;transition:var(--transition-fast)}.navbar__brand:hover .navbar__title{color:var(--color-primary-600)}.navbar__nav{display:flex;align-items:center;gap:var(--space-4);margin-left:auto;margin-right:var(--space-4)}.navbar__link{color:var(--color-text-secondary);text-decoration:none;font-size:var(--fs-base);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);transition:var(--transition-fast)}.navbar__link:hover{color:var(--color-primary-600);background:var(--color-bg-hover)}.navbar__controls{display:flex;align-items:center;gap:var(--space-2)}.navbar__theme-button{background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-size:var(--fs-lg);cursor:pointer;transition:var(--transition-fast);display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}.navbar__theme-button:hover{background:var(--color-bg-hover);border-color:var(--color-primary-300)}.navbar__theme-button:active{transform:scale(.95)}.dark-theme .navbar__theme-button{background:var(--color-neutral-800);border-color:var(--color-neutral-700)}.dark-theme .navbar__theme-button:hover{background:var(--color-neutral-700);border-color:var(--color-primary-400)}.dark-theme .navbar__link:hover{background:var(--color-neutral-800)}@media(max-width:640px){.navbar__container{padding:var(--space-3) var(--space-4)}.navbar__title{font-size:var(--fs-base)}.navbar__nav{margin-right:var(--space-2)}.navbar__link{font-size:var(--fs-sm);padding:var(--space-1) var(--space-2)}.navbar__theme-button{min-width:40px;min-height:40px;padding:var(--space-1) var(--space-2)}}.template-list{max-width:1400px;margin:0 auto;padding:var(--space-6)}.template-list__search{position:relative;max-width:600px;margin:0 auto var(--space-6)}.template-list__search-input{width:100%;padding:var(--space-3) var(--space-4);padding-right:var(--space-10);font-size:var(--fs-base);border:2px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-elevated);color:var(--color-text);transition:var(--transition-fast)}.template-list__search-input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px #3b82f61a}.template-list__search-clear{position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);padding:var(--space-2);background:none;border:none;color:var(--color-text-secondary);font-size:var(--fs-lg);cursor:pointer;transition:var(--transition-fast)}.template-list__search-clear:hover{color:var(--color-text)}.template-list__content{display:grid;grid-template-columns:220px 1fr;gap:clamp(1rem,2vw,1.5rem);align-items:start}.category-toc{position:sticky;top:var(--space-4);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-sm)}.category-toc__title{font-size:var(--fs-lg);font-weight:var(--fw-bold);margin-bottom:var(--space-3);color:var(--color-text)}.category-toc__nav{max-height:70vh;overflow-y:auto}.category-toc__list{list-style:none;margin:0;padding:0}.category-toc__item{margin-bottom:var(--space-1)}.category-toc__button{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);background:none;border:none;border-radius:var(--radius-md);text-align:left;color:var(--color-text-secondary);font-size:var(--fs-sm);cursor:pointer;transition:var(--transition-fast)}.category-toc__button:hover{background:var(--color-bg-hover);color:var(--color-text)}.category-toc__button--active{background:var(--color-primary-100);color:var(--color-primary-700);font-weight:var(--fw-semibold)}.category-toc__count{color:var(--color-text-tertiary);font-size:var(--fs-xs)}.template-list__cards{min-height:400px}.template-list__empty{text-align:center;padding:var(--space-10);color:var(--color-text-secondary)}.template-list__category-section{margin-bottom:var(--space-8);scroll-margin-top:var(--space-4)}.template-list__category-title{font-size:var(--fs-2xl);font-weight:var(--fw-bold);margin-bottom:var(--space-4);color:var(--color-text);padding-bottom:var(--space-2);border-bottom:2px solid var(--color-border)}.template-list__category-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-4)}.template-card{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:var(--transition-fast);overflow:hidden}.template-card--expanded{box-shadow:var(--shadow-md);border-color:var(--color-primary-300)}.template-card__header{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);padding:var(--space-4);background:none;border:none;text-align:left;cursor:pointer;transition:var(--transition-fast)}.template-card__header:hover{background:var(--color-bg-hover)}.template-card__header-content{flex:1;min-width:0}.template-card__title{font-size:var(--fs-lg);font-weight:var(--fw-semibold);color:var(--color-text);margin:0 0 var(--space-2)}.template-card__category-badge{display:inline-block;padding:var(--space-1) var(--space-2);background:var(--color-info-100);color:var(--color-info-700);border-radius:var(--radius-sm);font-size:var(--fs-xs);font-weight:var(--fw-medium);margin-bottom:var(--space-2)}.template-card__description{font-size:var(--fs-sm);color:var(--color-text-secondary);line-height:1.5;margin:0}.template-card__expand-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xl);color:var(--color-text-secondary);font-weight:var(--fw-light)}.template-card__content{border-top:1px solid var(--color-border);background:var(--color-bg);animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.template-card__actions{display:flex;gap:var(--space-3);padding:var(--space-4);border-top:1px solid var(--color-border);background:var(--color-bg-elevated)}.template-card__action-button{flex:1;padding:var(--space-2) var(--space-4);border:none;border-radius:var(--radius-md);font-size:var(--fs-sm);font-weight:var(--fw-medium);cursor:pointer;transition:var(--transition-fast);text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.template-card__action-button--primary{background:var(--color-primary-500);color:#fff}.template-card__action-button--primary:hover{background:var(--color-primary-600)}.template-card__action-button--secondary{background:var(--color-neutral-200);color:var(--color-text)}.template-card__action-button--secondary:hover{background:var(--color-neutral-300)}@media(prefers-color-scheme:dark){.category-toc__button--active{background:var(--color-primary-900);color:var(--color-primary-200)}.template-card__category-badge{background:var(--color-neutral-700);color:var(--color-info-300)}.template-card__action-button--secondary{background:var(--color-neutral-700);color:var(--color-text)}.template-card__action-button--secondary:hover{background:var(--color-neutral-600)}}.dark-theme .category-toc__button--active{background:var(--color-primary-900);color:var(--color-primary-200)}.dark-theme .template-card__category-badge{background:var(--color-neutral-700);color:var(--color-info-300)}.dark-theme .template-card__action-button--secondary{background:var(--color-neutral-700);color:var(--color-text)}.dark-theme .template-card__action-button--secondary:hover{background:var(--color-neutral-600)}@media(max-width:900px){.template-list{padding:var(--space-4)}.template-list__content{grid-template-columns:1fr}.category-toc{position:static;max-width:100%}.category-toc__nav{max-height:none}.category-toc__list{display:flex;flex-wrap:wrap;gap:var(--space-2)}.category-toc__item{margin:0}.category-toc__button{width:auto}.template-list__category-cards{grid-template-columns:1fr}.template-card__actions{flex-direction:column}.template-card__action-button{width:100%}}.template-detail{padding:var(--space-4)}.template-detail--compact{padding:var(--space-3)}.template-detail__section{margin-bottom:var(--space-4)}.template-detail__section:last-child{margin-bottom:0}.template-detail__section-title{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-text-secondary);margin-bottom:var(--space-2);text-transform:uppercase;letter-spacing:.05em}.template-detail__expression{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3)}.template-detail__expression code{font-family:SF Mono,Monaco,Inconsolata,Fira Code,Droid Sans Mono,Source Code Pro,monospace;font-size:var(--fs-base);color:var(--color-primary-600);word-break:break-all}.template-detail__variables{display:flex;flex-wrap:wrap;gap:var(--space-2)}.template-detail__variable-badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-3);background:var(--color-secondary-100);color:var(--color-secondary-700);border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:var(--fw-medium);font-family:SF Mono,Monaco,monospace}.template-detail__example{background:var(--color-success-50);border:1px solid var(--color-success-200);border-radius:var(--radius-md);padding:var(--space-3)}.template-detail__example code{font-family:SF Mono,Monaco,monospace;font-size:var(--fs-sm);color:var(--color-success-700)}.template-detail__description{color:var(--color-text);line-height:1.6;margin:0}.template-detail__faqs{margin:0}.template-detail__faq-item{margin-bottom:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border)}.template-detail__faq-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.template-detail__faq-question{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--color-text);margin-bottom:var(--space-2)}.template-detail__faq-question:before{content:"Q: ";color:var(--color-primary-500);font-weight:var(--fw-bold)}.template-detail__faq-answer{font-size:var(--fs-sm);color:var(--color-text-secondary);line-height:1.6;margin:0;margin-left:var(--space-4)}.template-detail__faq-answer:before{content:"A: ";color:var(--color-success-600);font-weight:var(--fw-semibold);margin-left:calc(var(--space-4) * -1)}@media(prefers-color-scheme:dark){.template-detail__expression code{color:var(--color-primary-300)}.template-detail__variable-badge{background:var(--color-neutral-700);color:var(--color-secondary-300)}.template-detail__example{background:var(--color-neutral-800);border-color:var(--color-success-800)}.template-detail__example code{color:var(--color-success-300)}}.dark-theme .template-detail__expression code{color:var(--color-primary-300)}.dark-theme .template-detail__variable-badge{background:var(--color-neutral-700);color:var(--color-secondary-300)}.dark-theme .template-detail__example{background:var(--color-neutral-800);border-color:var(--color-success-800)}.dark-theme .template-detail__example code{color:var(--color-success-300)}@media(max-width:768px){.template-detail{padding:var(--space-3)}.template-detail__expression code,.template-detail__example code{font-size:var(--fs-sm)}.template-detail__faq-answer{margin-left:0}.template-detail__faq-answer:before{margin-left:0}}