diff --git a/webclient/dist/css/main.css b/webclient/dist/css/main.css
index 77e5f83..3438db8 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}.ui_container{padding:34px}.ui_section{margin-bottom:48px}.ui_section_title{margin-bottom:22px}.ui_block{margin-bottom:22px}.ui_block_title{margin-bottom:15px}.ui_text,p{margin-bottom:15px}.ui_hint{margin-top:8px}.ui_list{padding-left:22px;margin-bottom:15px}.ui_list_item{margin-bottom:8px}.ui_list_nested{margin-top:8px}.ui_table{margin-bottom:22px}.ui_table_caption{margin-bottom:8px}.ui_form_group{margin-bottom:15px}.ui_label{margin-bottom:5px;display:block}.ui_input,.ui_select,.ui_textarea{margin-top:5px}.ui_modal_footer,.ui_modal_header{padding:15px 22px}.ui_modal_body{padding:22px}.ui_toast{padding:15px}.ui_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{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}.ui_text,p{font-size:16px;line-height:1.6}.ui_text_sm{font-size:13px;line-height:1.4}.ui_text_lg{font-size:17px;line-height:1.6}.ui_text_muted{font-size:13px}.ui_text_strong,strong{font-weight:600}.ui_text_bold{font-weight:700}.ui_text_italic,em{font-style:italic}.ui_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}.ui_link{font-size:inherit;font-weight:500}.ui_label{font-size:13px;font-weight:500;line-height:1.4}.ui_hint,.ui_meta{font-size:12px;line-height:1.4}.ui_table{font-size:13px;line-height:1.4}.ui_table th{font-weight:600}.ui_table td{font-weight:400}.ui_list{font-size:16px;line-height:1.6}.ui_list_item{font-size:inherit}.ui_modal_title{font-size:20px;font-weight:600}.ui_modal_body{font-size:16px}.ui_toast_title{font-size:14px;font-weight:600}.ui_toast_text{font-size:13px;line-height:1.4}.text_muted{color:#aaaeb2}.ui_palette{display:flex;flex-direction:row;gap:8px}.ui_palette .ui_color .ui_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}.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{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{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{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{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{color:#f8f8f8}.btn[disabled]{color:#aaaeb2;border-color:#1a1a23;background-color:#1a1a23}.btn[disabled].with_icon .ph{color:#aaaeb2}.btn[disabled]:hover{background-color:#1a1a23;color:#aaaeb2}.btn[disabled]:hover.with_icon .ph{color:#aaaeb2}.btn[disabled].with_icon .ph{left:-28px}.btn.btn_small{font-size:14px;font-weight:500;padding:8px 8px}.btn.btn_large{font-size:20px;font-weight:700;padding:15px 48px}.ui_form_group .ui_label{display:flex;flex-direction:column;font-size:17px;max-width:420px;position:relative}.ui_form_group .ui_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}.ui_form_group .ui_label .ui_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}.ui_form_group .ui_label .ui_input:hover{border-bottom-color:#aaaeb2}.ui_form_group .ui_label .ui_input:focus{outline:0;border-color:#00b3ff}.ui_form_group .ui_label .ui_input::-moz-placeholder{color:#aaaeb2}.ui_form_group .ui_label .ui_input::placeholder{color:#aaaeb2}.ui_form_group .ui_label textarea.ui_input{height:120px;line-height:1.25;resize:none}.ui_form_group .ui_label .ph+.ui_input,.ui_form_group .ui_label .ph+.ui_select_wrap .ui_select{padding-left:42px}.ui_form_group .ui_label .ui_select_wrap{margin-top:8px}.ui_form_group .ui_label .ui_select{width:100%;height:56px;margin-top:0;appearance:none;-webkit-appearance:none;-moz-appearance:none}.ui_form_group .ui_label .ui_select:focus{outline:0}.ui_form_group .ui_label .ui_select option{color:#f8f8f8;background:#1a1a23}.ui_form_group .ui_label .ui_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}.ui_radio{display:inline-flex;flex-direction:row;gap:8px;align-items:center}.ui_radio input[type=radio]{display:none}.ui_radio .ui_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}.ui_radio:hover .ui_radio_control{background:#4a4a57}.ui_radio input[type=radio]:checked+.ui_radio_control{background:#f8f8f8}.ui_radio input[type=radio]:disabled+.ui_radio_control{background:#4a4a57;border-color:#4a4a57}.ui_radio .ui_radio_label{font-size:17px}.ui_checkbox{display:inline-flex;flex-direction:row;gap:8px;align-items:center}.ui_checkbox input[type=checkbox]{display:none}.ui_checkbox .ui_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}.ui_checkbox .ui_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}.ui_checkbox:hover .ui_checkbox_control{background:#4a4a57}.ui_checkbox input[type=checkbox]:checked:not(:disabled)+.ui_checkbox_control{background:#00b3ff;border-color:#00b3ff}.ui_checkbox input[type=checkbox]:checked+.ui_checkbox_control:before{left:12px}.ui_checkbox input[type=checkbox]:disabled+.ui_checkbox_control{border-color:#4a4a57}.ui_checkbox input[type=checkbox]:disabled+.ui_checkbox_control:before{background:#4a4a57}.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: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}
 /*# sourceMappingURL=main.css.map */
diff --git a/webclient/dist/css/main.css.map b/webclient/dist/css/main.css.map
index e6bef85..e60b25e 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","_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   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/* alias для читаемости */\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 — для генерации утилит */\n$spaces: (\n  0: $space-0,\n  1: $space-1,\n  2: $space-2,\n  3: $space-3,\n  4: $space-4,\n  5: $space-5,\n  6: $space-6,\n  7: $space-7,\n  8: $space-8,\n  9: $space-9,\n  10: $space-10\n);\n\n/* =========================\n   BASE LAYOUT\n========================= */\n\n.ui_container {\n  padding: $space-xl;\n}\n\n.ui_section {\n  margin-bottom: $space-xxl;\n}\n\n.ui_section_title {\n  margin-bottom: $space-lg;\n}\n\n.ui_block {\n  margin-bottom: $space-lg;\n}\n\n.ui_block_title {\n  margin-bottom: $space-md;\n}\n\n/* =========================\n   TEXT & CONTENT\n========================= */\n\np,\n.ui_text {\n  margin-bottom: $space-md;\n}\n\n.ui_hint {\n  margin-top: $space-sm;\n}\n\n/* =========================\n   LISTS\n========================= */\n\n.ui_list {\n  padding-left: $space-lg;\n  margin-bottom: $space-md;\n}\n\n.ui_list_item {\n  margin-bottom: $space-sm;\n}\n\n.ui_list_nested {\n  margin-top: $space-sm;\n}\n\n/* =========================\n   TABLES\n========================= */\n\n.ui_table {\n  margin-bottom: $space-lg;\n}\n\n.ui_table_caption {\n  margin-bottom: $space-sm;\n}\n\n/* =========================\n   FORMS\n========================= */\n\n.ui_form_group {\n  margin-bottom: $space-md;\n}\n\n.ui_label {\n  margin-bottom: $space-xs;\n  display: block;\n}\n\n.ui_input,\n.ui_textarea,\n.ui_select {\n  margin-top: $space-xs;\n}\n\n/* =========================\n   MODALS\n========================= */\n\n.ui_modal_header,\n.ui_modal_footer {\n  padding: $space-md $space-lg;\n}\n\n.ui_modal_body {\n  padding: $space-lg;\n}\n\n/* =========================\n   TOASTS\n========================= */\n\n.ui_toast {\n  padding: $space-md;\n}\n\n.ui_toast_stack {\n  gap: $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   SPACING SCALE\n========================= */\n/* alias для читаемости */\n/* map — для генерации утилит */\n/* =========================\n   BASE LAYOUT\n========================= */\n.ui_container {\n  padding: 34px;\n}\n\n.ui_section {\n  margin-bottom: 48px;\n}\n\n.ui_section_title {\n  margin-bottom: 22px;\n}\n\n.ui_block {\n  margin-bottom: 22px;\n}\n\n.ui_block_title {\n  margin-bottom: 15px;\n}\n\n/* =========================\n   TEXT & CONTENT\n========================= */\np,\n.ui_text {\n  margin-bottom: 15px;\n}\n\n.ui_hint {\n  margin-top: 8px;\n}\n\n/* =========================\n   LISTS\n========================= */\n.ui_list {\n  padding-left: 22px;\n  margin-bottom: 15px;\n}\n\n.ui_list_item {\n  margin-bottom: 8px;\n}\n\n.ui_list_nested {\n  margin-top: 8px;\n}\n\n/* =========================\n   TABLES\n========================= */\n.ui_table {\n  margin-bottom: 22px;\n}\n\n.ui_table_caption {\n  margin-bottom: 8px;\n}\n\n/* =========================\n   FORMS\n========================= */\n.ui_form_group {\n  margin-bottom: 15px;\n}\n\n.ui_label {\n  margin-bottom: 5px;\n  display: block;\n}\n\n.ui_input,\n.ui_textarea,\n.ui_select {\n  margin-top: 5px;\n}\n\n/* =========================\n   MODALS\n========================= */\n.ui_modal_header,\n.ui_modal_footer {\n  padding: 15px 22px;\n}\n\n.ui_modal_body {\n  padding: 22px;\n}\n\n/* =========================\n   TOASTS\n========================= */\n.ui_toast {\n  padding: 15px;\n}\n\n.ui_toast_stack {\n  gap: 8px;\n}\n\n/* =========================\n   FONT FAMILIES\n========================= */\n/* =========================\n   FONT WEIGHTS\n========================= */\n/* =========================\n   FONT SIZES (scale)\n========================= */\n/* =========================\n   LINE HEIGHTS\n========================= */\n/* =========================\n   LETTER SPACING\n========================= */\n/* =========================\n   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   HEADINGS\n========================= */\nh1, h2, h3, h4, h5, h6 {\n  font-family: \"IBM Plex Mono\", monospace;\n  font-weight: 600;\n  line-height: 1.25;\n  margin: 0;\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   TEXT VARIANTS\n========================= */\n.ui_text,\np {\n  font-size: 16px;\n  line-height: 1.6;\n}\n\n.ui_text_sm {\n  font-size: 13px;\n  line-height: 1.4;\n}\n\n.ui_text_lg {\n  font-size: 17px;\n  line-height: 1.6;\n}\n\n.ui_text_muted {\n  font-size: 13px;\n}\n\n.ui_text_strong,\nstrong {\n  font-weight: 600;\n}\n\n.ui_text_bold {\n  font-weight: 700;\n}\n\n.ui_text_italic,\nem {\n  font-style: italic;\n}\n\n/* =========================\n   CODE / MONO\n========================= */\ncode,\npre,\n.ui_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   LINKS\n========================= */\na {\n  font-weight: 500;\n  text-decoration: none;\n}\n\n.ui_link {\n  font-size: inherit;\n  font-weight: 500;\n}\n\n/* =========================\n   LABELS / META\n========================= */\n.ui_label {\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1.4;\n}\n\n.ui_hint,\n.ui_meta {\n  font-size: 12px;\n  line-height: 1.4;\n}\n\n/* =========================\n   TABLE TEXT\n========================= */\n.ui_table {\n  font-size: 13px;\n  line-height: 1.4;\n}\n\n.ui_table th {\n  font-weight: 600;\n}\n\n.ui_table td {\n  font-weight: 400;\n}\n\n/* =========================\n   LISTS\n========================= */\n.ui_list {\n  font-size: 16px;\n  line-height: 1.6;\n}\n\n.ui_list_item {\n  font-size: inherit;\n}\n\n/* =========================\n   MODALS\n========================= */\n.ui_modal_title {\n  font-size: 20px;\n  font-weight: 600;\n}\n\n.ui_modal_body {\n  font-size: 16px;\n}\n\n/* =========================\n   TOASTS\n========================= */\n.ui_toast_title {\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.ui_toast_text {\n  font-size: 13px;\n  line-height: 1.4;\n}\n\n.text_muted {\n  color: #AAAEB2;\n}\n\n.ui_palette {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n}\n.ui_palette .ui_color .ui_color_box {\n  width: 100px;\n  height: 80px;\n}\n\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.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  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  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  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  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  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  color: #AAAEB2;\n}\n.btn[disabled]:hover {\n  background-color: #1A1A23;\n  color: #AAAEB2;\n}\n.btn[disabled]:hover.with_icon .ph {\n  color: #AAAEB2;\n}\n.btn[disabled].with_icon .ph {\n  left: -28px;\n}\n.btn.btn_small {\n  font-size: 14px;\n  font-weight: 500;\n  padding: 8px 8px;\n}\n.btn.btn_large {\n  font-size: 20px;\n  font-weight: 700;\n  padding: 15px 48px;\n}\n\n.ui_form_group .ui_label {\n  display: flex;\n  flex-direction: column;\n  font-size: 17px;\n  max-width: 420px;\n  position: relative;\n}\n.ui_form_group .ui_label .ph {\n  position: absolute;\n  color: #F8F8F8;\n  left: 0px;\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.ui_form_group .ui_label .ui_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.ui_form_group .ui_label .ui_input:hover {\n  border-bottom-color: #AAAEB2;\n}\n.ui_form_group .ui_label .ui_input:focus {\n  outline: none;\n  border-color: #00B3FF;\n}\n.ui_form_group .ui_label .ui_input::placeholder {\n  color: #AAAEB2;\n}\n.ui_form_group .ui_label textarea.ui_input {\n  height: 120px;\n  line-height: 1.25;\n  resize: none;\n}\n.ui_form_group .ui_label .ph + .ui_input,\n.ui_form_group .ui_label .ph + .ui_select_wrap .ui_select {\n  padding-left: 42px;\n}\n.ui_form_group .ui_label .ui_select_wrap {\n  margin-top: 8px;\n}\n.ui_form_group .ui_label .ui_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.ui_form_group .ui_label .ui_select:focus {\n  outline: none;\n}\n.ui_form_group .ui_label .ui_select option {\n  color: #F8F8F8;\n  background: #1A1A23;\n}\n.ui_form_group .ui_label .ui_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; /* чтобы клики шли в select */\n}\n\n.ui_radio {\n  display: inline-flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n}\n.ui_radio input[type=radio] {\n  display: none;\n}\n.ui_radio .ui_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.ui_radio:hover .ui_radio_control {\n  background: #4A4A57;\n}\n.ui_radio input[type=radio]:checked + .ui_radio_control {\n  background: #F8F8F8;\n}\n.ui_radio input[type=radio]:disabled + .ui_radio_control {\n  background: #4A4A57;\n  border-color: #4A4A57;\n}\n.ui_radio .ui_radio_label {\n  font-size: 17px;\n}\n\n.ui_checkbox {\n  display: inline-flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n}\n.ui_checkbox input[type=checkbox] {\n  display: none;\n}\n.ui_checkbox .ui_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.ui_checkbox .ui_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.ui_checkbox:hover .ui_checkbox_control {\n  background: #4A4A57;\n}\n.ui_checkbox input[type=checkbox]:checked:not(:disabled) + .ui_checkbox_control {\n  background: #00B3FF;\n  border-color: #00B3FF;\n}\n.ui_checkbox input[type=checkbox]:checked + .ui_checkbox_control:before {\n  left: 12px;\n}\n.ui_checkbox input[type=checkbox]:disabled + .ui_checkbox_control {\n  border-color: #4A4A57;\n}\n.ui_checkbox input[type=checkbox]:disabled + .ui_checkbox_control:before {\n  background: #4A4A57;\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   FONT FAMILIES\n========================= */\n\n$font_family_base: \"IBM Plex Mono\", monospace;\n$font_family_code: $font_family_base;\n\n/* =========================\n   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   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   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   LETTER SPACING\n========================= */\n\n$letter_spacing_tight: -0.01em;\n$letter_spacing_normal: 0;\n$letter_spacing_wide: 0.04em;\n\n/* =========================\n   BASE TYPOGRAPHY\n========================= */\n\nhtml {\n  font-size: 100%;\n}\n\nbody {\n  font-family: $font_family_base;\n  font-size: $font_size_base;\n  font-weight: $font_weight_regular;\n  line-height: $line_height_relaxed;\n  letter-spacing: $letter_spacing_normal;\n}\n\n/* =========================\n   HEADINGS\n========================= */\n\nh1, h2, h3, h4, h5, h6 {\n  font-family: $font_family_base;\n  font-weight: $font_weight_semibold;\n  line-height: $line_height_snug;\n  margin: 0;\n}\n\nh1 {\n  font-size: $font_size_h1;\n  letter-spacing: $letter_spacing_tight;\n}\n\nh2 {\n  font-size: $font_size_h2;\n}\n\nh3 {\n  font-size: $font_size_h3;\n}\n\nh4 {\n  font-size: $font_size_h4;\n}\n\nh5 {\n  font-size: $font_size_h5;\n}\n\nh6 {\n  font-size: $font_size_h6;\n  font-weight: $font_weight_medium;\n}\n\n/* =========================\n   TEXT VARIANTS\n========================= */\n\n.ui_text,\np {\n  font-size: $font_size_base;\n  line-height: $line_height_relaxed;\n}\n\n.ui_text_sm {\n  font-size: $font_size_sm;\n  line-height: $line_height_normal;\n}\n\n.ui_text_lg {\n  font-size: $font_size_lg;\n  line-height: $line_height_relaxed;\n}\n\n.ui_text_muted {\n  font-size: $font_size_sm;\n}\n\n.ui_text_strong,\nstrong {\n  font-weight: $font_weight_semibold;\n}\n\n.ui_text_bold {\n  font-weight: $font_weight_bold;\n}\n\n.ui_text_italic,\nem {\n  font-style: italic;\n}\n\n/* =========================\n   CODE / MONO\n========================= */\n\ncode,\npre,\n.ui_code {\n  font-family: $font_family_code;\n  font-size: $font_size_base;\n  line-height: $line_height_normal;\n  background-color: $color-dark;\n}\n\npre {\n  font-size: $font_size_base;\n  line-height: $line_height_relaxed;\n  white-space: pre-wrap;\n}\n\n/* =========================\n   LINKS\n========================= */\n\na {\n  font-weight: $font_weight_medium;\n  text-decoration: none;\n}\n\n.ui_link {\n  font-size: inherit;\n  font-weight: $font_weight_medium;\n}\n\n/* =========================\n   LABELS / META\n========================= */\n\n.ui_label {\n  font-size: $font_size_sm;\n  font-weight: $font_weight_medium;\n  line-height: $line_height_normal;\n}\n\n.ui_hint,\n.ui_meta {\n  font-size: $font_size_xs;\n  line-height: $line_height_normal;\n}\n\n/* =========================\n   TABLE TEXT\n========================= */\n\n.ui_table {\n  font-size: $font_size_sm;\n  line-height: $line_height_normal;\n}\n\n.ui_table th {\n  font-weight: $font_weight_semibold;\n}\n\n.ui_table td {\n  font-weight: $font_weight_regular;\n}\n\n/* =========================\n   LISTS\n========================= */\n\n.ui_list {\n  font-size: $font_size_base;\n  line-height: $line_height_relaxed;\n}\n\n.ui_list_item {\n  font-size: inherit;\n}\n\n/* =========================\n   MODALS\n========================= */\n\n.ui_modal_title {\n  font-size: $font_size_h4;\n  font-weight: $font_weight_semibold;\n}\n\n.ui_modal_body {\n  font-size: $font_size_base;\n}\n\n/* =========================\n   TOASTS\n========================= */\n\n.ui_toast_title {\n  font-size: $font_size_md;\n  font-weight: $font_weight_semibold;\n}\n\n.ui_toast_text {\n  font-size: $font_size_sm;\n  line-height: $line_height_normal;\n}\n\n.text_muted {\n  color: $color-text-dark;\n}",".ui_palette {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: $space-sm;\n\n\t.ui_color {\n\t\t.ui_color_box {\n\t\t\twidth: 100px;\n\t\t\theight: 80px;\n\t\t}\n\t}\n}\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}",".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\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\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\t\t\t\n\t\t\t&.with_icon {\n\t\t\t\t.ph {\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\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\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\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\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\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\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",".ui_form_group {\n\t.ui_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: -0px;\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.ui_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.ui_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 + .ui_input,\n\t\t.ph + .ui_select_wrap .ui_select {\n\t\t\tpadding-left: 42px;\n\t\t}\n\n\t\t.ui_select_wrap {\n\t\t\tmargin-top: $space-sm;\n\t\t}\n\n\t\t.ui_select {\n\t\t  width: 100%;\n\t\t  height: 56px;\n\t\t  margin-top: 0;\n\n\t\t  /* убрать нативную стрелку */\n\t\t  appearance: none;\n\t\t  -webkit-appearance: none;\n\t\t  -moz-appearance: none;\n\n\t\t  &:focus {\n\t\t    outline: none;\n\t\t  }\n\n\t\t  option {\n\t\t  \tcolor: $color-text-light;\n\t\t  \tbackground: $color-dark;\n\t\t  }\n\t\t}\n\n\t\t.ui_select_wrap::after {\n\t\t  content: \"\";\n\t\t  position: absolute;\n\t\t  right: $space-lg;\n\t\t  bottom: 18px;\n\t\t  transform: translateY(-50%);\n\n\t\t  width: 0;\n\t\t  height: 0;\n\t\t  border-left: 8px solid transparent;\n\t\t  border-right: 8px solid transparent;\n\t\t  border-top: 10px solid $color-text-light;\n\n\t\t  pointer-events: none; /* чтобы клики шли в select */\n\t\t}\n\t}\n}\n\n.ui_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.ui_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 .ui_radio_control{\n\t\tbackground: $color-grey;\n\t}\n\n\tinput[type=\"radio\"]:checked + .ui_radio_control {\n\t\tbackground: $color-primary;\n\t}\n\n\tinput[type=\"radio\"]:disabled + .ui_radio_control{\n\t\tbackground: $color-grey;\n\t\tborder-color: $color-grey;\n\t}\n\n\t.ui_radio_label {\n\t\tfont-size: $font_size_lg;\n\t}\n}\n\n.ui_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.ui_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.ui_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 .ui_checkbox_control{\n\t\tbackground: $color-grey;\n\t}\n\n\tinput[type=\"checkbox\"]:checked:not(:disabled) + .ui_checkbox_control {\n\t\tbackground: $color-secondary;\n\t\tborder-color: $color-secondary;\n\t}\n\n\tinput[type=\"checkbox\"]:checked + .ui_checkbox_control:before {\n\t\tleft: 12px;\n\t}\n\n\tinput[type=\"checkbox\"]:disabled + .ui_checkbox_control {\n\t\tborder-color: $color-grey;\n\t}\n\n\tinput[type=\"checkbox\"]:disabled + .ui_checkbox_control:before {\n\t\tbackground: $color-grey;\n\t}\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","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
diff --git a/webclient/dist/js/main.js b/webclient/dist/js/main.js
index 6efee94..3d66216 100644
--- a/webclient/dist/js/main.js
+++ b/webclient/dist/js/main.js
@@ -1,2 +1,40 @@
-(()=>{console.log("App init");})();
+(()=>{function h(e,t,o,n){return`
+		<div class="toast toast-${e}" role="alert">
+	    <div class="toast-content">
+	      <h4 class="toast-title">${t} ${o}</h4>
+	      <p class="toast-text">${n}</p>
+	    </div>
+	    <button class="btn-icon toast-close" type="button" aria-label="Close">\u2715</button>
+	  </div>
+	`}function b(e){return e.close=function(){this.classList.add("a-hide"),setTimeout(()=>{this.remove()},300)},e.querySelector(".toast-close").addEventListener("click",t=>{e.close()}),e.show=function(){document.querySelector("body").append(e),setTimeout(()=>{e.classList.add("a-show")},10)},e}function l(e,t,o,n){let s=document.createElement("div");return s.innerHTML=h(e,t,o,n),b(s.childNodes[1])}function v(e,t){return l("success",'<i class="ph ph-check-circle"></i>',e,t)}function y(e,t){return l("info",'<i class="ph ph-info"></i>',e,t)}function w(e,t){return l("warning",'<i class="ph ph-warning"></i>',e,t)}function u(e,t){return l("danger",'<i class="ph ph-warning-octagon"></i>',e,t)}var a={create:l,createInfo:y,createSuccess:v,createWarning:w,createError:u,createDanger:u};function L(e,t,o){return`
+		<div class="modal" aria-hidden="true" id="${e}">
+      <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">${t}</h4>
+          <button class="btn-icon modal-close" type="button" aria-label="Close">\u2715</button>
+        </header>
+
+        <div class="modal-body"></div>
+        <footer class="modal-footer">${o}</footer>
+      </div>
+    </div>
+	`}function g(e){return e.show=function(){document.querySelector("body").append(e),setTimeout(()=>{this.classList.add("a-show")},10)},e.close=function(){this.classList.add("a-hide"),setTimeout(()=>{this.remove()},300)},e.querySelector(".modal-close").addEventListener("click",t=>{e.close()}),e}function T(e,t){let o=t.title||"",n=t.footer||"",s=document.createElement("div");s.innerHTML=L(e,o,n);let i=s.childNodes[1],r=i.querySelector(".modal-body"),f=i.querySelector(".modal-footer");if(typeof t.actions=="function"){let c=t.actions(i);if(typeof c[0]=="object"){let d=document.createElement("div");d.classList.add("actions");for(let p of c)d.append(p);f.append(d)}}if(typeof t.body=="function"){let c=t.body(i);typeof c=="object"?r.append(c):typeof c=="string"&&(r.innerHTML=c)}return g(i)}var m={create:T};window.demoToastInfo=function(){a.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(){a.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(){a.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(){a.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(){m.create("demo-modals",{title:"Demo modal window",footer:"<p>Footer text</p>",actions:e=>{let t=document.createElement("button");t.classList.add("btn"),t.classList.add("btn-primary"),t.innerHTML="Cancel",t.addEventListener("click",n=>{e.close()});let o=document.createElement("button");return o.classList.add("btn"),o.classList.add("btn-success"),o.innerHTML="Apply",o.addEventListener("click",n=>{e.close(),setTimeout(()=>{a.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)}),[t,o]},body:e=>`
+				<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()};document.addEventListener("DOMContentLoaded",e=>{console.log("App init")});})();
 //# sourceMappingURL=main.js.map
diff --git a/webclient/dist/js/main.js.map b/webclient/dist/js/main.js.map
index 03bbd89..3929b0f 100644
--- a/webclient/dist/js/main.js.map
+++ b/webclient/dist/js/main.js.map
@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/js/index.js"],
-  "sourcesContent": ["console.log(\"App init\");"],
-  "mappings": "MAAA,QAAQ,IAAI,UAAU",
-  "names": []
+  "sources": ["../../src/js/components/toasts.js", "../../src/js/components/modals.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}", "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\ndocument.addEventListener(\"DOMContentLoaded\", e => {\n\tconsole.log(\"App init\");\n});"],
+  "mappings": "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",
+  "names": ["template", "type", "icon", "title", "text", "init", "toast", "e", "create", "div", "createSuccess", "createInfo", "createWarning", "createError", "toasts_default", "template", "id", "title", "footer", "init", "modal", "e", "create", "props", "div", "modalBody", "modalFooter", "actionsResult", "actions", "actionElement", "bodyResult", "modals_default", "toasts_default", "modals_default", "modal", "buttonCancel", "e", "buttonApply"]
 }
diff --git a/webclient/src/js/components/modals.js b/webclient/src/js/components/modals.js
new file mode 100644
index 0000000..c0b0193
--- /dev/null
+++ b/webclient/src/js/components/modals.js
@@ -0,0 +1,89 @@
+function template(id, title, footer) {
+	return `
+		<div class="modal" aria-hidden="true" id="${id}">
+      <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">${title}</h4>
+          <button class="btn-icon modal-close" type="button" aria-label="Close">✕</button>
+        </header>
+
+        <div class="modal-body"></div>
+        <footer class="modal-footer">${footer}</footer>
+      </div>
+    </div>
+	`;
+}
+
+function init(modal) {
+	modal.show = function() {
+		document.querySelector("body").append(modal);
+
+		setTimeout(() => {
+			this.classList.add("a-show");
+		}, 10);
+	}
+
+	modal.close = function() {
+		this.classList.add("a-hide");
+		setTimeout(() => {
+			this.remove();
+		}, 300);
+	}
+
+	modal.querySelector(".modal-close").addEventListener("click", e => {
+		modal.close();
+	});
+
+	return modal;
+}
+
+	/**
+	 * Create new modal window;
+	 * @param  {string} id    Uniq id (selector)
+	 * @param  {string} title Display title
+	 * @param  {object} props { body: modal => {}, actions => modal => {} }
+	 * @return {object}       DOM object
+	 */
+function create(id, props) {
+	const title = props.title || "";
+	const footer = props.footer || "";
+
+	const div = document.createElement("div");
+	div.innerHTML = template(id, title, footer);
+	const modal = div.childNodes[1];
+
+	const modalBody = modal.querySelector(".modal-body");
+	const modalFooter = modal.querySelector(".modal-footer");
+
+	if(typeof props.actions == "function") {
+		const actionsResult = props.actions(modal);
+
+		if(typeof actionsResult[0] == "object") {
+			const actions = document.createElement("div");
+			actions.classList.add("actions");
+			for(let actionElement of actionsResult) {
+				actions.append(actionElement);
+			}
+
+			modalFooter.append(actions);
+		}
+	}
+
+	if(typeof props.body == "function") {
+		const bodyResult = props.body(modal);
+
+		if(typeof bodyResult == "object") {
+			modalBody.append(bodyResult);
+		} else if(typeof bodyResult == "string") {
+			modalBody.innerHTML = bodyResult;
+		}
+	}
+
+	return init(modal);
+}
+
+export default {
+	create
+}
\ No newline at end of file
diff --git a/webclient/src/js/components/toasts.js b/webclient/src/js/components/toasts.js
new file mode 100644
index 0000000..8ad3d16
--- /dev/null
+++ b/webclient/src/js/components/toasts.js
@@ -0,0 +1,86 @@
+function template(type, icon, title, text) {
+	return `
+		<div class="toast toast-${type}" role="alert">
+	    <div class="toast-content">
+	      <h4 class="toast-title">${icon} ${title}</h4>
+	      <p class="toast-text">${text}</p>
+	    </div>
+	    <button class="btn-icon toast-close" type="button" aria-label="Close">✕</button>
+	  </div>
+	`;
+}
+
+function init(toast) {
+	toast.close = function() {
+		this.classList.add("a-hide");
+		setTimeout(() => {
+			this.remove();
+		}, 300);
+	}
+
+	toast.querySelector(".toast-close").addEventListener("click", e => {
+		toast.close();
+	});
+
+	toast.show = function() {
+		document.querySelector("body").append(toast);
+
+		setTimeout(() => {
+			toast.classList.add("a-show");
+		}, 10);
+	}
+
+	return toast;
+}
+
+function create(type, icon, title, text) {
+	const div = document.createElement("div");
+	div.innerHTML = template(type, icon, title, text);
+
+	return init(div.childNodes[1]);
+}
+
+function createSuccess(title, text) {
+	return create(
+		"success", 
+		`<i class="ph ph-check-circle"></i>`, 
+		title, 
+		text
+	);
+}
+
+function createInfo(title, text) {
+	return create(
+		"info", 
+		`<i class="ph ph-info"></i>`, 
+		title, 
+		text
+	);
+}
+
+function createWarning(title, text) {
+	return create(
+		"warning", 
+		`<i class="ph ph-warning"></i>`, 
+		title, 
+		text
+	);
+}
+
+function createError(title, text) {
+	return create(
+		"danger", 
+		`<i class="ph ph-warning-octagon"></i>`, 
+		title, 
+		text
+	);
+}
+
+export default {
+  create,
+  createInfo,
+  createSuccess,
+  createWarning,
+  createError,
+  "createDanger": createError
+};
\ No newline at end of file
diff --git a/webclient/src/js/index.js b/webclient/src/js/index.js
index 705ebe9..57a4d9a 100644
--- a/webclient/src/js/index.js
+++ b/webclient/src/js/index.js
@@ -1 +1,88 @@
-console.log("App init");
\ No newline at end of file
+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();
+}
+
+document.addEventListener("DOMContentLoaded", e => {
+	console.log("App init");
+});
\ No newline at end of file
diff --git a/webclient/src/scss/_spacing.scss b/webclient/src/scss/_spacing.scss
index 49bcfef..14f267a 100644
--- a/webclient/src/scss/_spacing.scss
+++ b/webclient/src/scss/_spacing.scss
@@ -1,5 +1,5 @@
 /* =========================
-   SPACING SCALE
+	 SPACING SCALE
 ========================= */
 
 $space-0: 0;
@@ -16,7 +16,7 @@
 $space-11: 64px;
 $space-12: 80px;
 
-/* alias для читаемости */
+/* aliases for readability */
 $space-xs: $space-1;
 $space-sm: $space-2;
 $space-md: $space-4;
@@ -24,127 +24,114 @@
 $space-xl: $space-8;
 $space-xxl: $space-10;
 
-/* map — для генерации утилит */
+/* map — for utilities generation */
 $spaces: (
-  0: $space-0,
-  1: $space-1,
-  2: $space-2,
-  3: $space-3,
-  4: $space-4,
-  5: $space-5,
-  6: $space-6,
-  7: $space-7,
-  8: $space-8,
-  9: $space-9,
-  10: $space-10
+	0: $space-0,
+	1: $space-1,
+	2: $space-2,
+	3: $space-3,
+	4: $space-4,
+	5: $space-5,
+	6: $space-6,
+	7: $space-7,
+	8: $space-8,
+	9: $space-9,
+	10: $space-10
 );
 
 /* =========================
-   BASE LAYOUT
+	 BASE LAYOUT
 ========================= */
 
-.ui_container {
-  padding: $space-xl;
+.container {
+	padding: $space-xl;
 }
 
-.ui_section {
-  margin-bottom: $space-xxl;
+.section {
+	margin-bottom: $space-xxl;
 }
 
-.ui_section_title {
-  margin-bottom: $space-lg;
+.section-title {
+	margin-bottom: $space-xl;
 }
 
-.ui_block {
-  margin-bottom: $space-lg;
+.block {
+	margin-bottom: $space-xl;
 }
 
-.ui_block_title {
-  margin-bottom: $space-md;
+.block-title {
+	margin-bottom: $space-lg;
 }
 
 /* =========================
-   TEXT & CONTENT
+	 TEXT & CONTENT
 ========================= */
 
 p,
-.ui_text {
-  margin-bottom: $space-md;
+.text {
+	margin-bottom: $space-md;
 }
 
-.ui_hint {
-  margin-top: $space-sm;
+.hint {
+	margin-top: $space-sm;
 }
 
 /* =========================
-   LISTS
+	 LISTS
 ========================= */
 
-.ui_list {
-  padding-left: $space-lg;
-  margin-bottom: $space-md;
+.list {
+	padding-left: $space-lg;
+	margin-bottom: $space-md;
 }
 
-.ui_list_item {
-  margin-bottom: $space-sm;
+.list-item {
+	margin-bottom: $space-sm;
 }
 
-.ui_list_nested {
-  margin-top: $space-sm;
+.list-nested {
+	margin-top: $space-sm;
 }
 
 /* =========================
-   TABLES
+	 TABLES
 ========================= */
 
-.ui_table {
-  margin-bottom: $space-lg;
+.table {
+	margin-bottom: $space-lg;
 }
 
-.ui_table_caption {
-  margin-bottom: $space-sm;
+.table-caption {
+	margin-bottom: $space-sm;
 }
 
 /* =========================
-   FORMS
+	 FORMS
 ========================= */
 
-.ui_form_group {
-  margin-bottom: $space-md;
+.form-group {
+	margin-bottom: $space-md;
 }
 
-.ui_label {
-  margin-bottom: $space-xs;
-  display: block;
+.label {
+	margin-bottom: $space-xs;
+	display: block;
 }
 
-.ui_input,
-.ui_textarea,
-.ui_select {
-  margin-top: $space-xs;
+.input,
+.textarea,
+.select {
+	margin-top: $space-xs;
 }
 
 /* =========================
-   MODALS
+	 TOASTS
 ========================= */
 
-.ui_modal_header,
-.ui_modal_footer {
-  padding: $space-md $space-lg;
+.toast {
+	padding: $space-md;
 }
 
-.ui_modal_body {
-  padding: $space-lg;
-}
-
-/* =========================
-   TOASTS
-========================= */
-
-.ui_toast {
-  padding: $space-md;
-}
-
-.ui_toast_stack {
-  gap: $space-sm;
+.toast-stack {
+	gap: $space-sm;
 }
diff --git a/webclient/src/scss/ui_components/_badges.scss b/webclient/src/scss/ui_components/_badges.scss
index e69de29..2e80012 100644
--- a/webclient/src/scss/ui_components/_badges.scss
+++ b/webclient/src/scss/ui_components/_badges.scss
@@ -0,0 +1,29 @@
+.badge {
+	background: $color-primary;
+	color: $color-dark;
+	padding: $space-1 $space-2;
+	font-size: $font-size-base;
+
+	&.badge-success {
+		background: $color-success;
+	}
+
+	&.badge-warning {
+		background: $color-warning;
+	}
+
+	&.badge-error,
+	&.badge-danger {
+		background: $color-error;
+	}
+
+	&.badge-info {
+		background: $color-info;
+		color: $color-text-light;
+	}
+
+	&.badge-secondary {
+		background: $color-secondary;
+		color: $color-text-light;
+	}
+}
diff --git a/webclient/src/scss/ui_components/_buttons.scss b/webclient/src/scss/ui_components/_buttons.scss
index 4407752..111de59 100644
--- a/webclient/src/scss/ui_components/_buttons.scss
+++ b/webclient/src/scss/ui_components/_buttons.scss
@@ -1,9 +1,9 @@
 .btn {
-	font-family: $font_family_base;
-	font-size: $font_size_lg;
-	font-weight: $font_weight_semibold;
-	line-height: $line_height_base;
-	letter-spacing: $letter_spacing_wide;
+	font-family: $font-family-base;
+	font-size: $font-size-lg;
+	font-weight: $font-weight-semibold;
+	line-height: $line-height-base;
+	letter-spacing: $letter-spacing-wide;
 	padding: $space-3 $space-lg;
 	border-radius: 0;
 	border-width: 2px;
@@ -15,11 +15,12 @@
 	transition-duration: .2s;
 	transition-property: background-color, border-color, color;
 
-	&.with_icon {
+	&.with-icon {
 		border-left-width: 48px;
 		position: relative;
 
-		.ph {
+		.ph,
+		.ph-bold {
 			position: absolute;
 			color: #0a0a0d;
 			left: -48px;
@@ -36,14 +37,15 @@
 	}
 
 	&:hover {
-		&.with_icon {
-			.ph {
+		&.with-icon {
+			.ph,
+			.ph-bold {
 				left: -28px;
 			}
 		}
 	}
 
-	&.btn_primary {
+	&.btn-primary {
 		color: $color-primary;
 		border-color: $color-primary;
 
@@ -53,23 +55,24 @@
 		}
 	}
 
-	&.btn_secondary {
+	&.btn-secondary {
 		color: $color-secondary;
 		border-color: $color-secondary;
 
 		&:hover {
 			background-color: $color-secondary;
 			color: $color-text-light;
-			
-			&.with_icon {
-				.ph {
+
+			&.with-icon {
+				.ph,
+				.ph-bold {
 					color: $color-text-light;
 				}
 			}
 		}
 	}
 
-	&.btn_accent {
+	&.btn-accent {
 		color: $color-accent;
 		border-color: $color-accent;
 
@@ -77,15 +80,16 @@
 			background-color: $color-accent;
 			color: $color-text-light;
 
-			&.with_icon {
-				.ph {
+			&.with-icon {
+				.ph,
+				.ph-bold {
 					color: $color-text-light;
 				}
 			}
 		}
 	}
 
-	&.btn_danger {
+	&.btn-danger {
 		color: $color-error;
 		border-color: $color-error;
 
@@ -95,7 +99,7 @@
 		}
 	}
 
-	&.btn_warning {
+	&.btn-warning {
 		color: $color-warning;
 		border-color: $color-warning;
 
@@ -105,7 +109,7 @@
 		}
 	}
 
-	&.btn_success {
+	&.btn-success {
 		color: $color-success;
 		border-color: $color-success;
 
@@ -115,7 +119,7 @@
 		}
 	}
 
-	&.btn_info {
+	&.btn-info {
 		color: $color-info;
 		border-color: $color-info;
 
@@ -123,8 +127,9 @@
 			background-color: $color-info;
 			color: $color-text-light;
 
-			&.with_icon {
-				.ph {
+			&.with-icon {
+				.ph,
+				.ph-bold {
 					color: $color-text-light;
 				}
 			}
@@ -136,8 +141,9 @@
 		border-color: $color-dark;
 		background-color: $color-dark;
 
-		&.with_icon {
-			.ph {
+		&.with-icon {
+			.ph,
+			.ph-bold {
 				color: $color-text-dark;
 			}
 		}
@@ -146,30 +152,64 @@
 			background-color: $color-dark;
 			color: $color-text-dark;
 
-			&.with_icon {
-				.ph {
+			&.with-icon {
+				.ph,
+				.ph-bold {
 					color: $color-text-dark;
 				}
 			}
 		}
 
-		&.with_icon {
-			.ph {
+		&.with-icon {
+			.ph,
+			.ph-bold {
 				left: -28px;
 			}
 		}
 	}
 
-	&.btn_small {
-		font-size: $font_size_md;
-		font-weight: $font_weight_medium;
+	&.btn-small {
+		font-size: $font-size-md;
+		font-weight: $font-weight-medium;
 		padding: $space-sm $space-sm;
+
+		&.with-icon {
+			border-left-width: 32px;
+
+			.ph,
+			.ph-bold {
+				left: -40px;
+				font-size: 22px;
+			}
+		}
 	}
 
-	&.btn_large {
-		font-size: $font_size_xl;
-		font-weight: $font_weight_bold;
+	&.btn-large {
+		font-size: $font-size-xl;
+		font-weight: $font-weight-bold;
 		padding: $space-md $space-xxl;
 	}
 }
 
+.btn-icon {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 30px;
+	height: 30px;
+
+	background: transparent;
+	color: $color-text-light;
+	font-size: $font-size-xl;
+	border: 0;
+
+	transition-duration: .2s;
+	transition-property: transform, color;
+
+	transform: rotate(0);
+
+	&:hover {
+		transform: rotate(90deg);
+		color: $color-text-dark;
+	}
+}
diff --git a/webclient/src/scss/ui_components/_cards.scss b/webclient/src/scss/ui_components/_cards.scss
index e69de29..d82500b 100644
--- a/webclient/src/scss/ui_components/_cards.scss
+++ b/webclient/src/scss/ui_components/_cards.scss
@@ -0,0 +1,29 @@
+.card {
+	max-width: 420px;
+	width: 100%;
+	border: 2px solid $color-text-light;
+
+	.card-title {
+		color: $color-black;
+		background: $color-text-light;
+		padding: $space-2 $space-3;
+	}
+
+	.card-content {
+		padding: $space-4;
+
+		.card-thumb {
+			width: 100%;
+		}
+
+		p {
+			margin-top: $space-2;
+			margin-bottom: 0;
+		}
+	}
+
+	.card-footer {
+		padding: $space-2 $space-4;
+		padding-bottom: $space-4;
+	}
+}
diff --git a/webclient/src/scss/ui_components/_forms.scss b/webclient/src/scss/ui_components/_forms.scss
index a861a62..5efdf60 100644
--- a/webclient/src/scss/ui_components/_forms.scss
+++ b/webclient/src/scss/ui_components/_forms.scss
@@ -1,15 +1,15 @@
-.ui_form_group {
-	.ui_label {
+.form-group {
+	.label {
 		display: flex;
 		flex-direction: column;
-		font-size: $font_size_lg;
+		font-size: $font-size-lg;
 		max-width: 420px;
 		position: relative;
 
 		.ph {
 			position: absolute;
 			color: $color-text-light;
-			left: -0px;
+			left: 0;
 			bottom: 2px;
 			font-size: 28px;
 			height: 56px;
@@ -21,12 +21,12 @@
 			transition-property: color, left;
 		}
 
-		.ui_input {
-			font-family: $font_family_base;
-			font-size: $font_size_base;
-			font-weight: $font_weight_medium;
-			line-height: $line_height_base;
-			letter-spacing: $letter_spacing_wide;
+		.input {
+			font-family: $font-family-base;
+			font-size: $font-size-base;
+			font-weight: $font-weight-medium;
+			line-height: $line-height-base;
+			letter-spacing: $letter-spacing-wide;
 			padding: $space-3 $space-lg;
 			margin-top: $space-sm;
 			border-radius: 0;
@@ -53,60 +53,60 @@
 			}
 		}
 
-		textarea.ui_input {
+		textarea.input {
 			height: 120px;
-			line-height: $line_height_snug;
+			line-height: $line-height-snug;
 			resize: none;
 		}
 
-		.ph + .ui_input,
-		.ph + .ui_select_wrap .ui_select {
+		.ph + .input,
+		.ph + .select-wrap .select {
 			padding-left: 42px;
 		}
 
-		.ui_select_wrap {
+		.select-wrap {
 			margin-top: $space-sm;
 		}
 
-		.ui_select {
-		  width: 100%;
-		  height: 56px;
-		  margin-top: 0;
+		.select {
+			width: 100%;
+			height: 56px;
+			margin-top: 0;
 
-		  /* убрать нативную стрелку */
-		  appearance: none;
-		  -webkit-appearance: none;
-		  -moz-appearance: none;
+			/* убрать нативную стрелку */
+			appearance: none;
+			-webkit-appearance: none;
+			-moz-appearance: none;
 
-		  &:focus {
-		    outline: none;
-		  }
+			&:focus {
+				outline: none;
+			}
 
-		  option {
-		  	color: $color-text-light;
-		  	background: $color-dark;
-		  }
+			option {
+				color: $color-text-light;
+				background: $color-dark;
+			}
 		}
 
-		.ui_select_wrap::after {
-		  content: "";
-		  position: absolute;
-		  right: $space-lg;
-		  bottom: 18px;
-		  transform: translateY(-50%);
+		.select-wrap::after {
+			content: "";
+			position: absolute;
+			right: $space-lg;
+			bottom: 18px;
+			transform: translateY(-50%);
 
-		  width: 0;
-		  height: 0;
-		  border-left: 8px solid transparent;
-		  border-right: 8px solid transparent;
-		  border-top: 10px solid $color-text-light;
+			width: 0;
+			height: 0;
+			border-left: 8px solid transparent;
+			border-right: 8px solid transparent;
+			border-top: 10px solid $color-text-light;
 
-		  pointer-events: none; /* чтобы клики шли в select */
+			pointer-events: none;
 		}
 	}
 }
 
-.ui_radio {
+.radio {
 	display: inline-flex;
 	flex-direction: row;
 	gap: $space-sm;
@@ -116,7 +116,7 @@
 		display: none;
 	}
 
-	.ui_radio_control {
+	.radio-control {
 		display: inline-block;
 		border-radius: 100%;
 		border: 2px solid $color-primary;
@@ -127,25 +127,25 @@
 		transition-property: background, border-color;
 	}
 
-	&:hover .ui_radio_control{
+	&:hover .radio-control {
 		background: $color-grey;
 	}
 
-	input[type="radio"]:checked + .ui_radio_control {
+	input[type="radio"]:checked + .radio-control {
 		background: $color-primary;
 	}
 
-	input[type="radio"]:disabled + .ui_radio_control{
+	input[type="radio"]:disabled + .radio-control {
 		background: $color-grey;
 		border-color: $color-grey;
 	}
 
-	.ui_radio_label {
-		font-size: $font_size_lg;
+	.radio-label {
+		font-size: $font-size-lg;
 	}
 }
 
-.ui_checkbox {
+.checkbox {
 	display: inline-flex;
 	flex-direction: row;
 	gap: $space-sm;
@@ -155,7 +155,7 @@
 		display: none;
 	}
 
-	.ui_checkbox_control {
+	.checkbox-control {
 		height: 16px;
 		width: 30px;
 		border: 2px solid $color-primary;
@@ -166,7 +166,7 @@
 		display: block;
 	}
 
-	.ui_checkbox_control:before {
+	.checkbox-control:before {
 		content: "";
 		display: block;
 		height: 20px;
@@ -179,24 +179,24 @@
 		transition-property: left, background;
 	}
 
-	&:hover .ui_checkbox_control{
+	&:hover .checkbox-control {
 		background: $color-grey;
 	}
 
-	input[type="checkbox"]:checked:not(:disabled) + .ui_checkbox_control {
+	input[type="checkbox"]:checked:not(:disabled) + .checkbox-control {
 		background: $color-secondary;
 		border-color: $color-secondary;
 	}
 
-	input[type="checkbox"]:checked + .ui_checkbox_control:before {
+	input[type="checkbox"]:checked + .checkbox-control:before {
 		left: 12px;
 	}
 
-	input[type="checkbox"]:disabled + .ui_checkbox_control {
+	input[type="checkbox"]:disabled + .checkbox-control {
 		border-color: $color-grey;
 	}
 
-	input[type="checkbox"]:disabled + .ui_checkbox_control:before {
+	input[type="checkbox"]:disabled + .checkbox-control:before {
 		background: $color-grey;
 	}
-}
\ No newline at end of file
+}
diff --git a/webclient/src/scss/ui_components/_lists.scss b/webclient/src/scss/ui_components/_lists.scss
index e69de29..5383fe4 100644
--- a/webclient/src/scss/ui_components/_lists.scss
+++ b/webclient/src/scss/ui_components/_lists.scss
@@ -0,0 +1,152 @@
+.list {
+	display: flex;
+	flex-direction: column;
+	gap: $space-1;
+	list-style-type: none;
+	padding-left: 0;
+
+	.list-item {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: $space-sm;
+		margin-left: 0;
+	}
+
+	&.list-ordered {
+		list-style-type: decimal;
+		display: list-item;
+		margin-left: 30px;
+
+		.list-item {
+			display: list-item;
+		}
+	}
+
+	&.list-definition {
+		gap: $space-md;
+
+		.list-row {
+			border-left: 2px solid $color-primary;
+
+			.list-term::before,
+			.list-desc::before {
+				content: "";
+				height: 2px;
+				width: $space-3;
+				position: absolute;
+				top: 50%;
+				left: 0;
+				margin-top: -1px;
+				display: block;
+				background: $color-primary;
+			}
+
+			.list-term,
+			.list-desc {
+				position: relative;
+			}
+
+			.list-term {
+				padding-left: $space-5;
+				font-size: $font-size-xl;
+			}
+
+			.list-desc {
+				padding-left: $space-5;
+			}
+		}
+	}
+
+	&.with-icons {
+		.ph {
+			// icon styles if needed
+		}
+	}
+
+	&.list-nav {
+		max-width: 420px;
+		width: 100%;
+		gap: 0;
+
+		.list-item {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			height: 50px;
+			margin: 0;
+
+			.list-action {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				width: 100%;
+				height: 100%;
+				padding: $space-2 $space-3;
+				border: 0;
+
+				font-size: $font-size-xl;
+				background: $color-dark;
+				color: inherit;
+
+				transition-duration: .2s;
+				transition-property: background;
+
+				&:hover {
+					background: $color-electric-blue;
+				}
+
+				.list-label {
+					display: flex;
+					flex-direction: row;
+					gap: $space-2;
+					align-items: center;
+				}
+
+				.list-meta {
+					padding: $space-2;
+					background: $color-neon-green;
+					color: $color-black;
+					display: flex;
+				}
+			}
+
+			&.list-item-active {
+				.list-action {
+					background: $color-electric-blue;
+				}
+			}
+		}
+	}
+
+	&.list-actions {
+		width: 100%;
+		max-width: 420px;
+		gap: $space-lg;
+
+		.list-item {
+			justify-content: space-between;
+			align-items: flex-start;
+
+			.list-content {
+				display: flex;
+				flex-direction: column;
+				gap: $space-2;
+
+				.list-title {
+					font-size: $font-size-xl;
+					line-height: $line-height-base;
+				}
+
+				.list-subtitle {
+					// subtitle styles
+				}
+			}
+
+			.list-controls {
+				// controls styles
+			}
+		}
+	}
+}
diff --git a/webclient/src/scss/ui_components/_modals.scss b/webclient/src/scss/ui_components/_modals.scss
index e69de29..02be85c 100644
--- a/webclient/src/scss/ui_components/_modals.scss
+++ b/webclient/src/scss/ui_components/_modals.scss
@@ -0,0 +1,107 @@
+.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-backdrop {
+		position: fixed;
+		z-index: 1010;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+
+		background: $color-black;
+		opacity: 0;
+
+		transition-duration: .25s;
+		transition-property: opacity;
+	}
+
+	.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: $space-4;
+		margin-top: 200px;
+
+		background: $color-black;
+		border: 2px solid $color-text-light;
+		opacity: 0;
+
+		transition-duration: .25s;
+		transition-property: opacity, margin-top;
+
+		.modal-header {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			padding-right: $space-4;
+
+			.modal-title {
+				padding: $space-3 $space-4;
+				background: $color-text-light;
+				color: $color-black;
+				text-transform: uppercase;
+			}
+		}
+
+		.modal-body {
+			max-height: 700px;
+			overflow-y: auto;
+			padding: $space-5;
+		}
+
+		.modal-footer {
+			padding: $space-5;
+
+			.actions {
+				display: flex;
+				flex-direction: row;
+				justify-content: flex-end;
+				gap: $space-4;
+				width: 100%;
+			}
+		}
+	}
+
+	&.a-show {
+		.modal-backdrop {
+			opacity: 1;
+		}
+
+		.modal-panel {
+			opacity: 1;
+			margin-top: 0;
+		}
+	}
+
+	&.a-hide {
+		.modal-backdrop {
+			opacity: 0;
+		}
+
+		.modal-panel {
+			opacity: 0;
+			margin-top: -200px;
+		}
+	}
+}
diff --git a/webclient/src/scss/ui_components/_palette.scss b/webclient/src/scss/ui_components/_palette.scss
index affd778..d6e1b1f 100644
--- a/webclient/src/scss/ui_components/_palette.scss
+++ b/webclient/src/scss/ui_components/_palette.scss
@@ -1,40 +1,72 @@
-.ui_palette {
+.palette {
 	display: flex;
 	flex-direction: row;
 	gap: $space-sm;
 
-	.ui_color {
-		.ui_color_box {
+	.color {
+		.color-box {
 			width: 100px;
 			height: 80px;
 		}
 	}
 }
 
-.bg_primary {
+/* BACKGROUND COLORS */
+
+.bg-primary {
 	background: $color-primary;
 }
 
-.bg_secondary {
+.bg-secondary {
 	background: $color-secondary;
 }
 
-.bg_success {
+.bg-success {
 	background: $color-success;
 }
 
-.bg_accent {
+.bg-accent {
 	background: $color-accent;
 }
 
-.bg_info {
+.bg-info {
 	background: $color-info;
 }
 
-.bg_warning {
+.bg-warning {
 	background: $color-warning;
 }
 
-.bg_error {
+.bg-error {
 	background: $color-error;
-}
\ No newline at end of file
+}
+
+/* TEXT COLORS */
+
+.text-color-primary {
+	color: $color-primary;
+}
+
+.text-color-secondary {
+	color: $color-secondary;
+}
+
+.text-color-success {
+	color: $color-success;
+}
+
+.text-color-accent {
+	color: $color-accent;
+}
+
+.text-color-info {
+	color: $color-info;
+}
+
+.text-color-warning {
+	color: $color-warning;
+}
+
+.text-color-error {
+	color: $color-error;
+}
diff --git a/webclient/src/scss/ui_components/_tables.scss b/webclient/src/scss/ui_components/_tables.scss
index e69de29..9140ce1 100644
--- a/webclient/src/scss/ui_components/_tables.scss
+++ b/webclient/src/scss/ui_components/_tables.scss
@@ -0,0 +1,42 @@
+.table {
+	text-align: left;
+	border: 2px solid $color-primary;
+	padding: $space-4;
+
+	.table-caption {
+		text-align: left;
+		font-size: $font-size-xl;
+		background: $color-primary;
+		width: max-content;
+		color: $color-dark;
+		padding: $space-1 $space-3;
+		margin-bottom: 0;
+	}
+
+	.table-row {
+		th,
+		td {
+			padding: $space-3 $space-5;
+			font-size: $font-size-base;
+		}
+
+		th {
+			// header cell styles if needed
+		}
+	}
+
+	.table-head {
+		// thead styles
+	}
+
+	.table-body {
+		// tbody styles
+	}
+
+	.table-foot {
+		th,
+		td {
+			padding-top: $space-4;
+		}
+	}
+}
diff --git a/webclient/src/scss/ui_components/_toasts.scss b/webclient/src/scss/ui_components/_toasts.scss
index e69de29..2d8c004 100644
--- a/webclient/src/scss/ui_components/_toasts.scss
+++ b/webclient/src/scss/ui_components/_toasts.scss
@@ -0,0 +1,88 @@
+.toast {
+	position: fixed;
+	bottom: -100px;
+	right: $space-4;
+	max-width: 420px;
+
+	background: $color-dark;
+	border: 2px solid $color-text-light;
+	padding: 0;
+	opacity: 0;
+
+	transition-duration: .25s;
+	transition-property: opacity, top, bottom;
+
+	&.a-show {
+		bottom: $space-4;
+		opacity: 1;
+	}
+
+	&.a-hide {
+		bottom: $space-4 + 100px;
+		opacity: 0;
+	}
+
+	.toast-content {
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+
+		.toast-title {
+			font-size: $font-size-h3;
+			display: flex;
+			flex-direction: row;
+			gap: $space-2;
+			align-items: center;
+			color: $color-black;
+			background: $color-primary;
+			padding: $space-1 $space-2;
+		}
+
+		.toast-text {
+			font-size: $font-size-base;
+			padding: $space-6 $space-4;
+			margin: 0;
+		}
+	}
+
+	.toast-close {
+		position: absolute;
+		top: 0;
+		right: 0;
+		color: $color-black;
+		height: 40px;
+		width: 40px;
+
+		&:hover {
+			color: $color-dark;
+		}
+	}
+
+	&.toast-info {
+		// default info styles (inherits primary)
+	}
+
+	&.toast-success {
+		border-color: $color-success;
+
+		.toast-title {
+			background: $color-success;
+		}
+	}
+
+	&.toast-warning {
+		border-color: $color-warning;
+
+		.toast-title {
+			background: $color-warning;
+		}
+	}
+
+	&.toast-danger {
+		border-color: $color-error;
+
+		.toast-title {
+			background: $color-error;
+		}
+	}
+}
diff --git a/webclient/src/scss/ui_components/_typography.scss b/webclient/src/scss/ui_components/_typography.scss
index 00b9ab5..598f11a 100644
--- a/webclient/src/scss/ui_components/_typography.scss
+++ b/webclient/src/scss/ui_components/_typography.scss
@@ -1,252 +1,259 @@
 /* =========================
-   FONT FAMILIES
+	 FONT FAMILIES
 ========================= */
 
-$font_family_base: "IBM Plex Mono", monospace;
-$font_family_code: $font_family_base;
+$font-family-base: "IBM Plex Mono", monospace;
+$font-family-code: $font-family-base;
 
 /* =========================
-   FONT WEIGHTS
+	 FONT WEIGHTS
 ========================= */
 
-$font_weight_regular: 400;
-$font_weight_medium: 500;
-$font_weight_semibold: 600;
-$font_weight_bold: 700;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
 
 /* =========================
-   FONT SIZES (scale)
+	 FONT SIZES (scale)
 ========================= */
 
-$font_size_xs: 12px;
-$font_size_sm: 13px;
-$font_size_md: 14px;
-$font_size_base: 16px;
-$font_size_lg: 17px;
-$font_size_xl: 20px;
+$font-size-xs: 12px;
+$font-size-sm: 13px;
+$font-size-md: 14px;
+$font-size-base: 16px;
+$font-size-lg: 17px;
+$font-size-xl: 20px;
 
-$font_size_h1: 36px;
-$font_size_h2: 28px;
-$font_size_h3: 24px;
-$font_size_h4: 20px;
-$font_size_h5: 18px;
-$font_size_h6: 16px;
+$font-size-h1: 36px;
+$font-size-h2: 28px;
+$font-size-h3: 24px;
+$font-size-h4: 20px;
+$font-size-h5: 18px;
+$font-size-h6: 16px;
 
 /* =========================
-   LINE HEIGHTS
+	 LINE HEIGHTS
 ========================= */
 
-$line_height_base: 1;
-$line_height_tight: 1.15;
-$line_height_snug: 1.25;
-$line_height_normal: 1.4;
-$line_height_relaxed: 1.6;
+$line-height-base: 1;
+$line-height-tight: 1.15;
+$line-height-snug: 1.25;
+$line-height-normal: 1.4;
+$line-height-relaxed: 1.6;
 
 /* =========================
-   LETTER SPACING
+	 LETTER SPACING
 ========================= */
 
-$letter_spacing_tight: -0.01em;
-$letter_spacing_normal: 0;
-$letter_spacing_wide: 0.04em;
+$letter-spacing-tight: -0.01em;
+$letter-spacing-normal: 0;
+$letter-spacing-wide: 0.04em;
 
 /* =========================
-   BASE TYPOGRAPHY
+	 BASE TYPOGRAPHY
 ========================= */
 
 html {
-  font-size: 100%;
+	font-size: 100%;
 }
 
 body {
-  font-family: $font_family_base;
-  font-size: $font_size_base;
-  font-weight: $font_weight_regular;
-  line-height: $line_height_relaxed;
-  letter-spacing: $letter_spacing_normal;
+	font-family: $font-family-base;
+	font-size: $font-size-base;
+	font-weight: $font-weight-regular;
+	line-height: $line-height-relaxed;
+	letter-spacing: $letter-spacing-normal;
 }
 
 /* =========================
-   HEADINGS
+	 HEADINGS
 ========================= */
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: $font_family_base;
-  font-weight: $font_weight_semibold;
-  line-height: $line_height_snug;
-  margin: 0;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-family: $font-family-base;
+	font-weight: $font-weight-semibold;
+	line-height: $line-height-snug;
+	margin: 0;
+
+	&.contrast {
+		background: $color-text-light;
+		color: $color-black;
+	}
 }
 
 h1 {
-  font-size: $font_size_h1;
-  letter-spacing: $letter_spacing_tight;
+	font-size: $font-size-h1;
+	letter-spacing: $letter-spacing-tight;
 }
 
 h2 {
-  font-size: $font_size_h2;
+	font-size: $font-size-h2;
 }
 
 h3 {
-  font-size: $font_size_h3;
+	font-size: $font-size-h3;
 }
 
 h4 {
-  font-size: $font_size_h4;
+	font-size: $font-size-h4;
 }
 
 h5 {
-  font-size: $font_size_h5;
+	font-size: $font-size-h5;
 }
 
 h6 {
-  font-size: $font_size_h6;
-  font-weight: $font_weight_medium;
+	font-size: $font-size-h6;
+	font-weight: $font-weight-medium;
 }
 
 /* =========================
-   TEXT VARIANTS
+	 TEXT VARIANTS
 ========================= */
 
-.ui_text,
+.text,
 p {
-  font-size: $font_size_base;
-  line-height: $line_height_relaxed;
+	font-size: $font-size-base;
+	line-height: $line-height-relaxed;
 }
 
-.ui_text_sm {
-  font-size: $font_size_sm;
-  line-height: $line_height_normal;
+.text-sm {
+	font-size: $font-size-sm;
+	line-height: $line-height-normal;
 }
 
-.ui_text_lg {
-  font-size: $font_size_lg;
-  line-height: $line_height_relaxed;
+.text-lg {
+	font-size: $font-size-lg;
+	line-height: $line-height-relaxed;
 }
 
-.ui_text_muted {
-  font-size: $font_size_sm;
+.text-muted {
+	font-size: $font-size-sm;
+	color: $color-text-dark;
 }
 
-.ui_text_strong,
+.text-strong,
 strong {
-  font-weight: $font_weight_semibold;
+	font-weight: $font-weight-semibold;
 }
 
-.ui_text_bold {
-  font-weight: $font_weight_bold;
+.text-bold {
+	font-weight: $font-weight-bold;
 }
 
-.ui_text_italic,
+.text-italic,
 em {
-  font-style: italic;
+	font-style: italic;
 }
 
 /* =========================
-   CODE / MONO
+	 CODE / MONO
 ========================= */
 
 code,
 pre,
-.ui_code {
-  font-family: $font_family_code;
-  font-size: $font_size_base;
-  line-height: $line_height_normal;
-  background-color: $color-dark;
+.code {
+	font-family: $font-family-code;
+	font-size: $font-size-base;
+	line-height: $line-height-normal;
+	background-color: $color-dark;
 }
 
 pre {
-  font-size: $font_size_base;
-  line-height: $line_height_relaxed;
-  white-space: pre-wrap;
+	font-size: $font-size-base;
+	line-height: $line-height-relaxed;
+	white-space: pre-wrap;
 }
 
 /* =========================
-   LINKS
+	 LINKS
 ========================= */
 
 a {
-  font-weight: $font_weight_medium;
-  text-decoration: none;
+	font-weight: $font-weight-medium;
+	text-decoration: none;
 }
 
-.ui_link {
-  font-size: inherit;
-  font-weight: $font_weight_medium;
+.link {
+	font-size: inherit;
+	font-weight: $font-weight-medium;
 }
 
 /* =========================
-   LABELS / META
+	 LABELS / META
 ========================= */
 
-.ui_label {
-  font-size: $font_size_sm;
-  font-weight: $font_weight_medium;
-  line-height: $line_height_normal;
+.label {
+	font-size: $font-size-sm;
+	font-weight: $font-weight-medium;
+	line-height: $line-height-normal;
 }
 
-.ui_hint,
-.ui_meta {
-  font-size: $font_size_xs;
-  line-height: $line_height_normal;
+.hint,
+.meta {
+	font-size: $font-size-xs;
+	line-height: $line-height-normal;
 }
 
 /* =========================
-   TABLE TEXT
+	 TABLE TEXT
 ========================= */
 
-.ui_table {
-  font-size: $font_size_sm;
-  line-height: $line_height_normal;
-}
+.table {
+	font-size: $font-size-sm;
+	line-height: $line-height-normal;
 
-.ui_table th {
-  font-weight: $font_weight_semibold;
-}
+	th {
+		font-weight: $font-weight-semibold;
+	}
 
-.ui_table td {
-  font-weight: $font_weight_regular;
+	td {
+		font-weight: $font-weight-regular;
+	}
 }
 
 /* =========================
-   LISTS
+	 LISTS
 ========================= */
 
-.ui_list {
-  font-size: $font_size_base;
-  line-height: $line_height_relaxed;
+.list {
+	font-size: $font-size-base;
+	line-height: $line-height-relaxed;
 }
 
-.ui_list_item {
-  font-size: inherit;
+.list-item {
+	font-size: inherit;
 }
 
 /* =========================
-   MODALS
+	 MODALS
 ========================= */
 
-.ui_modal_title {
-  font-size: $font_size_h4;
-  font-weight: $font_weight_semibold;
+.modal-title {
+	font-size: $font-size-h4;
+	font-weight: $font-weight-semibold;
 }
 
-.ui_modal_body {
-  font-size: $font_size_base;
+.modal-body {
+	font-size: $font-size-base;
 }
 
 /* =========================
-   TOASTS
+	 TOASTS
 ========================= */
 
-.ui_toast_title {
-  font-size: $font_size_md;
-  font-weight: $font_weight_semibold;
+.toast-title {
+	font-size: $font-size-md;
+	font-weight: $font-weight-semibold;
 }
 
-.ui_toast_text {
-  font-size: $font_size_sm;
-  line-height: $line_height_normal;
+.toast-text {
+	font-size: $font-size-sm;
+	line-height: $line-height-normal;
 }
-
-.text_muted {
-  color: $color-text-dark;
-}
\ No newline at end of file
diff --git a/webclient/ui.php b/webclient/ui.php
index a4b1587..cf973f1 100644
--- a/webclient/ui.php
+++ b/webclient/ui.php
@@ -10,10 +10,10 @@
 </head>
 <body>
 
-	<main class="ui_container">
+	<main class="container">
 
-		<header class="ui_header">
-			<h1>UI Kit</h1>
+		<header class="header">
+			<h1 class="contrast">UI Kit</h1>
 			<p>Набор базовых элементов интерфейса</p>
 		</header>
 
@@ -21,14 +21,15 @@
 		<? include "ui_components/palette.php" ?>
 		<? include "ui_components/buttons.php" ?>
 		<? include "ui_components/forms.php" ?>
-		<? //include "ui_components/lists.php" ?>
-		<? //include "ui_components/badges.php" ?>
-		<? //include "ui_components/tables.php" ?>
-		<? //include "ui_components/toasts.php" ?>
-		<? //include "ui_components/cards.php" ?>
-		<? //include "ui_components/modals.php" ?>
+		<? include "ui_components/lists.php" ?>
+		<? include "ui_components/badges.php" ?>
+		<? include "ui_components/tables.php" ?>
+		<? include "ui_components/toasts.php" ?>
+		<? include "ui_components/cards.php" ?>
+		<? include "ui_components/modals.php" ?>
 
 	</main>
 
+	<script src="/dist/js/main.js"></script>
 </body>
 </html>
diff --git a/webclient/ui_components/badges.php b/webclient/ui_components/badges.php
index 8787b5c..079f68b 100644
--- a/webclient/ui_components/badges.php
+++ b/webclient/ui_components/badges.php
@@ -1,10 +1,12 @@
-<section class="ui_section" id="badges">
-    <h2 class="ui_section_title">Badges & Status</h2>
+<section class="section" id="badges">
+	<h2 class="section-title">Badges & Status</h2>
 
-    <div class="ui_block">
-        <span class="badge badge_success">Online</span>
-        <span class="badge badge_warning">Warning</span>
-        <span class="badge badge_error">Error</span>
-        <span class="badge badge_info">Info</span>
-    </div>
+	<div class="block">
+		<span class="badge badge-primary">Primary</span>
+		<span class="badge badge-secondary">Secondary</span>
+		<span class="badge badge-success">Success</span>
+		<span class="badge badge-warning">Warning</span>
+		<span class="badge badge-error">Error</span>
+		<span class="badge badge-info">Info</span>
+	</div>
 </section>
diff --git a/webclient/ui_components/buttons.php b/webclient/ui_components/buttons.php
index 98eb3dd..cbe0870 100644
--- a/webclient/ui_components/buttons.php
+++ b/webclient/ui_components/buttons.php
@@ -1,25 +1,27 @@
-<section class="ui_section" id="buttons">
-    <h2 class="ui_section_title">Buttons</h2>
+<section class="section" id="buttons">
+	<h2 class="section-title">Buttons</h2>
 
-    <div class="ui_block">
-        <button class="btn btn_primary">Primary</button>
-        <button class="btn btn_primary with_icon"><i class="ph ph-house"></i> Primary</button>
-        <button class="btn btn_secondary with_icon"><i class="ph ph-code"></i> Secondary</button>
-        <button class="btn btn_accent with_icon"><i class="ph ph-envelope-simple"></i> Accent</button>
-        <button class="btn btn_info with_icon"><i class="ph ph-question"></i> Info</button>
-        <button class="btn btn_danger with_icon"><i class="ph ph-brackets-curly"></i> Danger</button>
-        <button class="btn btn_warning with_icon"><i class="ph ph-warning"></i> Warning</button>
-        <button class="btn btn_success with_icon"><i class="ph ph-codepen-logo"></i> Success</button>
-    </div>
+	<div class="block">
+		<button class="btn btn-primary">Primary</button>
+		<button class="btn btn-primary with-icon"><i class="ph ph-house"></i> Primary</button>
+		<button class="btn btn-secondary with-icon"><i class="ph ph-code"></i> Secondary</button>
+		<button class="btn btn-accent with-icon"><i class="ph ph-envelope-simple"></i> Accent</button>
+		<button class="btn btn-info with-icon"><i class="ph ph-question"></i> Info</button>
+		<button class="btn btn-danger with-icon"><i class="ph ph-brackets-curly"></i> Danger</button>
+		<button class="btn btn-warning with-icon"><i class="ph ph-warning"></i> Warning</button>
+		<button class="btn btn-success with-icon"><i class="ph ph-codepen-logo"></i> Success</button>
+	</div>
 
-    <div class="ui_block">
-        <button class="btn btn_primary btn_small">Small</button>
-        <button class="btn btn_primary">Normal</button>
-        <button class="btn btn_primary btn_large">Large</button>
-    </div>
+	<div class="block">
+		<button class="btn btn-primary btn-small">Small</button>
+		<button class="btn btn-primary">Normal</button>
+		<button class="btn btn-primary btn-large">Large</button>
+	</div>
 
-    <div class="ui_block">
-        <button class="btn btn_primary" disabled>Disabled</button>
-        <button class="btn btn_primary with_icon" disabled><i class="ph ph-warning"></i> Disabled</button>
-    </div>
+	<div class="block">
+		<button class="btn btn-primary" disabled>Disabled</button>
+		<button class="btn btn-primary with-icon" disabled>
+			<i class="ph ph-warning"></i> Disabled
+		</button>
+	</div>
 </section>
diff --git a/webclient/ui_components/cards.php b/webclient/ui_components/cards.php
index 9f7facd..1e9c0ce 100644
--- a/webclient/ui_components/cards.php
+++ b/webclient/ui_components/cards.php
@@ -1,16 +1,22 @@
-<section class="ui_section" id="cards">
-    <h2 class="ui_section_title">Cards</h2>
+<section class="section" id="cards">
+	<h2 class="section-title">Cards</h2>
 
-    <div class="ui_cards">
-        <div class="ui_card">
-            <h3>Card title</h3>
-            <p>Карточка для контента, виджетов, статусов.</p>
-            <button class="btn btn_accent">Action</button>
-        </div>
+	<div class="cards">
+		<div class="card">
+			<h3 class="card-title">Card title</h3>
 
-        <div class="ui_card ui_card_glow">
-            <h3>Glow card</h3>
-            <p>Акцентная карточка</p>
-        </div>
-    </div>
+			<div class="card-content">
+				<img
+					src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ffreesvg.org%2Fimg%2FPlaceholder.png&f=1&nofb=1&ipt=1356fd437f9ae9cf56002fe45dd224fd07e21a3633e687a46a63ba0e030decbc"
+					alt=""
+					class="card-thumb"
+				>
+				<p>Карточка для контента, виджетов, статусов.</p>
+			</div>
+
+			<div class="card-footer">
+				<button class="btn btn-accent">Action</button>
+			</div>
+		</div>
+	</div>
 </section>
diff --git a/webclient/ui_components/forms.php b/webclient/ui_components/forms.php
index 6bc9a78..8bbeaea 100644
--- a/webclient/ui_components/forms.php
+++ b/webclient/ui_components/forms.php
@@ -1,41 +1,41 @@
-<section class="ui_section" id="forms">
-	<h2 class="ui_section_title">Forms</h2>
+<section class="section" id="forms">
+	<h2 class="section-title">Forms</h2>
 
-	<div class="ui_block ui_form_group">
-		<label class="ui_label">
+	<div class="block form-group">
+		<label class="label">
 			Text input
-			<input type="text" class="ui_input" placeholder="Введите текст">
+			<input type="text" class="input" placeholder="Введите текст">
 		</label>
 	</div>
 
-	<div class="ui_block ui_form_group">
-		<label class="ui_label">
+	<div class="block form-group">
+		<label class="label">
 			Text input
 			<i class="ph ph-user"></i>
-			<input type="text" class="ui_input" placeholder="Введите текст">
+			<input type="text" class="input" placeholder="Введите текст">
 		</label>
 	</div>
 
-	<div class="ui_block ui_form_group">
-		<label class="ui_label">
+	<div class="block form-group">
+		<label class="label">
 			Password
-			<input type="password" class="ui_input" placeholder="••••••">
+			<input type="password" class="input" placeholder="••••••">
 		</label>
 	</div>
 
-	<div class="ui_block ui_form_group">
-		<label class="ui_label">
+	<div class="block form-group">
+		<label class="label">
 			Text Area
 			<i class="ph ph-text-aa"></i>
-			<textarea class="ui_input" placeholder="Введите текст"></textarea>
+			<textarea class="input" placeholder="Введите текст"></textarea>
 		</label>
 	</div>
 
-	<div class="ui_block ui_form_group">
-		<label class="ui_label">
+	<div class="block form-group">
+		<label class="label">
 			Select
-			<div class="ui_select_wrap">
-				<select class="ui_input ui_select">
+			<div class="select-wrap">
+				<select class="input select">
 					<option>Option 1</option>
 					<option>Option 2</option>
 				</select>
@@ -43,12 +43,12 @@
 		</label>
 	</div>
 
-	<div class="ui_block ui_form_group">
-		<label class="ui_label">
+	<div class="block form-group">
+		<label class="label">
 			Select
 			<i class="ph ph-selection-all"></i>
-			<div class="ui_select_wrap">
-				<select class="ui_input ui_select">
+			<div class="select-wrap">
+				<select class="input select">
 					<option>Option 1</option>
 					<option>Option 2</option>
 				</select>
@@ -56,49 +56,49 @@
 		</label>
 	</div>
 
-	<div class="ui_block ui_form_group">
-		<label class="ui_checkbox">
+	<div class="block form-group">
+		<label class="checkbox">
 			<input type="checkbox">
-			<span class="ui_checkbox_control" aria-hidden="true"></span>
-			<span class="ui_checkbox_label">Checkbox 1</span>
+			<span class="checkbox-control" aria-hidden="true"></span>
+			<span class="checkbox-label">Checkbox 1</span>
 		</label>
 
-		<label class="ui_checkbox mt-3">
+		<label class="checkbox mt-3">
 			<input type="checkbox">
-			<span class="ui_checkbox_control" aria-hidden="true"></span>
-			<span class="ui_checkbox_label">Checkbox 2</span>
+			<span class="checkbox-control" aria-hidden="true"></span>
+			<span class="checkbox-label">Checkbox 2</span>
 		</label>
 
-		<label class="ui_checkbox mt-3">
+		<label class="checkbox mt-3">
 			<input type="checkbox" disabled>
-			<span class="ui_checkbox_control" aria-hidden="true"></span>
-			<span class="ui_checkbox_label">Disabled</span>
+			<span class="checkbox-control" aria-hidden="true"></span>
+			<span class="checkbox-label">Disabled</span>
 		</label>
 
-		<label class="ui_checkbox mt-3">
+		<label class="checkbox mt-3">
 			<input type="checkbox" disabled checked>
-			<span class="ui_checkbox_control" aria-hidden="true"></span>
-			<span class="ui_checkbox_label">Disabled & Checked</span>
+			<span class="checkbox-control" aria-hidden="true"></span>
+			<span class="checkbox-label">Disabled & Checked</span>
 		</label>
 	</div>
 
-	<div class="ui_block ui_form_group">
-		<label class="ui_radio">
-			<input type="radio" name="radio_demo">
-			<span class="ui_radio_control" aria-hidden="true"></span>
-			<span class="ui_radio_label">Radio 1</span>
+	<div class="block form-group">
+		<label class="radio">
+			<input type="radio" name="radio-demo">
+			<span class="radio-control" aria-hidden="true"></span>
+			<span class="radio-label">Radio 1</span>
 		</label>
 
-		<label class="ui_radio ml-2">
-			<input type="radio" name="radio_demo">
-			<span class="ui_radio_control" aria-hidden="true"></span>
-			<span class="ui_radio_label">Radio 2</span>
+		<label class="radio ml-2">
+			<input type="radio" name="radio-demo">
+			<span class="radio-control" aria-hidden="true"></span>
+			<span class="radio-label">Radio 2</span>
 		</label>
 
-		<label class="ui_radio ml-2">
-			<input type="radio" name="radio_demo" disabled>
-			<span class="ui_radio_control" aria-hidden="true"></span>
-			<span class="ui_radio_label">Radio 3</span>
+		<label class="radio ml-2">
+			<input type="radio" name="radio-demo" disabled>
+			<span class="radio-control" aria-hidden="true"></span>
+			<span class="radio-label">Radio 3</span>
 		</label>
 	</div>
 </section>
diff --git a/webclient/ui_components/lists.php b/webclient/ui_components/lists.php
index 11e3c80..c242308 100644
--- a/webclient/ui_components/lists.php
+++ b/webclient/ui_components/lists.php
@@ -1,168 +1,156 @@
 <!-- =========================
-     LISTS
+		 LISTS
 ========================= -->
-<section class="ui_section" id="lists">
-  <h2 class="ui_section_title">Lists</h2>
+<section class="section" id="lists">
+	<h2 class="section-title">Lists</h2>
 
-  <!-- Basic unordered list -->
-  <div class="ui_block">
-    <h3 class="ui_block_title">Unordered list</h3>
+	<!-- Basic unordered list -->
+	<div class="block">
+		<h3 class="block-title">Unordered list</h3>
 
-    <ul class="ui_list">
-      <li class="ui_list_item">Dashboard</li>
-      <li class="ui_list_item">Devices</li>
-      <li class="ui_list_item">Scenes</li>
-      <li class="ui_list_item">Automations</li>
-      <li class="ui_list_item">Settings</li>
-    </ul>
-  </div>
+		<ul class="list">
+			<li class="list-item">Dashboard</li>
+			<li class="list-item">Devices</li>
+			<li class="list-item">Scenes</li>
+			<li class="list-item">Automations</li>
+			<li class="list-item">Settings</li>
+		</ul>
+	</div>
 
-  <!-- Ordered list -->
-  <div class="ui_block">
-    <h3 class="ui_block_title">Ordered list</h3>
+	<!-- Ordered list -->
+	<div class="block">
+		<h3 class="block-title">Ordered list</h3>
 
-    <ol class="ui_list ui_list_ordered">
-      <li class="ui_list_item">Connect device to Wi-Fi</li>
-      <li class="ui_list_item">Register device on server</li>
-      <li class="ui_list_item">Assign device to area</li>
-      <li class="ui_list_item">Verify status</li>
-    </ol>
-  </div>
+		<ol class="list list-ordered">
+			<li class="list-item">Connect device to Wi-Fi</li>
+			<li class="list-item">Register device on server</li>
+			<li class="list-item">Assign device to area</li>
+			<li class="list-item">Verify status</li>
+		</ol>
+	</div>
 
-  <!-- List with icons / markers -->
-  <div class="ui_block">
-    <h3 class="ui_block_title">List with markers / icons</h3>
+	<!-- List with icons / markers -->
+	<div class="block">
+		<h3 class="block-title">List with icons</h3>
 
-    <ul class="ui_list ui_list_marked">
-      <li class="ui_list_item">
-        <span class="ui_list_marker">●</span>
-        Online
-      </li>
-      <li class="ui_list_item">
-        <span class="ui_list_marker">●</span>
-        Degraded
-      </li>
-      <li class="ui_list_item">
-        <span class="ui_list_marker">●</span>
-        Offline
-      </li>
-    </ul>
-  </div>
+		<ul class="list with-icons">
+			<li class="list-item">
+				<i class="ph ph-bathtub"></i>
+				Bathroom
+			</li>
+			<li class="list-item">
+				<i class="ph ph-toilet"></i>
+				Toilet
+			</li>
+			<li class="list-item">
+				<i class="ph ph-planet"></i>
+				Workspace
+			</li>
+		</ul>
+	</div>
 
-  <!-- Definition list -->
-  <div class="ui_block">
-    <h3 class="ui_block_title">Definition list</h3>
+	<!-- Definition list -->
+	<div class="block">
+		<h3 class="block-title">Definition list</h3>
 
-    <dl class="ui_list ui_list_definition">
-      <div class="ui_list_row">
-        <dt class="ui_list_term">Device</dt>
-        <dd class="ui_list_desc">Физическое устройство в системе</dd>
-      </div>
+		<dl class="list list-definition">
+			<div class="list-row">
+				<dt class="list-term">Device</dt>
+				<dd class="list-desc">Физическое устройство в системе</dd>
+			</div>
 
-      <div class="ui_list_row">
-        <dt class="ui_list_term">Area</dt>
-        <dd class="ui_list_desc">Логическая зона размещения устройств</dd>
-      </div>
+			<div class="list-row">
+				<dt class="list-term">Area</dt>
+				<dd class="list-desc">Логическая зона размещения устройств</dd>
+			</div>
 
-      <div class="ui_list_row">
-        <dt class="ui_list_term">Scene</dt>
-        <dd class="ui_list_desc">Набор действий, выполняемых одновременно</dd>
-      </div>
-    </dl>
-  </div>
+			<div class="list-row">
+				<dt class="list-term">Scene</dt>
+				<dd class="list-desc">Набор действий, выполняемых одновременно</dd>
+			</div>
+		</dl>
+	</div>
 
-  <!-- Interactive / navigation list -->
-  <div class="ui_block">
-    <h3 class="ui_block_title">Navigation / interactive list</h3>
+	<!-- Interactive / navigation list -->
+	<div class="block">
+		<h3 class="block-title">Navigation / interactive list</h3>
 
-    <ul class="ui_list ui_list_nav">
-      <li class="ui_list_item ui_list_item_active">
-        <button class="ui_list_action" type="button">
-          <span class="ui_list_label">Overview</span>
-        </button>
-      </li>
+		<ul class="list list-nav">
+			<li class="list-item list-item-active">
+				<button class="list-action" type="button">
+					<span class="list-label">Overview</span>
+				</button>
+			</li>
 
-      <li class="ui_list_item">
-        <button class="ui_list_action" type="button">
-          <span class="ui_list_label">Devices</span>
-          <span class="ui_list_meta">12</span>
-        </button>
-      </li>
+			<li class="list-item">
+				<button class="list-action" type="button">
+					<span class="list-label"><i class="ph ph-lightbulb"></i> Devices</span>
+					<span class="list-meta">12</span>
+				</button>
+			</li>
 
-      <li class="ui_list_item">
-        <button class="ui_list_action" type="button">
-          <span class="ui_list_label">Logs</span>
-        </button>
-      </li>
+			<li class="list-item">
+				<button class="list-action" type="button">
+					<span class="list-label">Logs</span>
+				</button>
+			</li>
 
-      <li class="ui_list_item ui_list_item_disabled">
-        <button class="ui_list_action" type="button" disabled>
-          <span class="ui_list_label">Advanced</span>
-        </button>
-      </li>
-    </ul>
-  </div>
+			<li class="list-item list-item-disabled">
+				<button class="list-action" type="button" disabled>
+					<span class="list-label">Advanced</span>
+				</button>
+			</li>
+		</ul>
+	</div>
 
-  <!-- List with actions -->
-  <div class="ui_block">
-    <h3 class="ui_block_title">List with actions</h3>
+	<!-- List with actions -->
+	<div class="block">
+		<h3 class="block-title">List with actions</h3>
 
-    <ul class="ui_list ui_list_actions">
-      <li class="ui_list_item">
-        <div class="ui_list_content">
-          <div class="ui_list_title">Kitchen Light</div>
-          <div class="ui_list_subtitle">192.168.1.21</div>
-        </div>
-        <div class="ui_list_controls">
-          <button class="ui_btn ui_btn_small ui_btn_secondary" type="button">Open</button>
-          <button class="ui_btn ui_btn_small ui_btn_accent" type="button">Toggle</button>
-        </div>
-      </li>
+		<ul class="list list-actions">
+			<li class="list-item">
+				<div class="list-content">
+					<div class="list-title">Kitchen Light</div>
+					<div class="list-subtitle">
+						<span class="text-color-success">•</span>
+						192.168.2.21
+					</div>
+				</div>
+				<div class="list-controls">
+					<button class="btn btn-small btn-secondary" type="button">Open</button>
+					<button class="btn btn-small btn-accent" type="button">Toggle</button>
+				</div>
+			</li>
 
-      <li class="ui_list_item">
-        <div class="ui_list_content">
-          <div class="ui_list_title">Hall Sensor</div>
-          <div class="ui_list_subtitle">192.168.1.34</div>
-        </div>
-        <div class="ui_list_controls">
-          <button class="ui_btn ui_btn_small ui_btn_secondary" type="button">Open</button>
-          <button class="ui_btn ui_btn_small ui_btn_danger" type="button">Restart</button>
-        </div>
-      </li>
+			<li class="list-item">
+				<div class="list-content">
+					<div class="list-title">Hall Sensor</div>
+					<div class="list-subtitle">
+						<span class="text-color-success">•</span>
+						192.168.2.34
+					</div>
+				</div>
+				<div class="list-controls">
+					<button class="btn btn-small btn-secondary" type="button">Open</button>
+					<button class="btn btn-small btn-danger with-icon" type="button">
+						<i class="ph ph-arrow-clockwise"></i>
+						Restart
+					</button>
+				</div>
+			</li>
 
-      <li class="ui_list_item ui_list_item_muted">
-        <div class="ui_list_content">
-          <div class="ui_list_title">Garage Relay</div>
-          <div class="ui_list_subtitle">Offline</div>
-        </div>
-        <div class="ui_list_controls">
-          <button class="ui_btn ui_btn_small ui_btn_secondary" type="button" disabled>Open</button>
-          <button class="ui_btn ui_btn_small ui_btn_accent" type="button" disabled>Toggle</button>
-        </div>
-      </li>
-    </ul>
-  </div>
-
-  <!-- Nested list -->
-  <div class="ui_block">
-    <h3 class="ui_block_title">Nested list</h3>
-
-    <ul class="ui_list">
-      <li class="ui_list_item">
-        Floor 1
-        <ul class="ui_list ui_list_nested">
-          <li class="ui_list_item">Kitchen</li>
-          <li class="ui_list_item">Living room</li>
-        </ul>
-      </li>
-
-      <li class="ui_list_item">
-        Floor 2
-        <ul class="ui_list ui_list_nested">
-          <li class="ui_list_item">Bedroom</li>
-          <li class="ui_list_item">Office</li>
-        </ul>
-      </li>
-    </ul>
-  </div>
+			<li class="list-item list-item-muted">
+				<div class="list-content">
+					<div class="list-title">Garage Relay</div>
+					<div class="list-subtitle">
+						<span class="text-color-warning">•</span> Offline
+					</div>
+				</div>
+				<div class="list-controls">
+					<button class="btn btn-small btn-secondary" type="button" disabled>Open</button>
+					<button class="btn btn-small btn-accent" type="button" disabled>Toggle</button>
+				</div>
+			</li>
+		</ul>
+	</div>
 </section>
diff --git a/webclient/ui_components/modals.php b/webclient/ui_components/modals.php
index d1d6d30..0b7a97f 100644
--- a/webclient/ui_components/modals.php
+++ b/webclient/ui_components/modals.php
@@ -1,71 +1,65 @@
-<section class="ui_section" id="modals">
-  <h2 class="ui_section_title">Modals</h2>
+<section class="section" id="modals">
+	<h2 class="section-title">Modals</h2>
 
-  <div class="ui_block">
-    <h3 class="ui_block_title">Open triggers</h3>
+	<div class="block">
+		<h3 class="block-title">Open triggers</h3>
 
-    <button class="ui_btn ui_btn_primary" type="button">Open modal</button>
-    <button class="ui_btn ui_btn_accent" type="button">Open confirm modal</button>
-  </div>
+		<button class="btn btn-primary" type="button" onclick="demoModal()">Open modal</button>
+		<!-- <button class="btn btn-accent" type="button">Open confirm modal</button> -->
+	</div>
 
-  <div class="ui_block">
-    <h3 class="ui_block_title">Basic modal (structure)</h3>
+	<!-- <div class="block">
+		<h3 class="block-title">Basic modal (structure)</h3>
 
-    <div class="ui_modal" aria-hidden="true">
-      <div class="ui_modal_backdrop"></div>
+		<div class="modal" aria-hidden="true">
+			<div class="modal-backdrop"></div>
 
-      <div class="ui_modal_panel" role="dialog" aria-modal="true" aria-labelledby="ui_modal_title_basic">
-        <header class="ui_modal_header">
-          <h4 class="ui_modal_title" id="ui_modal_title_basic">Basic modal</h4>
-          <button class="ui_btn ui_btn_icon" type="button" aria-label="Close">✕</button>
-        </header>
+			<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">Basic modal</h4>
+					<button class="btn-icon" type="button" aria-label="Close">✕</button>
+				</header>
 
-        <div class="ui_modal_body">
-          <p class="ui_text">Любой контент: текст, формы, списки.</p>
+				<div class="modal-body">
+					<p class="text">Любой контент: текст, формы, списки.</p>
 
-          <div class="ui_form_group">
-            <label class="ui_label" for="modal_device_name">Device name</label>
-            <input class="ui_input" id="modal_device_name" type="text" placeholder="Kitchen Light">
-          </div>
+					<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="ui_form_group">
-            <label class="ui_label" for="modal_device_desc">Description</label>
-            <textarea class="ui_textarea" id="modal_device_desc" rows="3" placeholder="Optional"></textarea>
-          </div>
-        </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>
+				</div>
 
-        <footer class="ui_modal_footer">
-          <button class="ui_btn ui_btn_secondary" type="button">Cancel</button>
-          <button class="ui_btn ui_btn_primary" type="button">Save</button>
-        </footer>
-      </div>
-    </div>
-  </div>
-
-  <div class="ui_block">
-    <h3 class="ui_block_title">Confirm modal (structure)</h3>
-
-    <div class="ui_modal ui_modal_confirm" aria-hidden="true">
-      <div class="ui_modal_backdrop"></div>
-
-      <div class="ui_modal_panel" role="dialog" aria-modal="true" aria-labelledby="ui_modal_title_confirm" aria-describedby="ui_modal_desc_confirm">
-        <header class="ui_modal_header">
-          <h4 class="ui_modal_title" id="ui_modal_title_confirm">Confirm action</h4>
-          <button class="ui_btn ui_btn_icon" type="button" aria-label="Close">✕</button>
-        </header>
-
-        <div class="ui_modal_body">
-          <p class="ui_text" id="ui_modal_desc_confirm">
-            Перезагрузить устройство <strong class="ui_strong">Hall Sensor</strong>?
-          </p>
-          <p class="ui_hint">Действие займёт до 10 секунд.</p>
-        </div>
-
-        <footer class="ui_modal_footer">
-          <button class="ui_btn ui_btn_secondary" type="button">Cancel</button>
-          <button class="ui_btn ui_btn_danger" type="button">Restart</button>
-        </footer>
-      </div>
-    </div>
-  </div>
-</section>
\ No newline at end of file
+				<footer class="modal-footer">
+					<div class="actions">
+						<button class="btn btn-primary" type="button">Cancel</button>
+						<button class="btn btn-success" type="button">Save</button>
+					</div>
+				</footer>
+			</div>
+		</div>
+	</div> -->
+</section>
diff --git a/webclient/ui_components/palette.php b/webclient/ui_components/palette.php
index aaacee8..4b1d12f 100644
--- a/webclient/ui_components/palette.php
+++ b/webclient/ui_components/palette.php
@@ -1,40 +1,40 @@
-<section class="ui_section" id="colors">
-    <h2 class="ui_section_title">Color Palette</h2>
+<section class="section" id="colors">
+	<h2 class="section-title">Color Palette</h2>
 
-    <div class="ui_palette">
-        <div class="ui_color">
-            <div class="ui_color_box bg_primary"></div>
-            <span>Primary</span>
-        </div>
+	<div class="palette">
+		<div class="color">
+			<div class="color-box bg-primary"></div>
+			<span>Primary</span>
+		</div>
 
-        <div class="ui_color">
-            <div class="ui_color_box bg_secondary"></div>
-            <span>Secondary</span>
-        </div>
+		<div class="color">
+			<div class="color-box bg-secondary"></div>
+			<span>Secondary</span>
+		</div>
 
-        <div class="ui_color">
-            <div class="ui_color_box bg_accent"></div>
-            <span>Accent</span>
-        </div>
+		<div class="color">
+			<div class="color-box bg-accent"></div>
+			<span>Accent</span>
+		</div>
 
-        <div class="ui_color">
-            <div class="ui_color_box bg_info"></div>
-            <span>Info</span>
-        </div>
+		<div class="color">
+			<div class="color-box bg-info"></div>
+			<span>Info</span>
+		</div>
 
-        <div class="ui_color">
-            <div class="ui_color_box bg_success"></div>
-            <span>Success</span>
-        </div>
+		<div class="color">
+			<div class="color-box bg-success"></div>
+			<span>Success</span>
+		</div>
 
-        <div class="ui_color">
-            <div class="ui_color_box bg_warning"></div>
-            <span>Warning</span>
-        </div>
+		<div class="color">
+			<div class="color-box bg-warning"></div>
+			<span>Warning</span>
+		</div>
 
-        <div class="ui_color">
-            <div class="ui_color_box bg_error"></div>
-            <span>Error</span>
-        </div>
-    </div>
+		<div class="color">
+			<div class="color-box bg-error"></div>
+			<span>Error</span>
+		</div>
+	</div>
 </section>
diff --git a/webclient/ui_components/tables.php b/webclient/ui_components/tables.php
index da3cb7b..bdcd31c 100644
--- a/webclient/ui_components/tables.php
+++ b/webclient/ui_components/tables.php
@@ -1,112 +1,76 @@
-<section class="ui_section" id="tables">
-  <h2 class="ui_section_title">Tables</h2>
+<section class="section" id="tables">
+	<h2 class="section-title">Tables</h2>
 
-  <div class="ui_block">
-    <h3 class="ui_block_title">Basic table</h3>
+	<div class="block">
+		<h3 class="block-title">Basic table</h3>
 
-    <table class="ui_table">
-      <caption class="ui_table_caption">Devices list</caption>
+		<table class="table">
+			<caption class="table-caption">Devices list</caption>
 
-      <thead class="ui_table_head">
-        <tr class="ui_table_row">
-          <th class="ui_table_th" scope="col">Device</th>
-          <th class="ui_table_th" scope="col">Status</th>
-          <th class="ui_table_th" scope="col">IP</th>
-          <th class="ui_table_th ui_table_th_right" scope="col">Ping</th>
-          <th class="ui_table_th ui_table_th_right" scope="col">Actions</th>
-        </tr>
-      </thead>
+			<thead class="table-head">
+				<tr class="table-row">
+					<th scope="col">Device</th>
+					<th scope="col">Status</th>
+					<th scope="col">IP</th>
+					<th scope="col">Ping</th>
+					<th scope="col">Actions</th>
+				</tr>
+			</thead>
 
-      <tbody class="ui_table_body">
-        <tr class="ui_table_row">
-          <td class="ui_table_td">Kitchen Light</td>
-          <td class="ui_table_td">
-            <span class="ui_badge ui_badge_success">Online</span>
-          </td>
-          <td class="ui_table_td">
-            <code class="ui_code">192.168.1.21</code>
-          </td>
-          <td class="ui_table_td ui_table_td_right">12 ms</td>
-          <td class="ui_table_td ui_table_td_right">
-            <button class="ui_btn ui_btn_secondary ui_btn_small" type="button">Open</button>
-            <button class="ui_btn ui_btn_accent ui_btn_small" type="button">Toggle</button>
-          </td>
-        </tr>
+			<tbody class="table-body">
+				<tr class="table-row">
+					<td>Kitchen Light</td>
+					<td>
+						<span class="badge badge-success">Online</span>
+					</td>
+					<td>
+						<code class="code">192.168.1.21</code>
+					</td>
+					<td>12 ms</td>
+					<td>
+						<button class="btn btn-secondary btn-small" type="button">Open</button>
+						<button class="btn btn-accent btn-small" type="button">Toggle</button>
+					</td>
+				</tr>
 
-        <tr class="ui_table_row">
-          <td class="ui_table_td">Hall Sensor</td>
-          <td class="ui_table_td">
-            <span class="ui_badge ui_badge_warning">Degraded</span>
-          </td>
-          <td class="ui_table_td">
-            <code class="ui_code">192.168.1.34</code>
-          </td>
-          <td class="ui_table_td ui_table_td_right">88 ms</td>
-          <td class="ui_table_td ui_table_td_right">
-            <button class="ui_btn ui_btn_secondary ui_btn_small" type="button">Open</button>
-            <button class="ui_btn ui_btn_danger ui_btn_small" type="button">Restart</button>
-          </td>
-        </tr>
+				<tr class="table-row">
+					<td>Hall Sensor</td>
+					<td>
+						<span class="badge badge-warning">Degraded</span>
+					</td>
+					<td>
+						<code class="code">192.168.1.34</code>
+					</td>
+					<td>88 ms</td>
+					<td>
+						<button class="btn btn-secondary btn-small" type="button">Open</button>
+						<button class="btn btn-danger btn-small" type="button">Restart</button>
+					</td>
+				</tr>
 
-        <tr class="ui_table_row ui_table_row_muted">
-          <td class="ui_table_td">Garage Relay</td>
-          <td class="ui_table_td">
-            <span class="ui_badge ui_badge_error">Offline</span>
-          </td>
-          <td class="ui_table_td">
-            <code class="ui_code">—</code>
-          </td>
-          <td class="ui_table_td ui_table_td_right">—</td>
-          <td class="ui_table_td ui_table_td_right">
-            <button class="ui_btn ui_btn_secondary ui_btn_small" type="button" disabled>Open</button>
-            <button class="ui_btn ui_btn_accent ui_btn_small" type="button" disabled>Toggle</button>
-          </td>
-        </tr>
-      </tbody>
+				<tr class="table-row table-row-muted">
+					<td>Garage Relay</td>
+					<td>
+						<span class="badge badge-error">Offline</span>
+					</td>
+					<td>
+						<code class="code">—</code>
+					</td>
+					<td>—</td>
+					<td>
+						<button class="btn btn-secondary btn-small" type="button" disabled>Open</button>
+						<button class="btn btn-accent btn-small" type="button" disabled>Toggle</button>
+					</td>
+				</tr>
+			</tbody>
 
-      <tfoot class="ui_table_foot">
-        <tr class="ui_table_row">
-          <td class="ui_table_td" colspan="5">
-            <span class="ui_table_meta">Total: 3 devices</span>
-          </td>
-        </tr>
-      </tfoot>
-    </table>
-  </div>
-
-  <div class="ui_block">
-    <h3 class="ui_block_title">Compact / key-value table</h3>
-
-    <div class="ui_table_wrap">
-      <table class="ui_table ui_table_compact">
-        <thead class="ui_table_head">
-          <tr class="ui_table_row">
-            <th class="ui_table_th" scope="col">Key</th>
-            <th class="ui_table_th" scope="col">Value</th>
-            <th class="ui_table_th ui_table_th_right" scope="col">Updated</th>
-          </tr>
-        </thead>
-
-        <tbody class="ui_table_body">
-          <tr class="ui_table_row">
-            <td class="ui_table_td">mode</td>
-            <td class="ui_table_td"><code class="ui_code">normal</code></td>
-            <td class="ui_table_td ui_table_td_right">2s ago</td>
-          </tr>
-          <tr class="ui_table_row">
-            <td class="ui_table_td">heap_free</td>
-            <td class="ui_table_td"><code class="ui_code">27 KB</code></td>
-            <td class="ui_table_td ui_table_td_right">2s ago</td>
-          </tr>
-          <tr class="ui_table_row">
-            <td class="ui_table_td">uptime</td>
-            <td class="ui_table_td"><code class="ui_code">04:12:19</code></td>
-            <td class="ui_table_td ui_table_td_right">2s ago</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <p class="ui_hint">Container .ui_table_wrap — под горизонтальный скролл на узких экранах.</p>
-  </div>
-</section>
\ No newline at end of file
+			<tfoot class="table-foot">
+				<tr class="table-row">
+					<td colspan="5">
+						<span class="table-meta">Total: 3 devices</span>
+					</td>
+				</tr>
+			</tfoot>
+		</table>
+	</div>
+</section>
diff --git a/webclient/ui_components/toasts.php b/webclient/ui_components/toasts.php
index a2204d9..5290d91 100644
--- a/webclient/ui_components/toasts.php
+++ b/webclient/ui_components/toasts.php
@@ -1,52 +1,55 @@
-<section class="ui_section" id="toasts">
-  <h2 class="ui_section_title">Toasts</h2>
+<section class="section" id="toasts">
+	<h2 class="section-title">Toasts</h2>
 
-  <div class="ui_block">
-    <h3 class="ui_block_title">Triggers (demo buttons)</h3>
+	<div class="block">
+		<h3 class="block-title">Triggers (demo buttons)</h3>
 
-    <button class="ui_btn ui_btn_secondary" type="button">Show info</button>
-    <button class="ui_btn ui_btn_primary" type="button">Show success</button>
-    <button class="ui_btn ui_btn_accent" type="button">Show warning</button>
-    <button class="ui_btn ui_btn_danger" type="button">Show danger</button>
-  </div>
+		<button class="btn btn-primary" type="button" onclick="demoToastInfo()">Show info (default)</button>
+		<button class="btn btn-success" type="button" onclick="demoToastSuccess()">Show success</button>
+		<button class="btn btn-warning" type="button" onclick="demoToastWarning()">Show warning</button>
+		<button class="btn btn-danger" type="button" onclick="demoToastDanger()">Show danger</button>
+	</div>
 
-  <div class="ui_block">
-    <h3 class="ui_block_title">Toast stack (container)</h3>
+	<!-- <div class="block">
+		<h3 class="block-title">Toast stack (container)</h3>
 
-    <div class="ui_toast_stack" aria-live="polite" aria-relevant="additions">
-      <article class="ui_toast ui_toast_info" role="status">
-        <div class="ui_toast_content">
-          <h4 class="ui_toast_title">Info</h4>
-          <p class="ui_toast_text">Обычное уведомление для пользователя.</p>
-        </div>
-        <button class="ui_btn ui_btn_icon ui_toast_close" type="button" aria-label="Close">✕</button>
-      </article>
+		<div class="toast-stack" aria-live="polite" aria-relevant="additions">
+			<article class="toast toast-info" role="status">
+				<div class="toast-content">
+					<h4 class="toast-title"><i class="ph ph-info"></i> Info</h4>
+					<p class="toast-text">Обычное уведомление для пользователя.</p>
+				</div>
+				<button class="btn-icon toast-close" type="button" aria-label="Close">✕</button>
+			</article>
 
-      <article class="ui_toast ui_toast_success" role="status">
-        <div class="ui_toast_content">
-          <h4 class="ui_toast_title">Success</h4>
-          <p class="ui_toast_text">Операция выполнена успешно.</p>
-        </div>
-        <button class="ui_btn ui_btn_icon ui_toast_close" type="button" aria-label="Close">✕</button>
-      </article>
+			<article class="toast toast-success" role="status">
+				<div class="toast-content">
+					<h4 class="toast-title"><i class="ph ph-check-circle"></i> Success</h4>
+					<p class="toast-text">Операция выполнена успешно.</p>
+				</div>
+				<button class="btn-icon toast-close" type="button" aria-label="Close">✕</button>
+			</article>
 
-      <article class="ui_toast ui_toast_warning" role="status">
-        <div class="ui_toast_content">
-          <h4 class="ui_toast_title">Warning</h4>
-          <p class="ui_toast_text">Нужна проверка параметров.</p>
-        </div>
-        <button class="ui_btn ui_btn_icon ui_toast_close" type="button" aria-label="Close">✕</button>
-      </article>
+			<article class="toast toast-warning" role="status">
+				<div class="toast-content">
+					<h4 class="toast-title"><i class="ph ph-check-circle"></i> Warning</h4>
+					<p class="toast-text">Нужна проверка параметров.</p>
+				</div>
+				<button class="btn-icon toast-close" type="button" aria-label="Close">✕</button>
+			</article>
 
-      <article class="ui_toast ui_toast_danger" role="alert">
-        <div class="ui_toast_content">
-          <h4 class="ui_toast_title">Danger</h4>
-          <p class="ui_toast_text">Произошла ошибка. Повтори позже.</p>
-        </div>
-        <button class="ui_btn ui_btn_icon ui_toast_close" type="button" aria-label="Close">✕</button>
-      </article>
-    </div>
+			<article class="toast toast-danger" role="alert">
+				<div class="toast-content">
+					<h4 class="toast-title"><i class="ph ph-warning-octagon"></i> Danger</h4>
+					<p class="toast-text">Произошла ошибка. Повтори позже.</p>
+				</div>
+				<button class="btn-icon toast-close" type="button" aria-label="Close">✕</button>
+			</article>
+		</div>
 
-    <p class="ui_hint">.ui_toast_stack — фиксируй в углу через CSS (например bottom/right), либо размещай как блок в контенте.</p>
-  </div>
-</section>
\ No newline at end of file
+		<p class="hint">
+			<b>Hint Example.</b>
+			.toast-stack — фиксируй в углу через CSS (например bottom/right), либо размещай как блок в контенте.
+		</p>
+	</div> -->
+</section>
diff --git a/webclient/ui_components/typography.php b/webclient/ui_components/typography.php
index f81037f..9f6181d 100644
--- a/webclient/ui_components/typography.php
+++ b/webclient/ui_components/typography.php
@@ -1,28 +1,28 @@
-<section class="ui_section" id="typography">
-    <h2 class="ui_section_title">Typography</h2>
+<section class="section" id="typography">
+	<h2 class="section-title">Typography</h2>
 
-    <div class="ui_block">
-        <h1>Heading H1</h1>
-        <h2>Heading H2</h2>
-        <h3>Heading H3</h3>
-        <h4>Heading H4</h4>
-    </div>
+	<div class="block">
+		<h1>Heading H1</h1>
+		<h2>Heading H2</h2>
+		<h3>Heading H3</h3>
+		<h4>Heading H4</h4>
+	</div>
 
-    <div class="ui_block">
-        <p class="text_primary">
-            Основной текст интерфейса. Используется для контента.
-        </p>
-        <p class="text_secondary">
-            Вторичный текст, комментарии, подписи.
-        </p>
-        <p class="text_muted">
-            Приглушённый текст, подсказки.
-        </p>
-    </div>
+	<div class="block">
+		<p class="text-primary">
+			Основной текст интерфейса. Используется для контента.
+		</p>
+		<p class="text-secondary">
+			Вторичный текст, комментарии, подписи.
+		</p>
+		<p class="text-muted">
+			Приглушённый текст, подсказки.
+		</p>
+	</div>
 
-    <div class="ui_block">
-        <code class="ui_code">
-            console.log("IBM Plex Mono");
-        </code>
-    </div>
+	<div class="block">
+		<code class="code">
+			console.log("IBM Plex Mono");
+		</code>
+	</div>
 </section>