/* 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:translate(5px,-3px) rotate(25deg);border-right-color:transparent;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:none;border-right-color:currentColor}
/* Color values use hidden inputs; only Arcano buttons are visible. */
.color-control>.color-picker{flex:0 0 46px;width:46px}
.v2-container-settings .color-picker{flex:0 0 33px;width:33px}
.plain-color-swatch{position:relative;display:inline-block;vertical-align:middle;background:var(--selected-color)!important;box-shadow:inset 0 0 0 4px #21192f;overflow:hidden}
.color-swatch-trigger{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}
.color-swatch-trigger:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.palette-color-well{background:var(--selected-color,#171421)!important}
.palette-color-well.gradient{background:linear-gradient(90deg,var(--selected-color,#171421) 50%,var(--selected-color-2,#171421) 50%)!important}
.palette-color-well>.color-swatch-trigger.second{display:none}
.palette-color-well.gradient>.color-swatch-trigger.first{width:50%}
.palette-color-well.gradient>.color-swatch-trigger.second{display:block;left:50%;width:50%}
input[data-arcano-color],body .palette-color-well.gradient input[data-arcano-color]{display:none!important}
.topbar{position:fixed;top:15px;right:4.5vw;z-index:90;width:max-content;height:auto;padding:0;border:0;background:transparent;box-shadow:none;pointer-events:none;justify-content:flex-end}
.topbar>*{pointer-events:auto}
.tool-section{padding-top:85px;scroll-margin-top:72px}
.brand-copy{display:flex;flex-direction:column;min-width:0;line-height:1}
.brand-name{display:block}
.brand-subtitle{display:block;margin-top:6px;color:#b8a6c4;font:700 9px/1.3 var(--display);letter-spacing:.22px}
.sidebar .brand,.sidebar .sidebar-label,.sidebar .nav-list,#mobile-menu-toggle{user-select:none;-webkit-user-select:none}
.mobile-menu-toggle,.mobile-menu-backdrop{display:none}
@media(max-width:720px){
  .tool-section{padding-top:72px;scroll-margin-top:64px}
  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{top:10px;right:16px}
}
@media(min-width:721px) and (max-width:1120px){.topbar{right:3vw}}
@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}
}