/* Share database widths while centering independently of the booklet selector. */
.cb-page{background:#0b0d0f;min-height:calc(100vh - 70px)}
.cb.shell{padding:22px 16px 36px;background:transparent}
.cb .cb-top{padding:18px 20px;margin-bottom:16px;border:0;border-radius:3px;background:var(--cb-inset)}
.cb .cb-top>.cb-actions{gap:8px}
.cb .cb-layout{grid-template-columns:200px 104px minmax(0,1fr) 220px;gap:12px}
.cb .cb-layout>*{min-width:0}
.cb .cb-sidebar{padding:0;background:transparent;border:0;min-height:0}
.cb .cb-progress{min-height:58px;gap:8px;border-radius:3px;background:var(--cb-inset);border-color:transparent}
.cb .cb-progress>svg{padding:7px;background:transparent;border-radius:3px}
.cb .cb-section-title{margin-top:14px;padding:12px 0}
.cb .cb-build-card{padding:10px;border-radius:3px;border-color:transparent}
.cb .cb-account-note{padding:12px 2px;font-size:11px;line-height:1.7}
.cb .cb-gear{gap:6px;padding:2px}
.cb .cb-slot{border-color:transparent;border-radius:3px}
.cb .cb-tabs{justify-content:flex-start;gap:0;padding:4px;background:var(--cb-inset);border:0;border-radius:3px 3px 0 0}
.cb .cb-tab{flex:1;min-width:0;padding:9px 6px;border:0;border-radius:4px;font-size:13px}
.cb .cb-tab.active{background:var(--cb-selected);color:var(--cb-accent)}
.cb .cb-editor{padding:16px;min-height:560px;background:var(--cb-panel);border:0;border-radius:0 0 3px 3px}
.cb .cb-equipment-label{margin-bottom:8px;font-size:12px}
.cb .cb-selected-item{gap:8px;padding-bottom:16px;border-bottom:0}
.cb .cb-item-picker{font-size:14px;background:var(--cb-control)}
.cb .cb-item-picker small{margin-top:3px;font-size:11px}
.cb .cb-selected-item>.cb-actions{flex-wrap:nowrap;gap:5px}
.cb .cb-square{width:32px;height:48px;background:var(--cb-control)}
.cb .cb-block{margin-top:16px}
.cb .cb-block h3,.cb .cb-option-section h3{margin-bottom:10px;color:var(--cb-text);font-size:12px;font-weight:600}
.cb .cb-level-control select{height:32px}
.cb .cb-enchant-ticks{padding-right:0;gap:2px;margin-top:7px}
.cb .cb-enchant-ticks button{font-size:10px;padding:4px 0}
.cb .cb-base-stats .cb-stat-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;background:var(--cb-inset);border:0;border-radius:3px;overflow:hidden}
.cb .cb-base-stats .cb-stat-line:nth-child(n){justify-content:space-between;gap:10px;padding:8px 10px;min-width:0;background:var(--cb-inset);font-size:12px}
.cb .cb-base-stats .cb-stat-line span{color:var(--cb-muted);overflow-wrap:anywhere}
.cb .cb-base-stats .cb-stat-line span:after{content:none}
.cb .cb-base-stats .cb-stat-line strong{flex:none;font-weight:600;font-variant-numeric:tabular-nums}
.cb #cb-editor .cb-equipment-options{padding-bottom:0}
.cb #cb-editor .cb-option-section{margin-top:22px;padding-top:0;border-top:0}
.cb #cb-editor .cb-option-row{gap:8px;margin-bottom:8px}
.cb #cb-editor .cb-option-square{height:36px;width:36px;background:var(--cb-control)}
.cb #cb-editor .cb-option-picker{width:calc(100% - 44px);max-width:calc(100% - 44px);flex:1 1 auto;min-width:0}
.cb #cb-editor .cb-sage-row>.cb-option-picker{width:100%;max-width:100%}
.cb #cb-editor .cb-option-picker summary{min-height:36px;background:var(--cb-control)}
.cb #cb-editor .cb-option-value{margin-left:44px;height:auto;flex-wrap:wrap}
.cb #cb-editor .cb-sage-row>.cb-option-value{margin-left:0}
.cb #cb-editor .cb-magic-attributes{margin-left:44px;gap:8px}
.cb #cb-editor .cb-magic-attributes .cb-option-picker{width:100%;max-width:100%}
.cb .cb-results{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;scrollbar-width:thin}
.cb .cb-results>.cb-empty{grid-column:1/-1;display:grid;place-items:center;text-align:center}
.cb .cb-result{min-width:0;min-height:72px;padding:10px;gap:8px}
.cb .cb-result>span{min-width:0}
.cb .cb-result b{white-space:normal;overflow-wrap:anywhere;line-height:1.5}
.cb .cb-result small{font-size:11px;margin-top:3px}
.cb .cb-stats-tabs{padding:4px;background:var(--cb-inset);border:0;border-radius:3px 3px 0 0}
.cb .cb-stats-tabs button{padding:9px 4px;border-radius:4px}
.cb .cb-stats-tabs button.active{background:var(--cb-selected);color:var(--cb-accent)}
.cb .cb-score{padding:12px;background:var(--cb-panel);border:0;border-radius:0 0 3px 3px}
.cb .cb-score strong{font-size:26px;margin:3px 0}
.cb .cb-stat-body{padding-top:12px;scrollbar-width:thin}
.cb .cb-stat-group{margin-top:14px;border:0;border-radius:3px}
.cb .cb-stat-group h3{padding:8px 10px;color:var(--cb-text);background:var(--cb-panel)}
.cb .cb-stat-group .cb-stat-line,.cb .cb-stat-group summary{padding:6px 10px;font-variant-numeric:tabular-nums}
/* Flat workbench surfaces; borders are reserved for rarity and focus. */
/* Neutral charcoal palette shared with the item browser. */
.cb.shell{--cb-bg:#0b0d0f;--cb-panel:#1b1d1f;--cb-inset:#17191b;--cb-control:#25272a;--cb-hover:#292b2e;--cb-selected:#303236;--cb-line:#303236;--cb-text:#e2e5e8;--cb-muted:#a3a6ac;--cb-accent:#efb45e;--cb-blue:#efb45e}
.cb .cb-top .cb-btn,.cb .cb-pagination .cb-btn{border-color:transparent;background:var(--cb-control);border-radius:3px}
.cb .cb-top .cb-primary{background:var(--cb-accent);color:#211a11}
.cb .cb-top .cb-btn:hover:not(:disabled),.cb .cb-pagination .cb-btn:hover:not(:disabled){border-color:transparent;background:var(--cb-hover)}
.cb .cb-top .cb-primary:hover:not(:disabled){background:#f2c079;color:#211a11}
.cb .cb-progress:hover:not(:disabled),.cb .cb-build-card:hover:not(:disabled){border-color:transparent;background:var(--cb-control)}
.cb .cb-build-card.active{border-color:transparent;background:var(--cb-selected);box-shadow:none}
.cb .cb-section-title{border:0}
.cb .cb-mini-slots span{border:0;background:var(--cb-control);border-radius:3px}
.cb .cb-slot.selected{outline:1px solid var(--cb-accent);box-shadow:none}
.cb .cb-tabs,.cb .cb-stats-tabs{background:var(--cb-panel)}
.cb .cb-tab,.cb .cb-stats-tabs button{border-radius:3px;background:transparent}
.cb .cb-item-picker,.cb .cb-square,.cb .cb-toolbar input,.cb .cb-toolbar select,.cb .cb-level-control select,.cb .cb-stat-body>input{border-color:transparent;border-radius:3px;background:var(--cb-control)}
.cb .cb-item-picker:hover:not(:disabled),.cb .cb-square:hover{border-color:transparent;background:var(--cb-hover)}
.cb #cb-editor .cb-option-square,.cb #cb-editor .cb-option-picker summary,.cb #cb-editor .cb-option-value input,.cb #cb-editor .cb-option-value button{border-color:transparent;border-radius:3px}
.cb #cb-editor .cb-option-picker summary:hover{background:var(--cb-hover)}
.cb #cb-editor .cb-option-menu{border:0;border-radius:3px;background:var(--cb-control);box-shadow:0 5px 16px #0004}
.cb #cb-editor .cb-option-search{border-color:transparent;border-radius:3px}
.cb .cb-results{border:0;border-radius:3px;background:var(--cb-inset)}
.cb .cb-result{border:0;border-radius:3px}
.cb .cb-stat-group{background:var(--cb-inset)}
.cb .cb-stat-group h3,.cb .cb-stat-group details,.cb .cb-stat-group summary,.cb .cb-stat-group .cb-stat-line{border:0}
.cb .cb-stat-group .cb-stat-line:nth-child(n){background:transparent}
.cb .cb-stat-group summary:hover{background:var(--cb-hover)}
.cb .cb-hint{border:0;border-radius:3px;background:var(--cb-panel)}
.cb .cb-hint,.cb .cb-square,.cb .cb-fluent-chevron{color:#b9bec5}
.cb .cb-build-card.active{color:var(--cb-accent)}
.cb .cb-result[class*="grade-"]:hover:not(:disabled),.cb .cb-result[class*="grade-"]:focus-visible{background:var(--cb-hover)}
.cb .cb-option-list button.selected{background:var(--cb-selected)}
.cb .cb-option-list button:hover:not(:disabled){background:var(--cb-hover)}
.cb .cb-option-picker summary:focus-visible{outline-color:var(--cb-accent)}
.cb .cb-level-control input[type=range]{accent-color:var(--cb-accent)}
.cb .cb-enchant-ticks .active{background:var(--cb-accent);color:#211a11}
.cb .cb-score strong{color:var(--cb-accent)}
.cb .cb-skin-count{color:var(--cb-accent)}
.cb .cb-skin-count small{color:var(--cb-muted)}
.cb .cb-stat-body,.cb .cb-sidebar,.cb .cb-results,.cb .cb-option-list{scrollbar-color:#4b4f54 #191b1d}
@media(min-width:821px) and (max-width:1199px){
 .cb .cb-layout{grid-template-columns:180px 88px minmax(0,1fr)}
 .cb .cb-stats{grid-column:3;position:static}
 .cb .cb-stat-body{max-height:none}
 .cb .cb-results,.cb .cb-base-stats .cb-stat-list{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:820px){
 .cb.shell{padding:16px 12px 28px}
 .cb .cb-top{padding:14px 12px;margin-bottom:14px}
 .cb .cb-layout{grid-template-columns:76px minmax(0,1fr);gap:10px}
 .cb .cb-sidebar{gap:8px}
 .cb .cb-progress{min-height:54px;margin:0;gap:6px}
 .cb .cb-progress>svg{padding:5px}
 .cb .cb-section-title{margin-top:4px;padding:8px 0}
 .cb .cb-editor{padding:12px;min-height:420px}
 .cb .cb-tab{font-size:11px;padding:8px 2px;gap:3px}
 .cb .cb-selected-item{flex-wrap:wrap}
 .cb .cb-selected-item>.cb-actions{width:100%}
 .cb .cb-square{height:30px}
 .cb .cb-results,.cb .cb-base-stats .cb-stat-list{grid-template-columns:minmax(0,1fr)}
 .cb .cb-result{padding:8px;min-height:64px}
 .cb .cb-enchant-ticks{grid-template-columns:repeat(13,minmax(0,1fr))}
 .cb .cb-stats{grid-column:1/-1;position:static}
 .cb .cb-stat-body{max-height:none}
}
@media(max-width:760px){.cb.shell{padding-right:0;padding-left:0}}
@media(max-width:480px){
 .cb .cb-layout{grid-template-columns:minmax(0,1fr)}
 .cb .cb-gear{grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;padding:2px}
 .cb .cb-slot .cb-enchant{font-size:10px}
 .cb .cb-stat-body{grid-template-columns:minmax(0,1fr)}
 .cb .cb-top>.cb-actions .cb-status{width:100%}
}

/* Character management: compact, neutral surfaces without nested outlines. */
.cb .cb-character-dialog{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 40px);border:0;border-radius:4px;background:var(--cb-panel);box-shadow:0 16px 56px #0006}
.cb .cb-character-dialog::backdrop{background:#080808b8;backdrop-filter:blur(2px)}
.cb .cb-character-dialog .cb-dialog-head{padding:16px 20px 10px;border:0;background:var(--cb-panel);gap:16px}
.cb .cb-character-dialog .cb-dialog-head h2{font-size:17px;font-weight:600;line-height:1.4}
.cb .cb-character-dialog .cb-dialog-head .cb-icon{width:30px;height:30px;padding:5px;border:0;border-radius:3px;background:transparent;color:var(--cb-muted)}
.cb .cb-character-dialog .cb-dialog-head .cb-icon:hover{background:var(--cb-selected);color:var(--cb-text)}
.cb .cb-character-dialog .cb-dialog-body{padding:10px 20px 20px;max-height:calc(100dvh - 180px)}
.cb .cb-character-dialog .cb-form-grid{grid-template-columns:1.2fr 1fr .8fr;gap:14px 12px}
.cb .cb-character-dialog .cb-field{min-width:0;gap:6px;color:var(--cb-muted);font-size:12px}
.cb .cb-character-dialog :is(input,select){width:100%;min-width:0;min-height:36px;padding:8px 10px;border:0;border-radius:3px;background:var(--cb-control);color:var(--cb-text);font-size:13px}
.cb .cb-character-dialog .cb-dialog-footer{padding:0 20px 18px;border:0;background:var(--cb-panel);gap:8px}
.cb .cb-character-dialog .cb-btn{min-height:34px;padding:7px 14px;border:0;border-radius:3px;background:var(--cb-control);font-size:12px}
.cb .cb-character-dialog .cb-btn:hover:not(:disabled){background:var(--cb-selected)}
.cb .cb-character-dialog .cb-primary{background:var(--cb-accent);color:#201a12}
.cb .cb-character-dialog .cb-primary:hover:not(:disabled){background:#f5c675;color:#201a12}
.cb .cb-character-dialog .cb-hint{margin:14px 0 0;padding:10px 12px;border:0;border-radius:3px;background:var(--cb-inset);color:var(--cb-muted);line-height:1.7}
.cb .cb-character-list .cb-heading{gap:12px;margin:0 0 12px;font-size:12px}
.cb .cb-character-list .cb-collection-row{gap:12px;margin:6px 0 0;padding:12px;border:0;border-radius:3px;background:var(--cb-inset)}
.cb .cb-character-list .cb-collection-row>div{min-width:0}
.cb .cb-character-list .cb-collection-row b{display:block;font-size:13px;font-weight:500;overflow-wrap:anywhere}
.cb .cb-character-list .cb-collection-row small{color:var(--cb-muted);line-height:1.5;overflow-wrap:anywhere}
.cb .cb-character-list .cb-collection-row .cb-btn{flex-shrink:0}
.cb .cb-character-list .cb-empty{padding:36px 12px;border-radius:3px;background:var(--cb-inset);font-size:13px}
@media(max-width:480px){
 .cb .cb-character-dialog .cb-dialog-head{padding:14px 16px 8px}
 .cb .cb-character-dialog .cb-dialog-body{padding:10px 16px 16px}
 .cb .cb-character-dialog .cb-dialog-footer{padding:0 16px 16px}
 .cb .cb-character-dialog .cb-form-grid{grid-template-columns:1fr 1fr;gap:12px}
 .cb .cb-character-dialog .cb-field:last-child{grid-column:1/-1}
 .cb .cb-character-list .cb-heading{flex-wrap:wrap}
}

.cb .cb-character-dialog select{appearance:none;padding-right:32px}
.cb .cb-character-dialog .cb-field:has(select){position:relative}
.cb .cb-character-dialog .cb-field:has(select)::after{content:"";position:absolute;right:10px;bottom:10px;width:16px;height:16px;background:var(--cb-muted);mask:url("../img/fluent/chevron-down-20-regular.svg") center/contain no-repeat;pointer-events:none}

/* Configured equipment inherits the same hero, rarity palette and rows as item TIPs. */
.cb-configured-tip .a2-tip-body{padding-bottom:10px}
.cb-configured-tip .a2-tip-random>span b{color:#65cd85}
.cb-configured-stones,.cb-configured-sage,.cb-configured-godstone{padding:9px 0;border-bottom:1px solid #3a3c40}
.cb-configured-stone,.cb-configured-godstone{display:flex;align-items:flex-start;gap:9px}
.cb-configured-stone+ .cb-configured-stone{margin-top:8px}
.cb-configured-stone>img,.cb-configured-godstone>img{width:28px;height:32px;object-fit:contain;flex-shrink:0}
.cb-configured-stone>div,.cb-configured-godstone>div{flex:1;min-width:0}
.cb-configured-tip h4{margin:0 0 5px;font-size:12px;color:#b7bcc4;font-weight:500}
.cb-configured-stone-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.cb-configured-stone-grid span{display:flex;flex-wrap:wrap;gap:4px;color:#65c6db;font-size:12px}
.cb-configured-stone-grid b{font-weight:500}
.cb-configured-sage b{color:#eda657}
.cb-configured-godstone p{margin:0;font-size:12px;line-height:1.6;color:#d7e0e8;white-space:pre-line;overflow-wrap:anywhere}
.cb-configured-tip .a2-tip-body>section:last-child{border-bottom:0}

.cb .cb-option-picker summary[class*="grade-"]>span:first-child{color:var(--cb-grade)}
.cb .cb-magic-selected>span:first-child{display:flex;align-items:center;gap:7px}
.cb .cb-magic-selected>span:first-child::before,.cb .cb-option-list button[data-kind="magic"][data-value]:not([data-value=""])::before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--cb-grade)}
.cb-configured-stone-grid span,.cb-configured-stone h4[class*="grade-"]{color:var(--cb-grade,#a5a8ad)}

/* Desktop workbench fills the remaining viewport; tabs stay outside the scroller. */
@media(min-width:1200px){
 html:has(body.aion-builder-page),body.aion-builder-page{height:100%;overflow:hidden}
 .cb-page{height:calc(100dvh - var(--cb-page-top,110px));min-height:0;overflow:hidden}
 .cb.shell{box-sizing:border-box;height:100%;min-height:0;padding-top:16px;padding-bottom:12px;display:flex;flex-direction:column}
 .cb .cb-top,.cb .cb-banner{flex-shrink:0}
 .cb .cb-layout{flex:1;min-height:0;grid-template-rows:minmax(0,1fr);align-items:stretch}
 .cb .cb-layout>.cb-workspace{min-height:0;display:flex;flex-direction:column}
 .cb .cb-tabs{flex-shrink:0}
 .cb #cb-editor{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#4b4f54 #191b1d;scrollbar-gutter:stable}
 .cb #cb-editor .cb-results{max-height:none;overflow:visible}
 .cb #cb-editor .cb-option-picker[open]>.cb-option-menu{position:relative;top:0;margin-top:4px}
 .cb .cb-sidebar{height:auto;max-height:none;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
 .cb .cb-gear{align-content:start;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
 .cb .cb-stats{position:static;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
 .cb .cb-stat-body{max-height:none;overflow:visible}
}

/* Separate tab navigation and editing into two aligned surfaces. */
.cb .cb-workspace{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0;background:transparent;border:0}
.cb .cb-workspace>.cb-tabs{flex-shrink:0;padding:4px;border:0;border-radius:3px;background:var(--cb-panel)}
.cb .cb-workspace>.cb-editor{border-radius:3px}
@media(max-width:820px){.cb .cb-workspace{gap:8px}}

/* Avoid stacking search-input and first-group margins. */
.cb .cb-stat-body>#cb-stat-search{display:block;margin-bottom:0}
.cb #cb-stat-search+.cb-stat-group{margin-top:8px}