/* PSK brand: approved architectural concrete with shallow raised lettering. */
:root{--concrete:#b9bab6;--brand-blue:#124bd5;--ink:#30343a;--muted:#60656a;background:var(--concrete)}
body{background-color:var(--concrete);background-image:url('concrete-psk.webp');background-repeat:repeat;background-size:480px 480px;background-attachment:fixed}
aside{background-color:#b9bab6;background-image:linear-gradient(#c0c1bf29,#adb0b226),url('concrete-psk.webp');background-size:auto,480px 480px;border-right:1px solid #777d814d;box-shadow:inset -1px 0 0 #ffffff5c,3px 0 12px #313b4512}
.brand{height:auto;min-height:94px;gap:11px;margin-bottom:17px}
.personal-logo{width:89px;height:89px;flex:0 0 89px;background:transparent;border-radius:0;overflow:visible}
.personal-logo img{object-fit:contain;filter:drop-shadow(1px 2px 1px #20293228)}
.brand strong{font-size:19px;color:#343b45;line-height:1.3;text-shadow:-.6px -.8px 0 #ffffffdc,1px 1.3px 1px #323b433b}
nav{gap:5px}
nav button{display:flex;align-items:center;gap:11px;min-height:48px;padding:8px 10px;color:#353d48;font-size:14px;line-height:1.35;font-weight:650;border-radius:9px}
.nav-label{text-shadow:-.4px -.7px 0 #ffffffdf,.65px 1px 1px #29343e3b}
.nav-symbol{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border:1px solid #ffffff52;border-radius:8px;background:linear-gradient(145deg,#e6e8e4b0,#b1b5b478);box-shadow:-1px -1px 2px #ffffff94,2px 3px 4px #35404a29,inset 0 1px 0 #ffffff8c}
.nav-icon{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(-.4px -.6px .2px #ffffffdf) drop-shadow(.65px .9px .45px #26374638)}
nav button.active{background:#fafbf7ed;color:#214d91;border-color:#ffffffa6;box-shadow:-1px -1px 2px #ffffff59,2px 3px 6px #303c4d26,inset 0 1px 0 #fff}
nav button.active .nav-symbol{color:#164dcc;background:linear-gradient(145deg,#fff,#e1e6ec);border-color:#f8fbff}
nav button:hover{background:#f6f8f29c}
nav button.active:hover{background:#fafbf7}
nav button:active .nav-symbol{box-shadow:inset 1px 1px 2px #35404a25,inset -1px -1px 2px #fff9}
nav button[data-screen='memory']{margin-top:11px;padding-top:15px;border-top:1px solid #737e8747}
.company{color:#424a54;border-top-color:#737e8747;text-shadow:0 1px 0 #ffffff94}
.company small{color:#555e64}
header small,.shortcuts>span{color:#414b50;text-shadow:0 1px 0 #ffffffad}
h1{color:#303740;text-shadow:0 1px 0 #ffffffa8}
.card{background:#fcfaf7fa}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:var(--brand-blue)}
@media(max-width:1180px){.personal-logo{width:70px;height:76px;flex-basis:70px}.brand{gap:8px;min-height:80px}.brand strong{font-size:17px}nav button{font-size:13px;gap:8px;padding-inline:8px}}
@media(max-width:650px){
 body{background-attachment:scroll}
 aside{border-right:0;border-bottom:1px solid #777d814d;box-shadow:inset 0 -1px 0 #ffffff5c,0 2px 8px #313b4512}
 .brand{min-height:46px;margin-bottom:8px;gap:9px}.personal-logo{width:44px;height:44px;flex-basis:44px}.brand strong{font-size:14px;line-height:1.2}
 nav{gap:7px}nav button{min-height:46px;font-size:12px;gap:7px;padding:7px 10px;white-space:nowrap}
 .nav-symbol{width:27px;height:27px;flex-basis:27px;border-radius:7px}.nav-icon{width:19px;height:19px}
 nav button[data-screen='memory']{margin:0;padding:7px 10px;border:1px solid transparent}
}
@media(forced-colors:active){body,aside{background-image:none}.nav-symbol,.nav-icon,.personal-logo img{filter:none;box-shadow:none}.nav-label,.brand strong{text-shadow:none}}

.work-dialog{width:min(680px,calc(100vw - 32px));max-height:90dvh;overflow:auto;border:1px solid #90958d;border-radius:16px;padding:24px;background:#f7f6f1;color:#30343a}.work-dialog::backdrop{background:#20252080}.work-dialog input,.work-dialog select,.work-dialog textarea{max-width:100%;box-sizing:border-box}.work-dialog input[type=checkbox]{width:auto;margin-right:10px}.work-dialog button{margin:8px 8px 8px 0}.mail-draft{min-height:260px}.read-mail{white-space:pre-wrap;overflow-wrap:anywhere}#mailList .actions{flex-wrap:wrap}@media(max-width:600px){.work-dialog{padding:16px}.work-dialog button{width:100%;margin-right:0}}