/* A consistent desk, with color in the details. */
:root{--rose:#bd6681;--rose-soft:#fbedf1;--mint:#6b927e;--mint-soft:#edf5ef;--gold:#bb9348;--gold-soft:#faf3e2}
body:not(.guest){background:radial-gradient(ellipse at 85% 0,#f0e7f54d,transparent 50%),#faf8f5}
.app-shell,.app-shell.atelier-view,.app-shell.creator-view,.app-shell.premium-view{grid-template-columns:210px minmax(0,1fr);max-width:1350px;gap:38px;padding-inline:30px}
.right-rail{display:none!important}
.app-shell #main,.creator-view #main{width:100%;max-width:1000px;margin-inline:auto;min-height:calc(100dvh - 82px);overflow-anchor:none}
#content{min-width:0;min-height:450px}
.topbar{box-shadow:0 4px 20px #48385503}
.sidebar nav button{border:1px solid transparent}
.sidebar nav button.active{background:linear-gradient(100deg,#ebe1f4,#f2eaf8);border-color:#e4d7ed;box-shadow:0 3px 9px #73518a05}
.sidebar nav button:nth-child(5n+2):hover{background:#edf4ee}
.sidebar nav button:nth-child(5n+3):hover{background:#fbede5}
.page-heading{padding:8px 0 23px;margin-top:0;min-height:107px}
.page-heading .eyebrow{color:#a087b0}
.page-heading h1{font-size:32px;letter-spacing:-.7px;margin-bottom:8px}
.page-heading p:not(.eyebrow){color:#8b7f94;line-height:1.7}
.dashboard-welcome{border-radius:25px;background:radial-gradient(ellipse at 88% 100%,#f7dfd2a0,transparent 55%),linear-gradient(110deg,#ece3f4,#f6eff9);padding:34px}
.quick-actions>button:nth-child(1){background:#f5f0fa;border-color:#e9dff2}
.quick-actions>button:nth-child(2){background:#fff5ee;border-color:#f3e5da}
.quick-actions>button:nth-child(3){background:#f0f5ee;border-color:#e1eadb}
.quick-actions>button:hover{box-shadow:0 6px 18px #6b4c7d0d;border-color:#cbb8d9}
.feed-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.post-card{overflow:hidden;border-radius:22px;box-shadow:0 5px 20px #4c365b06;transition:box-shadow .2s,border-color .2s}
.post-card:hover{box-shadow:0 10px 27px #6441780d;border-color:#dccce5}
.post-image-button{aspect-ratio:1.15;background:linear-gradient(135deg,#f1ede5,#eae6ef);display:block;width:100%}
.post-image-button img{height:100%;width:100%;object-fit:cover}
.post-badge{background:#fffdf9ed;color:#755a87;backdrop-filter:blur(8px);border:1px solid #ffffffa0;border-radius:20px;padding:6px 10px;font-size:10px}
.post-meta h3{font-size:16px;line-height:1.5;margin-block:13px 10px;font-weight:600}
.post-meta>.dots{padding-bottom:15px;border-bottom:1px solid #f0eaf2;min-height:32px;gap:5px}
.post-meta>.dots i{border:2px solid #fff;box-shadow:0 0 0 1px #ede7ee;width:18px;height:18px}
.post-bottom{margin-top:12px;gap:8px;flex-wrap:nowrap}
.post-bottom>.muted{font-size:10px;white-space:nowrap;color:#9c8da6}
.post-actions{display:flex;align-items:center;gap:5px;flex-wrap:nowrap}
.social-button{border:1px solid #eee5f1;background:#f9f6fb;color:#8b739b;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;min-width:46px;border-radius:14px;padding:10px 14px;font-size:12px;line-height:1.2;font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0}
.social-button svg,.moment-tools svg,.moment-inspire svg,.moment-tabs svg{height:18px;width:18px;flex-shrink:0}
.social-button.is-compact{padding:8px 10px;min-height:38px;min-width:38px;border-radius:12px;gap:5px;font-size:11px}
.social-button.is-compact:has(span:empty) span{display:none}
.like-button:hover,.like-button.is-active{background:#fbedf1;color:#bd6681;border-color:#f0d2dc}
.like-button.is-active svg{fill:#d9879e;stroke:#c5718b}
.save-button:hover,.save-button.is-active{background:#edf5ef;color:#6b927e;border-color:#d8e8db}
.save-button.is-active svg{fill:#bfd8c7;stroke:#6b927e}
.comment-button:hover{background:#fff4e2;color:#b28a48;border-color:#efdfbd}
.like-pop svg{animation:heart-pop .45s ease}
@keyframes heart-pop{0%,100%{transform:scale(1)}40%{transform:scale(1.3) rotate(-8deg)}70%{transform:scale(.9)}}
.person-card,.book-card,.notification-card,.settings-card{border-radius:20px;border-color:#e9e0ef;box-shadow:0 4px 18px #66508004}
.person-card:nth-child(3n+1){background:linear-gradient(110deg,#f8f3fc,#fffdfa)}
.person-card:nth-child(3n+2){background:linear-gradient(110deg,#f1f6ee,#fffdfa)}
.person-card:nth-child(3n){background:linear-gradient(110deg,#fff2e9,#fffdfa)}
.book-card{border-top:4px solid #ccb7dd;background:#fffdfb}
.book-card:nth-child(3n+2){border-top-color:#b8cfac}.book-card:nth-child(3n){border-top-color:#e3bda7}
.notification-card.new{background:linear-gradient(100deg,#f2eaf8,#fffdfb);border-color:#ddcce9}
.empty-state{border-radius:22px;background:radial-gradient(ellipse at 80% 0,#f4eaf7,transparent 60%),#fffdfb;border:1px dashed #ddcde7;min-height:245px}
.empty-state>span{width:55px;height:55px;display:inline-grid;place-items:center;background:#eee5f5;border-radius:18px;color:#b399c4;margin-bottom:10px}
.loading{min-height:300px;display:flex;align-items:center;justify-content:center;gap:12px;color:#9d88ae}
.loading::before{content:'';height:13px;width:13px;border:2px solid #e2d4ec;border-top-color:#9473ac;border-radius:50%;animation:turn 1s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
/* Dialogs keep one clear header and one scrolling surface. */
dialog{border:1px solid #e9dfee;box-shadow:0 25px 100px #34203e38;border-radius:25px}
dialog::backdrop{background:#3c304b66;backdrop-filter:blur(6px)}
.modal-shell>.dialog-top{background:linear-gradient(100deg,#fffdfa,#faf5fd);border-bottom-color:#ede3f3;padding:19px 25px}
.modal-shell>.dialog-top h2{font-size:23px;letter-spacing:-.3px}
.close{background:#f0e8f6;color:#8c6b9f;border:1px solid #e7daf0;width:38px;height:38px;min-height:38px;border-radius:13px;font-size:22px;display:grid;place-items:center;flex-shrink:0}
.close:hover{background:#e8dcf0;color:#604076}
.close:focus:not(:focus-visible){outline:none}
.modal-header-actions .delete-work{border:0;background:transparent;color:#b78b98;font-size:11px}
.modal-header-actions .delete-work:hover{background:#fceef1}
#smallDialog{width:500px}.modal-scroll{padding:25px}.modal-scroll form>label:first-child{margin-top:0}
#toast{background:#695184;border:1px solid #ffffff30;border-radius:16px;box-shadow:0 7px 35px #5f3f7630;z-index:2000}
/* The color moment: fixed-size workspace, three proper tabs. */
#postDialog{width:min(1060px,calc(100% - 48px));height:min(790px,92dvh);max-height:92dvh}
#postDetail{flex:1;min-height:0;background:#fffdfb}
.moment-tabs{display:flex;align-items:center;gap:7px;padding:10px 25px;background:#fffcfa;border-bottom:1px solid #eee5f2;flex:0 0 auto;overflow-x:auto}
.moment-tabs>button{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;background:transparent;color:#9a87a5;font-size:12px;font-weight:500;white-space:nowrap;padding:11px 17px;min-height:42px;border-radius:12px}
.moment-tabs>button[aria-selected=true]{background:#eee4f6;color:#75518f;border-color:#e4d3ef;font-weight:600}
.moment-tabs>button:nth-child(2)[aria-selected=true]{background:#eaf2e5;color:#6b855c;border-color:#dbe7d2}
.moment-tabs>button:nth-child(3)[aria-selected=true]{background:#fff0df;color:#ad8249;border-color:#efdec4}
.tab-count{padding:2px 6px;background:#ffffffb0;border-radius:6px;font-size:10px}
.moment-layout{display:grid;grid-template-columns:1.04fr 1fr;min-height:100%;align-items:start}
.moment-art{margin:0;padding:24px 22px 20px;background:radial-gradient(ellipse at 20% 30%,#eee5f4,transparent 75%),#f1eee7;position:sticky;top:0;height:calc(min(790px,92dvh) - 139px);min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:start}
.moment-art img{width:100%;max-height:calc(100% - 35px);object-fit:contain;display:block;border-radius:9px;box-shadow:0 7px 28px #43334b10}
.moment-art figcaption{font-size:10px;letter-spacing:.3px;color:#a18fa8;margin-top:19px;text-align:center}
.moment-info{padding:25px 27px 30px;min-width:0}
.moment-byline{display:flex;align-items:center;justify-content:space-between;gap:10px}
.moment-byline .author{font-size:12px;gap:9px;text-align:left;font-weight:600}
.moment-byline .avatar{width:36px;height:36px;border-radius:12px;background:linear-gradient(145deg,#ebddf5,#dac9e7);color:#9a78b0;font-size:11px;flex-shrink:0}
.moment-byline .author small{display:block;font-size:10px;color:#a493ad;font-weight:400;margin-top:3px}
.moment-privacy{padding:6px 9px;border:1px solid #e7edde;color:#96a285;background:#f5f8f0;font-size:9px;white-space:nowrap;border-radius:20px}
.moment-info>h2{font:500 29px/1.25 'Playfair Display',Georgia,serif;letter-spacing:-.6px;margin:20px 0 16px;overflow-wrap:anywhere}
.moment-socials{display:flex;align-items:center;gap:8px;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid #eee6f2}
.moment-socials .follow-button{font-size:11px;margin-left:auto;padding:9px 13px;min-height:41px;border-radius:13px}
.moment-label{font-size:8px;letter-spacing:1.4px;font-weight:600;color:#a48bae;margin:0 0 13px}
.moment-caption{font-size:13px;color:#82758b;line-height:1.9;white-space:pre-wrap;margin:0 0 16px;overflow-wrap:anywhere}
.moment-ai-note{display:flex;gap:10px;align-items:flex-start;background:#f2ecf8;border:1px solid #e8ddf1;border-radius:13px;padding:13px;color:#9781a6;margin:17px 0}
.moment-ai-note>span{font-size:23px}.moment-ai-note>p{font-size:11px;line-height:1.7;margin:0}
.moment-date{font-size:10px;color:#ac9bb5;line-height:1.7;margin:17px 0 23px}
.moment-inspire{width:100%;display:flex;justify-content:center;align-items:center;gap:10px;border-radius:14px;min-height:47px;background:linear-gradient(110deg,#816099,#695184);box-shadow:0 5px 12px #77529216}
.moment-inspire>span{margin-left:auto}.moment-inspire>svg{margin-right:auto}
.moment-tools{display:flex;gap:8px;margin-top:10px}.moment-tools button{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;min-height:42px;border-radius:13px;font-size:11px;padding:10px;background:#fffdfb;border-color:#e5daed;color:#9881a8}
.moment-tools svg{width:16px;height:16px}
.moment-manage,.moment-recipe{margin-top:23px;border:1px solid #e9e2ef;border-radius:13px;background:#faf7fc;padding:0 13px}
.moment-manage summary,.moment-recipe summary{display:flex;align-items:center;justify-content:space-between;padding:13px 0;cursor:pointer;font-size:11px;color:#9c87ac;list-style:none}
.moment-manage summary::-webkit-details-marker,.moment-recipe summary::-webkit-details-marker{display:none}
.moment-manage button{margin:0 0 13px;font-size:11px}.moment-report{font-size:10px;color:#b19ab7;display:block;margin:15px auto 0}
.moment-info section>h3{font-size:17px;margin:0 0 10px;color:#776084}
.moment-help{font-size:11px;color:#a18eaa;line-height:1.8;margin:0 0 17px}
.moment-palette-label{font-size:11px;color:#9d86aa}.moment-palette-label select{font-size:12px;background:#fcf9fe;border-color:#e4d8ed;margin-top:6px;max-width:100%}
.color-match-key{display:flex;align-items:center;gap:10px;color:#b29ebd;font-size:9px;margin:16px 0 10px}
.moment-info .detail-match-grid{gap:10px}
.moment-info .detail-match{padding:13px;border-radius:14px;border-color:#ebe0f0;background:linear-gradient(150deg,#fff,#faf7fc)}
.moment-info .detail-match:nth-child(4n+2){background:linear-gradient(150deg,#fff,#f5f8ef);border-color:#e6eadf}
.moment-info .detail-match:nth-child(4n+3){background:linear-gradient(150deg,#fff,#fdf4eb);border-color:#f2e6dc}
.moment-info .detail-match .dots{display:flex;align-items:center;gap:7px;margin-bottom:10px;color:#b39fc0}
.moment-info .detail-match .dots i{height:24px;width:24px;border:2px solid #fff;box-shadow:0 0 0 1px #e9e0ec}
.moment-info .detail-match b{font-size:13px;color:#80628d}
.moment-info .detail-match small{font-size:10px;line-height:1.7;color:#a490ad}
.moment-confirm{font-size:10px;margin-top:17px;background:#f2f6ed;border-color:#e1e9d7;color:#8c9e79}
.moment-recipe .color-chips{padding-bottom:13px}
#commentForm{background:#f8f3fb;border:1px solid #e9dff0;border-radius:16px;padding:13px;margin:15px 0 22px}
#commentForm textarea{border:0;box-shadow:none;background:transparent;resize:vertical;font-size:12px;margin:0;min-height:80px;padding:4px;color:#7e658d}
.comment-compose-footer{display:flex;gap:9px;align-items:center;justify-content:space-between;border-top:1px solid #eadff0;padding-top:10px}
.comment-compose-footer>span{font-size:9px;line-height:1.6;color:#af99ba;max-width:125px}
.comment-compose-footer>button{font-size:10px;min-height:36px;padding:9px 12px;border-radius:11px}
.moment-comments .comment{border:1px solid #efe5f3;border-radius:15px;margin:10px 0;padding:13px;background:#fff}
.comment-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.comment-heading time{font-size:9px;color:#b49fbf}.comment-heading .author{font-size:11px;gap:8px}.comment-heading .avatar{width:27px;height:27px;border-radius:9px;font-size:9px}
.moment-comments .comment p{font-size:12px;color:#8c7899;margin:12px 0 4px;overflow-wrap:anywhere}.moment-comments .comment .text-button{font-size:9px;min-height:25px;color:#b38b9d}
.comments-empty{text-align:center;padding:25px 10px;color:#b19abb}.comments-empty>span{font-size:30px;color:#d9a6bb}.comments-empty p{font-size:12px;line-height:1.9}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1500px){.app-shell{max-width:1420px;gap:48px}.feed-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.post-meta{padding:16px}.post-bottom{flex-wrap:wrap}.post-actions{margin-left:auto}}
@media(max-width:1000px) and (min-width:761px){.app-shell,.app-shell.atelier-view,.app-shell.creator-view,.app-shell.premium-view{grid-template-columns:180px minmax(0,1fr);padding-inline:22px;gap:23px}.post-meta{padding:14px}.post-bottom{flex-wrap:wrap}.post-actions{margin-left:auto}.moment-info{padding:23px 20px}.moment-art{padding:22px 16px}}
@media(max-width:760px){
 .app-shell,.app-shell.atelier-view,.app-shell.creator-view,.app-shell.premium-view{display:block;padding-inline:16px}.app-shell #main{padding-top:20px;padding-bottom:calc(100px + env(safe-area-inset-bottom));min-height:calc(100dvh - 67px)}
 .page-heading{min-height:99px;padding:0 0 19px;margin-bottom:20px}.page-heading h1{font-size:29px}.page-heading p:not(.eyebrow){font-size:12px}
 .dashboard-welcome{padding:24px;border-radius:22px}.quick-actions{gap:9px}.quick-actions>button{border-radius:16px}.feed-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .post-card{border-radius:18px}.post-image-button{border-radius:17px 17px 0 0;aspect-ratio:1}.post-meta{padding:12px}.post-meta .author{gap:6px;font-size:10px;max-width:100%}.post-meta .author .avatar{width:25px;height:25px;font-size:8px}.post-meta h3{font-size:13px;margin:10px 0;line-height:1.5}.post-meta>.dots{padding-bottom:10px;gap:3px}.post-meta>.dots i{height:13px;width:13px}
 .post-bottom{flex-wrap:wrap;margin-top:8px;gap:8px}.post-bottom>.muted{font-size:9px}.post-actions{width:100%;gap:4px;justify-content:flex-start}.social-button.is-compact{min-width:31px;min-height:34px;padding:7px;gap:4px;font-size:10px;border-radius:10px}.social-button.is-compact svg{height:15px;width:15px}.post-actions .delete-work-icon{padding:6px;margin-left:auto;min-width:25px}.post-actions .delete-work-icon svg{height:14px;width:14px}
 .mobile-nav{background:#fffcfaf5;box-shadow:0 -5px 25px #654b7407;border-top:1px solid #e9deef;padding-top:8px}.mobile-nav button.active{background:#eee2f7;border-radius:15px;color:#8b64a5}
 dialog{border-radius:23px}.modal-shell>.dialog-top{padding:15px 18px}.modal-shell>.dialog-top h2{font-size:21px}.close{height:35px;width:35px;min-height:35px;border-radius:12px}
 #postDialog{height:94dvh;max-height:94dvh;width:calc(100% - 16px);max-width:none;border-radius:23px;margin:auto;overflow:hidden}
 .moment-tabs{padding:9px 12px;gap:4px;justify-content:space-between}.moment-tabs>button{font-size:11px;gap:6px;padding:10px 11px;min-height:40px;justify-content:center;flex:1}.moment-tabs svg{height:15px;width:15px}.tab-count{font-size:9px;padding:2px 4px}
 .moment-layout{display:flex;flex-direction:column;min-height:100%}.moment-art{position:static;width:100%;height:auto;padding:18px;min-height:0;background:linear-gradient(135deg,#f1eaf6,#f3eee4)}.moment-art img{max-height:320px;border-radius:10px;width:100%;box-shadow:0 6px 20px #6951840c}.moment-art figcaption{margin-top:11px;font-size:9px}
 .moment-info{width:100%;padding:21px}.moment-info>h2{font-size:26px;margin:17px 0 15px}.moment-socials{padding-bottom:18px;margin-bottom:20px}.moment-info section>h3{font-size:17px}.moment-caption{font-size:12px}.moment-privacy{font-size:9px}.moment-byline .author{font-size:12px}
 #postDialog[data-tab=colors] .moment-art,#postDialog[data-tab=comments] .moment-art{display:none}
 .moment-tools button{font-size:11px}.moment-info .detail-match{padding:13px}.moment-info .detail-match-grid{gap:10px}.moment-info .detail-match small{font-size:10px}
 #smallDialog{width:calc(100% - 24px);max-width:500px}.modal-scroll{padding:22px}.person-card{padding:17px}.book-card{padding:20px}
}
@media(max-width:360px){.app-shell,.app-shell.atelier-view,.app-shell.creator-view,.app-shell.premium-view{padding-inline:12px}.feed-grid{gap:9px}.post-meta{padding:10px}.post-actions{gap:3px}.social-button.is-compact{padding:6px;min-width:29px}.moment-tabs>button{padding:9px 8px;font-size:10px}.moment-info{padding:18px}}
@media(max-width:760px){.post-actions .delete-work-icon{display:none}}
@media(prefers-reduced-motion:reduce){.like-pop svg,.loading::before{animation:none}}

dialog #toast{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 30px);z-index:20}

/* Reopenable coloring guides and export choices. */
.guide-control{background:linear-gradient(120deg,#f0e7f7,#f4f7ee);border:1px solid #e6dbef;border-radius:15px;padding:14px;margin-bottom:22px}
.guide-control>label{display:flex;align-items:center;gap:11px;margin:0;cursor:pointer;font-size:12px}.guide-control input{accent-color:#806194;flex-shrink:0;width:17px;height:17px}.guide-control strong{display:block;font-size:12px;color:#846595}.guide-control small{display:block;font-size:10px;font-weight:400;color:#a18bad;margin-top:3px}.guide-control>p{font-size:10px;line-height:1.7;color:#9d88aa;margin:10px 0 0}
.guide-download-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.guide-download-options label{display:flex;align-items:flex-start;gap:9px;border:1px solid #e9dff0;border-radius:14px;padding:15px 12px;margin:0;background:#fcf9fe;cursor:pointer}.guide-download-options label:has(input:checked){border-color:#bda2ce;background:#efe5f6}.guide-download-options input{accent-color:#806194;flex-shrink:0;margin-top:3px}.guide-download-options strong{font-size:12px;display:block;color:#856394}.guide-download-options small{font-size:10px;display:block;color:#a28bad;margin-top:4px;line-height:1.6}.guide-legend{display:flex;gap:9px;align-items:center;font-size:12px;margin:15px 0;color:#8c759b}.guide-legend input{accent-color:#806194}#guideDownloadPreview{display:block;width:100%;max-height:300px;object-fit:contain;background:#f2edf5;border-radius:13px;margin:14px 0 20px;border:1px solid #ece3f2}#guideDownloadStatus{font-size:11px;line-height:1.7}
@media(max-width:760px){#postDialog.show-color-guide[data-tab=colors] .moment-art{display:flex}#postDialog.show-color-guide .moment-art img{max-height:300px}.guide-control{padding:13px}.guide-download-options{gap:8px}.guide-download-options label{padding:12px 10px}.guide-download-options strong{font-size:11px}}