.complement-page{max-width:1140px;margin:0 auto;padding:var(--space-xl) var(--space-md) var(--space-3xl)}.complement-layout{display:grid;grid-template-columns:380px 1fr;gap:var(--space-2xl);align-items:start}.complement-sidebar{position:sticky;top:calc(var(--header-h,76px) + var(--space-md));max-height:calc(100vh - var(--header-h,76px) - var(--space-lg));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--color-border) transparent}.complement-sidebar::-webkit-scrollbar{width:8px}.complement-sidebar::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full);border:2px solid transparent;background-clip:padding-box}.complement-sidebar::-webkit-scrollbar-track{background:transparent}.complement-sidebar .complement-input{max-width:none;margin:0}.complement-main{min-width:0}.complement-main .complement-results{max-width:none;margin:0}.complement-prompt{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:340px;padding:var(--space-3xl) var(--space-xl);background:var(--color-card-bg);border:1px dashed var(--color-border);border-radius:var(--radius-lg);color:var(--color-muted)}.complement-prompt__icon{width:40px;height:40px;color:var(--color-accent);opacity:.7;margin-bottom:var(--space-md)}.complement-prompt__title{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--color-text-heading);margin-bottom:var(--space-xs)}.complement-prompt__sub{font-size:.9rem;max-width:340px;line-height:1.5}.complement-spinner{display:none;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md);margin-bottom:var(--space-md);color:var(--color-accent-text);font-family:var(--font-display);font-size:.85rem;font-weight:600}.complement-spinner.htmx-request{display:flex}.complement-spinner__dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--color-accent);border-top-color:transparent;animation:complement-spin .7s linear infinite}@keyframes complement-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.complement-spinner__dot{animation:none}}@media(max-width:900px){.complement-layout{grid-template-columns:1fr;gap:var(--space-xl)}.complement-sidebar{position:static;max-height:none;overflow:visible}.complement-prompt{min-height:200px}}.complement-header{text-align:center;margin-bottom:var(--space-2xl)}.complement-header h1{font-family:var(--font-display);font-size:2.1rem;font-weight:700;color:var(--color-text-heading);letter-spacing:-.02em;line-height:1.2;margin-bottom:var(--space-sm)}.complement-header p{color:var(--color-muted);font-size:1.02rem;max-width:420px;margin:0 auto}.complement-header .tool-guide-cue{margin-top:var(--space-sm);font-size:.9rem}.complement-header .tool-guide-cue a{color:var(--color-accent-text);font-weight:600;text-decoration:underline;text-underline-offset:2px}.complement-header .tool-guide-cue a:hover{color:var(--color-accent)}.complement-input{max-width:540px;margin:0 auto var(--space-3xl);background:var(--color-card-bg);padding:var(--space-xl) var(--space-xl) var(--space-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--color-border)}.complement-question{margin-bottom:var(--space-lg);padding-bottom:var(--space-lg);border-bottom:1px solid var(--color-border)}.complement-question:last-of-type{border-bottom:0;margin-bottom:var(--space-md);padding-bottom:0}.complement-question__label{font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--color-text-heading);margin-bottom:var(--space-md);display:block}.complement-question__label .complement-opt{font-weight:500;font-size:.72rem;color:var(--color-muted);margin-left:var(--space-xs)}.complement-sex-select{display:flex;gap:var(--space-sm)}.complement-sex-select .gender-letter{width:32px;height:32px;border-radius:50%;font-size:.8rem;cursor:pointer;opacity:.65;transition:all var(--transition-fast)}.complement-sex-select .gender-letter:hover:not(.active){opacity:.9;transform:scale(1.1)}.complement-sex-select .gender-letter.active{opacity:1}.complement-sex-select .gender-letter--masculine.active{box-shadow:0 0 0 2px var(--color-card-bg),0 0 0 4px var(--color-gender-masculine)}.complement-sex-select .gender-letter--feminine.active{box-shadow:0 0 0 2px var(--color-card-bg),0 0 0 4px var(--color-gender-feminine)}.complement-sex-select .gender-letter--unisex.active{box-shadow:0 0 0 2px var(--color-card-bg),0 0 0 4px var(--color-gender-unisex)}.complement-search__input{width:100%;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:var(--font-sans);font-size:.9rem;background:var(--color-bg);color:var(--color-text);transition:border-color var(--transition-fast)}.complement-search__input:focus{outline:0;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(0,212,170,.15)}.complement-selected{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--color-bg);border:1px solid var(--color-accent);border-radius:var(--radius-md);min-height:56px}.complement-selected__image{width:40px;height:50px;object-fit:contain;border-radius:var(--radius-sm);background:#fff;flex-shrink:0}.complement-selected__info{flex:1;min-width:0}.complement-selected__name{display:block;font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--color-text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.complement-selected__brand{display:block;font-size:.8rem;color:var(--color-muted)}.complement-selected__clear{background:none;border:0;color:var(--color-muted);font-size:1.3rem;cursor:pointer;padding:var(--space-xs);line-height:1;flex-shrink:0}.complement-selected__clear:hover{color:var(--color-accent-text)}.complement-mode{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}.complement-mode__opt:nth-child(3){grid-column:1/-1}.complement-mode__opt{text-align:left;background:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-md);cursor:pointer;transition:all var(--transition-fast)}.complement-mode__opt.active{border-color:var(--color-accent);background:linear-gradient(135deg,var(--color-card-bg),#eef9f6);box-shadow:0 2px 10px rgba(0,212,170,.1)}.complement-mode__title{display:block;font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--color-text-heading);margin-bottom:2px}.complement-mode__beta{font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-accent-text);background:rgba(0,212,170,.12);padding:1px 6px;border-radius:var(--radius-full);margin-left:4px;vertical-align:middle}.complement-mode__sub{display:block;font-size:.72rem;color:var(--color-muted)}.complement-brand{display:inline-flex;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:3px;gap:2px}.complement-brand__opt{font-family:var(--font-display);font-size:.78rem;font-weight:600;color:var(--color-muted);background:transparent;border:0;padding:7px 16px;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.complement-brand__opt.active{background:var(--color-primary);color:#fff}.complement-brand__opt:hover:not(.active){color:var(--color-text-heading)}.complement-brand__opt .complement-brand__name{color:var(--color-accent-text);font-weight:700}.complement-brand__opt.active .complement-brand__name{color:var(--color-accent)}.layer-toggle{display:inline-flex;align-items:center;gap:var(--space-sm);min-height:44px;padding:0;background:none;border:0;cursor:pointer}.layer-toggle__track{position:relative;flex-shrink:0;width:40px;height:22px;border-radius:var(--radius-full);background:var(--color-border);transition:background var(--transition-fast)}.layer-toggle.on .layer-toggle__track{background:var(--color-accent)}.layer-toggle__thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:var(--radius-full);background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast)}.layer-toggle.on .layer-toggle__thumb{transform:translateX(18px)}.layer-toggle__label{font-family:var(--font-display);font-size:.85rem;font-weight:600;color:var(--color-text-heading)}@media(prefers-reduced-motion:reduce){.layer-toggle__track,.layer-toggle__thumb{transition:none}}.complement-find-btn{width:100%;margin-top:var(--space-lg);padding:var(--space-md) var(--space-xl);background:var(--color-accent);color:var(--color-primary);border:0;border-radius:var(--radius-md);font-family:var(--font-display);font-size:1rem;font-weight:600;cursor:pointer;transition:background var(--transition-fast),box-shadow var(--transition-fast)}.complement-find-btn:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-teal)}.complement-find-btn:disabled{opacity:.5;cursor:not-allowed}.complement-results{max-width:700px;margin:0 auto}.complement-results__heading{text-align:center;font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--color-text-heading);margin-bottom:var(--space-xs)}.complement-results__heading span{color:var(--color-accent-text)}.complement-results__legend{text-align:center;font-size:.75rem;color:var(--color-muted);margin-bottom:var(--space-sm)}.complement-share{display:flex;align-items:center;gap:var(--space-xs);width:fit-content;margin:0 auto var(--space-xl);padding:.4rem .9rem;background:var(--color-bg-warm);border:1px solid var(--color-border-subtle);border-radius:var(--radius-full);color:var(--color-text-secondary);font-family:var(--font-display);font-size:.8rem;font-weight:600;cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast)}.complement-share:hover{border-color:var(--color-accent);color:var(--color-accent-text)}.complement-share svg{color:var(--color-accent);flex-shrink:0}.complement-source{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-lg) var(--space-xl);background:linear-gradient(135deg,var(--color-card-bg),#eef9f6);border:1px solid rgba(0,212,170,.25);box-shadow:0 3px 14px rgba(0,212,170,.1);border-radius:var(--radius-lg);position:relative}.complement-source__image{width:64px;height:80px;object-fit:contain;border-radius:var(--radius-sm);background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.06);padding:4px;flex-shrink:0}.complement-source__tag{display:block;font-family:var(--font-display);font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-accent-text);margin-bottom:var(--space-xs)}.complement-source__name{display:block;font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--color-text-heading);line-height:1.3}.complement-source__brand{display:block;font-size:.85rem;color:var(--color-muted)}.complement-source .gender-letter{position:absolute;top:var(--space-md);right:var(--space-md);width:22px;height:22px;border-radius:var(--radius-sm);font-family:var(--font-display);font-size:.65rem;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center}.complement-thread{display:flex;flex-direction:column;align-items:center}.complement-thread__line{width:1px;height:18px;background:linear-gradient(to bottom,rgba(0,212,170,.25),var(--color-accent))}.complement-thread__line--down{width:1px;height:14px;background:linear-gradient(to bottom,var(--color-accent),var(--color-border))}.complement-thread__node{padding:3px var(--space-md);background:rgba(0,212,170,.12);border:1px solid rgba(0,212,170,.25);border-radius:var(--radius-full);font-family:var(--font-display);font-size:.7rem;font-weight:500;color:var(--color-accent-text);white-space:nowrap}.complement-thread__bridge{display:inline-flex;align-items:center;gap:5px;padding:4px var(--space-md);background:var(--color-accent);color:var(--color-primary);border-radius:var(--radius-full);font-family:var(--font-display);font-size:.7rem;font-weight:600;box-shadow:0 2px 8px rgba(0,212,170,.25);white-space:nowrap}.complement-thread__bridge svg{width:11px;height:11px}.complement-thread__bridge .complement-bridge-label{color:rgba(26,26,46,.55);font-weight:500}.complement-result{background:var(--color-card-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-xl);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.complement-result:hover{border-color:var(--color-accent);box-shadow:0 4px 16px rgba(0,212,170,.1)}.complement-result__head{display:flex;align-items:center;gap:var(--space-md)}.complement-result__image{width:48px;height:60px;object-fit:contain;border-radius:var(--radius-sm);background:#fff;padding:2px;flex-shrink:0}.complement-result__info{flex:1;min-width:0}.complement-result__name{font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--color-text-heading);line-height:1.3;display:flex;align-items:center;gap:var(--space-sm);margin:0}.complement-result__name .gender-letter{width:18px;height:18px;border-radius:3px;font-family:var(--font-display);font-size:.52rem;font-weight:700;color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.complement-result__brand{font-size:.82rem;color:var(--color-muted)}.complement-result__score{text-align:center;flex-shrink:0}.complement-result__score-value{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--color-accent-text);line-height:1}.complement-result__score-label{display:block;font-family:var(--font-display);font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted);margin-top:2px}.complement-result__why-compact{margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--color-border);font-size:.84rem;color:var(--color-muted);font-style:italic;line-height:1.5}.complement-result__why-compact strong{color:var(--color-text-heading);font-style:normal;font-weight:600}.complement-result__expander{margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid var(--color-border)}.complement-result__why-toggle{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:.78rem;font-weight:600;color:var(--color-accent-text);background:none;border:0;padding:0;cursor:pointer}.complement-result__why-toggle svg{width:12px;height:12px;transition:transform .2s ease}.complement-result__why-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}.complement-result__why-full{margin-top:var(--space-md)}.complement-result__why-full[hidden]{display:none}.why-row{display:flex;gap:var(--space-sm);margin-bottom:9px;align-items:baseline}.why-row:last-child{margin-bottom:0}.why-row__k{font-family:var(--font-display);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-accent-text);white-space:nowrap;width:80px;flex-shrink:0;text-align:right;padding-top:1px}.why-row__v{flex:1;font-size:.8rem;color:var(--color-text-heading);line-height:1.4}.why-row__v--muted{color:var(--color-muted);font-style:italic}.complement-result__pills{display:flex;flex-wrap:wrap;gap:5px}.complement-accord-pill{display:inline-block;padding:2px 9px;background:rgba(0,212,170,.12);border:1px solid rgba(0,212,170,.25);border-radius:var(--radius-full);font-family:var(--font-display);font-size:.68rem;font-weight:500;color:var(--color-accent-text)}.complement-result__cta-row{display:flex;gap:var(--space-sm);margin-top:var(--space-md)}.complement-result__cta-row .btn{flex:1;text-align:center}.complement-result__cta-row .btn--view{background:transparent;color:var(--color-muted);border:1px solid var(--color-border)}.complement-result__cta-row .btn--view:hover{color:var(--color-accent-text);border-color:rgba(0,212,170,.25)}.complement-result__cta-row .btn--compare{background:var(--color-accent);color:var(--color-primary);border:0}.complement-result__cta-row .btn--compare:hover{background:var(--color-accent-hover)}.complement-empty{max-width:480px;margin:var(--space-xl) auto;text-align:center;padding:var(--space-xl);background:var(--color-card-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-muted)}.complement-empty .btn{margin-top:var(--space-md)}@media(max-width:600px){.complement-header h1{font-size:1.75rem}.complement-input{padding:var(--space-lg) var(--space-md)}.complement-source{padding:var(--space-md);gap:var(--space-md)}.complement-source__image{width:52px;height:66px}.complement-result{padding:var(--space-md)}.complement-brand{display:grid;grid-template-columns:1fr 1fr 1fr;width:100%}.complement-brand__opt{padding:9px 4px;line-height:1.15}.complement-brand__opt .complement-brand__name{display:block;font-size:.64rem}.complement-result__cta-row{flex-direction:column}}