/* ROYALS888 Phase 16: design-only visual consistency for existing templates */
:root{--r16-surface:#17131e;--r16-border:#5b3544;--r16-accent:#e3b778;--r16-text:#f8eff3}
.da-layout .da-content :is(.panel,.card,.da-card,.formbox,.admin-card),
.af-shell :is(.af-card,.card,.panel),.ap-shell :is(.ap-card,.card,.panel){
 border-radius:16px;box-shadow:0 10px 30px #0004,inset 0 1px #fff1;
}
.da-layout :is(.da-card,.panel,.formbox) :is(h2,h3),
.af-shell :is(h2,h3),.ap-shell :is(h2,h3){letter-spacing:-.02em}
.da-layout :is(.da-table-wrap,.table-responsive,.table-container),
.af-shell :is(.af-table-wrap,.table-responsive),
.ap-shell :is(.ap-table-wrap,.table-responsive){
 max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
 scrollbar-width:thin;scrollbar-color:#8e435b #211725
}
.da-layout :is(.da-table-wrap,.table-responsive,.table-container) table,
.af-shell :is(.af-table-wrap,.table-responsive) table,
.ap-shell :is(.ap-table-wrap,.table-responsive) table{min-width:520px}
.da-layout :is(input,textarea,select):focus-visible,
.af-shell :is(input,textarea,select):focus-visible,
.ap-shell :is(input,textarea,select):focus-visible{outline:2px solid #e3b778;outline-offset:1px}
.da-layout :is(button,a):focus-visible,.af-shell :is(button,a):focus-visible,
.ap-shell :is(button,a):focus-visible{outline:2px solid #e3b778;outline-offset:2px}
.da-layout :is(.da-modal,[role=dialog]),.af-shell [role=dialog],.ap-shell [role=dialog]{
 max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overflow-y:auto
}
.da-layout :is(.da-grid,.da-form-grid,.da-actions) > *,
.af-shell :is(.af-grid,.af-form-grid) > *,
.ap-shell :is(.ap-grid,.ap-form-grid) > *{min-width:0}
@media(max-width:700px){
 .da-layout .da-content{padding:12px!important}
 .da-layout :is(.da-grid,.da-form-grid){gap:12px}
 .da-layout :is(.da-card,.panel,.formbox){max-width:100%}
 .da-layout :is(input,select,textarea),.af-shell :is(input,select,textarea),
 .ap-shell :is(input,select,textarea){font-size:16px}
 .da-layout .da-actions{flex-wrap:wrap}
 .da-layout .da-topbar{gap:8px}
}
@media(max-width:420px){
 .da-layout .da-topbar h1{overflow-wrap:anywhere}
 .da-layout .da-stat{min-width:0}
 .af-shell,.ap-shell{max-width:100%;overflow-x:clip}
}
@media(prefers-reduced-motion:reduce){
 .da-layout *, .af-shell *, .ap-shell *{scroll-behavior:auto!important}
}