:root{--color-text: #000;--color-bg-1: #fff;--color-bg-2: #eee;--color-bg-3: #ddd;--color-bg-4: #ccc;--color-bg-5: #bbb;--color-bg-layer: #0003;--color-border: #b5bec1}html,body,#app{box-sizing:border-box;height:100%}html{line-height:1.15}body{margin:0;min-height:100%;font-size:14px;font-family:sans-serif}img{-webkit-user-drag:none}a[href]{color:#6cf}a{text-decoration:none;&:visited{color:var(--primary-color, #00e)}}button{background-color:inherit;border:none;overflow:hidden;-webkit-user-select:none;user-select:none;&:active{background-color:#dddd}@media (hover: hover) and (pointer: fine){&:hover{background-color:#dddd}}}input{background-color:#ddd7;border:none;padding:6px;font-size:14px;&:focus-visible{outline:none}}:focus-visible{outline:none}.message-log-dialog{--dialog-z-index: 6000}.message-log-dialog::part(content){height:fit-content;margin-top:40px;overflow:visible;background:transparent}.dl-dialog{.title{color:#fff;-webkit-user-select:none;user-select:none;padding:8px;text-align:center;transition:flex-grow .3s ease-out;background-color:var(--dialog-title-color, #008fd6)}.content{width:100%;padding:8px 8px 0;box-sizing:border-box}.footer{text-align:center;margin-top:8px;display:flex;border-top:1px solid #dddd;>button{width:0;flex-grow:1;padding:.6em 0;transition:flex-grow .15s linear;white-space:nowrap;&:active{flex-grow:1.4}@media (hover: hover) and (pointer: fine){&:hover{flex-grow:1.4}}&:not(:last-child){border-right:1px solid #dddd}}}}.dl-dialog-confirm .content{min-width:200px}.dl-user-dialog{--dialog-title-color: #8c5;&::part(content){width:258px;overflow:hidden}.content{.item:not(:first-child){margin-top:8px}.avatar{display:flex;align-items:flex-end;gap:8px;>img{border:2px #ddd solid;width:60px;height:60px;border-radius:30px}}.user-dialog-button{outline:1px #ddd dashed;outline-offset:-.5px;padding:4px 12px}.operations{margin-top:8px}}}.dl-login-dialog{&::part(content){width:258px;overflow:hidden}.title{display:flex;color:#fff;padding:0;-webkit-user-select:none;user-select:none}.title-login,.title-register{padding:8px;text-align:center;transition:flex-grow .3s ease-out;cursor:pointer}.title-login{background-color:#6cf}.title-register{background-color:#f96}.content{display:flex;width:100%;align-items:flex-start;transition:translate .3s ease-out,height .3s ease-out;padding:0;>form{width:100%;box-sizing:border-box;flex-shrink:0;padding:8px 16px 0;text-align:center;>label{display:flex;>input{width:100%}+label{margin-top:16px}.label-name{flex-basis:60px;width:60px;flex-shrink:0;white-space:nowrap;text-align:right;margin-right:8px;line-height:28px}}.form-desc{font-size:12px;padding-left:68px;margin:4px 0;text-align:left;color:#777}}}&[data-type=login]{.title{.title-login{flex-grow:1;cursor:default;-webkit-app-region:drag}.title-register{-webkit-app-region:no-drag}}.content{translate:0;height:80px}.footer button[form=register-form]{display:none}}&[data-type=register]{.title{.title-login{-webkit-app-region:no-drag}.title-register{flex-grow:1;cursor:default;-webkit-app-region:drag}}.content{translate:-100%;height:124px}.footer button[form=login-form]{display:none}}}.update-nickname-dialog{.content{padding:12px;box-sizing:border-box}.update-nickname-label{display:flex;align-items:center;.label-name{flex-basis:36px;flex-shrink:0;text-align:right;margin-right:8px}+.update-nickname-label{margin-top:12px}}}.update-password-dialog{.content{padding:12px;box-sizing:border-box}.update-password-label{display:flex;align-items:center;.label-name{flex-basis:80px;flex-shrink:0;text-align:right;margin-right:8px}+.update-password-label{margin-top:12px}>input{width:100%}}}