.owned-books{margin-top:46px;padding:25px;border:1px solid var(--line);border-radius:20px;background:#fffdf9}.owned-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:19px}.owned-heading h2{font:27px "DM Serif Display";margin:0}.owned-heading p:not(.eyebrow){font-size:12px;color:var(--muted);margin:5px 0 0}.owned-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}.owned-card{position:relative}.owned-card img,.owned-placeholder{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:5px;box-shadow:4px 6px 9px #4021172d}.owned-placeholder{display:grid;place-items:center;text-align:center;padding:11px;background:linear-gradient(145deg,#9c4a30,#e1a16c);color:#fff;font:17px/1.1 "DM Serif Display"}.owned-card b{font-size:12px;display:block;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.owned-card small{font-size:10px;color:var(--muted)}.owned-empty{grid-column:1/-1;margin:0;padding:16px;border:1px dashed #dfc4b0;border-radius:11px;text-align:center;font-size:12px;color:var(--muted)}#owned-dialog form{display:grid;gap:10px;margin-top:20px}@media(max-width:700px){.owned-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:500px){.owned-heading{align-items:start;flex-direction:column}.owned-grid{grid-template-columns:repeat(2,1fr)}}

/* A little physical-shelf vignette for the owned-book collection. */
.owned-books{position:relative;overflow:hidden;padding:29px;border-color:#e5c7a9;background:radial-gradient(circle at 92% 8%,#f2c99882,transparent 20rem),linear-gradient(130deg,#fffdf8 0%,#fff4e6 100%);box-shadow:0 14px 28px #5c331719}
.owned-books:before{content:"✦  ❦  ✦";position:absolute;right:24px;bottom:12px;color:#c4895a;letter-spacing:7px;font-size:16px;opacity:.55;pointer-events:none}
.owned-heading{position:relative;z-index:1;margin-bottom:23px;padding-bottom:18px;border-bottom:1px solid #ead6c2}
.owned-heading h2{font-size:30px;color:#543527}.owned-heading .eyebrow{color:#a85b3b!important}.owned-heading p:not(.eyebrow){max-width:390px;font-size:13px;line-height:1.45}
#add-owned{position:relative;isolation:isolate;overflow:hidden;border:1px solid #a65f3d;border-radius:999px;padding:11px 16px;background:linear-gradient(105deg,#a95536,#78412f);color:#fff9ef;font:700 12px "DM Sans";box-shadow:0 7px 14px #7c3f2426;transition:transform .2s,box-shadow .2s}
#add-owned:before{content:"";position:absolute;inset:1px;border:1px solid #ffe8c980;border-radius:inherit;z-index:-1}#add-owned:hover{transform:translateY(-2px);box-shadow:0 10px 18px #7c3f2435}
.owned-empty{padding:23px;background:#fffaf2a8;border-color:#d8b996;color:#765541;font:italic 14px "DM Serif Display"}
#owned-dialog{position:relative;overflow:visible;width:min(430px,calc(100% - 30px));padding:33px 31px 29px;border:1px solid #dfbb91;border-radius:25px;background:radial-gradient(circle at 50% -12%,#fff7e8 0,#fffaf4 54%,#f5dfc5 145%);box-shadow:0 25px 75px #46271563;text-align:center}
#owned-dialog:before,#owned-dialog:after{content:"";position:absolute;width:144px;height:144px;border:1px solid #d7a86b65;border-radius:50%;pointer-events:none}#owned-dialog:before{top:-92px;left:-72px}#owned-dialog:after{right:-82px;bottom:-96px}
#owned-dialog .dialog-mark{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 8px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#ffecc2 0 14%,#d38b50 16% 48%,#8a4c32 50%);color:#fff9ef;font-size:29px;box-shadow:0 7px 0 #8e4d3328,0 12px 22px #7c422b30}
#owned-dialog h2{font-size:32px;color:#573729;margin:0 0 5px}#owned-dialog>p{max-width:280px;margin:0 auto;color:#805e4a;line-height:1.5}
#owned-dialog form{position:relative;z-index:1;margin-top:22px;padding:17px;border:1px solid #ecd5bc;border-radius:16px;background:#fffdf8b8;text-align:left;gap:13px}#owned-dialog form label{color:#674430;font-size:11px;letter-spacing:.2px}
#owned-dialog form input{border-color:#dfc1a0;border-radius:10px;background:#fffaf3;box-shadow:inset 0 1px 2px #79502a0b}#owned-dialog form input:focus{outline:2px solid #d99a6b55;border-color:#b96a45}
#owned-dialog .add-book{margin-top:4px;border-radius:10px;background:linear-gradient(100deg,#a85939,#733d2c);box-shadow:0 7px 13px #71371e25}
#owned-dialog .close{z-index:3;color:#80523c}.owned-card{transition:transform .2s}.owned-card:hover{transform:translateY(-4px)}
@media(max-width:500px){.owned-books{padding:22px}.owned-heading{padding-bottom:15px}#owned-dialog{padding:30px 22px 23px}}
.owned-card{cursor:pointer}.owned-card:focus-within{outline:2px solid var(--rust);outline-offset:4px}
