diff --git a/webclient/dist/css/main.css b/webclient/dist/css/main.css
index 3438db8..295d439 100644
--- a/webclient/dist/css/main.css
+++ b/webclient/dist/css/main.css
@@ -1,2 +1,2 @@
-@charset "UTF-8";@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}.container{padding:34px}.section{margin-bottom:48px}.section-title{margin-bottom:34px}.block{margin-bottom:34px}.block-title{margin-bottom:22px}.text,p{margin-bottom:15px}.hint{margin-top:8px}.list{padding-left:22px;margin-bottom:15px}.list-item{margin-bottom:8px}.list-nested{margin-top:8px}.table{margin-bottom:22px}.table-caption{margin-bottom:8px}.form-group{margin-bottom:15px}.label{margin-bottom:5px;display:block}.input,.select,.textarea{margin-top:5px}.toast{padding:15px}.toast-stack{gap:8px}html{font-size:100%}body{font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:400;line-height:1.6;letter-spacing:0}h1,h2,h3,h4,h5,h6{font-family:"IBM Plex Mono",monospace;font-weight:600;line-height:1.25;margin:0}h1.contrast,h2.contrast,h3.contrast,h4.contrast,h5.contrast,h6.contrast{background:#f8f8f8;color:#0a0a0d}h1{font-size:36px;letter-spacing:-.01em}h2{font-size:28px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px;font-weight:500}.text,p{font-size:16px;line-height:1.6}.text-sm{font-size:13px;line-height:1.4}.text-lg{font-size:17px;line-height:1.6}.text-muted{font-size:13px;color:#aaaeb2}.text-strong,strong{font-weight:600}.text-bold{font-weight:700}.text-italic,em{font-style:italic}.code,code,pre{font-family:"IBM Plex Mono",monospace;font-size:16px;line-height:1.4;background-color:#1a1a23}pre{font-size:16px;line-height:1.6;white-space:pre-wrap}a{font-weight:500;text-decoration:none}.link{font-size:inherit;font-weight:500}.label{font-size:13px;font-weight:500;line-height:1.4}.hint,.meta{font-size:12px;line-height:1.4}.table{font-size:13px;line-height:1.4}.table th{font-weight:600}.table td{font-weight:400}.list{font-size:16px;line-height:1.6}.list-item{font-size:inherit}.modal-title{font-size:20px;font-weight:600}.modal-body{font-size:16px}.toast-title{font-size:14px;font-weight:600}.toast-text{font-size:13px;line-height:1.4}.palette{display:flex;flex-direction:row;gap:8px}.palette .color .color-box{width:100px;height:80px}.bg-primary{background:#f8f8f8}.bg-secondary{background:#00b3ff}.bg-success{background:#0fa}.bg-accent{background:#f0c}.bg-info{background:#8a2ce2}.bg-warning{background:#ffd900}.bg-error{background:#ff3c00}.text-color-primary{color:#f8f8f8}.text-color-secondary{color:#00b3ff}.text-color-success{color:#0fa}.text-color-accent{color:#f0c}.text-color-info{color:#8a2ce2}.text-color-warning{color:#ffd900}.text-color-error{color:#ff3c00}.btn{font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:600;line-height:1;letter-spacing:.04em;padding:12px 22px;border-radius:0;border-width:2px;border-left-width:6px;border-style:solid;border-color:#f8f8f8;text-transform:uppercase;background-color:transparent;transition-duration:.2s;transition-property:background-color,border-color,color}.btn.with-icon{border-left-width:48px;position:relative}.btn.with-icon .ph,.btn.with-icon .ph-bold{position:absolute;color:#0a0a0d;left:-48px;top:0;font-size:28px;height:100%;display:inline-flex;align-items:center;width:48px;justify-content:center;transition-duration:.2s;transition-property:color,left}.btn:hover.with-icon .ph,.btn:hover.with-icon .ph-bold{left:-28px}.btn.btn-primary{color:#f8f8f8;border-color:#f8f8f8}.btn.btn-primary:hover{background-color:#f8f8f8;color:#0a0a0d}.btn.btn-secondary{color:#00b3ff;border-color:#00b3ff}.btn.btn-secondary:hover{background-color:#00b3ff;color:#f8f8f8}.btn.btn-secondary:hover.with-icon .ph,.btn.btn-secondary:hover.with-icon .ph-bold{color:#f8f8f8}.btn.btn-accent{color:#f0c;border-color:#f0c}.btn.btn-accent:hover{background-color:#f0c;color:#f8f8f8}.btn.btn-accent:hover.with-icon .ph,.btn.btn-accent:hover.with-icon .ph-bold{color:#f8f8f8}.btn.btn-danger{color:#ff3c00;border-color:#ff3c00}.btn.btn-danger:hover{background-color:#ff3c00;color:#0a0a0d}.btn.btn-warning{color:#ffd900;border-color:#ffd900}.btn.btn-warning:hover{background-color:#ffd900;color:#0a0a0d}.btn.btn-success{color:#0fa;border-color:#0fa}.btn.btn-success:hover{background-color:#0fa;color:#0a0a0d}.btn.btn-info{color:#8a2ce2;border-color:#8a2ce2}.btn.btn-info:hover{background-color:#8a2ce2;color:#f8f8f8}.btn.btn-info:hover.with-icon .ph,.btn.btn-info:hover.with-icon .ph-bold{color:#f8f8f8}.btn[disabled]{color:#aaaeb2;border-color:#1a1a23;background-color:#1a1a23}.btn[disabled].with-icon .ph,.btn[disabled].with-icon .ph-bold{color:#aaaeb2}.btn[disabled]:hover{background-color:#1a1a23;color:#aaaeb2}.btn[disabled]:hover.with-icon .ph,.btn[disabled]:hover.with-icon .ph-bold{color:#aaaeb2}.btn[disabled].with-icon .ph,.btn[disabled].with-icon .ph-bold{left:-28px}.btn.btn-small{font-size:14px;font-weight:500;padding:8px 8px}.btn.btn-small.with-icon{border-left-width:32px}.btn.btn-small.with-icon .ph,.btn.btn-small.with-icon .ph-bold{left:-40px;font-size:22px}.btn.btn-large{font-size:20px;font-weight:700;padding:15px 48px}.btn-icon{display:flex;justify-content:center;align-items:center;width:30px;height:30px;background:0 0;color:#f8f8f8;font-size:20px;border:0;transition-duration:.2s;transition-property:transform,color;transform:rotate(0)}.btn-icon:hover{transform:rotate(90deg);color:#aaaeb2}.form-group .label{display:flex;flex-direction:column;font-size:17px;max-width:420px;position:relative}.form-group .label .ph{position:absolute;color:#f8f8f8;left:0;bottom:2px;font-size:28px;height:56px;display:inline-flex;align-items:center;width:48px;justify-content:center;transition-duration:.2s;transition-property:color,left}.form-group .label .input{font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:500;line-height:1;letter-spacing:.04em;padding:12px 22px;margin-top:8px;border-radius:0;border-width:2px;border-bottom-width:6px;border-style:solid;border-color:#f8f8f8;color:#f8f8f8;background-color:transparent;transition-duration:.2s;transition-property:background-color,border-color,color}.form-group .label .input:hover{border-bottom-color:#aaaeb2}.form-group .label .input:focus{outline:0;border-color:#00b3ff}.form-group .label .input::-moz-placeholder{color:#aaaeb2}.form-group .label .input::placeholder{color:#aaaeb2}.form-group .label textarea.input{height:120px;line-height:1.25;resize:none}.form-group .label .ph+.input,.form-group .label .ph+.select-wrap .select{padding-left:42px}.form-group .label .select-wrap{margin-top:8px}.form-group .label .select{width:100%;height:56px;margin-top:0;appearance:none;-webkit-appearance:none;-moz-appearance:none}.form-group .label .select:focus{outline:0}.form-group .label .select option{color:#f8f8f8;background:#1a1a23}.form-group .label .select-wrap::after{content:"";position:absolute;right:22px;bottom:18px;transform:translateY(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #f8f8f8;pointer-events:none}.radio{display:inline-flex;flex-direction:row;gap:8px;align-items:center}.radio input[type=radio]{display:none}.radio .radio-control{display:inline-block;border-radius:100%;border:2px solid #f8f8f8;width:20px;height:20px;background:0 0;transition-duration:.2s;transition-property:background,border-color}.radio:hover .radio-control{background:#4a4a57}.radio input[type=radio]:checked+.radio-control{background:#f8f8f8}.radio input[type=radio]:disabled+.radio-control{background:#4a4a57;border-color:#4a4a57}.radio .radio-label{font-size:17px}.checkbox{display:inline-flex;flex-direction:row;gap:8px;align-items:center}.checkbox input[type=checkbox]{display:none}.checkbox .checkbox-control{height:16px;width:30px;border:2px solid #f8f8f8;position:relative;background:0 0;transition-duration:.2s;transition-property:border-color,background;display:block}.checkbox .checkbox-control:before{content:"";display:block;height:20px;width:20px;background:#f8f8f8;position:absolute;left:-6px;top:-4px;transition-duration:.2s;transition-property:left,background}.checkbox:hover .checkbox-control{background:#4a4a57}.checkbox input[type=checkbox]:checked:not(:disabled)+.checkbox-control{background:#00b3ff;border-color:#00b3ff}.checkbox input[type=checkbox]:checked+.checkbox-control:before{left:12px}.checkbox input[type=checkbox]:disabled+.checkbox-control{border-color:#4a4a57}.checkbox input[type=checkbox]:disabled+.checkbox-control:before{background:#4a4a57}.list{display:flex;flex-direction:column;gap:5px;list-style-type:none;padding-left:0}.list .list-item{display:flex;flex-direction:row;align-items:center;gap:8px;margin-left:0}.list.list-ordered{list-style-type:decimal;display:list-item;margin-left:30px}.list.list-ordered .list-item{display:list-item}.list.list-definition{gap:15px}.list.list-definition .list-row{border-left:2px solid #f8f8f8}.list.list-definition .list-row .list-desc::before,.list.list-definition .list-row .list-term::before{content:"";height:2px;width:12px;position:absolute;top:50%;left:0;margin-top:-1px;display:block;background:#f8f8f8}.list.list-definition .list-row .list-desc,.list.list-definition .list-row .list-term{position:relative}.list.list-definition .list-row .list-term{padding-left:18px;font-size:20px}.list.list-definition .list-row .list-desc{padding-left:18px}.list.list-nav{max-width:420px;width:100%;gap:0}.list.list-nav .list-item{display:flex;flex-direction:column;align-items:flex-start;height:50px;margin:0}.list.list-nav .list-item .list-action{display:flex;justify-content:space-between;align-items:center;width:100%;height:100%;padding:8px 12px;border:0;font-size:20px;background:#1a1a23;color:inherit;transition-duration:.2s;transition-property:background}.list.list-nav .list-item .list-action:hover{background:#00b3ff}.list.list-nav .list-item .list-action .list-label{display:flex;flex-direction:row;gap:8px;align-items:center}.list.list-nav .list-item .list-action .list-meta{padding:8px;background:#0fa;color:#0a0a0d;display:flex}.list.list-nav .list-item.list-item-active .list-action{background:#00b3ff}.list.list-actions{width:100%;max-width:420px;gap:22px}.list.list-actions .list-item{justify-content:space-between;align-items:flex-start}.list.list-actions .list-item .list-content{display:flex;flex-direction:column;gap:8px}.list.list-actions .list-item .list-content .list-title{font-size:20px;line-height:1}.badge{background:#f8f8f8;color:#1a1a23;padding:5px 8px;font-size:16px}.badge.badge-success{background:#0fa}.badge.badge-warning{background:#ffd900}.badge.badge-danger,.badge.badge-error{background:#ff3c00}.badge.badge-info{background:#8a2ce2;color:#f8f8f8}.badge.badge-secondary{background:#00b3ff;color:#f8f8f8}.table{text-align:left;border:2px solid #f8f8f8;padding:15px}.table .table-caption{text-align:left;font-size:20px;background:#f8f8f8;width:-moz-max-content;width:max-content;color:#1a1a23;padding:5px 12px;margin-bottom:0}.table .table-row td,.table .table-row th{padding:12px 18px;font-size:16px}.table .table-foot td,.table .table-foot th{padding-top:15px}.toast{position:fixed;bottom:-100px;right:15px;max-width:420px;background:#1a1a23;border:2px solid #f8f8f8;padding:0;opacity:0;transition-duration:.25s;transition-property:opacity,top,bottom}.toast.a-show{bottom:15px;opacity:1}.toast.a-hide{bottom:115px;opacity:0}.toast .toast-content{display:flex;flex-direction:column;gap:0}.toast .toast-content .toast-title{font-size:24px;display:flex;flex-direction:row;gap:8px;align-items:center;color:#0a0a0d;background:#f8f8f8;padding:5px 8px}.toast .toast-content .toast-text{font-size:16px;padding:22px 15px;margin:0}.toast .toast-close{position:absolute;top:0;right:0;color:#0a0a0d;height:40px;width:40px}.toast .toast-close:hover{color:#1a1a23}.toast.toast-success{border-color:#0fa}.toast.toast-success .toast-title{background:#0fa}.toast.toast-warning{border-color:#ffd900}.toast.toast-warning .toast-title{background:#ffd900}.toast.toast-danger{border-color:#ff3c00}.toast.toast-danger .toast-title{background:#ff3c00}.card{max-width:420px;width:100%;border:2px solid #f8f8f8}.card .card-title{color:#0a0a0d;background:#f8f8f8;padding:8px 12px}.card .card-content{padding:15px}.card .card-content .card-thumb{width:100%}.card .card-content p{margin-top:8px;margin-bottom:0}.card .card-footer{padding:8px 15px;padding-bottom:15px}.modal{position:fixed;top:0;bottom:0;left:0;right:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center}.modal .modal-backdrop{position:fixed;z-index:1010;top:0;bottom:0;left:0;right:0;background:#0a0a0d;opacity:0;transition-duration:.25s;transition-property:opacity}.modal .modal-panel{position:relative;z-index:1020;width:100%;max-width:800px;height:auto;min-height:400px;max-height:800px;padding:0;display:flex;flex-direction:column;gap:15px;margin-top:200px;background:#0a0a0d;border:2px solid #f8f8f8;opacity:0;transition-duration:.25s;transition-property:opacity,margin-top}.modal .modal-panel .modal-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-right:15px}.modal .modal-panel .modal-header .modal-title{padding:12px 15px;background:#f8f8f8;color:#0a0a0d;text-transform:uppercase}.modal .modal-panel .modal-body{max-height:700px;overflow-y:auto;padding:18px}.modal .modal-panel .modal-footer{padding:18px}.modal .modal-panel .modal-footer .actions{display:flex;flex-direction:row;justify-content:flex-end;gap:15px;width:100%}.modal.a-show .modal-backdrop{opacity:1}.modal.a-show .modal-panel{opacity:1;margin-top:0}.modal.a-hide .modal-backdrop{opacity:0}.modal.a-hide .modal-panel{opacity:0;margin-top:-200px}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-top:0!important;margin-bottom:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-top:0!important;padding-bottom:0!important}.m-1{margin:5px!important}.mt-1{margin-top:5px!important}.mr-1{margin-right:5px!important}.mb-1{margin-bottom:5px!important}.ml-1{margin-left:5px!important}.mx-1{margin-left:5px!important;margin-right:5px!important}.my-1{margin-top:5px!important;margin-bottom:5px!important}.p-1{padding:5px!important}.pt-1{padding-top:5px!important}.pr-1{padding-right:5px!important}.pb-1{padding-bottom:5px!important}.pl-1{padding-left:5px!important}.px-1{padding-left:5px!important;padding-right:5px!important}.py-1{padding-top:5px!important;padding-bottom:5px!important}.m-2{margin:8px!important}.mt-2{margin-top:8px!important}.mr-2{margin-right:8px!important}.mb-2{margin-bottom:8px!important}.ml-2{margin-left:8px!important}.mx-2{margin-left:8px!important;margin-right:8px!important}.my-2{margin-top:8px!important;margin-bottom:8px!important}.p-2{padding:8px!important}.pt-2{padding-top:8px!important}.pr-2{padding-right:8px!important}.pb-2{padding-bottom:8px!important}.pl-2{padding-left:8px!important}.px-2{padding-left:8px!important;padding-right:8px!important}.py-2{padding-top:8px!important;padding-bottom:8px!important}.m-3{margin:12px!important}.mt-3{margin-top:12px!important}.mr-3{margin-right:12px!important}.mb-3{margin-bottom:12px!important}.ml-3{margin-left:12px!important}.mx-3{margin-left:12px!important;margin-right:12px!important}.my-3{margin-top:12px!important;margin-bottom:12px!important}.p-3{padding:12px!important}.pt-3{padding-top:12px!important}.pr-3{padding-right:12px!important}.pb-3{padding-bottom:12px!important}.pl-3{padding-left:12px!important}.px-3{padding-left:12px!important;padding-right:12px!important}.py-3{padding-top:12px!important;padding-bottom:12px!important}.m-4{margin:15px!important}.mt-4{margin-top:15px!important}.mr-4{margin-right:15px!important}.mb-4{margin-bottom:15px!important}.ml-4{margin-left:15px!important}.mx-4{margin-left:15px!important;margin-right:15px!important}.my-4{margin-top:15px!important;margin-bottom:15px!important}.p-4{padding:15px!important}.pt-4{padding-top:15px!important}.pr-4{padding-right:15px!important}.pb-4{padding-bottom:15px!important}.pl-4{padding-left:15px!important}.px-4{padding-left:15px!important;padding-right:15px!important}.py-4{padding-top:15px!important;padding-bottom:15px!important}.m-5{margin:18px!important}.mt-5{margin-top:18px!important}.mr-5{margin-right:18px!important}.mb-5{margin-bottom:18px!important}.ml-5{margin-left:18px!important}.mx-5{margin-left:18px!important;margin-right:18px!important}.my-5{margin-top:18px!important;margin-bottom:18px!important}.p-5{padding:18px!important}.pt-5{padding-top:18px!important}.pr-5{padding-right:18px!important}.pb-5{padding-bottom:18px!important}.pl-5{padding-left:18px!important}.px-5{padding-left:18px!important;padding-right:18px!important}.py-5{padding-top:18px!important;padding-bottom:18px!important}.m-6{margin:22px!important}.mt-6{margin-top:22px!important}.mr-6{margin-right:22px!important}.mb-6{margin-bottom:22px!important}.ml-6{margin-left:22px!important}.mx-6{margin-left:22px!important;margin-right:22px!important}.my-6{margin-top:22px!important;margin-bottom:22px!important}.p-6{padding:22px!important}.pt-6{padding-top:22px!important}.pr-6{padding-right:22px!important}.pb-6{padding-bottom:22px!important}.pl-6{padding-left:22px!important}.px-6{padding-left:22px!important;padding-right:22px!important}.py-6{padding-top:22px!important;padding-bottom:22px!important}.m-7{margin:26px!important}.mt-7{margin-top:26px!important}.mr-7{margin-right:26px!important}.mb-7{margin-bottom:26px!important}.ml-7{margin-left:26px!important}.mx-7{margin-left:26px!important;margin-right:26px!important}.my-7{margin-top:26px!important;margin-bottom:26px!important}.p-7{padding:26px!important}.pt-7{padding-top:26px!important}.pr-7{padding-right:26px!important}.pb-7{padding-bottom:26px!important}.pl-7{padding-left:26px!important}.px-7{padding-left:26px!important;padding-right:26px!important}.py-7{padding-top:26px!important;padding-bottom:26px!important}.m-8{margin:34px!important}.mt-8{margin-top:34px!important}.mr-8{margin-right:34px!important}.mb-8{margin-bottom:34px!important}.ml-8{margin-left:34px!important}.mx-8{margin-left:34px!important;margin-right:34px!important}.my-8{margin-top:34px!important;margin-bottom:34px!important}.p-8{padding:34px!important}.pt-8{padding-top:34px!important}.pr-8{padding-right:34px!important}.pb-8{padding-bottom:34px!important}.pl-8{padding-left:34px!important}.px-8{padding-left:34px!important;padding-right:34px!important}.py-8{padding-top:34px!important;padding-bottom:34px!important}.m-9{margin:42px!important}.mt-9{margin-top:42px!important}.mr-9{margin-right:42px!important}.mb-9{margin-bottom:42px!important}.ml-9{margin-left:42px!important}.mx-9{margin-left:42px!important;margin-right:42px!important}.my-9{margin-top:42px!important;margin-bottom:42px!important}.p-9{padding:42px!important}.pt-9{padding-top:42px!important}.pr-9{padding-right:42px!important}.pb-9{padding-bottom:42px!important}.pl-9{padding-left:42px!important}.px-9{padding-left:42px!important;padding-right:42px!important}.py-9{padding-top:42px!important;padding-bottom:42px!important}.m-10{margin:48px!important}.mt-10{margin-top:48px!important}.mr-10{margin-right:48px!important}.mb-10{margin-bottom:48px!important}.ml-10{margin-left:48px!important}.mx-10{margin-left:48px!important;margin-right:48px!important}.my-10{margin-top:48px!important;margin-bottom:48px!important}.p-10{padding:48px!important}.pt-10{padding-top:48px!important}.pr-10{padding-right:48px!important}.pb-10{padding-bottom:48px!important}.pl-10{padding-left:48px!important}.px-10{padding-left:48px!important;padding-right:48px!important}.py-10{padding-top:48px!important;padding-bottom:48px!important}*{box-sizing:border-box}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{width:10px;background:#0a0a0d;cursor:pointer}::-webkit-scrollbar-thumb{width:10px;background:#4a4a57;cursor:default}::-webkit-scrollbar-corner{background:0 0;height:1px}::-webkit-scrollbar-button{display:none}*{padding:0;margin:0}body,html{font-family:"IBM Plex Mono",monospace;font-weight:400}body{background-color:#0a0a0d;color:#f8f8f8;font-size:15px;line-height:1.45;letter-spacing:.01em}
+@charset "UTF-8";@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}.container{padding:34px}.section{margin-bottom:48px}.section-title{margin-bottom:34px}.block{margin-bottom:34px}.block-title{margin-bottom:22px}.text,p{margin-bottom:15px}.hint{margin-top:8px}.list{padding-left:22px;margin-bottom:15px}.list-item{margin-bottom:8px}.list-nested{margin-top:8px}.table{margin-bottom:22px}.table-caption{margin-bottom:8px}.form-group{margin-bottom:15px}.label{margin-bottom:5px;display:block}.input,.select,.textarea{margin-top:5px}.toast{padding:15px}.toast-stack{gap:8px}html{font-size:100%}body{font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:400;line-height:1.6;letter-spacing:0}h1,h2,h3,h4,h5,h6{font-family:"IBM Plex Mono",monospace;font-weight:600;line-height:1.25;margin:0}h1.contrast,h2.contrast,h3.contrast,h4.contrast,h5.contrast,h6.contrast{background:#f8f8f8;color:#0a0a0d}h1{font-size:36px;letter-spacing:-.01em}h2{font-size:28px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px;font-weight:500}.text,p{font-size:16px;line-height:1.6}.text-sm{font-size:13px;line-height:1.4}.text-lg{font-size:17px;line-height:1.6}.text-muted{font-size:13px;color:#aaaeb2}.text-strong,strong{font-weight:600}.text-bold{font-weight:700}.text-italic,em{font-style:italic}.code,code,pre{font-family:"IBM Plex Mono",monospace;font-size:16px;line-height:1.4;background-color:#1a1a23}pre{font-size:16px;line-height:1.6;white-space:pre-wrap}a{font-weight:500;text-decoration:none}.link{font-size:inherit;font-weight:500}.label{font-size:13px;font-weight:500;line-height:1.4}.hint,.meta{font-size:12px;line-height:1.4}.table{font-size:13px;line-height:1.4}.table th{font-weight:600}.table td{font-weight:400}.list{font-size:16px;line-height:1.6}.list-item{font-size:inherit}.modal-title{font-size:20px;font-weight:600}.modal-body{font-size:16px}.toast-title{font-size:14px;font-weight:600}.toast-text{font-size:13px;line-height:1.4}.palette{display:flex;flex-direction:row;gap:8px}.palette .color .color-box{width:100px;height:80px}.bg-primary{background:#f8f8f8}.bg-secondary{background:#00b3ff}.bg-success{background:#0fa}.bg-accent{background:#f0c}.bg-info{background:#8a2ce2}.bg-warning{background:#ffd900}.bg-error{background:#ff3c00}.text-color-primary{color:#f8f8f8}.text-color-secondary{color:#00b3ff}.text-color-success{color:#0fa}.text-color-accent{color:#f0c}.text-color-info{color:#8a2ce2}.text-color-warning{color:#ffd900}.text-color-error{color:#ff3c00}.btn{font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:600;line-height:1;letter-spacing:.04em;padding:12px 22px;border-radius:0;border-width:2px;border-left-width:6px;border-style:solid;border-color:#f8f8f8;text-transform:uppercase;background-color:transparent;transition-duration:.2s;transition-property:background-color,border-color,color}.btn.with-icon{border-left-width:48px;position:relative}.btn.with-icon .ph,.btn.with-icon .ph-bold{position:absolute;color:#0a0a0d;left:-48px;top:0;font-size:28px;height:100%;display:inline-flex;align-items:center;width:48px;justify-content:center;transition-duration:.2s;transition-property:color,left}.btn:hover.with-icon .ph,.btn:hover.with-icon .ph-bold{left:-28px}.btn.btn-primary{color:#f8f8f8;border-color:#f8f8f8}.btn.btn-primary:hover{background-color:#f8f8f8;color:#0a0a0d}.btn.btn-secondary{color:#00b3ff;border-color:#00b3ff}.btn.btn-secondary:hover{background-color:#00b3ff;color:#f8f8f8}.btn.btn-secondary:hover.with-icon .ph,.btn.btn-secondary:hover.with-icon .ph-bold{color:#f8f8f8}.btn.btn-accent{color:#f0c;border-color:#f0c}.btn.btn-accent:hover{background-color:#f0c;color:#f8f8f8}.btn.btn-accent:hover.with-icon .ph,.btn.btn-accent:hover.with-icon .ph-bold{color:#f8f8f8}.btn.btn-danger{color:#ff3c00;border-color:#ff3c00}.btn.btn-danger:hover{background-color:#ff3c00;color:#0a0a0d}.btn.btn-warning{color:#ffd900;border-color:#ffd900}.btn.btn-warning:hover{background-color:#ffd900;color:#0a0a0d}.btn.btn-success{color:#0fa;border-color:#0fa}.btn.btn-success:hover{background-color:#0fa;color:#0a0a0d}.btn.btn-info{color:#8a2ce2;border-color:#8a2ce2}.btn.btn-info:hover{background-color:#8a2ce2;color:#f8f8f8}.btn.btn-info:hover.with-icon .ph,.btn.btn-info:hover.with-icon .ph-bold{color:#f8f8f8}.btn[disabled]{color:#aaaeb2;border-color:#1a1a23;background-color:#1a1a23}.btn[disabled].with-icon .ph,.btn[disabled].with-icon .ph-bold{color:#aaaeb2}.btn[disabled]:hover{background-color:#1a1a23;color:#aaaeb2}.btn[disabled]:hover.with-icon .ph,.btn[disabled]:hover.with-icon .ph-bold{color:#aaaeb2}.btn[disabled].with-icon .ph,.btn[disabled].with-icon .ph-bold{left:-28px}.btn.btn-small{font-size:14px;font-weight:500;padding:8px 8px}.btn.btn-small.with-icon{border-left-width:32px}.btn.btn-small.with-icon .ph,.btn.btn-small.with-icon .ph-bold{left:-40px;font-size:22px}.btn.btn-large{font-size:20px;font-weight:700;padding:15px 48px}.btn-icon{display:flex;justify-content:center;align-items:center;width:30px;height:30px;background:0 0;color:#f8f8f8;font-size:20px;border:0;transition-duration:.2s;transition-property:color}.btn-icon .ph{transform:rotate(0);transition-duration:.2s;transition-property:transform}.btn-icon:hover{color:#aaaeb2}.btn-icon:hover .ph{transform:rotate(90deg)}.form-group .label{display:flex;flex-direction:column;font-size:17px;max-width:420px;position:relative}.form-group .label .ph{position:absolute;color:#f8f8f8;left:0;bottom:2px;font-size:28px;height:56px;display:inline-flex;align-items:center;width:48px;justify-content:center;transition-duration:.2s;transition-property:color,left}.form-group .label .input{font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:500;line-height:1;letter-spacing:.04em;padding:12px 22px;margin-top:8px;border-radius:0;border-width:2px;border-bottom-width:6px;border-style:solid;border-color:#f8f8f8;color:#f8f8f8;background-color:transparent;transition-duration:.2s;transition-property:background-color,border-color,color}.form-group .label .input:hover{border-bottom-color:#aaaeb2}.form-group .label .input:focus{outline:0;border-color:#00b3ff}.form-group .label .input::-moz-placeholder{color:#aaaeb2}.form-group .label .input::placeholder{color:#aaaeb2}.form-group .label textarea.input{height:120px;line-height:1.25;resize:none}.form-group .label .ph+.input,.form-group .label .ph+.select-wrap .select{padding-left:42px}.form-group .label .select-wrap{margin-top:8px}.form-group .label .select{width:100%;height:56px;margin-top:0;appearance:none;-webkit-appearance:none;-moz-appearance:none}.form-group .label .select:focus{outline:0}.form-group .label .select option{color:#f8f8f8;background:#1a1a23}.form-group .label .select-wrap::after{content:"";position:absolute;right:22px;bottom:18px;transform:translateY(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #f8f8f8;pointer-events:none}.radio{display:inline-flex;flex-direction:row;gap:8px;align-items:center}.radio input[type=radio]{display:none}.radio .radio-control{display:inline-block;border-radius:100%;border:2px solid #f8f8f8;width:20px;height:20px;background:0 0;transition-duration:.2s;transition-property:background,border-color}.radio:hover .radio-control{background:#4a4a57}.radio input[type=radio]:checked+.radio-control{background:#f8f8f8}.radio input[type=radio]:disabled+.radio-control{background:#4a4a57;border-color:#4a4a57}.radio .radio-label{font-size:17px}.checkbox{display:inline-flex;flex-direction:row;gap:8px;align-items:center}.checkbox input[type=checkbox]{display:none}.checkbox .checkbox-control{height:16px;width:30px;border:2px solid #f8f8f8;position:relative;background:0 0;transition-duration:.2s;transition-property:border-color,background;display:block}.checkbox .checkbox-control:before{content:"";display:block;height:20px;width:20px;background:#f8f8f8;position:absolute;left:-6px;top:-4px;transition-duration:.2s;transition-property:left,background}.checkbox:hover .checkbox-control{background:#4a4a57}.checkbox input[type=checkbox]:checked:not(:disabled)+.checkbox-control{background:#00b3ff;border-color:#00b3ff}.checkbox input[type=checkbox]:checked+.checkbox-control:before{left:12px}.checkbox input[type=checkbox]:disabled+.checkbox-control{border-color:#4a4a57}.checkbox input[type=checkbox]:disabled+.checkbox-control:before{background:#4a4a57}.list{display:flex;flex-direction:column;gap:5px;list-style-type:none;padding-left:0}.list .list-item{display:flex;flex-direction:row;align-items:center;gap:8px;margin-left:0}.list.list-ordered{list-style-type:decimal;display:list-item;margin-left:30px}.list.list-ordered .list-item{display:list-item}.list.list-definition{gap:15px}.list.list-definition .list-row{border-left:2px solid #f8f8f8}.list.list-definition .list-row .list-desc::before,.list.list-definition .list-row .list-term::before{content:"";height:2px;width:12px;position:absolute;top:50%;left:0;margin-top:-1px;display:block;background:#f8f8f8}.list.list-definition .list-row .list-desc,.list.list-definition .list-row .list-term{position:relative}.list.list-definition .list-row .list-term{padding-left:18px;font-size:20px}.list.list-definition .list-row .list-desc{padding-left:18px}.list.list-nav{max-width:420px;width:100%;gap:0}.list.list-nav .list-item{display:flex;flex-direction:column;align-items:flex-start;height:50px;margin:0}.list.list-nav .list-item .list-action{display:flex;justify-content:space-between;align-items:center;width:100%;height:100%;padding:8px 12px;border:0;font-size:20px;background:#1a1a23;color:inherit;transition-duration:.2s;transition-property:background}.list.list-nav .list-item .list-action:hover{background:#00b3ff}.list.list-nav .list-item .list-action .list-label{display:flex;flex-direction:row;gap:8px;align-items:center}.list.list-nav .list-item .list-action .list-meta{padding:8px;background:#0fa;color:#0a0a0d;display:flex}.list.list-nav .list-item.list-item-active .list-action{background:#00b3ff}.list.list-actions{width:100%;max-width:420px;gap:22px}.list.list-actions .list-item{justify-content:space-between;align-items:flex-start}.list.list-actions .list-item .list-content{display:flex;flex-direction:column;gap:8px}.list.list-actions .list-item .list-content .list-title{font-size:20px;line-height:1}.badge{background:#f8f8f8;color:#1a1a23;padding:5px 8px;font-size:16px}.badge.badge-success{background:#0fa}.badge.badge-warning{background:#ffd900}.badge.badge-danger,.badge.badge-error{background:#ff3c00}.badge.badge-info{background:#8a2ce2;color:#f8f8f8}.badge.badge-secondary{background:#00b3ff;color:#f8f8f8}.table{text-align:left;border:2px solid #f8f8f8;padding:15px}.table .table-caption{text-align:left;font-size:20px;background:#f8f8f8;width:-moz-max-content;width:max-content;color:#1a1a23;padding:5px 12px;margin-bottom:0}.table .table-row td,.table .table-row th{padding:12px 18px;font-size:16px}.table .table-foot td,.table .table-foot th{padding-top:15px}.toast{position:fixed;bottom:-100px;right:15px;max-width:420px;background:#1a1a23;border:2px solid #f8f8f8;padding:0;opacity:0;transition-duration:.25s;transition-property:opacity,top,bottom}.toast.a-show{bottom:15px;opacity:1}.toast.a-hide{bottom:115px;opacity:0}.toast .toast-content{display:flex;flex-direction:column;gap:0}.toast .toast-content .toast-title{font-size:24px;display:flex;flex-direction:row;gap:8px;align-items:center;color:#0a0a0d;background:#f8f8f8;padding:5px 8px}.toast .toast-content .toast-text{font-size:16px;padding:22px 15px;margin:0}.toast .toast-close{position:absolute;top:0;right:0;color:#0a0a0d;height:40px;width:40px}.toast .toast-close:hover{color:#1a1a23}.toast.toast-success{border-color:#0fa}.toast.toast-success .toast-title{background:#0fa}.toast.toast-warning{border-color:#ffd900}.toast.toast-warning .toast-title{background:#ffd900}.toast.toast-danger{border-color:#ff3c00}.toast.toast-danger .toast-title{background:#ff3c00}.card{max-width:420px;width:100%;border:2px solid #f8f8f8}.card .card-title{color:#0a0a0d;background:#f8f8f8;padding:8px 12px}.card .card-content{padding:15px}.card .card-content .card-thumb{width:100%}.card .card-content p{margin-top:8px;margin-bottom:0}.card .card-footer{padding:8px 15px;padding-bottom:15px}.modal{position:fixed;top:0;bottom:0;left:0;right:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center}.modal .modal-backdrop{position:fixed;z-index:1010;top:0;bottom:0;left:0;right:0;background:#0a0a0d;opacity:0;transition-duration:.25s;transition-property:opacity}.modal .modal-panel{position:relative;z-index:1020;width:100%;max-width:800px;height:auto;min-height:400px;max-height:800px;padding:0;display:flex;flex-direction:column;gap:15px;margin-top:200px;background:#0a0a0d;border:2px solid #f8f8f8;opacity:0;transition-duration:.25s;transition-property:opacity,margin-top}.modal .modal-panel .modal-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-right:15px}.modal .modal-panel .modal-header .modal-title{padding:12px 15px;background:#f8f8f8;color:#0a0a0d;text-transform:uppercase}.modal .modal-panel .modal-body{max-height:700px;overflow-y:auto;padding:18px}.modal .modal-panel .modal-footer{padding:18px}.modal .modal-panel .modal-footer .actions{display:flex;flex-direction:row;justify-content:flex-end;gap:15px;width:100%}.modal.a-show .modal-backdrop{opacity:1}.modal.a-show .modal-panel{opacity:1;margin-top:0}.modal.a-hide .modal-backdrop{opacity:0}.modal.a-hide .modal-panel{opacity:0;margin-top:-200px}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-top:0!important;margin-bottom:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-top:0!important;padding-bottom:0!important}.m-1{margin:5px!important}.mt-1{margin-top:5px!important}.mr-1{margin-right:5px!important}.mb-1{margin-bottom:5px!important}.ml-1{margin-left:5px!important}.mx-1{margin-left:5px!important;margin-right:5px!important}.my-1{margin-top:5px!important;margin-bottom:5px!important}.p-1{padding:5px!important}.pt-1{padding-top:5px!important}.pr-1{padding-right:5px!important}.pb-1{padding-bottom:5px!important}.pl-1{padding-left:5px!important}.px-1{padding-left:5px!important;padding-right:5px!important}.py-1{padding-top:5px!important;padding-bottom:5px!important}.m-2{margin:8px!important}.mt-2{margin-top:8px!important}.mr-2{margin-right:8px!important}.mb-2{margin-bottom:8px!important}.ml-2{margin-left:8px!important}.mx-2{margin-left:8px!important;margin-right:8px!important}.my-2{margin-top:8px!important;margin-bottom:8px!important}.p-2{padding:8px!important}.pt-2{padding-top:8px!important}.pr-2{padding-right:8px!important}.pb-2{padding-bottom:8px!important}.pl-2{padding-left:8px!important}.px-2{padding-left:8px!important;padding-right:8px!important}.py-2{padding-top:8px!important;padding-bottom:8px!important}.m-3{margin:12px!important}.mt-3{margin-top:12px!important}.mr-3{margin-right:12px!important}.mb-3{margin-bottom:12px!important}.ml-3{margin-left:12px!important}.mx-3{margin-left:12px!important;margin-right:12px!important}.my-3{margin-top:12px!important;margin-bottom:12px!important}.p-3{padding:12px!important}.pt-3{padding-top:12px!important}.pr-3{padding-right:12px!important}.pb-3{padding-bottom:12px!important}.pl-3{padding-left:12px!important}.px-3{padding-left:12px!important;padding-right:12px!important}.py-3{padding-top:12px!important;padding-bottom:12px!important}.m-4{margin:15px!important}.mt-4{margin-top:15px!important}.mr-4{margin-right:15px!important}.mb-4{margin-bottom:15px!important}.ml-4{margin-left:15px!important}.mx-4{margin-left:15px!important;margin-right:15px!important}.my-4{margin-top:15px!important;margin-bottom:15px!important}.p-4{padding:15px!important}.pt-4{padding-top:15px!important}.pr-4{padding-right:15px!important}.pb-4{padding-bottom:15px!important}.pl-4{padding-left:15px!important}.px-4{padding-left:15px!important;padding-right:15px!important}.py-4{padding-top:15px!important;padding-bottom:15px!important}.m-5{margin:18px!important}.mt-5{margin-top:18px!important}.mr-5{margin-right:18px!important}.mb-5{margin-bottom:18px!important}.ml-5{margin-left:18px!important}.mx-5{margin-left:18px!important;margin-right:18px!important}.my-5{margin-top:18px!important;margin-bottom:18px!important}.p-5{padding:18px!important}.pt-5{padding-top:18px!important}.pr-5{padding-right:18px!important}.pb-5{padding-bottom:18px!important}.pl-5{padding-left:18px!important}.px-5{padding-left:18px!important;padding-right:18px!important}.py-5{padding-top:18px!important;padding-bottom:18px!important}.m-6{margin:22px!important}.mt-6{margin-top:22px!important}.mr-6{margin-right:22px!important}.mb-6{margin-bottom:22px!important}.ml-6{margin-left:22px!important}.mx-6{margin-left:22px!important;margin-right:22px!important}.my-6{margin-top:22px!important;margin-bottom:22px!important}.p-6{padding:22px!important}.pt-6{padding-top:22px!important}.pr-6{padding-right:22px!important}.pb-6{padding-bottom:22px!important}.pl-6{padding-left:22px!important}.px-6{padding-left:22px!important;padding-right:22px!important}.py-6{padding-top:22px!important;padding-bottom:22px!important}.m-7{margin:26px!important}.mt-7{margin-top:26px!important}.mr-7{margin-right:26px!important}.mb-7{margin-bottom:26px!important}.ml-7{margin-left:26px!important}.mx-7{margin-left:26px!important;margin-right:26px!important}.my-7{margin-top:26px!important;margin-bottom:26px!important}.p-7{padding:26px!important}.pt-7{padding-top:26px!important}.pr-7{padding-right:26px!important}.pb-7{padding-bottom:26px!important}.pl-7{padding-left:26px!important}.px-7{padding-left:26px!important;padding-right:26px!important}.py-7{padding-top:26px!important;padding-bottom:26px!important}.m-8{margin:34px!important}.mt-8{margin-top:34px!important}.mr-8{margin-right:34px!important}.mb-8{margin-bottom:34px!important}.ml-8{margin-left:34px!important}.mx-8{margin-left:34px!important;margin-right:34px!important}.my-8{margin-top:34px!important;margin-bottom:34px!important}.p-8{padding:34px!important}.pt-8{padding-top:34px!important}.pr-8{padding-right:34px!important}.pb-8{padding-bottom:34px!important}.pl-8{padding-left:34px!important}.px-8{padding-left:34px!important;padding-right:34px!important}.py-8{padding-top:34px!important;padding-bottom:34px!important}.m-9{margin:42px!important}.mt-9{margin-top:42px!important}.mr-9{margin-right:42px!important}.mb-9{margin-bottom:42px!important}.ml-9{margin-left:42px!important}.mx-9{margin-left:42px!important;margin-right:42px!important}.my-9{margin-top:42px!important;margin-bottom:42px!important}.p-9{padding:42px!important}.pt-9{padding-top:42px!important}.pr-9{padding-right:42px!important}.pb-9{padding-bottom:42px!important}.pl-9{padding-left:42px!important}.px-9{padding-left:42px!important;padding-right:42px!important}.py-9{padding-top:42px!important;padding-bottom:42px!important}.m-10{margin:48px!important}.mt-10{margin-top:48px!important}.mr-10{margin-right:48px!important}.mb-10{margin-bottom:48px!important}.ml-10{margin-left:48px!important}.mx-10{margin-left:48px!important;margin-right:48px!important}.my-10{margin-top:48px!important;margin-bottom:48px!important}.p-10{padding:48px!important}.pt-10{padding-top:48px!important}.pr-10{padding-right:48px!important}.pb-10{padding-bottom:48px!important}.pl-10{padding-left:48px!important}.px-10{padding-left:48px!important;padding-right:48px!important}.py-10{padding-top:48px!important;padding-bottom:48px!important}.row{display:flex;flex-direction:row}*{box-sizing:border-box}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{width:10px;background:#0a0a0d;cursor:pointer}::-webkit-scrollbar-thumb{width:10px;background:#4a4a57;cursor:default}::-webkit-scrollbar-corner{background:0 0;height:1px}::-webkit-scrollbar-button{display:none}*{padding:0;margin:0}body,html{font-family:"IBM Plex Mono",monospace;font-weight:400}body{background-color:#0a0a0d;color:#f8f8f8;font-size:15px;line-height:1.45;letter-spacing:.01em}.load-screen{display:none}.load-screen.a-show{display:block}.error-screen{display:none}.error-screen.a-show{display:block}.screen{display:none}.screen.a-show{display:block}.hud{width:100%;padding:18px}.hud>.row{justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}.hud .nav-toggle{font-size:42px;width:50px;height:50px;background:#f8f8f8;color:#0a0a0d}.hud .nav-toggle:hover{color:#f0c}.hud .app-title{padding:8px 15px;text-transform:uppercase}
 /*# sourceMappingURL=main.css.map */
diff --git a/webclient/dist/css/main.css.map b/webclient/dist/css/main.css.map
index e60b25e..e29f6d2 100644
--- a/webclient/dist/css/main.css.map
+++ b/webclient/dist/css/main.css.map
@@ -1 +1 @@
-{"version":3,"sources":["_fonts.scss","_spacing.scss","main.css","ui_components/_typography.scss","ui_components/_palette.scss","ui_components/_buttons.scss","ui_components/_forms.scss","ui_components/_lists.scss","ui_components/_badges.scss","ui_components/_tables.scss","ui_components/_toasts.scss","ui_components/_cards.scss","ui_components/_modals.scss","_utils.scss","_ui.scss","main.scss"],"names":[],"mappings":"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","file":"main.css","sourcesContent":["@font-face {\n  font-family: \"IBM Plex Mono\";\n  src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf\") format(\"truetype\");\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: \"IBM Plex Mono\";\n  src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf\") format(\"truetype\");\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: \"IBM Plex Mono\";\n  src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf\") format(\"truetype\");\n  font-weight: 600;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: \"IBM Plex Mono\";\n  src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf\") format(\"truetype\");\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: \"IBM Plex Mono\";\n  src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf\") format(\"truetype\");\n  font-weight: 400;\n  font-style: italic;\n  font-display: swap;\n}\n","/* =========================\n\t SPACING SCALE\n========================= */\n\n$space-0: 0;\n$space-1: 5px;\n$space-2: 8px;\n$space-3: 12px;\n$space-4: 15px;\n$space-5: 18px;\n$space-6: 22px;\n$space-7: 26px;\n$space-8: 34px;\n$space-9: 42px;\n$space-10: 48px;\n$space-11: 64px;\n$space-12: 80px;\n\n/* aliases for readability */\n$space-xs: $space-1;\n$space-sm: $space-2;\n$space-md: $space-4;\n$space-lg: $space-6;\n$space-xl: $space-8;\n$space-xxl: $space-10;\n\n/* map — for utilities generation */\n$spaces: (\n\t0: $space-0,\n\t1: $space-1,\n\t2: $space-2,\n\t3: $space-3,\n\t4: $space-4,\n\t5: $space-5,\n\t6: $space-6,\n\t7: $space-7,\n\t8: $space-8,\n\t9: $space-9,\n\t10: $space-10\n);\n\n/* =========================\n\t BASE LAYOUT\n========================= */\n\n.container {\n\tpadding: $space-xl;\n}\n\n.section {\n\tmargin-bottom: $space-xxl;\n}\n\n.section-title {\n\tmargin-bottom: $space-xl;\n}\n\n.block {\n\tmargin-bottom: $space-xl;\n}\n\n.block-title {\n\tmargin-bottom: $space-lg;\n}\n\n/* =========================\n\t TEXT & CONTENT\n========================= */\n\np,\n.text {\n\tmargin-bottom: $space-md;\n}\n\n.hint {\n\tmargin-top: $space-sm;\n}\n\n/* =========================\n\t LISTS\n========================= */\n\n.list {\n\tpadding-left: $space-lg;\n\tmargin-bottom: $space-md;\n}\n\n.list-item {\n\tmargin-bottom: $space-sm;\n}\n\n.list-nested {\n\tmargin-top: $space-sm;\n}\n\n/* =========================\n\t TABLES\n========================= */\n\n.table {\n\tmargin-bottom: $space-lg;\n}\n\n.table-caption {\n\tmargin-bottom: $space-sm;\n}\n\n/* =========================\n\t FORMS\n========================= */\n\n.form-group {\n\tmargin-bottom: $space-md;\n}\n\n.label {\n\tmargin-bottom: $space-xs;\n\tdisplay: block;\n}\n\n.input,\n.textarea,\n.select {\n\tmargin-top: $space-xs;\n}\n\n/* =========================\n\t TOASTS\n========================= */\n\n.toast {\n\tpadding: $space-md;\n}\n\n.toast-stack {\n\tgap: $space-sm;\n}\n","@charset \"UTF-8\";\n@font-face {\n  font-family: \"IBM Plex Mono\";\n  src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf\") format(\"truetype\");\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"IBM Plex Mono\";\n  src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf\") format(\"truetype\");\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"IBM Plex Mono\";\n  src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf\") format(\"truetype\");\n  font-weight: 600;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"IBM Plex Mono\";\n  src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf\") format(\"truetype\");\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"IBM Plex Mono\";\n  src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf\") format(\"truetype\");\n  font-weight: 400;\n  font-style: italic;\n  font-display: swap;\n}\n/* =========================\n\t SPACING SCALE\n========================= */\n/* aliases for readability */\n/* map — for utilities generation */\n/* =========================\n\t BASE LAYOUT\n========================= */\n.container {\n  padding: 34px;\n}\n\n.section {\n  margin-bottom: 48px;\n}\n\n.section-title {\n  margin-bottom: 34px;\n}\n\n.block {\n  margin-bottom: 34px;\n}\n\n.block-title {\n  margin-bottom: 22px;\n}\n\n/* =========================\n\t TEXT & CONTENT\n========================= */\np,\n.text {\n  margin-bottom: 15px;\n}\n\n.hint {\n  margin-top: 8px;\n}\n\n/* =========================\n\t LISTS\n========================= */\n.list {\n  padding-left: 22px;\n  margin-bottom: 15px;\n}\n\n.list-item {\n  margin-bottom: 8px;\n}\n\n.list-nested {\n  margin-top: 8px;\n}\n\n/* =========================\n\t TABLES\n========================= */\n.table {\n  margin-bottom: 22px;\n}\n\n.table-caption {\n  margin-bottom: 8px;\n}\n\n/* =========================\n\t FORMS\n========================= */\n.form-group {\n  margin-bottom: 15px;\n}\n\n.label {\n  margin-bottom: 5px;\n  display: block;\n}\n\n.input,\n.textarea,\n.select {\n  margin-top: 5px;\n}\n\n/* =========================\n\t TOASTS\n========================= */\n.toast {\n  padding: 15px;\n}\n\n.toast-stack {\n  gap: 8px;\n}\n\n/* =========================\n\t FONT FAMILIES\n========================= */\n/* =========================\n\t FONT WEIGHTS\n========================= */\n/* =========================\n\t FONT SIZES (scale)\n========================= */\n/* =========================\n\t LINE HEIGHTS\n========================= */\n/* =========================\n\t LETTER SPACING\n========================= */\n/* =========================\n\t BASE TYPOGRAPHY\n========================= */\nhtml {\n  font-size: 100%;\n}\n\nbody {\n  font-family: \"IBM Plex Mono\", monospace;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 1.6;\n  letter-spacing: 0;\n}\n\n/* =========================\n\t HEADINGS\n========================= */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-family: \"IBM Plex Mono\", monospace;\n  font-weight: 600;\n  line-height: 1.25;\n  margin: 0;\n}\nh1.contrast,\nh2.contrast,\nh3.contrast,\nh4.contrast,\nh5.contrast,\nh6.contrast {\n  background: #F8F8F8;\n  color: #0A0A0D;\n}\n\nh1 {\n  font-size: 36px;\n  letter-spacing: -0.01em;\n}\n\nh2 {\n  font-size: 28px;\n}\n\nh3 {\n  font-size: 24px;\n}\n\nh4 {\n  font-size: 20px;\n}\n\nh5 {\n  font-size: 18px;\n}\n\nh6 {\n  font-size: 16px;\n  font-weight: 500;\n}\n\n/* =========================\n\t TEXT VARIANTS\n========================= */\n.text,\np {\n  font-size: 16px;\n  line-height: 1.6;\n}\n\n.text-sm {\n  font-size: 13px;\n  line-height: 1.4;\n}\n\n.text-lg {\n  font-size: 17px;\n  line-height: 1.6;\n}\n\n.text-muted {\n  font-size: 13px;\n  color: #AAAEB2;\n}\n\n.text-strong,\nstrong {\n  font-weight: 600;\n}\n\n.text-bold {\n  font-weight: 700;\n}\n\n.text-italic,\nem {\n  font-style: italic;\n}\n\n/* =========================\n\t CODE / MONO\n========================= */\ncode,\npre,\n.code {\n  font-family: \"IBM Plex Mono\", monospace;\n  font-size: 16px;\n  line-height: 1.4;\n  background-color: #1A1A23;\n}\n\npre {\n  font-size: 16px;\n  line-height: 1.6;\n  white-space: pre-wrap;\n}\n\n/* =========================\n\t LINKS\n========================= */\na {\n  font-weight: 500;\n  text-decoration: none;\n}\n\n.link {\n  font-size: inherit;\n  font-weight: 500;\n}\n\n/* =========================\n\t LABELS / META\n========================= */\n.label {\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1.4;\n}\n\n.hint,\n.meta {\n  font-size: 12px;\n  line-height: 1.4;\n}\n\n/* =========================\n\t TABLE TEXT\n========================= */\n.table {\n  font-size: 13px;\n  line-height: 1.4;\n}\n.table th {\n  font-weight: 600;\n}\n.table td {\n  font-weight: 400;\n}\n\n/* =========================\n\t LISTS\n========================= */\n.list {\n  font-size: 16px;\n  line-height: 1.6;\n}\n\n.list-item {\n  font-size: inherit;\n}\n\n/* =========================\n\t MODALS\n========================= */\n.modal-title {\n  font-size: 20px;\n  font-weight: 600;\n}\n\n.modal-body {\n  font-size: 16px;\n}\n\n/* =========================\n\t TOASTS\n========================= */\n.toast-title {\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.toast-text {\n  font-size: 13px;\n  line-height: 1.4;\n}\n\n.palette {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n}\n.palette .color .color-box {\n  width: 100px;\n  height: 80px;\n}\n\n/* BACKGROUND COLORS */\n.bg-primary {\n  background: #F8F8F8;\n}\n\n.bg-secondary {\n  background: #00B3FF;\n}\n\n.bg-success {\n  background: #00FFAA;\n}\n\n.bg-accent {\n  background: #FF00CC;\n}\n\n.bg-info {\n  background: #8A2CE2;\n}\n\n.bg-warning {\n  background: #FFD900;\n}\n\n.bg-error {\n  background: #FF3C00;\n}\n\n/* TEXT COLORS */\n.text-color-primary {\n  color: #F8F8F8;\n}\n\n.text-color-secondary {\n  color: #00B3FF;\n}\n\n.text-color-success {\n  color: #00FFAA;\n}\n\n.text-color-accent {\n  color: #FF00CC;\n}\n\n.text-color-info {\n  color: #8A2CE2;\n}\n\n.text-color-warning {\n  color: #FFD900;\n}\n\n.text-color-error {\n  color: #FF3C00;\n}\n\n.btn {\n  font-family: \"IBM Plex Mono\", monospace;\n  font-size: 17px;\n  font-weight: 600;\n  line-height: 1;\n  letter-spacing: 0.04em;\n  padding: 12px 22px;\n  border-radius: 0;\n  border-width: 2px;\n  border-left-width: 6px;\n  border-style: solid;\n  border-color: #F8F8F8;\n  text-transform: uppercase;\n  background-color: transparent;\n  transition-duration: 0.2s;\n  transition-property: background-color, border-color, color;\n}\n.btn.with-icon {\n  border-left-width: 48px;\n  position: relative;\n}\n.btn.with-icon .ph,\n.btn.with-icon .ph-bold {\n  position: absolute;\n  color: #0a0a0d;\n  left: -48px;\n  top: 0;\n  font-size: 28px;\n  height: 100%;\n  display: inline-flex;\n  align-items: center;\n  width: 48px;\n  justify-content: center;\n  transition-duration: 0.2s;\n  transition-property: color, left;\n}\n.btn:hover.with-icon .ph,\n.btn:hover.with-icon .ph-bold {\n  left: -28px;\n}\n.btn.btn-primary {\n  color: #F8F8F8;\n  border-color: #F8F8F8;\n}\n.btn.btn-primary:hover {\n  background-color: #F8F8F8;\n  color: #0A0A0D;\n}\n.btn.btn-secondary {\n  color: #00B3FF;\n  border-color: #00B3FF;\n}\n.btn.btn-secondary:hover {\n  background-color: #00B3FF;\n  color: #F8F8F8;\n}\n.btn.btn-secondary:hover.with-icon .ph,\n.btn.btn-secondary:hover.with-icon .ph-bold {\n  color: #F8F8F8;\n}\n.btn.btn-accent {\n  color: #FF00CC;\n  border-color: #FF00CC;\n}\n.btn.btn-accent:hover {\n  background-color: #FF00CC;\n  color: #F8F8F8;\n}\n.btn.btn-accent:hover.with-icon .ph,\n.btn.btn-accent:hover.with-icon .ph-bold {\n  color: #F8F8F8;\n}\n.btn.btn-danger {\n  color: #FF3C00;\n  border-color: #FF3C00;\n}\n.btn.btn-danger:hover {\n  background-color: #FF3C00;\n  color: #0A0A0D;\n}\n.btn.btn-warning {\n  color: #FFD900;\n  border-color: #FFD900;\n}\n.btn.btn-warning:hover {\n  background-color: #FFD900;\n  color: #0A0A0D;\n}\n.btn.btn-success {\n  color: #00FFAA;\n  border-color: #00FFAA;\n}\n.btn.btn-success:hover {\n  background-color: #00FFAA;\n  color: #0A0A0D;\n}\n.btn.btn-info {\n  color: #8A2CE2;\n  border-color: #8A2CE2;\n}\n.btn.btn-info:hover {\n  background-color: #8A2CE2;\n  color: #F8F8F8;\n}\n.btn.btn-info:hover.with-icon .ph,\n.btn.btn-info:hover.with-icon .ph-bold {\n  color: #F8F8F8;\n}\n.btn[disabled] {\n  color: #AAAEB2;\n  border-color: #1A1A23;\n  background-color: #1A1A23;\n}\n.btn[disabled].with-icon .ph,\n.btn[disabled].with-icon .ph-bold {\n  color: #AAAEB2;\n}\n.btn[disabled]:hover {\n  background-color: #1A1A23;\n  color: #AAAEB2;\n}\n.btn[disabled]:hover.with-icon .ph,\n.btn[disabled]:hover.with-icon .ph-bold {\n  color: #AAAEB2;\n}\n.btn[disabled].with-icon .ph,\n.btn[disabled].with-icon .ph-bold {\n  left: -28px;\n}\n.btn.btn-small {\n  font-size: 14px;\n  font-weight: 500;\n  padding: 8px 8px;\n}\n.btn.btn-small.with-icon {\n  border-left-width: 32px;\n}\n.btn.btn-small.with-icon .ph,\n.btn.btn-small.with-icon .ph-bold {\n  left: -40px;\n  font-size: 22px;\n}\n.btn.btn-large {\n  font-size: 20px;\n  font-weight: 700;\n  padding: 15px 48px;\n}\n\n.btn-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 30px;\n  height: 30px;\n  background: transparent;\n  color: #F8F8F8;\n  font-size: 20px;\n  border: 0;\n  transition-duration: 0.2s;\n  transition-property: transform, color;\n  transform: rotate(0);\n}\n.btn-icon:hover {\n  transform: rotate(90deg);\n  color: #AAAEB2;\n}\n\n.form-group .label {\n  display: flex;\n  flex-direction: column;\n  font-size: 17px;\n  max-width: 420px;\n  position: relative;\n}\n.form-group .label .ph {\n  position: absolute;\n  color: #F8F8F8;\n  left: 0;\n  bottom: 2px;\n  font-size: 28px;\n  height: 56px;\n  display: inline-flex;\n  align-items: center;\n  width: 48px;\n  justify-content: center;\n  transition-duration: 0.2s;\n  transition-property: color, left;\n}\n.form-group .label .input {\n  font-family: \"IBM Plex Mono\", monospace;\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 1;\n  letter-spacing: 0.04em;\n  padding: 12px 22px;\n  margin-top: 8px;\n  border-radius: 0;\n  border-width: 2px;\n  border-bottom-width: 6px;\n  border-style: solid;\n  border-color: #F8F8F8;\n  color: #F8F8F8;\n  background-color: transparent;\n  transition-duration: 0.2s;\n  transition-property: background-color, border-color, color;\n}\n.form-group .label .input:hover {\n  border-bottom-color: #AAAEB2;\n}\n.form-group .label .input:focus {\n  outline: none;\n  border-color: #00B3FF;\n}\n.form-group .label .input::placeholder {\n  color: #AAAEB2;\n}\n.form-group .label textarea.input {\n  height: 120px;\n  line-height: 1.25;\n  resize: none;\n}\n.form-group .label .ph + .input,\n.form-group .label .ph + .select-wrap .select {\n  padding-left: 42px;\n}\n.form-group .label .select-wrap {\n  margin-top: 8px;\n}\n.form-group .label .select {\n  width: 100%;\n  height: 56px;\n  margin-top: 0;\n  /* убрать нативную стрелку */\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n.form-group .label .select:focus {\n  outline: none;\n}\n.form-group .label .select option {\n  color: #F8F8F8;\n  background: #1A1A23;\n}\n.form-group .label .select-wrap::after {\n  content: \"\";\n  position: absolute;\n  right: 22px;\n  bottom: 18px;\n  transform: translateY(-50%);\n  width: 0;\n  height: 0;\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-top: 10px solid #F8F8F8;\n  pointer-events: none;\n}\n\n.radio {\n  display: inline-flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n}\n.radio input[type=radio] {\n  display: none;\n}\n.radio .radio-control {\n  display: inline-block;\n  border-radius: 100%;\n  border: 2px solid #F8F8F8;\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  transition-duration: 0.2s;\n  transition-property: background, border-color;\n}\n.radio:hover .radio-control {\n  background: #4A4A57;\n}\n.radio input[type=radio]:checked + .radio-control {\n  background: #F8F8F8;\n}\n.radio input[type=radio]:disabled + .radio-control {\n  background: #4A4A57;\n  border-color: #4A4A57;\n}\n.radio .radio-label {\n  font-size: 17px;\n}\n\n.checkbox {\n  display: inline-flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n}\n.checkbox input[type=checkbox] {\n  display: none;\n}\n.checkbox .checkbox-control {\n  height: 16px;\n  width: 30px;\n  border: 2px solid #F8F8F8;\n  position: relative;\n  background: transparent;\n  transition-duration: 0.2s;\n  transition-property: border-color, background;\n  display: block;\n}\n.checkbox .checkbox-control:before {\n  content: \"\";\n  display: block;\n  height: 20px;\n  width: 20px;\n  background: #F8F8F8;\n  position: absolute;\n  left: -6px;\n  top: -4px;\n  transition-duration: 0.2s;\n  transition-property: left, background;\n}\n.checkbox:hover .checkbox-control {\n  background: #4A4A57;\n}\n.checkbox input[type=checkbox]:checked:not(:disabled) + .checkbox-control {\n  background: #00B3FF;\n  border-color: #00B3FF;\n}\n.checkbox input[type=checkbox]:checked + .checkbox-control:before {\n  left: 12px;\n}\n.checkbox input[type=checkbox]:disabled + .checkbox-control {\n  border-color: #4A4A57;\n}\n.checkbox input[type=checkbox]:disabled + .checkbox-control:before {\n  background: #4A4A57;\n}\n\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  list-style-type: none;\n  padding-left: 0;\n}\n.list .list-item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  margin-left: 0;\n}\n.list.list-ordered {\n  list-style-type: decimal;\n  display: list-item;\n  margin-left: 30px;\n}\n.list.list-ordered .list-item {\n  display: list-item;\n}\n.list.list-definition {\n  gap: 15px;\n}\n.list.list-definition .list-row {\n  border-left: 2px solid #F8F8F8;\n}\n.list.list-definition .list-row .list-term::before,\n.list.list-definition .list-row .list-desc::before {\n  content: \"\";\n  height: 2px;\n  width: 12px;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  margin-top: -1px;\n  display: block;\n  background: #F8F8F8;\n}\n.list.list-definition .list-row .list-term,\n.list.list-definition .list-row .list-desc {\n  position: relative;\n}\n.list.list-definition .list-row .list-term {\n  padding-left: 18px;\n  font-size: 20px;\n}\n.list.list-definition .list-row .list-desc {\n  padding-left: 18px;\n}\n.list.list-nav {\n  max-width: 420px;\n  width: 100%;\n  gap: 0;\n}\n.list.list-nav .list-item {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  height: 50px;\n  margin: 0;\n}\n.list.list-nav .list-item .list-action {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  padding: 8px 12px;\n  border: 0;\n  font-size: 20px;\n  background: #1A1A23;\n  color: inherit;\n  transition-duration: 0.2s;\n  transition-property: background;\n}\n.list.list-nav .list-item .list-action:hover {\n  background: #00B3FF;\n}\n.list.list-nav .list-item .list-action .list-label {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n}\n.list.list-nav .list-item .list-action .list-meta {\n  padding: 8px;\n  background: #00FFAA;\n  color: #0A0A0D;\n  display: flex;\n}\n.list.list-nav .list-item.list-item-active .list-action {\n  background: #00B3FF;\n}\n.list.list-actions {\n  width: 100%;\n  max-width: 420px;\n  gap: 22px;\n}\n.list.list-actions .list-item {\n  justify-content: space-between;\n  align-items: flex-start;\n}\n.list.list-actions .list-item .list-content {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.list.list-actions .list-item .list-content .list-title {\n  font-size: 20px;\n  line-height: 1;\n}\n.badge {\n  background: #F8F8F8;\n  color: #1A1A23;\n  padding: 5px 8px;\n  font-size: 16px;\n}\n.badge.badge-success {\n  background: #00FFAA;\n}\n.badge.badge-warning {\n  background: #FFD900;\n}\n.badge.badge-error, .badge.badge-danger {\n  background: #FF3C00;\n}\n.badge.badge-info {\n  background: #8A2CE2;\n  color: #F8F8F8;\n}\n.badge.badge-secondary {\n  background: #00B3FF;\n  color: #F8F8F8;\n}\n\n.table {\n  text-align: left;\n  border: 2px solid #F8F8F8;\n  padding: 15px;\n}\n.table .table-caption {\n  text-align: left;\n  font-size: 20px;\n  background: #F8F8F8;\n  width: max-content;\n  color: #1A1A23;\n  padding: 5px 12px;\n  margin-bottom: 0;\n}\n.table .table-row th,\n.table .table-row td {\n  padding: 12px 18px;\n  font-size: 16px;\n}\n.table .table-foot th,\n.table .table-foot td {\n  padding-top: 15px;\n}\n\n.toast {\n  position: fixed;\n  bottom: -100px;\n  right: 15px;\n  max-width: 420px;\n  background: #1A1A23;\n  border: 2px solid #F8F8F8;\n  padding: 0;\n  opacity: 0;\n  transition-duration: 0.25s;\n  transition-property: opacity, top, bottom;\n}\n.toast.a-show {\n  bottom: 15px;\n  opacity: 1;\n}\n.toast.a-hide {\n  bottom: 115px;\n  opacity: 0;\n}\n.toast .toast-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n.toast .toast-content .toast-title {\n  font-size: 24px;\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n  color: #0A0A0D;\n  background: #F8F8F8;\n  padding: 5px 8px;\n}\n.toast .toast-content .toast-text {\n  font-size: 16px;\n  padding: 22px 15px;\n  margin: 0;\n}\n.toast .toast-close {\n  position: absolute;\n  top: 0;\n  right: 0;\n  color: #0A0A0D;\n  height: 40px;\n  width: 40px;\n}\n.toast .toast-close:hover {\n  color: #1A1A23;\n}\n.toast.toast-success {\n  border-color: #00FFAA;\n}\n.toast.toast-success .toast-title {\n  background: #00FFAA;\n}\n.toast.toast-warning {\n  border-color: #FFD900;\n}\n.toast.toast-warning .toast-title {\n  background: #FFD900;\n}\n.toast.toast-danger {\n  border-color: #FF3C00;\n}\n.toast.toast-danger .toast-title {\n  background: #FF3C00;\n}\n\n.card {\n  max-width: 420px;\n  width: 100%;\n  border: 2px solid #F8F8F8;\n}\n.card .card-title {\n  color: #0A0A0D;\n  background: #F8F8F8;\n  padding: 8px 12px;\n}\n.card .card-content {\n  padding: 15px;\n}\n.card .card-content .card-thumb {\n  width: 100%;\n}\n.card .card-content p {\n  margin-top: 8px;\n  margin-bottom: 0;\n}\n.card .card-footer {\n  padding: 8px 15px;\n  padding-bottom: 15px;\n}\n\n.modal {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.modal .modal-backdrop {\n  position: fixed;\n  z-index: 1010;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: #0A0A0D;\n  opacity: 0;\n  transition-duration: 0.25s;\n  transition-property: opacity;\n}\n.modal .modal-panel {\n  position: relative;\n  z-index: 1020;\n  width: 100%;\n  max-width: 800px;\n  height: auto;\n  min-height: 400px;\n  max-height: 800px;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  margin-top: 200px;\n  background: #0A0A0D;\n  border: 2px solid #F8F8F8;\n  opacity: 0;\n  transition-duration: 0.25s;\n  transition-property: opacity, margin-top;\n}\n.modal .modal-panel .modal-header {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding-right: 15px;\n}\n.modal .modal-panel .modal-header .modal-title {\n  padding: 12px 15px;\n  background: #F8F8F8;\n  color: #0A0A0D;\n  text-transform: uppercase;\n}\n.modal .modal-panel .modal-body {\n  max-height: 700px;\n  overflow-y: auto;\n  padding: 18px;\n}\n.modal .modal-panel .modal-footer {\n  padding: 18px;\n}\n.modal .modal-panel .modal-footer .actions {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  gap: 15px;\n  width: 100%;\n}\n.modal.a-show .modal-backdrop {\n  opacity: 1;\n}\n.modal.a-show .modal-panel {\n  opacity: 1;\n  margin-top: 0;\n}\n.modal.a-hide .modal-backdrop {\n  opacity: 0;\n}\n.modal.a-hide .modal-panel {\n  opacity: 0;\n  margin-top: -200px;\n}\n\n/* =========================\n   SPACING UTILITIES\n========================= */\n/* margin */\n.m-0 {\n  margin: 0 !important;\n}\n\n.mt-0 {\n  margin-top: 0 !important;\n}\n\n.mr-0 {\n  margin-right: 0 !important;\n}\n\n.mb-0 {\n  margin-bottom: 0 !important;\n}\n\n.ml-0 {\n  margin-left: 0 !important;\n}\n\n.mx-0 {\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n.my-0 {\n  margin-top: 0 !important;\n  margin-bottom: 0 !important;\n}\n\n/* padding */\n.p-0 {\n  padding: 0 !important;\n}\n\n.pt-0 {\n  padding-top: 0 !important;\n}\n\n.pr-0 {\n  padding-right: 0 !important;\n}\n\n.pb-0 {\n  padding-bottom: 0 !important;\n}\n\n.pl-0 {\n  padding-left: 0 !important;\n}\n\n.px-0 {\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n}\n\n.py-0 {\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n}\n\n/* margin */\n.m-1 {\n  margin: 5px !important;\n}\n\n.mt-1 {\n  margin-top: 5px !important;\n}\n\n.mr-1 {\n  margin-right: 5px !important;\n}\n\n.mb-1 {\n  margin-bottom: 5px !important;\n}\n\n.ml-1 {\n  margin-left: 5px !important;\n}\n\n.mx-1 {\n  margin-left: 5px !important;\n  margin-right: 5px !important;\n}\n\n.my-1 {\n  margin-top: 5px !important;\n  margin-bottom: 5px !important;\n}\n\n/* padding */\n.p-1 {\n  padding: 5px !important;\n}\n\n.pt-1 {\n  padding-top: 5px !important;\n}\n\n.pr-1 {\n  padding-right: 5px !important;\n}\n\n.pb-1 {\n  padding-bottom: 5px !important;\n}\n\n.pl-1 {\n  padding-left: 5px !important;\n}\n\n.px-1 {\n  padding-left: 5px !important;\n  padding-right: 5px !important;\n}\n\n.py-1 {\n  padding-top: 5px !important;\n  padding-bottom: 5px !important;\n}\n\n/* margin */\n.m-2 {\n  margin: 8px !important;\n}\n\n.mt-2 {\n  margin-top: 8px !important;\n}\n\n.mr-2 {\n  margin-right: 8px !important;\n}\n\n.mb-2 {\n  margin-bottom: 8px !important;\n}\n\n.ml-2 {\n  margin-left: 8px !important;\n}\n\n.mx-2 {\n  margin-left: 8px !important;\n  margin-right: 8px !important;\n}\n\n.my-2 {\n  margin-top: 8px !important;\n  margin-bottom: 8px !important;\n}\n\n/* padding */\n.p-2 {\n  padding: 8px !important;\n}\n\n.pt-2 {\n  padding-top: 8px !important;\n}\n\n.pr-2 {\n  padding-right: 8px !important;\n}\n\n.pb-2 {\n  padding-bottom: 8px !important;\n}\n\n.pl-2 {\n  padding-left: 8px !important;\n}\n\n.px-2 {\n  padding-left: 8px !important;\n  padding-right: 8px !important;\n}\n\n.py-2 {\n  padding-top: 8px !important;\n  padding-bottom: 8px !important;\n}\n\n/* margin */\n.m-3 {\n  margin: 12px !important;\n}\n\n.mt-3 {\n  margin-top: 12px !important;\n}\n\n.mr-3 {\n  margin-right: 12px !important;\n}\n\n.mb-3 {\n  margin-bottom: 12px !important;\n}\n\n.ml-3 {\n  margin-left: 12px !important;\n}\n\n.mx-3 {\n  margin-left: 12px !important;\n  margin-right: 12px !important;\n}\n\n.my-3 {\n  margin-top: 12px !important;\n  margin-bottom: 12px !important;\n}\n\n/* padding */\n.p-3 {\n  padding: 12px !important;\n}\n\n.pt-3 {\n  padding-top: 12px !important;\n}\n\n.pr-3 {\n  padding-right: 12px !important;\n}\n\n.pb-3 {\n  padding-bottom: 12px !important;\n}\n\n.pl-3 {\n  padding-left: 12px !important;\n}\n\n.px-3 {\n  padding-left: 12px !important;\n  padding-right: 12px !important;\n}\n\n.py-3 {\n  padding-top: 12px !important;\n  padding-bottom: 12px !important;\n}\n\n/* margin */\n.m-4 {\n  margin: 15px !important;\n}\n\n.mt-4 {\n  margin-top: 15px !important;\n}\n\n.mr-4 {\n  margin-right: 15px !important;\n}\n\n.mb-4 {\n  margin-bottom: 15px !important;\n}\n\n.ml-4 {\n  margin-left: 15px !important;\n}\n\n.mx-4 {\n  margin-left: 15px !important;\n  margin-right: 15px !important;\n}\n\n.my-4 {\n  margin-top: 15px !important;\n  margin-bottom: 15px !important;\n}\n\n/* padding */\n.p-4 {\n  padding: 15px !important;\n}\n\n.pt-4 {\n  padding-top: 15px !important;\n}\n\n.pr-4 {\n  padding-right: 15px !important;\n}\n\n.pb-4 {\n  padding-bottom: 15px !important;\n}\n\n.pl-4 {\n  padding-left: 15px !important;\n}\n\n.px-4 {\n  padding-left: 15px !important;\n  padding-right: 15px !important;\n}\n\n.py-4 {\n  padding-top: 15px !important;\n  padding-bottom: 15px !important;\n}\n\n/* margin */\n.m-5 {\n  margin: 18px !important;\n}\n\n.mt-5 {\n  margin-top: 18px !important;\n}\n\n.mr-5 {\n  margin-right: 18px !important;\n}\n\n.mb-5 {\n  margin-bottom: 18px !important;\n}\n\n.ml-5 {\n  margin-left: 18px !important;\n}\n\n.mx-5 {\n  margin-left: 18px !important;\n  margin-right: 18px !important;\n}\n\n.my-5 {\n  margin-top: 18px !important;\n  margin-bottom: 18px !important;\n}\n\n/* padding */\n.p-5 {\n  padding: 18px !important;\n}\n\n.pt-5 {\n  padding-top: 18px !important;\n}\n\n.pr-5 {\n  padding-right: 18px !important;\n}\n\n.pb-5 {\n  padding-bottom: 18px !important;\n}\n\n.pl-5 {\n  padding-left: 18px !important;\n}\n\n.px-5 {\n  padding-left: 18px !important;\n  padding-right: 18px !important;\n}\n\n.py-5 {\n  padding-top: 18px !important;\n  padding-bottom: 18px !important;\n}\n\n/* margin */\n.m-6 {\n  margin: 22px !important;\n}\n\n.mt-6 {\n  margin-top: 22px !important;\n}\n\n.mr-6 {\n  margin-right: 22px !important;\n}\n\n.mb-6 {\n  margin-bottom: 22px !important;\n}\n\n.ml-6 {\n  margin-left: 22px !important;\n}\n\n.mx-6 {\n  margin-left: 22px !important;\n  margin-right: 22px !important;\n}\n\n.my-6 {\n  margin-top: 22px !important;\n  margin-bottom: 22px !important;\n}\n\n/* padding */\n.p-6 {\n  padding: 22px !important;\n}\n\n.pt-6 {\n  padding-top: 22px !important;\n}\n\n.pr-6 {\n  padding-right: 22px !important;\n}\n\n.pb-6 {\n  padding-bottom: 22px !important;\n}\n\n.pl-6 {\n  padding-left: 22px !important;\n}\n\n.px-6 {\n  padding-left: 22px !important;\n  padding-right: 22px !important;\n}\n\n.py-6 {\n  padding-top: 22px !important;\n  padding-bottom: 22px !important;\n}\n\n/* margin */\n.m-7 {\n  margin: 26px !important;\n}\n\n.mt-7 {\n  margin-top: 26px !important;\n}\n\n.mr-7 {\n  margin-right: 26px !important;\n}\n\n.mb-7 {\n  margin-bottom: 26px !important;\n}\n\n.ml-7 {\n  margin-left: 26px !important;\n}\n\n.mx-7 {\n  margin-left: 26px !important;\n  margin-right: 26px !important;\n}\n\n.my-7 {\n  margin-top: 26px !important;\n  margin-bottom: 26px !important;\n}\n\n/* padding */\n.p-7 {\n  padding: 26px !important;\n}\n\n.pt-7 {\n  padding-top: 26px !important;\n}\n\n.pr-7 {\n  padding-right: 26px !important;\n}\n\n.pb-7 {\n  padding-bottom: 26px !important;\n}\n\n.pl-7 {\n  padding-left: 26px !important;\n}\n\n.px-7 {\n  padding-left: 26px !important;\n  padding-right: 26px !important;\n}\n\n.py-7 {\n  padding-top: 26px !important;\n  padding-bottom: 26px !important;\n}\n\n/* margin */\n.m-8 {\n  margin: 34px !important;\n}\n\n.mt-8 {\n  margin-top: 34px !important;\n}\n\n.mr-8 {\n  margin-right: 34px !important;\n}\n\n.mb-8 {\n  margin-bottom: 34px !important;\n}\n\n.ml-8 {\n  margin-left: 34px !important;\n}\n\n.mx-8 {\n  margin-left: 34px !important;\n  margin-right: 34px !important;\n}\n\n.my-8 {\n  margin-top: 34px !important;\n  margin-bottom: 34px !important;\n}\n\n/* padding */\n.p-8 {\n  padding: 34px !important;\n}\n\n.pt-8 {\n  padding-top: 34px !important;\n}\n\n.pr-8 {\n  padding-right: 34px !important;\n}\n\n.pb-8 {\n  padding-bottom: 34px !important;\n}\n\n.pl-8 {\n  padding-left: 34px !important;\n}\n\n.px-8 {\n  padding-left: 34px !important;\n  padding-right: 34px !important;\n}\n\n.py-8 {\n  padding-top: 34px !important;\n  padding-bottom: 34px !important;\n}\n\n/* margin */\n.m-9 {\n  margin: 42px !important;\n}\n\n.mt-9 {\n  margin-top: 42px !important;\n}\n\n.mr-9 {\n  margin-right: 42px !important;\n}\n\n.mb-9 {\n  margin-bottom: 42px !important;\n}\n\n.ml-9 {\n  margin-left: 42px !important;\n}\n\n.mx-9 {\n  margin-left: 42px !important;\n  margin-right: 42px !important;\n}\n\n.my-9 {\n  margin-top: 42px !important;\n  margin-bottom: 42px !important;\n}\n\n/* padding */\n.p-9 {\n  padding: 42px !important;\n}\n\n.pt-9 {\n  padding-top: 42px !important;\n}\n\n.pr-9 {\n  padding-right: 42px !important;\n}\n\n.pb-9 {\n  padding-bottom: 42px !important;\n}\n\n.pl-9 {\n  padding-left: 42px !important;\n}\n\n.px-9 {\n  padding-left: 42px !important;\n  padding-right: 42px !important;\n}\n\n.py-9 {\n  padding-top: 42px !important;\n  padding-bottom: 42px !important;\n}\n\n/* margin */\n.m-10 {\n  margin: 48px !important;\n}\n\n.mt-10 {\n  margin-top: 48px !important;\n}\n\n.mr-10 {\n  margin-right: 48px !important;\n}\n\n.mb-10 {\n  margin-bottom: 48px !important;\n}\n\n.ml-10 {\n  margin-left: 48px !important;\n}\n\n.mx-10 {\n  margin-left: 48px !important;\n  margin-right: 48px !important;\n}\n\n.my-10 {\n  margin-top: 48px !important;\n  margin-bottom: 48px !important;\n}\n\n/* padding */\n.p-10 {\n  padding: 48px !important;\n}\n\n.pt-10 {\n  padding-top: 48px !important;\n}\n\n.pr-10 {\n  padding-right: 48px !important;\n}\n\n.pb-10 {\n  padding-bottom: 48px !important;\n}\n\n.pl-10 {\n  padding-left: 48px !important;\n}\n\n.px-10 {\n  padding-left: 48px !important;\n  padding-right: 48px !important;\n}\n\n.py-10 {\n  padding-top: 48px !important;\n  padding-bottom: 48px !important;\n}\n\n* {\n  box-sizing: border-box;\n}\n\n*::-webkit-scrollbar {\n  width: 10px;\n}\n\n*::-webkit-scrollbar-track {\n  width: 10px;\n  background: #0A0A0D;\n  cursor: pointer;\n}\n\n*::-webkit-scrollbar-thumb {\n  width: 10px;\n  background: #4A4A57;\n  cursor: default;\n}\n\n*::-webkit-scrollbar-corner {\n  background: transparent;\n  height: 1px;\n}\n\n*::-webkit-scrollbar-button {\n  display: none;\n}\n\n* {\n  padding: 0;\n  margin: 0;\n}\n\nhtml, body {\n  font-family: \"IBM Plex Mono\", monospace;\n  font-weight: 400;\n}\n\nbody {\n  background-color: #0A0A0D;\n  color: #F8F8F8;\n  font-size: 15px;\n  line-height: 1.45;\n  letter-spacing: 0.01em;\n}","/* =========================\n\t FONT FAMILIES\n========================= */\n\n$font-family-base: \"IBM Plex Mono\", monospace;\n$font-family-code: $font-family-base;\n\n/* =========================\n\t FONT WEIGHTS\n========================= */\n\n$font-weight-regular: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n\n/* =========================\n\t FONT SIZES (scale)\n========================= */\n\n$font-size-xs: 12px;\n$font-size-sm: 13px;\n$font-size-md: 14px;\n$font-size-base: 16px;\n$font-size-lg: 17px;\n$font-size-xl: 20px;\n\n$font-size-h1: 36px;\n$font-size-h2: 28px;\n$font-size-h3: 24px;\n$font-size-h4: 20px;\n$font-size-h5: 18px;\n$font-size-h6: 16px;\n\n/* =========================\n\t LINE HEIGHTS\n========================= */\n\n$line-height-base: 1;\n$line-height-tight: 1.15;\n$line-height-snug: 1.25;\n$line-height-normal: 1.4;\n$line-height-relaxed: 1.6;\n\n/* =========================\n\t LETTER SPACING\n========================= */\n\n$letter-spacing-tight: -0.01em;\n$letter-spacing-normal: 0;\n$letter-spacing-wide: 0.04em;\n\n/* =========================\n\t BASE TYPOGRAPHY\n========================= */\n\nhtml {\n\tfont-size: 100%;\n}\n\nbody {\n\tfont-family: $font-family-base;\n\tfont-size: $font-size-base;\n\tfont-weight: $font-weight-regular;\n\tline-height: $line-height-relaxed;\n\tletter-spacing: $letter-spacing-normal;\n}\n\n/* =========================\n\t HEADINGS\n========================= */\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n\tfont-family: $font-family-base;\n\tfont-weight: $font-weight-semibold;\n\tline-height: $line-height-snug;\n\tmargin: 0;\n\n\t&.contrast {\n\t\tbackground: $color-text-light;\n\t\tcolor: $color-black;\n\t}\n}\n\nh1 {\n\tfont-size: $font-size-h1;\n\tletter-spacing: $letter-spacing-tight;\n}\n\nh2 {\n\tfont-size: $font-size-h2;\n}\n\nh3 {\n\tfont-size: $font-size-h3;\n}\n\nh4 {\n\tfont-size: $font-size-h4;\n}\n\nh5 {\n\tfont-size: $font-size-h5;\n}\n\nh6 {\n\tfont-size: $font-size-h6;\n\tfont-weight: $font-weight-medium;\n}\n\n/* =========================\n\t TEXT VARIANTS\n========================= */\n\n.text,\np {\n\tfont-size: $font-size-base;\n\tline-height: $line-height-relaxed;\n}\n\n.text-sm {\n\tfont-size: $font-size-sm;\n\tline-height: $line-height-normal;\n}\n\n.text-lg {\n\tfont-size: $font-size-lg;\n\tline-height: $line-height-relaxed;\n}\n\n.text-muted {\n\tfont-size: $font-size-sm;\n\tcolor: $color-text-dark;\n}\n\n.text-strong,\nstrong {\n\tfont-weight: $font-weight-semibold;\n}\n\n.text-bold {\n\tfont-weight: $font-weight-bold;\n}\n\n.text-italic,\nem {\n\tfont-style: italic;\n}\n\n/* =========================\n\t CODE / MONO\n========================= */\n\ncode,\npre,\n.code {\n\tfont-family: $font-family-code;\n\tfont-size: $font-size-base;\n\tline-height: $line-height-normal;\n\tbackground-color: $color-dark;\n}\n\npre {\n\tfont-size: $font-size-base;\n\tline-height: $line-height-relaxed;\n\twhite-space: pre-wrap;\n}\n\n/* =========================\n\t LINKS\n========================= */\n\na {\n\tfont-weight: $font-weight-medium;\n\ttext-decoration: none;\n}\n\n.link {\n\tfont-size: inherit;\n\tfont-weight: $font-weight-medium;\n}\n\n/* =========================\n\t LABELS / META\n========================= */\n\n.label {\n\tfont-size: $font-size-sm;\n\tfont-weight: $font-weight-medium;\n\tline-height: $line-height-normal;\n}\n\n.hint,\n.meta {\n\tfont-size: $font-size-xs;\n\tline-height: $line-height-normal;\n}\n\n/* =========================\n\t TABLE TEXT\n========================= */\n\n.table {\n\tfont-size: $font-size-sm;\n\tline-height: $line-height-normal;\n\n\tth {\n\t\tfont-weight: $font-weight-semibold;\n\t}\n\n\ttd {\n\t\tfont-weight: $font-weight-regular;\n\t}\n}\n\n/* =========================\n\t LISTS\n========================= */\n\n.list {\n\tfont-size: $font-size-base;\n\tline-height: $line-height-relaxed;\n}\n\n.list-item {\n\tfont-size: inherit;\n}\n\n/* =========================\n\t MODALS\n========================= */\n\n.modal-title {\n\tfont-size: $font-size-h4;\n\tfont-weight: $font-weight-semibold;\n}\n\n.modal-body {\n\tfont-size: $font-size-base;\n}\n\n/* =========================\n\t TOASTS\n========================= */\n\n.toast-title {\n\tfont-size: $font-size-md;\n\tfont-weight: $font-weight-semibold;\n}\n\n.toast-text {\n\tfont-size: $font-size-sm;\n\tline-height: $line-height-normal;\n}\n",".palette {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: $space-sm;\n\n\t.color {\n\t\t.color-box {\n\t\t\twidth: 100px;\n\t\t\theight: 80px;\n\t\t}\n\t}\n}\n\n/* BACKGROUND COLORS */\n\n.bg-primary {\n\tbackground: $color-primary;\n}\n\n.bg-secondary {\n\tbackground: $color-secondary;\n}\n\n.bg-success {\n\tbackground: $color-success;\n}\n\n.bg-accent {\n\tbackground: $color-accent;\n}\n\n.bg-info {\n\tbackground: $color-info;\n}\n\n.bg-warning {\n\tbackground: $color-warning;\n}\n\n.bg-error {\n\tbackground: $color-error;\n}\n\n/* TEXT COLORS */\n\n.text-color-primary {\n\tcolor: $color-primary;\n}\n\n.text-color-secondary {\n\tcolor: $color-secondary;\n}\n\n.text-color-success {\n\tcolor: $color-success;\n}\n\n.text-color-accent {\n\tcolor: $color-accent;\n}\n\n.text-color-info {\n\tcolor: $color-info;\n}\n\n.text-color-warning {\n\tcolor: $color-warning;\n}\n\n.text-color-error {\n\tcolor: $color-error;\n}\n",".btn {\n\tfont-family: $font-family-base;\n\tfont-size: $font-size-lg;\n\tfont-weight: $font-weight-semibold;\n\tline-height: $line-height-base;\n\tletter-spacing: $letter-spacing-wide;\n\tpadding: $space-3 $space-lg;\n\tborder-radius: 0;\n\tborder-width: 2px;\n\tborder-left-width: 6px;\n\tborder-style: solid;\n\tborder-color: $color-primary;\n\ttext-transform: uppercase;\n\tbackground-color: transparent;\n\ttransition-duration: .2s;\n\ttransition-property: background-color, border-color, color;\n\n\t&.with-icon {\n\t\tborder-left-width: 48px;\n\t\tposition: relative;\n\n\t\t.ph,\n\t\t.ph-bold {\n\t\t\tposition: absolute;\n\t\t\tcolor: #0a0a0d;\n\t\t\tleft: -48px;\n\t\t\ttop: 0;\n\t\t\tfont-size: 28px;\n\t\t\theight: 100%;\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\twidth: 48px;\n\t\t\tjustify-content: center;\n\t\t\ttransition-duration: .2s;\n\t\t\ttransition-property: color, left;\n\t\t}\n\t}\n\n\t&:hover {\n\t\t&.with-icon {\n\t\t\t.ph,\n\t\t\t.ph-bold {\n\t\t\t\tleft: -28px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.btn-primary {\n\t\tcolor: $color-primary;\n\t\tborder-color: $color-primary;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-primary;\n\t\t\tcolor: $color-black;\n\t\t}\n\t}\n\n\t&.btn-secondary {\n\t\tcolor: $color-secondary;\n\t\tborder-color: $color-secondary;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-secondary;\n\t\t\tcolor: $color-text-light;\n\n\t\t\t&.with-icon {\n\t\t\t\t.ph,\n\t\t\t\t.ph-bold {\n\t\t\t\t\tcolor: $color-text-light;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&.btn-accent {\n\t\tcolor: $color-accent;\n\t\tborder-color: $color-accent;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-accent;\n\t\t\tcolor: $color-text-light;\n\n\t\t\t&.with-icon {\n\t\t\t\t.ph,\n\t\t\t\t.ph-bold {\n\t\t\t\t\tcolor: $color-text-light;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&.btn-danger {\n\t\tcolor: $color-error;\n\t\tborder-color: $color-error;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-error;\n\t\t\tcolor: $color-black;\n\t\t}\n\t}\n\n\t&.btn-warning {\n\t\tcolor: $color-warning;\n\t\tborder-color: $color-warning;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-warning;\n\t\t\tcolor: $color-black;\n\t\t}\n\t}\n\n\t&.btn-success {\n\t\tcolor: $color-success;\n\t\tborder-color: $color-success;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-success;\n\t\t\tcolor: $color-black;\n\t\t}\n\t}\n\n\t&.btn-info {\n\t\tcolor: $color-info;\n\t\tborder-color: $color-info;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-info;\n\t\t\tcolor: $color-text-light;\n\n\t\t\t&.with-icon {\n\t\t\t\t.ph,\n\t\t\t\t.ph-bold {\n\t\t\t\t\tcolor: $color-text-light;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&[disabled] {\n\t\tcolor: $color-text-dark;\n\t\tborder-color: $color-dark;\n\t\tbackground-color: $color-dark;\n\n\t\t&.with-icon {\n\t\t\t.ph,\n\t\t\t.ph-bold {\n\t\t\t\tcolor: $color-text-dark;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-dark;\n\t\t\tcolor: $color-text-dark;\n\n\t\t\t&.with-icon {\n\t\t\t\t.ph,\n\t\t\t\t.ph-bold {\n\t\t\t\t\tcolor: $color-text-dark;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.with-icon {\n\t\t\t.ph,\n\t\t\t.ph-bold {\n\t\t\t\tleft: -28px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.btn-small {\n\t\tfont-size: $font-size-md;\n\t\tfont-weight: $font-weight-medium;\n\t\tpadding: $space-sm $space-sm;\n\n\t\t&.with-icon {\n\t\t\tborder-left-width: 32px;\n\n\t\t\t.ph,\n\t\t\t.ph-bold {\n\t\t\t\tleft: -40px;\n\t\t\t\tfont-size: 22px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.btn-large {\n\t\tfont-size: $font-size-xl;\n\t\tfont-weight: $font-weight-bold;\n\t\tpadding: $space-md $space-xxl;\n\t}\n}\n\n.btn-icon {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\twidth: 30px;\n\theight: 30px;\n\n\tbackground: transparent;\n\tcolor: $color-text-light;\n\tfont-size: $font-size-xl;\n\tborder: 0;\n\n\ttransition-duration: .2s;\n\ttransition-property: transform, color;\n\n\ttransform: rotate(0);\n\n\t&:hover {\n\t\ttransform: rotate(90deg);\n\t\tcolor: $color-text-dark;\n\t}\n}\n",".form-group {\n\t.label {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tfont-size: $font-size-lg;\n\t\tmax-width: 420px;\n\t\tposition: relative;\n\n\t\t.ph {\n\t\t\tposition: absolute;\n\t\t\tcolor: $color-text-light;\n\t\t\tleft: 0;\n\t\t\tbottom: 2px;\n\t\t\tfont-size: 28px;\n\t\t\theight: 56px;\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\twidth: 48px;\n\t\t\tjustify-content: center;\n\t\t\ttransition-duration: .2s;\n\t\t\ttransition-property: color, left;\n\t\t}\n\n\t\t.input {\n\t\t\tfont-family: $font-family-base;\n\t\t\tfont-size: $font-size-base;\n\t\t\tfont-weight: $font-weight-medium;\n\t\t\tline-height: $line-height-base;\n\t\t\tletter-spacing: $letter-spacing-wide;\n\t\t\tpadding: $space-3 $space-lg;\n\t\t\tmargin-top: $space-sm;\n\t\t\tborder-radius: 0;\n\t\t\tborder-width: 2px;\n\t\t\tborder-bottom-width: 6px;\n\t\t\tborder-style: solid;\n\t\t\tborder-color: $color-text-light;\n\t\t\tcolor: $color-text-light;\n\t\t\tbackground-color: transparent;\n\t\t\ttransition-duration: .2s;\n\t\t\ttransition-property: background-color, border-color, color;\n\n\t\t\t&:hover {\n\t\t\t\tborder-bottom-color: $color-text-dark;\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\toutline: none;\n\t\t\t\tborder-color: $color-electric-blue;\n\t\t\t}\n\n\t\t\t&::placeholder {\n\t\t\t\tcolor: $color-text-dark;\n\t\t\t}\n\t\t}\n\n\t\ttextarea.input {\n\t\t\theight: 120px;\n\t\t\tline-height: $line-height-snug;\n\t\t\tresize: none;\n\t\t}\n\n\t\t.ph + .input,\n\t\t.ph + .select-wrap .select {\n\t\t\tpadding-left: 42px;\n\t\t}\n\n\t\t.select-wrap {\n\t\t\tmargin-top: $space-sm;\n\t\t}\n\n\t\t.select {\n\t\t\twidth: 100%;\n\t\t\theight: 56px;\n\t\t\tmargin-top: 0;\n\n\t\t\t/* убрать нативную стрелку */\n\t\t\tappearance: none;\n\t\t\t-webkit-appearance: none;\n\t\t\t-moz-appearance: none;\n\n\t\t\t&:focus {\n\t\t\t\toutline: none;\n\t\t\t}\n\n\t\t\toption {\n\t\t\t\tcolor: $color-text-light;\n\t\t\t\tbackground: $color-dark;\n\t\t\t}\n\t\t}\n\n\t\t.select-wrap::after {\n\t\t\tcontent: \"\";\n\t\t\tposition: absolute;\n\t\t\tright: $space-lg;\n\t\t\tbottom: 18px;\n\t\t\ttransform: translateY(-50%);\n\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t\tborder-left: 8px solid transparent;\n\t\t\tborder-right: 8px solid transparent;\n\t\t\tborder-top: 10px solid $color-text-light;\n\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n}\n\n.radio {\n\tdisplay: inline-flex;\n\tflex-direction: row;\n\tgap: $space-sm;\n\talign-items: center;\n\n\tinput[type=\"radio\"] {\n\t\tdisplay: none;\n\t}\n\n\t.radio-control {\n\t\tdisplay: inline-block;\n\t\tborder-radius: 100%;\n\t\tborder: 2px solid $color-primary;\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tbackground: transparent;\n\t\ttransition-duration: .2s;\n\t\ttransition-property: background, border-color;\n\t}\n\n\t&:hover .radio-control {\n\t\tbackground: $color-grey;\n\t}\n\n\tinput[type=\"radio\"]:checked + .radio-control {\n\t\tbackground: $color-primary;\n\t}\n\n\tinput[type=\"radio\"]:disabled + .radio-control {\n\t\tbackground: $color-grey;\n\t\tborder-color: $color-grey;\n\t}\n\n\t.radio-label {\n\t\tfont-size: $font-size-lg;\n\t}\n}\n\n.checkbox {\n\tdisplay: inline-flex;\n\tflex-direction: row;\n\tgap: $space-sm;\n\talign-items: center;\n\n\tinput[type=\"checkbox\"] {\n\t\tdisplay: none;\n\t}\n\n\t.checkbox-control {\n\t\theight: 16px;\n\t\twidth: 30px;\n\t\tborder: 2px solid $color-primary;\n\t\tposition: relative;\n\t\tbackground: transparent;\n\t\ttransition-duration: .2s;\n\t\ttransition-property: border-color, background;\n\t\tdisplay: block;\n\t}\n\n\t.checkbox-control:before {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\theight: 20px;\n\t\twidth: 20px;\n\t\tbackground: $color-primary;\n\t\tposition: absolute;\n\t\tleft: -6px;\n\t\ttop: -4px;\n\t\ttransition-duration: .2s;\n\t\ttransition-property: left, background;\n\t}\n\n\t&:hover .checkbox-control {\n\t\tbackground: $color-grey;\n\t}\n\n\tinput[type=\"checkbox\"]:checked:not(:disabled) + .checkbox-control {\n\t\tbackground: $color-secondary;\n\t\tborder-color: $color-secondary;\n\t}\n\n\tinput[type=\"checkbox\"]:checked + .checkbox-control:before {\n\t\tleft: 12px;\n\t}\n\n\tinput[type=\"checkbox\"]:disabled + .checkbox-control {\n\t\tborder-color: $color-grey;\n\t}\n\n\tinput[type=\"checkbox\"]:disabled + .checkbox-control:before {\n\t\tbackground: $color-grey;\n\t}\n}\n",".list {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: $space-1;\n\tlist-style-type: none;\n\tpadding-left: 0;\n\n\t.list-item {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: $space-sm;\n\t\tmargin-left: 0;\n\t}\n\n\t&.list-ordered {\n\t\tlist-style-type: decimal;\n\t\tdisplay: list-item;\n\t\tmargin-left: 30px;\n\n\t\t.list-item {\n\t\t\tdisplay: list-item;\n\t\t}\n\t}\n\n\t&.list-definition {\n\t\tgap: $space-md;\n\n\t\t.list-row {\n\t\t\tborder-left: 2px solid $color-primary;\n\n\t\t\t.list-term::before,\n\t\t\t.list-desc::before {\n\t\t\t\tcontent: \"\";\n\t\t\t\theight: 2px;\n\t\t\t\twidth: $space-3;\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\tleft: 0;\n\t\t\t\tmargin-top: -1px;\n\t\t\t\tdisplay: block;\n\t\t\t\tbackground: $color-primary;\n\t\t\t}\n\n\t\t\t.list-term,\n\t\t\t.list-desc {\n\t\t\t\tposition: relative;\n\t\t\t}\n\n\t\t\t.list-term {\n\t\t\t\tpadding-left: $space-5;\n\t\t\t\tfont-size: $font-size-xl;\n\t\t\t}\n\n\t\t\t.list-desc {\n\t\t\t\tpadding-left: $space-5;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.with-icons {\n\t\t.ph {\n\t\t\t// icon styles if needed\n\t\t}\n\t}\n\n\t&.list-nav {\n\t\tmax-width: 420px;\n\t\twidth: 100%;\n\t\tgap: 0;\n\n\t\t.list-item {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: flex-start;\n\t\t\theight: 50px;\n\t\t\tmargin: 0;\n\n\t\t\t.list-action {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\talign-items: center;\n\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: $space-2 $space-3;\n\t\t\t\tborder: 0;\n\n\t\t\t\tfont-size: $font-size-xl;\n\t\t\t\tbackground: $color-dark;\n\t\t\t\tcolor: inherit;\n\n\t\t\t\ttransition-duration: .2s;\n\t\t\t\ttransition-property: background;\n\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground: $color-electric-blue;\n\t\t\t\t}\n\n\t\t\t\t.list-label {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: row;\n\t\t\t\t\tgap: $space-2;\n\t\t\t\t\talign-items: center;\n\t\t\t\t}\n\n\t\t\t\t.list-meta {\n\t\t\t\t\tpadding: $space-2;\n\t\t\t\t\tbackground: $color-neon-green;\n\t\t\t\t\tcolor: $color-black;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.list-item-active {\n\t\t\t\t.list-action {\n\t\t\t\t\tbackground: $color-electric-blue;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&.list-actions {\n\t\twidth: 100%;\n\t\tmax-width: 420px;\n\t\tgap: $space-lg;\n\n\t\t.list-item {\n\t\t\tjustify-content: space-between;\n\t\t\talign-items: flex-start;\n\n\t\t\t.list-content {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: $space-2;\n\n\t\t\t\t.list-title {\n\t\t\t\t\tfont-size: $font-size-xl;\n\t\t\t\t\tline-height: $line-height-base;\n\t\t\t\t}\n\n\t\t\t\t.list-subtitle {\n\t\t\t\t\t// subtitle styles\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.list-controls {\n\t\t\t\t// controls styles\n\t\t\t}\n\t\t}\n\t}\n}\n",".badge {\n\tbackground: $color-primary;\n\tcolor: $color-dark;\n\tpadding: $space-1 $space-2;\n\tfont-size: $font-size-base;\n\n\t&.badge-success {\n\t\tbackground: $color-success;\n\t}\n\n\t&.badge-warning {\n\t\tbackground: $color-warning;\n\t}\n\n\t&.badge-error,\n\t&.badge-danger {\n\t\tbackground: $color-error;\n\t}\n\n\t&.badge-info {\n\t\tbackground: $color-info;\n\t\tcolor: $color-text-light;\n\t}\n\n\t&.badge-secondary {\n\t\tbackground: $color-secondary;\n\t\tcolor: $color-text-light;\n\t}\n}\n",".table {\n\ttext-align: left;\n\tborder: 2px solid $color-primary;\n\tpadding: $space-4;\n\n\t.table-caption {\n\t\ttext-align: left;\n\t\tfont-size: $font-size-xl;\n\t\tbackground: $color-primary;\n\t\twidth: max-content;\n\t\tcolor: $color-dark;\n\t\tpadding: $space-1 $space-3;\n\t\tmargin-bottom: 0;\n\t}\n\n\t.table-row {\n\t\tth,\n\t\ttd {\n\t\t\tpadding: $space-3 $space-5;\n\t\t\tfont-size: $font-size-base;\n\t\t}\n\n\t\tth {\n\t\t\t// header cell styles if needed\n\t\t}\n\t}\n\n\t.table-head {\n\t\t// thead styles\n\t}\n\n\t.table-body {\n\t\t// tbody styles\n\t}\n\n\t.table-foot {\n\t\tth,\n\t\ttd {\n\t\t\tpadding-top: $space-4;\n\t\t}\n\t}\n}\n",".toast {\n\tposition: fixed;\n\tbottom: -100px;\n\tright: $space-4;\n\tmax-width: 420px;\n\n\tbackground: $color-dark;\n\tborder: 2px solid $color-text-light;\n\tpadding: 0;\n\topacity: 0;\n\n\ttransition-duration: .25s;\n\ttransition-property: opacity, top, bottom;\n\n\t&.a-show {\n\t\tbottom: $space-4;\n\t\topacity: 1;\n\t}\n\n\t&.a-hide {\n\t\tbottom: $space-4 + 100px;\n\t\topacity: 0;\n\t}\n\n\t.toast-content {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 0;\n\n\t\t.toast-title {\n\t\t\tfont-size: $font-size-h3;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tgap: $space-2;\n\t\t\talign-items: center;\n\t\t\tcolor: $color-black;\n\t\t\tbackground: $color-primary;\n\t\t\tpadding: $space-1 $space-2;\n\t\t}\n\n\t\t.toast-text {\n\t\t\tfont-size: $font-size-base;\n\t\t\tpadding: $space-6 $space-4;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\t.toast-close {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tcolor: $color-black;\n\t\theight: 40px;\n\t\twidth: 40px;\n\n\t\t&:hover {\n\t\t\tcolor: $color-dark;\n\t\t}\n\t}\n\n\t&.toast-info {\n\t\t// default info styles (inherits primary)\n\t}\n\n\t&.toast-success {\n\t\tborder-color: $color-success;\n\n\t\t.toast-title {\n\t\t\tbackground: $color-success;\n\t\t}\n\t}\n\n\t&.toast-warning {\n\t\tborder-color: $color-warning;\n\n\t\t.toast-title {\n\t\t\tbackground: $color-warning;\n\t\t}\n\t}\n\n\t&.toast-danger {\n\t\tborder-color: $color-error;\n\n\t\t.toast-title {\n\t\t\tbackground: $color-error;\n\t\t}\n\t}\n}\n",".card {\n\tmax-width: 420px;\n\twidth: 100%;\n\tborder: 2px solid $color-text-light;\n\n\t.card-title {\n\t\tcolor: $color-black;\n\t\tbackground: $color-text-light;\n\t\tpadding: $space-2 $space-3;\n\t}\n\n\t.card-content {\n\t\tpadding: $space-4;\n\n\t\t.card-thumb {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\tp {\n\t\t\tmargin-top: $space-2;\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t}\n\n\t.card-footer {\n\t\tpadding: $space-2 $space-4;\n\t\tpadding-bottom: $space-4;\n\t}\n}\n",".modal {\n\tposition: fixed;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n\tz-index: 1000;\n\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\n\t.modal-backdrop {\n\t\tposition: fixed;\n\t\tz-index: 1010;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\n\t\tbackground: $color-black;\n\t\topacity: 0;\n\n\t\ttransition-duration: .25s;\n\t\ttransition-property: opacity;\n\t}\n\n\t.modal-panel {\n\t\tposition: relative;\n\t\tz-index: 1020;\n\n\t\twidth: 100%;\n\t\tmax-width: 800px;\n\t\theight: auto;\n\t\tmin-height: 400px;\n\t\tmax-height: 800px;\n\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: $space-4;\n\t\tmargin-top: 200px;\n\n\t\tbackground: $color-black;\n\t\tborder: 2px solid $color-text-light;\n\t\topacity: 0;\n\n\t\ttransition-duration: .25s;\n\t\ttransition-property: opacity, margin-top;\n\n\t\t.modal-header {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tjustify-content: space-between;\n\t\t\talign-items: center;\n\t\t\tpadding-right: $space-4;\n\n\t\t\t.modal-title {\n\t\t\t\tpadding: $space-3 $space-4;\n\t\t\t\tbackground: $color-text-light;\n\t\t\t\tcolor: $color-black;\n\t\t\t\ttext-transform: uppercase;\n\t\t\t}\n\t\t}\n\n\t\t.modal-body {\n\t\t\tmax-height: 700px;\n\t\t\toverflow-y: auto;\n\t\t\tpadding: $space-5;\n\t\t}\n\n\t\t.modal-footer {\n\t\t\tpadding: $space-5;\n\n\t\t\t.actions {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: row;\n\t\t\t\tjustify-content: flex-end;\n\t\t\t\tgap: $space-4;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.a-show {\n\t\t.modal-backdrop {\n\t\t\topacity: 1;\n\t\t}\n\n\t\t.modal-panel {\n\t\t\topacity: 1;\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\n\t&.a-hide {\n\t\t.modal-backdrop {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t.modal-panel {\n\t\t\topacity: 0;\n\t\t\tmargin-top: -200px;\n\t\t}\n\t}\n}\n","/* =========================\n   SPACING UTILITIES\n========================= */\n\n@each $key, $value in $spaces {\n\n  /* margin */\n  .m-#{$key}  { margin:        $value !important; }\n  .mt-#{$key} { margin-top:    $value !important; }\n  .mr-#{$key} { margin-right:  $value !important; }\n  .mb-#{$key} { margin-bottom: $value !important; }\n  .ml-#{$key} { margin-left:   $value !important; }\n  .mx-#{$key} {\n    margin-left:  $value !important;\n    margin-right: $value !important;\n  }\n  .my-#{$key} {\n    margin-top:    $value !important;\n    margin-bottom: $value !important;\n  }\n\n  /* padding */\n  .p-#{$key}  { padding:        $value !important; }\n  .pt-#{$key} { padding-top:    $value !important; }\n  .pr-#{$key} { padding-right:  $value !important; }\n  .pb-#{$key} { padding-bottom: $value !important; }\n  .pl-#{$key} { padding-left:   $value !important; }\n  .px-#{$key} {\n    padding-left:  $value !important;\n    padding-right: $value !important;\n  }\n  .py-#{$key} {\n    padding-top:    $value !important;\n    padding-bottom: $value !important;\n  }\n}\n","@import \"_spacing.scss\";\n@import \"ui_components/_typography.scss\";\n@import \"ui_components/_palette.scss\";\n@import \"ui_components/_buttons.scss\";\n@import \"ui_components/_forms.scss\";\n@import \"ui_components/_lists.scss\";\n@import \"ui_components/_badges.scss\";\n@import \"ui_components/_tables.scss\";\n@import \"ui_components/_toasts.scss\";\n@import \"ui_components/_cards.scss\";\n@import \"ui_components/_modals.scss\";\n@import \"_utils.scss\";\n\n* {\n\tbox-sizing: border-box;\n}\n\n*::-webkit-scrollbar {\n\twidth: 10px;\n}\n\n*::-webkit-scrollbar-track {\n\twidth: 10px;\n\tbackground: $color-black;\n\tcursor: pointer;\n}\n\n*::-webkit-scrollbar-thumb {\n\twidth: 10px;\n\tbackground: $color-grey;\n\tcursor: default;\n}\n\n*::-webkit-scrollbar-corner {\n\tbackground: transparent;\n\theight: 1px;\n}\n\n*::-webkit-scrollbar-button {\n\tdisplay: none;\n}\n\n*::-webkit-scrollbar-track-piece {}\n*::-webkit-resizer {}","@import \"_fonts.scss\";\n@import \"_palette-colors.scss\";\n@import \"_ui.scss\";\n\n* {\n\tpadding: 0;\n\tmargin: 0;\n}\n\nhtml, body {\n  font-family: \"IBM Plex Mono\", monospace;\n  font-weight: 400;\n}\n\nbody {\n\tbackground-color: $color-black;\n\tcolor: $color-text-light;\n\n\tfont-size: 15px;\n  line-height: 1.45;\n  letter-spacing: 0.01em;\n}"]}
\ No newline at end of file
+{"version":3,"sources":["_fonts.scss","_spacing.scss","main.css","ui_components/_typography.scss","ui_components/_palette.scss","ui_components/_buttons.scss","ui_components/_forms.scss","ui_components/_lists.scss","ui_components/_badges.scss","ui_components/_tables.scss","ui_components/_toasts.scss","ui_components/_cards.scss","ui_components/_modals.scss","_utils.scss","_ui.scss","_app.scss","app/_hud.scss"],"names":[],"mappings":"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","file":"main.css","sourcesContent":["@font-face {\n  font-family: \"IBM Plex Mono\";\n  src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf\") format(\"truetype\");\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: \"IBM Plex Mono\";\n  src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf\") format(\"truetype\");\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: \"IBM Plex Mono\";\n  src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf\") format(\"truetype\");\n  font-weight: 600;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: \"IBM Plex Mono\";\n  src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf\") format(\"truetype\");\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: \"IBM Plex Mono\";\n  src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf\") format(\"truetype\");\n  font-weight: 400;\n  font-style: italic;\n  font-display: swap;\n}\n","/* =========================\n\t SPACING SCALE\n========================= */\n\n$space-0: 0;\n$space-1: 5px;\n$space-2: 8px;\n$space-3: 12px;\n$space-4: 15px;\n$space-5: 18px;\n$space-6: 22px;\n$space-7: 26px;\n$space-8: 34px;\n$space-9: 42px;\n$space-10: 48px;\n$space-11: 64px;\n$space-12: 80px;\n\n/* aliases for readability */\n$space-xs: $space-1;\n$space-sm: $space-2;\n$space-md: $space-4;\n$space-lg: $space-6;\n$space-xl: $space-8;\n$space-xxl: $space-10;\n\n/* map — for utilities generation */\n$spaces: (\n\t0: $space-0,\n\t1: $space-1,\n\t2: $space-2,\n\t3: $space-3,\n\t4: $space-4,\n\t5: $space-5,\n\t6: $space-6,\n\t7: $space-7,\n\t8: $space-8,\n\t9: $space-9,\n\t10: $space-10\n);\n\n/* =========================\n\t BASE LAYOUT\n========================= */\n\n.container {\n\tpadding: $space-xl;\n}\n\n.section {\n\tmargin-bottom: $space-xxl;\n}\n\n.section-title {\n\tmargin-bottom: $space-xl;\n}\n\n.block {\n\tmargin-bottom: $space-xl;\n}\n\n.block-title {\n\tmargin-bottom: $space-lg;\n}\n\n/* =========================\n\t TEXT & CONTENT\n========================= */\n\np,\n.text {\n\tmargin-bottom: $space-md;\n}\n\n.hint {\n\tmargin-top: $space-sm;\n}\n\n/* =========================\n\t LISTS\n========================= */\n\n.list {\n\tpadding-left: $space-lg;\n\tmargin-bottom: $space-md;\n}\n\n.list-item {\n\tmargin-bottom: $space-sm;\n}\n\n.list-nested {\n\tmargin-top: $space-sm;\n}\n\n/* =========================\n\t TABLES\n========================= */\n\n.table {\n\tmargin-bottom: $space-lg;\n}\n\n.table-caption {\n\tmargin-bottom: $space-sm;\n}\n\n/* =========================\n\t FORMS\n========================= */\n\n.form-group {\n\tmargin-bottom: $space-md;\n}\n\n.label {\n\tmargin-bottom: $space-xs;\n\tdisplay: block;\n}\n\n.input,\n.textarea,\n.select {\n\tmargin-top: $space-xs;\n}\n\n/* =========================\n\t TOASTS\n========================= */\n\n.toast {\n\tpadding: $space-md;\n}\n\n.toast-stack {\n\tgap: $space-sm;\n}\n","@charset \"UTF-8\";\n@font-face {\n  font-family: \"IBM Plex Mono\";\n  src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf\") format(\"truetype\");\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"IBM Plex Mono\";\n  src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf\") format(\"truetype\");\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"IBM Plex Mono\";\n  src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf\") format(\"truetype\");\n  font-weight: 600;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"IBM Plex Mono\";\n  src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf\") format(\"truetype\");\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"IBM Plex Mono\";\n  src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf\") format(\"truetype\");\n  font-weight: 400;\n  font-style: italic;\n  font-display: swap;\n}\n/* =========================\n\t SPACING SCALE\n========================= */\n/* aliases for readability */\n/* map — for utilities generation */\n/* =========================\n\t BASE LAYOUT\n========================= */\n.container {\n  padding: 34px;\n}\n\n.section {\n  margin-bottom: 48px;\n}\n\n.section-title {\n  margin-bottom: 34px;\n}\n\n.block {\n  margin-bottom: 34px;\n}\n\n.block-title {\n  margin-bottom: 22px;\n}\n\n/* =========================\n\t TEXT & CONTENT\n========================= */\np,\n.text {\n  margin-bottom: 15px;\n}\n\n.hint {\n  margin-top: 8px;\n}\n\n/* =========================\n\t LISTS\n========================= */\n.list {\n  padding-left: 22px;\n  margin-bottom: 15px;\n}\n\n.list-item {\n  margin-bottom: 8px;\n}\n\n.list-nested {\n  margin-top: 8px;\n}\n\n/* =========================\n\t TABLES\n========================= */\n.table {\n  margin-bottom: 22px;\n}\n\n.table-caption {\n  margin-bottom: 8px;\n}\n\n/* =========================\n\t FORMS\n========================= */\n.form-group {\n  margin-bottom: 15px;\n}\n\n.label {\n  margin-bottom: 5px;\n  display: block;\n}\n\n.input,\n.textarea,\n.select {\n  margin-top: 5px;\n}\n\n/* =========================\n\t TOASTS\n========================= */\n.toast {\n  padding: 15px;\n}\n\n.toast-stack {\n  gap: 8px;\n}\n\n/* =========================\n\t FONT FAMILIES\n========================= */\n/* =========================\n\t FONT WEIGHTS\n========================= */\n/* =========================\n\t FONT SIZES (scale)\n========================= */\n/* =========================\n\t LINE HEIGHTS\n========================= */\n/* =========================\n\t LETTER SPACING\n========================= */\n/* =========================\n\t BASE TYPOGRAPHY\n========================= */\nhtml {\n  font-size: 100%;\n}\n\nbody {\n  font-family: \"IBM Plex Mono\", monospace;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 1.6;\n  letter-spacing: 0;\n}\n\n/* =========================\n\t HEADINGS\n========================= */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-family: \"IBM Plex Mono\", monospace;\n  font-weight: 600;\n  line-height: 1.25;\n  margin: 0;\n}\nh1.contrast,\nh2.contrast,\nh3.contrast,\nh4.contrast,\nh5.contrast,\nh6.contrast {\n  background: #F8F8F8;\n  color: #0A0A0D;\n}\n\nh1 {\n  font-size: 36px;\n  letter-spacing: -0.01em;\n}\n\nh2 {\n  font-size: 28px;\n}\n\nh3 {\n  font-size: 24px;\n}\n\nh4 {\n  font-size: 20px;\n}\n\nh5 {\n  font-size: 18px;\n}\n\nh6 {\n  font-size: 16px;\n  font-weight: 500;\n}\n\n/* =========================\n\t TEXT VARIANTS\n========================= */\n.text,\np {\n  font-size: 16px;\n  line-height: 1.6;\n}\n\n.text-sm {\n  font-size: 13px;\n  line-height: 1.4;\n}\n\n.text-lg {\n  font-size: 17px;\n  line-height: 1.6;\n}\n\n.text-muted {\n  font-size: 13px;\n  color: #AAAEB2;\n}\n\n.text-strong,\nstrong {\n  font-weight: 600;\n}\n\n.text-bold {\n  font-weight: 700;\n}\n\n.text-italic,\nem {\n  font-style: italic;\n}\n\n/* =========================\n\t CODE / MONO\n========================= */\ncode,\npre,\n.code {\n  font-family: \"IBM Plex Mono\", monospace;\n  font-size: 16px;\n  line-height: 1.4;\n  background-color: #1A1A23;\n}\n\npre {\n  font-size: 16px;\n  line-height: 1.6;\n  white-space: pre-wrap;\n}\n\n/* =========================\n\t LINKS\n========================= */\na {\n  font-weight: 500;\n  text-decoration: none;\n}\n\n.link {\n  font-size: inherit;\n  font-weight: 500;\n}\n\n/* =========================\n\t LABELS / META\n========================= */\n.label {\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1.4;\n}\n\n.hint,\n.meta {\n  font-size: 12px;\n  line-height: 1.4;\n}\n\n/* =========================\n\t TABLE TEXT\n========================= */\n.table {\n  font-size: 13px;\n  line-height: 1.4;\n}\n.table th {\n  font-weight: 600;\n}\n.table td {\n  font-weight: 400;\n}\n\n/* =========================\n\t LISTS\n========================= */\n.list {\n  font-size: 16px;\n  line-height: 1.6;\n}\n\n.list-item {\n  font-size: inherit;\n}\n\n/* =========================\n\t MODALS\n========================= */\n.modal-title {\n  font-size: 20px;\n  font-weight: 600;\n}\n\n.modal-body {\n  font-size: 16px;\n}\n\n/* =========================\n\t TOASTS\n========================= */\n.toast-title {\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.toast-text {\n  font-size: 13px;\n  line-height: 1.4;\n}\n\n.palette {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n}\n.palette .color .color-box {\n  width: 100px;\n  height: 80px;\n}\n\n/* BACKGROUND COLORS */\n.bg-primary {\n  background: #F8F8F8;\n}\n\n.bg-secondary {\n  background: #00B3FF;\n}\n\n.bg-success {\n  background: #00FFAA;\n}\n\n.bg-accent {\n  background: #FF00CC;\n}\n\n.bg-info {\n  background: #8A2CE2;\n}\n\n.bg-warning {\n  background: #FFD900;\n}\n\n.bg-error {\n  background: #FF3C00;\n}\n\n/* TEXT COLORS */\n.text-color-primary {\n  color: #F8F8F8;\n}\n\n.text-color-secondary {\n  color: #00B3FF;\n}\n\n.text-color-success {\n  color: #00FFAA;\n}\n\n.text-color-accent {\n  color: #FF00CC;\n}\n\n.text-color-info {\n  color: #8A2CE2;\n}\n\n.text-color-warning {\n  color: #FFD900;\n}\n\n.text-color-error {\n  color: #FF3C00;\n}\n\n.btn {\n  font-family: \"IBM Plex Mono\", monospace;\n  font-size: 17px;\n  font-weight: 600;\n  line-height: 1;\n  letter-spacing: 0.04em;\n  padding: 12px 22px;\n  border-radius: 0;\n  border-width: 2px;\n  border-left-width: 6px;\n  border-style: solid;\n  border-color: #F8F8F8;\n  text-transform: uppercase;\n  background-color: transparent;\n  transition-duration: 0.2s;\n  transition-property: background-color, border-color, color;\n}\n.btn.with-icon {\n  border-left-width: 48px;\n  position: relative;\n}\n.btn.with-icon .ph,\n.btn.with-icon .ph-bold {\n  position: absolute;\n  color: #0a0a0d;\n  left: -48px;\n  top: 0;\n  font-size: 28px;\n  height: 100%;\n  display: inline-flex;\n  align-items: center;\n  width: 48px;\n  justify-content: center;\n  transition-duration: 0.2s;\n  transition-property: color, left;\n}\n.btn:hover.with-icon .ph,\n.btn:hover.with-icon .ph-bold {\n  left: -28px;\n}\n.btn.btn-primary {\n  color: #F8F8F8;\n  border-color: #F8F8F8;\n}\n.btn.btn-primary:hover {\n  background-color: #F8F8F8;\n  color: #0A0A0D;\n}\n.btn.btn-secondary {\n  color: #00B3FF;\n  border-color: #00B3FF;\n}\n.btn.btn-secondary:hover {\n  background-color: #00B3FF;\n  color: #F8F8F8;\n}\n.btn.btn-secondary:hover.with-icon .ph,\n.btn.btn-secondary:hover.with-icon .ph-bold {\n  color: #F8F8F8;\n}\n.btn.btn-accent {\n  color: #FF00CC;\n  border-color: #FF00CC;\n}\n.btn.btn-accent:hover {\n  background-color: #FF00CC;\n  color: #F8F8F8;\n}\n.btn.btn-accent:hover.with-icon .ph,\n.btn.btn-accent:hover.with-icon .ph-bold {\n  color: #F8F8F8;\n}\n.btn.btn-danger {\n  color: #FF3C00;\n  border-color: #FF3C00;\n}\n.btn.btn-danger:hover {\n  background-color: #FF3C00;\n  color: #0A0A0D;\n}\n.btn.btn-warning {\n  color: #FFD900;\n  border-color: #FFD900;\n}\n.btn.btn-warning:hover {\n  background-color: #FFD900;\n  color: #0A0A0D;\n}\n.btn.btn-success {\n  color: #00FFAA;\n  border-color: #00FFAA;\n}\n.btn.btn-success:hover {\n  background-color: #00FFAA;\n  color: #0A0A0D;\n}\n.btn.btn-info {\n  color: #8A2CE2;\n  border-color: #8A2CE2;\n}\n.btn.btn-info:hover {\n  background-color: #8A2CE2;\n  color: #F8F8F8;\n}\n.btn.btn-info:hover.with-icon .ph,\n.btn.btn-info:hover.with-icon .ph-bold {\n  color: #F8F8F8;\n}\n.btn[disabled] {\n  color: #AAAEB2;\n  border-color: #1A1A23;\n  background-color: #1A1A23;\n}\n.btn[disabled].with-icon .ph,\n.btn[disabled].with-icon .ph-bold {\n  color: #AAAEB2;\n}\n.btn[disabled]:hover {\n  background-color: #1A1A23;\n  color: #AAAEB2;\n}\n.btn[disabled]:hover.with-icon .ph,\n.btn[disabled]:hover.with-icon .ph-bold {\n  color: #AAAEB2;\n}\n.btn[disabled].with-icon .ph,\n.btn[disabled].with-icon .ph-bold {\n  left: -28px;\n}\n.btn.btn-small {\n  font-size: 14px;\n  font-weight: 500;\n  padding: 8px 8px;\n}\n.btn.btn-small.with-icon {\n  border-left-width: 32px;\n}\n.btn.btn-small.with-icon .ph,\n.btn.btn-small.with-icon .ph-bold {\n  left: -40px;\n  font-size: 22px;\n}\n.btn.btn-large {\n  font-size: 20px;\n  font-weight: 700;\n  padding: 15px 48px;\n}\n\n.btn-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 30px;\n  height: 30px;\n  background: transparent;\n  color: #F8F8F8;\n  font-size: 20px;\n  border: 0;\n  transition-duration: 0.2s;\n  transition-property: color;\n}\n.btn-icon .ph {\n  transform: rotate(0);\n  transition-duration: 0.2s;\n  transition-property: transform;\n}\n.btn-icon:hover {\n  color: #AAAEB2;\n}\n.btn-icon:hover .ph {\n  transform: rotate(90deg);\n}\n\n.form-group .label {\n  display: flex;\n  flex-direction: column;\n  font-size: 17px;\n  max-width: 420px;\n  position: relative;\n}\n.form-group .label .ph {\n  position: absolute;\n  color: #F8F8F8;\n  left: 0;\n  bottom: 2px;\n  font-size: 28px;\n  height: 56px;\n  display: inline-flex;\n  align-items: center;\n  width: 48px;\n  justify-content: center;\n  transition-duration: 0.2s;\n  transition-property: color, left;\n}\n.form-group .label .input {\n  font-family: \"IBM Plex Mono\", monospace;\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 1;\n  letter-spacing: 0.04em;\n  padding: 12px 22px;\n  margin-top: 8px;\n  border-radius: 0;\n  border-width: 2px;\n  border-bottom-width: 6px;\n  border-style: solid;\n  border-color: #F8F8F8;\n  color: #F8F8F8;\n  background-color: transparent;\n  transition-duration: 0.2s;\n  transition-property: background-color, border-color, color;\n}\n.form-group .label .input:hover {\n  border-bottom-color: #AAAEB2;\n}\n.form-group .label .input:focus {\n  outline: none;\n  border-color: #00B3FF;\n}\n.form-group .label .input::placeholder {\n  color: #AAAEB2;\n}\n.form-group .label textarea.input {\n  height: 120px;\n  line-height: 1.25;\n  resize: none;\n}\n.form-group .label .ph + .input,\n.form-group .label .ph + .select-wrap .select {\n  padding-left: 42px;\n}\n.form-group .label .select-wrap {\n  margin-top: 8px;\n}\n.form-group .label .select {\n  width: 100%;\n  height: 56px;\n  margin-top: 0;\n  /* убрать нативную стрелку */\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n.form-group .label .select:focus {\n  outline: none;\n}\n.form-group .label .select option {\n  color: #F8F8F8;\n  background: #1A1A23;\n}\n.form-group .label .select-wrap::after {\n  content: \"\";\n  position: absolute;\n  right: 22px;\n  bottom: 18px;\n  transform: translateY(-50%);\n  width: 0;\n  height: 0;\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-top: 10px solid #F8F8F8;\n  pointer-events: none;\n}\n\n.radio {\n  display: inline-flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n}\n.radio input[type=radio] {\n  display: none;\n}\n.radio .radio-control {\n  display: inline-block;\n  border-radius: 100%;\n  border: 2px solid #F8F8F8;\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  transition-duration: 0.2s;\n  transition-property: background, border-color;\n}\n.radio:hover .radio-control {\n  background: #4A4A57;\n}\n.radio input[type=radio]:checked + .radio-control {\n  background: #F8F8F8;\n}\n.radio input[type=radio]:disabled + .radio-control {\n  background: #4A4A57;\n  border-color: #4A4A57;\n}\n.radio .radio-label {\n  font-size: 17px;\n}\n\n.checkbox {\n  display: inline-flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n}\n.checkbox input[type=checkbox] {\n  display: none;\n}\n.checkbox .checkbox-control {\n  height: 16px;\n  width: 30px;\n  border: 2px solid #F8F8F8;\n  position: relative;\n  background: transparent;\n  transition-duration: 0.2s;\n  transition-property: border-color, background;\n  display: block;\n}\n.checkbox .checkbox-control:before {\n  content: \"\";\n  display: block;\n  height: 20px;\n  width: 20px;\n  background: #F8F8F8;\n  position: absolute;\n  left: -6px;\n  top: -4px;\n  transition-duration: 0.2s;\n  transition-property: left, background;\n}\n.checkbox:hover .checkbox-control {\n  background: #4A4A57;\n}\n.checkbox input[type=checkbox]:checked:not(:disabled) + .checkbox-control {\n  background: #00B3FF;\n  border-color: #00B3FF;\n}\n.checkbox input[type=checkbox]:checked + .checkbox-control:before {\n  left: 12px;\n}\n.checkbox input[type=checkbox]:disabled + .checkbox-control {\n  border-color: #4A4A57;\n}\n.checkbox input[type=checkbox]:disabled + .checkbox-control:before {\n  background: #4A4A57;\n}\n\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  list-style-type: none;\n  padding-left: 0;\n}\n.list .list-item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  margin-left: 0;\n}\n.list.list-ordered {\n  list-style-type: decimal;\n  display: list-item;\n  margin-left: 30px;\n}\n.list.list-ordered .list-item {\n  display: list-item;\n}\n.list.list-definition {\n  gap: 15px;\n}\n.list.list-definition .list-row {\n  border-left: 2px solid #F8F8F8;\n}\n.list.list-definition .list-row .list-term::before,\n.list.list-definition .list-row .list-desc::before {\n  content: \"\";\n  height: 2px;\n  width: 12px;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  margin-top: -1px;\n  display: block;\n  background: #F8F8F8;\n}\n.list.list-definition .list-row .list-term,\n.list.list-definition .list-row .list-desc {\n  position: relative;\n}\n.list.list-definition .list-row .list-term {\n  padding-left: 18px;\n  font-size: 20px;\n}\n.list.list-definition .list-row .list-desc {\n  padding-left: 18px;\n}\n.list.list-nav {\n  max-width: 420px;\n  width: 100%;\n  gap: 0;\n}\n.list.list-nav .list-item {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  height: 50px;\n  margin: 0;\n}\n.list.list-nav .list-item .list-action {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  padding: 8px 12px;\n  border: 0;\n  font-size: 20px;\n  background: #1A1A23;\n  color: inherit;\n  transition-duration: 0.2s;\n  transition-property: background;\n}\n.list.list-nav .list-item .list-action:hover {\n  background: #00B3FF;\n}\n.list.list-nav .list-item .list-action .list-label {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n}\n.list.list-nav .list-item .list-action .list-meta {\n  padding: 8px;\n  background: #00FFAA;\n  color: #0A0A0D;\n  display: flex;\n}\n.list.list-nav .list-item.list-item-active .list-action {\n  background: #00B3FF;\n}\n.list.list-actions {\n  width: 100%;\n  max-width: 420px;\n  gap: 22px;\n}\n.list.list-actions .list-item {\n  justify-content: space-between;\n  align-items: flex-start;\n}\n.list.list-actions .list-item .list-content {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.list.list-actions .list-item .list-content .list-title {\n  font-size: 20px;\n  line-height: 1;\n}\n.badge {\n  background: #F8F8F8;\n  color: #1A1A23;\n  padding: 5px 8px;\n  font-size: 16px;\n}\n.badge.badge-success {\n  background: #00FFAA;\n}\n.badge.badge-warning {\n  background: #FFD900;\n}\n.badge.badge-error, .badge.badge-danger {\n  background: #FF3C00;\n}\n.badge.badge-info {\n  background: #8A2CE2;\n  color: #F8F8F8;\n}\n.badge.badge-secondary {\n  background: #00B3FF;\n  color: #F8F8F8;\n}\n\n.table {\n  text-align: left;\n  border: 2px solid #F8F8F8;\n  padding: 15px;\n}\n.table .table-caption {\n  text-align: left;\n  font-size: 20px;\n  background: #F8F8F8;\n  width: max-content;\n  color: #1A1A23;\n  padding: 5px 12px;\n  margin-bottom: 0;\n}\n.table .table-row th,\n.table .table-row td {\n  padding: 12px 18px;\n  font-size: 16px;\n}\n.table .table-foot th,\n.table .table-foot td {\n  padding-top: 15px;\n}\n\n.toast {\n  position: fixed;\n  bottom: -100px;\n  right: 15px;\n  max-width: 420px;\n  background: #1A1A23;\n  border: 2px solid #F8F8F8;\n  padding: 0;\n  opacity: 0;\n  transition-duration: 0.25s;\n  transition-property: opacity, top, bottom;\n}\n.toast.a-show {\n  bottom: 15px;\n  opacity: 1;\n}\n.toast.a-hide {\n  bottom: 115px;\n  opacity: 0;\n}\n.toast .toast-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n.toast .toast-content .toast-title {\n  font-size: 24px;\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n  color: #0A0A0D;\n  background: #F8F8F8;\n  padding: 5px 8px;\n}\n.toast .toast-content .toast-text {\n  font-size: 16px;\n  padding: 22px 15px;\n  margin: 0;\n}\n.toast .toast-close {\n  position: absolute;\n  top: 0;\n  right: 0;\n  color: #0A0A0D;\n  height: 40px;\n  width: 40px;\n}\n.toast .toast-close:hover {\n  color: #1A1A23;\n}\n.toast.toast-success {\n  border-color: #00FFAA;\n}\n.toast.toast-success .toast-title {\n  background: #00FFAA;\n}\n.toast.toast-warning {\n  border-color: #FFD900;\n}\n.toast.toast-warning .toast-title {\n  background: #FFD900;\n}\n.toast.toast-danger {\n  border-color: #FF3C00;\n}\n.toast.toast-danger .toast-title {\n  background: #FF3C00;\n}\n\n.card {\n  max-width: 420px;\n  width: 100%;\n  border: 2px solid #F8F8F8;\n}\n.card .card-title {\n  color: #0A0A0D;\n  background: #F8F8F8;\n  padding: 8px 12px;\n}\n.card .card-content {\n  padding: 15px;\n}\n.card .card-content .card-thumb {\n  width: 100%;\n}\n.card .card-content p {\n  margin-top: 8px;\n  margin-bottom: 0;\n}\n.card .card-footer {\n  padding: 8px 15px;\n  padding-bottom: 15px;\n}\n\n.modal {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.modal .modal-backdrop {\n  position: fixed;\n  z-index: 1010;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: #0A0A0D;\n  opacity: 0;\n  transition-duration: 0.25s;\n  transition-property: opacity;\n}\n.modal .modal-panel {\n  position: relative;\n  z-index: 1020;\n  width: 100%;\n  max-width: 800px;\n  height: auto;\n  min-height: 400px;\n  max-height: 800px;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  margin-top: 200px;\n  background: #0A0A0D;\n  border: 2px solid #F8F8F8;\n  opacity: 0;\n  transition-duration: 0.25s;\n  transition-property: opacity, margin-top;\n}\n.modal .modal-panel .modal-header {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding-right: 15px;\n}\n.modal .modal-panel .modal-header .modal-title {\n  padding: 12px 15px;\n  background: #F8F8F8;\n  color: #0A0A0D;\n  text-transform: uppercase;\n}\n.modal .modal-panel .modal-body {\n  max-height: 700px;\n  overflow-y: auto;\n  padding: 18px;\n}\n.modal .modal-panel .modal-footer {\n  padding: 18px;\n}\n.modal .modal-panel .modal-footer .actions {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  gap: 15px;\n  width: 100%;\n}\n.modal.a-show .modal-backdrop {\n  opacity: 1;\n}\n.modal.a-show .modal-panel {\n  opacity: 1;\n  margin-top: 0;\n}\n.modal.a-hide .modal-backdrop {\n  opacity: 0;\n}\n.modal.a-hide .modal-panel {\n  opacity: 0;\n  margin-top: -200px;\n}\n\n/* =========================\n   SPACING UTILITIES\n========================= */\n/* margin */\n.m-0 {\n  margin: 0 !important;\n}\n\n.mt-0 {\n  margin-top: 0 !important;\n}\n\n.mr-0 {\n  margin-right: 0 !important;\n}\n\n.mb-0 {\n  margin-bottom: 0 !important;\n}\n\n.ml-0 {\n  margin-left: 0 !important;\n}\n\n.mx-0 {\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n.my-0 {\n  margin-top: 0 !important;\n  margin-bottom: 0 !important;\n}\n\n/* padding */\n.p-0 {\n  padding: 0 !important;\n}\n\n.pt-0 {\n  padding-top: 0 !important;\n}\n\n.pr-0 {\n  padding-right: 0 !important;\n}\n\n.pb-0 {\n  padding-bottom: 0 !important;\n}\n\n.pl-0 {\n  padding-left: 0 !important;\n}\n\n.px-0 {\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n}\n\n.py-0 {\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n}\n\n/* margin */\n.m-1 {\n  margin: 5px !important;\n}\n\n.mt-1 {\n  margin-top: 5px !important;\n}\n\n.mr-1 {\n  margin-right: 5px !important;\n}\n\n.mb-1 {\n  margin-bottom: 5px !important;\n}\n\n.ml-1 {\n  margin-left: 5px !important;\n}\n\n.mx-1 {\n  margin-left: 5px !important;\n  margin-right: 5px !important;\n}\n\n.my-1 {\n  margin-top: 5px !important;\n  margin-bottom: 5px !important;\n}\n\n/* padding */\n.p-1 {\n  padding: 5px !important;\n}\n\n.pt-1 {\n  padding-top: 5px !important;\n}\n\n.pr-1 {\n  padding-right: 5px !important;\n}\n\n.pb-1 {\n  padding-bottom: 5px !important;\n}\n\n.pl-1 {\n  padding-left: 5px !important;\n}\n\n.px-1 {\n  padding-left: 5px !important;\n  padding-right: 5px !important;\n}\n\n.py-1 {\n  padding-top: 5px !important;\n  padding-bottom: 5px !important;\n}\n\n/* margin */\n.m-2 {\n  margin: 8px !important;\n}\n\n.mt-2 {\n  margin-top: 8px !important;\n}\n\n.mr-2 {\n  margin-right: 8px !important;\n}\n\n.mb-2 {\n  margin-bottom: 8px !important;\n}\n\n.ml-2 {\n  margin-left: 8px !important;\n}\n\n.mx-2 {\n  margin-left: 8px !important;\n  margin-right: 8px !important;\n}\n\n.my-2 {\n  margin-top: 8px !important;\n  margin-bottom: 8px !important;\n}\n\n/* padding */\n.p-2 {\n  padding: 8px !important;\n}\n\n.pt-2 {\n  padding-top: 8px !important;\n}\n\n.pr-2 {\n  padding-right: 8px !important;\n}\n\n.pb-2 {\n  padding-bottom: 8px !important;\n}\n\n.pl-2 {\n  padding-left: 8px !important;\n}\n\n.px-2 {\n  padding-left: 8px !important;\n  padding-right: 8px !important;\n}\n\n.py-2 {\n  padding-top: 8px !important;\n  padding-bottom: 8px !important;\n}\n\n/* margin */\n.m-3 {\n  margin: 12px !important;\n}\n\n.mt-3 {\n  margin-top: 12px !important;\n}\n\n.mr-3 {\n  margin-right: 12px !important;\n}\n\n.mb-3 {\n  margin-bottom: 12px !important;\n}\n\n.ml-3 {\n  margin-left: 12px !important;\n}\n\n.mx-3 {\n  margin-left: 12px !important;\n  margin-right: 12px !important;\n}\n\n.my-3 {\n  margin-top: 12px !important;\n  margin-bottom: 12px !important;\n}\n\n/* padding */\n.p-3 {\n  padding: 12px !important;\n}\n\n.pt-3 {\n  padding-top: 12px !important;\n}\n\n.pr-3 {\n  padding-right: 12px !important;\n}\n\n.pb-3 {\n  padding-bottom: 12px !important;\n}\n\n.pl-3 {\n  padding-left: 12px !important;\n}\n\n.px-3 {\n  padding-left: 12px !important;\n  padding-right: 12px !important;\n}\n\n.py-3 {\n  padding-top: 12px !important;\n  padding-bottom: 12px !important;\n}\n\n/* margin */\n.m-4 {\n  margin: 15px !important;\n}\n\n.mt-4 {\n  margin-top: 15px !important;\n}\n\n.mr-4 {\n  margin-right: 15px !important;\n}\n\n.mb-4 {\n  margin-bottom: 15px !important;\n}\n\n.ml-4 {\n  margin-left: 15px !important;\n}\n\n.mx-4 {\n  margin-left: 15px !important;\n  margin-right: 15px !important;\n}\n\n.my-4 {\n  margin-top: 15px !important;\n  margin-bottom: 15px !important;\n}\n\n/* padding */\n.p-4 {\n  padding: 15px !important;\n}\n\n.pt-4 {\n  padding-top: 15px !important;\n}\n\n.pr-4 {\n  padding-right: 15px !important;\n}\n\n.pb-4 {\n  padding-bottom: 15px !important;\n}\n\n.pl-4 {\n  padding-left: 15px !important;\n}\n\n.px-4 {\n  padding-left: 15px !important;\n  padding-right: 15px !important;\n}\n\n.py-4 {\n  padding-top: 15px !important;\n  padding-bottom: 15px !important;\n}\n\n/* margin */\n.m-5 {\n  margin: 18px !important;\n}\n\n.mt-5 {\n  margin-top: 18px !important;\n}\n\n.mr-5 {\n  margin-right: 18px !important;\n}\n\n.mb-5 {\n  margin-bottom: 18px !important;\n}\n\n.ml-5 {\n  margin-left: 18px !important;\n}\n\n.mx-5 {\n  margin-left: 18px !important;\n  margin-right: 18px !important;\n}\n\n.my-5 {\n  margin-top: 18px !important;\n  margin-bottom: 18px !important;\n}\n\n/* padding */\n.p-5 {\n  padding: 18px !important;\n}\n\n.pt-5 {\n  padding-top: 18px !important;\n}\n\n.pr-5 {\n  padding-right: 18px !important;\n}\n\n.pb-5 {\n  padding-bottom: 18px !important;\n}\n\n.pl-5 {\n  padding-left: 18px !important;\n}\n\n.px-5 {\n  padding-left: 18px !important;\n  padding-right: 18px !important;\n}\n\n.py-5 {\n  padding-top: 18px !important;\n  padding-bottom: 18px !important;\n}\n\n/* margin */\n.m-6 {\n  margin: 22px !important;\n}\n\n.mt-6 {\n  margin-top: 22px !important;\n}\n\n.mr-6 {\n  margin-right: 22px !important;\n}\n\n.mb-6 {\n  margin-bottom: 22px !important;\n}\n\n.ml-6 {\n  margin-left: 22px !important;\n}\n\n.mx-6 {\n  margin-left: 22px !important;\n  margin-right: 22px !important;\n}\n\n.my-6 {\n  margin-top: 22px !important;\n  margin-bottom: 22px !important;\n}\n\n/* padding */\n.p-6 {\n  padding: 22px !important;\n}\n\n.pt-6 {\n  padding-top: 22px !important;\n}\n\n.pr-6 {\n  padding-right: 22px !important;\n}\n\n.pb-6 {\n  padding-bottom: 22px !important;\n}\n\n.pl-6 {\n  padding-left: 22px !important;\n}\n\n.px-6 {\n  padding-left: 22px !important;\n  padding-right: 22px !important;\n}\n\n.py-6 {\n  padding-top: 22px !important;\n  padding-bottom: 22px !important;\n}\n\n/* margin */\n.m-7 {\n  margin: 26px !important;\n}\n\n.mt-7 {\n  margin-top: 26px !important;\n}\n\n.mr-7 {\n  margin-right: 26px !important;\n}\n\n.mb-7 {\n  margin-bottom: 26px !important;\n}\n\n.ml-7 {\n  margin-left: 26px !important;\n}\n\n.mx-7 {\n  margin-left: 26px !important;\n  margin-right: 26px !important;\n}\n\n.my-7 {\n  margin-top: 26px !important;\n  margin-bottom: 26px !important;\n}\n\n/* padding */\n.p-7 {\n  padding: 26px !important;\n}\n\n.pt-7 {\n  padding-top: 26px !important;\n}\n\n.pr-7 {\n  padding-right: 26px !important;\n}\n\n.pb-7 {\n  padding-bottom: 26px !important;\n}\n\n.pl-7 {\n  padding-left: 26px !important;\n}\n\n.px-7 {\n  padding-left: 26px !important;\n  padding-right: 26px !important;\n}\n\n.py-7 {\n  padding-top: 26px !important;\n  padding-bottom: 26px !important;\n}\n\n/* margin */\n.m-8 {\n  margin: 34px !important;\n}\n\n.mt-8 {\n  margin-top: 34px !important;\n}\n\n.mr-8 {\n  margin-right: 34px !important;\n}\n\n.mb-8 {\n  margin-bottom: 34px !important;\n}\n\n.ml-8 {\n  margin-left: 34px !important;\n}\n\n.mx-8 {\n  margin-left: 34px !important;\n  margin-right: 34px !important;\n}\n\n.my-8 {\n  margin-top: 34px !important;\n  margin-bottom: 34px !important;\n}\n\n/* padding */\n.p-8 {\n  padding: 34px !important;\n}\n\n.pt-8 {\n  padding-top: 34px !important;\n}\n\n.pr-8 {\n  padding-right: 34px !important;\n}\n\n.pb-8 {\n  padding-bottom: 34px !important;\n}\n\n.pl-8 {\n  padding-left: 34px !important;\n}\n\n.px-8 {\n  padding-left: 34px !important;\n  padding-right: 34px !important;\n}\n\n.py-8 {\n  padding-top: 34px !important;\n  padding-bottom: 34px !important;\n}\n\n/* margin */\n.m-9 {\n  margin: 42px !important;\n}\n\n.mt-9 {\n  margin-top: 42px !important;\n}\n\n.mr-9 {\n  margin-right: 42px !important;\n}\n\n.mb-9 {\n  margin-bottom: 42px !important;\n}\n\n.ml-9 {\n  margin-left: 42px !important;\n}\n\n.mx-9 {\n  margin-left: 42px !important;\n  margin-right: 42px !important;\n}\n\n.my-9 {\n  margin-top: 42px !important;\n  margin-bottom: 42px !important;\n}\n\n/* padding */\n.p-9 {\n  padding: 42px !important;\n}\n\n.pt-9 {\n  padding-top: 42px !important;\n}\n\n.pr-9 {\n  padding-right: 42px !important;\n}\n\n.pb-9 {\n  padding-bottom: 42px !important;\n}\n\n.pl-9 {\n  padding-left: 42px !important;\n}\n\n.px-9 {\n  padding-left: 42px !important;\n  padding-right: 42px !important;\n}\n\n.py-9 {\n  padding-top: 42px !important;\n  padding-bottom: 42px !important;\n}\n\n/* margin */\n.m-10 {\n  margin: 48px !important;\n}\n\n.mt-10 {\n  margin-top: 48px !important;\n}\n\n.mr-10 {\n  margin-right: 48px !important;\n}\n\n.mb-10 {\n  margin-bottom: 48px !important;\n}\n\n.ml-10 {\n  margin-left: 48px !important;\n}\n\n.mx-10 {\n  margin-left: 48px !important;\n  margin-right: 48px !important;\n}\n\n.my-10 {\n  margin-top: 48px !important;\n  margin-bottom: 48px !important;\n}\n\n/* padding */\n.p-10 {\n  padding: 48px !important;\n}\n\n.pt-10 {\n  padding-top: 48px !important;\n}\n\n.pr-10 {\n  padding-right: 48px !important;\n}\n\n.pb-10 {\n  padding-bottom: 48px !important;\n}\n\n.pl-10 {\n  padding-left: 48px !important;\n}\n\n.px-10 {\n  padding-left: 48px !important;\n  padding-right: 48px !important;\n}\n\n.py-10 {\n  padding-top: 48px !important;\n  padding-bottom: 48px !important;\n}\n\n.row {\n  display: flex;\n  flex-direction: row;\n}\n\n* {\n  box-sizing: border-box;\n}\n\n*::-webkit-scrollbar {\n  width: 10px;\n}\n\n*::-webkit-scrollbar-track {\n  width: 10px;\n  background: #0A0A0D;\n  cursor: pointer;\n}\n\n*::-webkit-scrollbar-thumb {\n  width: 10px;\n  background: #4A4A57;\n  cursor: default;\n}\n\n*::-webkit-scrollbar-corner {\n  background: transparent;\n  height: 1px;\n}\n\n*::-webkit-scrollbar-button {\n  display: none;\n}\n\n* {\n  padding: 0;\n  margin: 0;\n}\n\nhtml, body {\n  font-family: \"IBM Plex Mono\", monospace;\n  font-weight: 400;\n}\n\nbody {\n  background-color: #0A0A0D;\n  color: #F8F8F8;\n  font-size: 15px;\n  line-height: 1.45;\n  letter-spacing: 0.01em;\n}\n\n.load-screen {\n  display: none;\n}\n.load-screen.a-show {\n  display: block;\n}\n\n.error-screen {\n  display: none;\n}\n.error-screen.a-show {\n  display: block;\n}\n\n.screen {\n  display: none;\n}\n.screen.a-show {\n  display: block;\n}\n\n.hud {\n  width: 100%;\n  padding: 18px;\n}\n.hud > .row {\n  justify-content: space-between;\n  align-items: center;\n  gap: 15px;\n  flex-wrap: wrap;\n}\n.hud .nav-toggle {\n  font-size: 42px;\n  width: 50px;\n  height: 50px;\n  background: #F8F8F8;\n  color: #0A0A0D;\n}\n.hud .nav-toggle:hover {\n  color: #FF00CC;\n}\n.hud .app-title {\n  padding: 8px 15px;\n  text-transform: uppercase;\n}","/* =========================\n\t FONT FAMILIES\n========================= */\n\n$font-family-base: \"IBM Plex Mono\", monospace;\n$font-family-code: $font-family-base;\n\n/* =========================\n\t FONT WEIGHTS\n========================= */\n\n$font-weight-regular: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n\n/* =========================\n\t FONT SIZES (scale)\n========================= */\n\n$font-size-xs: 12px;\n$font-size-sm: 13px;\n$font-size-md: 14px;\n$font-size-base: 16px;\n$font-size-lg: 17px;\n$font-size-xl: 20px;\n\n$font-size-h1: 36px;\n$font-size-h2: 28px;\n$font-size-h3: 24px;\n$font-size-h4: 20px;\n$font-size-h5: 18px;\n$font-size-h6: 16px;\n\n/* =========================\n\t LINE HEIGHTS\n========================= */\n\n$line-height-base: 1;\n$line-height-tight: 1.15;\n$line-height-snug: 1.25;\n$line-height-normal: 1.4;\n$line-height-relaxed: 1.6;\n\n/* =========================\n\t LETTER SPACING\n========================= */\n\n$letter-spacing-tight: -0.01em;\n$letter-spacing-normal: 0;\n$letter-spacing-wide: 0.04em;\n\n/* =========================\n\t BASE TYPOGRAPHY\n========================= */\n\nhtml {\n\tfont-size: 100%;\n}\n\nbody {\n\tfont-family: $font-family-base;\n\tfont-size: $font-size-base;\n\tfont-weight: $font-weight-regular;\n\tline-height: $line-height-relaxed;\n\tletter-spacing: $letter-spacing-normal;\n}\n\n/* =========================\n\t HEADINGS\n========================= */\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n\tfont-family: $font-family-base;\n\tfont-weight: $font-weight-semibold;\n\tline-height: $line-height-snug;\n\tmargin: 0;\n\n\t&.contrast {\n\t\tbackground: $color-text-light;\n\t\tcolor: $color-black;\n\t}\n}\n\nh1 {\n\tfont-size: $font-size-h1;\n\tletter-spacing: $letter-spacing-tight;\n}\n\nh2 {\n\tfont-size: $font-size-h2;\n}\n\nh3 {\n\tfont-size: $font-size-h3;\n}\n\nh4 {\n\tfont-size: $font-size-h4;\n}\n\nh5 {\n\tfont-size: $font-size-h5;\n}\n\nh6 {\n\tfont-size: $font-size-h6;\n\tfont-weight: $font-weight-medium;\n}\n\n/* =========================\n\t TEXT VARIANTS\n========================= */\n\n.text,\np {\n\tfont-size: $font-size-base;\n\tline-height: $line-height-relaxed;\n}\n\n.text-sm {\n\tfont-size: $font-size-sm;\n\tline-height: $line-height-normal;\n}\n\n.text-lg {\n\tfont-size: $font-size-lg;\n\tline-height: $line-height-relaxed;\n}\n\n.text-muted {\n\tfont-size: $font-size-sm;\n\tcolor: $color-text-dark;\n}\n\n.text-strong,\nstrong {\n\tfont-weight: $font-weight-semibold;\n}\n\n.text-bold {\n\tfont-weight: $font-weight-bold;\n}\n\n.text-italic,\nem {\n\tfont-style: italic;\n}\n\n/* =========================\n\t CODE / MONO\n========================= */\n\ncode,\npre,\n.code {\n\tfont-family: $font-family-code;\n\tfont-size: $font-size-base;\n\tline-height: $line-height-normal;\n\tbackground-color: $color-dark;\n}\n\npre {\n\tfont-size: $font-size-base;\n\tline-height: $line-height-relaxed;\n\twhite-space: pre-wrap;\n}\n\n/* =========================\n\t LINKS\n========================= */\n\na {\n\tfont-weight: $font-weight-medium;\n\ttext-decoration: none;\n}\n\n.link {\n\tfont-size: inherit;\n\tfont-weight: $font-weight-medium;\n}\n\n/* =========================\n\t LABELS / META\n========================= */\n\n.label {\n\tfont-size: $font-size-sm;\n\tfont-weight: $font-weight-medium;\n\tline-height: $line-height-normal;\n}\n\n.hint,\n.meta {\n\tfont-size: $font-size-xs;\n\tline-height: $line-height-normal;\n}\n\n/* =========================\n\t TABLE TEXT\n========================= */\n\n.table {\n\tfont-size: $font-size-sm;\n\tline-height: $line-height-normal;\n\n\tth {\n\t\tfont-weight: $font-weight-semibold;\n\t}\n\n\ttd {\n\t\tfont-weight: $font-weight-regular;\n\t}\n}\n\n/* =========================\n\t LISTS\n========================= */\n\n.list {\n\tfont-size: $font-size-base;\n\tline-height: $line-height-relaxed;\n}\n\n.list-item {\n\tfont-size: inherit;\n}\n\n/* =========================\n\t MODALS\n========================= */\n\n.modal-title {\n\tfont-size: $font-size-h4;\n\tfont-weight: $font-weight-semibold;\n}\n\n.modal-body {\n\tfont-size: $font-size-base;\n}\n\n/* =========================\n\t TOASTS\n========================= */\n\n.toast-title {\n\tfont-size: $font-size-md;\n\tfont-weight: $font-weight-semibold;\n}\n\n.toast-text {\n\tfont-size: $font-size-sm;\n\tline-height: $line-height-normal;\n}\n",".palette {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: $space-sm;\n\n\t.color {\n\t\t.color-box {\n\t\t\twidth: 100px;\n\t\t\theight: 80px;\n\t\t}\n\t}\n}\n\n/* BACKGROUND COLORS */\n\n.bg-primary {\n\tbackground: $color-primary;\n}\n\n.bg-secondary {\n\tbackground: $color-secondary;\n}\n\n.bg-success {\n\tbackground: $color-success;\n}\n\n.bg-accent {\n\tbackground: $color-accent;\n}\n\n.bg-info {\n\tbackground: $color-info;\n}\n\n.bg-warning {\n\tbackground: $color-warning;\n}\n\n.bg-error {\n\tbackground: $color-error;\n}\n\n/* TEXT COLORS */\n\n.text-color-primary {\n\tcolor: $color-primary;\n}\n\n.text-color-secondary {\n\tcolor: $color-secondary;\n}\n\n.text-color-success {\n\tcolor: $color-success;\n}\n\n.text-color-accent {\n\tcolor: $color-accent;\n}\n\n.text-color-info {\n\tcolor: $color-info;\n}\n\n.text-color-warning {\n\tcolor: $color-warning;\n}\n\n.text-color-error {\n\tcolor: $color-error;\n}\n",".btn {\n\tfont-family: $font-family-base;\n\tfont-size: $font-size-lg;\n\tfont-weight: $font-weight-semibold;\n\tline-height: $line-height-base;\n\tletter-spacing: $letter-spacing-wide;\n\tpadding: $space-3 $space-lg;\n\tborder-radius: 0;\n\tborder-width: 2px;\n\tborder-left-width: 6px;\n\tborder-style: solid;\n\tborder-color: $color-primary;\n\ttext-transform: uppercase;\n\tbackground-color: transparent;\n\ttransition-duration: .2s;\n\ttransition-property: background-color, border-color, color;\n\n\t&.with-icon {\n\t\tborder-left-width: 48px;\n\t\tposition: relative;\n\n\t\t.ph,\n\t\t.ph-bold {\n\t\t\tposition: absolute;\n\t\t\tcolor: #0a0a0d;\n\t\t\tleft: -48px;\n\t\t\ttop: 0;\n\t\t\tfont-size: 28px;\n\t\t\theight: 100%;\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\twidth: 48px;\n\t\t\tjustify-content: center;\n\t\t\ttransition-duration: .2s;\n\t\t\ttransition-property: color, left;\n\t\t}\n\t}\n\n\t&:hover {\n\t\t&.with-icon {\n\t\t\t.ph,\n\t\t\t.ph-bold {\n\t\t\t\tleft: -28px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.btn-primary {\n\t\tcolor: $color-primary;\n\t\tborder-color: $color-primary;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-primary;\n\t\t\tcolor: $color-black;\n\t\t}\n\t}\n\n\t&.btn-secondary {\n\t\tcolor: $color-secondary;\n\t\tborder-color: $color-secondary;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-secondary;\n\t\t\tcolor: $color-text-light;\n\n\t\t\t&.with-icon {\n\t\t\t\t.ph,\n\t\t\t\t.ph-bold {\n\t\t\t\t\tcolor: $color-text-light;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&.btn-accent {\n\t\tcolor: $color-accent;\n\t\tborder-color: $color-accent;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-accent;\n\t\t\tcolor: $color-text-light;\n\n\t\t\t&.with-icon {\n\t\t\t\t.ph,\n\t\t\t\t.ph-bold {\n\t\t\t\t\tcolor: $color-text-light;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&.btn-danger {\n\t\tcolor: $color-error;\n\t\tborder-color: $color-error;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-error;\n\t\t\tcolor: $color-black;\n\t\t}\n\t}\n\n\t&.btn-warning {\n\t\tcolor: $color-warning;\n\t\tborder-color: $color-warning;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-warning;\n\t\t\tcolor: $color-black;\n\t\t}\n\t}\n\n\t&.btn-success {\n\t\tcolor: $color-success;\n\t\tborder-color: $color-success;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-success;\n\t\t\tcolor: $color-black;\n\t\t}\n\t}\n\n\t&.btn-info {\n\t\tcolor: $color-info;\n\t\tborder-color: $color-info;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-info;\n\t\t\tcolor: $color-text-light;\n\n\t\t\t&.with-icon {\n\t\t\t\t.ph,\n\t\t\t\t.ph-bold {\n\t\t\t\t\tcolor: $color-text-light;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&[disabled] {\n\t\tcolor: $color-text-dark;\n\t\tborder-color: $color-dark;\n\t\tbackground-color: $color-dark;\n\n\t\t&.with-icon {\n\t\t\t.ph,\n\t\t\t.ph-bold {\n\t\t\t\tcolor: $color-text-dark;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-dark;\n\t\t\tcolor: $color-text-dark;\n\n\t\t\t&.with-icon {\n\t\t\t\t.ph,\n\t\t\t\t.ph-bold {\n\t\t\t\t\tcolor: $color-text-dark;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.with-icon {\n\t\t\t.ph,\n\t\t\t.ph-bold {\n\t\t\t\tleft: -28px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.btn-small {\n\t\tfont-size: $font-size-md;\n\t\tfont-weight: $font-weight-medium;\n\t\tpadding: $space-sm $space-sm;\n\n\t\t&.with-icon {\n\t\t\tborder-left-width: 32px;\n\n\t\t\t.ph,\n\t\t\t.ph-bold {\n\t\t\t\tleft: -40px;\n\t\t\t\tfont-size: 22px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.btn-large {\n\t\tfont-size: $font-size-xl;\n\t\tfont-weight: $font-weight-bold;\n\t\tpadding: $space-md $space-xxl;\n\t}\n}\n\n.btn-icon {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\twidth: 30px;\n\theight: 30px;\n\n\tbackground: transparent;\n\tcolor: $color-text-light;\n\tfont-size: $font-size-xl;\n\tborder: 0;\n\n\ttransition-duration: .2s;\n\ttransition-property: color;\n\n\t\n\t.ph {\n\t\ttransform: rotate(0);\n\t\ttransition-duration: .2s;\n\t\ttransition-property: transform;\n\t}\n\n\t&:hover {\n\t\tcolor: $color-text-dark;\n\n\t\t.ph {\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\t}\n}\n",".form-group {\n\t.label {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tfont-size: $font-size-lg;\n\t\tmax-width: 420px;\n\t\tposition: relative;\n\n\t\t.ph {\n\t\t\tposition: absolute;\n\t\t\tcolor: $color-text-light;\n\t\t\tleft: 0;\n\t\t\tbottom: 2px;\n\t\t\tfont-size: 28px;\n\t\t\theight: 56px;\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\twidth: 48px;\n\t\t\tjustify-content: center;\n\t\t\ttransition-duration: .2s;\n\t\t\ttransition-property: color, left;\n\t\t}\n\n\t\t.input {\n\t\t\tfont-family: $font-family-base;\n\t\t\tfont-size: $font-size-base;\n\t\t\tfont-weight: $font-weight-medium;\n\t\t\tline-height: $line-height-base;\n\t\t\tletter-spacing: $letter-spacing-wide;\n\t\t\tpadding: $space-3 $space-lg;\n\t\t\tmargin-top: $space-sm;\n\t\t\tborder-radius: 0;\n\t\t\tborder-width: 2px;\n\t\t\tborder-bottom-width: 6px;\n\t\t\tborder-style: solid;\n\t\t\tborder-color: $color-text-light;\n\t\t\tcolor: $color-text-light;\n\t\t\tbackground-color: transparent;\n\t\t\ttransition-duration: .2s;\n\t\t\ttransition-property: background-color, border-color, color;\n\n\t\t\t&:hover {\n\t\t\t\tborder-bottom-color: $color-text-dark;\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\toutline: none;\n\t\t\t\tborder-color: $color-electric-blue;\n\t\t\t}\n\n\t\t\t&::placeholder {\n\t\t\t\tcolor: $color-text-dark;\n\t\t\t}\n\t\t}\n\n\t\ttextarea.input {\n\t\t\theight: 120px;\n\t\t\tline-height: $line-height-snug;\n\t\t\tresize: none;\n\t\t}\n\n\t\t.ph + .input,\n\t\t.ph + .select-wrap .select {\n\t\t\tpadding-left: 42px;\n\t\t}\n\n\t\t.select-wrap {\n\t\t\tmargin-top: $space-sm;\n\t\t}\n\n\t\t.select {\n\t\t\twidth: 100%;\n\t\t\theight: 56px;\n\t\t\tmargin-top: 0;\n\n\t\t\t/* убрать нативную стрелку */\n\t\t\tappearance: none;\n\t\t\t-webkit-appearance: none;\n\t\t\t-moz-appearance: none;\n\n\t\t\t&:focus {\n\t\t\t\toutline: none;\n\t\t\t}\n\n\t\t\toption {\n\t\t\t\tcolor: $color-text-light;\n\t\t\t\tbackground: $color-dark;\n\t\t\t}\n\t\t}\n\n\t\t.select-wrap::after {\n\t\t\tcontent: \"\";\n\t\t\tposition: absolute;\n\t\t\tright: $space-lg;\n\t\t\tbottom: 18px;\n\t\t\ttransform: translateY(-50%);\n\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t\tborder-left: 8px solid transparent;\n\t\t\tborder-right: 8px solid transparent;\n\t\t\tborder-top: 10px solid $color-text-light;\n\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n}\n\n.radio {\n\tdisplay: inline-flex;\n\tflex-direction: row;\n\tgap: $space-sm;\n\talign-items: center;\n\n\tinput[type=\"radio\"] {\n\t\tdisplay: none;\n\t}\n\n\t.radio-control {\n\t\tdisplay: inline-block;\n\t\tborder-radius: 100%;\n\t\tborder: 2px solid $color-primary;\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tbackground: transparent;\n\t\ttransition-duration: .2s;\n\t\ttransition-property: background, border-color;\n\t}\n\n\t&:hover .radio-control {\n\t\tbackground: $color-grey;\n\t}\n\n\tinput[type=\"radio\"]:checked + .radio-control {\n\t\tbackground: $color-primary;\n\t}\n\n\tinput[type=\"radio\"]:disabled + .radio-control {\n\t\tbackground: $color-grey;\n\t\tborder-color: $color-grey;\n\t}\n\n\t.radio-label {\n\t\tfont-size: $font-size-lg;\n\t}\n}\n\n.checkbox {\n\tdisplay: inline-flex;\n\tflex-direction: row;\n\tgap: $space-sm;\n\talign-items: center;\n\n\tinput[type=\"checkbox\"] {\n\t\tdisplay: none;\n\t}\n\n\t.checkbox-control {\n\t\theight: 16px;\n\t\twidth: 30px;\n\t\tborder: 2px solid $color-primary;\n\t\tposition: relative;\n\t\tbackground: transparent;\n\t\ttransition-duration: .2s;\n\t\ttransition-property: border-color, background;\n\t\tdisplay: block;\n\t}\n\n\t.checkbox-control:before {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\theight: 20px;\n\t\twidth: 20px;\n\t\tbackground: $color-primary;\n\t\tposition: absolute;\n\t\tleft: -6px;\n\t\ttop: -4px;\n\t\ttransition-duration: .2s;\n\t\ttransition-property: left, background;\n\t}\n\n\t&:hover .checkbox-control {\n\t\tbackground: $color-grey;\n\t}\n\n\tinput[type=\"checkbox\"]:checked:not(:disabled) + .checkbox-control {\n\t\tbackground: $color-secondary;\n\t\tborder-color: $color-secondary;\n\t}\n\n\tinput[type=\"checkbox\"]:checked + .checkbox-control:before {\n\t\tleft: 12px;\n\t}\n\n\tinput[type=\"checkbox\"]:disabled + .checkbox-control {\n\t\tborder-color: $color-grey;\n\t}\n\n\tinput[type=\"checkbox\"]:disabled + .checkbox-control:before {\n\t\tbackground: $color-grey;\n\t}\n}\n",".list {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: $space-1;\n\tlist-style-type: none;\n\tpadding-left: 0;\n\n\t.list-item {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: $space-sm;\n\t\tmargin-left: 0;\n\t}\n\n\t&.list-ordered {\n\t\tlist-style-type: decimal;\n\t\tdisplay: list-item;\n\t\tmargin-left: 30px;\n\n\t\t.list-item {\n\t\t\tdisplay: list-item;\n\t\t}\n\t}\n\n\t&.list-definition {\n\t\tgap: $space-md;\n\n\t\t.list-row {\n\t\t\tborder-left: 2px solid $color-primary;\n\n\t\t\t.list-term::before,\n\t\t\t.list-desc::before {\n\t\t\t\tcontent: \"\";\n\t\t\t\theight: 2px;\n\t\t\t\twidth: $space-3;\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\tleft: 0;\n\t\t\t\tmargin-top: -1px;\n\t\t\t\tdisplay: block;\n\t\t\t\tbackground: $color-primary;\n\t\t\t}\n\n\t\t\t.list-term,\n\t\t\t.list-desc {\n\t\t\t\tposition: relative;\n\t\t\t}\n\n\t\t\t.list-term {\n\t\t\t\tpadding-left: $space-5;\n\t\t\t\tfont-size: $font-size-xl;\n\t\t\t}\n\n\t\t\t.list-desc {\n\t\t\t\tpadding-left: $space-5;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.with-icons {\n\t\t.ph {\n\t\t\t// icon styles if needed\n\t\t}\n\t}\n\n\t&.list-nav {\n\t\tmax-width: 420px;\n\t\twidth: 100%;\n\t\tgap: 0;\n\n\t\t.list-item {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: flex-start;\n\t\t\theight: 50px;\n\t\t\tmargin: 0;\n\n\t\t\t.list-action {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\talign-items: center;\n\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: $space-2 $space-3;\n\t\t\t\tborder: 0;\n\n\t\t\t\tfont-size: $font-size-xl;\n\t\t\t\tbackground: $color-dark;\n\t\t\t\tcolor: inherit;\n\n\t\t\t\ttransition-duration: .2s;\n\t\t\t\ttransition-property: background;\n\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground: $color-electric-blue;\n\t\t\t\t}\n\n\t\t\t\t.list-label {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: row;\n\t\t\t\t\tgap: $space-2;\n\t\t\t\t\talign-items: center;\n\t\t\t\t}\n\n\t\t\t\t.list-meta {\n\t\t\t\t\tpadding: $space-2;\n\t\t\t\t\tbackground: $color-neon-green;\n\t\t\t\t\tcolor: $color-black;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.list-item-active {\n\t\t\t\t.list-action {\n\t\t\t\t\tbackground: $color-electric-blue;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&.list-actions {\n\t\twidth: 100%;\n\t\tmax-width: 420px;\n\t\tgap: $space-lg;\n\n\t\t.list-item {\n\t\t\tjustify-content: space-between;\n\t\t\talign-items: flex-start;\n\n\t\t\t.list-content {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: $space-2;\n\n\t\t\t\t.list-title {\n\t\t\t\t\tfont-size: $font-size-xl;\n\t\t\t\t\tline-height: $line-height-base;\n\t\t\t\t}\n\n\t\t\t\t.list-subtitle {\n\t\t\t\t\t// subtitle styles\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.list-controls {\n\t\t\t\t// controls styles\n\t\t\t}\n\t\t}\n\t}\n}\n",".badge {\n\tbackground: $color-primary;\n\tcolor: $color-dark;\n\tpadding: $space-1 $space-2;\n\tfont-size: $font-size-base;\n\n\t&.badge-success {\n\t\tbackground: $color-success;\n\t}\n\n\t&.badge-warning {\n\t\tbackground: $color-warning;\n\t}\n\n\t&.badge-error,\n\t&.badge-danger {\n\t\tbackground: $color-error;\n\t}\n\n\t&.badge-info {\n\t\tbackground: $color-info;\n\t\tcolor: $color-text-light;\n\t}\n\n\t&.badge-secondary {\n\t\tbackground: $color-secondary;\n\t\tcolor: $color-text-light;\n\t}\n}\n",".table {\n\ttext-align: left;\n\tborder: 2px solid $color-primary;\n\tpadding: $space-4;\n\n\t.table-caption {\n\t\ttext-align: left;\n\t\tfont-size: $font-size-xl;\n\t\tbackground: $color-primary;\n\t\twidth: max-content;\n\t\tcolor: $color-dark;\n\t\tpadding: $space-1 $space-3;\n\t\tmargin-bottom: 0;\n\t}\n\n\t.table-row {\n\t\tth,\n\t\ttd {\n\t\t\tpadding: $space-3 $space-5;\n\t\t\tfont-size: $font-size-base;\n\t\t}\n\n\t\tth {\n\t\t\t// header cell styles if needed\n\t\t}\n\t}\n\n\t.table-head {\n\t\t// thead styles\n\t}\n\n\t.table-body {\n\t\t// tbody styles\n\t}\n\n\t.table-foot {\n\t\tth,\n\t\ttd {\n\t\t\tpadding-top: $space-4;\n\t\t}\n\t}\n}\n",".toast {\n\tposition: fixed;\n\tbottom: -100px;\n\tright: $space-4;\n\tmax-width: 420px;\n\n\tbackground: $color-dark;\n\tborder: 2px solid $color-text-light;\n\tpadding: 0;\n\topacity: 0;\n\n\ttransition-duration: .25s;\n\ttransition-property: opacity, top, bottom;\n\n\t&.a-show {\n\t\tbottom: $space-4;\n\t\topacity: 1;\n\t}\n\n\t&.a-hide {\n\t\tbottom: $space-4 + 100px;\n\t\topacity: 0;\n\t}\n\n\t.toast-content {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 0;\n\n\t\t.toast-title {\n\t\t\tfont-size: $font-size-h3;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tgap: $space-2;\n\t\t\talign-items: center;\n\t\t\tcolor: $color-black;\n\t\t\tbackground: $color-primary;\n\t\t\tpadding: $space-1 $space-2;\n\t\t}\n\n\t\t.toast-text {\n\t\t\tfont-size: $font-size-base;\n\t\t\tpadding: $space-6 $space-4;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\t.toast-close {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tcolor: $color-black;\n\t\theight: 40px;\n\t\twidth: 40px;\n\n\t\t&:hover {\n\t\t\tcolor: $color-dark;\n\t\t}\n\t}\n\n\t&.toast-info {\n\t\t// default info styles (inherits primary)\n\t}\n\n\t&.toast-success {\n\t\tborder-color: $color-success;\n\n\t\t.toast-title {\n\t\t\tbackground: $color-success;\n\t\t}\n\t}\n\n\t&.toast-warning {\n\t\tborder-color: $color-warning;\n\n\t\t.toast-title {\n\t\t\tbackground: $color-warning;\n\t\t}\n\t}\n\n\t&.toast-danger {\n\t\tborder-color: $color-error;\n\n\t\t.toast-title {\n\t\t\tbackground: $color-error;\n\t\t}\n\t}\n}\n",".card {\n\tmax-width: 420px;\n\twidth: 100%;\n\tborder: 2px solid $color-text-light;\n\n\t.card-title {\n\t\tcolor: $color-black;\n\t\tbackground: $color-text-light;\n\t\tpadding: $space-2 $space-3;\n\t}\n\n\t.card-content {\n\t\tpadding: $space-4;\n\n\t\t.card-thumb {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\tp {\n\t\t\tmargin-top: $space-2;\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t}\n\n\t.card-footer {\n\t\tpadding: $space-2 $space-4;\n\t\tpadding-bottom: $space-4;\n\t}\n}\n",".modal {\n\tposition: fixed;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n\tz-index: 1000;\n\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\n\t.modal-backdrop {\n\t\tposition: fixed;\n\t\tz-index: 1010;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\n\t\tbackground: $color-black;\n\t\topacity: 0;\n\n\t\ttransition-duration: .25s;\n\t\ttransition-property: opacity;\n\t}\n\n\t.modal-panel {\n\t\tposition: relative;\n\t\tz-index: 1020;\n\n\t\twidth: 100%;\n\t\tmax-width: 800px;\n\t\theight: auto;\n\t\tmin-height: 400px;\n\t\tmax-height: 800px;\n\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: $space-4;\n\t\tmargin-top: 200px;\n\n\t\tbackground: $color-black;\n\t\tborder: 2px solid $color-text-light;\n\t\topacity: 0;\n\n\t\ttransition-duration: .25s;\n\t\ttransition-property: opacity, margin-top;\n\n\t\t.modal-header {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tjustify-content: space-between;\n\t\t\talign-items: center;\n\t\t\tpadding-right: $space-4;\n\n\t\t\t.modal-title {\n\t\t\t\tpadding: $space-3 $space-4;\n\t\t\t\tbackground: $color-text-light;\n\t\t\t\tcolor: $color-black;\n\t\t\t\ttext-transform: uppercase;\n\t\t\t}\n\t\t}\n\n\t\t.modal-body {\n\t\t\tmax-height: 700px;\n\t\t\toverflow-y: auto;\n\t\t\tpadding: $space-5;\n\t\t}\n\n\t\t.modal-footer {\n\t\t\tpadding: $space-5;\n\n\t\t\t.actions {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: row;\n\t\t\t\tjustify-content: flex-end;\n\t\t\t\tgap: $space-4;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.a-show {\n\t\t.modal-backdrop {\n\t\t\topacity: 1;\n\t\t}\n\n\t\t.modal-panel {\n\t\t\topacity: 1;\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\n\t&.a-hide {\n\t\t.modal-backdrop {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t.modal-panel {\n\t\t\topacity: 0;\n\t\t\tmargin-top: -200px;\n\t\t}\n\t}\n}\n","/* =========================\n   SPACING UTILITIES\n========================= */\n\n@each $key, $value in $spaces {\n\n  /* margin */\n  .m-#{$key}  { margin:        $value !important; }\n  .mt-#{$key} { margin-top:    $value !important; }\n  .mr-#{$key} { margin-right:  $value !important; }\n  .mb-#{$key} { margin-bottom: $value !important; }\n  .ml-#{$key} { margin-left:   $value !important; }\n  .mx-#{$key} {\n    margin-left:  $value !important;\n    margin-right: $value !important;\n  }\n  .my-#{$key} {\n    margin-top:    $value !important;\n    margin-bottom: $value !important;\n  }\n\n  /* padding */\n  .p-#{$key}  { padding:        $value !important; }\n  .pt-#{$key} { padding-top:    $value !important; }\n  .pr-#{$key} { padding-right:  $value !important; }\n  .pb-#{$key} { padding-bottom: $value !important; }\n  .pl-#{$key} { padding-left:   $value !important; }\n  .px-#{$key} {\n    padding-left:  $value !important;\n    padding-right: $value !important;\n  }\n  .py-#{$key} {\n    padding-top:    $value !important;\n    padding-bottom: $value !important;\n  }\n}\n\n.row {\n  display: flex;\n  flex-direction: row;\n} ","@import \"_spacing.scss\";\n@import \"ui_components/_typography.scss\";\n@import \"ui_components/_palette.scss\";\n@import \"ui_components/_buttons.scss\";\n@import \"ui_components/_forms.scss\";\n@import \"ui_components/_lists.scss\";\n@import \"ui_components/_badges.scss\";\n@import \"ui_components/_tables.scss\";\n@import \"ui_components/_toasts.scss\";\n@import \"ui_components/_cards.scss\";\n@import \"ui_components/_modals.scss\";\n@import \"_utils.scss\";\n\n* {\n\tbox-sizing: border-box;\n}\n\n*::-webkit-scrollbar {\n\twidth: 10px;\n}\n\n*::-webkit-scrollbar-track {\n\twidth: 10px;\n\tbackground: $color-black;\n\tcursor: pointer;\n}\n\n*::-webkit-scrollbar-thumb {\n\twidth: 10px;\n\tbackground: $color-grey;\n\tcursor: default;\n}\n\n*::-webkit-scrollbar-corner {\n\tbackground: transparent;\n\theight: 1px;\n}\n\n*::-webkit-scrollbar-button {\n\tdisplay: none;\n}\n\n*::-webkit-scrollbar-track-piece {}\n*::-webkit-resizer {}","* {\n\tpadding: 0;\n\tmargin: 0;\n}\n\nhtml, body {\n  font-family: \"IBM Plex Mono\", monospace;\n  font-weight: 400;\n}\n\nbody {\n\tbackground-color: $color-black;\n\tcolor: $color-text-light;\n\n\tfont-size: 15px;\n  line-height: 1.45;\n  letter-spacing: 0.01em;\n}\n\n.load-screen {\n\tdisplay: none;\n\n\t&.a-show {\n\t\tdisplay: block;\n\t}\n}\n\n.error-screen {\n\tdisplay: none;\n\n\t&.a-show {\n\t\tdisplay: block;\n\t}\n}\n\n.screen {\n\tdisplay: none;\n\n\t&.a-show {\n\t\tdisplay: block;\n\t}\n}\n\n@import \"app/_hud.scss\";",".hud {\n\twidth: 100%;\n\tpadding: $space-5;\n\n\t& > .row {\n\t\tjustify-content: space-between;\n    align-items: center;\n    gap: $space-4;\n    flex-wrap: wrap;\n\t}\n\n\t.nav-toggle {\n\t\tfont-size: 42px;\n\t\twidth: 50px;\n\t\theight: 50px;\n\t\tbackground: $color-text-light;\n\t\tcolor: $color-black;\n\n\t\t&:hover {\n\t\t\tcolor: $color-accent;\n\t\t}\n\t}\n\n\t.app-title {\n\t\tpadding: $space-2 $space-4;\n\t\ttext-transform: uppercase;\n\t}\n}"]}
\ No newline at end of file
diff --git a/webclient/dist/js/main.js b/webclient/dist/js/main.js
index 17a2954..21badd6 100644
--- a/webclient/dist/js/main.js
+++ b/webclient/dist/js/main.js
@@ -1,40 +1,2 @@
-(()=>{var q=Object.defineProperty;var L=Object.getOwnPropertySymbols;var A=Object.prototype.hasOwnProperty,D=Object.prototype.propertyIsEnumerable;var R=(s,e,t)=>e in s?q(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t,v=(s,e)=>{for(var t in e||(e={}))A.call(e,t)&&R(s,t,e[t]);if(L)for(var t of L(e))D.call(e,t)&&R(s,t,e[t]);return s};var k=(s,e,t)=>new Promise((i,n)=>{var r=o=>{try{u(t.next(o))}catch(c){n(c)}},l=o=>{try{u(t.throw(o))}catch(c){n(c)}},u=o=>o.done?i(o.value):Promise.resolve(o.value).then(r,l);u((t=t.apply(s,e)).next())});function j(s,e,t,i){return`
-		<div class="toast toast-${s}" role="alert">
-	    <div class="toast-content">
-	      <h4 class="toast-title">${e} ${t}</h4>
-	      <p class="toast-text">${i}</p>
-	    </div>
-	    <button class="btn-icon toast-close" type="button" aria-label="Close">\u2715</button>
-	  </div>
-	`}function M(s){return s.close=function(){this.classList.add("a-hide"),setTimeout(()=>{this.remove()},300)},s.querySelector(".toast-close").addEventListener("click",e=>{s.close()}),s.show=function(){document.querySelector("body").append(s),setTimeout(()=>{s.classList.add("a-show")},10)},s}function _(s,e,t,i){let n=document.createElement("div");return n.innerHTML=j(s,e,t,i),M(n.childNodes[1])}function N(s,e){return _("success",'<i class="ph ph-check-circle"></i>',s,e)}function O(s,e){return _("info",'<i class="ph ph-info"></i>',s,e)}function z(s,e){return _("warning",'<i class="ph ph-warning"></i>',s,e)}function x(s,e){return _("danger",'<i class="ph ph-warning-octagon"></i>',s,e)}var p={create:_,createInfo:O,createSuccess:N,createWarning:z,createError:x,createDanger:x};function H(s,e,t){return`
-		<div class="modal" aria-hidden="true" id="${s}">
-      <div class="modal-backdrop"></div>
-
-      <div class="modal-panel" role="dialog" aria-modal="true" aria-labelledby="modal-title-basic">
-        <header class="modal-header">
-          <h4 class="modal-title" id="modal-title-basic">${e}</h4>
-          <button class="btn-icon modal-close" type="button" aria-label="Close">\u2715</button>
-        </header>
-
-        <div class="modal-body"></div>
-        <footer class="modal-footer">${t}</footer>
-      </div>
-    </div>
-	`}function F(s){return s.show=function(){document.querySelector("body").append(s),setTimeout(()=>{this.classList.add("a-show")},10)},s.close=function(){this.classList.add("a-hide"),setTimeout(()=>{this.remove()},300)},s.querySelector(".modal-close").addEventListener("click",e=>{s.close()}),s}function P(s,e){let t=e.title||"",i=e.footer||"",n=document.createElement("div");n.innerHTML=H(s,t,i);let r=n.childNodes[1],l=r.querySelector(".modal-body"),u=r.querySelector(".modal-footer");if(typeof e.actions=="function"){let o=e.actions(r);if(typeof o[0]=="object"){let c=document.createElement("div");c.classList.add("actions");for(let f of o)c.append(f);u.append(c)}}if(typeof e.body=="function"){let o=e.body(r);typeof o=="object"?l.append(o):typeof o=="string"&&(l.innerHTML=o)}return F(r)}var U={create:P};var b=class{constructor(e){this.core=e}actions_list(e){return this.core.api_get("/api/v1/scripts/actions/list",e)}scopes_list(e){return this.core.api_get("/api/v1/scripts/scopes/list",e)}regular_list(e){return this.core.api_get("/api/v1/scripts/regular/list",e)}scope_get_by_filename(e,t){let i=encodeURIComponent(String(e||""));return this.core.api_get(`/api/v1/scripts/scopes/name/${i}`,t,{})}scope_create(e,t){return this.core.api_post("/api/v1/scripts/scopes/new",e,t)}scope_update(e,t){return this.core.api_post("/api/v1/scripts/scopes/update",e,t)}action_enable(e,t){let i=encodeURIComponent(String(e||""));return this.core.api_get(`/api/v1/scripts/actions/alias/${i}/enable`,t)}action_disable(e,t){let i=encodeURIComponent(String(e||""));return this.core.api_get(`/api/v1/scripts/actions/alias/${i}/disable`,t)}regular_enable(e,t){let i=encodeURIComponent(String(e||""));return this.core.api_get(`/api/v1/scripts/actions/regular/${i}/enable`,t)}regular_disable(e,t){let i=encodeURIComponent(String(e||""));return this.core.api_get(`/api/v1/scripts/actions/regular/${i}/disable`,t)}scope_enable(e,t){let i=encodeURIComponent(String(e||""));return this.core.api_get(`/api/v1/scripts/actions/scope/${i}/enable`,t)}scope_disable(e,t){let i=encodeURIComponent(String(e||""));return this.core.api_get(`/api/v1/scripts/actions/scope/${i}/disable`,t)}scope_remove(e,t){let i=encodeURIComponent(String(e||""));return this.core.api_get(`/api/v1/scripts/scopes/name/${i}/remove`,t)}run(e,t){return this.core.api_post("/api/v1/scripts/actions/run",e,t)}};var y=class{constructor(e){this.core=e}list(e){return this.core.api_get("/api/v1/devices/list",e)}scanning_setup(e){return this.core.api_get("/api/v1/devices/scanning/setup",e)}scanning_all(e){return this.core.api_get("/api/v1/devices/scanning/all",e)}setup_new_device(e,t){return this.core.api_post("/api/v1/devices/setup/new-device",e,t)}info(e,t){let i=encodeURIComponent(String(e));return this.core.api_get(`/api/v1/devices/id/${i}/info`,t)}get(e,t){let i=encodeURIComponent(String(e));return this.core.api_get(`/api/v1/devices/id/${i}`,t)}status(e,t){let i=encodeURIComponent(String(e));return this.core.api_get(`/api/v1/devices/id/${i}/status`,t)}action(e,t){return this.core.api_post("/api/v1/devices/action",e,t)}remove(e,t){let i=encodeURIComponent(String(e));return this.core.api_get(`/api/v1/devices/id/${i}/remove`,t)}reboot(e,t){let i=encodeURIComponent(String(e));return this.core.api_get(`/api/v1/devices/id/${i}/reboot`,t)}};var w=class{constructor(e){this.core=e}list(e){return this.core.api_get("/api/v1/areas/list",e)}inner_list(e,t){let i=encodeURIComponent(String(e));return this.core.api_get(`/api/v1/areas/id/${i}/list`,t)}new_area(e,t){return this.core.api_post("/api/v1/areas/new-area",e,t)}remove(e,t){let i=encodeURIComponent(String(e));return this.core.api_get(`/api/v1/areas/id/${i}/remove`,t)}place_in_area(e,t){return this.core.api_post("/api/v1/areas/place-in-area",e,t)}update_display_name(e,t){return this.core.api_post("/api/v1/areas/update-display-name",e,t)}update_alias(e,t){return this.core.api_post("/api/v1/areas/update-alias",e,t)}devices(e,t){let i=encodeURIComponent(String(e));return this.core.api_get(`/api/v1/areas/id/${i}/devices`,t)}unassign_from_area(e,t){let i=encodeURIComponent(String(e));return this.core.api_get(`/api/v1/areas/id/${i}/unassign-from-area`,t)}types_list(e){return this.core.api_get("/api/v1/areas/types/list",e)}reboot_devices(e,t){if(e==null)return this.core.api_get("/api/v1/areas/reboot_devices",t);let i=encodeURIComponent(String(e));return this.core.api_get(`/api/v1/areas/id/${i}/reboot_devices`,t)}};function E(s){if(!s||typeof s!="object")return"";let e=new URLSearchParams;Object.entries(s).forEach(([i,n])=>{n!=null&&e.append(i,String(n))});let t=e.toString();return t?`?${t}`:""}function W(s,e){let t=String(s||"").replace(/\/+$/,""),i=String(e||"").replace(/^\/+/,"");return`${t}/${i}`}function B(s){try{return{ok:!0,data:JSON.parse(s)}}catch(e){return{ok:!1,error:e}}}var S=class{constructor(e){this.base_url=(e==null?void 0:e.base_url)||"",this.token=(e==null?void 0:e.token)||"",this.timeout_ms=Number.isFinite(e==null?void 0:e.timeout_ms)?e.timeout_ms:15e3,this.default_headers=(e==null?void 0:e.default_headers)||{},this.on_unauthorized=typeof(e==null?void 0:e.on_unauthorized)=="function"?e.on_unauthorized:null,this.proxy_path=(e==null?void 0:e.proxy_path)||"",this.scripts=new b(this),this.devices=new y(this),this.areas=new w(this)}set_base_url(e){this.base_url=e||""}set_token(e){this.token=e||""}set_proxy_path(e){this.proxy_path=e||""}_wrap_path(e,t){if(!this.proxy_path)return t?`${e}${E(t)}`:e;let i=v({path:e},t||{});return`${this.proxy_path}${E(i)}`}request(e,t,i,n,r){let l=typeof n=="function"?n:()=>{},u=W(this.base_url,t),o=new AbortController,c=Number.isFinite(r==null?void 0:r.timeout_ms)?r.timeout_ms:this.timeout_ms,f=setTimeout(()=>o.abort(),c),$=v(v({},this.default_headers),(r==null?void 0:r.headers)||{});this.token&&($.Authorization=`Bearer ${this.token}`);let C;i!=null&&($["Content-Type"]="application/json",C=JSON.stringify(i)),fetch(u,{method:e,headers:$,body:C,signal:o.signal}).then(a=>k(this,null,function*(){clearTimeout(f);let h={url:u,method:e,status_code:a.status,headers:a.headers},g=yield a.text(),T=B(g),d=T.ok?T.data:g;if(!a.ok){let m={type:"http_error",message:`HTTP ${a.status}`,status_code:a.status,raw:d};if((a.status===401||a.status===403)&&this.on_unauthorized)try{this.on_unauthorized({error:m,meta:h})}catch(I){}return l(m,null,h)}if(T.ok&&d&&typeof d=="object"){let m=d.status;if(m===!1||m==="error"){let I={type:"api_error",message:d.message||"API error",status_code:a.status,raw:d,field:d.field};return l(I,null,h)}}return l(null,d,h)})).catch(a=>{clearTimeout(f);let g=a&&(a.name==="AbortError"||String(a).includes("AbortError"))?{type:"timeout",message:`Timeout after ${c}ms`}:{type:"network_error",message:(a==null?void 0:a.message)||"Network error",details:a};return l(g,null,{url:u,method:e,status_code:0,headers:null})})}get(e,t,i){return this.request("GET",e,null,t,i)}post(e,t,i,n){return this.request("POST",e,t,i,n)}api_get(e,t,i,n){return this.get(this._wrap_path(e,i),t,n)}api_post(e,t,i,n,r){return this.post(this._wrap_path(e,n),t,i,r)}};window.demoToastInfo=function(){p.createInfo("Title","\u041F\u0440\u043E\u0438\u0437\u043E\u0448\u043B\u0430 \u043E\u0448\u0438\u0431\u043A\u0430. \u041F\u043E\u0432\u0442\u043E\u0440\u0438 \u043F\u043E\u0437\u0436\u0435.").show()};window.demoToastSuccess=function(){p.createSuccess("Success","\u0412\u0441\u0451 \u043E\u0442\u043B\u0438\u0447\u043D\u043E, \u0432\u0441\u0451 \u0440\u0430\u0431\u043E\u0442\u0430\u0435\u0442, \u044D\u0442\u043E \u0443\u0441\u043F\u0435\u0445 \u0442\u043E\u0441\u0442\u0435\u0440\u0430").show()};window.demoToastWarning=function(){p.createWarning("Warning","\u041F\u0440\u043E\u0438\u0437\u043E\u0448\u043B\u0430 \u043E\u0448\u0438\u0431\u043A\u0430. \u041F\u043E\u0432\u0442\u043E\u0440\u0438 \u043F\u043E\u0437\u0436\u0435.").show()};window.demoToastDanger=function(){p.createDanger("Danger","\u041F\u0440\u043E\u0438\u0437\u043E\u0448\u043B\u0430 \u043E\u0448\u0438\u0431\u043A\u0430. \u041F\u043E\u0432\u0442\u043E\u0440\u0438 \u043F\u043E\u0437\u0436\u0435.").show()};window.demoModal=function(){U.create("demo-modals",{title:"Demo modal window",footer:"<p>Footer text</p>",actions:s=>{let e=document.createElement("button");e.classList.add("btn"),e.classList.add("btn-primary"),e.innerHTML="Cancel",e.addEventListener("click",i=>{s.close()});let t=document.createElement("button");return t.classList.add("btn"),t.classList.add("btn-success"),t.innerHTML="Apply",t.addEventListener("click",i=>{s.close(),setTimeout(()=>{p.createSuccess("Success","\u0412\u0441\u0451 \u043E\u0442\u043B\u0438\u0447\u043D\u043E, \u0432\u0441\u0451 \u0440\u0430\u0431\u043E\u0442\u0430\u0435\u0442, \u044D\u0442\u043E \u0443\u0441\u043F\u0435\u0445").show()},300)}),[e,t]},body:s=>`
-				<p class="text">\u041B\u044E\u0431\u043E\u0439 \u043A\u043E\u043D\u0442\u0435\u043D\u0442: \u0442\u0435\u043A\u0441\u0442, \u0444\u043E\u0440\u043C\u044B, \u0441\u043F\u0438\u0441\u043A\u0438.</p>
-
-        <div class="form-group">
-          <label class="label" for="modal-device-name">
-            Device name
-            <input class="input" id="modal-device-name" type="text" placeholder="Kitchen Light">
-          </label>
-        </div>
-
-        <div class="form-group">
-          <label class="label" for="modal-device-desc">
-            Description
-            <textarea class="input" id="modal-device-desc" rows="3" placeholder="Optional"></textarea>
-          </label>
-        </div>
-			`}).show()};function J(){let s=new S({base_url:"http://shswebclient.local",token:"YOUR_TOKEN",timeout_ms:3e3,on_unauthorized:({error:e})=>console.log("auth problem:",e),proxy_path:"/proxy.php"});s.scripts.actions_list((e,t,i)=>console.log(t)),s.scripts.scopes_list((e,t,i)=>console.log(t)),s.devices.info(4,(e,t,i)=>console.log(t))}document.addEventListener("DOMContentLoaded",s=>{console.log("App init"),J()});})();
+(()=>{var u=Object.defineProperty;var o=Object.getOwnPropertySymbols;var a=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var i=(t,r,e)=>r in t?u(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,c=(t,r)=>{for(var e in r||(r={}))a.call(r,e)&&i(t,e,r[e]);if(o)for(var e of o(r))h.call(r,e)&&i(t,e,r[e]);return t};function d(){console.log("HUD init")}var s=class{constructor(r,e,n){this.screens={},this.routesMap={},this.currentScreen=null,this.screensContainer=document.querySelector(r),this.loader=document.querySelector(e),this.errorScreen=document.querySelector(n),console.log("Screens Init")}add(r,e){if(typeof e!="object")return console.error("Screens: screens must be object");if(typeof(e==null?void 0:e.alias)=="undefined")return console.error("Screens: undefined alias");if(typeof(e==null?void 0:e.renderer)!="function")return console.error("Screens: renderer must be function");this.screens[e.alias]=c({route:r},e),this.routesMap[r]=e.alias}switch(r){var n;if(this.showLoader(),(n=this.currentScreen)==null||n.DOMObject.remove(),typeof this.screens[r]=="undefined"){console.error(`Screens: "${r}" not found`);return}this.currentScreen=this.screens[r];let e=document.createElement("div");e.classList.add("screen"),e.id=r,e.dataset.alias=r,e.innerHTML=this.currentScreen.renderer(),this.currentScreen.DOMObject=e,this.screensContainer.append(this.currentScreen.DOMObject),this.currentScreen.initer(this)}routing(){setInterval(()=>{let r=document.location.hash.split("#!")[1];if(typeof r=="undefined"||r=="")return;let e=typeof this.routesMap[r]=="undefined"?"not-found-screen":this.routesMap[r];(!this.currentScreen||this.currentScreen.alias!=e)&&this.switch(e)},50)}ready(){this.currentScreen!=null&&(this.currentScreen.DOMObject||(this.currentScreen.DOMObject=document.getElementsById(this.currentScreen.alias)),this.hideLoader(),this.currentScreen.DOMObject.classList.add("a-show"))}error(){var r;(r=this.currentScreen)==null||r.DOMObject.remove(),this.showErrorScreen()}hideLoader(){this.loader.classList.remove("a-show")}showLoader(){this.loader.classList.add("a-show")}showErrorScreen(r){this.errorScreen.classList.add("a-show")}hideErrorScreen(r){this.errorScreen.classList.remove("a-show")}getScreens(){return this.screens}getRoutesMap(){return this.routesMap}};document.addEventListener("DOMContentLoaded",t=>{console.log("App init"),d();let r=new s(".screens",".load-screen",".error-screen");r.add("/",{alias:"home",renderer:()=>'<h2 class="mt-4">Hello world</h2>',initer:e=>{setTimeout(()=>e.ready(),1e3),setTimeout(()=>e.error(),2e3)}}),r.add("-",{alias:"not-found-screen",renderer:()=>'<h2 class="mt-4">404 NOT FOUND</h2>',initer:e=>{e.ready()}}),console.log(r.getScreens()),r.routing()});})();
 //# sourceMappingURL=main.js.map
diff --git a/webclient/dist/js/main.js.map b/webclient/dist/js/main.js.map
index f358876..637fce1 100644
--- a/webclient/dist/js/main.js.map
+++ b/webclient/dist/js/main.js.map
@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/js/components/toasts.js", "../../src/js/components/modals.js", "../../src/js/sh/modules/ScriptsApi.js", "../../src/js/sh/modules/DevicesApi.js", "../../src/js/sh/modules/AreasApi.js", "../../src/js/sh/SmartHomeApi.js", "../../src/js/index.js"],
-  "sourcesContent": ["function template(type, icon, title, text) {\n\treturn `\n\t\t<div class=\"toast toast-${type}\" role=\"alert\">\n\t    <div class=\"toast-content\">\n\t      <h4 class=\"toast-title\">${icon} ${title}</h4>\n\t      <p class=\"toast-text\">${text}</p>\n\t    </div>\n\t    <button class=\"btn-icon toast-close\" type=\"button\" aria-label=\"Close\">\u2715</button>\n\t  </div>\n\t`;\n}\n\nfunction init(toast) {\n\ttoast.close = function() {\n\t\tthis.classList.add(\"a-hide\");\n\t\tsetTimeout(() => {\n\t\t\tthis.remove();\n\t\t}, 300);\n\t}\n\n\ttoast.querySelector(\".toast-close\").addEventListener(\"click\", e => {\n\t\ttoast.close();\n\t});\n\n\ttoast.show = function() {\n\t\tdocument.querySelector(\"body\").append(toast);\n\n\t\tsetTimeout(() => {\n\t\t\ttoast.classList.add(\"a-show\");\n\t\t}, 10);\n\t}\n\n\treturn toast;\n}\n\nfunction create(type, icon, title, text) {\n\tconst div = document.createElement(\"div\");\n\tdiv.innerHTML = template(type, icon, title, text);\n\n\treturn init(div.childNodes[1]);\n}\n\nfunction createSuccess(title, text) {\n\treturn create(\n\t\t\"success\", \n\t\t`<i class=\"ph ph-check-circle\"></i>`, \n\t\ttitle, \n\t\ttext\n\t);\n}\n\nfunction createInfo(title, text) {\n\treturn create(\n\t\t\"info\", \n\t\t`<i class=\"ph ph-info\"></i>`, \n\t\ttitle, \n\t\ttext\n\t);\n}\n\nfunction createWarning(title, text) {\n\treturn create(\n\t\t\"warning\", \n\t\t`<i class=\"ph ph-warning\"></i>`, \n\t\ttitle, \n\t\ttext\n\t);\n}\n\nfunction createError(title, text) {\n\treturn create(\n\t\t\"danger\", \n\t\t`<i class=\"ph ph-warning-octagon\"></i>`, \n\t\ttitle, \n\t\ttext\n\t);\n}\n\nexport default {\n  create,\n  createInfo,\n  createSuccess,\n  createWarning,\n  createError,\n  \"createDanger\": createError\n};", "function template(id, title, footer) {\n\treturn `\n\t\t<div class=\"modal\" aria-hidden=\"true\" id=\"${id}\">\n      <div class=\"modal-backdrop\"></div>\n\n      <div class=\"modal-panel\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modal-title-basic\">\n        <header class=\"modal-header\">\n          <h4 class=\"modal-title\" id=\"modal-title-basic\">${title}</h4>\n          <button class=\"btn-icon modal-close\" type=\"button\" aria-label=\"Close\">\u2715</button>\n        </header>\n\n        <div class=\"modal-body\"></div>\n        <footer class=\"modal-footer\">${footer}</footer>\n      </div>\n    </div>\n\t`;\n}\n\nfunction init(modal) {\n\tmodal.show = function() {\n\t\tdocument.querySelector(\"body\").append(modal);\n\n\t\tsetTimeout(() => {\n\t\t\tthis.classList.add(\"a-show\");\n\t\t}, 10);\n\t}\n\n\tmodal.close = function() {\n\t\tthis.classList.add(\"a-hide\");\n\t\tsetTimeout(() => {\n\t\t\tthis.remove();\n\t\t}, 300);\n\t}\n\n\tmodal.querySelector(\".modal-close\").addEventListener(\"click\", e => {\n\t\tmodal.close();\n\t});\n\n\treturn modal;\n}\n\n\t/**\n\t * Create new modal window;\n\t * @param  {string} id    Uniq id (selector)\n\t * @param  {string} title Display title\n\t * @param  {object} props { body: modal => {}, actions => modal => {} }\n\t * @return {object}       DOM object\n\t */\nfunction create(id, props) {\n\tconst title = props.title || \"\";\n\tconst footer = props.footer || \"\";\n\n\tconst div = document.createElement(\"div\");\n\tdiv.innerHTML = template(id, title, footer);\n\tconst modal = div.childNodes[1];\n\n\tconst modalBody = modal.querySelector(\".modal-body\");\n\tconst modalFooter = modal.querySelector(\".modal-footer\");\n\n\tif(typeof props.actions == \"function\") {\n\t\tconst actionsResult = props.actions(modal);\n\n\t\tif(typeof actionsResult[0] == \"object\") {\n\t\t\tconst actions = document.createElement(\"div\");\n\t\t\tactions.classList.add(\"actions\");\n\t\t\tfor(let actionElement of actionsResult) {\n\t\t\t\tactions.append(actionElement);\n\t\t\t}\n\n\t\t\tmodalFooter.append(actions);\n\t\t}\n\t}\n\n\tif(typeof props.body == \"function\") {\n\t\tconst bodyResult = props.body(modal);\n\n\t\tif(typeof bodyResult == \"object\") {\n\t\t\tmodalBody.append(bodyResult);\n\t\t} else if(typeof bodyResult == \"string\") {\n\t\t\tmodalBody.innerHTML = bodyResult;\n\t\t}\n\t}\n\n\treturn init(modal);\n}\n\nexport default {\n\tcreate\n}", "/* =========================\n   Scripts module\n========================= */\n\nexport class ScriptsApi {\n\tconstructor(core) {\n\t\tthis.core = core;\n\t}\n\n\t// GET /api/v1/scripts/actions/list\n\tactions_list(cb) {\n\t\treturn this.core.api_get(\"/api/v1/scripts/actions/list\", cb);\n\t}\n\n\t// GET /api/v1/scripts/scopes/list\n\tscopes_list(cb) {\n\t\treturn this.core.api_get(\"/api/v1/scripts/scopes/list\", cb);\n\t}\n\n\t// GET /api/v1/scripts/regular/list\n\tregular_list(cb) {\n\t\treturn this.core.api_get(\"/api/v1/scripts/regular/list\", cb);\n\t}\n\n\t// GET /api/v1/scripts/scopes/name/{{filename}}\n\tscope_get_by_filename(filename, cb) {\n\t\tconst safe = encodeURIComponent(String(filename || \"\"));\n\t\treturn this.core.api_get(`/api/v1/scripts/scopes/name/${safe}`, cb, {\n\t\t\t// \u0442\u0443\u0442 \u0441\u0435\u0440\u0432\u0435\u0440 \u043C\u043E\u0436\u0435\u0442 \u0432\u0435\u0440\u043D\u0443\u0442\u044C PHP-\u043A\u043E\u0434 \u0442\u0435\u043A\u0441\u0442\u043E\u043C; request \u0443\u043C\u0435\u0435\u0442 \u044D\u0442\u043E \u043F\u0435\u0440\u0435\u0436\u0438\u0442\u044C\n\t\t});\n\t}\n\n\t// POST /api/v1/scripts/scopes/new\n\tscope_create(payload, cb) {\n\t\t// payload: { alias, filename, path }\n\t\treturn this.core.api_post(\"/api/v1/scripts/scopes/new\", payload, cb);\n\t}\n\n\t// POST /api/v1/scripts/scopes/update\n\tscope_update(payload, cb) {\n\t\t// payload: { name, filename, path }\n\t\treturn this.core.api_post(\"/api/v1/scripts/scopes/update\", payload, cb);\n\t}\n\n\t// GET /api/v1/scripts/actions/alias/{{alias}}/enable\n\taction_enable(alias, cb) {\n\t\tconst safe = encodeURIComponent(String(alias || \"\"));\n\t\treturn this.core.api_get(`/api/v1/scripts/actions/alias/${safe}/enable`, cb);\n\t}\n\n\t// GET /api/v1/scripts/actions/alias/{{alias}}/disable\n\taction_disable(alias, cb) {\n\t\tconst safe = encodeURIComponent(String(alias || \"\"));\n\t\treturn this.core.api_get(`/api/v1/scripts/actions/alias/${safe}/disable`, cb);\n\t}\n\n\t// GET /api/v1/scripts/actions/regular/{{alias}}/enable\n\tregular_enable(alias, cb) {\n\t\tconst safe = encodeURIComponent(String(alias || \"\"));\n\t\treturn this.core.api_get(`/api/v1/scripts/actions/regular/${safe}/enable`, cb);\n\t}\n\n\t// GET /api/v1/scripts/actions/regular/{{alias}}/disable\n\tregular_disable(alias, cb) {\n\t\tconst safe = encodeURIComponent(String(alias || \"\"));\n\t\treturn this.core.api_get(`/api/v1/scripts/actions/regular/${safe}/disable`, cb);\n\t}\n\n\t// GET /api/v1/scripts/actions/scope/{{name}}/enable\n\tscope_enable(name, cb) {\n\t\tconst safe = encodeURIComponent(String(name || \"\"));\n\t\treturn this.core.api_get(`/api/v1/scripts/actions/scope/${safe}/enable`, cb);\n\t}\n\n\t// GET /api/v1/scripts/actions/scope/{{name}}/disable\n\tscope_disable(name, cb) {\n\t\tconst safe = encodeURIComponent(String(name || \"\"));\n\t\treturn this.core.api_get(`/api/v1/scripts/actions/scope/${safe}/disable`, cb);\n\t}\n\n\t// GET /api/v1/scripts/scopes/name/{{name}}/remove\n\tscope_remove(name, cb) {\n\t\tconst safe = encodeURIComponent(String(name || \"\"));\n\t\treturn this.core.api_get(`/api/v1/scripts/scopes/name/${safe}/remove`, cb);\n\t}\n\n\t// POST /api/v1/scripts/actions/run\n\trun(payload, cb) {\n\t\t// payload: { alias, params: {...} }\n\t\treturn this.core.api_post(\"/api/v1/scripts/actions/run\", payload, cb);\n\t}\n}", "/* =========================\n   Devices module\n========================= */\n\nexport class DevicesApi {\n\tconstructor(core) {\n\t\tthis.core = core;\n\t}\n\n\t// GET /api/v1/devices/list\n\tlist(cb) {\n\t\treturn this.core.api_get(\"/api/v1/devices/list\", cb);\n\t}\n\n\t// GET /api/v1/devices/scanning/setup\n\tscanning_setup(cb) {\n\t\treturn this.core.api_get(\"/api/v1/devices/scanning/setup\", cb);\n\t}\n\n\t// GET /api/v1/devices/scanning/all\n\tscanning_all(cb) {\n\t\treturn this.core.api_get(\"/api/v1/devices/scanning/all\", cb);\n\t}\n\n\t// POST /api/v1/devices/setup/new-device\n\tsetup_new_device(payload, cb) {\n\t\t// payload: { device_ip, alias, name, description }\n\t\treturn this.core.api_post(\"/api/v1/devices/setup/new-device\", payload, cb);\n\t}\n\n\t// GET /api/v1/devices/id/{{id}}/info\n\tinfo(id, cb) {\n\t\tconst safe = encodeURIComponent(String(id));\n\t\treturn this.core.api_get(`/api/v1/devices/id/${safe}/info`, cb);\n\t}\n\n\t// GET /api/v1/devices/id/{{id}}\n\tget(id, cb) {\n\t\tconst safe = encodeURIComponent(String(id));\n\t\treturn this.core.api_get(`/api/v1/devices/id/${safe}`, cb);\n\t}\n\n\t// GET /api/v1/devices/id/{{id}}/status\n\tstatus(id, cb) {\n\t\tconst safe = encodeURIComponent(String(id));\n\t\treturn this.core.api_get(`/api/v1/devices/id/${safe}/status`, cb);\n\t}\n\n\t// POST /api/v1/devices/action\n\taction(payload, cb) {\n\t\t// payload: { device_id, action, params }\n\t\treturn this.core.api_post(\"/api/v1/devices/action\", payload, cb);\n\t}\n\n\t// GET /api/v1/devices/id/{{id}}/remove\n\tremove(id, cb) {\n\t\tconst safe = encodeURIComponent(String(id));\n\t\treturn this.core.api_get(`/api/v1/devices/id/${safe}/remove`, cb);\n\t}\n\n\t// GET /api/v1/devices/id/{{id}}/reboot\n\treboot(id, cb) {\n\t\tconst safe = encodeURIComponent(String(id));\n\t\treturn this.core.api_get(`/api/v1/devices/id/${safe}/reboot`, cb);\n\t}\n}\n", "export class AreasApi {\n\tconstructor(core) {\n\t\tthis.core = core;\n\t}\n\n\t// GET /api/v1/areas/list\n\tlist(cb) {\n\t\treturn this.core.api_get(\"/api/v1/areas/list\", cb);\n\t}\n\n\t// GET /api/v1/areas/id/{{area_id}}/list\n\tinner_list(area_id, cb) {\n\t\tconst safe = encodeURIComponent(String(area_id));\n\t\treturn this.core.api_get(`/api/v1/areas/id/${safe}/list`, cb);\n\t}\n\n\t// POST /api/v1/areas/new-area\n\tnew_area(payload, cb) {\n\t\t// payload: { type, alias, display_name }\n\t\treturn this.core.api_post(\"/api/v1/areas/new-area\", payload, cb);\n\t}\n\n\t// GET /api/v1/areas/id/{{area_id}}/remove\n\tremove(area_id, cb) {\n\t\tconst safe = encodeURIComponent(String(area_id));\n\t\treturn this.core.api_get(`/api/v1/areas/id/${safe}/remove`, cb);\n\t}\n\n\t// POST /api/v1/areas/place-in-area\n\tplace_in_area(payload, cb) {\n\t\t// payload: { target_area_id, place_in_area_id }\n\t\treturn this.core.api_post(\"/api/v1/areas/place-in-area\", payload, cb);\n\t}\n\n\t// POST /api/v1/areas/update-display-name\n\tupdate_display_name(payload, cb) {\n\t\t// payload: { area_id, display_name }\n\t\treturn this.core.api_post(\"/api/v1/areas/update-display-name\", payload, cb);\n\t}\n\n\t// POST /api/v1/areas/update-alias\n\tupdate_alias(payload, cb) {\n\t\t// payload: { area_id, new_alias }\n\t\treturn this.core.api_post(\"/api/v1/areas/update-alias\", payload, cb);\n\t}\n\n\t// GET /api/v1/areas/id/{{area_id}}/devices\n\tdevices(area_id, cb) {\n\t\tconst safe = encodeURIComponent(String(area_id));\n\t\treturn this.core.api_get(`/api/v1/areas/id/${safe}/devices`, cb);\n\t}\n\n\t// GET /api/v1/areas/id/{{area_id}}/unassign-from-area\n\tunassign_from_area(area_id, cb) {\n\t\tconst safe = encodeURIComponent(String(area_id));\n\t\treturn this.core.api_get(`/api/v1/areas/id/${safe}/unassign-from-area`, cb);\n\t}\n\n\t// GET /api/v1/areas/types/list\n\ttypes_list(cb) {\n\t\treturn this.core.api_get(\"/api/v1/areas/types/list\", cb);\n\t}\n\n\t// GET /api/v1/areas/reboot_devices\n\t// GET /api/v1/areas/id/{{area_id}}/reboot_devices\n\treboot_devices(area_id, cb) {\n\t\tif (area_id === undefined || area_id === null) {\n\t\t\treturn this.core.api_get(\"/api/v1/areas/reboot_devices\", cb);\n\t\t}\n\t\tconst safe = encodeURIComponent(String(area_id));\n\t\treturn this.core.api_get(`/api/v1/areas/id/${safe}/reboot_devices`, cb);\n\t}\n}", "/**\n * smart_home_api.js\n *\n * \u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F JS-\u0431\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0430 \u0434\u043B\u044F REST-\u0437\u0430\u043F\u0440\u043E\u0441\u043E\u0432 \u043A \u0441\u0435\u0440\u0432\u0435\u0440\u0443 (callback-style).\n * - \u0410\u0432\u0442\u043E\u0440\u0438\u0437\u0430\u0446\u0438\u044F: Bearer token (\u0438\u043B\u0438 \u043A\u0430\u0441\u0442\u043E\u043C\u043D\u044B\u0439 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A, \u0435\u0441\u043B\u0438 \u043F\u043E\u043C\u0435\u043D\u044F\u0435\u0448\u044C)\n * - \u0415\u0434\u0438\u043D\u0430\u044F \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0430 \u043E\u0448\u0438\u0431\u043E\u043A: \u0441\u0435\u0442\u0435\u0432\u044B\u0435, \u0442\u0430\u0439\u043C\u0430\u0443\u0442, \u043D\u0435-JSON, \u0441\u0442\u0430\u0442\u0443\u0441=false/error\n * - \u041C\u043E\u0434\u0443\u043B\u0438: \u0441\u0435\u0439\u0447\u0430\u0441 \u0442\u043E\u043B\u044C\u043A\u043E Scripts, \u043E\u0441\u0442\u0430\u043B\u044C\u043D\u044B\u0435 \u043F\u043E \u0430\u043D\u0430\u043B\u043E\u0433\u0438\u0438\n */\n\nimport { ScriptsApi } from \"./modules/ScriptsApi.js\";\nimport { DevicesApi } from \"./modules/DevicesApi.js\";\nimport { AreasApi } from \"./modules/AreasApi.js\";\n\n/* =========================\n   Utils\n========================= */\n\nfunction build_query(params) {\n\tif (!params || typeof params !== \"object\") return \"\";\n\tconst usp = new URLSearchParams();\n\tObject.entries(params).forEach(([k, v]) => {\n\t\tif (v === undefined || v === null) return;\n\t\tusp.append(k, String(v));\n\t});\n\tconst s = usp.toString();\n\treturn s ? `?${s}` : \"\";\n}\n\nfunction join_url(base_url, path) {\n\tconst b = String(base_url || \"\").replace(/\\/+$/, \"\");\n\tconst p = String(path || \"\").replace(/^\\/+/, \"\");\n\treturn `${b}/${p}`;\n}\n\nfunction safe_json_parse(text) {\n\ttry {\n\t\treturn { ok: true, data: JSON.parse(text) };\n\t} catch (e) {\n\t\treturn { ok: false, error: e };\n\t}\n}\n\n/* =========================\n   Core client\n========================= */\n\nexport class SmartHomeApi {\n\t/**\n\t * @param {Object} opts\n\t * @param {string} opts.base_url - \u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440: http://192.168.2.101\n\t * @param {string} [opts.token] - \u0442\u043E\u043A\u0435\u043D \u0430\u0432\u0442\u043E\u0440\u0438\u0437\u0430\u0446\u0438\u0438\n\t * @param {number} [opts.timeout_ms=15000]\n\t * @param {Object} [opts.default_headers]\n\t * @param {Function} [opts.on_unauthorized] - cb(details)\n\t * @param {string} [opts.proxy_path]        \u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440 \"/proxy.php\" (\u0432\u043A\u043B\u044E\u0447\u0430\u0435\u0442 \u0430\u0432\u0442\u043E-\u043F\u0440\u043E\u043A\u0441\u0438)\n\t */\n\tconstructor(opts) {\n\t\tthis.base_url = opts?.base_url || \"\";\n\t\tthis.token = opts?.token || \"\";\n\t\tthis.timeout_ms = Number.isFinite(opts?.timeout_ms) ? opts.timeout_ms : 15000;\n\t\tthis.default_headers = opts?.default_headers || {};\n\t\tthis.on_unauthorized = typeof opts?.on_unauthorized === \"function\" ? opts.on_unauthorized : null;\n\t\tthis.proxy_path = opts?.proxy_path || \"\"; // \"\" => \u0431\u0435\u0437 \u043F\u0440\u043E\u043A\u0441\u0438\n\n\t\t// modules\n\t\tthis.scripts = new ScriptsApi(this);\n\t\tthis.devices = new DevicesApi(this);\n\t\tthis.areas = new AreasApi(this);\n\t}\n\n\tset_base_url(base_url) {\n\t\tthis.base_url = base_url || \"\";\n\t}\n\n\tset_token(token) {\n\t\tthis.token = token || \"\";\n\t}\n\n\tset_proxy_path(proxy_path) {\n\t\tthis.proxy_path = proxy_path || \"\";\n\t}\n\n\t_wrap_path(path, extra_query) {\n\t\t// \u0415\u0441\u043B\u0438 \u0432\u043A\u043B\u044E\u0447\u0451\u043D \u043F\u0440\u043E\u043A\u0441\u0438 \u2014 \u0445\u043E\u0434\u0438\u043C \u043D\u0430 /proxy.php?path=<api_path>&...\n\t\tif (!this.proxy_path) {\n\t\t\tif (!extra_query) return path;\n\t\t\treturn `${path}${build_query(extra_query)}`;\n\t\t}\n\n\t\tconst q = { path, ...(extra_query || {}) };\n\t\treturn `${this.proxy_path}${build_query(q)}`;\n\t}\n\n\t/**\n\t * \u0423\u043D\u0438\u0444\u0438\u0446\u0438\u0440\u043E\u0432\u0430\u043D\u043D\u044B\u0439 \u0437\u0430\u043F\u0440\u043E\u0441.\n\t *\n\t * cb(err, data, meta)\n\t * - err: { type, message, status_code?, raw?, details? }\n\t * - data: \u0440\u0430\u0441\u043F\u0430\u0440\u0441\u0435\u043D\u043D\u044B\u0439 json (\u0438\u043B\u0438 string, \u0435\u0441\u043B\u0438 \u0441\u0435\u0440\u0432\u0435\u0440 \u043D\u0435 \u0432\u0435\u0440\u043D\u0443\u043B json)\n\t * - meta: { url, method, status_code, headers }\n\t */\n\trequest(method, path, body, cb, opts) {\n\t\tconst callback = typeof cb === \"function\" ? cb : () => {};\n\t\tconst url = join_url(this.base_url, path);\n\n\t\tconst controller = new AbortController();\n\t\tconst timeout_ms = Number.isFinite(opts?.timeout_ms) ? opts.timeout_ms : this.timeout_ms;\n\n\t\tconst t = setTimeout(() => controller.abort(), timeout_ms);\n\n\t\tconst headers = {\n\t\t\t...this.default_headers,\n\t\t\t...(opts?.headers || {}),\n\t\t};\n\n\t\t// \u0410\u0432\u0442\u043E\u0440\u0438\u0437\u0430\u0446\u0438\u044F (\u043F\u043E\u0434\u0441\u0442\u0440\u043E\u0439, \u0435\u0441\u043B\u0438 \u0443 \u0442\u0435\u0431\u044F \u0434\u0440\u0443\u0433\u043E\u0439 \u0444\u043E\u0440\u043C\u0430\u0442)\n\t\tif (this.token) headers[\"Authorization\"] = `Bearer ${this.token}`;\n\n\t\tlet payload = undefined;\n\t\tif (body !== undefined && body !== null) {\n\t\t\theaders[\"Content-Type\"] = \"application/json\";\n\t\t\tpayload = JSON.stringify(body);\n\t\t}\n\n\t\tfetch(url, {\n\t\t\tmethod,\n\t\t\theaders,\n\t\t\tbody: payload,\n\t\t\tsignal: controller.signal,\n\t\t})\n\t\t\t.then(async (res) => {\n\t\t\t\tclearTimeout(t);\n\n\t\t\t\tconst meta = {\n\t\t\t\t\turl,\n\t\t\t\t\tmethod,\n\t\t\t\t\tstatus_code: res.status,\n\t\t\t\t\theaders: res.headers,\n\t\t\t\t};\n\n\t\t\t\tconst text = await res.text();\n\t\t\t\tconst parsed = safe_json_parse(text);\n\t\t\t\tconst data = parsed.ok ? parsed.data : text;\n\n\t\t\t\t// HTTP-level \u043E\u0448\u0438\u0431\u043A\u0438\n\t\t\t\tif (!res.ok) {\n\t\t\t\t\tconst err = {\n\t\t\t\t\t\ttype: \"http_error\",\n\t\t\t\t\t\tmessage: `HTTP ${res.status}`,\n\t\t\t\t\t\tstatus_code: res.status,\n\t\t\t\t\t\traw: data,\n\t\t\t\t\t};\n\n\t\t\t\t\tif (res.status === 401 || res.status === 403) {\n\t\t\t\t\t\tif (this.on_unauthorized) {\n\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\tthis.on_unauthorized({ error: err, meta });\n\t\t\t\t\t\t\t} catch (_) {}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\treturn callback(err, null, meta);\n\t\t\t\t}\n\n\t\t\t\t// API-level \u043E\u0448\u0438\u0431\u043A\u0438 (\u043F\u043E \u0442\u0432\u043E\u0438\u043C \u043F\u0440\u0438\u043C\u0435\u0440\u0430\u043C \u0431\u044B\u0432\u0430\u0435\u0442 status:false \u0438\u043B\u0438 status:\"error\")\n\t\t\t\tif (parsed.ok && data && typeof data === \"object\") {\n\t\t\t\t\tconst st = data.status;\n\t\t\t\t\tif (st === false || st === \"error\") {\n\t\t\t\t\t\tconst err = {\n\t\t\t\t\t\t\ttype: \"api_error\",\n\t\t\t\t\t\t\tmessage: data.message || \"API error\",\n\t\t\t\t\t\t\tstatus_code: res.status,\n\t\t\t\t\t\t\traw: data,\n\t\t\t\t\t\t\tfield: data.field,\n\t\t\t\t\t\t};\n\t\t\t\t\t\treturn callback(err, null, meta);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn callback(null, data, meta);\n\t\t\t})\n\t\t\t.catch((e) => {\n\t\t\t\tclearTimeout(t);\n\n\t\t\t\tconst is_abort = e && (e.name === \"AbortError\" || String(e).includes(\"AbortError\"));\n\t\t\t\tconst err = is_abort\n\t\t\t\t\t? { type: \"timeout\", message: `Timeout after ${timeout_ms}ms` }\n\t\t\t\t\t: { type: \"network_error\", message: e?.message || \"Network error\", details: e };\n\n\t\t\t\treturn callback(err, null, { url, method, status_code: 0, headers: null });\n\t\t\t});\n\t}\n\n\tget(path, cb, opts) {\n\t\treturn this.request(\"GET\", path, null, cb, opts);\n\t}\n\n\tpost(path, body, cb, opts) {\n\t\treturn this.request(\"POST\", path, body, cb, opts);\n\t}\n\n\tapi_get(api_path, cb, extra_query, opts) {\n\t\treturn this.get(this._wrap_path(api_path, extra_query), cb, opts);\n\t}\n\n\tapi_post(api_path, body, cb, extra_query, opts) {\n\t\treturn this.post(this._wrap_path(api_path, extra_query), body, cb, opts);\n\t}\n}\n\n/* =========================\n   Example usage\n========================= */\n\n// import { SmartHomeApi } from \"./smart_home_api.js\";\n//\n// const api = new SmartHomeApi({\n//   base_url: \"http://192.168.2.101\",\n//   token: \"YOUR_TOKEN\",\n//   timeout_ms: 20000,\n//   on_unauthorized: ({ error }) => console.log(\"auth problem:\", error),\n// });\n//\n// api.scripts.actions_list((err, res) => {\n//   if (err) return console.error(\"actions_list error:\", err);\n//   console.log(\"actions:\", res);\n// });\n//\n// api.scripts.run({ alias: \"script_alias\", params: { x: 1 } }, (err, res) => {\n//   if (err) return console.error(\"run error:\", err);\n//   console.log(\"run result:\", res);\n// });\n", "import Toasts from \"./components/toasts.js\";\nimport Modals from \"./components/modals.js\";\n\nwindow.demoToastInfo = function () {\n\tToasts.createInfo(\n\t\t\"Title\",\n\t\t\"\u041F\u0440\u043E\u0438\u0437\u043E\u0448\u043B\u0430 \u043E\u0448\u0438\u0431\u043A\u0430. \u041F\u043E\u0432\u0442\u043E\u0440\u0438 \u043F\u043E\u0437\u0436\u0435.\"\n\t).show();\n}\n\nwindow.demoToastSuccess = function () {\n\tToasts.createSuccess(\n\t\t\"Success\",\n\t\t\"\u0412\u0441\u0451 \u043E\u0442\u043B\u0438\u0447\u043D\u043E, \u0432\u0441\u0451 \u0440\u0430\u0431\u043E\u0442\u0430\u0435\u0442, \u044D\u0442\u043E \u0443\u0441\u043F\u0435\u0445 \u0442\u043E\u0441\u0442\u0435\u0440\u0430\"\n\t).show();\n}\n\nwindow.demoToastWarning = function () {\n\tToasts.createWarning(\n\t\t\"Warning\",\n\t\t\"\u041F\u0440\u043E\u0438\u0437\u043E\u0448\u043B\u0430 \u043E\u0448\u0438\u0431\u043A\u0430. \u041F\u043E\u0432\u0442\u043E\u0440\u0438 \u043F\u043E\u0437\u0436\u0435.\"\n\t).show();\n}\n\nwindow.demoToastDanger = function () {\n\tToasts.createDanger(\n\t\t\"Danger\",\n\t\t\"\u041F\u0440\u043E\u0438\u0437\u043E\u0448\u043B\u0430 \u043E\u0448\u0438\u0431\u043A\u0430. \u041F\u043E\u0432\u0442\u043E\u0440\u0438 \u043F\u043E\u0437\u0436\u0435.\"\n\t).show();\n}\n\nwindow.demoModal = function() {\n\tModals.create(\"demo-modals\", {\n\t\ttitle: \"Demo modal window\",\n\t\tfooter: \"<p>Footer text</p>\",\n\t\tactions: modal => {\n\t\t\tconst buttonCancel = document.createElement(\"button\");\n\t\t\tbuttonCancel.classList.add(\"btn\");\n\t\t\tbuttonCancel.classList.add(\"btn-primary\");\n\t\t\tbuttonCancel.innerHTML = \"Cancel\";\n\n\t\t\tbuttonCancel.addEventListener(\"click\", e => {\n\t\t\t\tmodal.close();\n\t\t\t});\n\n\t\t\tconst buttonApply = document.createElement(\"button\");\n\t\t\tbuttonApply.classList.add(\"btn\");\n\t\t\tbuttonApply.classList.add(\"btn-success\");\n\t\t\tbuttonApply.innerHTML = \"Apply\";\n\n\t\t\tbuttonApply.addEventListener(\"click\", e => {\n\t\t\t\tmodal.close();\n\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tToasts.createSuccess(\n\t\t\t\t\t\t\"Success\",\n\t\t\t\t\t\t\"\u0412\u0441\u0451 \u043E\u0442\u043B\u0438\u0447\u043D\u043E, \u0432\u0441\u0451 \u0440\u0430\u0431\u043E\u0442\u0430\u0435\u0442, \u044D\u0442\u043E \u0443\u0441\u043F\u0435\u0445\"\n\t\t\t\t\t).show();\n\t\t\t\t}, 300);\n\t\t\t});\n\n\t\t\treturn [ buttonCancel, buttonApply ];\n\t\t},\n\t\tbody: modal => {\n\t\t\treturn `\n\t\t\t\t<p class=\"text\">\u041B\u044E\u0431\u043E\u0439 \u043A\u043E\u043D\u0442\u0435\u043D\u0442: \u0442\u0435\u043A\u0441\u0442, \u0444\u043E\u0440\u043C\u044B, \u0441\u043F\u0438\u0441\u043A\u0438.</p>\n\n        <div class=\"form-group\">\n          <label class=\"label\" for=\"modal-device-name\">\n            Device name\n            <input class=\"input\" id=\"modal-device-name\" type=\"text\" placeholder=\"Kitchen Light\">\n          </label>\n        </div>\n\n        <div class=\"form-group\">\n          <label class=\"label\" for=\"modal-device-desc\">\n            Description\n            <textarea class=\"input\" id=\"modal-device-desc\" rows=\"3\" placeholder=\"Optional\"></textarea>\n          </label>\n        </div>\n\t\t\t`;\n\t\t}\n\t}).show();\n}\n\nimport { SmartHomeApi } from \"./sh/SmartHomeApi.js\";\n\nfunction shApiDebuging() {\n\tconst api = new SmartHomeApi({\n\t  base_url: \"http://shswebclient.local\",\n\t  token: \"YOUR_TOKEN\",\n\t  timeout_ms: 3000,\n\t  on_unauthorized: ({ error }) => console.log(\"auth problem:\", error),\n\t  proxy_path: \"/proxy.php\",\n\t});\n\n\tapi.scripts.actions_list((err, data, meta) => console.log(data));\n\tapi.scripts.scopes_list((err, data, meta) => console.log(data));\n\tapi.devices.info(4, (err, data, meta) => console.log(data));\n}\n\n\ndocument.addEventListener(\"DOMContentLoaded\", e => {\n\tconsole.log(\"App init\");\n\n\tshApiDebuging();\n});"],
-  "mappings": "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",
-  "names": ["template", "type", "icon", "title", "text", "init", "toast", "create", "div", "createSuccess", "createInfo", "createWarning", "createError", "toasts_default", "template", "id", "title", "footer", "init", "modal", "create", "props", "div", "modalBody", "modalFooter", "actionsResult", "actions", "actionElement", "bodyResult", "modals_default", "ScriptsApi", "core", "cb", "filename", "safe", "payload", "alias", "name", "DevicesApi", "core", "cb", "payload", "id", "safe", "AreasApi", "core", "cb", "area_id", "safe", "payload", "build_query", "params", "usp", "k", "v", "s", "join_url", "base_url", "path", "b", "p", "safe_json_parse", "text", "SmartHomeApi", "opts", "ScriptsApi", "DevicesApi", "AreasApi", "token", "proxy_path", "extra_query", "q", "__spreadValues", "method", "body", "cb", "callback", "url", "controller", "timeout_ms", "t", "headers", "payload", "res", "__async", "meta", "parsed", "data", "err", "_", "st", "e", "api_path", "toasts_default", "modals_default", "modal", "buttonCancel", "e", "buttonApply", "shApiDebuging", "api", "SmartHomeApi", "error", "err", "data", "meta"]
+  "sources": ["../../src/js/components/hud.js", "../../src/js/components/Screens.js", "../../src/js/index.js"],
+  "sourcesContent": ["function hud() {\n\tconsole.log(\"HUD init\");\n}\n\nexport {\n\thud\n}", "export class Screens {\n\tconstructor(screensContainerSelector, loaderSelector, errorScreenSelector) {\n\t\tthis.screens = {};\n\t\tthis.routesMap = {};\n\t\tthis.currentScreen = null;\n\n\t\tthis.screensContainer = document.querySelector(screensContainerSelector);\n\t\tthis.loader = document.querySelector(loaderSelector);\n\t\tthis.errorScreen = document.querySelector(errorScreenSelector);\n\t\tconsole.log(\"Screens Init\");\n\t}\n\n\t/**\n\t * \u0414\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u0438\u0435 \u043C\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u0438 \u043E\u0431\u044A\u0435\u043A\u0442\u0430 \u0441 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u0430\u043C\u0438 \u044D\u043A\u0440\u0430\u043D\u0430\n\t * @param {string} route  Like `/path/name`\n\t * @param {void} screen {alias, renderer, initer}\n\t */\n\tadd(route, screen) {\n\t\tif(typeof screen != \"object\") {\n\t\t\treturn console.error(\"Screens: screens must be object\");\n\t\t}\n\t\t\n\t\tif(typeof screen?.alias == \"undefined\") {\n\t\t\treturn console.error(\"Screens: undefined alias\");\n\t\t}\n\n\t\tif(typeof screen?.renderer != \"function\") {\n\t\t\treturn console.error(\"Screens: renderer must be function\");\n\t\t}\n\n\t\tthis.screens[screen.alias] = {\n\t\t\troute: route,\n\t\t\t...screen\n\t\t};\n\n\t\tthis.routesMap[route] = screen.alias;\n\t}\n\n\tswitch(alias) {\t\t\n\t\tthis.showLoader();\n\t\tthis.currentScreen?.DOMObject.remove();\n\t\t\n\t\tif(typeof this.screens[alias] == \"undefined\") {\n\t\t\tconsole.error(`Screens: \"${alias}\" not found`);\n\t\t\treturn ;\n\t\t}\n\n\t\tthis.currentScreen = this.screens[alias];\n\t\t\n\t\tconst screenContainer = document.createElement(\"div\");\n\t\tscreenContainer.classList.add(\"screen\");\n\t\tscreenContainer.id = alias;\n\t\tscreenContainer.dataset.alias = alias;\n\t\tscreenContainer.innerHTML = this.currentScreen.renderer();\n\t\tthis.currentScreen.DOMObject = screenContainer;\n\t\tthis.screensContainer.append(this.currentScreen.DOMObject);\n\n\t\tthis.currentScreen.initer(this);\n\t}\n\n\trouting() {\n\t\tsetInterval(() => {\n\t\t\tconst route = document.location.hash.split(\"#!\")[1];\n\t\t\tif(typeof route == \"undefined\" || route == \"\") {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t\n\t\t\tconst alias = (typeof this.routesMap[route] == \"undefined\") \n\t\t\t\t? \"not-found-screen\"\n\t\t\t\t: this.routesMap[route];\n\n\t\t\tif(!this.currentScreen || this.currentScreen.alias != alias) {\n\t\t\t\tthis.switch(alias);\n\t\t\t}\n\t\t}, 50);\n\t}\n\n\tready() {\n\t\tif(this.currentScreen == null) {\n\t\t\treturn;\n\t\t}\n\n\t\tif(!this.currentScreen.DOMObject) {\n\t\t\tthis.currentScreen.DOMObject = document.getElementsById(this.currentScreen.alias);\n\t\t}\n\n\t\tthis.hideLoader();\n\t\tthis.currentScreen.DOMObject.classList.add(\"a-show\");\n\t}\n\n\terror() {\n\t\tthis.currentScreen?.DOMObject.remove();\n\t\tthis.showErrorScreen();\n\t}\n\n\thideLoader() {\n\t\tthis.loader.classList.remove(\"a-show\");\n\t}\n\n\tshowLoader() {\n\t\tthis.loader.classList.add(\"a-show\");\n\t}\n\n\tshowErrorScreen(text) {\n\t\tthis.errorScreen.classList.add(\"a-show\");\n\t}\n\n\thideErrorScreen(text) {\n\t\tthis.errorScreen.classList.remove(\"a-show\");\n\t}\n\n\tgetScreens() {\n\t\treturn this.screens;\n\t}\n\n\tgetRoutesMap() {\n\t\treturn this.routesMap;\n\t}\n}", "import { hud } from \"./components/hud.js\";\nimport { Screens } from \"./components/Screens.js\";\n\ndocument.addEventListener(\"DOMContentLoaded\", e => {\n\tconsole.log(\"App init\");\n\n\thud();\n\n\tconst screens = new Screens(\".screens\", \".load-screen\", \".error-screen\");\n\tscreens.add(\"/\", {\n\t\talias: \"home\",\n\t\trenderer: () => {\n\t\t\treturn `<h2 class=\"mt-4\">Hello world</h2>`;\n\t\t},\n\t\tiniter: scr => {\n\t\t\tsetTimeout(() => scr.ready(), 1000);\n\t\t\tsetTimeout(() => scr.error(), 2000);\n\t\t}\n\t});\n\n\tscreens.add(\"-\", {\n\t\talias: \"not-found-screen\",\n\t\trenderer: () => {\n\t\t\treturn `<h2 class=\"mt-4\">404 NOT FOUND</h2>`;\n\t\t},\n\t\tiniter: scr => {\n\t\t\tscr.ready();\n\t\t}\n\t});\n\n\tconsole.log(screens.getScreens());\n\n\tscreens.routing();\n});"],
+  "mappings": "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",
+  "names": ["hud", "Screens", "screensContainerSelector", "loaderSelector", "errorScreenSelector", "route", "screen", "__spreadValues", "alias", "_a", "screenContainer", "text", "e", "hud", "screens", "Screens", "scr"]
 }
diff --git a/webclient/index.php b/webclient/index.php
index cfe3bf2..81a759b 100644
--- a/webclient/index.php
+++ b/webclient/index.php
@@ -7,9 +7,20 @@
 	<link rel="stylesheet" href="/assets/fonts/phosphor-icons/src/css/icons.css">
 	<link rel="stylesheet" href="/dist/css/main.css">
 </head>
-<body>
-	<h1>SHServ Web Client</h1>
-	<big>this is halloween <i class="ph ph-ghost"></i></big>
+<body class="app">
+	<div class="hud">
+		<div class="row">
+			<h1 class="app-title contrast">SHServ Web Client</h1>
+			<button class="btn-icon nav-toggle"><i class="ph ph-squares-four"></i></button>
+		</div>
+	</div>
+
+	<div class="screens">
+
+	</div>
+
+	<div class="load-screen">LOADING</div>
+	<div class="error-screen">ERROR</div>
 
 	<script src="/dist/js/main.js"></script>
 </body>
diff --git a/webclient/src/js/_index.js b/webclient/src/js/_index.js
new file mode 100644
index 0000000..c61d4ea
--- /dev/null
+++ b/webclient/src/js/_index.js
@@ -0,0 +1,107 @@
+import Toasts from "./components/toasts.js";
+import Modals from "./components/modals.js";
+
+window.demoToastInfo = function () {
+	Toasts.createInfo(
+		"Title",
+		"Произошла ошибка. Повтори позже."
+	).show();
+}
+
+window.demoToastSuccess = function () {
+	Toasts.createSuccess(
+		"Success",
+		"Всё отлично, всё работает, это успех тостера"
+	).show();
+}
+
+window.demoToastWarning = function () {
+	Toasts.createWarning(
+		"Warning",
+		"Произошла ошибка. Повтори позже."
+	).show();
+}
+
+window.demoToastDanger = function () {
+	Toasts.createDanger(
+		"Danger",
+		"Произошла ошибка. Повтори позже."
+	).show();
+}
+
+window.demoModal = function() {
+	Modals.create("demo-modals", {
+		title: "Demo modal window",
+		footer: "<p>Footer text</p>",
+		actions: modal => {
+			const buttonCancel = document.createElement("button");
+			buttonCancel.classList.add("btn");
+			buttonCancel.classList.add("btn-primary");
+			buttonCancel.innerHTML = "Cancel";
+
+			buttonCancel.addEventListener("click", e => {
+				modal.close();
+			});
+
+			const buttonApply = document.createElement("button");
+			buttonApply.classList.add("btn");
+			buttonApply.classList.add("btn-success");
+			buttonApply.innerHTML = "Apply";
+
+			buttonApply.addEventListener("click", e => {
+				modal.close();
+
+				setTimeout(() => {
+					Toasts.createSuccess(
+						"Success",
+						"Всё отлично, всё работает, это успех"
+					).show();
+				}, 300);
+			});
+
+			return [ buttonCancel, buttonApply ];
+		},
+		body: modal => {
+			return `
+				<p class="text">Любой контент: текст, формы, списки.</p>
+
+        <div class="form-group">
+          <label class="label" for="modal-device-name">
+            Device name
+            <input class="input" id="modal-device-name" type="text" placeholder="Kitchen Light">
+          </label>
+        </div>
+
+        <div class="form-group">
+          <label class="label" for="modal-device-desc">
+            Description
+            <textarea class="input" id="modal-device-desc" rows="3" placeholder="Optional"></textarea>
+          </label>
+        </div>
+			`;
+		}
+	}).show();
+}
+
+import { SmartHomeApi } from "./sh/SmartHomeApi.js";
+
+function shApiDebuging() {
+	const api = new SmartHomeApi({
+	  base_url: "http://shswebclient.local",
+	  token: "YOUR_TOKEN",
+	  timeout_ms: 3000,
+	  on_unauthorized: ({ error }) => console.log("auth problem:", error),
+	  proxy_path: "/proxy.php",
+	});
+
+	api.scripts.actions_list((err, data, meta) => console.log(data));
+	api.scripts.scopes_list((err, data, meta) => console.log(data));
+	api.devices.info(4, (err, data, meta) => console.log(data));
+}
+
+
+document.addEventListener("DOMContentLoaded", e => {
+	console.log("App init");
+
+	shApiDebuging();
+});
\ No newline at end of file
diff --git a/webclient/src/js/components/Screens.js b/webclient/src/js/components/Screens.js
new file mode 100644
index 0000000..939b6cd
--- /dev/null
+++ b/webclient/src/js/components/Screens.js
@@ -0,0 +1,119 @@
+export class Screens {
+	constructor(screensContainerSelector, loaderSelector, errorScreenSelector) {
+		this.screens = {};
+		this.routesMap = {};
+		this.currentScreen = null;
+
+		this.screensContainer = document.querySelector(screensContainerSelector);
+		this.loader = document.querySelector(loaderSelector);
+		this.errorScreen = document.querySelector(errorScreenSelector);
+		console.log("Screens Init");
+	}
+
+	/**
+	 * Добавление маршрута и объекта с параметрами экрана
+	 * @param {string} route  Like `/path/name`
+	 * @param {void} screen {alias, renderer, initer}
+	 */
+	add(route, screen) {
+		if(typeof screen != "object") {
+			return console.error("Screens: screens must be object");
+		}
+		
+		if(typeof screen?.alias == "undefined") {
+			return console.error("Screens: undefined alias");
+		}
+
+		if(typeof screen?.renderer != "function") {
+			return console.error("Screens: renderer must be function");
+		}
+
+		this.screens[screen.alias] = {
+			route: route,
+			...screen
+		};
+
+		this.routesMap[route] = screen.alias;
+	}
+
+	switch(alias) {		
+		this.showLoader();
+		this.currentScreen?.DOMObject.remove();
+		
+		if(typeof this.screens[alias] == "undefined") {
+			console.error(`Screens: "${alias}" not found`);
+			return ;
+		}
+
+		this.currentScreen = this.screens[alias];
+		
+		const screenContainer = document.createElement("div");
+		screenContainer.classList.add("screen");
+		screenContainer.id = alias;
+		screenContainer.dataset.alias = alias;
+		screenContainer.innerHTML = this.currentScreen.renderer();
+		this.currentScreen.DOMObject = screenContainer;
+		this.screensContainer.append(this.currentScreen.DOMObject);
+
+		this.currentScreen.initer(this);
+	}
+
+	routing() {
+		setInterval(() => {
+			const route = document.location.hash.split("#!")[1];
+			if(typeof route == "undefined" || route == "") {
+				return;
+			}
+			
+			const alias = (typeof this.routesMap[route] == "undefined") 
+				? "not-found-screen"
+				: this.routesMap[route];
+
+			if(!this.currentScreen || this.currentScreen.alias != alias) {
+				this.switch(alias);
+			}
+		}, 50);
+	}
+
+	ready() {
+		if(this.currentScreen == null) {
+			return;
+		}
+
+		if(!this.currentScreen.DOMObject) {
+			this.currentScreen.DOMObject = document.getElementsById(this.currentScreen.alias);
+		}
+
+		this.hideLoader();
+		this.currentScreen.DOMObject.classList.add("a-show");
+	}
+
+	error() {
+		this.currentScreen?.DOMObject.remove();
+		this.showErrorScreen();
+	}
+
+	hideLoader() {
+		this.loader.classList.remove("a-show");
+	}
+
+	showLoader() {
+		this.loader.classList.add("a-show");
+	}
+
+	showErrorScreen(text) {
+		this.errorScreen.classList.add("a-show");
+	}
+
+	hideErrorScreen(text) {
+		this.errorScreen.classList.remove("a-show");
+	}
+
+	getScreens() {
+		return this.screens;
+	}
+
+	getRoutesMap() {
+		return this.routesMap;
+	}
+}
\ No newline at end of file
diff --git a/webclient/src/js/components/hud.js b/webclient/src/js/components/hud.js
new file mode 100644
index 0000000..c4a98f4
--- /dev/null
+++ b/webclient/src/js/components/hud.js
@@ -0,0 +1,7 @@
+function hud() {
+	console.log("HUD init");
+}
+
+export {
+	hud
+}
\ No newline at end of file
diff --git a/webclient/src/js/index.js b/webclient/src/js/index.js
index c61d4ea..7442ae4 100644
--- a/webclient/src/js/index.js
+++ b/webclient/src/js/index.js
@@ -1,107 +1,34 @@
-import Toasts from "./components/toasts.js";
-import Modals from "./components/modals.js";
-
-window.demoToastInfo = function () {
-	Toasts.createInfo(
-		"Title",
-		"Произошла ошибка. Повтори позже."
-	).show();
-}
-
-window.demoToastSuccess = function () {
-	Toasts.createSuccess(
-		"Success",
-		"Всё отлично, всё работает, это успех тостера"
-	).show();
-}
-
-window.demoToastWarning = function () {
-	Toasts.createWarning(
-		"Warning",
-		"Произошла ошибка. Повтори позже."
-	).show();
-}
-
-window.demoToastDanger = function () {
-	Toasts.createDanger(
-		"Danger",
-		"Произошла ошибка. Повтори позже."
-	).show();
-}
-
-window.demoModal = function() {
-	Modals.create("demo-modals", {
-		title: "Demo modal window",
-		footer: "<p>Footer text</p>",
-		actions: modal => {
-			const buttonCancel = document.createElement("button");
-			buttonCancel.classList.add("btn");
-			buttonCancel.classList.add("btn-primary");
-			buttonCancel.innerHTML = "Cancel";
-
-			buttonCancel.addEventListener("click", e => {
-				modal.close();
-			});
-
-			const buttonApply = document.createElement("button");
-			buttonApply.classList.add("btn");
-			buttonApply.classList.add("btn-success");
-			buttonApply.innerHTML = "Apply";
-
-			buttonApply.addEventListener("click", e => {
-				modal.close();
-
-				setTimeout(() => {
-					Toasts.createSuccess(
-						"Success",
-						"Всё отлично, всё работает, это успех"
-					).show();
-				}, 300);
-			});
-
-			return [ buttonCancel, buttonApply ];
-		},
-		body: modal => {
-			return `
-				<p class="text">Любой контент: текст, формы, списки.</p>
-
-        <div class="form-group">
-          <label class="label" for="modal-device-name">
-            Device name
-            <input class="input" id="modal-device-name" type="text" placeholder="Kitchen Light">
-          </label>
-        </div>
-
-        <div class="form-group">
-          <label class="label" for="modal-device-desc">
-            Description
-            <textarea class="input" id="modal-device-desc" rows="3" placeholder="Optional"></textarea>
-          </label>
-        </div>
-			`;
-		}
-	}).show();
-}
-
-import { SmartHomeApi } from "./sh/SmartHomeApi.js";
-
-function shApiDebuging() {
-	const api = new SmartHomeApi({
-	  base_url: "http://shswebclient.local",
-	  token: "YOUR_TOKEN",
-	  timeout_ms: 3000,
-	  on_unauthorized: ({ error }) => console.log("auth problem:", error),
-	  proxy_path: "/proxy.php",
-	});
-
-	api.scripts.actions_list((err, data, meta) => console.log(data));
-	api.scripts.scopes_list((err, data, meta) => console.log(data));
-	api.devices.info(4, (err, data, meta) => console.log(data));
-}
-
+import { hud } from "./components/hud.js";
+import { Screens } from "./components/Screens.js";
 
 document.addEventListener("DOMContentLoaded", e => {
 	console.log("App init");
 
-	shApiDebuging();
+	hud();
+
+	const screens = new Screens(".screens", ".load-screen", ".error-screen");
+	screens.add("/", {
+		alias: "home",
+		renderer: () => {
+			return `<h2 class="mt-4">Hello world</h2>`;
+		},
+		initer: scr => {
+			setTimeout(() => scr.ready(), 1000);
+			setTimeout(() => scr.error(), 2000);
+		}
+	});
+
+	screens.add("-", {
+		alias: "not-found-screen",
+		renderer: () => {
+			return `<h2 class="mt-4">404 NOT FOUND</h2>`;
+		},
+		initer: scr => {
+			scr.ready();
+		}
+	});
+
+	console.log(screens.getScreens());
+
+	screens.routing();
 });
\ No newline at end of file
diff --git a/webclient/src/scss/_app.scss b/webclient/src/scss/_app.scss
new file mode 100644
index 0000000..079620f
--- /dev/null
+++ b/webclient/src/scss/_app.scss
@@ -0,0 +1,44 @@
+* {
+	padding: 0;
+	margin: 0;
+}
+
+html, body {
+  font-family: "IBM Plex Mono", monospace;
+  font-weight: 400;
+}
+
+body {
+	background-color: $color-black;
+	color: $color-text-light;
+
+	font-size: 15px;
+  line-height: 1.45;
+  letter-spacing: 0.01em;
+}
+
+.load-screen {
+	display: none;
+
+	&.a-show {
+		display: block;
+	}
+}
+
+.error-screen {
+	display: none;
+
+	&.a-show {
+		display: block;
+	}
+}
+
+.screen {
+	display: none;
+
+	&.a-show {
+		display: block;
+	}
+}
+
+@import "app/_hud.scss";
\ No newline at end of file
diff --git a/webclient/src/scss/_utils.scss b/webclient/src/scss/_utils.scss
index 3aaa32a..6af77ca 100644
--- a/webclient/src/scss/_utils.scss
+++ b/webclient/src/scss/_utils.scss
@@ -34,3 +34,8 @@
     padding-bottom: $value !important;
   }
 }
+
+.row {
+  display: flex;
+  flex-direction: row;
+} 
\ No newline at end of file
diff --git a/webclient/src/scss/app/_hud.scss b/webclient/src/scss/app/_hud.scss
new file mode 100644
index 0000000..2a42db9
--- /dev/null
+++ b/webclient/src/scss/app/_hud.scss
@@ -0,0 +1,28 @@
+.hud {
+	width: 100%;
+	padding: $space-5;
+
+	& > .row {
+		justify-content: space-between;
+    align-items: center;
+    gap: $space-4;
+    flex-wrap: wrap;
+	}
+
+	.nav-toggle {
+		font-size: 42px;
+		width: 50px;
+		height: 50px;
+		background: $color-text-light;
+		color: $color-black;
+
+		&:hover {
+			color: $color-accent;
+		}
+	}
+
+	.app-title {
+		padding: $space-2 $space-4;
+		text-transform: uppercase;
+	}
+}
\ No newline at end of file
diff --git a/webclient/src/scss/main.scss b/webclient/src/scss/main.scss
index ad5e74e..cbd2b6f 100644
--- a/webclient/src/scss/main.scss
+++ b/webclient/src/scss/main.scss
@@ -1,22 +1,5 @@
 @import "_fonts.scss";
 @import "_palette-colors.scss";
 @import "_ui.scss";
+@import "_app.scss";
 
-* {
-	padding: 0;
-	margin: 0;
-}
-
-html, body {
-  font-family: "IBM Plex Mono", monospace;
-  font-weight: 400;
-}
-
-body {
-	background-color: $color-black;
-	color: $color-text-light;
-
-	font-size: 15px;
-  line-height: 1.45;
-  letter-spacing: 0.01em;
-}
\ No newline at end of file
diff --git a/webclient/src/scss/ui_components/_buttons.scss b/webclient/src/scss/ui_components/_buttons.scss
index 111de59..f9939fd 100644
--- a/webclient/src/scss/ui_components/_buttons.scss
+++ b/webclient/src/scss/ui_components/_buttons.scss
@@ -204,12 +204,20 @@
 	border: 0;
 
 	transition-duration: .2s;
-	transition-property: transform, color;
+	transition-property: color;
 
-	transform: rotate(0);
+	
+	.ph {
+		transform: rotate(0);
+		transition-duration: .2s;
+		transition-property: transform;
+	}
 
 	&:hover {
-		transform: rotate(90deg);
 		color: $color-text-dark;
+
+		.ph {
+			transform: rotate(90deg);
+		}
 	}
 }