/* Palette and comic treatments adapted from wannexus/Vps, commit 63786e3. */
:root { --vps-pink:#FF6B9D; --vps-yellow:#FFC75F; --vps-blue:#5BC0EB; --vps-mint:#7DFFB3; --vps-ink:#20202c; --vps-paper:#fff5e6; }
body { font-family: ui-rounded,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; color:var(--vps-ink); }
body.task-login { background:linear-gradient(135deg,#FF6B9D 0%,#FFC75F 48%,#5BC0EB 100%); min-height:100vh; }
.task-login #layout { min-height:100vh; height:auto; padding:54px 24px; align-items:center; justify-content:center; overflow:visible; }
.task-login #layout-content.vps-login-card { flex:0 1 440px; width:440px; max-width:100%; padding:34px 32px 24px; margin:0; background:#fff; border:4px solid #171717; border-radius:26px; box-shadow:7px 7px 0 #171717; transform:rotate(-1.3deg); overflow:visible; position:relative; z-index:1; }
.vps-brand { display:flex; align-items:center; justify-content:center; gap:17px; margin:0 0 24px; }
.vps-brand-icon { display:flex; align-items:center; justify-content:center; width:72px; height:72px; background:var(--vps-blue); color:white; border:3px solid #171717; border-radius:16px; box-shadow:3px 3px 0 #171717; transform:rotate(-7deg); }
.vps-brand-name { font-size:32px; font-weight:850; letter-spacing:-1px; line-height:1.25; }
.vps-brand-stars { display:flex; gap:8px; font-size:20px; line-height:1.2; margin-top:4px; }
.vps-brand-stars span:nth-child(1) { color:#d99016; }.vps-brand-stars span:nth-child(2) { color:#e9437f; }.vps-brand-stars span:nth-child(3) { color:#189856; }
.vps-login-title { background:var(--vps-yellow); border:3px solid #171717; border-radius:14px; box-shadow:2px 2px 0 #171717; padding:12px; font-size:23px; font-weight:800; text-align:center; transform:rotate(1.5deg); }
.vps-login-intro { text-align:center; margin:17px 0 22px; color:#5b5865; font-size:14px; }
.task-login #login-form { width:100%; margin:0; }
.task-login #login-form .form-group { margin-bottom:18px; }
.task-login #login-form .input-group { border:3px solid #171717; border-radius:12px; overflow:hidden; background:#fff; }
.task-login #login-form .input-group:focus-within { box-shadow:0 0 0 4px rgba(91,192,235,.4); background:#fff5e6; }
.task-login #login-form .input-group-text { border:0; background:#fff5e6; color:#35313f; padding:10px 13px; }
.task-login #login-form input.form-control { border:0; min-height:49px; padding:10px 12px; background:transparent; font-size:16px; box-shadow:none; color:#20202c; }
.task-login #login-form .formbuttons { margin:22px 0 0; }
.task-login #login-form button[type=submit] { width:100%; min-height:52px; background:var(--vps-pink); color:#25202a; border:3px solid #171717; border-radius:12px; box-shadow:3px 3px 0 #171717; font-size:18px; font-weight:800; transition:transform .15s,box-shadow .15s; }
.task-login #login-form button[type=submit]:hover { background:#ff84ad; transform:translate(-1px,-1px); box-shadow:4px 4px 0 #171717; }
.task-login #login-form button[type=submit]:active { transform:translate(2px,2px); box-shadow:1px 1px 0 #171717; }
.task-login #login-footer { color:#625f6b; margin:25px 0 0; font-size:12px; text-align:center; line-height:1.7; }
.task-login #login-footer p { margin:9px 0 0; }
.vps-domain { display:inline-block; padding:3px 11px; background:#d9f5ff; color:#244656; border:2px solid #171717; border-radius:8px; font-size:12px; font-weight:700; letter-spacing:.3px; }
.vps-spark { position:fixed; color:#fff; font-size:74px; text-shadow:3px 3px 0 rgba(0,0,0,.1); pointer-events:none; }
.spark-one { left:8%; top:9%; transform:rotate(12deg); }.spark-two { right:10%; top:18%; font-size:90px; }.spark-three { left:14%; bottom:11%; font-size:50px; }.spark-four { right:7%; bottom:8%; transform:rotate(-12deg); }
body:not(.task-login) #layout-menu { background:#fff5e6; border-right:3px solid #171717; }
body:not(.task-login) #taskmenu a { color:#20202c; border:2px solid transparent; border-radius:12px; margin:6px; font-weight:700; }
body:not(.task-login) #taskmenu a.selected { background:var(--vps-blue); border-color:#171717; box-shadow:2px 2px 0 #171717; }
body:not(.task-login) #taskmenu a.compose { background:var(--vps-pink); border-color:#171717; box-shadow:2px 2px 0 #171717; }
body:not(.task-login) #layout-sidebar { background:#fffaf3; }
body:not(.task-login) .listing li.selected>a, body:not(.task-login) .listing tr.selected td { background:#d9f5ff; color:#20202c; }
body:not(.task-login) .header { background:#fff5e6; }
body:not(.task-login) .btn-primary { background:var(--vps-blue); border:2px solid #171717; color:#20202c; font-weight:700; border-radius:9px; box-shadow:2px 2px 0 #171717; }
body:not(.task-login) .btn-primary:hover { background:#83d2f1; }
body:not(.task-login) #taskmenu .special-buttons a { font-size:11px; }
@media(max-width:480px) { .task-login #layout { padding:28px 18px; }.task-login #layout-content.vps-login-card { padding:26px 20px 20px; border-radius:22px; transform:none; box-shadow:5px 5px 0 #171717; }.vps-brand-name {font-size:28px;}.vps-brand-icon {width:61px;height:61px;}.vps-spark{font-size:38px;}.spark-three,.spark-four{display:none;} }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }
.task-login #login-form { position:static; top:auto; max-width:none; }
.task-login #layout-content.vps-login-card { flex:0 0 auto; height:auto; min-height:0; }