/* Color locks keep randomization from changing a role's selected colors. */
.palette-edit-row{grid-template-columns:minmax(0,1fr) 96px 44px 32px 32px 39px}
.palette-lock{position:relative;display:block;width:32px;height:36px;flex:none;border:1px solid #6b597d;border-radius:8px;background:#292136;color:#c5aedd;transition:background .18s,border-color .18s,transform .18s}
.palette-lock:hover{background:#433050;border-color:#b894d0;transform:translateY(-1px)}
.palette-lock:focus-visible{outline:2px solid #f4d69c;outline-offset:2px}
.palette-lock::before{content:"";position:absolute;left:10px;top:6px;width:9px;height:10px;border:2px solid currentColor;border-bottom:0;border-radius:7px 7px 0 0;transform-origin:2px 9px;transform:rotate(30deg);transition:transform .2s,top .2s}
.palette-lock::after{content:"";position:absolute;left:8px;top:16px;width:13px;height:11px;border-radius:2px;background:currentColor;box-shadow:inset 0 0 0 2px #221a31}
.palette-lock[aria-pressed="true"]{background:#49374f;border-color:#d7ad80;color:#f1d19d;box-shadow:0 0 0 2px #d7ad8020}
.palette-lock[aria-pressed="true"]::before{top:6px;transform:rotate(0)}
/* Keep native color inputs as swatches without the browser's extra color-wheel control. */
input[type="color"]{-webkit-appearance:none;appearance:none;min-width:0;overflow:hidden;cursor:pointer}
input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
input[type="color"]::-webkit-color-swatch{border:0;border-radius:5px}
input[type="color"]::-moz-color-swatch{border:0;border-radius:5px}
.color-control>.color-picker{flex:0 0 46px;width:46px}
.v2-container-settings .color-picker{flex:0 0 33px;width:33px}
.mobile-menu-toggle,.mobile-menu-backdrop{display:none}
@media(max-width:720px){
  body{min-width:0;overflow-x:hidden}
  body.mobile-menu-open{overflow:hidden}
  .mobile-menu-toggle{position:fixed;z-index:102;top:10px;left:12px;display:grid;place-items:center;width:39px;height:39px;border:1px solid #765f8d;border-radius:10px;background:linear-gradient(145deg,#3a2a4f,#241b34);color:#f4ddff;box-shadow:0 5px 18px #0006}
  .mobile-menu-toggle:hover{border-color:#c99fe0;background:#50365e}
  .mobile-menu-toggle:focus-visible{outline:2px solid #f4d69c;outline-offset:3px}
  .mobile-menu-bars{display:grid;gap:4px;width:18px}
  .mobile-menu-bars i{display:block;height:2px;width:18px;border-radius:2px;background:currentColor;transition:transform .24s,opacity .18s}
  body.mobile-menu-open .mobile-menu-bars i:first-child{transform:translateY(6px) rotate(45deg)}
  body.mobile-menu-open .mobile-menu-bars i:nth-child(2){opacity:0}
  body.mobile-menu-open .mobile-menu-bars i:last-child{transform:translateY(-6px) rotate(-45deg)}
  .mobile-menu-backdrop{position:fixed;inset:0;z-index:98;display:block;background:#07040ccb;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s}
  body.mobile-menu-open .mobile-menu-backdrop{opacity:1;visibility:visible;pointer-events:auto}
  .app-shell{display:block}
  .sidebar{position:fixed;z-index:100;inset:0 auto 0 0;width:min(300px,86vw);height:100dvh;display:flex;flex-direction:column;padding:17px 14px 18px;border:0;border-right:1px solid #76528f;background:linear-gradient(170deg,#1e1730,#100d1d 78%);box-shadow:18px 0 48px #0009;transform:translateX(-106%);transition:transform .29s cubic-bezier(.22,.8,.2,1);overflow:hidden}
  body.mobile-menu-open .sidebar{transform:translateX(0)}
  .sidebar .brand{display:flex;align-items:center;min-height:45px;margin:0 0 20px;padding-left:49px;font-size:23px}
  .sidebar .brand img{width:39px;height:39px}
  .sidebar .sidebar-label{display:block;padding:0 8px 11px}
  .sidebar .sidebar-foot{display:block;margin-top:auto;padding:13px 9px 0}
  .sidebar .nav-list{display:grid;align-content:start;gap:4px;min-height:0;max-height:none;width:100%;margin:12px 0 0;padding:0 1px 12px;overflow-x:hidden;overflow-y:auto}
  .sidebar .nav-link{display:flex;align-items:center;min-height:45px;width:100%;padding:8px 10px;gap:10px;font-size:12px;white-space:normal}
  .sidebar .nav-icon,.sidebar .nav-link.active .nav-icon{width:27px;height:27px;flex:0 0 27px}
  .sidebar .nav-chevron{display:block;margin-left:auto}
  .main-content{padding:0 16px}
  .topbar{height:59px;padding-left:48px}
}
@media(max-width:550px){
  .palette-edit-row{grid-template-columns:minmax(0,1fr) 42px 32px 28px;gap:7px}
  .palette-edit-row>.text-input{grid-column:1/4;grid-row:1}
  .palette-edit-row>.icon-btn{grid-column:4;grid-row:1;margin-left:0}
  .palette-edit-row>.palette-style-switch{grid-column:1;grid-row:2}
  .palette-edit-row>.palette-color-well{grid-column:2;grid-row:2}
  .palette-edit-row>.palette-lock{grid-column:3;grid-row:2}
  .palette-edit-row>.role-icon-picker{grid-column:4;grid-row:2}
}