:root{
    --primary:#009fe3;
    --primary-strong:#009fe3;
    --accent:#1890ff;
    --bg:#eef3fb;
    --sheet:#fff;
    --line:#9aa7b7;
    --soft:#f7faff;
    --danger:#cf1322;
    --text:#1f2937;
    --muted:#687385;
    --radius:14px
}

*{
    box-sizing:border-box
}

body{
    margin:0;
    min-height:100vh;
    background:linear-gradient(135deg,#edf4ff,#f8fafc);
    font-family:Nunito,Arial,sans-serif;
    color:var(--text);
    padding:22px 12px
}

.container{
    width:min(1180px,100%);
    margin:auto;background:#fff;
    border-radius:18px;
    box-shadow:0 18px 45px rgba(15,23,42,.12);
    padding:22px;
    border:1px solid #e5eaf3
}

.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:18px
}

.logo-box{
    display:flex;
    gap:14px;
    align-items:center
}

.smd-logo{
    height:70px;
    width:auto
}

.header h1{
    font-size:1.35rem;
    margin:0;
    color:var(--primary-strong);
    font-weight:800;
    text-transform:uppercase
}

.header p{
    margin:2px 0 0;
    color:var(--muted)
}

.meta-pill{
    background:#e8f1ff;
    color:var(--primary-strong);
    padding:8px 12px;
    border-radius:999px;
    font-weight:700;
    font-size:.82rem
}

.stepper{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:8px;
    margin:18px 0
}

.step{
    padding:9px 10px;
    background:#f2f5fa;
    border-radius:999px;
    color:var(--muted);
    font-size:.82rem;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:7px
}

.step span{
    width:23px;
    height:23px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#dbe3ee;
    color:#334155
}
.step.active{
    background:#e8f1ff;
    color:var(--primary-strong)
}

.step.active span,.step.completed span{
    background:linear-gradient(135deg,var(--primary),var(--accent));
    color:#fff
}

.step-content{
    display:none
}

.step-content.active{
    display:block;
    animation:fade .18s ease
}

@keyframes fade{
    from{opacity:0;
    transform:translateY(5px)
}
to
{
    opacity:1;
    transform:none}
}

.sheet-card{
    background:#fff;
    border:1.6px solid var(--line);
    border-radius:8px;
    padding:16px;
    box-shadow:inset 0 0 0 1px #eef2f7
}

.section-title{
    background:var(--primary-strong);
    color:#fff;
    font-weight:800;
    padding:8px 10px;
    border-radius:4px;
    margin-bottom:14px;
    text-transform:uppercase;
    letter-spacing:.02em
}

h3{
    font-size:.95rem;
    color:var(--primary-strong);
    margin:16px 0 8px;
    border-left:4px solid var(--accent);
    padding-left:8px
}

h4{
    margin:0 0 8px;
    color:var(--primary-strong)
}

.grid{
    display:grid;
    gap:12px
}

.grid-2{
    grid-template-columns:repeat(2,minmax(0,1fr))
}

.grid-3{
    grid-template-columns:repeat(3,minmax(0,1fr))
}

label{
    display:flex;
    flex-direction:column;
    gap:5px;
    font-size:.82rem;
    font-weight:700;
    color:#263342
}

input,select,textarea{
    width:100%;
    border:1px solid #cbd5e1;
    border-radius:7px;
    padding:8px 9px;
    font:inherit;
    background:#fff;
    outline:none
}

input:focus,select:focus,textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 2px rgba(24,144,255,.16)
}

textarea{
    min-height:90px;
    resize:vertical
}

.notice,.file-box{
    margin-top:14px;
    border:1px dashed #9db7df;
    background:#f3f8ff;
    border-radius:10px;padding:12px
}

.notice small{
    color:var(--muted);
    margin-top:5px
}

.table-grid{
    display:grid;
    gap:0;
    border:1px solid #8ea1b8;
    border-bottom:0;
    border-right:0;
    margin-bottom:12px
}

.table-grid>*{
    border-right:1px solid #8ea1b8;
    border-bottom:1px solid #8ea1b8;
    border-radius:0;
    min-height:34px;
    display:flex;
    align-items:center;
    padding:7px;
    background:#fff
}

.table-grid strong{
    background:#e8f1ff;
    color:var(--primary-strong);
    justify-content:center
}

.table-grid input{
    border:0;
    border-radius:0;
    height:100%
}

.five-cols{
    grid-template-columns:1fr 1fr 1fr 1fr 1.4fr
}

.four-cols{
    grid-template-columns:1fr 1fr 1fr 1fr
}

.two-cols{
    grid-template-columns:1.3fr 1fr
}

.wide-label{
    max-width:620px
}

.battery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px
}

.battery-block{
    border:1px solid #cbd5e1;
    border-radius:10px;
    padding:12px;
    background:#fafcff
}

.battery-block label{
    margin-bottom:8px
}

.mt{
    margin-top:14px
}

.actions{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:18px
}

.btn{
    border:0;
    border-radius:999px;
    padding:10px 18px;
    font-weight:800;
    cursor:pointer
}

.btn-primary{
    background:linear-gradient(135deg,var(--primary),var(--accent));
    color:white;
    box-shadow:0 8px 18px rgba(0,80,179,.25)
}

.btn-outline{
    background:white;
    border:1px solid #cbd5e1;
    color:#263342
}

.btn:disabled{
    opacity:.45;
    cursor:not-allowed
}

.hidden{
    display:none
}

.message{
    margin-top:12px;
    font-weight:700;
    color:var(--muted)
}

@media(max-width:850px){.stepper{grid-template-columns:repeat(2,1fr)}

.grid-2,.grid-3,.battery-grid{
    grid-template-columns:1fr
}

.header{
    align-items:flex-start;
    flex-direction:column
}

.five-cols,.four-cols{
    grid-template-columns:1fr 1fr
}

.actions{
    flex-direction:column
}

.btn{
    width:100%
}}

.bank-count{
    max-width:280px;
    margin-bottom:12px
}

.signature-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;margin-top:14px
}

.signature-box{
    border:1px solid #cbd5e1;
    border-radius:10px;
    background:#fafcff;
    padding:12px
}

.signature-box canvas{
    width:100%;
    height:180px;
    display:block;
    border:1px dashed #9aa7b7;
    border-radius:8px;
    background:#fff;
    touch-action:none;
    cursor:crosshair;
    margin:8px 0
}

.btn-small{
    padding:7px 12px;
    font-size:.78rem
}

.battery-grid{
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr))
}


.btn-location{
    width:auto;
    max-width:180px;
    padding:8px 14px;
    border-radius:20px;
    border:1px solid #cbd5e1;
    background:#fff;
    font-weight:800;
    cursor:pointer;
}


@media(max-width:850px){.signature-grid{grid-template-columns:1fr}}