/* MATCHLATCH personal library — minimalist unisex UI */
.site-header .header-inner{gap:16px}
.app-nav{display:flex;gap:4px;align-items:center}
.app-nav button{background:none;border:0;border-radius:4px;font-size:12px;font-weight:650;color:#666d66;padding:10px 11px;white-space:nowrap}
.app-nav button:hover{background:#ededeb;color:#1d201d}
.app-nav button.active{background:#ebeeeb;color:#171a18}
.nav-counter{font-size:10px;background:#e5e8e4;border-radius:20px;padding:2px 6px;margin-left:4px}
.app-screen[hidden]{display:none!important}
.library-section{max-width:1060px;margin:0 auto;padding:65px 0 115px;min-height:65vh}
.library-top{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:25px}
.library-top h1{font-size:clamp(40px,6vw,65px);margin:10px 0 8px}
.library-top p{color:var(--muted);font-size:13px;line-height:1.6;max-width:620px;margin:0}
.library-top .tiny-label{color:#949a93;font-size:11px;text-transform:uppercase;letter-spacing:.15em;font-weight:750}
.tabs{display:flex;gap:24px;overflow:auto;border-bottom:1px solid var(--line);margin:27px 0 25px;scrollbar-width:thin}
.tabs button{border:0;border-bottom:2px solid transparent;background:none;white-space:nowrap;font-size:12px;font-weight:650;color:#7a8079;padding:12px 0 15px;cursor:pointer}
.tabs button.active{color:#171b17;border-bottom-color:#242724}
.library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.library-card{background:#fff;border:1px solid var(--line);min-width:0}
.library-card-photo{width:100%;height:215px;background:#f0f1ed;display:grid;place-items:center;overflow:hidden}
.library-card-photo img{height:100%;width:100%;object-fit:contain}
.library-card-photo .placeholder{font-size:12px;letter-spacing:.1em;color:#929992;text-align:center;padding:16px}
.library-card-body{padding:17px}
.library-card-title{font-weight:700;font-size:15px;line-height:1.45;margin:6px 0}
.library-meta{color:#8b908a;font-size:11px;line-height:1.5}
.library-card p{color:#666e66;font-size:12px;line-height:1.6;margin:7px 0 13px}
.library-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.link-button,.quiet-button{border:0;background:none;color:#232823;font-weight:700;font-size:12px;text-decoration:underline;padding:7px 0;cursor:pointer}
.quiet-button{color:#818781}
.library-actions a{font-size:12px;font-weight:700;text-decoration:underline;padding:7px 0}
.empty-state{border:1px solid var(--line);background:#fff;padding:53px 25px;text-align:center}
.empty-state h3{font-size:22px;letter-spacing:-.05em;font-weight:600;margin:0 0 10px}
.empty-state p{color:var(--muted);font-size:13px;line-height:1.7;max-width:440px;margin:0 auto 17px}
.library-primary{display:inline-block;background:#202421;color:#fff;text-decoration:none;border:1px solid #202421;border-radius:3px;padding:13px 18px;font-size:12px;font-weight:700;cursor:pointer}
.library-primary:hover{background:#414740}
.library-subtle{background:#fff;border:1px solid var(--line);color:#2c322d;border-radius:3px;padding:12px 15px;font-size:12px;font-weight:700;cursor:pointer}
.cart-list{display:grid;gap:13px}
.cart-entry{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:17px;align-items:center;padding:18px;background:#fff;border:1px solid var(--line)}
.cart-thumb{width:90px;height:96px;background:#f1f2ef;display:grid;place-items:center;overflow:hidden}
.cart-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.cart-info h3{margin:4px 0 6px;font-size:16px;letter-spacing:-.03em}
.cart-info small{color:var(--muted);font-size:12px;display:block;line-height:1.55}
.cart-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:11px}
.cart-controls a{font-size:12px;text-decoration:underline;font-weight:700}
.cart-total{display:flex;justify-content:space-between;gap:18px;border-top:1px solid var(--line);margin-top:20px;padding:20px 0;font-size:13px}
.cart-total strong{font-size:21px;letter-spacing:-.04em}
.purchase-form{background:#fff;border:1px solid var(--line);padding:24px;max-width:600px;margin:23px 0}
.purchase-form h3{margin:0 0 8px;font-size:21px}
.purchase-form p{font-size:12px;color:var(--muted);line-height:1.6}
.purchase-form form{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:18px}
.purchase-form .wide{grid-column:1/-1}
.purchase-form label{font-size:12px;font-weight:650;color:#454b45}
.purchase-form input{display:block;margin-top:7px;width:100%;min-height:44px;padding:10px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.purchase-form .purchase-actions{grid-column:1/-1;display:flex;gap:12px;flex-wrap:wrap}
.purchase-summary{border:1px solid var(--line);background:white;padding:22px;margin:0 0 15px;display:grid;grid-template-columns:100px minmax(0,1fr);gap:20px}
.purchase-summary img{width:100px;height:115px;object-fit:contain;background:#f0f1ee}
.purchase-summary h3{font-size:17px;margin:4px 0 10px}
.purchase-summary p{font-size:12px;color:#656c65;line-height:1.55}
.account-panel{background:white;border:1px solid var(--line);padding:30px;max-width:660px;margin:30px 0}
.account-panel h2{font-size:25px;margin:0 0 12px}
.account-panel p{font-size:13px;color:#687068;line-height:1.7}
.account-panel input[type=email]{display:block;width:100%;padding:13px;margin:8px 0 15px;border:1px solid #d1d7d0;border-radius:3px;font-size:14px}
.account-panel label{font-size:12px;color:#515a51;font-weight:700}
.account-panel .account-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:15px}
.status-text{font-size:12px;line-height:1.6;color:#586858;margin-top:14px}
.small-footnote{font-size:11px;color:#828982;line-height:1.6}
.new-look-actions{display:flex;gap:10px;flex-wrap:wrap;padding-top:17px}
.look-action{border:1px solid var(--line);background:#fff;border-radius:3px;padding:11px 15px;color:#303630;font-size:12px;font-weight:750;cursor:pointer}
.look-action.primary{background:#202421;color:#fff;border-color:#202421}
.result-item .item-actions{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:10px}
.result-item .item-actions button{border:0;background:none;font-size:11px;text-decoration:underline;color:#555f55;cursor:pointer;font-weight:700;padding:2px 0}
.result-item .item-actions a{border:0;padding:2px 0;font-size:11px;color:#555f55;text-decoration:underline;white-space:normal}
.result-item .item-actions button:disabled{opacity:.65}
@media(max-width:900px){
 .header-inner{flex-wrap:wrap;padding:12px 0}
 .app-nav{order:3;flex-basis:100%;justify-content:space-between;border-top:1px solid var(--line);padding-top:9px}
 .app-nav button{padding:8px 6px}
  .library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:550px){
 .library-section{padding:40px 0 75px}
 .library-grid{grid-template-columns:1fr}
 .library-top h1{font-size:45px}
 .cart-entry{grid-template-columns:76px minmax(0,1fr);gap:13px}
 .cart-thumb{width:76px;height:82px}
 .cart-entry .cart-controls{grid-column:2}
 .purchase-summary{grid-template-columns:78px 1fr;gap:12px;padding:15px}
 .purchase-summary img{width:78px;height:91px}
 .purchase-form{padding:18px}
 .purchase-form form{grid-template-columns:1fr}
 .purchase-form .wide,.purchase-form .purchase-actions{grid-column:1}
 .account-panel{padding:20px}
 .app-nav button{font-size:11px}
}

/* Detailed view of one curated look, retaining its original inspiration image */
.look-detail{background:#fff;border:1px solid var(--line);padding:24px;margin:18px 0 30px;scroll-margin-top:20px}
.look-detail-heading{display:flex;align-items:start;justify-content:space-between;gap:18px}
.look-detail-heading h2{margin:4px 0 15px;font-size:25px}
.look-detail-photo{height:225px;background:#f4f5f1;display:grid;place-items:center;margin-bottom:20px;overflow:hidden}
.look-detail-photo img{height:100%;max-width:100%;object-fit:contain}
.look-detail-items{margin:18px 0}
.look-detail-item{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;border-top:1px solid var(--line);padding:16px 0}
.look-detail-item strong{display:block;margin:7px 0;font-size:14px;line-height:1.5}
.look-detail-item .library-actions{justify-content:flex-end}
@media(max-width:600px){
 .look-detail{padding:17px}
 .look-detail-item{grid-template-columns:1fr}
 .look-detail-item .library-actions{justify-content:flex-start}
 .look-detail-photo{height:180px}
}

/* Quiet interface details: concise notes, reversible actions, comfortable touch targets. */
.library-caption{margin:0 0 22px;color:#888e88;font-size:11px;line-height:1.65}
.feedback-toast{
  position:fixed;left:50%;bottom:max(23px,env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  width:max-content;max-width:calc(100% - 30px);
  background:#232724;color:#fff;padding:13px 16px;
  border-radius:8px;box-shadow:0 9px 30px rgba(0,0,0,.14);
  font-size:12px;font-weight:550;line-height:1.45;
}
.feedback-toast[hidden]{display:none!important}
.feedback-action{border:0;background:none;color:#fff;cursor:pointer;text-decoration:underline;
  font:inherit;font-weight:800;padding:7px 2px;white-space:nowrap}
.feedback-action:hover{color:#e1e9df}
.app-nav button{min-height:40px}
.library-card,.cart-entry,.purchase-summary,.look-detail{border-color:#e4e7e2}
.library-card:focus-within,.cart-entry:focus-within{border-color:#b4bab3}
.account-panel form[hidden],#account-guest[hidden]{display:none!important}
#account-guest{margin:19px 0 6px}
#logout-button:not([hidden]){margin-top:16px}
@media(max-width:900px){
 .header-inner{row-gap:5px}
 .app-nav{gap:5px}
 .app-nav button{flex:1;min-width:0}
}
@media(max-width:550px){
 .app-nav button{font-size:11px;letter-spacing:-.01em}
 .nav-counter{font-size:9px;padding:2px 4px}
 .feedback-toast{left:15px;right:15px;bottom:max(16px,env(safe-area-inset-bottom));
   transform:none;width:auto;padding:12px 14px}
 .library-caption{margin-bottom:16px}
}
@media(prefers-reduced-motion:reduce){.feedback-toast{transition:none}}

/* Private account handoff: calm and explicit guest-import consent. */
.account-import{border-top:1px solid var(--line);margin-top:25px;padding-top:24px}
.account-import[hidden]{display:none!important}
.account-import strong{font-size:13px;letter-spacing:-.02em}
.account-import p{margin:10px 0 15px;color:#717871;font-size:12px;line-height:1.65}
.account-import .library-subtle{background:#f7f8f5}
.account-panel #account-status{margin-top:20px}
#send-login:disabled{cursor:not-allowed}

/* Named Collections: group linked inspiration records without copying images. */
.collections-create{display:flex;align-items:end;justify-content:space-between;gap:22px;flex-wrap:wrap;margin:16px 0 25px}
.collections-create h2,.collection-view-heading h2{font-size:27px;letter-spacing:-.06em;font-weight:630;margin:0 0 7px}
.collections-create p{font-size:12px;color:#798078;line-height:1.65;margin:0;max-width:440px}
.collections-create-form{display:flex;gap:8px;flex-wrap:wrap}
.collections-create-form input,.collection-rename input,.collection-editor input,.collection-editor select{min-height:43px;border:1px solid #dfe3dc;border-radius:3px;background:white;color:#222922;padding:10px 12px;font-size:13px}
.collections-create-form input{width:min(245px,65vw)}
.collections-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.collection-card{border:1px solid #e3e7e1;background:#fff;border-radius:3px;display:flex;align-items:flex-start;text-align:left;flex-direction:column;gap:11px;padding:22px;min-height:187px;cursor:pointer;color:#282d28}
.collection-card:hover,.collection-card:focus-visible{border-color:#949f91;background:#f9faf8}
.collection-icon{font-size:22px;color:#879186;line-height:1}
.collection-card strong{font-size:17px;line-height:1.35;letter-spacing:-.025em;overflow-wrap:anywhere}
.collection-card-meta{color:#8b938b;font-size:11px;line-height:1.65}
.collection-card-arrow{font-size:11px;font-weight:730;margin-top:auto}
.collection-view-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin:23px 0 15px}
.collection-view-heading .library-actions{margin:0;align-items:center}
.collection-rename{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.collection-rename input{width:min(210px,60vw)}
.collection-section{margin:25px 0 32px}
.collection-section>h3{font-size:17px;letter-spacing:-.035em;border-bottom:1px solid var(--line);padding-bottom:13px;margin:0 0 17px}
.collection-empty{background:#fff;border:1px solid var(--line);padding:30px;margin:24px 0}
.collection-empty h3{font-size:22px;letter-spacing:-.04em;margin:0 0 8px}
.collection-empty p{font-size:12px;line-height:1.7;color:#767e76}
.collection-control{position:relative;min-width:0;max-width:100%}
.collection-picker-button{border:1px solid #e1e4dd;border-radius:3px;background:#f7f8f6;padding:8px 11px;color:#455047;font-weight:690;font-size:11px;cursor:pointer;max-width:100%;white-space:normal;text-align:left}
.collection-picker-button:hover{background:#edf0e9}
.collection-editor{display:grid;grid-template-columns:minmax(140px,1fr);gap:9px;min-width:min(275px,calc(100vw - 60px));padding:13px;background:#fff;border:1px solid #e5e9e2;box-shadow:0 4px 15px rgba(0,0,0,.06);margin-top:9px;position:relative;z-index:4}
.collection-editor select{min-width:0;width:100%;cursor:pointer}
.collection-editor input[hidden]{display:none}
.collection-editor-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.collection-editor-actions .library-primary{padding:10px 14px}
@media(max-width:850px){.collections-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){
 .collections-grid{grid-template-columns:1fr}
 .collection-card{min-height:145px;padding:19px}
 .collections-create-form,.collections-create-form input{width:100%}
 .collection-view-heading{align-items:flex-start}
 .collection-view-heading .library-actions{width:100%}
 .collection-rename,.collection-rename input{width:100%}
 .collection-editor{min-width:min(275px,calc(100vw - 65px))}
}