:root{
  --bg:#f7faff;--panel:#ffffff;--panel-soft:#fbfdff;--line:#dfe9f6;--line-strong:#cbdcf0;
  --text:#142746;--muted:#7286a4;--blue:#5d94dc;--blue-soft:#e8f2ff;--blue-mid:#b9d3f3;
  --shadow:0 20px 60px rgba(88,125,170,.10);--radius:22px;
}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;background:linear-gradient(145deg,#fbfdff,#f4f8ff 55%,#fbfcff);min-height:100vh}
button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit}.app-shell{max-width:1500px;margin:0 auto;min-height:100vh;display:grid;grid-template-columns:190px 1fr;background:rgba(255,255,255,.55);box-shadow:0 0 80px rgba(80,120,165,.08)}
.sidebar{position:sticky;top:0;height:100vh;padding:38px 20px 24px;border-right:1px solid var(--line);background:rgba(255,255,255,.76);display:flex;flex-direction:column}.brand{font:42px/1 Georgia,"Times New Roman",serif;color:#5f8fd0;letter-spacing:.02em;margin:0 0 40px 12px}.side-nav{display:grid;gap:8px}.nav-item{border:0;background:transparent;padding:14px 14px;border-radius:12px;display:flex;align-items:center;gap:14px;font-size:15px;color:#36547d;text-align:left}.nav-item span{width:20px;font-size:22px;font-weight:300}.nav-item.active,.nav-item:hover{background:var(--blue-soft);color:#2e65a9}.side-card{margin-top:auto;color:#53739e;padding:0 8px}.sky-block{height:150px;border-radius:10px;background:linear-gradient(#eaf6ff,#cce8fb 56%,#eef8ff);position:relative;overflow:hidden;border:1px solid #d6e8f7}.sky-block:before,.sky-block:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.65);filter:blur(1px)}.sky-block:before{width:120px;height:45px;left:-20px;bottom:26px}.sky-block:after{width:150px;height:55px;right:-30px;bottom:10px}.side-card p{font:16px/1.55 Georgia,serif;margin:16px 8px 0}.main{padding:40px 48px 100px;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.topbar h1{font-size:28px;margin:3px 0 0;font-weight:500}.eyebrow{margin:0;font-size:11px;letter-spacing:.18em;color:#7c93af}.top-actions{display:flex;gap:8px}.icon-btn{width:42px;height:42px;border:1px solid transparent;border-radius:12px;background:transparent;font-size:22px;display:grid;place-items:center}.icon-btn:hover{background:var(--blue-soft);border-color:var(--line)}
.section{margin-bottom:34px}.section-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}.section-title h2{font:21px Georgia,serif;margin:0}.text-btn{border:0;background:transparent;color:#6484ac;font-size:13px}.shelf-grid{display:grid;grid-template-columns:repeat(2,minmax(250px,1fr));gap:14px}.shelf-card{min-height:138px;border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:22px;display:flex;justify-content:space-between;position:relative;overflow:hidden}.shelf-card:hover{border-color:var(--blue-mid);box-shadow:var(--shadow)}.shelf-card h3{font-size:17px;margin:0 0 8px;font-weight:500}.shelf-card p{font-size:13px;color:var(--muted);margin:0}.shelf-icon{font-size:31px;color:#6d9ddc}.line-art{position:absolute;right:-12px;bottom:-18px;width:110px;height:90px;border:2px solid #8fb5e6;border-radius:50%;opacity:.35}.line-art:after{content:"";position:absolute;left:45px;top:-30px;width:1px;height:120px;background:#8fb5e6;transform:rotate(36deg)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.stat-card{font:inherit;color:inherit;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:16px;display:flex;gap:12px;align-items:center;cursor:pointer;transition:.18s ease}.stat-card:hover{border-color:var(--blue-mid);transform:translateY(-1px);box-shadow:var(--shadow)}.stat-icon{font-size:22px;color:#5f90cf}.stat-card strong{display:block;font-size:18px}.stat-card span{font-size:12px;color:var(--muted)}.stat-card .stat-arrow{margin-left:auto;font-size:22px;color:#86a4c7}.active-filter{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-3px 0 15px;padding:10px 13px;border:1px solid #c9ddf3;border-radius:12px;background:#f2f8ff;color:#4b6e97;font-size:13px}.active-filter button{border:0;background:transparent;color:#4c78ad;cursor:pointer;font-weight:700}
.work-row{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:12px}.work-card{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:10px;min-width:0}.work-card:hover{border-color:var(--blue-mid);box-shadow:var(--shadow)}.cover{aspect-ratio:3/4;border-radius:8px;background:linear-gradient(145deg,#f2f6fb,#e7eff9);overflow:hidden;display:grid;place-items:center;color:#8ca5c2;font-size:12px}.cover img{width:100%;height:100%;object-fit:cover}.work-card h3{font-size:13px;line-height:1.45;margin:10px 0 4px;min-height:38px}.meta{font-size:11px;color:var(--muted)}.progress{height:4px;background:#e7eef8;border-radius:8px;margin-top:12px;overflow:hidden}.progress span{display:block;height:100%;background:#5e96dc}.tags{display:flex;flex-wrap:wrap;gap:7px}.tag{border:1px solid var(--line);background:#fbfdff;color:#526d91;border-radius:999px;padding:7px 11px;font-size:12px}.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}.library-item{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:14px;display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:start}.library-item:hover{border-color:var(--blue-mid)}.library-cover{width:72px;aspect-ratio:3/4;border-radius:8px;background:linear-gradient(145deg,#f1f5fb,#e5edf7);overflow:hidden;display:grid;place-items:center;color:#8ca5c2;font-size:11px}.library-cover img{width:100%;height:100%;object-fit:cover}.library-item h3{font-size:14px;line-height:1.4;margin:0 0 6px}.library-item p{font-size:12px;color:var(--muted);margin:0 0 8px}.bookmark{border:0;background:transparent;color:#507aae;font-size:22px}.focus-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:18px}.focus-tab{flex:1;border:0;background:transparent;padding:13px;color:#7185a1}.focus-tab.active{color:#3272c3;border-bottom:2px solid #4c8bd8}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.filter-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;font-size:12px}.filter-chip.active{background:#5d94dc;color:#fff;border-color:#5d94dc}.empty{padding:70px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line-strong);border-radius:16px;background:rgba(255,255,255,.5)}
.modal{border:0;padding:0;border-radius:24px;max-width:760px;width:min(92vw,760px);background:transparent}.modal::backdrop{background:rgba(39,61,88,.28);backdrop-filter:blur(6px)}.modal-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 35px 100px rgba(55,82,120,.25)}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.modal-head h2{margin:3px 0 0;font-size:23px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid label{font-size:12px;color:#607694;display:grid;gap:7px}.form-grid .wide{grid-column:1/-1}input,select,textarea{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fbfdff;color:var(--text);width:100%}textarea{resize:vertical}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.primary,.secondary{border-radius:12px;padding:11px 18px}.primary{border:0;background:#5d94dc;color:#fff}.secondary{border:1px solid var(--line);background:#fff}.detail-card{max-height:90vh;overflow:auto}.detail-top{display:grid;grid-template-columns:150px 1fr;gap:22px}.detail-cover{width:150px;aspect-ratio:3/4;border-radius:12px;background:linear-gradient(145deg,#f0f5fb,#e2ebf6);overflow:hidden;display:grid;place-items:center;color:#7891ae}.detail-cover img{width:100%;height:100%;object-fit:cover}.cover-actions{display:flex;gap:8px;margin-top:10px}.detail-title h2{font-size:25px;line-height:1.4;margin:0 0 6px}.rating-row{display:flex;align-items:center;gap:14px;margin:18px 0;flex-wrap:wrap}.stars{display:flex;gap:3px}.star{border:0;background:transparent;color:#c9d8ea;font-size:26px;padding:0}.star.active{color:#5d94dc}.rating-editor{display:flex;align-items:center;gap:7px}.rating-step{width:32px;height:32px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#4f719b;font-size:18px;line-height:1}.rating-input{width:62px;padding:7px 8px;text-align:center;font-weight:700;background:#fbfdff}.rating-max{font-size:12px;color:var(--muted);white-space:nowrap}.detail-status{display:flex;gap:8px;flex-wrap:wrap}.status-btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 12px}.status-btn.active{background:#5d94dc;color:#fff;border-color:#5d94dc}.detail-section{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}.detail-section h3{font:17px Georgia,serif;margin:0 0 10px}.metrics{display:grid;gap:10px}.metric-row{display:grid;grid-template-columns:120px 1fr 34px;gap:12px;align-items:center;font-size:13px}.metric-row input{accent-color:#5d94dc;padding:0}.detail-memo{min-height:120px}.search-input{font-size:17px}.search-results{display:grid;gap:8px;margin-top:14px;max-height:55vh;overflow:auto}.search-result{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;justify-content:space-between;align-items:center}.search-result button{border:0;background:transparent;text-align:left;flex:1}.settings-card{border:1px solid var(--line);border-radius:16px;background:#fff;padding:20px;margin-bottom:12px}.settings-card h3{margin:0 0 8px;font-size:16px}.settings-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}.danger{color:#a14a4a}.mobile-nav{display:none}
@media(max-width:980px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.main{padding:24px 18px 100px}.mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:0;right:0;bottom:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom))}.mobile-item,.mobile-add{border:0;background:transparent;display:grid;place-items:center;gap:2px;color:#667e9e}.mobile-item span{font-size:21px}.mobile-item small{font-size:10px}.mobile-item.active{color:#4d8bd7}.mobile-add{width:52px;height:52px;border-radius:50%;background:#5d94dc;color:#fff;font-size:30px;justify-self:center;align-self:end;box-shadow:0 8px 25px rgba(61,123,197,.3)}.work-row{grid-template-columns:repeat(3,minmax(130px,1fr))}.topbar{margin-bottom:24px}}
@media(max-width:640px){.main{padding:18px 14px 92px}.topbar h1{font-size:23px}.top-actions .icon-btn:nth-child(3){display:none}.shelf-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.work-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.library-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.detail-top{grid-template-columns:105px 1fr}.detail-cover{width:105px}.modal-card{padding:18px}.metric-row{grid-template-columns:90px 1fr 30px}}
.crop-modal{max-width:620px}.crop-card{width:min(92vw,620px)}.crop-help{margin:-8px 0 16px;color:var(--muted);font-size:13px;line-height:1.65}.crop-stage{width:min(72vw,330px);aspect-ratio:3/4;margin:0 auto;border-radius:14px;overflow:hidden;background:linear-gradient(145deg,#eef4fb,#dfe9f5);border:1px solid var(--line);touch-action:none;cursor:grab;position:relative}.crop-stage:active{cursor:grabbing}.crop-stage canvas{width:100%;height:100%;display:block}.crop-controls{display:grid;gap:12px;margin-top:18px}.crop-controls label{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center;font-size:13px;color:#607694}.crop-controls input[type=range]{padding:0;accent-color:var(--blue)}
@media(max-width:640px){.crop-stage{width:min(78vw,310px)}.crop-controls label{grid-template-columns:76px 1fr}}
.static-stars{pointer-events:none}.rating-display{gap:8px}.rating-value{font-size:18px;color:#365f91;min-width:32px;text-align:right}