@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');
:root{color-scheme:dark;--bg:#111114;--panel:#19191e;--panel2:#202026;--line:#303037;--text:#f4f0ef;--muted:#a09ba2;--red:#c65360;--red2:#8e303c;--redwash:#3a2027;--cream:#f4e5df;--green:#89b99c;--shadow:0 22px 70px #0005}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.5}button,input,textarea,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #dc7a85;outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed}.app-shell{max-width:1180px;margin:auto;padding:0 32px}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff10}.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#d66b77,#8d303c);font-family:'Playfair Display',serif;font-size:23px;box-shadow:0 8px 24px #9f3e4c33}.brand-mark span{font-size:10px;vertical-align:top;color:#ffe5e4}.brand strong,.brand small{display:block}.brand strong{font-size:16px;letter-spacing:-.4px}.brand small{color:var(--muted);font-size:11px;letter-spacing:.7px}.top-actions{display:flex;align-items:center;gap:12px}.sync-state{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px}.sync-state i{width:7px;height:7px;border-radius:50%;background:#7b7b83}.sync-state.online i{background:var(--green);box-shadow:0 0 0 4px #89b99c15}.icon-button,.avatar{border:1px solid var(--line);background:var(--panel);color:var(--text);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:19px}.avatar{background:var(--redwash);border-color:#60323b;color:#efb2b8;font-size:15px}.hero{margin:36px 0 25px;padding:37px 42px;min-height:275px;border:1px solid #65323a;background:radial-gradient(ellipse at 83% 48%,#71303b 0%,#391d25 26%,#21191f 55%,#1a191e 100%);border-radius:25px;position:relative;overflow:hidden;display:flex;align-items:center}.hero-copy{position:relative;z-index:2;max-width:550px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#d98a93}.eyebrow-dot{display:inline-block;width:6px;height:6px;background:#e8a0a6;border-radius:50%;margin-right:7px;vertical-align:1px}.hero h1{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(38px,5.5vw,61px);letter-spacing:-1.9px;line-height:1.05;margin:16px 0 12px}.hero h1 em{color:#e18c96;font-weight:500}.hero p{color:#c5b8bd;margin:0;font-size:14px}.hero-meta{display:flex;gap:10px;align-items:center;color:#b8a8ae;font-size:11px;margin-top:22px}.meta-sep{color:#8b5963}.hero-art{position:absolute;right:6%;top:0;width:280px;height:100%;display:grid;place-items:center;opacity:.96}.art-orbit{position:absolute;border:1px solid #d67a852c;border-radius:50%;width:210px;height:210px;transform:rotate(-28deg) scaleX(.78)}.orbit-two{width:250px;height:250px;transform:rotate(45deg) scaleX(.74)}.art-heart{font-size:82px;color:#d96e7c;text-shadow:0 8px 40px #d64f663e;transform:rotate(-10deg);font-family:serif}.art-note{position:absolute;bottom:28px;right:8px;font-family:'Playfair Display',serif;text-align:right;font-size:16px;color:#f1cbd0;font-style:italic;line-height:1.25}.art-note span{font-family:'DM Sans',sans-serif;font-size:9px;color:#bd9299;font-style:normal;letter-spacing:.5px}.art-star{position:absolute;color:#eab5ba;font-size:24px}.star-one{top:45px;left:20px}.star-two{right:15px;top:83px;font-size:17px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:17px 19px;display:flex;align-items:center;gap:14px}.stat-icon{display:grid;place-items:center;width:42px;height:42px;background:var(--redwash);border-radius:12px;color:#e18c96;font-size:20px}.stat-card strong,.stat-card small{display:block}.stat-card strong{font-size:23px;line-height:1.15;letter-spacing:-.8px}.stat-card small{font-size:11px;color:var(--muted);margin-top:5px}.section-head{display:flex;justify-content:space-between;align-items:end;margin-top:45px;margin-bottom:20px}.section-head h2,.primary-button,.secondary-button{border:0;border-radius:10px;padding:11px 16px;font-weight:600;font-size:12px;transition:transform .16s,filter .16s}.primary-button{background:var(--red);color:#fff4f2;box-shadow:0 5px 20px #c6536020}.primary-button:hover,.secondary-button:hover{filter:brightness(1.1);transform:translateY(-1px)}.primary-button span{font-size:16px;margin-right:4px}.secondary-button{background:var(--panel2);border:1px solid var(--line);color:var(--text)}.tabs{display:flex;gap:7px;overflow:auto;padding:3px 0 11px;border-bottom:1px solid var(--line);scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{white-space:nowrap;background:transparent;border:1px solid transparent;color:var(--muted);padding:9px 13px;border-radius:9px;font-size:12px}.tab.active{background:var(--redwash);border-color:#69313a;color:#f0b6bd}.tab span{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:5px;background:#ffffff0c;margin-left:4px;font-size:10px}.toolbar{display:flex;gap:10px;justify-content:space-between;margin:18px 0 17px}.search-box{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:0 12px;flex:1;max-width:470px;color:var(--muted)}.search-box span{font-size:22px}.search-box input{width:100%;border:0;outline:0;background:transparent;color:var(--text);padding:11px 0;font-size:12px}.items-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.item-card{background:var(--panel);border:1px solid var(--line);border-radius:15px;overflow:hidden;min-width:0;transition:border-color .2s,transform .2s}.item-card:hover{border-color:#72404a;transform:translateY(-2px)}.poster-wrap{position:relative;aspect-ratio:4/4.7;background:linear-gradient(145deg,#38252b,#202027);overflow:hidden}.poster-wrap img{width:100%;height:100%;object-fit:cover;display:block}.poster-placeholder{height:100%;display:grid;place-items:center;font-size:50px;color:#d17c87;background:radial-gradient(circle at 40% 30%,#57303b,#232127 70%)}.poster-badge{position:absolute;left:9px;top:9px;background:#111114cc;backdrop-filter:blur(8px);border:1px solid #ffffff22;padding:5px 8px;border-radius:7px;font-size:9px;color:#f3c5ca}.rating-badge{position:absolute;right:9px;top:9px;background:#111114dc;border:1px solid #ffffff22;border-radius:7px;padding:5px 7px;font-size:10px}.rating-badge b{color:#f0c16e}.card-body{padding:12px}.card-kicker{font-size:9px;text-transform:uppercase;letter-spacing:1.2px;color:#d98994;font-weight:700}.card-title{font-size:14px;font-weight:600;margin:5px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-subtitle{font-size:10px;color:var(--muted);min-height:15px}.card-note{font-size:11px;color:#c5b9be;margin-top:8px;overflow-wrap:anywhere}.card-footer{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:13px;padding-top:10px;border-top:1px solid #ffffff0b}.reaction-button,.complete-button,.delete-button{background:transparent;border:0;color:var(--muted);font-size:12px;padding:5px;border-radius:7px}.reaction-button.liked{color:#ed8594;background:#6d2e3a36}.complete-button{color:#9fc8ad;font-size:10px;border:1px solid #31513f}.delete-button{font-size:15px}.done-ribbon{font-size:9px;color:var(--green);background:#274232;padding:4px 7px;border-radius:6px}.empty-state{text-align:center;padding:45px 20px 54px;display:none}.empty-state.visible{display:block}.empty-art{width:58px;height:58px;display:grid;place-items:center;background:var(--redwash);color:#e58b96;border-radius:18px;margin:0 auto 15px;font-size:29px}.empty-state h3{font-family:'Playfair Display',serif;font-size:23px;font-weight:500;margin:0 0 6px}.empty-state p{color:var(--muted);font-size:12px;max-width:340px;margin:0 auto 18px}.field-label{font-size:10px;font-weight:600;color:#c5bbc0;display:block}.modal input,.modal textarea,.modal select{display:block;width:100%;margin-top:7px;background:#111115;border:1px solid #38353d;border-radius:9px;color:var(--text);padding:11px;font-size:12px;min-width:0}.modal input::placeholder,.modal textarea::placeholder{color:#716b74}footer{display:flex;justify-content:space-between;color:#716c74;font-size:10px;border-top:1px solid #ffffff0d;padding:19px 0 25px}.modal{border:1px solid #40353d;background:#1b1a20;color:var(--text);border-radius:20px;padding:25px;width:min(510px,calc(100% - 28px));max-height:min(90vh,850px);overflow:auto;box-shadow:var(--shadow)}.modal::backdrop{background:#050507c9;backdrop-filter:blur(5px)}.modal-head{display:flex;align-items:start;justify-content:space-between;margin-bottom:20px}.modal-head h2{font-family:'Playfair Display',serif;font-weight:500;font-size:26px;margin:4px 0}.close-modal{font-size:21px;width:32px;height:32px}.type-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:20px}.type-option{background:#121216;border:1px solid var(--line);border-radius:9px;padding:10px 5px;color:var(--muted);font-size:11px}.type-option.selected{background:var(--redwash);border-color:#81414b;color:#f0bdc3}.field-label{margin:14px 0 6px}.search-row{display:flex;gap:8px}.search-row input{margin-top:0;flex:1}.search-row button{white-space:nowrap}.field-hint{font-size:10px;color:var(--muted);margin:8px 0}.lookup-results{display:grid;gap:7px;margin-top:9px}.lookup-result{display:flex;align-items:center;gap:10px;text-align:left;background:#121216;border:1px solid var(--line);border-radius:10px;padding:8px;color:var(--text);width:100%}.lookup-result img{width:43px;height:57px;object-fit:cover;border-radius:5px;background:#29242b}.lookup-result strong,.lookup-result small{display:block}.lookup-result strong{font-size:11px}.lookup-result small{font-size:10px;color:var(--muted);margin-top:3px}.lookup-result .result-rating{margin-left:auto;color:#edc475;white-space:nowrap;font-size:11px}.selected-preview{display:flex;gap:12px;align-items:center;margin-top:10px;padding:10px;border:1px solid #6c3b45;background:#2b1c22;border-radius:10px}.selected-preview img{width:44px;height:62px;object-fit:cover;border-radius:5px}.selected-preview strong{display:block;font-size:12px}.selected-preview small{display:block;color:var(--muted);font-size:10px}.hidden{display:none!important}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.form-error{color:#f09aa4;font-size:11px}.small-modal{width:min(440px,calc(100% - 28px))}.modal-description{color:#b4abb2;font-size:12px;margin:0 0 18px}.google-button{width:100%;background:#f4f0ef;color:#262126;border:0;border-radius:10px;padding:12px;font-weight:600;font-size:12px}.google-button span{display:inline-grid;place-items:center;border:1px solid #ddd;width:22px;height:22px;border-radius:50%;margin-right:8px;font-weight:700}.full-width{width:100%;margin-top:8px}.account-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.import-label{text-align:center;display:block}.privacy-note{font-size:10px;color:#817983;margin-top:18px}.picker-content{text-align:center;padding:14px 0 4px}.picker-sparkle{font-size:38px;color:#e68e99;margin-bottom:8px}.picker-content h2{font-family:'Playfair Display',serif;font-weight:500;font-size:28px;margin:8px 0 18px}.picked-card{display:flex;text-align:left;align-items:center;gap:14px;background:#121216;border:1px solid var(--line);border-radius:13px;padding:12px;margin-bottom:17px}.picked-card img{width:75px;height:94px;object-fit:cover;border-radius:7px}.picked-card strong{display:block;font-size:14px}.picked-card small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.picker-content>.secondary-button,.picker-content>.primary-button{width:100%;margin-top:8px}.modal-close-absolute{position:absolute;right:18px;top:18px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#f0e8e7;color:#211b20;padding:11px 17px;border-radius:10px;box-shadow:var(--shadow);font-size:12px;z-index:10;transition:.2s;max-width:90vw}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:900px){.app-shell{padding:0 22px}.items-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-art{right:0;opacity:.65}.hero-copy{max-width:490px}}@media(max-width:620px){.app-shell{padding:0 15px}.topbar{height:68px}.brand-mark{width:37px;height:37px}.sync-state{max-width:90px;font-size:10px}.top-actions{gap:7px}.hero{margin-top:20px;padding:27px 23px;min-height:250px;border-radius:19px}.hero h1{font-size:43px}.hero p{max-width:255px;font-size:12px}.hero-art{right:-94px;opacity:.32}.hero-meta{font-size:10px;flex-wrap:wrap}.stats-grid{gap:7px}.stat-card{padding:12px 9px;gap:8px;align-items:flex-start}.stat-icon{width:31px;height:31px;border-radius:9px;font-size:15px;flex-shrink:0}.stat-card strong{font-size:20px}.stat-card small{font-size:9px;line-height:1.25}.section-head{margin-top:34px;align-items:center}.section-head h2{font-size:25px}.section-head .primary-button{padding:10px 11px;font-size:10px}.tabs{margin-right:-15px;padding-right:15px}.tab{font-size:11px;padding:8px 10px}.toolbar{gap:7px}.search-box{padding:0 9px}.search-box input{font-size:11px}.toolbar .secondary-button{padding:10px;font-size:10px;white-space:nowrap}.items-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.poster-wrap{aspect-ratio:4/4.8}.card-body{padding:10px}.card-title{font-size:12px}.card-subtitle{font-size:9px}.card-footer{margin-top:9px;padding-top:7px}.reaction-button,.complete-button,.delete-button{font-size:10px;padding:4px}.planner-form label:first-child{grid-column:1/-1}footer{font-size:9px}.modal{padding:19px}.modal-head h2{font-size:23px}}@media(max-width:360px){.hero h1{font-size:37px}.stat-card{display:block}.stat-icon{margin-bottom:7px}.section-head h2{font-size:22px}.section-head .primary-button{font-size:9px}.toolbar .secondary-button{font-size:9px}}

/* Us Two update: clear tap affordance for poster details and a mobile-friendly details sheet */
.poster-open{display:block;width:100%;padding:0;border:0;text-align:left;color:inherit;cursor:pointer;font:inherit}
.poster-open-hint{position:absolute;left:9px;bottom:9px;padding:5px 8px;border-radius:7px;background:#111114d9;border:1px solid #ffffff22;color:#fff0f1;font-size:10px;opacity:0;transition:opacity .15s}
.poster-open:hover .poster-open-hint,.poster-open:focus-visible .poster-open-hint{opacity:1}
.details-modal{width:min(650px,calc(100% - 24px))}
.details-layout{display:grid;grid-template-columns:minmax(105px,165px) 1fr;gap:18px;align-items:start;padding-right:20px}
.details-poster{width:100%;max-height:245px;object-fit:cover;border-radius:12px;background:#2a242b;box-shadow:0 8px 25px #0005}
.details-placeholder{min-height:150px;display:grid;place-items:center;font-size:42px}
.details-copy h2{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(24px,5vw,34px);line-height:1.1;margin:8px 0}
.details-meta{font-size:12px;color:var(--muted);margin:0 0 10px}
.details-rating{color:#f0c16e;font-size:13px;font-weight:700;margin:7px 0}
.details-rating small{font-weight:400;color:var(--muted)}
.details-plot-title{font-family:'Playfair Display',serif;font-size:20px;font-weight:500;margin:23px 0 8px}
.details-plot,.details-note{color:#c8bdc3;font-size:13px;line-height:1.75;white-space:pre-line}
.details-note{border-top:1px solid var(--line);padding-top:12px;color:#e6a3ad}
@media(max-width:620px){.tabs{flex-wrap:wrap;overflow:visible;margin-right:0;padding-right:0}.details-layout{grid-template-columns:105px 1fr;gap:13px}.details-poster{max-height:180px}.details-modal{padding:18px}.poster-open-hint{opacity:1;font-size:9px;padding:4px 6px}}

/* Wishlist layout options */
.toolbar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.view-switch{display:flex;gap:3px;padding:3px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.view-button{width:31px;height:31px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:18px;line-height:1}
.view-button.active{background:var(--redwash);color:#f0b6bd;box-shadow:inset 0 0 0 1px #69313a}
.items-grid.view-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.items-grid.view-list{grid-template-columns:1fr;gap:9px}
.items-grid.view-list .item-card{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:stretch}
.items-grid.view-list .poster-wrap{height:130px;aspect-ratio:auto;grid-row:1;}
.items-grid.view-list .card-body{display:flex;flex-direction:column;justify-content:center;min-width:0}
.items-grid.view-list .card-title{white-space:normal;font-size:14px}
.items-grid.view-list .card-footer{margin-top:8px}
.items-grid.view-compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.items-grid.view-compact .poster-wrap{aspect-ratio:4/3}
.items-grid.view-compact .card-body{padding:8px}
.items-grid.view-compact .card-kicker,.items-grid.view-compact .card-subtitle,.items-grid.view-compact .card-note{display:none}
.items-grid.view-compact .card-title{font-size:11px}
/* Keep movie details readable on phones: a contained poster and a bounded, scrollable sheet. */
.details-modal{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0;width:min(650px,calc(100vw - 24px));max-width:650px;max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;padding:20px}
.details-modal .details-layout{grid-template-columns:minmax(82px,118px) minmax(0,1fr);gap:14px;padding-right:28px}
.details-modal .details-poster{display:block;width:100%;height:auto;max-height:185px;object-fit:contain;object-position:top center}
.details-modal .details-plot-title{margin-top:16px}
.details-modal .details-plot{margin-bottom:8px}
@media(max-width:620px){
 .toolbar{align-items:stretch;flex-wrap:wrap}
 .toolbar .search-box{max-width:none;flex-basis:100%}
 .toolbar-actions{width:100%;justify-content:space-between}
 .items-grid.view-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .items-grid.view-list .item-card{grid-template-columns:86px minmax(0,1fr)}
 .items-grid.view-list .poster-wrap{height:118px}
 .items-grid.view-compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .details-modal{inset:auto 0 0 0;transform:none;margin:0 auto;width:100%;max-width:none;max-height:82dvh;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
 .details-modal .details-layout{grid-template-columns:82px minmax(0,1fr);gap:12px;padding-right:24px}
 .details-modal .details-poster{max-height:125px;object-fit:contain}
 .details-copy h2{font-size:23px;overflow-wrap:anywhere}
 .details-plot-title{font-size:18px}
 .details-plot,.details-note{font-size:12px;line-height:1.6}
 .details-modal .modal-actions{margin-top:12px}
}

/* Final visual polish: restore the original romantic serif heading and even out spacing. */
.section-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:38px 0 18px}
.section-head>div{min-width:0;flex:1}
.section-head .eyebrow{margin-bottom:8px;line-height:1.4}
.section-head h2{font-family:'Playfair Display',serif;font-size:clamp(27px,3.1vw,36px);font-weight:500;letter-spacing:-.8px;line-height:1.12;margin:0;color:var(--text);overflow-wrap:normal}
.section-head #add-button{flex:0 0 auto;white-space:nowrap;min-height:46px;padding:12px 17px;font-size:12px;border-radius:12px}
.tabs{gap:8px;padding:4px 0 13px;align-items:center}
.tab{padding:9px 13px;font-size:12px}
.toolbar{align-items:center;margin:17px 0 20px;gap:12px}
.search-box{min-height:46px}
.toolbar-actions{gap:10px}
.items-grid{gap:16px}
footer{margin-top:28px}
@media(max-width:620px){
 .app-shell{padding-left:15px;padding-right:15px}
 .stats-grid{margin-top:0;gap:8px}
 .section-head{margin:30px 0 15px;gap:12px;align-items:center}
 .section-head .eyebrow{font-size:9px;letter-spacing:1.7px;margin-bottom:7px}
 .section-head h2{font-size:clamp(25px,6.5vw,30px);line-height:1.12;letter-spacing:-.6px}
 .section-head #add-button{min-height:44px;padding:10px 12px;font-size:11px;border-radius:11px}
 .section-head #add-button span{font-size:15px;margin-right:3px}
 .tabs{gap:6px;padding:3px 0 12px;margin:0;}
 .tab{padding:8px 10px;font-size:11px;border-radius:9px}
 .toolbar{margin:15px 0 17px;gap:9px}
 .toolbar .search-box{min-height:44px}
 .toolbar-actions{gap:8px}
 .view-switch{padding:3px;gap:2px}
 .view-button{width:32px;height:32px}
 .items-grid{gap:10px}
 .items-grid.view-list{gap:9px}
 footer{margin-top:22px;padding:16px 0 22px;gap:10px;flex-wrap:wrap}
}
@media(max-width:380px){
 .section-head{gap:9px}
 .section-head h2{font-size:24px}
 .section-head #add-button{padding:9px 10px;font-size:10px}
 .tab{padding:7px 8px;font-size:10px}
}

/* ===== Polish pass (additive) ===== */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;background:radial-gradient(1200px 600px at 85% -10%,#2a171d55,transparent 60%),var(--bg);background-attachment:fixed}
.topbar{position:sticky;top:0;z-index:20;background:#111114d9;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);margin:0 -32px;padding:0 32px;padding-top:env(safe-area-inset-top,0)}
@media(max-width:900px){.topbar{margin:0 -22px;padding:0 22px}}
@media(max-width:620px){.topbar{margin:0 -15px;padding:0 15px}}
.icon-button,.avatar{transition:transform .16s,border-color .16s,background .16s}
.icon-button:hover,.avatar:hover{transform:translateY(-1px);border-color:#72404a}
.icon-button:active,.avatar:active,.primary-button:active,.secondary-button:active{transform:scale(.97)}
.hero{box-shadow:0 30px 80px -40px #c6536055}
.art-heart{animation:float 5.5s ease-in-out infinite}
.art-star{animation:twinkle 3.6s ease-in-out infinite}.star-two{animation-delay:1.4s}
@keyframes float{0%,100%{transform:rotate(-10deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-9px)}}
@keyframes twinkle{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
.stat-card{transition:transform .2s,border-color .2s}
.stat-card:hover{transform:translateY(-2px);border-color:#72404a}
.item-card{box-shadow:0 1px 0 #ffffff06 inset;animation:cardIn .35s ease both}
.item-card:hover{box-shadow:0 18px 40px -22px #000c}
.poster-wrap img{transition:transform .45s ease}
.item-card:hover .poster-wrap img{transform:scale(1.04)}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.reaction-button{transition:transform .15s,background .15s,color .15s}
.reaction-button:active{transform:scale(1.25)}
.reaction-button.liked{animation:pop .3s ease}
@keyframes pop{50%{transform:scale(1.3)}}
.complete-button,.delete-button{transition:background .15s,color .15s,border-color .15s}
.complete-button:hover{background:#274232;color:#c6e8d2}
.delete-button:hover{color:#f09aa4;background:#6d2e3a30}
.tab{transition:background .15s,color .15s,border-color .15s}
.tab:hover:not(.active){color:var(--text);background:#ffffff08}
.search-box:focus-within{border-color:#81414b;box-shadow:0 0 0 3px #c6536018}
.modal[open]{animation:modalIn .22s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.details-modal[open]{animation:none}
.toast{border:1px solid #00000010}
::selection{background:#c6536055}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== View switcher ===== */
.view-nav{display:flex;gap:6px;margin-top:30px;padding:5px;background:var(--panel);border:1px solid var(--line);border-radius:14px;width:max-content;max-width:100%}
.nav-tab{border:0;background:transparent;color:var(--muted);padding:10px 18px;border-radius:10px;font-weight:600;font-size:13px;white-space:nowrap;transition:background .15s,color .15s}
.nav-tab:hover:not(.active){color:var(--text)}
.nav-tab.active{background:var(--redwash);color:#f4c0c6;box-shadow:inset 0 0 0 1px #69313a}
.nav-tab em{font-style:normal;font-size:9px;letter-spacing:.8px;text-transform:uppercase;background:var(--red);color:#fff;border-radius:5px;padding:2px 5px;margin-left:5px;vertical-align:1px}
.view{animation:cardIn .3s ease both}
.view.hidden{display:none!important}
.view-nav+.view .section-head{margin-top:28px}

/* ===== Together tab ===== */
.x-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.x-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;min-width:0}
.x-wide{grid-column:1/-1}
.x-label{font-size:10px;letter-spacing:2px;font-weight:700;color:#d98a93}
.x-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.x-sub{color:var(--muted);font-size:12px;margin:8px 0 0}
.x-big{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.x-big span{font-family:'Playfair Display',serif;font-size:clamp(44px,8vw,64px);line-height:1;letter-spacing:-2px;color:#f0a0a9}
.x-big small{color:var(--muted);font-size:13px}
.x-days{background:radial-gradient(ellipse at 90% 0%,#4a2530,transparent 60%),var(--panel);border-color:#5a2f38}
.x-field{display:block;font-size:10px;font-weight:600;color:#c5bbc0;margin-top:14px;flex:1;min-width:0}
.x-field input,.note-form input,.memory-note{display:block;width:100%;margin-top:6px;background:#111115;border:1px solid #38353d;border-radius:9px;color:var(--text);padding:10px 11px;font-size:12px;min-width:0;color-scheme:dark}
.x-field input:focus,.note-form input:focus,.memory-note:focus{border-color:#81414b;outline:0;box-shadow:0 0 0 3px #c6536018}
.x-row{display:flex;gap:10px}
.x-progress-body{display:flex;align-items:center;gap:22px;margin-top:14px}
.ring{--p:0;flex:0 0 auto;width:104px;height:104px;border-radius:50%;background:conic-gradient(#d96e7c calc(var(--p)*1%),#2b2a31 0);display:grid;place-items:center;position:relative;transition:background .4s}
.ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--panel)}
.ring span{position:relative;font-family:'Playfair Display',serif;font-size:24px}
.x-bars{flex:1;min-width:0;display:grid;gap:9px}
.x-bar{display:grid;grid-template-columns:78px 1fr 34px;align-items:center;gap:9px;font-size:11px;color:var(--muted)}
.x-bar>div{height:7px;border-radius:99px;background:#2b2a31;overflow:hidden}
.x-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#c65360,#e8a0a6);transition:width .5s}
.x-bar b{text-align:right;color:var(--text);font-weight:600}
.x-bars .x-sub{margin:2px 0 0}
.mood-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mood-btn{background:#121216;border:1px solid var(--line);color:var(--text);padding:10px 13px;border-radius:10px;font-size:12px;font-weight:600;transition:all .15s}
.mood-btn:hover{border-color:#72404a}
.mood-btn.active{background:var(--redwash);border-color:#81414b;color:#f0bdc3}
.mood-result{margin-top:14px}
.mood-card{display:flex;gap:14px;align-items:center;background:#121216;border:1px solid var(--line);border-radius:13px;padding:12px;animation:cardIn .3s ease both}
.mood-card img,.mood-ph{width:68px;height:92px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:#29242b;display:grid;place-items:center;font-size:30px}
.mood-info{min-width:0;display:grid;gap:3px}
.mood-info small{color:var(--muted);font-size:10px}
.mood-info strong{font-size:14px;overflow-wrap:anywhere}
.mood-info em{color:#c5b9be;font-size:11px;overflow-wrap:anywhere}
.mood-actions{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap}
.mood-actions button{padding:8px 11px}
.mood-empty{margin:0}
.note-form{display:flex;gap:8px}
.note-form input{margin-top:0;flex:1}
.notes-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:14px}
.note{background:linear-gradient(145deg,#2d1b22,#221a1f);border:1px solid #4c2c35;border-radius:13px;padding:13px 14px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;animation:cardIn .3s ease both}
.note p{margin:0;font-family:'Playfair Display',serif;font-style:italic;font-size:15px;line-height:1.4;color:#f1d3d7;overflow-wrap:anywhere}
.note>div{display:flex;justify-content:space-between;align-items:center}
.note small{color:#a98e95;font-size:10px}
.note button{background:transparent;border:0;color:#a98e95;font-size:16px;padding:2px 6px;border-radius:6px}
.note button:hover{color:#f09aa4}
.empty-line{margin:0}
.memory-list{display:grid;gap:10px}
.memory{display:flex;gap:13px;background:#121216;border:1px solid var(--line);border-radius:13px;padding:11px;animation:cardIn .3s ease both}
.memory-thumb{width:54px;height:76px;flex:0 0 auto;border-radius:8px;overflow:hidden;background:#29242b;display:grid;place-items:center;font-size:24px}
.memory-thumb img{width:100%;height:100%;object-fit:cover}
.memory-body{flex:1;min-width:0}
.memory-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.memory-top strong{font-size:13px;overflow-wrap:anywhere}
.memory-top small{color:var(--muted);font-size:10px;white-space:nowrap}
.hearts{display:flex;gap:1px;margin:5px 0 2px}
.heart{background:transparent;border:0;color:#3d3a42;font-size:20px;padding:2px 3px;border-radius:6px;transition:transform .12s,color .12s}
.heart.on{color:#ed8594}
.heart:hover{transform:scale(1.18)}
.memory-note{margin-top:4px}
@media(max-width:760px){.x-grid{grid-template-columns:1fr}.x-card{padding:18px}}
@media(max-width:620px){.view-nav{width:100%}.nav-tab{flex:1;padding:10px 8px;font-size:12px}.x-row{flex-direction:column;gap:0}.x-progress-body{gap:16px}.ring{width:88px;height:88px}.x-bar{grid-template-columns:68px 1fr 32px}.mood-btn{flex:1 1 auto;text-align:center}.note-form{flex-direction:column}.note-form .primary-button{width:100%}.view-nav+.view .section-head{margin-top:22px}}

/* ===== Soft light theme (theme button) ===== */
body.soft-theme{color-scheme:light;--bg:#fbf3f1;--panel:#ffffff;--panel2:#f6e9e6;--line:#ecd7d3;--text:#2a1e22;--muted:#7d6a70;--redwash:#fbe4e5;--shadow:0 22px 60px #8d303c22;background:radial-gradient(1000px 500px at 85% -10%,#f6d4d855,transparent 60%),var(--bg)}
body.soft-theme .topbar{background:#fbf3f1d9;border-bottom-color:#ecd7d3}
body.soft-theme .hero{background:radial-gradient(ellipse at 83% 48%,#f4b9c0 0%,#fbdfe0 34%,#fff3f1 70%);border-color:#efc3c8;box-shadow:0 30px 80px -40px #c6536055}
body.soft-theme .hero p,body.soft-theme .hero-meta{color:#7d5c64}
body.soft-theme .hero h1 em,body.soft-theme .eyebrow,body.soft-theme .x-label,body.soft-theme .card-kicker{color:#b8404f}
body.soft-theme .art-note{color:#9a4a56}body.soft-theme .art-note span{color:#9a4a56}
body.soft-theme .tab.active,body.soft-theme .nav-tab.active,body.soft-theme .type-option.selected,body.soft-theme .mood-btn.active{color:#9c2f3e;border-color:#efb5bb}
body.soft-theme .stat-icon,body.soft-theme .empty-art{color:#c65360}
body.soft-theme .item-card:hover,body.soft-theme .stat-card:hover{border-color:#e3a6ad}
body.soft-theme .poster-wrap{background:linear-gradient(145deg,#f6dfe1,#ecdcdf)}
body.soft-theme .poster-placeholder{background:radial-gradient(circle at 40% 30%,#f9d5da,#f1e2e4 70%);color:#c65360}
body.soft-theme .card-note,body.soft-theme .details-plot,body.soft-theme .modal-description{color:#5f4d54}
body.soft-theme .modal{background:#fffaf9;border-color:#ecd7d3}
body.soft-theme .modal::backdrop{background:#2a1e2299}
body.soft-theme .modal input,body.soft-theme .modal textarea,body.soft-theme .modal select,body.soft-theme .x-field input,body.soft-theme .note-form input,body.soft-theme .memory-note{background:#fff;border-color:#e6d0cc;color:var(--text);color-scheme:light}
body.soft-theme .type-option,body.soft-theme .lookup-result,body.soft-theme .picked-card,body.soft-theme .mood-btn,body.soft-theme .mood-card,body.soft-theme .memory{background:#fff;border-color:var(--line);color:var(--text)}
body.soft-theme .selected-preview{background:#fdeaea;border-color:#efc3c8}
body.soft-theme .poster-badge,body.soft-theme .rating-badge,body.soft-theme .poster-open-hint{background:#fffffff0;color:#9c2f3e;border-color:#ecd7d3}
body.soft-theme .rating-badge b{color:#b97a12}
body.soft-theme .field-label{color:#6f5d63}
body.soft-theme .search-box,body.soft-theme .view-switch,body.soft-theme .view-nav{background:#fff}
body.soft-theme .primary-button{box-shadow:0 6px 18px #c6536030}
body.soft-theme .done-ribbon{background:#dff0e5;color:#2e6a47}
body.soft-theme .complete-button{color:#2e6a47;border-color:#b9dcc6}
body.soft-theme .brand strong{color:var(--text)}
body.soft-theme footer{color:#9a8a8f;border-top-color:#ecd7d3}
body.soft-theme .x-days{background:radial-gradient(ellipse at 90% 0%,#fbd9dc,transparent 60%),#fff;border-color:#efc3c8}
body.soft-theme .x-big span{color:#c65360}
body.soft-theme .ring{background:conic-gradient(#d96e7c calc(var(--p)*1%),#f0e2e0 0)}
body.soft-theme .x-bar>div{background:#f0e2e0}
body.soft-theme .note{background:linear-gradient(145deg,#fff1f1,#fff8f6);border-color:#efc3c8}
body.soft-theme .note p{color:#7a2f3b}
body.soft-theme .note small,body.soft-theme .note button{color:#a07a82}
body.soft-theme .heart{color:#e6d4d4}body.soft-theme .heart.on{color:#d96e7c}
body.soft-theme .heart.on{color:#d96e7c}
body.soft-theme .mood-info em{color:#6f5d63}
body.soft-theme .toast{background:#2a1e22;color:#fbf3f1}
.section-head h2{padding:0;border-radius:0}