.widgets-landing{max-width:var(--container-max-width);margin:0 auto;padding:var(--space-lg) var(--container-padding)}.widgets-landing__header{text-align:center;margin-bottom:var(--space-2xl)}.widgets-landing__title{font-size:var(--h1-size);font-weight:var(--font-weight-bold);color:var(--color-text);margin-bottom:var(--space-md)}@media (max-width: 768px){.widgets-landing__title{font-size:var(--h1-size-mobile)}}.widgets-landing__intro{font-size:var(--font-size-lg);color:var(--color-text-muted);max-width:700px;margin:0 auto;line-height:var(--line-height-relaxed)}.widgets-landing__grid{display:flex;flex-direction:column;gap:var(--space-md);max-width:800px;margin:0 auto}.widget-type-card{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-lg) var(--space-xl);border-radius:var(--radius-lg);text-decoration:none;color:#fff;transition:transform var(--transition-base),box-shadow var(--transition-base);position:relative;overflow:hidden}.widget-type-card,.widget-type-card:hover,.widget-type-card:focus,.widget-type-card:visited{color:#fff}.widget-type-card:hover{transform:scale(1.02);box-shadow:var(--shadow-lg)}.widget-type-card--navy{background:linear-gradient(135deg,#263238,#37474f)}.widget-type-card--blue{background:linear-gradient(135deg,#1565c0,#1976d2)}.widget-type-card--cyan{background:linear-gradient(135deg,#00838f,#0097a7)}.widget-type-card--red{background:linear-gradient(135deg,#c62828,#d32f2f)}.widget-type-card--amber{background:linear-gradient(135deg,#e65100,#f57c00)}.widget-type-card__content{flex:1}.widget-type-card__title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-xs);color:#fff!important}.widget-type-card__subtitle{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-sm);opacity:.95}.widget-type-card__description{font-size:var(--font-size-sm);opacity:.85;line-height:var(--line-height-normal);margin:0}.widget-type-card__arrow{flex-shrink:0;opacity:.7;transition:transform var(--transition-base),opacity var(--transition-base)}.widget-type-card:hover .widget-type-card__arrow{transform:translate(4px);opacity:1}@media (max-width: 600px){.widget-type-card{padding:var(--space-md) var(--space-lg)}.widget-type-card__description,.widget-type-card__arrow{display:none}}.widget-builder{max-width:var(--container-max-width);margin:0 auto;padding:var(--space-md) var(--container-padding)}.widget-builder__tabs{display:flex;gap:0;border-bottom:2px solid var(--color-border);margin-bottom:var(--space-lg);overflow-x:auto;-webkit-overflow-scrolling:touch}.widget-builder__tab{padding:var(--space-sm) var(--space-lg);text-decoration:none;color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color var(--transition-fast),border-color var(--transition-fast)}.widget-builder__tab:hover{color:var(--color-text);transform:scale(1.02)}.widget-builder__tab--active{color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:var(--font-weight-semibold)}.widget-builder__layout{display:grid;grid-template-columns:1fr 320px;gap:var(--space-xl);align-items:start}@media (max-width: 960px){.widget-builder__layout{grid-template-columns:1fr}}.widget-builder__preview-section{margin-bottom:var(--space-xl)}.widget-builder__section-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--space-md)}.widget-builder__subsection-title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text);margin:var(--space-lg) 0 var(--space-md) 0;padding-top:var(--space-md);border-top:1px solid var(--color-border-muted)}.widget-builder__preview{border:2px dashed var(--color-border);border-radius:var(--radius-lg);padding:var(--space-md);min-height:150px;overflow:auto;background:var(--color-bg-muted)}.widget-builder__config-section{margin-bottom:var(--space-xl)}.widget-builder__form{display:flex;flex-direction:column;gap:var(--space-md)}.widget-builder__code-panel{position:relative}.widget-builder__code-sticky{position:sticky;top:calc(var(--header-height) + var(--space-md))}.widget-builder__code-title{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--space-sm);background:var(--color-success-bg);color:var(--color-success-text);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md)}.widget-builder__code-textarea{width:100%;height:220px;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-family:var(--font-mono);font-size:var(--font-size-xs);resize:vertical;margin-bottom:var(--space-sm);cursor:text}.widget-builder__code-textarea:focus{outline:2px solid var(--color-primary);outline-offset:-1px}.widget-builder__copy-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);width:100%;padding:var(--space-sm) var(--space-md);background:var(--color-primary);color:var(--color-text-inverse);border:none;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:background var(--transition-fast)}.widget-builder__copy-btn:hover{background:var(--color-primary-hover);transform:scale(1.02)}.widget-builder__copy-btn--copied,.widget-builder__copy-btn--copied:hover{background:var(--color-success)}@media (max-width: 960px){.widget-builder__code-sticky{position:static}}.wb-field{display:flex;flex-direction:column;gap:var(--space-xs)}.wb-field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}@media (max-width: 600px){.wb-field-row{grid-template-columns:1fr}}.wb-field--half{min-width:0}.wb-field__label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text)}.wb-field__hint{display:block;font-size:var(--font-size-xs);font-weight:var(--font-weight-normal);color:var(--color-text-muted)}.wb-field__control{display:flex;flex-direction:column;gap:var(--space-xs)}.wb-field__control--inline{flex-direction:row;align-items:center;gap:var(--space-md);flex-wrap:wrap}.wb-field__control--color{flex-direction:row;align-items:center;gap:var(--space-sm)}.wb-input{padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-size:var(--font-size-sm);transition:border-color var(--transition-fast)}.wb-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-light)}.wb-input--number{width:120px}.wb-select{padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-size:var(--font-size-sm);cursor:pointer;appearance:auto}.wb-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-light)}.wb-radio{display:inline-flex;align-items:center;gap:var(--space-xs);cursor:pointer;font-size:var(--font-size-sm);color:var(--color-text)}.wb-radio input[type=radio]{accent-color:var(--color-primary)}.wb-toggle{position:relative;display:inline-block;width:44px;height:24px;cursor:pointer;flex-shrink:0}.wb-toggle input{opacity:0;width:0;height:0}.wb-toggle__slider{position:absolute;inset:0;background:var(--color-switch-bg);border-radius:var(--radius-full);transition:background var(--transition-fast)}.wb-toggle__slider:before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform var(--transition-fast);box-shadow:var(--shadow-sm)}.wb-toggle input:checked+.wb-toggle__slider{background:var(--color-success)}.wb-toggle input:checked+.wb-toggle__slider:before{transform:translate(20px)}.wb-color{width:48px;height:48px;border:2px solid var(--color-border);border-radius:var(--radius-md);padding:2px;cursor:pointer;background:transparent}.wb-color::-webkit-color-swatch-wrapper{padding:0}.wb-color::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}.wb-color::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.wb-btn-reset{padding:var(--space-xs) var(--space-sm);background:var(--color-bg-muted);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--color-text-muted);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.wb-btn-reset:hover{background:var(--color-bg);color:var(--color-text)}.wb-size-grid{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.wb-size-option{padding:var(--space-xs) var(--space-sm);border:2px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-muted);cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast),background var(--transition-fast);user-select:none}.wb-size-option:hover{border-color:var(--color-primary);color:var(--color-primary)}.wb-size-option.selected{border-color:var(--color-primary);background:var(--color-primary-light);color:var(--color-primary);font-weight:var(--font-weight-semibold)}.wb-search{position:relative}.wb-search__input{width:100%;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-size:var(--font-size-sm)}.wb-search__input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-light)}.wb-search__results{position:absolute;top:100%;left:0;right:0;z-index:var(--z-dropdown);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:0 0 var(--radius-md) var(--radius-md);max-height:300px;overflow-y:auto;box-shadow:var(--shadow-md)}.wb-search__result{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);cursor:pointer;font-size:var(--font-size-sm);color:var(--color-text);transition:background var(--transition-fast)}.wb-search__result:hover{background:var(--color-primary-light)}.wb-search__result-img{width:32px;height:32px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0}.wb-search__result-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wb-search__no-results{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);color:var(--color-text-muted);font-style:italic}.wb-search__loading{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);color:var(--color-text-muted)}.wb-search__selected{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-primary-light);border:1px solid var(--color-primary);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-text)}.wb-search__selected-img{width:28px;height:28px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0}.wb-search__clear{margin-left:auto;background:none;border:none;font-size:var(--font-size-xl);color:var(--color-text-muted);cursor:pointer;line-height:1;padding:0 var(--space-xs)}.wb-search__clear:hover{color:var(--color-error)}