:root{
--bg:#f4f6f8;
--surface:#fff;
--ink:#182336;
--muted:#788295;
--line:#e7ebf1;
--primary:#4168e8;
--primary-dark:#2f50bd;
--nav:#142136;
--green:#19785d;
--radius:16px;
font-family:Inter,"Segoe UI",Arial,sans-serif;
color:var(--ink);
font-size:14px}
*{
box-sizing:border-box}
body{
margin:0;
background:var(--bg)}
a{
color:var(--primary);
text-decoration:none}
button,input,select,textarea{
font:inherit}
button,a,input,select,textarea{
outline-offset:4px}
button{
cursor:pointer}
h1,h2,p{
margin:0}
h1{
font-size:32px;
letter-spacing:-1px;
line-height:1.2}
h2{
font-size:17px;
letter-spacing:-.35px}
p{
color:var(--muted);
line-height:1.6}
small{
font-size:11px;
color:var(--muted)}
.app-shell{
display:flex;
min-height:100vh}
.sidebar{
width:246px;
background:var(--nav);
color:#c5cedd;
padding:30px 18px;
position:fixed;
inset:0 auto 0 0;
display:flex;
flex-direction:column;
overflow-y:auto}
.brand{
display:flex;
align-items:center;
gap:12px;
color:#fff;
font-size:24px;
font-weight:700;
padding:0 10px}
.brand small{
display:block;
font-size:8px;
letter-spacing:1.6px;
margin-top:4px;
color:#7e91ac}
.brand-mark{
background:#4c72ec;
color:#fff;
border-radius:12px;
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
font-weight:800;
font-size:25px}
.workspace{
display:flex;
gap:10px;
align-items:center;
margin:30px 6px 26px;
padding:15px 8px;
border-block:1px solid #2a364a;
font-size:12px}
.workspace small{
display:block;
margin-top:5px;
font-size:9px;
color:#8a9ab1}
.status-dot{
background:#7bd5b9;
width:7px;
height:7px;
border-radius:50%}
.nav-label{
font-size:9px;
letter-spacing:1.6px;
color:#6e829d;
padding:0 15px 10px}
nav{
display:grid;
gap:3px}
nav a{
padding:10px 13px;
border-radius:8px;
color:#a9b8ce;
display:flex;
align-items:center;
gap:12px;
font-size:12px}
nav a:hover{
background:#20324d;
color:white}
nav a.active{
color:white;
background:#3151a6}
.nav-icon{
font-size:17px;
width:20px;
text-align:center}
.sidebar-footer{
margin-top:auto;
padding:28px 8px 12px;
display:flex;
gap:10px;
align-items:center;
font-size:11px}
.sidebar-footer small{
display:block;
font-size:9px;
margin-top:5px}
.avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:33px;
height:33px;
border-radius:11px;
background:#e8edff;
color:#5673c1;
font-size:11px;
font-weight:700;
flex-shrink:0}
.logout{
background:transparent;
border:0;
color:#90a3bc;
padding:8px;
width:100%;
font-size:11px;
text-align:left}
.main-content{
margin-left:246px;
flex:1;
min-width:0}
.topbar{
height:72px;
border-bottom:1px solid var(--line);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 38px;
font-size:11px;
background:#fff;
color:var(--muted)}
.breadcrumb{
color:#25344c;
margin-left:12px}
.date{
font-size:10px}
.page-content{
padding:32px 38px;
max-width:1700px;
margin:auto}
.page-heading{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:28px}
.eyebrow{
font-size:9px;
font-weight:700;
letter-spacing:2px;
color:var(--primary);
margin-bottom:10px}
.page-heading p{
margin-top:10px;
font-size:12px}
.badge,.tag{
display:inline-block;
padding:6px 9px;
border-radius:6px;
color:#75839a;
background:#f0f3f8;
font-size:9px;
font-weight:700;
letter-spacing:.8px;
white-space:nowrap}
.badge{
background:#e9edf9;
color:#6d81b3}
.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin-bottom:24px}
.stat-card{
border:1px solid var(--line);
border-radius:var(--radius);
background:#fff;
padding:23px;
position:relative;
box-shadow:0 3px 12px #152b5103}
.stat-card>span{
display:block;
font-size:11px;
color:#77839a}
.stat-card strong{
display:block;
margin:18px 0 8px;
font-size:34px;
font-weight:650;
letter-spacing:-1px}
.stat-card i{
position:absolute;
right:21px;
top:19px;
background:#edf1ff;
color:#5a7cde;
width:30px;
height:30px;
border-radius:9px;
display:grid;
place-items:center;
font-size:18px;
font-style:normal}
.stat-card small{
font-size:10px}
.dashboard-grid{
display:grid;
grid-template-columns:1.5fr 1fr;
gap:24px}
.card{
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--radius);
padding:25px;
margin-bottom:22px;
min-width:0;
box-shadow:0 3px 12px #152b5103}
.card-heading{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:15px;
margin-bottom:23px}
.card-heading p{
font-size:11px;
margin-top:7px}
.card p{
font-size:12px}
.card.muted{
background:#edf1f6;
margin-top:25px}
.card.muted p{
margin-top:10px}
.bar-chart{
display:flex;
align-items:stretch;
justify-content:space-around;
gap:18px;
height:250px;
padding:12px 8px 0;
margin-top:25px}
.bar-column{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
gap:11px;
min-width:0}
.bar-column>span{
font-size:10px;
color:#6b7b99}
.bar-track{
height:190px;
width:100%;
display:flex;
align-items:flex-end;
border-bottom:1px solid var(--line)}
.bar{
width:100%;
min-height:3px;
background:#6280e9;
border-radius:7px 7px 0 0}
.bar-column:last-child .bar{
background:#335bcc}
.chart-footer{
display:flex;
justify-content:space-between;
border-top:1px solid var(--line);
padding-top:22px;
margin-top:25px;
font-size:11px;
color:var(--muted)}
.chart-footer strong{
color:#25334c;
font-weight:600}
.leader-row{
display:flex;
align-items:center;
gap:12px;
padding:13px 0;
border-bottom:1px solid #f0f2f6}
.leader-row:last-child{
border:0}
.rank-number{
font-size:10px;
color:#9da6b8;
width:12px}
.leader-name{
flex:1;
font-size:12px;
min-width:0;
overflow-wrap:anywhere}
.leader-name small{
display:block;
margin-top:4px;
font-size:9px}
.leader-row>strong{
font-size:12px}
.leader-row strong small{
font-weight:400;
font-size:9px}
.notice{
padding:14px 18px;
border-radius:10px;
background:#edf2ff;
color:#526c9f;
line-height:1.7;
margin-bottom:20px;
font-size:12px}
.notice.success{
background:#e6f5ef;
color:#23735d}
.notice.error{
background:#fff0ed;
color:#a94335}
.form-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:18px;
margin-bottom:19px}
.form-grid.two{
grid-template-columns:repeat(2,minmax(0,1fr))}
label{
display:flex;
flex-direction:column;
font-size:11px;
font-weight:600;
gap:8px;
margin-bottom:16px;
color:#536078}
input,select,textarea{
width:100%;
border:1px solid #dfe5ee;
border-radius:8px;
padding:10px 12px;
background:#fff;
color:#293852;
min-height:40px;
font-size:12px}
textarea{
min-height:98px;
resize:vertical;
line-height:1.6}
input:focus,select:focus,textarea:focus{
outline:2px solid #b4c4ff;
border-color:#7594f7}
input::placeholder,textarea::placeholder{
color:#a0a9b9;
font-size:11px}
input[type=checkbox]{
width:16px;
min-height:16px;
height:16px;
accent-color:var(--primary);
margin:0}
.check{
flex-direction:row;
align-items:center;
gap:9px;
font-size:11px;
font-weight:400}
.switch{
display:flex;
flex-direction:row;
align-items:center;
font-size:10px;
gap:7px;
white-space:nowrap}
.button{
border:0;
border-radius:8px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:13px;
padding:11px 17px;
min-height:40px;
font-size:11px;
font-weight:600;
white-space:nowrap}
.button.primary{
background:var(--primary);
color:#fff}
.button.primary:hover{
background:var(--primary-dark)}
.button.secondary{
background:#edf1f7;
color:#597090}
.button.small{
min-height:30px;
padding:7px 11px;
font-size:10px}
.button span{
margin-left:auto}
.save-bar{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
background:#fff;
padding:18px 23px;
border:1px solid var(--line);
border-radius:12px;
margin-bottom:25px}
.save-bar>span{
font-size:11px;
color:var(--muted)}
.rule-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 22px}
.permission-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
margin:12px 0 20px}
.permission-grid label{
background:#f6f8fb;
padding:10px;
border-radius:7px;
overflow-wrap:anywhere;
font-size:10px}
.table-scroll{
overflow:auto}
table{
width:100%;
border-collapse:collapse;
text-align:left;
font-size:11px}
th{
text-transform:uppercase;
letter-spacing:.7px;
font-size:9px;
color:#8995a8;
font-weight:600;
border-bottom:1px solid var(--line);
padding:13px 12px;
white-space:nowrap}
td{
padding:16px 12px;
border-bottom:1px solid #edf0f5;
vertical-align:top;
max-width:360px;
overflow-wrap:anywhere;
line-height:1.6}
td small{
display:block;
font-size:9px;
margin-top:4px}
td strong{
font-weight:600}
td .mono{
font-size:8px}
.mono{
font-family:Consolas,monospace;
font-size:10px}
tbody tr:last-child td{
border-bottom:0}
.search-row{
display:flex;
gap:10px;
max-width:650px;
margin-bottom:22px}
.search-row input{
flex:1}
.empty-state{
text-align:center;
color:#95a1b5;
padding:50px 20px;
line-height:1.8;
font-size:12px}
.pagination{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
margin-top:22px}
.pagination>span{
font-size:10px;
color:var(--muted)}
.page-footer{
border-top:1px solid var(--line);
padding-top:24px;
margin-top:34px;
font-size:9px;
color:#99a4b6}
.page-footer>span{
margin:0 8px}
.footer-right{
float:right}
.positive{
color:#21866a}
.negative{
color:#c1585e}
.tag.danger{
color:#a54b46;
background:#ffefec}
.balance-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px}
.balance-grid strong{
display:block;
font-size:23px;
color:#354c89;
font-weight:600}
.balance-grid span{
display:block;
font-size:10px;
color:var(--muted);
margin-top:5px}
.login-wrap{
display:grid;
grid-template-columns:1fr 1fr;
min-height:100vh;
background:#fff}
.login-card{
padding:12vh 10%;
max-width:650px;
margin:auto;
width:100%}
.login-card>.brand-mark{
margin-bottom:55px}
.login-card .eyebrow{
font-size:9px}
.login-card h1{
font-size:45px;
letter-spacing:-1.8px;
margin:20px 0;
line-height:1.15}
.login-card>p{
margin-bottom:32px;
font-size:14px}
.login-card>.button{
width:100%;
min-height:48px;
font-size:12px}
.login-card>small{
display:block;
margin-top:17px;
font-size:10px}
.login-art{
position:relative;
overflow:hidden;
background:#192c4c;
display:flex;
flex-direction:column;
justify-content:center;
padding:10%;
color:#fff}
.login-art>strong{
z-index:1;
font-size:48px;
line-height:1.2;
letter-spacing:-1.8px;
font-weight:600}
.login-art>span{
z-index:1;
font-size:14px;
color:#a3b9df;
line-height:1.8;
margin-top:25px}
.orbit{
position:absolute;
border:1px solid #7895ca26;
border-radius:50%;
width:650px;
height:650px;
top:30%;
left:10%}
.orbit.two{
width:500px;
height:500px;
top:40%;
left:25%}
.orbit.three{
width:350px;
height:350px;
top:50%;
left:40%;
background:#6285cf0d}
@media(min-width:1600px){
.page-content{
padding:42px 55px}
.stat-card{
padding:28px}
.bar-chart{
height:300px}
.bar-track{
height:240px}
}
@media(max-width:1150px){
.sidebar{
width:210px}
.main-content{
margin-left:210px}
.page-content{
padding:26px 22px}
.stats-grid{
gap:10px}
.stat-card{
padding:18px}
.stat-card i{
display:none}
.dashboard-grid{
grid-template-columns:1fr}
.permission-grid{
grid-template-columns:repeat(2,1fr)}
.balance-grid{
grid-template-columns:repeat(3,1fr)}
}
@media(max-width:780px){
.app-shell{
display:block}
.sidebar{
position:static;
width:100%;
padding:15px}
.brand{
font-size:20px}
.workspace,.nav-label,.sidebar-footer,.sidebar>form{
display:none}
nav{
display:flex;
overflow-x:auto;
margin-top:15px}
nav a{
white-space:nowrap}
.main-content{
margin:0}
.topbar{
padding:0 20px;
height:52px}
.date{
display:none}
.page-content{
padding:24px 16px}
.stats-grid{
grid-template-columns:repeat(2,1fr)}
h1{
font-size:28px}
.badge{
display:none}
.rule-grid{
grid-template-columns:1fr}
.form-grid.two{
grid-template-columns:1fr}
.form-grid{
gap:0}
.card{
padding:20px}
.save-bar{
align-items:flex-start;
flex-direction:column}
.permission-grid{
grid-template-columns:1fr}
.footer-right{
float:none;
display:block;
margin:10px 0!important}
.bar-chart{
gap:10px}
.login-wrap{
grid-template-columns:1fr}
.login-art{
display:none}
.login-card h1{
font-size:37px}
.login-card{
padding:9vh 8%}
.pagination{
gap:10px}
.pagination>span{
font-size:9px}
}
/* Shared administration forms and compact detail cards. */
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-bottom:20px; min-width:0; }
.panel>h2,.panel>h3 { margin-bottom:16px; }
.panel>p { margin:10px 0; }
.panel form { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:16px; margin:16px 0; align-items:end; }
.panel form>fieldset { grid-column:1/-1; }
.panel form>button { justify-self:start; }
.panel fieldset { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:16px; border:1px solid var(--line); border-radius:10px; padding:16px; margin:0; }
.panel legend { font-weight:600; padding:0 8px; }
.panel label { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:12px; min-width:0; }
.panel label:has(input[type=checkbox]) { flex-direction:row; align-items:center; color:var(--ink); }
input[type=checkbox] { flex-shrink:0; accent-color:var(--primary); }
.panel input:not([type=checkbox]):not([type=hidden]),.panel select,.panel textarea { width:100%; min-width:0; padding:11px 12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:8px; }
.panel textarea { min-height:100px; resize:vertical; }
.page-content button:not([class]),.panel button { background:var(--primary); color:white; border:0; border-radius:8px; padding:11px 16px; font-weight:600; min-height:40px; }
.panel button.danger { background:#b83e4e; }
details.panel>summary { cursor:pointer; font-size:15px; font-weight:600; padding:3px 0; line-height:1.6; }
details.panel[open]>summary { margin-bottom:18px; border-bottom:1px solid var(--line); padding-bottom:14px; }
.panel details { padding:12px 0; border-bottom:1px solid var(--line); }
.panel details>summary { cursor:pointer; }
.status-grid { display:grid; grid-template-columns:minmax(150px,1fr) 2fr; gap:14px 24px; margin:20px 0; }
.status-grid dt { color:var(--muted); }.status-grid dd { margin:0; overflow-wrap:anywhere; }
.activity-row { display:grid; grid-template-columns:110px minmax(100px,1fr) 60px; gap:14px; padding:5px 0; font-size:12px; }
.activity-row meter { width:100%; }
.search-row { flex-wrap:wrap; align-items:end; }.search-row label { flex:1; min-width:130px; }
.confirm { padding:10px; background:#fff8eb; border-radius:8px; }
@media(max-width:700px) { .panel { padding:18px; }.panel form,.panel fieldset { grid-template-columns:1fr; }.status-grid { grid-template-columns:1fr; gap:5px; }.status-grid dd { margin-bottom:12px; }.pagination { justify-content:space-between; } }
.card>details { padding:12px 0; border-bottom:1px solid var(--line); }.card>details>summary { cursor:pointer; font-weight:600; }.card>details[open]>summary { margin-bottom:16px; }.panel.search-row { max-width:none; }
.template-workspace{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;align-items:start}.template-library{position:sticky;top:20px;max-height:85vh;overflow:auto}.template-library nav{display:flex;flex-direction:column;gap:4px}.template-library nav a{padding:8px 10px;border-radius:8px;text-decoration:none}.template-library nav a.active{background:#e8eaff;color:#4546bc}.template-library nav a[hidden]{display:none}.template-library small{display:block;opacity:.65}.builder-toolbar{display:flex;gap:12px;align-items:end}.builder-toolbar label{flex:1}.response-block{border:1px solid #d8dce8;background:#fafbff;border-radius:12px;padding:14px;margin:10px 0}.block-heading{display:flex;align-items:center;gap:10px;margin-bottom:10px}.block-controls{margin-left:auto;display:flex;gap:4px}.block-tool{border:1px solid #d8dce8;border-radius:6px;background:white;padding:5px 10px;color:#303448;cursor:pointer}.block-grip{cursor:grab;font-size:22px;padding:0 8px}.response-block.drop-target{outline:2px solid #6d69e8}.response-block textarea{min-height:64px}.block-drop-end{padding:10px;border:1px dashed #ccd1df;font-size:12px;color:#6b7183;border-radius:8px}.block-list .block-list{margin-left:12px;border-left:2px solid #ddd;padding-left:12px}.emoji-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px;padding:10px 0}.emoji-picker button{font-size:22px}.template-preview-panel{background:#e8eef2;padding:20px;border-radius:14px;margin:24px 0}.telegram-preview{white-space:pre-wrap;overflow-wrap:anywhere;background:white;border-radius:14px 14px 14px 3px;box-shadow:0 2px 8px #0001;padding:18px;margin-top:14px;line-height:1.6;color:#17252e}.telegram-preview a{color:#2487b6}.telegram-preview tg-spoiler{background:#dce3e9;border-radius:3px}.telegram-preview blockquote{border-left:3px solid #2487b6;padding-left:12px;margin:6px 0}.muted{font-size:13px;opacity:.7}@media(max-width:1000px){.template-workspace{grid-template-columns:1fr}.template-library{position:static;max-height:250px}}
.template-library nav a{color:#34445d}.template-library nav a.active{color:#4546bc}.template-library nav h3{color:#667089;font-size:12px;margin:18px 8px 4px}.template-library nav a small{font-size:11px}.template-workspace [data-block-list]{max-height:480px;overflow:auto;padding-right:8px;scrollbar-gutter:stable}.response-block{padding:10px}.response-block>label{display:flex;gap:12px;align-items:center;justify-content:space-between;font-size:12px;margin:6px 0}.response-block>label>select{width:68%;padding:6px 9px;min-height:32px}.response-block>label>textarea{min-height:44px}.block-heading{margin-bottom:6px}.block-tool{padding:4px 8px}.template-preview-panel{margin-top:18px}.template-library{max-height:70vh}

.block-grip { touch-action: none; user-select: none; }
.relationship-tabs{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding:14px;margin-bottom:24px}.relationship-tabs a{display:inline-flex;width:auto;padding:10px 14px;color:#4546bc;background:#f0f1ff;border-radius:8px;text-decoration:none}.relationship-tabs a:hover{background:#e3e5ff;color:#30318d}

.template-import-dialog { width: min(760px, calc(100vw - 32px)); max-height: 85vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: var(--surface); color: var(--ink); }
.template-import-dialog::backdrop { background: #020617bb; }
.template-import-dialog textarea { width: 100%; }
.template-import-dialog .builder-toolbar { flex-wrap: wrap; margin: 12px 0; }