/* Header additions: retain ColoColors' original centered header and conversion navigation. */
.coloHeaderWithMenu{position:relative;}.headerMenuToggle{appearance:none;-webkit-appearance:none;border:0;cursor:pointer;}.coloColorsMenuToggle{position:absolute;right:1em;top:1em;width:44px;height:44px;border-radius:50%;background:#333;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:11px;}.coloColorsMenuToggle span{display:block;width:100%;height:2px;background:#eee;border-radius:2px;}@media(max-width:600px){.coloColorsMenuToggle{right:.6em;top:.6em;width:38px;height:38px;padding:9px;}}
.headerDrawerOverlay{position:fixed;inset:0;background:rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .2s;z-index:9998;}.headerDrawer{position:fixed;right:0;top:0;width:min(380px,90vw);height:100vh;height:100dvh;box-sizing:border-box;transform:translateX(100%);transition:transform .22s ease;z-index:9999;overflow:auto;padding:22px;}body.headerDrawerOpen{overflow:hidden;}body.headerDrawerOpen .headerDrawerOverlay{opacity:1;pointer-events:auto;}body.headerDrawerOpen .headerDrawer{transform:translateX(0);}
.coloColorsDrawer{background:#fff;color:#333;box-shadow:-8px 0 30px rgba(0,0,0,.18);}.headerDrawerTop{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid #ddd;}.coloDrawerLogo{font-size:1.6em;text-decoration:none;color:#333;}.coloDrawerLogo b{display:inline-grid;align-items:center;text-align:center;width:min-content;aspect-ratio:1;background:#333;color:#eee;border-radius:50%;padding:.2em;margin-right:.12em;}.coloDrawerLogo i{font-style:italic;}.coloColorsDrawer .headerDrawerTop button{appearance:none;border:0;background:none;color:#333;font-size:32px;line-height:1;cursor:pointer;}.headerDrawerNav{padding-top:5px;}.drawerGroup,.drawerSubmenu{padding:14px 0;border-bottom:1px solid #e5e5e5;}.drawerGroupTitle,.drawerSubmenu summary{font-weight:bold;margin-bottom:7px;}.drawerSubmenu summary{cursor:pointer;list-style:none;}.drawerSubmenu summary::-webkit-details-marker{display:none;}.drawerSubmenu summary:after{content:"+";float:right;font-weight:normal;}.drawerSubmenu[open] summary:after{content:"−";}.headerDrawerNav a{display:block;padding:5px 0;text-decoration:none;color:#333;}.headerDrawerNav a:hover{text-decoration:underline;}.drawerMuted{opacity:.55;font-size:.85em;margin-left:6px;}.drawerColorPreview{height:44px;border-radius:5px;border:1px solid #ddd;margin:8px 0;}.drawerSaveColor{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:9px;}.drawerSaveColor select,.drawerSaveColor button{padding:8px;border:1px solid #bbb;background:#fff;color:#333;}.drawerSaveColor button{background:#333;color:#fff;cursor:pointer;}

.userPage{max-width:1100px;margin:0 auto;padding:30px 16px;box-sizing:border-box;}
.userPageTop{display:flex;justify-content:space-between;gap:20px;align-items:center;}
.userGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0;}
.userCard{background:#fff;border:1px solid #ddd;border-radius:12px;padding:20px;box-sizing:border-box;}
.userCard h1,.userCard h2{margin-top:0;}
.userCard form{display:flex;flex-direction:column;gap:9px;margin:12px 0;}
.userCard input,.userCard select{padding:10px;border:1px solid #bbb;border-radius:7px;box-sizing:border-box;}
.inlineForm{display:grid!important;grid-template-columns:1fr auto;align-items:center;}
.checkLabel{display:flex;gap:8px;align-items:center;}
.checkLabel input{width:auto;}
.smallText{font-size:.9em;opacity:.75;}
.listBlock{margin:16px 0;}
.listHeader,.paletteMeta,.paletteActions{display:flex;justify-content:space-between;gap:12px;align-items:center;}
.textButton{background:none!important;color:inherit!important;padding:0!important;text-decoration:underline;}
.savedColors{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.savedColor{width:72px;height:48px;border-radius:7px;display:flex;align-items:end;text-decoration:none;overflow:hidden;border:1px solid rgba(0,0,0,.1);}
.savedColor span{width:100%;padding:3px 4px;background:rgba(255,255,255,.8);font-size:11px;color:#111;text-align:center;}
#paletteInputs{display:flex;flex-wrap:wrap;gap:8px;}
#paletteInputs input[type=color]{width:54px;height:44px;padding:3px;}
.paletteList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.paletteCard{border:1px solid #ddd;border-radius:10px;padding:12px;}
.paletteStrip{display:flex;height:58px;border-radius:8px;overflow:hidden;margin:10px 0;}
.paletteStrip span{flex:1;}
.paletteSectionGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.palettePublicCard{border:1px solid #ddd;border-radius:12px;padding:16px;background:#fff;}
.palettePublicCard h2{margin:0 0 5px;}
.paletteOwner{font-size:.9em;opacity:.72;margin-bottom:10px;}
.paletteTools{margin:12px 0 20px;display:flex;justify-content:flex-end;}
@media(max-width:760px){
 .siteHeaderInner{grid-template-columns:1fr auto;gap:10px;}
 .siteSearch{grid-column:1/-1;grid-row:2;}
 .siteMenuPanel{grid-template-columns:1fr;max-height:75vh;overflow:auto;}
 .userGrid,.paletteList,.paletteSectionGrid{grid-template-columns:1fr;}
 .userPageTop{align-items:flex-start;}
}


/* Login flow */
.loginPage{max-width:620px;}
.loginCard{max-width:520px;margin:20px auto;}
.loginCard>h1{margin-bottom:18px;}
.loginCard form{margin:0;}
.loginCard button:not(.textButton){margin-top:5px;}
.loginRegister{margin:18px 0 0;}
.loginCodeInput{font-size:1.35em;letter-spacing:.28em;text-align:center;}
.resendCodeForm{margin-top:14px!important;align-items:flex-start;}