:root{
    --tp-anthracite:#1a1a1d;
    --tp-anthracite-2:#242428;
    --tp-graphite:#303034;
    --tp-gray:#929292;
    --tp-gray-soft:#d8d8d8;
    --tp-gray-line:#e7e7e7;
    --tp-white:#fefefe;
    --tp-paper:#f6f6f4;
    --tp-purple:#8037c7;
    --tp-purple-dark:#5f1fa1;
    --tp-lime:#dded32;
    --tp-red:#d93636;
    --tp-green:#34a853;
    --tp-orange:#e09b22;
    --tp-radius:0;
    --tp-font:'Roboto',Arial,Helvetica,sans-serif;
    --tp-mono:'Roboto Mono','Courier New',monospace;
    --tp-shadow:10px 10px 0 rgba(26,26,29,.08);
}
*{box-sizing:border-box}
html{min-height:100%}
body{
    margin:0;
    min-height:100%;
    color:var(--tp-anthracite);
    font:15px/1.55 var(--tp-font);
    background:
        linear-gradient(90deg,rgba(26,26,29,.05) 1px,transparent 1px),
        linear-gradient(rgba(26,26,29,.05) 1px,transparent 1px),
        radial-gradient(circle at 84px 84px,rgba(128,55,199,.16),transparent 28px),
        radial-gradient(circle at calc(100% - 140px) 120px,rgba(221,237,50,.32),transparent 38px),
        var(--tp-paper);
    background-size:32px 32px,32px 32px,auto,auto,auto;
}
body:before{
    content:"{ }";
    position:fixed;
    right:38px;
    bottom:18px;
    color:rgba(26,26,29,.035);
    font:900 220px/1 var(--tp-mono);
    pointer-events:none;
    z-index:-1;
}
a{color:var(--tp-purple);text-decoration:none;transition:.16s ease}
a:hover{color:var(--tp-purple-dark)}
.layout{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:100vh}
.sidebar{
    position:sticky;
    top:0;
    height:100vh;
    padding:28px 22px;
    color:var(--tp-white);
    background:
        linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
        linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
        var(--tp-anthracite);
    background-size:24px 24px,24px 24px,auto;
    border-right:6px solid var(--tp-purple);
    overflow:auto;
}
.sidebar:after{
    content:"PIXEL / CODE / SYSTEM";
    position:absolute;
    left:22px;
    top:calc(100% - 132px);
    color:rgba(254,254,254,.08);
    font:700 11px/1 var(--tp-mono);
    letter-spacing:.18em;
    pointer-events:none;
}
.brand{display:grid;grid-template-columns:58px minmax(0,1fr);gap:14px;align-items:center;margin-bottom:34px;padding-bottom:24px;border-bottom:1px solid rgba(254,254,254,.16)}
.brand img{
    width:58px;
    height:58px;
    object-fit:contain;
    padding:9px;
    background:var(--tp-white);
    border:2px solid var(--tp-lime);
}
.brand strong{
    display:block;
    color:var(--tp-white);
    font:900 21px/1 var(--tp-font);
    letter-spacing:.04em;
}
.brand strong:before{content:"//";color:var(--tp-lime);font-family:var(--tp-mono);margin-right:6px}
.brand span{
    display:block;
    margin-top:8px;
    color:rgba(254,254,254,.72);
    font:500 11px/1.35 var(--tp-mono);
    text-transform:lowercase;
}
.nav{display:grid;gap:8px}
.nav a{
    position:relative;
    display:flex;
    align-items:center;
    min-height:46px;
    padding:12px 14px 12px 20px;
    color:rgba(254,254,254,.78);
    border:1px solid rgba(254,254,254,.12);
    background:rgba(254,254,254,.025);
    font:700 13px/1.2 var(--tp-mono);
    text-transform:uppercase;
    letter-spacing:.04em;
}
.nav a:before{
    content:"";
    position:absolute;
    left:8px;
    width:6px;
    height:6px;
    background:rgba(254,254,254,.28);
}
.nav a:hover{color:var(--tp-white);border-color:rgba(221,237,50,.6);transform:translateX(2px)}
.nav a.active{
    color:var(--tp-anthracite);
    background:var(--tp-lime);
    border-color:var(--tp-lime);
}
.nav a.active:before{background:var(--tp-purple)}
.sidebar-user{
    position:absolute;
    left:22px;
    right:22px;
    bottom:24px;
    padding:14px;
    border:1px solid rgba(254,254,254,.16);
    background:rgba(254,254,254,.04);
}
.sidebar-user span{display:block;color:var(--tp-lime);font:700 10px/1 var(--tp-mono);letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px}
.sidebar-user b{display:block;color:var(--tp-white);font-weight:700;margin-bottom:8px}
.sidebar-user a{color:rgba(254,254,254,.8);font-family:var(--tp-mono);font-size:12px}
.main{min-width:0;padding:34px clamp(22px,4vw,56px) 56px}
.topbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    margin:0 0 30px;
    padding:30px;
    color:var(--tp-white);
    background:
        linear-gradient(90deg,rgba(221,237,50,.22) 1px,transparent 1px),
        linear-gradient(rgba(221,237,50,.14) 1px,transparent 1px),
        var(--tp-anthracite);
    background-size:28px 28px,28px 28px,auto;
    border:2px solid var(--tp-anthracite);
    box-shadow:var(--tp-shadow);
}
.eyebrow{
    margin-bottom:12px;
    color:var(--tp-lime);
    font:700 12px/1 var(--tp-mono);
    letter-spacing:.14em;
    text-transform:uppercase;
}
.h1{
    max-width:900px;
    color:var(--tp-white);
    font:900 clamp(30px,4.2vw,58px)/.95 var(--tp-font);
    letter-spacing:-.04em;
    text-transform:uppercase;
}
.topbar .muted{max-width:820px;margin-top:16px;color:rgba(254,254,254,.72);font:500 14px/1.55 var(--tp-mono)}
.badge{
    flex:0 0 auto;
    padding:12px 14px;
    color:var(--tp-anthracite);
    background:var(--tp-lime);
    border:2px solid var(--tp-lime);
    font:900 13px/1 var(--tp-mono);
    text-transform:uppercase;
}
.card,.panel,.box,form,.table-wrap{
    background:var(--tp-white);
    border:2px solid var(--tp-anthracite);
    box-shadow:8px 8px 0 rgba(26,26,29,.08);
}
.card,.panel,.box{padding:24px;margin:0 0 22px}
.card h2,.panel h2,.box h2,h2{
    margin:0 0 18px;
    color:var(--tp-anthracite);
    font:900 24px/1.1 var(--tp-font);
    letter-spacing:-.02em;
    text-transform:uppercase;
}
.card h2:before,.panel h2:before,.box h2:before,h2:before{content:"//";color:var(--tp-purple);font-family:var(--tp-mono);margin-right:8px}
h3{margin:0 0 14px;font:900 18px/1.2 var(--tp-font);text-transform:uppercase}
.muted{color:#686868}.small{font-size:12px}.mono,code{font-family:var(--tp-mono)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.grid>*{grid-column:span 4}.grid.two>*{grid-column:span 6}.grid.one>*{grid-column:span 12}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 26px}.stat{position:relative;padding:22px;background:var(--tp-white);border:2px solid var(--tp-anthracite);box-shadow:7px 7px 0 rgba(128,55,199,.16)}
.stat:before{content:"";position:absolute;right:16px;top:16px;width:12px;height:12px;background:var(--tp-lime);box-shadow:16px 0 0 var(--tp-purple),0 16px 0 var(--tp-anthracite)}
.stat b{display:block;color:var(--tp-anthracite);font:900 38px/.9 var(--tp-mono);letter-spacing:-.06em}.stat span{display:block;margin-top:10px;color:#646464;font:700 11px/1.2 var(--tp-mono);letter-spacing:.08em;text-transform:uppercase}
.btn,button,input[type=submit],.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:42px;
    padding:12px 18px;
    color:var(--tp-anthracite)!important;
    background:var(--tp-lime);
    border:2px solid var(--tp-anthracite);
    box-shadow:4px 4px 0 var(--tp-anthracite);
    font:900 12px/1 var(--tp-mono);
    text-transform:uppercase;
    letter-spacing:.06em;
    cursor:pointer;
    transition:.14s ease;
}
.btn:hover,button:hover,input[type=submit]:hover,.button:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--tp-anthracite);color:var(--tp-anthracite)!important}
.btn.secondary,.button.secondary{background:var(--tp-white);color:var(--tp-anthracite)!important}.btn.danger,.button.danger{background:#fff;color:var(--tp-red)!important;border-color:var(--tp-red);box-shadow:4px 4px 0 var(--tp-red)}
form{padding:24px;margin:0 0 22px}label{display:block;margin:0 0 14px;color:var(--tp-anthracite);font:700 13px/1.35 var(--tp-mono);text-transform:uppercase;letter-spacing:.03em}
input,select,textarea{
    width:100%;
    min-height:42px;
    margin-top:7px;
    padding:11px 12px;
    color:var(--tp-anthracite);
    background:#fff;
    border:2px solid var(--tp-anthracite);
    border-radius:0;
    font:500 14px/1.4 var(--tp-font);
    outline:none;
}
textarea{min-height:110px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--tp-purple);box-shadow:0 0 0 3px rgba(128,55,199,.16)}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;margin:0 8px 0 0;accent-color:var(--tp-purple)}
table{width:100%;border-collapse:collapse;background:var(--tp-white);border:2px solid var(--tp-anthracite);overflow:hidden}th,td{padding:14px 15px;border-bottom:1px solid var(--tp-gray-line);vertical-align:top;text-align:left}th{color:var(--tp-white);background:var(--tp-anthracite);font:700 11px/1.25 var(--tp-mono);letter-spacing:.09em;text-transform:uppercase}tr:hover td{background:#fbfbef}td code{display:inline-block;padding:3px 6px;background:#f1f1f1;border:1px solid #ddd;color:var(--tp-purple);font-size:12px}
.alert,.notice{padding:16px 18px;margin:0 0 22px;border:2px solid var(--tp-anthracite);background:var(--tp-white);box-shadow:5px 5px 0 rgba(26,26,29,.08);font-weight:500}.alert:before,.notice:before{content:"// ";color:var(--tp-purple);font-family:var(--tp-mono);font-weight:900}.success{border-color:var(--tp-green)}.error{border-color:var(--tp-red)}
hr{border:0;border-top:2px solid var(--tp-anthracite);margin:24px 0}.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{display:inline-flex;align-items:center;min-height:28px;padding:6px 10px;background:var(--tp-white);border:1px solid var(--tp-anthracite);font:700 11px/1 var(--tp-mono);text-transform:uppercase}.chip.purple{background:var(--tp-purple);color:#fff}.chip.lime{background:var(--tp-lime);color:var(--tp-anthracite)}
@media(max-width:980px){.layout{grid-template-columns:1fr}.sidebar{position:relative;height:auto;border-right:0;border-bottom:6px solid var(--tp-purple)}.sidebar-user{position:static;margin-top:22px}.main{padding:22px}.topbar{display:block}.badge{display:inline-flex;margin-top:18px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.grid>*{grid-column:span 12}.grid.two>*{grid-column:span 12}}
@media(max-width:640px){.main{padding:16px}.topbar{padding:22px;box-shadow:6px 6px 0 rgba(26,26,29,.1)}.h1{font-size:32px}.stats{grid-template-columns:1fr}th,td{padding:11px 10px}.card,.panel,.box,form{padding:18px}}

/* v1.0.3: пошаговый мастер создания приложения */
.app-actions-top{margin:0 0 22px}
.app-wizard{position:relative;overflow:hidden}
.wizard-head{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin:-4px 0 26px;
    padding:0 0 22px;
    border-bottom:2px solid var(--tp-anthracite);
}
.wizard-step{
    position:relative;
    min-height:72px;
    padding:14px 12px 14px 58px;
    background:#fff;
    border:2px solid var(--tp-anthracite);
    color:var(--tp-anthracite);
}
.wizard-step span{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    width:34px;
    height:34px;
    align-items:center;
    justify-content:center;
    background:var(--tp-white);
    border:2px solid var(--tp-anthracite);
    font:900 14px/1 var(--tp-mono);
}
.wizard-step b{
    display:block;
    margin-top:7px;
    font:900 13px/1.15 var(--tp-mono);
    text-transform:uppercase;
    letter-spacing:.04em;
}
.wizard-step:before{
    content:"//";
    position:absolute;
    top:10px;
    right:12px;
    color:var(--tp-purple);
    font:900 14px/1 var(--tp-mono);
}
.wizard-step.is-active{
    background:var(--tp-lime);
    box-shadow:5px 5px 0 var(--tp-anthracite);
}
.wizard-step.is-done{
    background:var(--tp-anthracite);
    color:var(--tp-white);
}
.wizard-step.is-done span{background:var(--tp-purple);color:var(--tp-white);border-color:var(--tp-white)}
.wizard-page{display:none;animation:wizardIn .18s ease}
.wizard-page.is-active{display:block}
@keyframes wizardIn{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}
.wizard-controls{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    margin-top:28px;
    padding-top:22px;
    border-top:2px solid var(--tp-anthracite);
}
.checkline{
    display:flex;
    align-items:center;
    gap:8px;
    margin:18px 0 12px;
    padding:12px 14px;
    background:#fbfbef;
    border:1px dashed var(--tp-anthracite);
    text-transform:none;
    letter-spacing:0;
}
.checkline input{margin:0;width:auto}
.notice-box{
    margin:16px 0 18px;
    padding:16px 18px;
    border:2px solid var(--tp-anthracite);
    background:linear-gradient(90deg,rgba(221,237,50,.22),rgba(128,55,199,.08));
    font:500 14px/1.55 var(--tp-font);
}
.notice-box b{font-weight:900}
.code,.code code{
    display:inline-block;
    padding:2px 6px;
    background:#f3f3f3;
    border:1px solid var(--tp-gray-line);
    color:var(--tp-purple);
    font-family:var(--tp-mono);
    font-size:.92em;
}
input[readonly]{background:#f4f4f4;color:#545454;cursor:not-allowed}
.badge.draft{background:#fff;color:var(--tp-anthracite);border-color:var(--tp-anthracite)}
.badge.active{background:var(--tp-lime);color:var(--tp-anthracite);border-color:var(--tp-lime)}
.badge.disabled{background:#fff;color:var(--tp-red);border-color:var(--tp-red)}
.alert.err,.alert.error,.err{border-color:var(--tp-red)}
@media(max-width:900px){.wizard-head{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.wizard-head{grid-template-columns:1fr}.wizard-controls .btn,.wizard-controls button{width:100%}}


/* v1.1.0: коммерческий контур */
.inline-form{padding:0!important;margin:0!important;border:0!important;box-shadow:none!important;background:transparent!important}
.inline-form input,.inline-form select,.inline-form textarea{margin-top:0}
.billing-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 24px}
.billing-card{background:var(--tp-white);border:2px solid var(--tp-anthracite);box-shadow:7px 7px 0 rgba(128,55,199,.13);padding:18px}
.billing-card b{display:block;font:900 30px/1 var(--tp-mono);margin-top:8px}
.status-dot{display:inline-flex;align-items:center;gap:7px;font:700 11px/1.2 var(--tp-mono);text-transform:uppercase}
.status-dot:before{content:"";width:8px;height:8px;background:var(--tp-gray)}
.status-dot.active:before,.status-dot.paid:before{background:var(--tp-green)}
.status-dot.paused:before,.status-dot.pending:before,.status-dot.issued:before,.status-dot.draft:before{background:var(--tp-orange)}
.status-dot.blocked:before,.status-dot.failed:before,.status-dot.overdue:before,.status-dot.cancelled:before,.status-dot.expired:before{background:var(--tp-red)}
.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.form-grid .wide{grid-column:span 2}.form-grid .full{grid-column:1/-1}
.commercial-note{padding:14px 16px;margin:0 0 18px;background:#fbfbef;border:1px dashed var(--tp-anthracite)}
@media(max-width:1000px){.billing-summary{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.billing-summary,.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:span 1}}