:root{
  --bg:#0b0d10;--panel:#12151a;--panel2:#171b21;--panel3:#1d2229;--text:#f4f6f8;--soft:#bdc3cb;--muted:#808995;--line:#282e36;
  --accent:#8be7dc;--accent2:#b7a4ff;--accent3:#b8e777;--danger:#ff8796;--radius:22px;--radius-sm:14px;--shadow:0 24px 70px rgba(0,0,0,.35);--max:1460px;
}
body[data-theme="dark"]{
  --bg:#0a0c0f;--panel:#111419;--panel2:#15191f;--panel3:#1a2027;--text:#f3f5f7;--soft:#b7bec7;--muted:#77818c;--line:#242a31;
  --accent:#dce3e8;--accent2:#8e9aa5;--accent3:#b7c0c7;color-scheme:dark
}
body[data-theme="ocean"]{
  --bg:#f4fbfc;--panel:#ffffff;--panel2:#eef8f9;--panel3:#e6f4f6;--text:#17303a;--soft:#54717c;--muted:#7f99a2;--line:#d6e9ec;
  --accent:#5dcfc8;--accent2:#9a8fe8;--accent3:#7bd5e4;--danger:#db6e80;--shadow:0 24px 70px rgba(83,128,139,.18);color-scheme:light
}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.015em}
button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit}.app{min-height:100vh;display:grid;grid-template-columns:238px 1fr}.sidebar{position:sticky;top:0;height:100vh;padding:24px 17px;border-right:1px solid var(--line);background:rgba(11,13,16,.94);backdrop-filter:blur(18px);display:flex;flex-direction:column;z-index:20}.brand{border:0;background:none;display:flex;align-items:center;gap:11px;padding:6px 8px;margin-bottom:24px;text-align:left}.brand-mark{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#101216;font-weight:900}.brand-copy{display:flex;flex-direction:column}.brand-copy strong{font-size:18px}.brand-copy small{font-size:10px;color:var(--muted)}
.nav,.categories{display:grid;gap:5px}.nav button,.categories button{border:0;background:transparent;border-radius:12px;padding:11px 12px;display:flex;align-items:center;gap:11px;text-align:left;color:var(--muted)}.nav button:hover,.nav button.active,.categories button:hover{background:var(--panel2);color:var(--text)}.nav button span,.categories button .cat-icon{width:22px;text-align:center;color:var(--accent)}.categories{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}.categories .label{font-size:10px;letter-spacing:.14em;color:#626b76;padding:0 12px 7px}.categories button{justify-content:flex-start}.sidebar-bottom{margin-top:auto;display:grid;gap:8px}.theme-button,.settings-button{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:11px 12px;display:flex;align-items:center;gap:10px;text-align:left}.theme-dot{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2))}.theme-copy{display:flex;flex-direction:column;flex:1}.theme-copy b{font-size:12px}.theme-copy small{font-size:9px;color:var(--muted)}
.main{width:min(100%,var(--max));margin:0 auto;padding:0 40px 78px;min-width:0}.topbar{height:104px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.eyebrow{font-size:10px;letter-spacing:.15em;font-weight:800;color:var(--muted);margin:0}.topbar h1{font-size:27px;margin:5px 0 0}.actions{display:flex;gap:9px;align-items:center}.icon-btn,.outline-btn,.primary-btn,.text-btn,.back-btn{border:1px solid var(--line);background:var(--panel);border-radius:13px;padding:10px 13px}.icon-btn{width:42px;height:42px;padding:0;font-size:18px}.primary-btn{border:0;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#101216;font-weight:850}.outline-btn{color:var(--soft)}.text-btn{border:0;background:transparent;color:var(--soft)}.view{display:none;animation:fade .18s ease}.view.active{display:block}@keyframes fade{from{opacity:.45;transform:translateY(3px)}to{opacity:1;transform:none}}
.hero{position:relative;min-height:300px;border:1px solid var(--line);border-radius:26px;overflow:hidden;background:linear-gradient(155deg,var(--panel2),var(--panel));display:grid;grid-template-columns:1.25fr .85fr}.hero-copy{padding:36px;display:flex;flex-direction:column;justify-content:flex-end;z-index:2}.hero-copy h2{font-size:clamp(31px,4.1vw,58px);line-height:1.05;letter-spacing:-.048em;margin:10px 0 14px;max-width:740px}.hero-copy p{color:var(--soft);line-height:1.7;margin:0;max-width:620px}.hero-art{position:relative;min-height:300px;background:radial-gradient(circle at 30% 30%,rgba(139,231,220,.22),transparent 35%),radial-gradient(circle at 75% 25%,rgba(183,164,255,.24),transparent 32%),linear-gradient(155deg,#11141a,#161b23);background-size:cover;background-position:center}.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--panel) 0%,transparent 34%)}.hero-controls{position:absolute;right:14px;top:14px;display:flex;gap:7px;z-index:3}.hero-controls button{border:1px solid rgba(255,255,255,.12);background:rgba(10,12,15,.55);backdrop-filter:blur(10px);border-radius:11px;padding:8px 10px;color:#e9edf1}
.section-head{display:flex;align-items:end;justify-content:space-between;margin:38px 0 16px}.section-head h2{margin:5px 0 0}.recent-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.media-card,.library-card,.interest-card{border:1px solid var(--line);background:var(--panel);border-radius:18px;transition:.16s}.media-card:hover,.library-card:hover,.interest-card:hover{transform:translateY(-2px);border-color:#3b434e}.media-card{padding:12px;display:grid;grid-template-columns:88px 1fr;gap:13px}.media-copy{min-width:0;padding:4px 2px}.media-copy h3{margin:5px 0 9px;font-size:15px}.media-copy p{font-size:12px;line-height:1.55;color:var(--soft);margin:0 0 18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.media-copy small,.kicker{font-size:10px;color:var(--muted)}
.cover{aspect-ratio:2/3;border-radius:13px;overflow:hidden;display:grid;place-items:center;border:1px solid rgba(255,255,255,.07);position:relative;box-shadow:inset 0 0 50px rgba(255,255,255,.03);background-size:cover;background-position:center}.cover.has-image:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(5,7,10,.12) 66%,rgba(5,7,10,.78) 100%)}.cover span{position:relative;z-index:1;align-self:end;width:100%;padding:10px 7px;font-size:10px;font-weight:900;letter-spacing:.03em;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.88)}.cover-sm{width:46px;border-radius:8px}.cover-sm span{display:none}.perfect{background-color:#18216d}.twin{background-color:#260914}.book{background-color:#6a2c30}.album{background-color:#6ecbc8}.concert{background-color:#251630}.game{background-color:#183649}.exhibit{background-color:#d6d8d3}
.stats{margin-top:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.stat-card{position:relative;border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:21px 24px;display:flex;align-items:baseline;gap:10px;min-height:76px}.stat-card b{font-size:26px}.stat-card span{font-size:11px;color:var(--muted)}.stat-pop{position:absolute;left:0;bottom:calc(100% + 10px);width:348px;border:1px solid color-mix(in srgb,var(--text) 18%,var(--line));background:color-mix(in srgb,var(--panel) 97%,var(--bg) 3%);border-radius:18px;padding:17px;box-shadow:0 30px 90px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.025);backdrop-filter:blur(22px) saturate(115%);opacity:0;pointer-events:none;transform:translateY(6px);transition:.16s;z-index:25}.stat-card:hover .stat-pop,.stat-card.open .stat-pop{opacity:1;pointer-events:auto;transform:none}.stat-pop h4{margin:0 0 14px;color:var(--text);font-weight:850}.stat-detail{display:grid;grid-template-columns:116px 1fr;gap:14px;align-items:center}.donut{width:112px;height:112px;border-radius:50%;background:conic-gradient(var(--accent) 0 34%,var(--accent2) 34% 56%,#7bb7ff 56% 72%,#e1c879 72% 83%,#e894bd 83% 92%,#858d99 92% 100%);display:grid;place-items:center}.donut:after{content:"";width:68px;height:68px;border-radius:50%;background:var(--panel)}.legend{display:grid;gap:6px}.legend-row{display:grid;grid-template-columns:1fr auto auto;gap:7px;font-size:10px;color:var(--soft)}.legend-row b{font-size:10px;color:var(--text)}
.toolbar,.library-controls{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:18px}.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:999px;padding:8px 12px;font-size:12px}.chip.active{border-color:transparent;background:var(--accent);color:#101216;font-weight:800}.search-field{height:44px;display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--panel);border-radius:13px;padding:0 13px;min-width:min(420px,50vw)}.search-field input{width:100%;border:0;outline:0;background:transparent;color:var(--text)}.library-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.library-card{padding:10px}.library-card .cover{width:100%;margin-bottom:11px}.library-card h3{font-size:13px;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library-card p{font-size:10px;color:var(--muted);margin:0}.mini-status{font-size:9px;color:var(--accent);margin-top:9px}.subfilter{display:none;margin:10px 0 20px}.subfilter.active{display:flex}.subfilter .chip{display:flex;align-items:center;gap:6px}.subicon{font-size:15px}
.timeline{max-width:920px;margin:0 auto}.timeline-group{margin:26px 0 34px}.timeline-month{padding:11px 0 15px;position:sticky;top:0;background:linear-gradient(var(--bg) 70%,transparent);z-index:3}.timeline-item{display:grid;grid-template-columns:70px 52px 1fr;gap:14px;padding:17px 0;border-top:1px solid var(--line);align-items:center}.timeline-date b{font-size:19px;display:block}.timeline-date small{color:var(--muted)}.timeline-date.repeat{visibility:hidden}.timeline-copy h3{margin:0 0 4px}.timeline-copy p{margin:0 0 6px;color:var(--soft);font-size:12px}.timeline-copy small{color:var(--muted);font-size:10px}
.tabs{display:flex;gap:7px;margin-bottom:18px}.tab{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:12px;padding:9px 13px}.tab.active{background:var(--panel3);color:var(--text);border-color:#3a424d}.interest-list{display:grid;gap:10px}.interest-card{padding:15px 16px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px}.interest-card h3{margin:0 0 6px;font-size:15px}.interest-card p{margin:0;color:var(--muted);font-size:11px}.interest-meta{text-align:right}.interest-meta b{display:block;font-size:12px}.interest-meta small{font-size:9px;color:var(--muted)}
.detail{max-width:1000px;margin:0 auto}.back-btn{margin-bottom:14px;background:transparent}.detail-hero{display:grid;grid-template-columns:210px 1fr;gap:32px;padding:24px;border:1px solid var(--line);border-radius:24px;background:var(--panel)}.detail-hero .cover{width:100%}.detail-meta h2{font-size:34px;margin:8px 0 7px}.detail-meta .subline,.detail-meta .creator{color:var(--soft);margin-top:6px}.detail-actions{display:flex;gap:8px;margin-top:20px}.detail-section{margin-top:25px}.record-entry{display:grid;grid-template-columns:115px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--line)}.record-entry time{font-size:11px;color:var(--muted)}.record-entry strong{font-size:13px}.record-entry p{margin:6px 0 0;color:var(--soft);font-size:12px;line-height:1.6}.info-grid{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden}.info-grid div{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;font-size:11px}.info-grid div:nth-child(odd){border-right:1px solid var(--line)}.info-grid div:nth-last-child(-n+2){border-bottom:0}.info-grid b{color:var(--muted);font-weight:600}
.mobile-nav{display:none}.dialog{padding:0;border:0;background:transparent;color:var(--text);width:min(720px,calc(100vw - 28px));max-height:calc(100vh - 28px)}.dialog::backdrop{background:rgba(0,0,0,.65);backdrop-filter:blur(9px)}.dialog-card{background:#101318;border:1px solid #303741;border-radius:23px;padding:22px;box-shadow:var(--shadow);max-height:calc(100vh - 28px);overflow:auto}.dialog-card header,.dialog-card footer{display:flex;align-items:center;justify-content:space-between}.dialog-card h2{margin:4px 0 0}.dialog-card footer{justify-content:flex-end;gap:8px;margin-top:20px}.large-search{width:100%;height:50px;margin:18px 0}.search-results{display:grid;gap:8px}.search-result{border:1px solid var(--line);background:var(--panel);border-radius:13px;padding:9px;display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;text-align:left}.search-result small{display:block;color:var(--muted);line-height:1.45;margin-top:3px}.search-result.selected{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--panel))}.search-result i{font-style:normal;color:var(--accent)}.record-form{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding-top:16px;margin-top:16px;border-top:1px solid var(--line)}.record-form label{display:grid;gap:7px;color:var(--muted);font-size:11px}.record-form .full{grid-column:1/-1}.record-form input,.record-form select,.record-form textarea{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:11px;padding:11px;outline:none}.record-form textarea{resize:vertical}.auto-info{grid-column:1/-1;padding:12px;border:1px dashed #343b45;border-radius:12px;color:var(--soft);font-size:11px}.form-note{color:var(--muted);font-size:10px;margin-top:-3px}.settings-grid{display:grid;gap:18px}.settings-section{border-top:1px solid var(--line);padding-top:16px}.settings-section:first-child{border-top:0;padding-top:0}.settings-section h3{margin:0 0 10px;font-size:14px}.preset-row{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.preset{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:13px;text-align:left}.preset.active{border-color:var(--accent)}.preset b{display:block;font-size:12px}.preset small{color:var(--muted);font-size:9px}.category-order{display:grid;gap:7px}.order-row{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;border:1px solid var(--line);background:var(--panel);border-radius:11px;padding:8px 10px;transition:.14s;user-select:none}.order-row.dragging{opacity:.48;transform:scale(.992);border-color:var(--accent);box-shadow:0 10px 32px rgba(0,0,0,.24)}.order-row .drag-copy{display:flex;align-items:center;gap:9px;min-width:0}.drag-handle{width:22px;height:34px;display:grid;place-items:center;color:var(--muted);cursor:grab;touch-action:none;border-radius:7px;font-size:16px;letter-spacing:-4px;padding-right:4px}.drag-handle:active{cursor:grabbing;background:var(--panel2);color:var(--text)}.order-row button{width:34px;height:34px;border:1px solid var(--line);background:var(--panel2);border-radius:9px}.order-row button:disabled{opacity:.35;cursor:default}.hero-setting{display:grid;gap:9px}.hero-setting textarea,.hero-setting input[type=file]{width:100%;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:11px;padding:10px}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,120px);opacity:0;background:#eef3f1;color:#111;border-radius:999px;padding:11px 15px;font-size:11px;font-weight:800;transition:.25s;z-index:100}.toast.show{transform:translate(-50%,0);opacity:1}
@media(max-width:1180px){.recent-grid{grid-template-columns:repeat(2,1fr)}.library-grid{grid-template-columns:repeat(4,1fr)}.hero{grid-template-columns:1fr .72fr}.hero-copy h2{font-size:44px}}
@media(max-width:820px){.app{display:block}.sidebar{display:none}.main{padding:0 17px 104px}.topbar{height:86px;margin-bottom:20px}.topbar h1{font-size:22px}.actions .primary-btn,.actions .interest-head{display:none}.hero{grid-template-columns:1fr;min-height:0}.hero-art{min-height:170px;order:-1}.hero-art:after{background:linear-gradient(180deg,transparent 50%,var(--panel) 100%)}.hero-copy{padding:23px}.hero-copy h2{font-size:34px}.hero-copy p{font-size:12px}.recent-grid{grid-template-columns:1fr}.media-card{grid-template-columns:80px 1fr}.stats{grid-template-columns:repeat(2,1fr)}.stat-card{padding:17px}.stat-pop{position:fixed;left:14px;right:14px;bottom:95px;width:auto;transform:translateY(10px)}.stat-card:hover .stat-pop{opacity:0;pointer-events:none}.stat-card.open .stat-pop{opacity:1;pointer-events:auto;transform:none}.stat-detail{display:block}.donut{display:none}.legend{gap:9px}.legend-row{grid-template-columns:1fr auto auto;font-size:11px}.mobile-nav{display:grid;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));height:68px;grid-template-columns:repeat(5,1fr);background:rgba(18,21,26,.92);border:1px solid #303640;border-radius:21px;backdrop-filter:blur(22px);z-index:30;box-shadow:0 18px 48px rgba(0,0,0,.46)}.mobile-nav button{border:0;background:none;color:var(--muted);display:grid;place-items:center;align-content:center;gap:2px;font-size:16px}.mobile-nav button.active{color:var(--text)}.mobile-nav small{font-size:9px}.mobile-nav .plus{width:52px;height:52px;border-radius:50%;place-self:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#111;font-size:24px;transform:translateY(-15px)}.toolbar,.library-controls{flex-direction:column;align-items:stretch}.search-field{min-width:0;width:100%}.library-grid{grid-template-columns:repeat(3,1fr);gap:9px}.chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}.timeline-item{grid-template-columns:46px 48px 1fr;gap:9px}.detail-hero{grid-template-columns:105px 1fr;gap:16px;padding:15px}.detail-meta h2{font-size:23px}.detail-actions{flex-wrap:wrap}.info-grid{grid-template-columns:1fr}.info-grid div:nth-child(odd){border-right:0}.info-grid div:nth-last-child(-n+2){border-bottom:1px solid var(--line)}.info-grid div:last-child{border-bottom:0}.record-entry{grid-template-columns:1fr;gap:5px}.record-form{grid-template-columns:1fr}.record-form .full,.auto-info{grid-column:auto}.preset-row{grid-template-columns:1fr}.interest-card{grid-template-columns:1fr}.interest-meta{text-align:left}.dialog-card{padding:17px}}
@media(max-width:520px){.top-actions .icon-btn{display:none}.hero-copy h2{font-size:30px}.library-grid{grid-template-columns:repeat(2,1fr)}.detail-hero{grid-template-columns:90px 1fr}.stats{gap:8px}.stat-card b{font-size:22px}}

/* v2.1 visual pass */
.sidebar{padding:26px 18px;background:color-mix(in srgb,var(--bg) 94%,transparent)}
.brand-mark{background:var(--text);color:var(--bg);border-radius:11px}
.nav button span,.categories button .cat-icon{width:22px;height:22px;display:grid;place-items:center}
.nav svg,.cat-icon svg,.subicon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.categories .label{letter-spacing:.18em}
.main{padding-left:48px;padding-right:48px}
.topbar{height:92px;margin-bottom:34px}
.actions .icon-btn{background:transparent}
.hero{min-height:360px;border-radius:28px;background:var(--panel);grid-template-columns:1.08fr .92fr}
.hero-copy{padding:46px 44px}
.hero-copy h2{max-width:650px}
.hero-art{min-height:360px;overflow:hidden;background:linear-gradient(145deg,var(--panel2),var(--panel3))}
.hero-art:after{background:linear-gradient(90deg,var(--panel) 0%,color-mix(in srgb,var(--panel) 60%,transparent) 16%,transparent 54%)}
.hero-visual{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:36px 42px 36px 72px}
.hero-spot{width:min(250px,66%);aspect-ratio:2/3;border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.38);transform:rotate(2.5deg);overflow:hidden}
.hero-spot .cover{width:100%;height:100%;border-radius:22px}
.hero-source{position:absolute;right:20px;bottom:16px;z-index:4;font-size:9px;letter-spacing:.06em;color:rgba(255,255,255,.72);background:rgba(8,10,13,.42);backdrop-filter:blur(9px);padding:7px 9px;border-radius:999px}
body[data-theme="ocean"] .hero-source{color:#385661;background:rgba(255,255,255,.72)}
.section-head{margin-top:44px}
.recent-grid{gap:18px}
.media-card{border-color:transparent;background:transparent;padding:0;grid-template-columns:104px 1fr;gap:16px}
.media-card:hover{background:var(--panel2);padding:10px;margin:-10px;transform:none}
.media-card .cover{border-radius:15px}
.stats{margin-top:28px;gap:14px}
.stat-card{background:transparent;border-top:1px solid var(--line);border-left:0;border-right:0;border-bottom:0;border-radius:0;padding:20px 4px;min-height:80px}
.stat-card b{font-size:31px;letter-spacing:-.04em}
.stat-pop{width:390px;padding:18px 18px 16px;border-radius:20px;background:color-mix(in srgb,var(--panel) 97%,transparent)}
.stat-pop h4{font-size:13px;margin-bottom:14px}
.stat-bars{display:grid;gap:10px}
.stat-row{display:grid;grid-template-columns:26px 48px 1fr 34px;gap:8px;align-items:center}
.stat-row .stat-icon{width:26px;height:26px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;color:var(--soft)}
.stat-row .stat-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.stat-row label{font-size:10px;color:var(--soft)}
.stat-row .track{height:7px;background:var(--panel3);border-radius:999px;overflow:hidden}
.stat-row .fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.stat-row strong{font-size:10px;text-align:right}
.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat-mini{border:1px solid var(--line);background:var(--panel2);border-radius:13px;padding:10px;min-height:86px;display:flex;flex-direction:column;justify-content:space-between}
.stat-mini .mini-top{display:flex;justify-content:space-between;gap:6px;align-items:center}
.stat-mini .mini-icon{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;background:var(--panel3);color:var(--soft)}
.stat-mini .mini-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.stat-mini b{font-size:17px}
.stat-mini small{font-size:9px;color:var(--muted)}
.stat-mini .micro{height:4px;background:var(--panel3);border-radius:999px;overflow:hidden}
.stat-mini .micro i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:999px}
.preset-row,.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.choice{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:13px;text-align:left;color:var(--text)}
.choice.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 38%,transparent)}
.choice b{display:block;font-size:12px}.choice small{font-size:9px;color:var(--muted)}
.order-row span:first-child{display:flex;align-items:center;gap:9px}.order-row span:first-child svg{width:17px;height:17px;fill:none;stroke:var(--soft);stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
body[data-theme="ocean"] .dialog-card{background:#fff;border-color:var(--line)}
body[data-theme="ocean"] .stat-pop{background:rgba(255,255,255,.985);border-color:#c7dde1;box-shadow:0 30px 80px rgba(45,82,91,.28),0 0 0 1px rgba(255,255,255,.7)}
body[data-theme="ocean"] .primary-btn{color:#143036}
body[data-theme="ocean"] .chip.active{color:#143036}
body[data-theme="ocean"] .hero-art:after{background:linear-gradient(90deg,var(--panel) 0%,rgba(255,255,255,.65) 16%,transparent 56%)}
@media(max-width:820px){
  .main{padding-left:17px;padding-right:17px}
  .hero{min-height:0}
  .hero-art{min-height:210px}
  .hero-visual{padding:30px 60px}
  .hero-spot{width:132px;border-radius:16px}
  .hero-spot .cover{border-radius:16px}
  .hero-source{right:12px;bottom:10px}
  .media-card{grid-template-columns:82px 1fr}
  .stat-pop{width:auto}
  .stat-cards{grid-template-columns:repeat(2,1fr)}
}


/* v2.3 — visual fidelity pass based on the approved "밤의 아카이브" reference */
:root{--max:1540px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body[data-theme="dark"]{--bg:#090d12;--panel:#0e141b;--panel2:#121923;--panel3:#18212d;--text:#f5f7fb;--soft:#b9c1cc;--muted:#727d8a;--line:#26313d;--accent:#8ccff5;--accent2:#a690ff;--accent3:#70e1d1}
.app{grid-template-columns:216px minmax(0,1fr);min-height:100vh;background:radial-gradient(circle at 84% 7%,rgba(79,109,170,.10),transparent 23%),linear-gradient(180deg,#0b1118 0%,var(--bg) 45%,#080c11 100%)}
.sidebar{padding:28px 24px 24px;background:linear-gradient(180deg,rgba(10,15,21,.985),rgba(9,13,18,.97));border-right:1px solid #26313b}
.brand{padding:3px 0 17px;margin-bottom:10px;gap:13px}.brand-mark{width:42px;height:34px;border-radius:0;background:none;color:var(--text);display:grid;place-items:center}.brand-mark svg{width:42px;height:34px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}.brand-copy strong{font-family:Georgia,'Times New Roman',serif;font-size:23px;letter-spacing:.01em;font-weight:500}.brand-copy small{display:none}
.nav,.categories{gap:3px}.nav button,.categories button{min-height:46px;padding:0 13px;border-radius:10px;color:#d2d8df;font-size:14px;font-weight:500}.nav button b,.categories button b{font-weight:520}.nav button.active,.nav button:hover,.categories button:hover{background:linear-gradient(90deg,#273140,#1c252f);color:#fff;box-shadow:inset 2px 0 0 #9bc7ff}.nav svg,.cat-icon svg{width:19px;height:19px;stroke-width:1.7}.categories{margin-top:15px;padding-top:14px}.categories .label{display:none}.sidebar:after{content:"좋은 이야기가\A 더 좋은 내일을 만든다.\A\A A MORE ME,\A THROUGH GOOD STORIES.";white-space:pre;display:block;margin-top:auto;padding:0 7px;color:#7c8795;font-size:11px;line-height:1.65;letter-spacing:.02em}.sidebar-bottom{display:none}
.main{width:100%;max-width:none;padding:0 26px 54px 18px;margin:0}.topbar{height:88px;margin:0;padding:0 8px 0 16px;border-bottom:0;gap:22px}.top-search{width:min(610px,58vw);height:46px;border:1px solid #2a3440;border-radius:24px;background:rgba(18,24,33,.72);color:#798592;display:flex;align-items:center;gap:12px;padding:0 16px;text-align:left;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}.top-search:hover{border-color:#3b4c5f;color:#aeb8c4}.top-search-icon{font-size:24px;line-height:1;color:#e2e7ec;transform:rotate(-14deg)}.top-search span:nth-child(2){font-size:12px;flex:1}.top-search kbd{font:10px/1 Inter,sans-serif;color:#818c98;border:1px solid #2c3743;background:#141b24;border-radius:6px;padding:4px 6px}.actions{margin-left:auto;gap:12px}.circle-add{width:46px;height:46px;border-radius:50%;border:1px solid #354252;background:linear-gradient(180deg,#19222e,#111821);font-size:25px;font-weight:300;color:#f4f7fb;box-shadow:0 10px 30px rgba(0,0,0,.22)}.circle-add:hover{border-color:#8db9ed;box-shadow:0 0 0 3px rgba(112,157,215,.08)}.top-divider{height:27px;width:1px;background:#313a45;margin:0 2px}.settings-top{width:44px;height:44px;border:0;background:transparent;font-size:20px;color:#eff3f7}.settings-top:hover{background:#151d26}
.view{max-width:1180px;margin:0 auto}.view[data-view="home"]{max-width:1180px}
.hero{position:relative;display:block;min-height:292px;border-radius:12px;border:1px solid #2a3642;background:#0d141c;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.18)}.hero-copy{position:relative;z-index:3;width:56%;min-height:292px;padding:48px 44px;justify-content:center;align-items:flex-start}.hero-copy .eyebrow{display:none}.hero-copy h2{font-family:"Noto Serif KR",Georgia,"Times New Roman",serif;font-weight:500;font-size:35px;line-height:1.34;letter-spacing:-.035em;margin:0 0 13px;max-width:500px;text-shadow:0 3px 20px rgba(0,0,0,.35)}.hero-copy p{font-size:13px;line-height:1.75;color:#c5cbd3;max-width:430px}.hero-copy:after{content:"ARCHIVE\A FOR A BETTER TOMORROW.";white-space:pre;display:block;margin-top:28px;padding-top:17px;width:190px;border-top:1px solid rgba(255,255,255,.75);font-size:9px;line-height:1.7;letter-spacing:.22em;color:#9ba5b0}.hero-art{position:absolute;inset:0;min-height:0;background-size:cover!important;background-position:center!important;transition:background-image .35s ease}.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,9,14,.45) 0%,rgba(5,9,14,.10) 65%,rgba(5,9,14,.15) 100%);pointer-events:none}.hero-visual{display:none}.hero-source{right:18px;bottom:14px;background:rgba(6,10,15,.58);border:1px solid rgba(255,255,255,.08);font-size:8px;color:#b6c0ca;opacity:.7}.hero-controls{top:13px;right:13px;opacity:0;transition:.18s}.hero:hover .hero-controls{opacity:1}.hero-controls button{background:rgba(9,13,18,.74);border-color:rgba(255,255,255,.11);font-size:10px}
.section-head{margin:28px 0 12px;align-items:center}.section-head .eyebrow{display:none}.section-head h2{font-size:21px;letter-spacing:-.035em;margin:0}.section-head .text-btn{font-size:11px;color:#aab4bf;padding-right:0}.recent-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.media-card{display:block!important;padding:0!important;margin:0!important;border:1px solid #293541!important;background:#0f151d!important;border-radius:11px!important;overflow:hidden;min-width:0;box-shadow:none;transition:.18s}.media-card:hover{transform:translateY(-2px)!important;border-color:#42546a!important;background:#111923!important}.media-art{position:relative;width:100%;aspect-ratio:1.45/1;background-size:cover;background-position:center;overflow:hidden}.media-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,10,15,.40) 100%)}.media-category{position:absolute;left:12px;bottom:10px;z-index:2;padding:4px 7px;border-radius:7px;background:rgba(11,16,22,.68);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.10);font-size:9px;color:#d6dde5}.media-copy{padding:11px 13px 13px}.media-copy .kicker{display:none}.media-copy h3{font-size:14px;margin:0 0 6px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-copy p{display:none}.media-copy small{font-size:10px;color:#788493}
.stats{margin-top:24px;padding-top:24px;border-top:1px solid #26313b;grid-template-columns:1fr 1fr;gap:16px}.stat-card{position:relative;display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:17px;min-height:158px;padding:22px 28px;border:1px solid #2a3745!important;border-radius:11px!important;background:radial-gradient(circle at 92% 82%,rgba(67,92,136,.14),transparent 31%),linear-gradient(145deg,#121b26,#0d141c 70%)!important;text-align:left;overflow:visible}.stat-card:hover{border-color:#6f9bcb!important;box-shadow:0 0 0 1px rgba(95,140,196,.25),0 15px 40px rgba(0,0,0,.22)}.stat-main-icon{width:48px;height:48px;display:grid;place-items:center;font-size:35px;color:#eef4fb;opacity:.95}.stat-copy{display:flex;flex-direction:column;align-items:flex-start}.stat-label{font-size:14px!important;color:#edf2f7!important;margin-bottom:5px}.stat-copy b{font-size:39px;line-height:1;font-weight:500;letter-spacing:-.04em}.stat-copy small{font-size:10px;color:#778493;margin-top:12px}.stat-arrow{font-size:30px;color:#dce5ed;font-weight:200;opacity:.9}.stat-pop{left:50%;bottom:calc(100% + 10px);transform:translate(-50%,7px);width:420px;padding:18px 19px 17px;border:1px solid #52779f;background:rgba(17,25,35,.995)!important;border-radius:18px;box-shadow:0 30px 75px rgba(0,0,0,.62),0 0 0 1px rgba(123,171,226,.08);backdrop-filter:none}.stat-card:hover .stat-pop,.stat-card.open .stat-pop{transform:translate(-50%,0)}.stat-pop:after{content:"";position:absolute;left:50%;top:100%;width:12px;height:12px;background:#111923;border-right:1px solid #52779f;border-bottom:1px solid #52779f;transform:translate(-50%,-6px) rotate(45deg)}.stat-row{grid-template-columns:27px 48px 1fr 36px}.stat-row .track{height:7px;background:#263241}.stat-row .fill{background:linear-gradient(90deg,#70e3dc,#89bcff 60%,#aa88ff)}
.dialog-card{background:#0e151d;border-color:#2b3744}.dialog-card header{position:sticky;top:-22px;padding-top:22px;background:linear-gradient(#0e151d 83%,transparent);z-index:3}.search-field{background:#101821;border-color:#2a3641}.library-card,.interest-card{background:#0f161e;border-color:#293540}.library-card:hover,.interest-card:hover{border-color:#44576b}.detail-hero{background:#0f161e;border-color:#2b3744}
body[data-theme="ocean"] .app{background:linear-gradient(180deg,#f7fcfd,#eff8fa)}body[data-theme="ocean"] .sidebar{background:rgba(247,252,253,.96);border-color:#d6e8eb}body[data-theme="ocean"] .nav button,body[data-theme="ocean"] .categories button{color:#4b6872}body[data-theme="ocean"] .hero{background:#dceff2;border-color:#c7e0e5}body[data-theme="ocean"] .hero-copy h2,body[data-theme="ocean"] .hero-copy p{color:#16323b;text-shadow:none}body[data-theme="ocean"] .hero-copy:after{color:#58747e;border-color:#6d8790}body[data-theme="ocean"] .hero-art:after{background:linear-gradient(90deg,rgba(241,250,251,.88),rgba(241,250,251,.28) 48%,rgba(241,250,251,.05))}body[data-theme="ocean"] .media-card{background:#fff!important;border-color:#d6e8eb!important}body[data-theme="ocean"] .stat-card{background:linear-gradient(145deg,#fff,#edf8fa)!important;border-color:#d2e6e9!important}body[data-theme="ocean"] .stat-label,body[data-theme="ocean"] .stat-copy b{color:#17303a!important}body[data-theme="ocean"] .stat-copy small{color:#6c8790}body[data-theme="ocean"] .stat-main-icon,body[data-theme="ocean"] .stat-arrow{color:#52727d}body[data-theme="ocean"] .stat-pop{background:rgba(255,255,255,.995)!important;border-color:#a8ccd3;box-shadow:0 28px 70px rgba(61,100,110,.23)}body[data-theme="ocean"] .stat-pop:after{background:#fff;border-color:#a8ccd3}
@media(max-width:1180px){.recent-grid{grid-template-columns:repeat(2,1fr)}.view,.view[data-view="home"]{max-width:960px}.hero-copy{width:64%}.top-search{width:min(520px,52vw)}}
@media(max-width:820px){.app{display:block}.main{padding:0 14px 96px}.topbar{height:74px;padding:0 2px}.top-search{width:calc(100% - 106px);height:42px}.top-search kbd,.top-search span:nth-child(2){display:none}.top-search:after{content:"검색";font-size:12px;color:#8b96a2}.actions{gap:6px}.top-divider{display:none}.circle-add{display:none}.settings-top{width:40px;height:40px}.hero{min-height:360px}.hero-copy{width:100%;min-height:360px;padding:36px 26px 28px;justify-content:flex-end;background:linear-gradient(180deg,rgba(6,10,15,.06) 20%,rgba(6,10,15,.84) 74%)}.hero-copy h2{font-size:29px;line-height:1.35}.hero-copy p{font-size:11px}.hero-copy:after{margin-top:20px}.hero-controls{opacity:1}.hero-source{display:none}.section-head{margin-top:25px}.recent-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.media-art{aspect-ratio:1.1/1}.media-copy{padding:9px 10px 10px}.media-copy h3{font-size:12px}.stats{grid-template-columns:1fr 1fr;gap:9px}.stat-card{min-height:118px;grid-template-columns:1fr;padding:16px;gap:5px}.stat-main-icon,.stat-copy small,.stat-arrow{display:none}.stat-copy b{font-size:30px}.stat-label{font-size:11px!important}.stat-pop{position:fixed;left:14px;right:14px;bottom:92px;width:auto;transform:translateY(10px);z-index:100}.stat-card.open .stat-pop{transform:none}.stat-pop:after{display:none}.mobile-nav{background:rgba(10,15,21,.95);border-color:#2d3946}.sidebar:after{display:none}}
@media(max-width:520px){.recent-grid{grid-template-columns:1fr 1fr}.media-category{font-size:8px}.stats{grid-template-columns:1fr 1fr}.stat-card{padding:14px 12px}.stat-copy b{font-size:28px}.hero-copy h2{font-size:27px}}


/* v2.4 — lighter home density and quieter add flow */
.sidebar:after{display:none!important;content:none!important}
.hero-copy:after{display:none!important;content:none!important}
.hero-english{display:block;margin:24px 0 0!important;padding-top:15px;border-top:1px solid rgba(255,255,255,.64);width:min(220px,80%);font-size:9px!important;line-height:1.7!important;letter-spacing:.18em;color:#9ba5b0!important;text-transform:uppercase}
.hero-english[hidden]{display:none!important}
body[data-theme="ocean"] .hero-english{color:#58747e!important;border-color:#6d8790}
.recent-grid{display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:clamp(190px,18vw,218px);gap:12px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline proximity;padding:0 0 7px;scrollbar-width:thin;scrollbar-color:#354354 transparent}
.recent-grid .media-card{scroll-snap-align:start}
.recent-grid::-webkit-scrollbar{height:5px}.recent-grid::-webkit-scrollbar-track{background:transparent}.recent-grid::-webkit-scrollbar-thumb{background:#354354;border-radius:999px}
.media-art{aspect-ratio:1.38/1}
.stats{margin-top:18px;padding-top:18px;gap:12px}
.stat-card{grid-template-columns:44px 1fr auto;gap:13px;min-height:112px;padding:16px 20px}
.stat-main-icon{width:38px;height:38px;font-size:28px}.stat-copy b{font-size:34px}.stat-copy small{margin-top:7px}.stat-arrow{font-size:25px}
.record-empty{padding:16px 4px;color:var(--muted);font-size:12px;text-align:center}
#recordResults:empty{display:none}
#dynamicRecordForm:empty{display:none}
.hero-setting #heroEnglishInput{width:100%;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:12px;padding:11px 12px;outline:none}
@media(max-width:820px){.recent-grid{grid-template-columns:none!important;grid-auto-columns:minmax(158px,43vw);gap:9px}.stat-card{min-height:92px;padding:13px 14px;grid-template-columns:1fr}.stat-copy b{font-size:28px}.stats{margin-top:16px;padding-top:16px}.hero-english{margin-top:18px!important}}

/* v2.5 — home vertical proportion pass */
@media(min-width:821px){
  .view[data-view="home"]{min-height:calc(100vh - 142px);display:flex;flex-direction:column}
  .view[data-view="home"] .hero{min-height:clamp(350px,39vh,430px)}
  .view[data-view="home"] .hero-copy{min-height:clamp(350px,39vh,430px);padding-top:52px;padding-bottom:52px}
  .view[data-view="home"] .section-head{margin-top:24px;margin-bottom:11px}
  .view[data-view="home"] .recent-grid{grid-auto-columns:clamp(178px,16.7vw,205px);gap:11px;padding-bottom:6px}
  .view[data-view="home"] .media-art{aspect-ratio:1.46/1}
  .view[data-view="home"] .media-copy{padding:9px 11px 10px}
  .view[data-view="home"] .media-copy h3{font-size:13px;margin-bottom:4px}
  .view[data-view="home"] .stats{margin-top:13px;padding-top:13px;gap:10px}
  .view[data-view="home"] .stat-card{min-height:76px;padding:10px 15px;grid-template-columns:32px 1fr auto;gap:10px;border-radius:10px!important}
  .view[data-view="home"] .stat-main-icon{width:28px;height:28px;font-size:21px}
  .view[data-view="home"] .stat-label{font-size:12px!important;margin-bottom:2px}
  .view[data-view="home"] .stat-copy b{font-size:27px}
  .view[data-view="home"] .stat-copy small{font-size:9px;margin-top:3px}
  .view[data-view="home"] .stat-arrow{font-size:21px}
}
@media(min-width:1450px){
  .view[data-view="home"] .recent-grid{grid-auto-columns:clamp(170px,14.4vw,198px)}
}
@media(max-width:820px){
  .view[data-view="home"] .hero{min-height:390px}
  .view[data-view="home"] .hero-copy{min-height:390px}
  .view[data-view="home"] .stat-card{min-height:78px;padding:11px 12px}
}


/* v2.7 — wide desktop balance pass */
@media(min-width:821px){
  /* Use large desktop real estate without changing the approved hero height. */
  .main{padding-left:clamp(24px,2.1vw,50px);padding-right:clamp(24px,2.1vw,50px)}
  .view{max-width:1480px}
  .view[data-view="home"]{max-width:1880px;width:100%}

  /* Center search inside the main content area, independent of right-side actions. */
  .topbar{position:relative;justify-content:flex-end}
  .top-search{position:absolute;left:50%;transform:translateX(-50%);width:min(680px,48vw)}

  /* Keep hero height, increase visual weight below it instead. */
  .view[data-view="home"] .hero{min-height:clamp(350px,39vh,430px)}
  .view[data-view="home"] .hero-copy{min-height:clamp(350px,39vh,430px)}

  /* Larger recent cards; 5–6 are naturally visible on wide desktop screens. */
  .view[data-view="home"] .recent-grid{grid-auto-columns:clamp(230px,16vw,290px);gap:14px;padding-bottom:7px}
  .view[data-view="home"] .media-art{aspect-ratio:1.42/1}
  .view[data-view="home"] .media-copy{padding:11px 13px 12px}
  .view[data-view="home"] .media-copy h3{font-size:14px;margin-bottom:5px}
  .view[data-view="home"] .media-copy small{font-size:10px}

  /* Stats come back up slightly from v2.5, while staying secondary to Recent. */
  .view[data-view="home"] .stats{margin-top:17px;padding-top:17px;gap:14px}
  .view[data-view="home"] .stat-card{min-height:94px;padding:14px 19px;grid-template-columns:38px 1fr auto;gap:12px;border-radius:11px!important}
  .view[data-view="home"] .stat-main-icon{width:34px;height:34px;font-size:25px}
  .view[data-view="home"] .stat-label{font-size:12px!important;margin-bottom:3px}
  .view[data-view="home"] .stat-copy b{font-size:31px}
  .view[data-view="home"] .stat-copy small{font-size:9px;margin-top:5px}
  .view[data-view="home"] .stat-arrow{font-size:23px}
}
@media(min-width:1900px){
  .view[data-view="home"] .recent-grid{grid-auto-columns:clamp(250px,12.1vw,290px)}
}
@media(min-width:821px) and (max-width:1180px){
  .top-search{width:min(520px,52vw)}
  .view[data-view="home"]{max-width:1040px}
  .view[data-view="home"] .recent-grid{grid-auto-columns:clamp(205px,22vw,240px)}
}


/* v2.7 — single global add action and calmer settings */
.settings-shell{width:min(660px,calc(100vw - 28px))}
.settings-list{display:grid;gap:10px;margin-top:18px}
.settings-group{border:1px solid var(--line);border-radius:15px;background:var(--panel);overflow:hidden}
.settings-group summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 16px;cursor:pointer;user-select:none}
.settings-group summary::-webkit-details-marker{display:none}
.settings-group summary span{display:grid;gap:3px;text-align:left}.settings-group summary b{font-size:13px}.settings-group summary small{font-size:10px;color:var(--muted);font-weight:500}.settings-group summary strong{font-size:11px;color:var(--soft);font-weight:700}
.settings-group[open] summary{border-bottom:1px solid var(--line)}
.settings-panel{padding:15px 16px;background:color-mix(in srgb,var(--panel2) 68%,var(--panel) 32%)}
.settings-label{display:grid;gap:7px;color:var(--muted);font-size:10px}.settings-label textarea,.settings-label input{width:100%;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:11px;padding:10px 11px;outline:none}
.settings-subgroups{display:grid;gap:18px}.settings-subgroup{display:grid;gap:9px}.subgroup-head{display:flex;justify-content:space-between;align-items:center}.subgroup-head b{font-size:11px}.subgroup-head small{font-size:9px;color:var(--muted)}
#menuOrder .order-row{grid-template-columns:1fr auto auto}
@media(max-width:820px){.settings-group summary{padding:14px}.settings-panel{padding:13px}.settings-shell{width:calc(100vw - 22px)}}


/* v2.8 — dedicated search page + memo-first record flow */
.search-page{max-width:1180px;margin:0 auto}.search-page-head{display:grid;gap:16px;margin:6px 0 24px}.search-page-head h2{font-size:32px;margin:4px 0 0}.global-search-box{height:58px;border:1px solid var(--line);background:var(--panel);border-radius:18px;display:flex;align-items:center;gap:12px;padding:0 18px}.global-search-box .search-glyph{font-size:25px;color:var(--soft);line-height:1}.global-search-box input{flex:1;border:0;outline:0;background:transparent;color:var(--text);font-size:16px}.global-search-box small{color:var(--muted);white-space:nowrap}.global-search-meta{font-size:11px;color:var(--muted)}
.global-search-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.global-result{border:1px solid var(--line);background:var(--panel);border-radius:17px;padding:12px;display:grid;grid-template-columns:72px 1fr auto;gap:13px;align-items:center;text-align:left;transition:.15s}.global-result:hover{transform:translateY(-2px);border-color:#3d4855}.global-result .cover{width:72px}.global-result h3{font-size:15px;margin:0 0 5px}.global-result p{font-size:11px;color:var(--soft);margin:0 0 7px}.global-result small{font-size:10px;color:var(--muted)}.global-result .result-arrow{font-size:24px;color:var(--muted)}.search-empty{border:1px dashed var(--line);border-radius:18px;padding:38px 22px;text-align:center;color:var(--muted);font-size:12px;grid-column:1/-1}.search-empty b{display:block;color:var(--soft);font-size:14px;margin-bottom:6px}
.quick-record{display:grid;gap:13px;margin-top:18px}.quick-record-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}.quick-record label{display:grid;gap:7px;color:var(--muted);font-size:11px}.quick-record input,.quick-record select,.quick-record textarea{width:100%;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:12px;padding:12px;outline:0}.quick-record textarea{min-height:118px;resize:vertical}.quick-record .title-wrap{position:relative}.link-assist{display:grid;gap:7px;margin-top:-4px}.link-assist-label{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px}.link-assist-results{display:grid;gap:7px}.link-assist-results:empty{display:none}.link-candidate{border:1px solid var(--line);background:var(--panel2);border-radius:12px;padding:9px 10px;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;text-align:left}.link-candidate:hover{border-color:#455260}.link-candidate .cover{width:42px}.link-candidate b{font-size:12px}.link-candidate small{display:block;font-size:9px;color:var(--muted);margin-top:3px}.link-candidate em{font-style:normal;font-size:10px;color:var(--accent)}.linked-work{border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));background:color-mix(in srgb,var(--accent) 5%,var(--panel));border-radius:12px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px}.linked-work strong{color:var(--text)}.linked-work button{border:0;background:none;color:var(--muted);font-size:10px}.quick-details{border-top:1px solid var(--line);padding-top:12px}.quick-details summary{cursor:pointer;color:var(--soft);font-size:11px;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:3px 0}.quick-details summary::-webkit-details-marker{display:none}.quick-details summary:after{content:'＋';color:var(--muted)}.quick-details[open] summary:after{content:'−'}.quick-extra{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:12px}.quick-extra .full{grid-column:1/-1}.record-hint{font-size:10px;line-height:1.55;color:var(--muted);padding:9px 11px;border-left:2px solid var(--line)}
@media(max-width:820px){.global-search-results{grid-template-columns:1fr}.global-search-box{height:52px;padding:0 14px}.global-search-box small{display:none}.search-page-head h2{font-size:26px}.quick-record-row,.quick-extra{grid-template-columns:1fr}.quick-extra .full{grid-column:auto}.global-result{grid-template-columns:58px 1fr auto}.global-result .cover{width:58px}}


/* v2.9 — settings panel visibility / contrast pass */
.settings-group{transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.settings-group[open]{
  border-color:#3b4857;
  background:#10161d;
  box-shadow:0 14px 34px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.018);
}
.settings-group[open] summary{
  background:#151c24;
  border-bottom:1px solid #3a4754;
}
.settings-group[open] summary b{color:#f2f5f8}
.settings-group[open] summary small{color:#9aa6b2}
.settings-group[open] summary strong{color:#d9e1e8}
.settings-panel{
  background:#0d131a;
  padding:18px 18px 19px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.settings-panel .settings-label{color:#aab4bf;font-weight:650}
.settings-panel .settings-label textarea,
.settings-panel .settings-label input,
.settings-panel .hero-setting textarea,
.settings-panel .hero-setting input[type=file],
.settings-panel #heroEnglishInput{
  background:#151c24!important;
  border-color:#3a4653!important;
  color:#f1f4f7!important;
}
.settings-panel .settings-label textarea:focus,
.settings-panel .settings-label input:focus,
.settings-panel #heroEnglishInput:focus{
  border-color:#71879a!important;
  box-shadow:0 0 0 3px rgba(113,135,154,.13);
}
.settings-panel .preset,
.settings-panel .choice,
.settings-panel .order-row{
  background:#151c24;
  border-color:#36424f;
}
.settings-panel .preset:hover,
.settings-panel .choice:hover,
.settings-panel .order-row:hover{
  border-color:#536475;
  background:#18212b;
}
.settings-panel .preset.active,
.settings-panel .choice.active{
  border-color:#8da1b3;
  background:#1a242e;
  box-shadow:inset 0 0 0 1px rgba(180,197,212,.17);
}
.settings-panel .preset small,
.settings-panel .choice small,
.settings-panel .subgroup-head small{color:#98a5b2}
.settings-panel .subgroup-head b{color:#e5eaf0;font-size:12px}
.settings-panel .order-row button{background:#202a35;border-color:#42515f}
.settings-panel .drag-handle{color:#9ba8b4}
.settings-panel .form-note{color:#a0acb7;line-height:1.65}

body[data-theme="ocean"] .settings-group[open]{
  border-color:#9fc5cc;
  background:#f6fbfc;
  box-shadow:0 14px 34px rgba(62,101,111,.10),inset 0 0 0 1px rgba(255,255,255,.7);
}
body[data-theme="ocean"] .settings-group[open] summary{
  background:#eaf5f7;
  border-bottom-color:#a9ccd2;
}
body[data-theme="ocean"] .settings-group[open] summary b{color:#17303a}
body[data-theme="ocean"] .settings-group[open] summary small{color:#587681}
body[data-theme="ocean"] .settings-group[open] summary strong{color:#365d68}
body[data-theme="ocean"] .settings-panel{background:#f8fcfd}
body[data-theme="ocean"] .settings-panel .settings-label{color:#4d6974}
body[data-theme="ocean"] .settings-panel .settings-label textarea,
body[data-theme="ocean"] .settings-panel .settings-label input,
body[data-theme="ocean"] .settings-panel .hero-setting textarea,
body[data-theme="ocean"] .settings-panel .hero-setting input[type=file],
body[data-theme="ocean"] .settings-panel #heroEnglishInput{
  background:#ffffff!important;
  border-color:#bfd9de!important;
  color:#17303a!important;
}
body[data-theme="ocean"] .settings-panel .preset,
body[data-theme="ocean"] .settings-panel .choice,
body[data-theme="ocean"] .settings-panel .order-row{
  background:#ffffff;
  border-color:#c4dde1;
}
body[data-theme="ocean"] .settings-panel .preset:hover,
body[data-theme="ocean"] .settings-panel .choice:hover,
body[data-theme="ocean"] .settings-panel .order-row:hover{background:#eff8fa;border-color:#8fbfc7}
body[data-theme="ocean"] .settings-panel .preset.active,
body[data-theme="ocean"] .settings-panel .choice.active{background:#e9f7f8;border-color:#63bdbd}
body[data-theme="ocean"] .settings-panel .subgroup-head b{color:#254955}
body[data-theme="ocean"] .settings-panel .subgroup-head small,
body[data-theme="ocean"] .settings-panel .preset small,
body[data-theme="ocean"] .settings-panel .choice small{color:#63808a}
body[data-theme="ocean"] .settings-panel .order-row button{background:#edf7f8;border-color:#bad6db}
body[data-theme="ocean"] .settings-panel .form-note{color:#58747e}


.view[hidden]{display:none!important}
.empty-state{padding:32px;color:var(--muted)}
.entry-actions{display:flex;gap:10px;align-items:center}
.entry-actions button{cursor:pointer}

/* Page switching: only the active view occupies the shared main area. */
.main > .view:not(.active), .main > .view[hidden]{display:none!important}

.preview-notice{font-size:12px;color:var(--muted);margin:0 0 16px}
.preview-notice a{color:var(--accent);margin-left:8px}
.media-art.preview-art .preview-poster{height:100%;aspect-ratio:154/190;flex:none}

/* Match the spacing beneath the final visible category filter row. */
#videoSubfilters:not(.active) + #libraryGrid{margin-top:20px}

/* Category entry: show its own title instead of a second six-category filter. */
.category-context .tabs{display:none}
.category-heading{margin:0;font-size:23px;line-height:1.4;color:var(--text)}
#libraryFilters:has(.category-heading){margin-bottom:0}
#categoryNav [data-category].active{color:var(--text);background:var(--panel2)}
.timeline-date.sunday b,.timeline-date.sunday small{color:#e77878}
.timeline-date.saturday b,.timeline-date.saturday small{color:#75aef2}
body[data-theme="ocean"] .timeline-date.sunday b,body[data-theme="ocean"] .timeline-date.sunday small{color:#c94759}
body[data-theme="ocean"] .timeline-date.saturday b,body[data-theme="ocean"] .timeline-date.saturday small{color:#2869b4}

/* Keep the existing outlined sort control while using a native accessible menu. */
#sortBtn{color:var(--soft);background:var(--panel);cursor:pointer;font:inherit;min-width:122px}
#sortBtn option{background:var(--panel);color:var(--text)}
.category-context #categoryHeading{margin:4px 0 18px}
.date-entry{display:grid;grid-template-columns:83px minmax(0,1fr);gap:7px}
.date-entry input[hidden]{display:none}
.date-entry:has(input[hidden]){grid-template-columns:1fr}
#libraryGrid{margin-top:20px}
#videoSubfilters.active + #libraryGrid{margin-top:0}

/* Wide desktop: retain card widths while giving the Recent row even breathing room. */
@media(min-width:1450px){
  .view[data-view="home"] .recent-grid{
    gap:clamp(14px,.9vw,18px);
    padding-left:18px;
    padding-right:18px;
  }
}

/* Style the native sort select's picker where customizable selects are supported. */
@supports (appearance:base-select){
  #sortBtn,
  #sortBtn::picker(select){appearance:base-select}
  #sortBtn::picker(select){
    margin-top:6px;
    padding:6px;
    border:1px solid color-mix(in srgb,var(--line) 82%,var(--soft) 18%);
    border-radius:16px;
    background:var(--panel2);
    color:var(--text);
    box-shadow:0 18px 44px rgba(0,0,0,.34),0 2px 10px rgba(0,0,0,.14);
  }
  #sortBtn option{
    padding:10px 12px;
    border-radius:10px;
    background:transparent;
    color:var(--text);
  }
  #sortBtn option:hover,
  #sortBtn option:focus-visible{
    background:var(--panel3);
    outline:none;
  }
  #sortBtn option:checked{background:color-mix(in srgb,var(--accent) 14%,var(--panel2))}
  body[data-theme="ocean"] #sortBtn::picker(select){
    border-color:#c4dfe4;
    background:#fff;
    box-shadow:0 18px 40px rgba(57,104,115,.16),0 2px 9px rgba(57,104,115,.08);
  }
  body[data-theme="ocean"] #sortBtn option:hover,
  body[data-theme="ocean"] #sortBtn option:focus-visible{background:#eef8f9}
  body[data-theme="ocean"] #sortBtn option:checked{background:#e2f5f5}
}

/* One persistent search field serves the results page on every screen. */
.top-search input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-size:12px;
}
.top-search input::placeholder{color:var(--muted);opacity:1}
.top-search:focus-within{border-color:color-mix(in srgb,var(--accent) 65%,var(--line))}
.top-search input::-webkit-search-cancel-button{cursor:pointer}
.circle-add{display:grid;place-items:center;padding:0;line-height:1}

/* Ocean contrast, including the sticky settings header. */
body[data-theme="ocean"] .nav button,
body[data-theme="ocean"] .categories button{color:#385864}
body[data-theme="ocean"] .nav button.active,
body[data-theme="ocean"] .nav button:hover,
body[data-theme="ocean"] .categories button.active,
body[data-theme="ocean"] .categories button:hover{
  color:#17303a;
  background:#e5f3f5;
  box-shadow:inset 2px 0 0 #5bbfc2;
}
body[data-theme="ocean"] .top-search{
  background:#fff;
  border-color:#c7e1e5;
  box-shadow:0 3px 14px rgba(61,105,116,.07);
}
body[data-theme="ocean"] .top-search-icon{color:#365763}
body[data-theme="ocean"] .top-search kbd{
  color:#52717b;
  background:#f1f8f9;
  border-color:#d2e5e8;
}
body[data-theme="ocean"] .settings-top{color:#294a56}
body[data-theme="ocean"] .settings-top:hover{background:#e6f4f6}
body[data-theme="ocean"] .dialog-card header{
  background:linear-gradient(#fff 83%,transparent);
  color:#17303a;
}
body[data-theme="ocean"] .dialog-card header .icon-btn{
  color:#294a56;
  background:#fff;
  border-color:#d6e9ec;
}
@media(min-width:1450px){
  .library-grid{gap:clamp(14px,.9vw,18px)}
}
@media(max-width:820px){
  .top-search:after{content:none}
  .top-search input{font-size:12px}
}

/* Keep long-form notes comfortable to write and experience details readable. */
#recordDialog .quick-record label,
#recordDialog .quick-details summary{font-size:12px}
#recordDialog .quick-record input,
#recordDialog .quick-record select,
#recordDialog .quick-record textarea{font-size:14px}
#recordDialog .quick-record textarea{min-height:180px;line-height:1.6}
#recordDialog .link-assist-label,
#recordDialog .record-hint{font-size:11px}
.detail .record-entry time{font-size:12px}
.detail .record-entry strong{font-size:14px}
.detail .record-entry p{font-size:14px}
.detail .record-entry small,
.detail .entry-actions button{font-size:12px}

/* Slightly reduce the desktop statistics popover without shrinking its text. */
@media(min-width:821px){
  .view[data-view="home"] .stat-pop{width:370px;padding:15px 16px 14px}
  .view[data-view="home"] .stat-pop h4{font-size:14px;margin-bottom:11px}
  .view[data-view="home"] .stat-bars{gap:9px}
  .view[data-view="home"] .stat-row{grid-template-columns:30px 50px minmax(0,1fr) 38px;gap:9px}
  .view[data-view="home"] .stat-row .stat-icon{width:30px;height:30px;border-radius:9px}
  .view[data-view="home"] .stat-row .stat-icon svg{width:16px;height:16px}
  .view[data-view="home"] .stat-row label,
  .view[data-view="home"] .stat-row strong{font-size:11px}
  .view[data-view="home"] .stat-row .track{height:9px}
}

/* One experience can collect later notes without creating extra timeline rows. */
.experience-body{min-width:0}
.experience-detail{display:block;margin:5px 0 10px;color:var(--muted)}
.experience-notes{display:grid;gap:8px;margin-top:10px}
.experience-note{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel2) 72%,transparent)}
.experience-note p{margin:0;white-space:pre-wrap}
.experience-note small{display:block;margin-top:7px;color:var(--muted)}
.note-actions{display:flex;gap:10px;margin-top:7px}
.no-note{color:var(--muted)!important;font-style:italic}
.note-add-btn{color:var(--accent)!important}
.note-dialog-card{width:min(560px,calc(100vw - 28px))}
.note-editor{display:grid;gap:8px;margin-top:14px;font-size:12px;color:var(--soft)}
.note-editor textarea{min-height:220px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--text);font:inherit;font-size:14px;line-height:1.65;resize:vertical}

/* Tidemark: preserve the existing layout while bringing small text into a readable range. */
.brand-mark{width:45px;height:34px;flex:none;background:none!important}
.brand-mark img{display:block;width:45px;height:34px;object-fit:contain;filter:brightness(0) invert(1)}
body[data-theme="ocean"] .brand-mark img{filter:none}
.brand-copy strong{font-size:22px}
.section-head h2,.detail-section h3{font-size:20px}
.media-category{font-size:12px}
.media-copy h3{font-size:15px}
.media-copy small,.stat-copy small,.timeline-copy small,.global-result small,.interest-meta small{font-size:12px}
.library-card h3{font-size:15px}
.library-card p,.mini-status,.interest-card p,.interest-meta b,.timeline-copy p,.global-result p,.global-search-meta,.search-empty,.form-note{font-size:12px}
.detail .record-entry time,.detail .record-entry small,.detail .info-grid div,.detail-meta .subline,.detail-meta .creator{font-size:13px}
.detail .record-entry strong,.detail .record-entry p{font-size:14px}
.search-result small,.link-candidate small,.link-assist-label,.record-hint{font-size:12px}
.quick-record label,.quick-details summary,.quick-extra label,.record-form label,.record-form .auto-info{font-size:12px}
.top-search input{font-size:14px}

/* A date hint overlays empty native pickers; the platform picker and its stored ISO value remain intact. */
.date-entry{grid-template-columns:110px minmax(0,1fr)}
.date-input-wrap{position:relative;display:block;min-width:0}
.date-input-wrap input{width:100%;height:100%}
.date-placeholder{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:1;color:var(--muted);background:var(--panel);width:calc(100% - 46px);white-space:nowrap}
.date-input-wrap.has-value .date-placeholder,.date-input-wrap:focus-within .date-placeholder{display:none}
.date-entry:has(#quickDate[hidden]){grid-template-columns:1fr}
.date-entry:has(#quickDate[hidden]) .date-input-wrap{display:none}

/* Small icon actions live beside each experience or note. */
.entry-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.entry-icon-actions,.note-actions{display:flex;align-items:center;gap:5px}
.experience-note{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.experience-note .note-content{min-width:0;flex:1}
.note-actions{margin:0;flex:none}
.icon-action{display:inline-grid;place-items:center;width:34px;height:34px;padding:6px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--soft)}
.icon-action:hover,.icon-action:focus-visible{background:var(--panel3);border-color:var(--line);color:var(--text)}
.icon-action.danger-action:hover,.icon-action.danger-action:focus-visible{color:#e76770;border-color:color-mix(in srgb,#e76770 42%,var(--line));background:color-mix(in srgb,#e76770 10%,var(--panel))}
.icon-action:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.icon-action svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.detail-actions{align-items:center}
.detail-actions .icon-action{width:42px;height:42px;border-color:var(--line);background:var(--panel2)}
.note-add-btn{font-size:13px!important}

/* Tabs and top-level category chips share dimensions; video subfilters keep their own sizing. */
[data-library-tab],#libraryFilters .chip{min-height:38px;padding:8px 14px;border-radius:12px;font-size:13px;line-height:20px}
#videoSubfilters .chip{min-height:unset}

/* Settings remain compact while text and controls gain enough room to read. */
.settings-shell{width:min(620px,calc(100vw - 28px))}
.settings-list{gap:8px;margin-top:15px}
.settings-group summary{padding:13px 15px}
.settings-group summary b{font-size:14px}
.settings-group summary small,.settings-group summary strong,.settings-label,.settings-panel .subgroup-head small,.settings-panel .form-note{font-size:12px}
.settings-panel{padding:15px 16px 16px}
.settings-panel .preset,.settings-panel .choice{min-height:74px;padding:13px 14px}
.settings-panel .preset b,.settings-panel .choice b,.settings-panel .subgroup-head b{font-size:13px}
.settings-panel .preset small,.settings-panel .choice small{font-size:12px;line-height:1.45}
.settings-panel .settings-label textarea,.settings-panel .settings-label input,.settings-panel .hero-setting textarea,.settings-panel #heroEnglishInput{min-height:42px;font-size:13px;line-height:1.5}
.settings-panel .order-row{min-height:42px;font-size:13px}
.settings-panel .drag-handle{font-size:19px}
body[data-theme="ocean"] .date-placeholder{background:#fff}
body[data-theme="ocean"] .icon-action:hover,body[data-theme="ocean"] .icon-action:focus-visible{background:#e5f3f5}

@media(min-width:821px){
  .nav button,.categories button{font-size:14px}
  .view[data-view="home"] .media-copy h3{font-size:15px}
  .view[data-view="home"] .media-copy small{font-size:12px}
  .view[data-view="home"] .stat-label{font-size:14px!important}
  .view[data-view="home"] .stat-copy small{font-size:12px}
  .view[data-view="home"] .stat-row label,.view[data-view="home"] .stat-row strong{font-size:12px}
}
@media(max-width:820px){
  .settings-shell{width:calc(100vw - 22px)}
  .settings-group summary{padding:12px 14px}
  .settings-panel{padding:13px 14px}
  .media-category{font-size:11px}
  .media-copy h3{font-size:13px}
  .media-copy small{font-size:11px}
  .view[data-view="home"] .stat-label{font-size:12px!important}
  .experience-note{gap:6px}
}

/* Approved record dialog hierarchy and home statistics icons. */
.view[data-view="home"] .stat-main-icon svg{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#recordDialog .quick-record label{font-size:14px;font-weight:600;color:#abb9c9}
#recordDialog .quick-details summary{font-size:14px;font-weight:600;color:#bbc8d6}
#recordDialog .link-assist-label{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;font-weight:600;color:#abb9c9}
#recordDialog .link-assist-label span:last-child{font-size:12px;font-weight:400;color:#99a9ba}
#recordDialog .record-hint{font-size:12px;line-height:1.6;color:#9faec0}
#recordDialog .quick-record input::placeholder,#recordDialog .quick-record textarea::placeholder{color:#95a4b5;opacity:1}
body[data-theme="ocean"] #recordDialog .quick-record label,body[data-theme="ocean"] #recordDialog .link-assist-label{color:#355663}
body[data-theme="ocean"] #recordDialog .quick-details summary{color:#2d505d}
body[data-theme="ocean"] #recordDialog .link-assist-label span:last-child,body[data-theme="ocean"] #recordDialog .record-hint{color:#537581}
body[data-theme="ocean"] #recordDialog .quick-record input::placeholder,body[data-theme="ocean"] #recordDialog .quick-record textarea::placeholder{color:#66838e}
@media(max-width:820px){.view[data-view="home"] .stat-main-icon svg{width:22px;height:22px}}

/* Optional category details: one lightweight row for a date, track, or credit. */
.quick-extra .release-field,.quick-extra .quick-conditional,.quick-extra .extra-group{grid-column:1/-1}
.release-field>span{display:block;margin-bottom:7px;color:var(--muted);font-size:12px}
.release-controls{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px}
.release-controls input[hidden],.quick-conditional[hidden],.extra-group[hidden],.doc-episode-toggle[hidden],.credit-track-wrap[hidden]{display:none!important}
.quick-conditional,.extra-group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.extra-group{padding:13px;border:1px solid var(--line);background:var(--panel2);border-radius:12px;min-width:0}
.extra-group summary{list-style:none;cursor:pointer;color:var(--soft);font-size:13px;font-weight:600}
.extra-group summary::-webkit-details-marker{display:none}
.extra-group summary:after{content:'＋';float:right;color:var(--muted)}
.extra-group[open] summary:after{content:'−'}
.extra-group-grid{margin-top:14px}
.extra-group>b{display:block;font-size:13px;font-weight:600;margin-bottom:10px;color:var(--soft)}
.extra-repeat-row{display:grid;grid-template-columns:86px minmax(0,1fr) 32px;gap:8px;align-items:end;margin:9px 0}
.credit-row{grid-template-columns:105px minmax(110px,1fr) 112px minmax(105px,1fr) 32px}
.extra-repeat-row label{min-width:0}
.extra-repeat-row input,.extra-repeat-row select{min-width:0}
.repeat-remove{height:41px;width:32px;border:1px solid var(--line);background:var(--panel);border-radius:9px;color:var(--soft)}
.repeat-remove:hover,.repeat-remove:focus-visible{color:var(--danger)}
.extra-add{border:0;background:transparent;color:var(--accent);padding:7px 3px;font-size:13px;font-weight:600}
.doc-episode-toggle{display:flex!important;flex-direction:row!important;align-items:center;gap:9px}
.doc-episode-toggle[hidden]{display:none!important}
.doc-episode-toggle input{width:16px!important;height:16px;flex:none}
.experience-detail{white-space:pre-wrap}
.info-grid span{white-space:pre-wrap}
@media(max-width:820px){.credit-row{grid-template-columns:1fr 1fr 32px}.credit-row .credit-track-wrap{grid-column:1/-1}.quick-conditional,.extra-group-grid{grid-template-columns:1fr}.quick-extra .release-field,.quick-extra .quick-conditional,.quick-extra .extra-group{grid-column:1/-1}}
@media(max-width:520px){.credit-row{grid-template-columns:1fr 1fr 32px}.credit-row .credit-scope{min-width:0}.release-controls{grid-template-columns:96px minmax(0,1fr)}}

/* Ocean contrast: match the library field to its light theme and clarify quiet controls. */
body[data-theme="ocean"]{--muted:#536f7a;--soft:#385864;--line:#bfd9df}
body[data-theme="ocean"] .search-field{background:#fff;border-color:#b5d4dc;color:#254753;box-shadow:0 3px 12px rgba(55,108,121,.06)}
body[data-theme="ocean"] .search-field input{color:#17303a;font-size:14px}
body[data-theme="ocean"] .search-field input::placeholder{color:#526e79;opacity:1}
body[data-theme="ocean"] .search-field:focus-within{border-color:#398f9a;box-shadow:0 0 0 3px rgba(57,143,154,.12)}
body[data-theme="ocean"] .chip,body[data-theme="ocean"] .tab{background:#fff;color:#385864;border-color:#b9d6dd;font-size:13px}
body[data-theme="ocean"] .chip:hover,body[data-theme="ocean"] .tab:hover{background:#e8f5f7;border-color:#7dbcc6;color:#183f4a}
body[data-theme="ocean"] .chip.active{background:#55c8c3;color:#10333c;border-color:#55c8c3}
body[data-theme="ocean"] .tab.active{background:#e5f3f5;color:#173744;border-color:#75afb9}
body[data-theme="ocean"] .search-empty{border-color:#b9d6dd;color:#476774;font-size:14px}
body[data-theme="ocean"] .search-empty b{color:#254954;font-size:15px}
body[data-theme="ocean"] .empty-state{color:#3d5f6c;font-size:14px}
body[data-theme="ocean"] .library-card p,body[data-theme="ocean"] .timeline-copy small{color:#4b6975}
body[data-theme="ocean"] .nav svg,body[data-theme="ocean"] .cat-icon svg{stroke:#258f9c}
body[data-theme="ocean"] .brand-mark img{filter:drop-shadow(.65px 0 #254753) drop-shadow(-.65px 0 #254753)}
body[data-theme="ocean"] .release-field>span,body[data-theme="ocean"] .extra-group summary,body[data-theme="ocean"] .extra-group>b{color:#385864}
body[data-theme="ocean"] .extra-group{background:#f2f9fa;border-color:#bdd9df}
body[data-theme="ocean"] .extra-add{color:#1c7784}
.brand-mark,.brand-mark img{width:52px;height:38px}
.sidebar .brand{gap:8px}
.sidebar .brand-copy strong{font-size:21px}

/* The three image modes form one compact choice below the home text settings. */
.hero-setting .hero-mode-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}
.hero-setting .hero-mode-grid .choice{min-width:0;min-height:66px;padding:10px 9px}
.hero-setting .hero-mode-grid .choice b{font-size:12px}
.hero-setting .hero-mode-grid .choice small{font-size:11px;line-height:1.35}
@media(max-width:520px){.hero-setting .hero-mode-grid{gap:5px}.hero-setting .hero-mode-grid .choice{padding:9px 6px}.hero-setting .hero-mode-grid .choice b{font-size:11px}.hero-setting .hero-mode-grid .choice small{font-size:10px}}

/* Home fields use the same heading hierarchy as the order controls. */
.settings-panel .hero-setting .settings-label,.settings-panel.hero-setting .settings-label{font-size:13px;font-weight:700;color:var(--text)}
.settings-panel .subgroup-head b{font-size:13px}
.settings-panel .subgroup-head small{font-size:12px}

/* Grab the visible order chips; arrow keys provide a keyboard path. */
.settings-panel .category-order{display:flex;flex-wrap:wrap;gap:8px}
.settings-panel .order-row,#menuOrder .order-row{display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:0;padding:8px 12px;border-radius:999px;cursor:grab;touch-action:none;outline-offset:3px}
.settings-panel .order-row:active{cursor:grabbing}
.settings-panel .order-row:focus-visible{outline:2px solid var(--accent)}
.settings-panel .order-row .drag-copy{gap:7px;pointer-events:none}
.settings-panel .order-row .drag-copy b{font-size:13px}
.settings-panel .order-row.dragging{opacity:.65;box-shadow:0 8px 20px rgba(0,0,0,.18)}

/* Keep the same visible date mask before and during focus for both fields. */
.release-controls .date-input-wrap{min-height:42px}
.release-controls .date-input-wrap input{height:100%}
.date-input-wrap:not(.has-value):focus-within .date-placeholder{display:block}
.date-input-wrap:not(.has-value) input[type=date]::-webkit-datetime-edit,
.date-input-wrap:not(.has-value) input[type=month]::-webkit-datetime-edit{color:transparent}
.release-controls:has(#quickReleaseDate[hidden]){grid-template-columns:1fr}
.release-controls:has(#quickReleaseDate[hidden]) .date-input-wrap{display:none}

/* The memo is the main reading content within each experience. */
.detail .record-entry strong{font-size:13px;font-weight:700}
.detail .experience-note p{font-size:15px;line-height:1.65;color:var(--text);font-weight:400}
.detail .experience-note small{font-size:11px;color:var(--muted)}
.detail .record-entry time{font-size:12px}

/* Ocean surfaces need distinct boundaries, especially with blank cover artwork. */
body[data-theme="ocean"] .stats{border-top-color:#819faa}
body[data-theme="ocean"] .stat-card{background:linear-gradient(145deg,#fff,#e5f3f5)!important;border-color:#a6c6ce!important;box-shadow:0 3px 12px rgba(55,104,118,.08)}
body[data-theme="ocean"] .stat-card:hover{border-color:#5e9da8!important;box-shadow:0 0 0 1px #82b2bb,0 8px 22px rgba(55,104,118,.13)}
body[data-theme="ocean"] .stat-copy small{color:#466873}
body[data-theme="ocean"] .timeline-item{border-top-color:#a4c3cb}
body[data-theme="ocean"] .timeline-month{border-bottom-color:#a4c3cb}
body[data-theme="ocean"] .library-card{background:#fff;border-color:#b0ced5}
body[data-theme="ocean"] .library-card h3{color:#183642}
body[data-theme="ocean"] .library-card .mini-status{color:#236c78}
body[data-theme="ocean"] .library-card .cover:not(.has-image){background:#e0eff2;border-color:#adcbd2;box-shadow:none}
body[data-theme="ocean"] .library-card .cover:not(.has-image) span{color:#173b48;text-shadow:none}
body[data-theme="ocean"] .library-card .cover.has-image span{color:#fff}

/* One date control for the experience, releases, game sessions, and exhibition dates. */
:is(.dialog,.work-card) .segmented-date{display:flex;align-items:center;position:relative;min-width:0;width:100%;height:47px;padding:0 9px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text)}
:is(.dialog,.work-card) .segmented-date[hidden]{display:none}
:is(.dialog,.work-card) .segmented-date:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 16%,transparent)}
:is(.dialog,.work-card) .segmented-date .date-segments{display:flex;align-items:center;flex:1;min-width:0;gap:6px}
:is(.dialog,.work-card) .segmented-date .date-part{display:inline-flex;align-items:center;gap:1px;white-space:nowrap;color:var(--soft);font-size:13px}
:is(.dialog,.work-card) .segmented-date .date-part[hidden]{display:none}
:is(.dialog,.work-card) .segmented-date .date-part input{width:4.3ch;height:38px;padding:0;border:0;background:transparent;color:var(--text);border-radius:0;text-align:center;font-size:14px;outline:0;box-shadow:none}
:is(.dialog,.work-card) .segmented-date .date-month-part input,:is(.dialog,.work-card) .segmented-date .date-day-part input{width:2.5ch}
:is(.dialog,.work-card) .segmented-date .date-part input::placeholder{color:var(--muted);opacity:1}
:is(.dialog,.work-card) .segmented-date .date-value{position:absolute;width:1px;height:1px;padding:0;opacity:0;pointer-events:none}
:is(.dialog,.work-card) .segmented-date .date-picker-button{display:grid;place-items:center;width:33px;height:38px;flex:none;padding:0;border:0;background:transparent;color:var(--soft)}
:is(.dialog,.work-card) .segmented-date .date-picker-button[hidden]{display:none}
:is(.dialog,.work-card) .segmented-date .date-picker-button:hover{color:var(--text)}
:is(.dialog,.work-card) .segmented-date .date-picker-button svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#recordDialog .release-controls .segmented-date{min-height:47px}
#recordDialog .release-controls:has(.segmented-date[hidden]){grid-template-columns:1fr}
body[data-theme="ocean"] :is(.dialog,.work-card) .segmented-date{border-color:#a9cbd4;background:#fff;color:#17303a}
body[data-theme="ocean"] :is(.dialog,.work-card) .segmented-date .date-part input{color:#17303a}
body[data-theme="ocean"] :is(.dialog,.work-card) .segmented-date .date-part input::placeholder{color:#526c76}
@media(max-width:520px){:is(.dialog,.work-card) .segmented-date .date-segments{gap:2px}:is(.dialog,.work-card) .segmented-date .date-part{font-size:12px}:is(.dialog,.work-card) .segmented-date .date-part input{font-size:13px}}

/* Hierarchy for work title, personal note, and secondary metadata. */
.timeline-copy h3{font-size:17px;line-height:1.35}
.timeline-copy p{font-size:14px;line-height:1.55;color:var(--soft)}
.timeline-copy small{font-size:11px;color:var(--muted)}
.library-card h3{font-size:15px;font-weight:750}
.library-card p{font-size:12px;color:var(--muted)}
.library-card .mini-status{font-size:11px;font-weight:650}
.detail .record-entry time{font-size:14px;color:var(--soft)}
.detail .experience-note p{font-size:16px;line-height:1.65}
.detail .experience-note small{font-size:11px}
.detail .experience-notes{margin-top:4px}
.detail-meta .eyebrow{font-size:15px;letter-spacing:.03em;color:var(--soft)}
body[data-theme="ocean"] .timeline-copy p{color:#365561}
body[data-theme="ocean"] .timeline-copy small{color:#56727c}
body[data-theme="ocean"] .search-empty{border-color:#87afba;border-width:1.5px;background:rgba(255,255,255,.6)}
body[data-theme="ocean"] .detail-hero{background:#fff;border-color:#afcbd2}
body[data-theme="ocean"] .detail-meta h2{color:#17303a}
body[data-theme="ocean"] .detail-meta .eyebrow{color:#326571}
body[data-theme="ocean"] .detail-meta .subline,body[data-theme="ocean"] .detail-meta .creator{color:#426674}
body[data-theme="ocean"] .detail-hero .cover:not(.has-image){background:#e0eff2;color:#173b48;border-color:#afcbd2}
body[data-theme="ocean"] .detail-hero .cover:not(.has-image) span{color:#173b48;text-shadow:none}

/* Give the work title, personal impression, and category a clear reading order. */
.timeline-copy h3{font-size:19px;line-height:1.35;font-weight:750}
.timeline-copy p{font-size:16px;line-height:1.55}
.timeline-copy small{font-size:12px}

/* Image artwork may already contain its own lettering; keep the title below the cover. */
.cover.has-image span,.cover.has-image:before{display:none}
.cover.has-user-image{background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#19222b;box-shadow:none}
.media-art.user-poster{background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#19222b}
body[data-theme="ocean"] .cover.has-user-image,body[data-theme="ocean"] .media-art.user-poster{background-color:#e6f2f6;border-color:#a9cbd4}
.content-edit-card{display:grid;gap:18px}.content-edit-title{display:grid;gap:8px;font-size:13px;font-weight:700}.content-edit-title input{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text)}.content-edit-image>b{font-size:13px}.content-cover-preview{width:156px;aspect-ratio:2/3;display:grid;place-items:center;margin:12px 0;border:1px solid var(--line);border-radius:12px;background:#19222b;overflow:hidden;color:#fff}.content-cover-preview img{width:100%;height:100%;object-fit:cover}.content-cover-preview span{font-size:12px}.content-edit-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.content-edit-tools label{cursor:pointer}.content-edit-tools button:disabled{opacity:.45;cursor:default}body[data-theme="ocean"] .content-cover-preview{background:#e6f2f6;color:#173b48;border-color:#a9cbd4}
.content-edit-tools .outline-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-align:center}
@media(max-width:520px){.content-edit-card{max-height:calc(100dvh - 28px);gap:14px}.content-edit-tools{display:grid;grid-template-columns:1fr 1fr}.content-edit-tools .outline-btn{padding:10px 6px;font-size:12px}.content-edit-card footer .outline-btn,.content-edit-card footer .primary-btn{min-height:44px}}
.content-edit-title[hidden],.content-edit-image[hidden]{display:none!important}
.detail-cover-wrap{position:relative;align-self:start}.detail-cover-wrap .cover{width:100%}
.cover-edit-btn{position:absolute;right:9px;top:9px;width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);border-radius:10px;background:rgba(14,23,31,.85);color:#fff;opacity:0;pointer-events:none}
.cover-edit-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.detail-cover-wrap:hover .cover-edit-btn,.cover-edit-btn:focus-visible{opacity:1;pointer-events:auto}
.cover-edit-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.detail-title-row{display:flex;align-items:center;gap:9px;min-width:0}.detail-title-row h2{min-width:0;overflow-wrap:anywhere}.detail-title-row .icon-action{flex:none;width:34px;height:34px}
@media(hover:none), (pointer:coarse){.cover-edit-btn{opacity:1;pointer-events:auto}}
.detail-section-heading{display:flex;align-items:center;gap:9px;margin-bottom:12px}.detail-section-heading h3{margin:0}.detail-section-heading .icon-action{width:34px;height:34px}
.info-grid .info-empty{grid-column:1/-1;margin:0;padding:18px;color:var(--muted);font-size:13px}
.video-work-card{width:min(600px,calc(100vw - 28px))}.video-work-fields{display:grid;gap:14px;margin-top:20px}.video-work-fields label{display:grid;gap:8px;color:var(--soft);font-size:13px;font-weight:700}.video-work-fields input,.video-work-fields select{min-height:44px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--text);padding:9px 11px}.video-work-fields .video-release-field{display:grid;gap:8px;color:var(--soft);font-size:13px;font-weight:700}.video-work-fields .release-controls{display:grid;grid-template-columns:110px minmax(0,1fr);gap:9px}.video-work-fields #videoWorkReleaseControl{min-width:0}.video-work-fields .segmented-date{height:44px}.video-work-card footer button{min-height:44px}
.video-work-fields input,.video-work-fields select{min-width:0}.video-work-fields label>input,.video-work-fields label>select{width:100%}
@media(max-width:520px){.video-work-fields .release-controls{grid-template-columns:92px minmax(0,1fr);gap:6px}.video-work-fields .release-controls select{padding:7px}}
.record-date-items{display:grid;gap:0;min-width:0}.record-date-items>.experience-body+ .experience-body{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.experience-status{display:block;margin:0 0 5px}
.record-section-heading{justify-content:space-between}
.record-section-heading .primary-btn{font-size:13px;padding:9px 13px}
#recordDialog[data-locked-work="true"] #quickTitle{color:var(--soft)}

/* One compact work card opens to show details or flip into the shared editor. */
.detail-hero.work-card{display:block;width:min(100%,480px);padding:20px;min-height:0;transition:width .38s ease;transform-style:preserve-3d}
.detail-hero.work-card:has(.work-details[open]),.detail-hero.work-card.is-editing{width:100%}
.work-card-face[hidden]{display:none!important}
.work-card-front{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:start;min-height:225px}
.work-card .detail-meta{min-width:0}.work-card .detail-meta h2{margin:9px 0 0;overflow-wrap:anywhere}
.work-cover-button{position:relative;display:block;align-self:start;border:0;padding:0;width:100%;background:transparent;text-align:inherit;color:inherit;cursor:pointer;border-radius:13px}
.work-cover-button .cover{width:100%}.work-cover-button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.work-cover-cue{position:absolute;right:7px;top:7px;opacity:0;padding:5px 8px;border:1px solid rgba(255,255,255,.35);border-radius:8px;background:rgba(12,22,29,.84);color:#fff;font-size:11px;transition:opacity .14s}
.work-cover-button:hover .work-cover-cue,.work-cover-button:focus-visible .work-cover-cue{opacity:1}
.work-details{margin-top:14px}.work-details summary{cursor:pointer;list-style:none;color:var(--accent);font-size:13px;font-weight:650;width:max-content;max-width:100%}.work-details summary::-webkit-details-marker{display:none}.work-details summary:after{content:'  ⌄'}.work-details[open] summary:after{content:'  ⌃'}
.work-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.work-detail-grid>div{display:grid;gap:3px;min-width:0;font-size:13px}.work-detail-grid b{font-size:11px;font-weight:650;color:var(--muted)}.work-detail-grid span{white-space:pre-wrap;overflow-wrap:anywhere}
.work-card.flipping{animation:work-card-turn .38s ease-in-out}
@keyframes work-card-turn{0%{transform:perspective(1100px) rotateY(0)}48%{transform:perspective(1100px) rotateY(88deg)}52%{transform:perspective(1100px) rotateY(-88deg)}100%{transform:perspective(1100px) rotateY(0)}}
.work-card-editor{min-width:0}.work-editor-head{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:16px}.work-editor-head h2{font-size:25px;margin:7px 0 0}.work-editor-head .eyebrow{font-size:11px;color:var(--soft)}
.work-editor-layout{display:grid;grid-template-columns:170px minmax(0,1fr);gap:24px}.work-editor-image{display:flex;flex-direction:column;align-items:stretch;gap:9px;font-size:12px}.work-image-preview{width:100%;aspect-ratio:2/3;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel2);display:grid;place-items:center;font-size:11px}.work-image-preview img{width:100%;height:100%;object-fit:cover}.work-editor-image .outline-btn{text-align:center;cursor:pointer;font-size:12px}.work-editor-image .text-btn{align-self:center;font-size:12px}.work-editor-image .text-btn:disabled{opacity:.4;cursor:default}
.work-editor-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-content:start}.work-editor-fields>label,.work-release-field{display:grid;gap:7px;color:var(--soft);font-size:12px;font-weight:650;min-width:0}.work-editor-fields input:not([type=hidden]),.work-editor-fields select,.work-info-row input{width:100%;min-width:0;min-height:42px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--panel);color:var(--text);font:inherit;font-size:13px}
.work-editor-fields #workTitle{font-size:15px;font-weight:700}.work-release-field .release-controls{display:grid;grid-template-columns:105px minmax(0,1fr);gap:8px}.work-release-field .segmented-date{height:42px}
.work-extra-field,.work-credit-field{grid-column:1/-1;display:grid;gap:9px;border-top:1px solid var(--line);padding-top:13px;font-size:12px}.work-info-row{display:grid;grid-template-columns:minmax(90px,1fr) minmax(0,2fr) 34px;gap:8px;margin-bottom:7px}.work-extra-field>.outline-btn,.work-credit-field>.outline-btn{justify-self:start;font-size:12px}
.work-editor-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.work-editor-actions button{min-height:42px}
.work-card[data-category="음악"] .work-cover-button .cover,.work-card[data-category="음악"] .work-image-preview{aspect-ratio:1}
.detail .note-add-btn{display:inline-block;margin:12px 0 0;padding:5px 2px;border:0;background:transparent;color:var(--accent);font-size:13px;cursor:pointer}
.detail .note-add-btn:hover,.detail .note-add-btn:focus-visible{text-decoration:underline}
@media(hover:none),(pointer:coarse){.work-cover-cue{opacity:1}}
@media(max-width:820px){.detail-hero.work-card{width:100%;padding:15px}.work-card-front{grid-template-columns:105px minmax(0,1fr);gap:15px;min-height:155px}.work-card .detail-meta h2{font-size:23px}.work-detail-grid{grid-template-columns:1fr}.work-editor-layout{grid-template-columns:1fr;gap:14px}.work-editor-image{display:grid;grid-template-columns:115px minmax(0,1fr);align-items:start}.work-editor-image>b{grid-column:1/-1}.work-image-preview{grid-row:span 2}.work-editor-image .text-btn{justify-self:start}.work-editor-fields{grid-template-columns:1fr}.work-extra-field,.work-credit-field{grid-column:1}.work-editor-head h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){.detail-hero.work-card{transition:none}.work-card.flipping{animation:none}}

/* Keep the native picker anchored to the calendar button, clear of adjacent fields. */
:is(.dialog,.work-card) .segmented-date .date-value{left:auto;right:9px;top:4px;width:33px;height:38px;border:0;opacity:0;pointer-events:none}

/* Work image opens like a postcard; the surrounding panel does not rotate. */
.detail{max-width:1180px}
.detail-hero.work-card{position:relative;width:min(100%,680px);max-width:100%;padding:24px;transition:width .62s cubic-bezier(.32,.1,.16,1),min-height .62s ease;min-height:305px}
.detail-hero.work-card:has(.work-details[open]){width:100%}
.detail-hero.work-card.is-editing{width:100%;min-height:540px;z-index:51;box-shadow:0 26px 70px rgba(0,0,0,.2)}
.work-card-front{grid-template-columns:190px minmax(0,1fr);gap:26px;min-height:255px}
.work-card .detail-meta h2{font-size:clamp(26px,3vw,37px)}
.work-card .work-details summary:after{content:'  →'}
.work-card .work-details[open] summary:after{content:'  ←'}
.work-edit-dim{position:fixed;inset:0;z-index:50;background:rgba(7,15,23,.27);backdrop-filter:blur(3px);animation:work-dim-in .25s ease both}
@keyframes work-dim-in{from{opacity:0}to{opacity:1}}
.work-flip-proxy{position:fixed;z-index:52;pointer-events:none;transform-style:preserve-3d;transform-origin:center;border-radius:14px}
.work-flip-side{position:absolute;inset:0;overflow:hidden;border:1px solid var(--line);border-radius:14px;backface-visibility:hidden;background:var(--panel)}
.work-flip-front .cover{width:100%;height:100%;aspect-ratio:auto}
.work-flip-front .work-cover-cue{display:none}
.work-flip-back{display:grid;place-items:center;transform:rotateY(180deg);background:linear-gradient(135deg,var(--panel),var(--panel2));color:var(--soft);font-size:15px;font-weight:700}
.record-date-edit{display:block;align-self:start;justify-self:start;padding:0;border:0;background:none;color:var(--soft);font-size:14px;cursor:pointer;text-align:left}
.record-date-edit:hover,.record-date-edit:focus-visible{color:var(--accent);text-decoration:underline}
.record-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.record-section-heading h3{margin:0}
.record-section-heading .outline-btn{font-size:13px;padding:8px 11px;white-space:nowrap}
.detail .experience-note{display:grid;gap:0}
.detail .record-date-items{display:grid;gap:10px;min-width:0;padding:12px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--panel2) 76%,transparent)}
.detail .record-date-items .experience-body,.detail .record-date-items .experience-body+.experience-body{min-width:0;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.detail .record-date-items .experience-status,.detail .record-date-items .experience-detail{margin:13px 16px 0}
.detail .record-date-items .experience-note{padding:4px 16px 15px;border:0;background:transparent}
.experience-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-height:35px;padding:7px 9px 0}
.experience-card-head>div:first-child{min-width:0;flex:1}
.detail .experience-card-head .experience-status,.detail .experience-card-head .experience-detail{margin:3px 7px 5px}
.experience-card-actions{display:flex;align-items:center;gap:3px;flex:none}
.experience-card-actions .icon-action{width:30px;height:30px}
.detail .experience-notes{margin-top:0}
.detail .experience-note{grid-template-columns:minmax(0,1fr);width:100%}
.note-segment{display:flex;align-items:start;justify-content:space-between;gap:12px;width:100%;min-width:0}
.note-segment .note-content{min-width:0;flex:1}
.note-segment .note-actions{margin-left:auto}
.note-segment.note-followup{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.detail .record-date-items .note-followup{margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
.note-followup-date{display:block;margin-bottom:5px;font-size:12px!important;font-weight:700;color:var(--soft)!important}
.detail .experience-note .experience-created{margin-top:14px;color:var(--muted);font-size:11px}
@media(hover:hover) and (pointer:fine){.note-segment .note-actions{opacity:0;transition:opacity .15s}.note-segment:hover .note-actions,.note-segment:focus-within .note-actions{opacity:1}}
.note-append-button{display:block;margin-top:14px;padding:7px 0;border:0;background:none;color:var(--accent);font-size:13px;font-weight:700;cursor:pointer}
.note-append-button[hidden],.note-append-fields[hidden]{display:none}
.note-append-fields{display:grid;gap:12px;margin-top:12px;padding-top:16px;border-top:1px solid var(--line)}
.note-append-fields label{display:grid;gap:7px;font-size:12px;font-weight:700;color:var(--soft)}
.note-append-fields input,.note-append-fields textarea{width:100%;padding:11px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--text);font:inherit}
.note-append-fields textarea{min-height:120px;resize:vertical}
.note-editor-rows{display:grid;gap:12px;margin-top:16px}
.note-editor-row{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.note-editor-row-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}
.note-editor-row-head .text-btn{padding:3px 5px;color:var(--muted);font-size:12px}
.note-editor-row textarea,.note-editor-row input{width:100%;min-width:0;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit}
.note-editor-row textarea{min-height:140px;resize:vertical;font-size:14px;line-height:1.55}
.note-editor-row label{display:grid;gap:6px;color:var(--soft);font-size:12px}
.note-editor-row input{min-height:42px}
@media(max-width:820px){.detail-hero.work-card{width:100%;padding:16px;min-height:0}.work-card-front{grid-template-columns:120px minmax(0,1fr);gap:17px;min-height:175px}.detail-hero.work-card.is-editing{min-height:520px}}
@media(prefers-reduced-motion:reduce){.detail-hero.work-card{transition:none}.work-edit-dim{animation:none}}

/* Separate image choices from home text, and keep the file picker secondary. */
.settings-panel.hero-setting .hero-image-options{margin-top:10px;padding-top:17px;border-top:1px solid var(--line);display:grid;gap:11px}
.settings-panel.hero-setting .hero-image-heading{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.settings-panel.hero-setting .hero-image-heading b{font-size:13px;color:var(--text)}
.settings-panel.hero-setting .hero-image-heading small{font-size:11px;color:var(--muted)}
.settings-panel.hero-setting .hero-mode-grid{margin-top:0;padding-top:0;border-top:0}
.settings-panel.hero-setting .hero-image-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.settings-panel.hero-setting #heroImageInput{width:min(100%,260px);min-height:38px;padding:5px 7px;font-size:12px}
.settings-panel.hero-setting #heroImageInput::file-selector-button{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:7px;padding:6px 8px;margin-right:8px;font:inherit;cursor:pointer}
.settings-panel.hero-setting #clearHeroImage{width:auto;padding:6px 2px;border:0;background:transparent;color:var(--accent);font-size:12px;font-weight:700;text-align:left}
.settings-panel.hero-setting #clearHeroImage:hover{text-decoration:underline}
.settings-panel.hero-setting #clearHeroImage:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body[data-theme="ocean"] .settings-panel.hero-setting .hero-image-options{border-top-color:#a6c5cf}
body[data-theme="ocean"] .settings-panel.hero-setting #clearHeroImage{color:#226a77}
@media(max-width:520px){.timeline-copy h3{font-size:17px}.timeline-copy p{font-size:15px}.settings-panel.hero-setting .hero-image-heading{flex-wrap:wrap}}

/* Backup and import actions remain separate so replacement is explicit. */
.backup-panel{display:grid;gap:12px}
.backup-panel .form-note{margin:0;line-height:1.55}
.backup-panel>.outline-btn{justify-self:start}
.backup-import-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line)}
.backup-import-actions [data-import-mode="replace"]{border-color:color-mix(in srgb,var(--soft) 75%,var(--line))}
.import-card{width:min(520px,calc(100vw - 28px))}
.import-summary{white-space:pre-line;margin:22px 0 12px;line-height:1.8;font-size:14px;color:var(--text)}
.import-card .form-note{line-height:1.65;color:var(--soft)}
body[data-theme="ocean"] .backup-import-actions{border-top-color:#a6c5cf}
body[data-theme="ocean"] .experience-card-actions .icon-action{color:#829da7}

#quickMemoWrap[hidden]{display:none!important}

/* Final archive layout: readable library, image-only Topster, compact details. */
.library-grid{display:block}.library-group{margin:20px 0 26px}.library-group-title{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:10px;padding-bottom:8px}.library-group-title h2{font-size:17px;margin:0}.library-group-title small{color:var(--muted)}.library-group-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.library-card{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding:9px;min-width:0;cursor:pointer;min-height:154px}.library-card .cover{width:88px;height:132px;margin:0;aspect-ratio:2/3}.library-card-content{min-width:0;position:relative;padding:4px 3px 20px}.library-card h3{font-size:15px;line-height:1.35;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.library-card p{font-size:11px;line-height:1.4}.library-card .library-note{font-size:12px;color:var(--soft);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:10px 0 3px}.library-card .mini-status{display:block;margin-top:7px}.library-card .work-rating{position:absolute;right:3px;bottom:0}.library-card:has(.work-rating) .mini-status{margin-right:42px}.library-card:has(.work-rating.unrated) .mini-status{margin-right:0}.library-card .work-rating.unrated{opacity:0}.library-card:hover .work-rating.unrated,.library-card:focus-within .work-rating.unrated{opacity:1}
.timeline-copy p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}.timeline-item{position:relative}.timeline-item .work-rating{align-self:end;font-size:12px}.timeline-item .work-rating.unrated{opacity:0}.timeline-item:hover .work-rating.unrated,.timeline-item:focus-within .work-rating.unrated{opacity:1}
.work-rating{border:0;background:transparent;color:var(--accent);padding:3px 5px;font-weight:700;white-space:nowrap}.work-rating.unrated{color:var(--muted)}.work-rating:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.detail-meta .work-rating{margin:6px 0 0;padding-left:0}.work-card [data-trash-work]{position:absolute;right:10px;top:10px;z-index:3;color:var(--muted)}.work-card [data-trash-work]:hover{color:var(--danger)}.work-card .detail-meta{padding-right:24px}.work-card .work-details summary:after,.work-card .work-details[open] summary:after{content:none}.work-detail-grid>div{font-size:16px;line-height:1.48}.work-detail-grid b{font-size:13px}
.work-card[data-category="음악"]:not(:has(.work-details[open])){min-height:0}.work-card[data-category="음악"] .work-card-front{min-height:0}.work-card[data-category="음악"] .work-cover-button{width:min(100%,230px)}
.work-sortable{position:relative;min-width:0}.work-sortable>label,.work-sortable>.work-release-field{display:grid;gap:7px;color:var(--soft);font-size:12px;font-weight:650;min-width:0}.work-sortable .work-field-handle{position:absolute;right:3px;top:-2px;background:none;border:0;color:var(--muted);font-size:17px;line-height:18px;touch-action:none;cursor:grab}.work-sortable.dragging{opacity:.5}.work-sortable .work-release-field .segmented-date{min-width:0}.work-sortable #workTitle{font-size:15px;font-weight:700}
.settings-panel.hero-setting .hero-image-tools{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:12px}.settings-panel.hero-setting #heroImageInput{width:100%;max-width:none}.settings-panel.hero-setting #clearHeroImage{width:100%;text-align:center}.rating-setting{display:flex;align-items:center;justify-content:space-between;gap:20px}.rating-setting span{display:grid;gap:4px}.rating-setting small{color:var(--muted)}.rating-setting input{width:20px;height:20px;accent-color:var(--accent)}.trash-settings{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.trash-settings>summary{cursor:pointer;font-weight:700}.trash-settings summary small{color:var(--muted);font-weight:400}.trash-row{display:flex;justify-content:space-between;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid var(--line)}.trash-row>span:first-child{display:grid;gap:4px}.trash-row small{color:var(--muted)}.trash-row>span:last-child{display:flex;gap:6px}.trash-row button{font-size:11px;padding:7px 8px}.interest-choice{border-color:color-mix(in srgb,var(--accent2) 72%,var(--line));background:color-mix(in srgb,var(--accent2) 16%,var(--panel));color:var(--text)}
.main:has(.topster-view.active){width:100%;max-width:none;padding:0 12px 60px}.main:has(.topster-view.active)>.topbar{display:none}.topster-view{position:relative;padding-top:52px;min-height:100vh}.topster-activation{position:absolute;left:0;top:0;width:100%;height:40px;cursor:pointer}.topster-activation:focus-visible{outline:2px solid var(--accent)}.topster-controls{position:absolute;z-index:8;left:0;right:0;top:4px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:7px 5px;background:color-mix(in srgb,var(--bg) 95%,transparent);backdrop-filter:blur(10px);border-radius:12px}.topster-controls[hidden]{display:none}.topster-controls .chips{padding:2px}.topster-order{display:grid;justify-items:end;gap:7px}.topster-order select{width:236px;height:36px;padding:5px 10px}.topster-order button{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--panel);font-size:19px;line-height:1}.topster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(155px,24vw),1fr));gap:8px;align-items:start}.topster-tile{position:relative;min-width:0;display:block;padding:0;border:0;background:transparent;text-align:left}.topster-tile>.cover{width:100%;border-radius:5px;box-shadow:none}.topster-tile .cover.has-image span{display:none}.topster-tile .topster-title{position:absolute;left:0;right:0;bottom:0;padding:15px 6px 6px;background:linear-gradient(transparent,rgba(0,0,0,.76));color:white;font-size:12px;opacity:0;transition:opacity .16s}.topster-tile:hover .topster-title,.topster-tile:focus-visible .topster-title{opacity:1}.topster-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.topster-tile .cover:not(.has-image) span{display:block}.topster-tile[draggable="true"]{cursor:grab}
@media(max-width:1140px){.library-group-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:820px){.library-group-grid{grid-template-columns:1fr}.topster-grid{grid-template-columns:repeat(auto-fill,minmax(min(130px,30vw),1fr));gap:6px}.topster-view{padding-top:42px}.topster-controls{flex-direction:column}.topster-order{justify-self:end;margin-left:auto}.topster-order select{width:min(236px,65vw)}.settings-panel.hero-setting .hero-image-tools{grid-template-columns:minmax(0,7fr) minmax(0,3fr)}.work-card[data-category="음악"] .work-cover-button{width:100%}}@media(max-width:520px){.library-card{grid-template-columns:78px 1fr;min-height:137px}.library-card .cover{width:78px;height:117px}.topster-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.topster-controls .chips{max-width:100%}.settings-panel.hero-setting .hero-image-tools{grid-template-columns:1fr}.trash-row{align-items:start;flex-direction:column}}
.settings-shell.home-only .settings-group:not(:has(.hero-setting)){display:none}.settings-shell.home-only .settings-group:has(.hero-setting)>summary{display:none}.settings-shell.home-only .settings-group:has(.hero-setting){border:0}
.detail .record-date-items .experience-body{position:relative}.detail .experience-card-head:has(>div:first-child:empty){position:absolute;right:8px;top:7px;min-height:0;padding:0;z-index:1}.detail .experience-body:has(.experience-card-head>div:first-child:empty) .experience-note{padding-top:15px}.detail .experience-body:has(.experience-card-head>div:first-child:empty) .note-segment:first-child p{padding-right:68px}
.rating-popover{position:fixed;z-index:90;display:flex;align-items:center;gap:2px;padding:7px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--shadow)}.rating-popover button{border:0;background:transparent;padding:6px 4px;color:var(--muted);font-size:21px}.rating-popover button:hover,.rating-popover button.selected{color:var(--accent)}.rating-popover .rating-clear{font-size:11px;padding:7px;color:var(--soft)}

/* Refined full-view controls and media details. */
.app.topster-active{grid-template-columns:minmax(0,1fr)}.app.topster-active>.sidebar{display:none}.app.topster-active.topster-menu-open{grid-template-columns:238px minmax(0,1fr)}.app.topster-active.topster-menu-open>.sidebar{display:flex}.app.topster-active .mobile-nav{display:none}
.main:has(.topster-view.active){padding:0 12px 60px}.topster-view{padding-top:25px}.topster-activation{height:20px}.topster-controls{position:relative;top:auto;left:auto;right:auto;align-items:start;min-height:0;padding:0 0 12px;margin:0 0 8px;background:transparent;backdrop-filter:none;border-radius:0}.topster-controls .chips{padding:0;align-items:center}.topster-order{gap:7px}.topster-mode-wrap{position:relative;width:98px}.topster-mode-wrap #topsterModeButton{display:flex;align-items:center;justify-content:space-between;gap:8px;width:98px;height:35px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font-size:13px}.topster-mode-wrap svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.topster-mode-wrap #topsterModeMenu{position:absolute;top:39px;right:0;z-index:11;width:98px;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:var(--shadow)}.topster-mode-wrap #topsterModeMenu[hidden]{display:none}.topster-mode-wrap #topsterModeMenu button{display:block;width:100%;padding:9px 10px;border:0;border-radius:0;background:var(--panel);text-align:left;color:var(--text);font-size:13px}.topster-mode-wrap #topsterModeMenu button:hover,.topster-mode-wrap #topsterModeMenu button:focus-visible,.topster-mode-wrap #topsterModeMenu [aria-selected="true"]{background:var(--panel2);color:var(--accent)}.topster-order #topsterShuffle{display:grid;place-items:center;width:32px;height:32px;min-width:32px;min-height:32px;padding:0;line-height:normal}.topster-order #topsterShuffle svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.settings-panel.hero-setting .home-file-picker{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;min-height:41px;padding:5px 7px;border:1px solid var(--line);border-radius:11px;background:var(--panel);position:relative}.home-file-picker #heroFileName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--soft)}.home-file-picker .home-file-trigger{flex:none;padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:var(--panel2);color:var(--text);font-size:12px;cursor:pointer}.settings-panel.hero-setting .home-file-picker #heroImageInput{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;padding:0;border:0;pointer-events:none}.home-file-picker:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.timeline-item{grid-template-columns:70px 80px minmax(0,1fr);gap:14px;min-height:136px;padding:17px 0;align-items:center}.timeline-item .cover.cover-sm{width:80px;height:120px;aspect-ratio:2/3}.timeline-date{display:grid;justify-items:center;align-content:center;width:70px}.timeline-date b,.timeline-date small{display:block;width:100%;text-align:center;line-height:1.35}.timeline-copy{min-width:0}.timeline-footer,.library-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:22px}.timeline-footer{max-width:100%}.timeline-footer small{min-width:0}.library-card .mini-status{margin:0}.library-card-content{display:flex;flex-direction:column;min-width:0;padding:4px 3px 0}.library-card-footer{margin-top:auto}.library-card .rating-wrap{position:static}.library-card:has(.rating-wrap) .mini-status,.library-card:has(.rating-wrap.unrated) .mini-status{margin-right:0}
.rating-wrap{display:inline-flex;align-items:center;gap:2px;flex:none;line-height:1}.work-rating{display:inline-flex;align-items:center;gap:1px;border:0;background:transparent;padding:4px 2px;cursor:pointer;touch-action:none;user-select:none}.rating-star{font-size:14px;color:var(--muted);opacity:.55;line-height:1}.rating-star.filled{color:var(--accent);opacity:1}.work-rating:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.rating-clear-inline{padding:0 2px;border:0;background:transparent;color:var(--muted);font-size:13px;opacity:0}.rating-wrap:hover .rating-clear-inline,.rating-wrap:focus-within .rating-clear-inline{opacity:1}.timeline-item .rating-wrap.unrated,.library-card .rating-wrap.unrated{opacity:0}.timeline-item:hover .rating-wrap.unrated,.timeline-item:focus-within .rating-wrap.unrated,.library-card:hover .rating-wrap.unrated,.library-card:focus-within .rating-wrap.unrated{opacity:1}.detail-meta .rating-wrap{margin:8px 0 0}.detail-meta .work-rating{margin:0}.detail-meta .rating-star{font-size:19px}
@media(max-width:820px){.app.topster-active.topster-menu-open{display:block}.app.topster-active.topster-menu-open>.sidebar{display:none}.app.topster-active.topster-menu-open .mobile-nav{display:grid}.topster-view{padding-top:22px}.topster-controls{position:relative;flex-direction:column;align-items:stretch}.topster-order{align-self:flex-end;margin-left:0}.timeline-item{grid-template-columns:43px 66px minmax(0,1fr);gap:9px;min-height:118px}.timeline-item .cover.cover-sm{width:66px;height:99px}.timeline-date{width:43px}.rating-star{font-size:12px}}@media(max-width:520px){.timeline-item{grid-template-columns:39px 58px minmax(0,1fr);gap:8px;min-height:108px}.timeline-item .cover.cover-sm{width:58px;height:87px}.timeline-date{width:39px}.timeline-footer,.library-card-footer{gap:4px}.rating-star{font-size:11px}}
@media(hover:none){.timeline-item .rating-wrap.unrated,.library-card .rating-wrap.unrated{opacity:1}.rating-wrap .rating-clear-inline{opacity:1}}
.library-card .work-rating{position:static;right:auto;bottom:auto;align-self:center}.library-card .work-rating.unrated{opacity:1}.library-card .rating-wrap{margin-left:auto}
#libraryFilters[hidden]{display:none!important}.timeline-footer{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px}.timeline-footer .rating-wrap{margin:0}.library-card-footer{justify-content:flex-start;gap:8px}.library-card .rating-wrap{margin-left:0}
.work-rating{padding-inline:0}.library-card-footer:not(:has(.mini-status)) .rating-wrap{margin-left:-1px}
.timeline-footer{gap:5px}
.work-order-actions{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:var(--soft)}.work-order-actions button{font-size:12px}
.reset-data-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:14px;border-top:1px solid var(--line)}.reset-data-row span{display:grid;gap:4px}.reset-data-row small{color:var(--soft);font-size:12px}.reset-data-row button{flex:none}
.reset-data-card{width:min(530px,calc(100vw - 28px))}.reset-data-card .form-note{line-height:1.65;color:var(--soft)}.reset-data-card .reset-interest-choice{display:flex;align-items:center;gap:9px;margin:14px 0;color:var(--text);font-size:14px}.reset-interest-choice input{width:17px;height:17px;accent-color:var(--accent)}.reset-data-card .settings-label{display:grid;gap:8px}.reset-data-card .settings-label input{width:100%;min-height:42px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text)}.reset-data-card .danger-reset{border-color:var(--danger);color:var(--danger)}.reset-data-card .danger-reset:disabled{opacity:.45;cursor:not-allowed}

/* Mobile category labels scroll horizontally as intact words; leave room to scroll the last record above the fixed tab bar. */
@media(max-width:820px){
  #libraryFilters,#videoSubfilters{max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #libraryFilters .chip,#videoSubfilters .chip{flex:0 0 auto;white-space:nowrap;word-break:keep-all}
  .main{padding-bottom:calc(148px + env(safe-area-inset-bottom))}
}

/* Phone layout: consistent filters, balanced controls and dialogs inside the visual viewport. */
@media(max-width:820px){
  .topbar{gap:8px}
  .top-search{flex:1 1 auto;width:auto;min-width:0;height:46px}
  .actions{flex:0 0 auto;gap:6px}
  .actions .circle-add{width:40px;height:40px;font-size:22px}
  .actions .settings-top{width:40px;height:40px}
  .mobile-nav button:not(.plus)>span{display:grid;place-items:center;min-height:25px;font-size:23px;line-height:1}
  .mobile-nav small{font-size:11px}
  .mobile-nav .plus{width:44px;height:44px;transform:none;font-size:21px}
  #timelineFilters,#libraryFilters{display:flex;flex-wrap:nowrap;gap:7px;width:100%;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  #timelineFilters .chip,#libraryFilters .chip{flex:0 0 auto;min-height:40px;padding:9px 14px;border-radius:12px;white-space:nowrap;word-break:keep-all;font-size:13px;line-height:20px}
  .dialog[open]{position:fixed;inset:auto;top:50%;left:50%;width:calc(100vw - 24px);max-width:440px;max-height:calc(100dvh - 24px);margin:0;transform:translate(-50%,-50%);overflow-x:hidden}
  .dialog[open]>.dialog-card{width:100%;max-width:100%;max-height:calc(100dvh - 24px);overflow-x:hidden;overflow-y:auto}
  #settingsDialog .settings-shell{width:100%;max-width:100%}
  #recordDialog[open]{top:calc(env(safe-area-inset-top) + 12px);max-height:calc(100dvh - env(safe-area-inset-top) - 24px);transform:translateX(-50%)}
  #recordDialog[open]>.dialog-card{max-height:calc(100dvh - env(safe-area-inset-top) - 24px)}
}

/* Keep iOS Safari at its normal zoom while searching; give the native date input a touch target. */
@media(max-width:820px){
  html,body,.app,.main{max-width:100%;overflow-x:clip}
  .top-search input{min-width:0;font-size:16px}
  .top-search-icon{display:grid;place-items:center;flex:none;transform:none}
  .top-search-icon svg{display:block;width:22px;height:22px}
  .settings-top{display:grid;place-items:center}
  .settings-top svg{display:block;width:22px;height:22px}
  #mobileSearch svg{display:block;width:23px;height:23px}
  body:has(#topSearchInput:focus) .mobile-nav{display:none}
  :is(.dialog,.work-card) .segmented-date .date-value{z-index:2;opacity:.01;pointer-events:auto;cursor:pointer}
}