:root{--primary:#007bff;--secondary:#6c757d;--success:#28a745;--danger:#dc3545;--warning:#ffc107;--info:#17a2b8;--light:#f8f9fa;--dark:#343a40;--background:#fff;--border:#e0e0e0;--text:#333;--text-h:#000}@media (prefers-color-scheme:dark){:root{--primary:#ff7300;--primary-hover:#e66700;--secondary:#6c757d;--success:#28a745;--danger:#dc3545;--warning:#ffc107;--info:#17a2b8;--light:#f8f9fa;--dark:#343a40;--background:#05070a;--border:#333;--text:#e0e0e0;--text-h:#fff;--secondary-background:#0c1017;--secondary-border:#444}}.counter{color:var(--accent);background:var(--accent-bg);border:2px solid #0000;border-radius:5px;margin-bottom:24px;padding:5px 10px;font-size:16px;transition:border-color .3s}.counter:hover{border-color:var(--accent-border)}.counter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.button{border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:12px 16px;font-size:16px;font-weight:500;text-decoration:none;transition:all .2s;display:inline-flex}.button:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}.button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.button:active{transform:scale(.98)}.hero{position:relative}.hero .base,.hero .framework,.hero .vite{margin:0 auto;inset-inline:0}.hero .base{z-index:0;width:170px;position:relative}.hero .framework,.hero .vite{position:absolute}.hero .framework{z-index:1;height:28px;top:34px;transform:perspective(2000px)rotate(300deg)rotateX(44deg)rotateY(39deg)scale(1.4)}.hero .vite{z-index:0;width:auto;height:26px;top:107px;transform:perspective(2000px)rotate(300deg)rotateX(40deg)rotateY(39deg)scale(.8)}.ticks{width:100%;position:relative}.ticks:before,.ticks:after{content:"";border:5px solid #0000;position:absolute;top:-4.5px}.ticks:before{border-left-color:var(--border);left:0}.ticks:after{border-right-color:var(--border);right:0}body{margin:0}.app-layout{background-color:var(--background);flex-direction:row;width:100%;height:100vh;display:flex}.app-layout .main-content{flex-direction:column;flex:1;width:100%;display:flex;overflow-y:auto}.page{padding:30px}.page .page-title{color:var(--text-h);margin-bottom:24px;font-size:32px}.btn-primary{background-color:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:8px 16px}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{color:#fff;cursor:pointer;background-color:#6c757d;border:none;border-radius:4px;padding:8px 16px}.login-page{background:radial-gradient(circle at top, #f79b102e, transparent 34%), linear-gradient(180deg, #0d0b0608, transparent 35%), var(--bg);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.login-page .login-card{background:gray;border-radius:32px;flex-direction:column;align-items:center;gap:24px;width:min(100%,500px);padding:32px;display:flex}.login-page .login-card .login-logo{height:100px}.login-page .login-card .login-title{letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-size:19px;font-weight:700}.login-button{border:1px solid var(--accent-border);background:var(--accent);color:#fff;border-radius:16px;justify-content:center;align-items:center;width:fit-content;min-height:56px;padding:0 20px;font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s,filter .2s;display:inline-flex}.login-button:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 14px 28px #aa3bff3d}.login-button:focus-visible{outline-offset:3px;outline:3px solid #aa3bff59}.login-hint{color:var(--text);word-break:break-word;margin-top:16px;font-size:14px}.login-hint span{color:var(--text-h);font-family:var(--mono)}@media (width<=640px){.login-card{border-radius:22px;padding:28px 22px}}.sidebar{border-right:1px solid var(--border);background-color:var(--secondary-background);flex-direction:column;justify-content:space-between;width:10%;padding:20px;display:flex}.sidebar .sidebar-header{flex-direction:column;justify-content:center;align-items:center;gap:32px;width:100%;display:flex}.sidebar .sidebar-header .sidebar-logo-title{flex-direction:row;justify-content:start;align-items:center;gap:12px;display:flex}.sidebar .sidebar-header .sidebar-logo-title .sidebar-logo{height:50px}.sidebar .sidebar-header .sidebar-logo-title .sidebar-title{color:var(--text-h);font-size:22px;font-weight:700}.sidebar .sidebar-footer{border-top:1px solid var(--border);flex-direction:column;justify-content:flex-start;gap:12px;width:100%;padding-top:20px;display:flex}.sidebar .sidebar-footer .sidebar-profile{flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;display:flex}.sidebar .sidebar-footer .sidebar-profile .sidebar-profile-image{object-fit:cover;border-radius:50%;width:50px;height:50px}.sidebar .sidebar-footer .sidebar-profile .sidebar-profile-info{flex-direction:column;align-items:flex-start;display:flex}.sidebar .sidebar-footer .sidebar-profile .sidebar-profile-info .sidebar-profile-username{color:var(--text-h);font-size:16px;font-weight:600}.sidebar .sidebar-footer .sidebar-profile .sidebar-profile-info .sidebar-profile-role{color:var(--text);font-size:14px}.sidebar .sidebar-button{text-align:center;background:var(--code-bg);width:80%;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:12px 16px;text-decoration:none}.mission-list-card{border:1px solid var(--border);background-color:var(--secondary-background);border-radius:16px;flex-direction:column;gap:16px;padding:20px;display:flex}.mission-list-card .mission-list-header{flex-direction:row;justify-content:space-between;align-items:center;display:flex}.mission-list-card .mission-list-header .mission-list-title{color:var(--text-h);font-size:20px;font-weight:600}.mission-list-card .mission-list-header .mission-list-add button{background-color:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:8px 16px}.mission-list-card .mission-list-header .mission-list-add button:hover{background-color:var(--primary-hover)}.mission-card{border:1px solid var(--border);background-color:var(--background);border-radius:8px;flex-direction:column;gap:8px;padding:16px;display:flex}.mission-card .mission-card-title{color:var(--text-h);font-size:18px;font-weight:600}.mission-card .mission-card-description{color:var(--text);font-size:14px}.mission-dialog{background:var(--secondary-background);width:100%;max-width:500px;color:var(--text);border-radius:8px;flex-direction:column;gap:16px;padding:24px;display:flex;box-shadow:0 4px 12px #00000026}.mission-dialog-header{justify-content:space-between;align-items:center;padding-bottom:8px;font-size:1.25rem;font-weight:700;display:flex}.close-dialog-btn{cursor:pointer;background:0 0;border:none;font-size:1.5rem}.mission-dialog-content{flex-direction:column;gap:14px;display:flex}.mission-dialog-content label{flex-direction:column;gap:6px;font-weight:500;display:flex}.mission-dialog-content input,.mission-dialog-content textarea{border:1px solid #ccc;border-radius:4px;padding:8px;font-size:1rem}.mission-dialog-content textarea{resize:vertical;min-height:100px}.mission-dialog-actions{justify-content:flex-end;gap:12px;margin-top:8px;display:flex}.dialog-overlay{z-index:9999;background-color:#00000080;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.dialog-box{background:var(--secondary-background);width:100%;max-width:500px;color:var(--text);border-radius:8px;flex-direction:column;gap:16px;padding:24px;display:flex;box-shadow:0 4px 12px #00000026}.dialog-header{justify-content:space-between;align-items:center;padding-bottom:8px;font-size:1.25rem;font-weight:700;display:flex}.close-dialog-btn{cursor:pointer;color:var(--text);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;padding:0;font-size:1.5rem;line-height:1;display:inline-flex}.close-dialog-btn:hover{background:var(--primary)}.dialog-content{flex-direction:column;gap:14px;display:flex}.dialog-content .form-group{flex-direction:column;gap:12px;display:flex}.dialog-content .form-group .form-field{flex-direction:column;gap:6px;display:flex}.dialog-content .form-group .label{flex-direction:column;gap:6px;font-weight:500;display:flex}.dialog-content .form-group .dialog-field{flex-direction:column;gap:6px;display:flex}.dialog-content .form-group .dialog-field label{font-weight:500}.dialog-content .form-group .dialog-control{box-sizing:border-box;border:1px solid var(--secondary-border,var(--border));background-color:var(--background);width:100%;color:var(--text);border-radius:10px;outline:none;padding:10px 12px;font-size:1rem}.dialog-content .form-group .dialog-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px #ff730026}.dialog-content .form-group .dialog-textarea{resize:vertical;min-height:120px}.dialog-content .form-group .dialog-select-wrapper{position:relative}.dialog-content .form-group .dialog-select-options{z-index:1;border:1px solid var(--secondary-border,var(--border));background:var(--secondary-background,var(--background));border-radius:10px;max-height:220px;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow:auto;box-shadow:0 12px 24px #0000002e}.dialog-content .form-group .dialog-select-option{width:100%;color:var(--text);text-align:left;cursor:pointer;background:0 0;border:0;padding:10px 12px;display:block}.dialog-content .form-group .dialog-select-option:hover{background:#ffffff0f}.dialog-content .dialog-actions{justify-content:flex-end;gap:12px;margin-top:8px;display:flex}
