/* Server Log Colors frontend preview: all styling scoped to its own subpage.
 * The underlying .card glass, masked rim and shared design system are untouched.
 * Constants mirror approved Settings/Message Studio tokens.
 */
#screen .slc-intro .slc-header{align-items:center;justify-content:space-between;gap:8px}
#screen .slc-intro .slc-header .eyebrow{
 color:#C9A9F2!important;font-size:11px!important;font-weight:750!important;
 letter-spacing:1.5px!important;line-height:1.5!important;
}
#screen .slc-intro .hint{margin:13px 0 0;line-height:1.55}
#screen .slc-preview-note{color:var(--muted,#a9a2b8);font-size:12px;line-height:1.55;margin:10px 0 0}
#screen .slc-list{padding-top:5px!important;padding-bottom:5px!important}
#screen .slc-entry{border-bottom:1px solid rgba(225,206,246,.095)}
#screen .slc-entry:last-child{border-bottom:0}
#screen .slc-row{
 box-sizing:border-box;display:flex;align-items:center;gap:13px;
 width:100%;min-height:71px;margin:0;padding:13px 0;
 text-align:left;color:inherit;background:transparent;border:0;cursor:pointer;font:inherit;
 -webkit-tap-highlight-color:transparent;
}
#screen .slc-row .slc-preview{
 display:block;flex:0 0 34px;width:34px;height:34px;box-sizing:border-box;
 border-radius:9px;border:1px solid rgba(255,255,255,.3);
 box-shadow:inset 0 1px rgba(255,255,255,.25);
}
/* Swatch backgrounds are applied using JS CSSOM because CSP prohibits inline HTML style attributes. */
#screen .slc-copy{display:flex;flex-direction:column;min-width:0;flex:1;gap:5px}
#screen .slc-copy strong{font-size:14px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
#screen .slc-copy small{font-size:12px;color:var(--sb-secondary,var(--muted,#a9a2b8));line-height:1.45}
#screen .slc-chevron{
 display:block;flex:0 0 16px;width:16px;height:16px;
 stroke:#bda0d7;transition:transform .18s ease;
}
#screen .slc-row[aria-expanded="true"] .slc-chevron{transform:rotate(90deg);stroke:#e5c9ff}
#screen .slc-row:focus-visible{outline:2px solid #b388eb;outline-offset:2px;border-radius:10px}
#screen .slc-editor{
 box-sizing:border-box;margin:0 0 16px;padding:16px 14px 15px;
 border:1px solid rgba(179,136,235,.22);border-radius:17px;
 background:rgba(24,18,36,.37);box-shadow:inset 0 1px rgba(255,255,255,.04);
}
#screen .slc-edit-caption{
 color:#C9A9F2;font-size:11px;font-weight:750;letter-spacing:1.5px;
 line-height:1.5;margin:0 0 12px;
}
#screen .slc-label{display:block;font-size:12px;color:#c6bbd3;font-weight:650;margin:12px 0 7px;line-height:1.3}
#screen .slc-colorrow{display:flex;align-items:center;gap:8px}
#screen .slc-picker{
 position:relative;display:block;flex:0 0 34px;width:34px;height:34px;
 border-radius:9px;overflow:hidden;isolation:isolate;
 border:1px solid rgba(255,255,255,.3);
 box-shadow:inset 0 1px rgba(255,255,255,.25);
}
#screen .slc-picker-chip{position:absolute;inset:0;z-index:1;pointer-events:none}
#screen .slc-picker input[type=color]{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 margin:0!important;opacity:0!important;z-index:2;padding:0!important;
 border:0!important;outline:0!important;box-shadow:none!important;
 background:transparent!important;cursor:pointer;
}
#screen .slc-editor input[type=text]{
 display:block;box-sizing:border-box;min-height:48px;
 padding:11px 13px;width:100%;min-width:0;
 border:1px solid rgba(245,239,255,.14)!important;
 border-radius:var(--sb-input-radius,15px)!important;
 color:var(--text,#f7f4fb)!important;
 background:rgba(31,20,48,.56)!important;
 font-size:16px!important;line-height:1.35;
 caret-color:#b388eb!important;
}
#screen .slc-editor #slc-hex{flex:1}
#screen .slc-editor input[type=text]:is(:focus,:focus-visible){
 outline:0!important;border:2px solid #b388eb!important;
 box-shadow:0 0 0 2px rgba(179,136,235,.23),0 0 15px 4px rgba(179,136,235,.40),0 0 33px 8px rgba(179,136,235,.18)!important;
 background-color:rgba(31,20,48,.72)!important;
}
#screen .slc-editor input[aria-invalid=true]{
 border-color:rgba(243,160,178,.75)!important;
}
#screen .slc-note{margin:9px 0 0;color:var(--muted,#a9a2b8);font-size:12px;line-height:1.5}
#screen .slc-edit-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
#screen .slc-edit-actions button{
 box-sizing:border-box!important;min-width:0!important;width:100%!important;
 height:48px!important;min-height:48px!important;max-height:48px!important;
 margin:0!important;padding:0 8px!important;
 border-radius:var(--sb-control-radius,17px)!important;
 font-size:13px!important;font-weight:650!important;
}
#screen .slc-edit-actions button:disabled{opacity:.45!important;box-shadow:none!important}
#screen .slc-footnote{margin:14px 2px 0;color:var(--muted,#a9a2b8);font-size:12px;line-height:1.6}
@media(prefers-reduced-motion:reduce){
 #screen .slc-chevron{transition:none}
}