:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#233f34;background:#f7f7f1;--green:#244d41;--muted:#64786a;--line:#dce4da}*{box-sizing:border-box}body{margin:0}a{color:var(--green);text-underline-offset:4px}header,main,footer{max-width:1220px;margin:auto;padding:28px 28px}header{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:14px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:650}.brand img{border-radius:50%}.hero{display:flex;align-items:center;justify-content:space-between;padding:30px 0 48px;gap:20px}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:11px;font-weight:650;color:var(--muted)}h1{font-size:clamp(34px,5.2vw,60px);line-height:1.12;letter-spacing:-.055em;font-weight:550;margin:18px 0}h1 span{color:#789b89}.hero p{color:var(--muted)}.hero-art{width:200px;height:170px;position:relative;margin-right:55px}.paper{position:absolute;left:30px;top:0;background:white;padding:18px;width:115px;height:130px;transform:rotate(8deg);box-shadow:0 3px 20px #244d4110;color:#8f9d91;font-size:9px;letter-spacing:2px}.paper span{display:block;height:3px;background:#d9e1d6;margin-top:14px;width:70px}.folder{position:absolute;bottom:0;left:0;width:180px;height:100px;border-radius:6px 6px 20px 20px;background:var(--green);color:#e8efe6;font-size:35px;padding:22px 75px;transform:rotate(-5deg)}.layout{display:grid;grid-template-columns:minmax(320px,.85fr) minmax(0,1.25fr);gap:26px}.panel{border:1px solid var(--line);background:#fff;border-radius:22px;padding:28px;box-shadow:0 12px 32px #233f3404}.panel-title{display:flex;align-items:center;gap:12px}.step{color:#9dad9e;font-size:12px}.panel-title h2{font-size:21px;letter-spacing:-.025em;font-weight:550;margin:0}form{display:grid;gap:16px;margin-top:24px}label{display:grid;gap:7px;font-size:12px;color:#5b7061}.pair,.filters{display:grid;grid-template-columns:1fr 1fr;gap:14px}input,select,textarea{width:100%;min-width:0;font:inherit;font-size:14px;color:#233f34;padding:12px;border:1px solid #d5e0d2;background:#fcfdfb;border-radius:8px}textarea{resize:vertical}button,.import{font:inherit;font-size:13px;border:0;border-radius:8px;padding:12px 16px;background:var(--green);color:white;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:43px}button.secondary,.import{background:#edf2e9;color:var(--green)}button:disabled{opacity:.5;cursor:default}.text-button{background:transparent;color:var(--green);padding-left:0;text-decoration:underline}.actions,.backup{display:flex;gap:10px;flex-wrap:wrap}.muted{font-size:12px;color:var(--muted);line-height:1.6}.upload{margin-top:22px;background:#f6f8f1;border:1px dashed #c6d5c1;border-radius:14px;padding:18px}.upload-label{cursor:pointer;text-align:center;justify-items:center;gap:9px}.upload-label input{font-size:12px;background:transparent;border:0;padding:7px 0;max-width:100%}.upload-icon{color:#789b89;font-size:28px}.upload strong{color:var(--green);font-weight:600;font-size:14px}.upload p{margin:9px 0}.upload .actions{justify-content:center}.upload details{margin-top:12px;font-size:12px}.upload textarea{margin-top:10px;font-family:monospace}.topline{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}.search-label{margin:24px 0 14px}.record{border-top:1px solid var(--line);padding:22px 0}.record h3{font-size:19px;letter-spacing:-.025em;margin:10px 0 6px;font-weight:550;overflow-wrap:anywhere}.record p{margin:6px 0 12px}.record .actions button{padding:8px 11px;min-height:38px;font-size:12px}.pill{display:inline-flex;padding:5px 10px;border-radius:20px;font-size:11px;background:#f0f3ea}.active{background:#e5f1e7}.soon{background:#fff0d5}.expired{background:#f7e6e1}.detail{padding:14px 18px;background:#f7f9f3;border-radius:12px;overflow-wrap:anywhere;margin-top:16px}.detail dt{font-size:11px;color:var(--muted);margin-top:9px}.detail dd{margin:4px 0 10px;font-size:14px}.detail .attachment{display:inline-flex;margin-top:10px}.empty{padding:50px 20px;text-align:center;color:var(--muted);font-size:14px;line-height:1.8}.empty-symbol{font-size:38px;color:#a3b59d;display:block;margin-bottom:12px}.backup{border-top:1px solid var(--line);margin-top:20px;padding-top:20px}.import{position:relative}.import input{position:absolute;width:1px;height:1px;opacity:0}.privacy{margin-top:36px;display:flex;gap:20px;background:#edf2e8;border-radius:18px;padding:26px 30px}.privacy-icon{font-size:36px;color:#789b89}.privacy h2{font-size:18px;font-weight:550;margin:0}.privacy p{font-size:13px;color:var(--muted);line-height:1.7;max-width:820px}footer{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding-bottom:36px}#message{margin-bottom:20px;padding:15px 20px;background:#e6eee2;border-radius:10px;font-size:14px;line-height:1.6}#message.error{background:#f7e6e1}#message button{margin-left:12px}.skip{position:absolute;left:12px;top:-100px}.skip:focus{top:10px;background:#fff;padding:12px;z-index:2}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.import:focus-within{outline:3px solid #789b89;outline-offset:3px}[hidden]{display:none!important}@media(max-width:900px){.layout{grid-template-columns:1fr}.hero-art{margin-right:10px}.hero{padding-bottom:32px}}@media(max-width:500px){header,main,footer{padding:20px 16px}header{font-size:12px}.brand span{display:inline;font-size:14px}.brand{gap:8px}header{flex-wrap:wrap}.hero{align-items:flex-start;padding-top:12px}.hero-art{width:90px;height:120px;transform:scale(.55);transform-origin:top right;margin:35px 0 0 -50px;flex-shrink:0}h1{font-size:35px}.hero p:not(.eyebrow){font-size:13px;max-width:240px}.panel{padding:22px 18px;border-radius:16px}.pair{grid-template-columns:1fr}.privacy{padding:22px 18px}.privacy-icon{display:none}.filters{gap:10px}.filters select{font-size:12px;padding:11px 8px}}
@media(max-width:500px){.hero{overflow:hidden}}

/* Purchase entry is a primary workspace, above the collection on all screens. */
.layout{grid-template-columns:minmax(0,1fr)}
.entry form{grid-template-columns:repeat(2,minmax(0,1fr))}
.entry form>.pair,.entry form>.actions,.entry form>p{grid-column:1/-1}
@media(max-width:650px){.entry form{grid-template-columns:minmax(0,1fr)}}