:root {
    --ink: #172033;
    --muted: #6d7485;
    --line: #dce1e8;
    --cream: #f7f2e9;
    --orange: #ee6a2d;
    --orange-dark: #d95218;
    --navy: #17233f;
    --danger: #bc3434;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    background: #f8f8f7;
    font-family: "DM Sans", Arial, sans-serif;
}

.page-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(340px, .83fr) minmax(560px, 1.17fr); }

.intro {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    padding: 46px clamp(38px, 5vw, 78px);
    display: flex;
    flex-direction: column;
    color: white;
    background: var(--navy);
}

.intro::before, .intro::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.intro::before { width: 440px; height: 440px; left: -250px; bottom: -180px; border: 70px solid rgba(238,106,45,.15); }
.intro::after { width: 270px; height: 270px; right: -155px; top: 18%; background: rgba(238,106,45,.08); }

.brand { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 13px; width: fit-content; color: white; text-decoration: none; font: 800 18px "Manrope", sans-serif; }
.brand-mark { width: 46px; height: 46px; padding: 3px; overflow: hidden; display: grid; place-items: center; background: white; border-radius: 12px; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.intro-copy { position: relative; z-index: 1; margin: auto 0 42px; max-width: 580px; }
.eyebrow, .step { display: inline-block; color: var(--orange); text-transform: uppercase; letter-spacing: .16em; font-weight: 700; font-size: 12px; }
.intro h1 { margin: 18px 0 22px; font: 700 clamp(38px, 4.3vw, 68px)/1.08 "Manrope", sans-serif; letter-spacing: -.045em; }
.intro h1 em { color: var(--orange); font-style: normal; }
.intro-copy > p { max-width: 530px; margin: 0; color: #cfd5e1; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.7; }
.benefits { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 25px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.13); }
.benefits > div { display: flex; gap: 12px; }
.benefits p { margin: 0; color: #acb5c6; font-size: 13px; line-height: 1.55; }
.benefits strong { color: white; font-size: 14px; }
.check { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; color: white; background: var(--orange); border-radius: 50%; font-size: 13px; }
.copyright { position: relative; margin: 30px 0 0; color: #747f93; font-size: 12px; }

.form-panel { display: grid; place-items: center; padding: 45px clamp(28px, 6vw, 100px); background: #fff; }
.form-wrap { width: min(100%, 660px); }
.form-header { margin-bottom: 30px; }
.form-header h2, .success-card h2 { margin: 9px 0 7px; font: 800 clamp(28px, 3vw, 39px) "Manrope", sans-serif; letter-spacing: -.035em; }
.form-header p, .success-card p { margin: 0; color: var(--muted); }
form { display: grid; gap: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
label { display: grid; gap: 8px; color: #31394a; font-size: 13px; font-weight: 700; }
input:not([type="checkbox"]) { width: 100%; height: 50px; padding: 0 15px; border: 1px solid var(--line); border-radius: 9px; outline: none; color: var(--ink); background: #fff; font: 500 14px "DM Sans", sans-serif; transition: border .2s, box-shadow .2s; }
input:not([type="checkbox"])::placeholder { color: #a5aab4; }
input:not([type="checkbox"]):focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(238,106,45,.11); }
input.invalid { border-color: var(--danger); }
small { color: var(--danger); font-size: 11px; font-weight: 500; }
.hint { color: #9298a4; font-size: 11px; font-weight: 400; }
.serial-control, .password-control { position: relative; display: block; }
.serial-control input { padding-right: 47px; }
.scan-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--orange); font-size: 23px; }
.password-control input { padding-right: 75px; }
.toggle-password { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--orange-dark); font: 700 11px "DM Sans", sans-serif; cursor: pointer; }
.checkbox-label { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-weight: 400; line-height: 1.5; cursor: pointer; }
.checkbox-label input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--orange); }
a { color: var(--orange-dark); font-weight: 700; }
.terms-error { margin-top: -12px; }
.submit-button, .button-link { min-height: 53px; border: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 14px; color: white; background: var(--orange); box-shadow: 0 9px 24px rgba(238,106,45,.2); font: 700 15px "DM Sans", sans-serif; text-decoration: none; cursor: pointer; transition: transform .2s, background .2s; }
.submit-button:hover, .button-link:hover { background: var(--orange-dark); transform: translateY(-1px); }
.submit-button span { font-size: 20px; }
.login-link { margin: 0; text-align: center; color: var(--muted); font-size: 13px; }
.alert { margin-bottom: 20px; padding: 12px 15px; color: #8f2727; background: #fff0f0; border: 1px solid #facccc; border-radius: 8px; font-size: 13px; }
.success-card { padding: 55px 30px; text-align: center; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 60px rgba(22,32,51,.08); }
.success-icon { margin: 0 auto 22px; width: 68px; height: 68px; display: grid; place-items: center; color: white; background: var(--orange); border-radius: 50%; font-size: 30px; }
.success-card p { margin-bottom: 28px; }
.button-link { width: min(100%, 300px); margin: auto; }

@media (max-width: 860px) {
    .page-shell { display: block; }
    .intro { min-height: auto; padding: 30px 24px 42px; }
    .intro-copy { margin: 55px 0 38px; }
    .intro h1 { font-size: clamp(34px, 10vw, 48px); }
    .copyright { display: none; }
    .form-panel { padding: 42px 22px 60px; }
}

@media (max-width: 520px) {
    .field-row, .benefits { grid-template-columns: 1fr; }
    .benefits { gap: 18px; }
    .form-panel { padding-inline: 17px; }
}

/* Application ETS */
body { background:#f4f6f8; }
.app-shell{min-height:100vh;display:grid;grid-template-columns:255px 1fr}.sidebar{position:sticky;top:0;height:100vh;padding:28px 18px 20px;background:#17233f;color:#fff;display:flex;flex-direction:column;z-index:20}.side-brand{display:flex;align-items:center;gap:11px;padding:0 8px 28px;color:#fff;text-decoration:none}.side-brand img{width:43px;height:43px;border-radius:10px;object-fit:contain;background:#fff}.side-brand span{display:grid}.side-brand strong{font:800 16px Manrope,sans-serif}.side-brand small{color:#929db2;font-size:10px}.sidebar nav{display:grid;gap:5px}.sidebar nav a{display:flex;align-items:center;gap:13px;padding:12px 13px;border-radius:8px;color:#aeb8ca;text-decoration:none;font-size:13px;font-weight:600}.sidebar nav a:hover,.sidebar nav a.active{color:#fff;background:rgba(238,106,45,.16)}.sidebar nav a.active{box-shadow:inset 3px 0 var(--orange)}.sidebar nav i{width:23px;color:var(--orange);font-size:18px;font-style:normal;text-align:center}.profile{margin-top:auto;padding:16px 8px 0;border-top:1px solid rgba(255,255,255,.1);display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px}.profile>span,.avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--orange);font-weight:800}.profile div{display:grid;min-width:0}.profile strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile small{color:#8f9aaf;font-size:10px}.profile>a{color:#9aa5b8;text-decoration:none}.content{min-width:0;padding:0 clamp(20px,3vw,45px) 30px}.topbar{height:88px;display:flex;align-items:center;border-bottom:1px solid #e2e5e9;margin-bottom:32px}.topbar h1{margin:0;font:800 22px Manrope,sans-serif}.topbar p{margin:3px 0 0;color:var(--muted);font-size:11px}.menu-btn{display:none;border:0;background:transparent;font-size:24px}.kicker{display:block;color:var(--orange);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.toolbar,.form-heading{display:flex;justify-content:space-between;gap:25px;align-items:flex-end;margin-bottom:24px}.toolbar h2,.form-heading h2,.search-hero h2,.user-form h2{margin:5px 0 0;font:800 27px Manrope,sans-serif}.toolbar form{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.filters select,.filters input,.filters button{height:38px;padding:0 10px;border:1px solid #dce1e8;border-radius:7px;background:#fff;color:#394154;font:600 11px DM Sans}.filters button{color:white;background:var(--navy);border-color:var(--navy);cursor:pointer}.filters .year{width:82px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:22px}.stats article{min-width:0;padding:20px;background:#fff;border:1px solid #e4e7eb;border-radius:11px;display:flex;align-items:center;gap:14px}.stats article div{display:grid;min-width:0}.stats small{color:#7b8290;font-size:10px}.stats strong{margin-top:5px;font:800 clamp(18px,2vw,25px) Manrope;white-space:nowrap}.stat-icon{flex:0 0 42px;height:42px;display:grid;place-items:center;border-radius:9px;font-size:16px;font-weight:800}.stat-icon.blue{color:#3159b8;background:#e9efff}.stat-icon.green{color:#1f8d62;background:#e5f6ef}.stat-icon.red{color:#c34040;background:#ffeded}.stat-icon.orange{color:#d85a22;background:#fff0e8;font-size:10px}.card{background:#fff;border:1px solid #e1e5ea;border-radius:11px;overflow:hidden}.card-head{min-height:60px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eceef1}.card-head h3{margin:0;font:800 14px Manrope}.card-head>span{color:#8c929d;font-size:10px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th{padding:12px 17px;color:#89909d;background:#fafbfc;text-align:left;text-transform:uppercase;font-size:9px;letter-spacing:.08em}td{padding:14px 17px;border-top:1px solid #eef0f2;color:#4b5361}td>strong,td>small{display:block}td small{color:#9298a3;margin-top:3px}code{color:#25324c;background:#f0f3f7;padding:4px 7px;border-radius:5px;font:700 11px DM Sans}.status{display:inline-flex;align-items:center;padding:5px 8px;border-radius:20px;font-size:9px;font-weight:800;text-transform:uppercase}.status.paid{color:#177a52;background:#e4f5ed}.status.unpaid{color:#b33b3b;background:#ffeaea}.table-link{color:var(--orange-dark);text-decoration:none;font-size:11px}.empty{padding:35px!important;text-align:center;color:#9298a3}.notice{max-width:100%;padding:13px 16px;margin:0 0 20px;border-radius:8px;font-size:12px}.notice.success{color:#176c4c;background:#e6f6ef;border:1px solid #bee7d5}.notice.error{color:#9c3030;background:#fff0f0;border:1px solid #f2caca}.auto-ref{display:flex;align-items:center;gap:10px;padding:13px 16px;color:#d6531a;background:#fff;border:1px solid #f4d5c6;border-radius:9px}.auto-ref span{display:grid}.auto-ref strong{font-size:11px}.auto-ref small{color:#9298a3;font-size:9px}.form-heading p{margin:5px 0 0;color:var(--muted);font-size:12px}.contract-form{display:grid;gap:18px}.form-section{padding:24px;background:#fff;border:1px solid #e1e5ea;border-radius:11px}.section-title{display:flex;gap:12px;align-items:center;margin-bottom:23px}.section-title>span{width:34px;height:34px;display:grid;place-items:center;color:var(--orange);background:#fff0e8;border-radius:8px;font-weight:800;font-size:11px}.section-title h3{margin:0;font:800 14px Manrope}.section-title p{margin:3px 0 0;color:#949aa5;font-size:10px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.form-grid .wide{grid-column:1/-1}.form-grid label,.stack label{display:grid;gap:7px;color:#414958;font-size:11px;font-weight:700}.form-grid input,.form-grid select,.form-grid textarea,.stack input,.stack select{width:100%;height:46px;padding:0 13px;border:1px solid #dce1e8;border-radius:8px;background:#fff;color:#263047;font:500 12px DM Sans;outline:none}.form-grid textarea{height:80px;padding-top:12px;resize:vertical}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.stack input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(238,106,45,.09)}.form-actions{display:flex;align-items:center;justify-content:flex-end;gap:22px;padding:7px 0}.form-actions>a{color:#7e8591;text-decoration:none;font-size:12px}.primary-btn{min-height:44px;padding:0 20px;border:0;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:var(--orange);box-shadow:0 8px 20px rgba(238,106,45,.16);font:700 12px DM Sans;text-decoration:none;cursor:pointer}.primary-btn:hover{background:var(--orange-dark)}.primary-btn.full{width:100%}.search-hero{max-width:850px;margin:60px auto 35px;text-align:center}.search-hero p{color:#7b8290;font-size:13px}.search-hero form{margin-top:25px;padding:8px;display:grid;grid-template-columns:1fr auto;background:#fff;border:1px solid #dfe3e8;border-radius:11px;box-shadow:0 13px 40px rgba(24,34,55,.07)}.search-hero input{height:45px;padding:0 14px;border:0;outline:0;font:600 13px DM Sans}.results{max-width:850px;margin:auto}.result-row{padding:15px 20px;display:grid;grid-template-columns:38px 1fr 190px auto 20px;align-items:center;gap:13px;color:#333b4c;text-decoration:none;border-top:1px solid #eef0f2}.result-row:first-of-type{border:0}.result-row>span:nth-child(2){display:grid}.result-row small{display:block;color:#9298a3;font-size:10px}.result-row code{display:grid;background:transparent}.result-row b{color:var(--orange)}.client-head>a{color:#7b8290;text-decoration:none;font-size:11px}.client-title{margin:23px 0;display:flex;align-items:center;gap:15px}.avatar.large{width:58px;height:58px;font-size:21px}.client-title h2{margin:5px 0 2px;font:800 25px Manrope}.client-title p{margin:0;color:#7c8491;font-size:11px}.client-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;margin-bottom:18px}.info-card dl{padding:5px 20px 18px;display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0}.info-card dl div{padding:14px 0;border-bottom:1px solid #eef0f2}.info-card dt,.receipt dt{color:#949aa6;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.info-card dd,.receipt dd{margin:5px 0 0;color:#353e50;font-size:12px;font-weight:700;line-height:1.5}.month-card{padding:25px;color:#fff;background:#a92f35;border-radius:11px}.month-card.is-paid{background:#14734f}.month-label{color:rgba(255,255,255,.7);font-size:10px;text-transform:uppercase;letter-spacing:.1em}.month-status{margin:22px 0;display:flex;align-items:center;gap:12px}.month-status i{width:43px;height:43px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.16);font-style:normal;font-size:20px}.month-status div{display:grid}.month-status small{color:rgba(255,255,255,.65);font-size:9px}.month-status strong{font:800 17px Manrope}.amount-due{padding:14px 0 18px;border-top:1px solid rgba(255,255,255,.2);display:flex;justify-content:space-between;align-items:center}.amount-due span{font-size:10px}.amount-due strong{font:800 16px Manrope}.month-card .primary-btn{color:#8d2e32;background:#fff;box-shadow:none}.month-card.is-paid .primary-btn{color:#14734f}dialog{width:min(540px,calc(100% - 30px));padding:0;border:0;border-radius:13px;box-shadow:0 30px 90px rgba(0,0,0,.28)}dialog::backdrop{background:rgba(16,25,43,.7)}.payment-form{padding:25px}.dialog-head{display:flex;justify-content:space-between;margin-bottom:20px}.dialog-head h2{margin:5px 0;font:800 22px Manrope}.dialog-head button{border:0;background:transparent;font-size:25px;cursor:pointer}.payment-form>p{padding:12px;background:#f5f6f8;border-radius:7px;font-size:11px}.receipt{width:min(100%,650px);margin:20px auto;padding:35px;background:#fff;border:1px solid #dfe3e8;border-radius:13px;box-shadow:0 20px 60px rgba(20,30,50,.08)}.receipt-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:25px;border-bottom:1px dashed #cfd4dc}.receipt-top img{width:60px;height:60px;object-fit:contain}.receipt-top div{display:grid;text-align:right}.receipt-top span{font-size:10px;color:#8c939f}.receipt-top strong{margin-top:4px;font:800 15px Manrope}.receipt-paid{width:max-content;margin:25px auto 15px;padding:7px 10px;color:#187852;background:#e5f5ed;border-radius:20px;font-size:10px;font-weight:800}.receipt>h2{text-align:center;margin:0;font:800 34px Manrope}.receipt>p{text-align:center;color:#7f8692;font-size:12px}.receipt dl{margin:25px 0;border-top:1px solid #edf0f2}.receipt dl div{padding:11px 0;display:flex;justify-content:space-between;border-bottom:1px solid #edf0f2}.receipt dd{margin:0;text-align:right}.receipt-actions{display:flex;justify-content:space-between;align-items:center;margin-top:25px}.receipt-actions>a{color:#6f7785;text-decoration:none;font-size:11px}.users-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}.user-row{padding:14px 20px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;border-top:1px solid #edf0f2}.user-row div{display:grid}.user-row strong{font-size:12px}.user-row small{color:#9299a5;font-size:10px}.role{padding:5px 8px;color:#3d557f;background:#eef2f8;border-radius:20px;font-size:9px;font-weight:800}.user-form{padding:25px}.user-form h2{margin-bottom:20px}.stack{display:grid;gap:15px}.setup-link{display:block;margin-top:20px;text-align:center;color:#7e8591;font-size:11px}.credentials{margin-top:20px;padding:12px;display:grid;color:#4c5565;background:#f5f6f8;border-radius:7px;font-size:11px}.auth-page{min-height:100vh;display:grid;place-items:center;padding:25px;background:var(--navy)}.auth-card{width:min(100%,420px);padding:35px;background:#fff;border-radius:14px;box-shadow:0 25px 80px rgba(0,0,0,.25)}.auth-card>img{width:62px;height:62px;object-fit:contain;margin-bottom:18px}.auth-card h1{margin:5px 0;font:800 30px Manrope}.auth-card>p{margin:0 0 22px;color:#7e8591;font-size:12px}.auth-card .primary-btn{width:100%}footer{padding-top:30px;text-align:center;color:#a2a7b0;font-size:9px}
@media(max-width:1050px){.stats{grid-template-columns:1fr 1fr}.client-grid{grid-template-columns:1fr}.users-grid{grid-template-columns:1fr}.toolbar{align-items:flex-start;flex-direction:column}.filters{justify-content:flex-start!important}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:fixed;left:-270px;width:255px;transition:left .2s}.sidebar.open{left:0}.content{padding-inline:15px}.menu-btn{display:block;margin-right:12px}.topbar{height:72px;margin-bottom:23px}.stats{grid-template-columns:1fr}.form-heading{align-items:flex-start;flex-direction:column}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.result-row{grid-template-columns:38px 1fr auto}.result-row code,.result-row .status{display:none}.info-card dl{grid-template-columns:1fr}.search-hero{margin-top:30px}.search-hero form{grid-template-columns:1fr}.search-hero .primary-btn{width:100%}.receipt{padding:22px}.filters select,.filters input{flex:1}.stats article{padding:15px}}
@media print{.sidebar,.topbar,footer,.receipt-actions,.notice{display:none!important}.app-shell{display:block}.content{padding:0}.receipt{border:0;box-shadow:none;margin:0 auto}}