:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#18142f;background:#eef2ff}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 100% 0,#d9fbff 0,transparent 34%),linear-gradient(145deg,#f7f2ff,#eef8ff)}button,input,select{font:inherit}.shell{min-height:100vh}.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:16px 5%;color:white;background:#15103ded;backdrop-filter:blur(16px)}.brand{display:flex;gap:12px;align-items:center;font-weight:900}.brand img{width:38px}.top small{display:block;color:#b9b7d9;font-weight:500}.wrap{width:min(1180px,92%);margin:24px auto 60px}.login{width:min(470px,92%);margin:7vh auto;background:#fff;padding:28px;border-radius:28px;box-shadow:0 30px 70px #29205a22}.login h1{margin:10px 0 4px}.muted{color:#77758d}.tabs,.nav{display:flex;gap:8px;flex-wrap:wrap}.tabs button,.nav button{border:0;padding:11px 16px;border-radius:14px;background:#ece9fb;color:#342e60;font-weight:800}.tabs button.active,.nav button.active{color:white;background:linear-gradient(135deg,#7c3aed,#0891b2)}label{display:block;margin:15px 0 6px;font-weight:750}input,select{width:100%;padding:13px 14px;border:1px solid #d9d9e8;border-radius:14px;background:#fff;outline:none}input:focus,select:focus{border-color:#7c3aed;box-shadow:0 0 0 4px #7c3aed18}.primary,.danger,.ghost{border:0;border-radius:14px;padding:13px 17px;font-weight:850;cursor:pointer}.primary{color:#fff;background:linear-gradient(135deg,#7c3aed,#06a6c7)}.danger{color:#fff;background:#dc3156}.ghost{background:#eeecf8;color:#332e57}.wide{width:100%;margin-top:18px}.notice{padding:12px 14px;border-radius:13px;margin:12px 0;background:#e5f9f0;color:#08764b}.error{background:#ffe7ec;color:#a20e32}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}.card,.panel{background:#ffffffd9;border:1px solid #fff;padding:18px;border-radius:22px;box-shadow:0 14px 35px #392f6e12}.card strong{display:block;font-size:30px;margin:8px 0}.card:nth-child(4n+1){border-bottom:5px solid #7c3aed}.card:nth-child(4n+2){border-bottom:5px solid #0ea5e9}.card:nth-child(4n+3){border-bottom:5px solid #10b981}.card:nth-child(4n+4){border-bottom:5px solid #f59e0b}.panel{margin:15px 0}.panel h2{margin-top:0}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.actions{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.actions>*{flex:1;min-width:140px}.list{display:grid;gap:10px}.row{display:flex;justify-content:space-between;gap:12px;padding:13px;border-radius:14px;background:#f4f4fb;align-items:center}.row b{display:block}.code{font-size:22px;font-weight:900;letter-spacing:2px;color:#5b21b6}.hidden{display:none!important}@media(max-width:800px){.cards{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}.top{padding:12px 4%}.wrap{width:94%}.card{padding:14px}.card strong{font-size:24px}}@media(max-width:430px){.cards{gap:9px}.card{font-size:13px}.card strong{font-size:21px}.login{padding:21px}}

/* SOFAME-PWA-DASHBOARD-R3C */

.r3c-title{margin:20px 0 5px}
.r3c-title p{margin:0 0 5px;color:#7c3aed;font-size:12px;font-weight:900;letter-spacing:.14em}
.r3c-title h1{margin:0;color:#18123d;font-size:35px}
.r3c-title span{display:block;margin-top:6px;color:#77728d}

.r3c-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:20px 0}
.r3c-stats>button{min-height:145px;padding:19px;border:0;border-radius:23px;color:#fff;text-align:left;cursor:pointer;box-shadow:0 17px 32px rgba(40,28,100,.18);transition:transform .2s}
.r3c-stats>button:hover{transform:translateY(-3px)}
.r3c-stats .purple{background:linear-gradient(135deg,#5122a8,#9333ea)}
.r3c-stats .blue{background:linear-gradient(135deg,#0757b7,#11a9d9)}
.r3c-stats .green{background:linear-gradient(135deg,#087c63,#0eb985)}
.r3c-stats .orange{background:linear-gradient(135deg,#c65108,#f59e0b)}
.r3c-stats>button>span{display:flex;justify-content:space-between;gap:8px;font-weight:850}
.r3c-stats>button>span i{width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.18)}
.r3c-stats strong{display:block;margin:17px 0 8px;font-size:32px}
.r3c-stats small{color:rgba(255,255,255,.84)}

.r3c-main-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);gap:18px}
.r3c-panel{padding:18px;border:1px solid #fff;border-radius:27px;background:rgba(255,255,255,.84);box-shadow:0 18px 43px rgba(31,27,80,.1)}
.r3c-panel-title,.r3c-service>header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.r3c-panel-title small,.r3c-service header small{color:#7e7895;font-size:11px;font-weight:900;letter-spacing:.1em}
.r3c-panel-title h2,.r3c-service header h2{margin:4px 0 0;color:#1b1740}
.r3c-panel-title p{margin:4px 0 0;color:#78738e}
.r3c-panel-title button{padding:10px 13px;border:0;border-radius:12px;background:#25205a;color:#fff;font-weight:800;cursor:pointer}

.r3c-router-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.r3c-router{padding:15px;border-radius:19px;color:#fff;box-shadow:0 13px 25px rgba(25,24,80,.22)}
.r3c-router.purple{background:linear-gradient(145deg,#6d28d9,#8b5cf6)}
.r3c-router.blue{background:linear-gradient(145deg,#075bc5,#0ea5e9)}
.r3c-router.green{background:linear-gradient(145deg,#087f65,#10b981)}
.r3c-router.orange{background:linear-gradient(145deg,#c45b08,#f59e0b)}
.r3c-router header,.r3c-router header>div,.r3c-router footer{display:flex;align-items:center;justify-content:space-between;gap:8px}
.r3c-router header>div{justify-content:flex-start}
.r3c-router header i{width:9px;height:9px;border-radius:50%}
.r3c-router header i.online{background:#5fffc7;box-shadow:0 0 0 4px rgba(95,255,199,.18)}
.r3c-router header i.offline{background:#fca5a5}
.r3c-router header em{padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.18);font-size:10px;font-style:normal;font-weight:900}
.r3c-router-money{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0}
.r3c-router-money small,.r3c-cpu small{display:block;color:rgba(255,255,255,.74);font-size:10px}
.r3c-router-money strong{display:block;margin-top:4px;font-size:17px}
.r3c-cpu{padding:10px;border-radius:12px;background:rgba(13,18,56,.2)}
.r3c-cpu>div{display:flex;justify-content:space-between}
.r3c-cpu>span{display:block;height:5px;margin:8px 0;overflow:hidden;border-radius:10px;background:rgba(255,255,255,.2)}
.r3c-cpu>span i{display:block;height:100%;border-radius:10px;background:#70ffd3}
.r3c-cpu.warning>span i{background:#fde047}
.r3c-cpu.critical>span i{background:#fca5a5}
.r3c-router footer{margin-top:11px;padding-top:10px;border-top:1px solid rgba(255,255,255,.18)}
.r3c-router footer span{color:rgba(255,255,255,.82);font-size:11px}
.r3c-router footer button{padding:6px 8px;border:1px solid rgba(255,255,255,.25);border-radius:9px;background:rgba(255,255,255,.15);color:#fff;font-weight:800;cursor:pointer}

.r3c-service>header em{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #9cebd4;border-radius:999px;background:#e5fff7;color:#08785d;font-size:11px;font-style:normal;font-weight:900}
.r3c-service>header em i{width:7px;height:7px;border-radius:50%;background:#12b981}
.r3c-service-state{display:flex;align-items:center;gap:14px;margin:18px 0;padding:16px;border-radius:18px;background:linear-gradient(135deg,#edfdf7,#e9f7ff)}
.r3c-service-state>span{display:grid;width:50px;height:50px;place-items:center;border-radius:50%;background:#10b981;color:#fff;font-weight:900;box-shadow:0 0 0 8px rgba(16,185,129,.12)}
.r3c-service-state h3{margin:3px 0}
.r3c-service-state p{margin:0;color:#716d87;font-size:12px}
.r3c-service-list{display:grid;gap:9px}
.r3c-service-list>span{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:13px;background:#f4f4fb}
.r3c-service-list small{color:#77728c}

.r3c-equipment-panel{margin-top:18px}
.r3c-equipment-list{display:grid;gap:10px;margin-top:16px}
.r3c-equipment{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;border-radius:16px;background:#f4f4fb}
.r3c-equipment-name{display:flex;align-items:center;gap:11px}
.r3c-equipment-name>span{display:grid;width:39px;height:39px;place-items:center;border-radius:13px;background:#302864;color:#fff}
.r3c-equipment-name small{display:block;margin-top:3px;color:#858097}
.r3c-equipment-values{display:flex;align-items:center;gap:9px}
.r3c-equipment-values>span{min-width:70px;padding:8px 10px;border-radius:11px;background:#fff}
.r3c-equipment-values small{display:block;color:#8b879b;font-size:10px}
.r3c-equipment-values em{padding:7px 9px;border-radius:999px;font-size:10px;font-style:normal;font-weight:900}
.r3c-equipment-values em.online{background:#dffbee;color:#087d56}
.r3c-equipment-values em.offline{background:#ffe4e8;color:#b2163b}
.r3c-empty{grid-column:1/-1;padding:30px;text-align:center;color:#69647c}
.r3c-empty strong{font-size:38px}

@media(max-width:980px){
    .r3c-main-grid{grid-template-columns:1fr}
    .r3c-stats{grid-template-columns:1fr 1fr}
}

/* SOFAME-PWA-ASSIGN-R6 */
.r6-shell{display:grid;gap:22px;color:#21184b}.r6-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:25px;border-radius:28px;background:linear-gradient(120deg,#29166f,#6d28d9 50%,#0891b2);color:#fff;box-shadow:0 20px 45px rgba(55,34,125,.2)}.r6-heading span{font-size:12px;font-weight:900;letter-spacing:.16em;color:#bff8ff}.r6-heading h1{margin:6px 0;font-size:36px}.r6-heading p{margin:0;color:#e8e6ff}.r6-heading label{min-width:290px;color:#fff}.r6-heading select{margin-top:8px;background:#fff;color:#21184b}.r6-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.r6-kpis article{min-height:128px;padding:20px;border-radius:24px;color:#fff;box-shadow:0 16px 35px rgba(52,39,112,.16)}.r6-kpis article:nth-child(1){background:linear-gradient(135deg,#7c3aed,#a855f7)}.r6-kpis article:nth-child(2){background:linear-gradient(135deg,#0284c7,#06b6d4)}.r6-kpis article:nth-child(3){background:linear-gradient(135deg,#059669,#10b981)}.r6-kpis article:nth-child(4){background:linear-gradient(135deg,#ea580c,#f59e0b)}.r6-kpis span{display:block;font-weight:800}.r6-kpis strong{display:block;margin-top:18px;font-size:34px}.r6-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.7fr);gap:18px}.r6-form,.r6-guide,.r6-section{padding:24px;border:1px solid rgba(105,78,190,.13);border-radius:26px;background:rgba(255,255,255,.94);box-shadow:0 18px 50px rgba(49,38,100,.1)}.r6-form-title{display:flex;align-items:center;gap:14px;margin-bottom:20px}.r6-form-title>span{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,#6d28d9,#0ea5e9);color:#fff;font-weight:900}.r6-form-title h2,.r6-form-title p{margin:0}.r6-form-title p{color:#77708f}.r6-form label{display:block;margin-top:15px;font-weight:800}.r6-form select,.r6-form input{margin-top:8px}.r6-form small{display:block;margin-top:7px;color:#0f8b6d}.r6-quantity{display:grid;grid-template-columns:54px 1fr 54px;gap:8px}.r6-quantity button{margin-top:8px;border:0;border-radius:15px;background:#ece8ff;color:#5b21b6;font-size:26px;font-weight:900}.r6-guide{background:linear-gradient(145deg,#e7fff7,#ecf8ff)}.r6-guide>span{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#10b981;color:#fff;font-size:27px;font-weight:900}.r6-guide h3{font-size:22px}.r6-guide p,.r6-guide li{color:#526578}.r6-guide li{margin:11px 0}.r6-section>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.r6-section h2{margin:0}.r6-section>header span{padding:8px 12px;border-radius:999px;background:#eeeaff;color:#6525bd;font-weight:800}.r6-stocks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.r6-stock{padding:17px;border:1px solid #e7e2f5;border-radius:19px;background:#faf9ff}.r6-stock>div{display:flex;flex-direction:column;gap:5px}.r6-stock span{color:#77708f;font-size:12px}.r6-stock>strong{display:block;margin:16px 0;font-size:30px;color:#6d28d9}.r6-stock.ready{border-left:5px solid #10b981}.r6-stock.empty{border-left:5px solid #f97316}.r6-stock footer{display:flex;flex-wrap:wrap;gap:7px}.r6-stock footer span{padding:5px 8px;border-radius:999px;background:#efecfa}.r6-points{display:grid;gap:10px}.r6-point{display:grid;grid-template-columns:48px minmax(150px,1fr) auto;align-items:center;gap:12px;padding:14px;border:1px solid #e8e3f5;border-radius:18px;background:#fbfaff}.r6-avatar{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,#7c3aed,#0ea5e9);color:#fff;font-size:20px;font-weight:900}.r6-point>div:nth-child(2){display:flex;flex-direction:column}.r6-point>div:nth-child(2) span{color:#77708f}.r6-point-metrics{display:flex;gap:8px}.r6-point-metrics span{padding:8px 10px;border-radius:12px;background:#f0edfa;color:#6f6885}.r6-empty{grid-column:1/-1;padding:28px;border:1px dashed #c9bfeb;border-radius:18px;text-align:center;color:#77708f;background:#faf9ff}
@media(max-width:980px){.r6-kpis{grid-template-columns:1fr 1fr}.r6-layout{grid-template-columns:1fr}.r6-stocks{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.r6-heading{align-items:stretch;flex-direction:column;padding:19px}.r6-heading h1{font-size:29px}.r6-heading label{min-width:0}.r6-kpis{gap:9px}.r6-kpis article{min-height:105px;padding:15px}.r6-kpis strong{font-size:27px}.r6-form,.r6-guide,.r6-section{padding:16px;border-radius:20px}.r6-stocks{grid-template-columns:1fr}.r6-point{grid-template-columns:46px 1fr}.r6-point-metrics{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}.r6-point-metrics span{text-align:center;font-size:11px}}

@media(max-width:680px){
    .r3c-title h1{font-size:28px}
    .r3c-stats{gap:9px}
    .r3c-stats>button{min-height:125px;padding:14px}
    .r3c-stats strong{font-size:24px}
    .r3c-router-grid{grid-template-columns:1fr}
    .r3c-equipment{align-items:flex-start;flex-direction:column}
    .r3c-equipment-values{display:grid;width:100%;grid-template-columns:repeat(2,1fr)}
    .r3c-equipment-values>span{min-width:0}
    .r3c-panel{padding:12px;border-radius:20px}
}

/* SOFAME-PWA-MODERN-R4 */

:root{
    --r4-ink:#17143b;
    --r4-muted:#716d8b;
    --r4-purple:#7137e8;
    --r4-purple-dark:#43218e;
    --r4-blue:#078fd0;
    --r4-green:#08a879;
    --r4-orange:#f18709;
    --r4-red:#e83d5d;
    --r4-border:rgba(116,92,190,.16);
    --r4-shadow:0 18px 45px rgba(45,36,105,.13);
}

html{
    min-height:100%;
    background:#eeeaff;
}

body{
    min-height:100vh;
    color:var(--r4-ink);
    background:
        radial-gradient(
            circle at 12% 5%,
            rgba(151,99,255,.22),
            transparent 31%
        ),
        radial-gradient(
            circle at 90% 15%,
            rgba(29,203,226,.20),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #f0ebff 0%,
            #f7f5ff 43%,
            #e7f8ff 100%
        ) !important;
    background-attachment:fixed !important;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.26),
            transparent 45%
        );
}

.top,
header.top{
    border-bottom:1px solid rgba(255,255,255,.12);
    background:
        linear-gradient(
            110deg,
            #24204f 0%,
            #312864 52%,
            #20345f 100%
        ) !important;
    box-shadow:0 12px 35px rgba(27,22,70,.22);
}

.top img{
    border-radius:14px;
    box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.top button,
#logout{
    border:1px solid rgba(255,255,255,.65) !important;
    background:rgba(255,255,255,.94) !important;
    color:#272052 !important;
    box-shadow:0 8px 20px rgba(18,15,55,.18);
}

.top button:hover,
#logout:hover{
    color:#fff !important;
    background:
        linear-gradient(135deg,#7c3aed,#0ea5e9) !important;
}

main,
.main,
.shell,
#content{
    position:relative;
}

.nav{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:7px;
    border:1px solid rgba(255,255,255,.8);
    border-radius:20px;
    background:rgba(255,255,255,.56);
    box-shadow:0 13px 28px rgba(52,42,114,.09);
    backdrop-filter:blur(15px);
}

.nav button{
    min-height:48px;
    padding:11px 18px;
    border:1px solid transparent !important;
    border-radius:14px !important;
    background:#ede9ff !important;
    color:#30285b !important;
    font-weight:850 !important;
    box-shadow:none !important;
    transition:
        transform .2s,
        box-shadow .2s,
        color .2s !important;
}

.nav button:hover{
    transform:translateY(-2px);
    color:#fff !important;
    background:
        linear-gradient(135deg,#8b35ec,#12a9d7) !important;
    box-shadow:0 10px 23px rgba(83,48,180,.22) !important;
}

.nav button.active{
    color:#fff !important;
    border-color:rgba(255,255,255,.65) !important;
    background:
        linear-gradient(
            135deg,
            #6f31df 0%,
            #7c3aed 42%,
            #079fd3 100%
        ) !important;
    box-shadow:0 12px 25px rgba(74,45,173,.30) !important;
}

.panel,
.card,
.cards>article,
.login,
.auth-card,
section.panel{
    border:1px solid rgba(255,255,255,.88) !important;
    border-radius:24px !important;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(250,249,255,.90)
        ) !important;
    box-shadow:var(--r4-shadow) !important;
    backdrop-filter:blur(18px);
}

.panel{
    padding:20px !important;
}

.cards{
    display:grid;
    gap:14px;
}

.card{
    position:relative;
    overflow:hidden;
    padding:18px !important;
}

.card::after{
    content:"";
    position:absolute;
    right:-34px;
    bottom:-45px;
    width:115px;
    height:115px;
    border-radius:50%;
    background:rgba(124,58,237,.07);
    pointer-events:none;
}

.card:nth-child(4n+1){
    border-bottom:5px solid #7c3aed !important;
}

.card:nth-child(4n+2){
    border-bottom:5px solid #0ea5e9 !important;
}

.card:nth-child(4n+3){
    border-bottom:5px solid #10b981 !important;
}

.card:nth-child(4n+4){
    border-bottom:5px solid #f59e0b !important;
}

h1,
h2,
h3,
h4{
    color:var(--r4-ink);
    letter-spacing:-.025em;
}

p,
small,
.muted{
    color:var(--r4-muted);
}

label{
    display:block;
    color:#3c345f;
    font-weight:800;
}

input,
select,
textarea{
    width:100%;
    min-height:49px;
    border:1px solid #d9d3ef !important;
    border-radius:14px !important;
    outline:none;
    background:rgba(255,255,255,.96) !important;
    color:#211b47 !important;
    box-shadow:
        inset 0 1px 2px rgba(34,27,79,.04),
        0 6px 14px rgba(53,43,109,.05);
    transition:
        border-color .2s,
        box-shadow .2s,
        transform .2s;
}

input:focus,
select:focus,
textarea:focus{
    border-color:#8b5cf6 !important;
    box-shadow:
        0 0 0 4px rgba(139,92,246,.14),
        0 10px 25px rgba(74,45,173,.10) !important;
}

button,
.button,
.btn{
    border-radius:13px;
    font-weight:850;
    transition:
        transform .2s,
        box-shadow .2s,
        opacity .2s;
}

button:hover,
.button:hover,
.btn:hover{
    transform:translateY(-2px);
}

.primary,
button.primary,
.btn-primary{
    border:0 !important;
    color:#fff !important;
    background:
        linear-gradient(135deg,#7137e8,#0a9fd2) !important;
    box-shadow:0 11px 24px rgba(83,48,180,.25) !important;
}

.success,
button.success,
.btn-success{
    border:0 !important;
    color:#fff !important;
    background:
        linear-gradient(135deg,#087c63,#10b981) !important;
    box-shadow:0 11px 24px rgba(10,145,103,.23) !important;
}

.danger,
button.danger,
.btn-danger{
    color:#fff !important;
    border:0 !important;
    background:
        linear-gradient(135deg,#c91f49,#f34b64) !important;
    box-shadow:0 10px 22px rgba(218,45,83,.22) !important;
}

.secondary,
button.secondary{
    color:#30275e !important;
    border:1px solid #d8d1ee !important;
    background:#f3f0ff !important;
}

.notice{
    border:1px solid #a8ead7 !important;
    border-radius:16px !important;
    background:
        linear-gradient(135deg,#e8fff6,#eafaff) !important;
    color:#087858 !important;
    box-shadow:0 10px 24px rgba(16,185,129,.09);
}

.notice.error{
    border-color:#ffc4ce !important;
    background:
        linear-gradient(135deg,#fff0f3,#fff5ed) !important;
    color:#b51d40 !important;
}

table{
    width:100%;
    overflow:hidden;
    border-collapse:separate !important;
    border-spacing:0 8px !important;
}

thead th{
    padding:11px 13px !important;
    border:0 !important;
    color:#655e7d !important;
    background:#eeeaff !important;
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
}

tbody tr{
    background:rgba(255,255,255,.96);
    box-shadow:0 7px 18px rgba(44,35,94,.07);
}

tbody td{
    padding:13px !important;
    border-top:1px solid #eeeafa !important;
    border-bottom:1px solid #eeeafa !important;
    color:#28214e;
}

tbody td:first-child{
    border-left:1px solid #eeeafa !important;
    border-radius:13px 0 0 13px;
}

tbody td:last-child{
    border-right:1px solid #eeeafa !important;
    border-radius:0 13px 13px 0;
}

.badge,
.status,
.pill{
    padding:6px 9px;
    border-radius:999px !important;
    font-size:11px;
    font-weight:900;
}

.list,
.list-row,
.row,
.item{
    border-color:var(--r4-border) !important;
}

.list-row,
.item{
    border-radius:16px !important;
    background:rgba(255,255,255,.88) !important;
    box-shadow:0 8px 20px rgba(48,38,105,.07);
}

.login,
.auth-card{
    width:min(480px,calc(100% - 30px));
    margin:auto;
    padding:25px !important;
}

.login::before,
.auth-card::before{
    content:"";
    display:block;
    width:64px;
    height:6px;
    margin:0 auto 18px;
    border-radius:999px;
    background:
        linear-gradient(90deg,#7c3aed,#06a7d2,#10b981);
}

form{
    display:grid;
    gap:13px;
}

.r3c-panel{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.97),
            rgba(247,246,255,.91)
        ) !important;
}

.r3c-finance{
    border-top:5px solid #7c3aed !important;
}

.r3c-service{
    border-top:5px solid #10b981 !important;
}

.r3c-equipment-panel{
    border-top:5px solid #0ea5e9 !important;
}

.r3c-equipment{
    border:1px solid rgba(113,55,232,.10);
    background:
        linear-gradient(
            110deg,
            rgba(244,241,255,.96),
            rgba(239,250,255,.94)
        ) !important;
}

.r3c-service-list>span{
    border:1px solid rgba(113,55,232,.08);
    background:
        linear-gradient(
            110deg,
            #f4f1ff,
            #f0faff
        ) !important;
}

@media(max-width:760px){
    body{
        background:
            linear-gradient(
                145deg,
                #f1edff 0%,
                #eef9ff 100%
            ) !important;
    }

    .top,
    header.top{
        padding-left:15px !important;
        padding-right:15px !important;
    }

    .nav{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .nav button{
        width:100%;
        min-height:45px;
        padding:9px 8px;
        font-size:13px;
    }

    .panel{
        padding:14px !important;
        border-radius:19px !important;
    }

    table{
        font-size:12px;
    }

    tbody td,
    thead th{
        padding:9px 7px !important;
    }
}

/* SOFAME-PWA-REPORTS-R5 */

.r5-loading{
    padding:24px;
    border:1px solid rgba(255,255,255,.9);
    border-radius:20px;
    background:rgba(255,255,255,.88);
    color:#554c76;
    box-shadow:0 15px 35px rgba(48,37,105,.1);
}

.r5-report-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin:20px 0;
}

.r5-report-heading p{
    margin:0 0 5px;
    color:#7c3aed;
    font-size:12px;
    font-weight:900;
    letter-spacing:.14em;
}

.r5-report-heading h1{
    margin:0;
    color:#17133c;
    font-size:36px;
}

.r5-report-heading span{
    display:block;
    margin-top:6px;
    color:#746e8c;
}

.r5-report-heading em{
    padding:9px 13px;
    border-radius:999px;
    font-size:11px;
    font-style:normal;
    font-weight:900;
}

.r5-report-heading em.current{
    border:1px solid #8de8cf;
    background:#e7fff7;
    color:#087b5b;
}

.r5-report-heading em.archived{
    border:1px solid #d6c8ff;
    background:#f0ebff;
    color:#6530c7;
}

.r5-report-filters{
    display:grid;
    grid-template-columns:1fr 1fr 1.25fr;
    gap:14px;
    padding:17px;
    border:1px solid rgba(255,255,255,.9);
    border-radius:23px;
    background:rgba(255,255,255,.88);
    box-shadow:0 17px 40px rgba(48,37,105,.1);
}

.r5-report-filters label{
    display:block;
    margin-bottom:7px;
    color:#4d456b;
    font-size:12px;
    font-weight:900;
}

.r5-report-filters select{
    min-height:52px;
    border:1px solid #d9d0f1 !important;
    border-radius:14px !important;
    background:#fff !important;
    color:#211a47 !important;
    font-weight:800;
}

.r5-selection{
    display:flex;
    justify-content:center;
    flex-direction:column;
    padding:11px 15px;
    border:1px solid #d8cdf9;
    border-radius:15px;
    background:
        linear-gradient(135deg,#f0eaff,#eaf9ff);
}

.r5-selection small{
    color:#77708f;
}

.r5-selection b{
    margin:3px 0;
    color:#31255d;
    font-size:17px;
}

.r5-selection span{
    color:#087e9e;
    font-size:12px;
    font-weight:800;
    text-transform:capitalize;
}

.r5-report-cards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;
    margin:18px 0;
}

.r5-report-cards article{
    min-height:145px;
    padding:18px;
    border-radius:22px;
    color:#fff;
    box-shadow:0 17px 32px rgba(40,28,100,.20);
}

.r5-report-cards article.purple{
    background:linear-gradient(135deg,#5524b3,#9635ec);
}

.r5-report-cards article.blue{
    background:linear-gradient(135deg,#075fc0,#0eaae0);
}

.r5-report-cards article.green{
    background:linear-gradient(135deg,#087b62,#10b981);
}

.r5-report-cards article.orange{
    background:linear-gradient(135deg,#c65308,#f59e0b);
}

.r5-report-cards header{
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-weight:850;
}

.r5-report-cards header i{
    display:grid;
    width:28px;
    height:28px;
    place-items:center;
    border-radius:9px;
    background:rgba(255,255,255,.18);
    color:#fff;
    font-style:normal;
}

.r5-report-cards strong{
    display:block;
    margin:17px 0 8px;
    font-size:30px;
}

.r5-report-cards small{
    color:rgba(255,255,255,.82);
}

.r5-report-summary{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.9);
    border-radius:25px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.97),
            rgba(247,245,255,.94)
        );
    box-shadow:0 18px 43px rgba(31,27,80,.11);
}

.r5-report-summary>header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:19px;
    color:#fff;
    background:
        linear-gradient(120deg,#332166,#6532bd,#087fac);
}

.r5-report-summary>header small{
    color:rgba(255,255,255,.72);
    font-weight:900;
    letter-spacing:.1em;
}

.r5-report-summary>header h2{
    margin:4px 0 0;
    color:#fff;
}

.r5-report-summary>header>span{
    padding:8px 11px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:999px;
    background:rgba(255,255,255,.13);
    font-weight:800;
    text-transform:capitalize;
}

.r5-summary-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    padding:18px;
}

.r5-summary-grid article{
    padding:15px;
    border:1px solid #e2dcf5;
    border-radius:16px;
    background:#fff;
}

.r5-summary-grid article:nth-child(1){
    border-left:5px solid #7c3aed;
}

.r5-summary-grid article:nth-child(2){
    border-left:5px solid #0ea5e9;
}

.r5-summary-grid article:nth-child(3){
    border-left:5px solid #10b981;
}

.r5-summary-grid article:nth-child(4){
    border-left:5px solid #f59e0b;
}

.r5-summary-grid span{
    display:block;
    margin-bottom:7px;
    color:#77708d;
    font-size:11px;
}

.r5-summary-grid b{
    color:#241b4f;
    font-size:19px;
}

.r5-report-summary>footer{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:15px 18px;
    border-top:1px solid #e7e1f5;
    background:#f4f1ff;
    color:#6c6584;
    font-size:12px;
}

.r5-report-summary>footer b{
    color:#087d60;
}

@media(max-width:980px){
    .r5-report-filters{
        grid-template-columns:1fr 1fr;
    }

    .r5-selection{
        grid-column:1/-1;
    }

    .r5-report-cards,
    .r5-summary-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:620px){
    .r5-report-heading{
        align-items:flex-start;
        flex-direction:column;
    }

    .r5-report-heading h1{
        font-size:28px;
    }

    .r5-report-filters{
        grid-template-columns:1fr;
        padding:13px;
    }

    .r5-selection{
        grid-column:auto;
    }

    .r5-report-cards{
        gap:9px;
    }

    .r5-report-cards article{
        min-height:127px;
        padding:14px;
    }

    .r5-report-cards strong{
        font-size:23px;
    }

    .r5-summary-grid{
        grid-template-columns:1fr;
        padding:13px;
    }

    .r5-report-summary>header,
    .r5-report-summary>footer{
        align-items:flex-start;
        flex-direction:column;
    }
}

/* SOFAME-PWA-GENERATE-R8 */
.r8-shell{display:grid;gap:28px}.r8-page-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:12px 0 4px}.r8-page-heading span{display:block;margin-bottom:8px;color:#078f78;font-size:14px;font-weight:1000;letter-spacing:.18em}.r8-page-heading h1{margin:0;color:#14233f;font-size:clamp(38px,5vw,58px);line-height:1}.r8-page-heading p{margin:14px 0 0;color:#6e7890;font-size:18px}.r8-open-form{min-height:58px;padding:0 28px;border-radius:16px;white-space:nowrap}.r8-stock-panel,.r7-form-panel,.r7-result,.r8-ticket-workspace{border:1px solid rgba(255,255,255,.9);border-radius:26px;background:linear-gradient(135deg,rgba(244,235,255,.96),rgba(230,255,247,.9));box-shadow:0 20px 55px rgba(31,42,86,.12)}.r8-stock-panel{padding:26px}.r8-stock-panel>header,.r8-ticket-workspace>header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.r8-stock-panel>header h2,.r8-ticket-workspace h2{margin:0;color:#17213f;font-size:24px}.r8-stock-panel>header p{margin:7px 0 0;color:#778097}.r8-stock-panel>header>button{border:0;background:transparent;color:#7c3aed;font-size:16px;font-weight:900}.r8-stock-panel>header>button:disabled{color:#aaa;cursor:not-allowed}.r8-router-list{display:grid;gap:14px}.r8-router-row{overflow:hidden;border-radius:22px}.r8-router-card{display:grid;width:100%;grid-template-columns:auto 1fr auto auto;align-items:center;gap:18px;min-height:112px;padding:18px;border:2px solid #ff7a1a;border-radius:22px;background:linear-gradient(110deg,#121a40,#123961);color:#fff;text-align:left;box-shadow:0 14px 28px rgba(8,21,57,.18);transition:.2s ease}.r8-router-card:hover,.r8-router-card.active{transform:translateY(-2px);border-color:#ffae43;box-shadow:0 18px 36px rgba(8,21,57,.25)}.r8-router-icon{display:grid;width:58px;height:58px;place-items:center;border-radius:16px;background:linear-gradient(145deg,#ff9d36,#ff6d12);font-size:24px;font-weight:1000;box-shadow:0 8px 20px rgba(255,111,22,.3)}.r8-router-copy{display:grid;gap:3px}.r8-router-copy small{color:#ffad54;font-size:12px;font-weight:1000;letter-spacing:.12em}.r8-router-copy strong{font-size:20px}.r8-router-copy em{font-size:14px;font-style:normal}.r8-router-copy .online{color:#63f0bd}.r8-router-copy .offline{color:#ff9b9b}.r8-router-total{display:grid;justify-items:end}.r8-router-total strong{font-size:25px}.r8-router-total small{font-size:12px;letter-spacing:.08em}.r8-router-card>i{display:grid;width:42px;height:42px;place-items:center;border-radius:50%;background:#ff7a1a;font-size:32px;font-style:normal;transition:.2s}.r8-router-card.active>i{transform:rotate(90deg)}.r8-router-details{padding:16px 18px 20px;background:rgba(255,255,255,.82);border:1px solid #ddd5f6;border-top:0}.r8-profile-list{display:grid;gap:10px}.r8-profile-heading{display:flex;justify-content:space-between;gap:12px;padding:3px 4px 9px;color:#625b78}.r8-profile-row{display:grid;width:100%;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;padding:14px 16px;border:1px solid #ded8f1;border-radius:16px;background:#fff;color:#211b43;text-align:left;transition:.18s}.r8-profile-row:hover{border-color:#20b9a0;transform:translateX(3px);box-shadow:0 10px 24px rgba(37,185,160,.12)}.r8-profile-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:13px;background:linear-gradient(145deg,#7c3aed,#19aee4);color:#fff;font-size:19px}.r8-profile-row>span:nth-child(2){display:grid;gap:4px}.r8-profile-row small{color:#77718d}.r8-profile-row>b{display:grid;justify-items:end;font-size:20px}.r8-profile-row>b small{font-size:11px}.r8-profile-row>i{color:#ff7a1a;font-size:28px;font-style:normal}.r8-ticket-workspace{margin-top:22px;padding:22px;background:rgba(255,255,255,.9)}.r8-ticket-workspace header small{color:#078f78;font-weight:900;letter-spacing:.12em}.r7-form-panel{padding:24px}.r7-form-panel.hidden,.r7-result.hidden,.r8-ticket-workspace.hidden,.r8-router-details.hidden{display:none}.r7-form-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.r7-form-head span,.r7-result span{color:#078f78;font-size:12px;font-weight:1000;letter-spacing:.15em}.r7-form-head h2,.r7-result h2{margin:5px 0;color:#17143b}.r7-form-head p,.r7-result p{margin:6px 0;color:#79738d}.r7-close{width:44px;height:44px;border:0;border-radius:50%;background:#eee9fa;color:#5b22bd;font-size:28px}.r7-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}.r7-form-grid label{display:grid;gap:8px;color:#28214e;font-weight:900}.r7-form-grid input,.r7-form-grid select{width:100%;min-height:54px;padding:0 15px;border:1px solid #d9d2ef;border-radius:14px;background:#fff;color:#201a41;font:inherit}.r7-ticket-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-height:420px;overflow:auto}.r7-ticket-list article{display:grid;gap:5px;padding:13px;border:1px solid #e1daf2;border-radius:13px;background:#fff}.r7-ticket-list article span{color:#d11b3d;font-size:18px;font-weight:1000;letter-spacing:.05em}.r7-ticket-list article small{color:#817a92}.r7-print-button{min-height:46px;padding:0 20px;border:0;border-radius:13px;background:linear-gradient(135deg,#6e35f2,#14aee1);color:#fff;font-weight:900}.r7-print-button:disabled{opacity:.45;cursor:not-allowed}.r7-result{display:flex;align-items:center;gap:18px;padding:23px}.r7-success-icon{display:grid;width:58px;height:58px;place-items:center;border-radius:50%;background:#0dbc8b;color:#fff;font-size:28px;font-weight:1000}.r7-result .r7-print-button{margin-left:auto}.r7-empty{display:grid;gap:6px;place-items:center;padding:38px;border:1px dashed #cabfe7;border-radius:18px;background:rgba(255,255,255,.62);color:#77718d;text-align:center}.r7-empty strong{color:#211a45;font-size:20px}.r7-empty.compact{padding:22px}.notice{border-radius:14px}.primary.wide{width:100%}
@media(max-width:900px){.r8-page-heading,.r8-stock-panel>header,.r8-ticket-workspace>header,.r7-result{align-items:stretch;flex-direction:column}.r8-open-form{width:100%}.r8-router-card{grid-template-columns:auto 1fr auto}.r8-router-total{grid-column:2;justify-items:start}.r8-router-card>i{grid-column:3;grid-row:1/3}.r7-form-grid{grid-template-columns:1fr}.r7-ticket-list{grid-template-columns:repeat(2,minmax(0,1fr))}.r7-result .r7-print-button{margin-left:0}.r8-profile-row{grid-template-columns:auto 1fr auto}.r8-profile-row>b{grid-column:2;justify-items:start}.r8-profile-row>i{grid-column:3;grid-row:1/3}}

/* SOFAME-PWA-INVENTORY-R9 */
body.r9-modal-open{overflow:hidden}.r9-overlay{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:24px;background:rgba(9,21,42,.68);backdrop-filter:blur(10px)}.r9-modal{position:relative;width:min(1260px,96vw);max-height:92vh;overflow:auto;padding:34px;border:1px solid rgba(255,255,255,.9);border-radius:28px;background:#fff;box-shadow:0 35px 90px rgba(3,13,32,.38)}.r9-close{position:absolute;top:18px;right:18px;width:42px;height:42px;border:0;border-radius:13px;background:#f1f3f7;color:#718097;font-size:27px}.r9-symbol{display:grid;width:54px;height:54px;place-items:center;border-radius:14px;background:#e4faf1;color:#14946f;font-size:22px}.r9-kicker{margin:22px 0 10px;color:#8a57dd;font-weight:1000;letter-spacing:.14em}.r9-stock-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px;border:1px solid #d9e5f2;border-radius:20px;background:linear-gradient(110deg,#f3fffb,#f0edff)}.r9-stock-heading small{color:#0c927c;font-weight:1000;letter-spacing:.12em}.r9-stock-heading h1{margin:6px 0 0;color:#173046;font-size:34px}.r9-context{display:flex;gap:12px}.r9-context span{display:grid;min-width:145px;gap:5px;padding:13px 16px;border:1px solid #d7deea;border-radius:14px;background:#fff}.r9-context span small{color:#77849a}.r9-context span b{color:#263650}.r9-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:18px 0}.r9-summary article{display:grid;gap:8px;padding:20px;border:1px solid #b9dcd3;border-radius:17px;background:linear-gradient(115deg,#ddf8ef,#dcecff)}.r9-summary small{color:#526d7a;font-weight:900}.r9-summary strong{color:#123e4c;font-size:25px}.r9-batch-selector{display:grid;gap:9px;padding:17px;border:1px solid #d4e0ec;border-radius:16px;background:#f8fbfe;color:#334a60;font-weight:900}.r9-batch-selector select{min-height:54px;padding:0 15px;border:1px solid #d5deea;border-radius:12px;background:#fff;color:#253650;font:inherit}.r9-batch-selector>small{color:#728198}.r9-batch-note{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:14px;margin:14px 0;padding:13px 16px;border-radius:14px;background:linear-gradient(90deg,#e8dcff,#d8efff)}.r9-batch-note>div{display:grid}.r9-batch-note>div b{color:#6941bb}.r9-batch-note>div small{color:#7e7396}.r9-batch-note>span{color:#657389}.r9-batch-note button{min-height:46px;border-radius:12px}.r9-delete-batch,.r9-selection button,.r9-delete-one{border:1px solid #f1a1b1;background:#fff0f2;color:#bd2445;font-weight:900}.r9-selection{display:flex;align-items:center;gap:22px;margin-bottom:14px;padding:16px;border:1px solid #a9ddd1;border-radius:15px;background:#dcf7f0}.r9-selection label{display:flex;align-items:center;gap:10px;font-weight:900}.r9-selection input,.r9-table-wrap input{width:22px;height:22px}.r9-selection button{min-height:44px;margin-left:auto;padding:0 20px;border-radius:11px}.r9-selection button:disabled,.r9-delete-batch:disabled,.r9-delete-one:disabled{opacity:.45;cursor:not-allowed}.r9-table-wrap{overflow:auto;border:1px solid #acd9d0;border-radius:16px}.r9-table-wrap table{width:100%;border-collapse:collapse;min-width:960px}.r9-table-wrap th{padding:15px;color:#456a72;background:#d8f3eb;font-size:12px;letter-spacing:.05em;text-align:left}.r9-table-wrap td{padding:13px 15px;border-top:1px solid #c8e3dd;color:#536d78;background:#eefaf7}.r9-code{color:#21466b;font-size:17px;letter-spacing:.08em}.r9-status{display:inline-flex;padding:7px 11px;border-radius:99px;font-weight:900}.r9-status.available{color:#159964;background:#ddf7ea}.r9-status.assigned{color:#bd7416;background:#fff0d4}.r9-delete-one{min-height:42px;padding:0 17px;border-radius:10px}.r9-more{display:block;padding:12px;color:#718096}.r9-footer{display:flex;justify-content:flex-end;padding-top:20px}.r9-footer button{min-height:48px;padding:0 24px;border-radius:12px}
@media(max-width:800px){.r9-overlay{padding:0}.r9-modal{width:100vw;max-height:100vh;min-height:100vh;padding:20px;border-radius:0}.r9-stock-heading,.r9-selection{align-items:stretch;flex-direction:column}.r9-context{display:grid;grid-template-columns:1fr 1fr}.r9-context span{min-width:0}.r9-summary{grid-template-columns:1fr}.r9-batch-note{grid-template-columns:1fr}.r9-selection button{margin-left:0}.r9-stock-heading h1{font-size:28px}}

/* SOFAME-PWA-MODALS-R12 */
body.r12-modal-open{overflow:hidden}.r12-overlay{position:fixed;inset:0;z-index:140000;display:grid;place-items:center;padding:22px;background:rgba(12,26,39,.68);backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px)}.r12-modal{position:relative;width:min(720px,96vw);max-height:94vh;overflow:auto;padding:34px 38px;border:1px solid rgba(255,255,255,.92);border-radius:26px;background:#fff;box-shadow:0 34px 90px rgba(4,15,28,.38);animation:r12-in .18s ease-out}.r12-modal.r12-generated{width:min(860px,96vw)}@keyframes r12-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}.r12-x{position:absolute;top:18px;right:18px;width:40px;height:40px;border:0;border-radius:12px;background:#f1f3f7;color:#718096;font-size:25px;font-weight:800}.r12-icon{display:grid;width:54px;height:54px;place-items:center;border-radius:14px;background:#e2f8ee;color:#0c9a6c;font-size:25px;font-weight:1000}.r12-modal.danger .r12-icon,.r12-modal.error .r12-icon{background:#fff0f2;color:#d02f50}.r12-modal.assign .r12-icon{background:#e5f5ff;color:#1685d1}.r12-kicker{margin:22px 0 8px;color:#8c58dc;font-size:14px;font-weight:1000;letter-spacing:.14em}.r12-modal h2{margin:0;color:#14203b;font-size:32px;line-height:1.15}.r12-message{margin:12px 0 0;color:#748096;font-size:16px;line-height:1.55}.r12-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0;padding:16px;border-radius:15px;background:#f6f3fc}.r12-details span{display:grid;gap:5px;padding:6px}.r12-details small{color:#8992a4}.r12-details b{overflow:hidden;color:#273550;text-overflow:ellipsis}.r12-code-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-top:26px;padding:18px;border-radius:16px;background:#f6f1fc}.r12-code-grid b{padding:11px 5px;border:1px solid #ded5ed;border-radius:9px;background:#fff;color:#6c2bc3;font:900 13px monospace;text-align:center}.r12-remaining{margin:12px 0 0;color:#8590a4;text-align:center}.r12-input{display:grid;gap:8px;margin:24px 0}.r12-input span{color:#33445d;font-weight:900}.r12-input input{min-height:54px;padding:0 16px;border:1px solid #d9ddec;border-radius:13px;background:#fff;color:#1f2d45;font:inherit}.r12-input input:focus{outline:3px solid rgba(76,92,230,.16);border-color:#6b5ce7}.r12-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}.r12-actions button{min-height:56px;border-radius:13px;font-size:16px;font-weight:1000}.r12-cancel{border:1px solid #a9dfd2;background:#fff;color:#087b67}.r12-confirm{border:0;background:linear-gradient(110deg,#11b989,#139bdd);color:#fff;box-shadow:0 12px 24px rgba(15,159,181,.22)}.r12-confirm.danger{background:linear-gradient(110deg,#e44b68,#c92348);box-shadow:0 12px 24px rgba(201,35,72,.2)}
@media(max-width:720px){.r12-overlay{padding:12px}.r12-modal{width:100%;padding:26px 20px;border-radius:21px}.r12-modal h2{font-size:27px}.r12-code-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:13px}.r12-details{grid-template-columns:1fr}.r12-actions{grid-template-columns:1fr}.r12-cancel{order:2}}

/* SOFAME-PWA-MODALS-HOTSPOT-R13 */
.r12-overlay{background:rgba(17,31,43,.66);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.r12-modal{width:min(860px,calc(100vw - 32px));padding:38px 40px 36px;border:1px solid #e2e6ef;border-radius:25px;background:#fff;box-shadow:0 32px 85px rgba(7,20,34,.34)}
.r12-modal:not(.r12-generated){width:min(720px,calc(100vw - 32px))}
.r12-x{top:20px;right:20px;width:42px;height:42px;border-radius:12px;background:#f2f4f7;color:#728096;transition:background .16s ease,color .16s ease,transform .16s ease}
.r12-x:hover{background:#e9edf3;color:#26354d;transform:scale(1.04)}
.r12-icon{width:55px;height:55px;border-radius:14px;background:#e4f8ef;color:#0b9e6b;font-size:25px}
.r12-kicker{margin:23px 0 9px;color:#8955d5;font-size:14px;letter-spacing:.16em}
.r12-modal h2{font-size:34px;font-weight:800;letter-spacing:-.025em}
.r12-message{max-width:650px;color:#738096;font-size:16px}
.r12-code-grid{margin-top:28px;padding:18px;border-radius:16px;background:#f7f3fc}
.r12-code-grid b{min-width:0;padding:12px 4px;border-color:#ddd3ed;border-radius:8px;background:#fff;color:#6d2dbd;font:900 13px/1 monospace}
.r12-details{margin:26px 0 0;padding:17px;background:#f8f7fb}
.r12-details span:last-child{text-align:right}
.r12-actions{margin-top:26px}
.r12-actions button{min-height:57px;border-radius:13px;cursor:pointer}
.r12-cancel{border-color:#9edccb;color:#087965}
.r12-confirm{background:linear-gradient(105deg,#11b989 0%,#12a4c6 55%,#168fdc 100%)}
.r12-confirm:disabled{cursor:wait;opacity:.74;filter:saturate(.65)}
@media(max-width:720px){.r12-modal,.r12-modal:not(.r12-generated){width:100%;padding:27px 20px 22px}.r12-modal h2{font-size:27px}.r12-details span:last-child{text-align:left}}

/* SOFAME-PWA-PRINT-LOADER-R15 */
.r15-loader-card{display:grid;width:min(470px,92vw);justify-items:center;padding:38px 34px;border:1px solid rgba(255,255,255,.94);border-radius:25px;background:#fff;box-shadow:0 32px 85px rgba(5,20,35,.38);text-align:center}.r15-spinner{width:54px;height:54px;border:5px solid #e5e9f5;border-top-color:#7440e8;border-right-color:#12a6d7;border-radius:50%;animation:r15-spin .75s linear infinite}.r15-loader-card h2{margin:22px 0 8px;color:#15213d;font-size:27px}.r15-loader-card p{max-width:370px;margin:0;color:#718096;line-height:1.5}.r15-loader-card small{margin-top:14px;color:#65718a;font-weight:800}.r15-loader-bar{width:100%;height:8px;margin-top:24px;overflow:hidden;border-radius:999px;background:#edf0f7}.r15-loader-bar i{display:block;width:42%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#713bea,#12a8d5);animation:r15-bar 1.15s ease-in-out infinite}.r15-print-loader.ready .r15-spinner{border-color:#dff7ee;background:#13b981;animation:none}.r15-print-loader.ready .r15-spinner:after{display:grid;height:100%;place-items:center;color:#fff;content:'✓';font-size:26px;font-weight:1000}.r15-print-loader.ready .r15-loader-bar i{width:100%;animation:none;background:#13b981}@keyframes r15-spin{to{transform:rotate(360deg)}}@keyframes r15-bar{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}

/* SOFAME-PWA-DELETE-MODAL-R19 */

/*
 * Confirmation de suppression claire et professionnelle.
 * Le danger reste identifiable par l'orange sans transformer
 * toute la fenêtre en panneau rouge.
 */

.r12-modal.danger {
    overflow: hidden;
    border: 1px solid rgba(124, 58, 237, .20);
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(14, 165, 233, .12),
            transparent 32%
        ),
        radial-gradient(
            circle at 0 100%,
            rgba(20, 184, 166, .10),
            transparent 35%
        ),
        #ffffff;
    box-shadow:
        0 34px 90px rgba(15, 23, 42, .32),
        0 0 0 1px rgba(255, 255, 255, .75) inset;
}

.r12-modal.danger::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 9px;
    background:
        linear-gradient(
            90deg,
            #7c3aed 0%,
            #2563eb 34%,
            #06b6d4 66%,
            #14b8a6 100%
        );
    content: "";
}

.r12-modal.danger .r12-x {
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, .94);
    color: #64748b;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .08);
}

.r12-modal.danger .r12-x:hover {
    border-color: #c4b5fd;
    background: #f5f3ff;
    color: #6d28d9;
}

.r12-modal.danger .r12-icon {
    border: 1px solid rgba(245, 158, 11, .25);
    background:
        linear-gradient(
            145deg,
            #fff7d6,
            #ffedd5
        );
    color: #ea580c;
    box-shadow: 0 10px 24px rgba(245, 158, 11, .16);
}

.r12-modal.danger .r12-kicker {
    color: #7c3aed;
}

.r12-modal.danger h2 {
    color: #172554;
}

.r12-modal.danger .r12-message {
    color: #526078;
    font-weight: 700;
}

.r12-modal.danger .r12-details {
    border: 1px solid #dbeafe;
    background:
        linear-gradient(
            115deg,
            #f5f3ff 0%,
            #eff6ff 48%,
            #ecfeff 100%
        );
    box-shadow: 0 10px 28px rgba(37, 99, 235, .07);
}

.r12-modal.danger .r12-details span {
    min-width: 0;
    border-left: 4px solid #8b5cf6;
    border-radius: 10px;
    background: rgba(255, 255, 255, .72);
}

.r12-modal.danger .r12-details span:nth-child(2) {
    border-left-color: #0ea5e9;
}

.r12-modal.danger .r12-details span:nth-child(3) {
    border-left-color: #14b8a6;
}

.r12-modal.danger .r12-details small {
    color: #64748b;
    font-weight: 800;
}

.r12-modal.danger .r12-details b {
    color: #172554;
    font-size: 17px;
}

.r12-modal.danger .r12-cancel {
    border: 1px solid #5eead4;
    background:
        linear-gradient(
            135deg,
            #f0fdfa,
            #ecfeff
        );
    color: #0f766e;
    box-shadow: 0 9px 22px rgba(20, 184, 166, .10);
}

.r12-modal.danger .r12-cancel:hover {
    border-color: #14b8a6;
    background:
        linear-gradient(
            135deg,
            #ccfbf1,
            #cffafe
        );
    transform: translateY(-1px);
}

.r12-modal.danger .r12-confirm.danger {
    border: 0;
    background:
        linear-gradient(
            110deg,
            #f59e0b 0%,
            #f97316 46%,
            #7c3aed 100%
        );
    color: #ffffff;
    box-shadow:
        0 14px 28px rgba(249, 115, 22, .22),
        0 7px 16px rgba(124, 58, 237, .16);
    text-shadow: 0 1px 2px rgba(15, 23, 42, .15);
}

.r12-modal.danger .r12-confirm.danger:hover {
    filter: brightness(1.04) saturate(1.08);
    transform: translateY(-1px);
    box-shadow:
        0 17px 32px rgba(249, 115, 22, .26),
        0 9px 20px rgba(124, 58, 237, .20);
}

.r12-modal.danger .r12-actions button {
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease,
        filter .16s ease;
}

@media (max-width: 720px) {
    .r12-modal.danger {
        max-height: 92vh;
    }

    .r12-modal.danger::before {
        height: 7px;
    }

    .r12-modal.danger .r12-details {
        gap: 9px;
        padding: 12px;
    }

    .r12-modal.danger .r12-details span {
        padding: 10px 12px;
    }

    .r12-modal.danger .r12-confirm.danger {
        order: 1;
    }

    .r12-modal.danger .r12-cancel {
        order: 2;
    }
}

/* SOFAME-PWA-DELETE-MODAL-R19B */

/*
 * Neutralisation prioritaire de toutes les anciennes couleurs
 * rouges appliquées par la variante "delete".
 */

.r12-overlay .r12-modal.delete,
.r12-overlay .r12-modal.delete.danger,
.r12-overlay .r12-modal.danger {
    border: 1px solid rgba(99, 102, 241, .22) !important;
    background-color: #ffffff !important;
    background-image:
        radial-gradient(
            circle at 100% 0,
            rgba(14, 165, 233, .16) 0,
            rgba(14, 165, 233, 0) 37%
        ),
        radial-gradient(
            circle at 0 100%,
            rgba(20, 184, 166, .13) 0,
            rgba(20, 184, 166, 0) 38%
        ),
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f8f7ff 48%,
            #effcff 100%
        ) !important;
    color: #172554 !important;
    box-shadow:
        0 36px 95px rgba(15, 23, 42, .34),
        0 0 0 1px rgba(255, 255, 255, .86) inset !important;
}

.r12-overlay .r12-modal.delete h2,
.r12-overlay .r12-modal.delete.danger h2,
.r12-overlay .r12-modal.danger h2 {
    color: #172554 !important;
}

.r12-overlay .r12-modal.delete .r12-kicker,
.r12-overlay .r12-modal.delete.danger .r12-kicker,
.r12-overlay .r12-modal.danger .r12-kicker {
    color: #7138d4 !important;
}

.r12-overlay .r12-modal.delete .r12-message,
.r12-overlay .r12-modal.delete.danger .r12-message,
.r12-overlay .r12-modal.danger .r12-message {
    color: #53627a !important;
}

.r12-overlay .r12-modal.delete .r12-icon,
.r12-overlay .r12-modal.delete.danger .r12-icon,
.r12-overlay .r12-modal.danger .r12-icon {
    border: 1px solid #fed7aa !important;
    background:
        linear-gradient(
            145deg,
            #fff8dc,
            #ffedd5
        ) !important;
    color: #ea580c !important;
}

.r12-overlay .r12-modal.delete .r12-details,
.r12-overlay .r12-modal.delete.danger .r12-details,
.r12-overlay .r12-modal.danger .r12-details {
    border: 1px solid #dbeafe !important;
    background:
        linear-gradient(
            115deg,
            #f5f3ff 0%,
            #eff6ff 50%,
            #ecfeff 100%
        ) !important;
}

.r12-overlay .r12-modal.delete .r12-details span,
.r12-overlay .r12-modal.delete.danger .r12-details span,
.r12-overlay .r12-modal.danger .r12-details span {
    background: rgba(255, 255, 255, .80) !important;
}

.r12-overlay .r12-modal.delete .r12-details small,
.r12-overlay .r12-modal.delete.danger .r12-details small,
.r12-overlay .r12-modal.danger .r12-details small {
    color: #64748b !important;
}

.r12-overlay .r12-modal.delete .r12-details b,
.r12-overlay .r12-modal.delete.danger .r12-details b,
.r12-overlay .r12-modal.danger .r12-details b {
    color: #172554 !important;
}

.r12-overlay .r12-modal.delete .r12-cancel,
.r12-overlay .r12-modal.delete.danger .r12-cancel,
.r12-overlay .r12-modal.danger .r12-cancel {
    border: 1px solid #5eead4 !important;
    background:
        linear-gradient(
            135deg,
            #f0fdfa,
            #ecfeff
        ) !important;
    color: #0f766e !important;
}

.r12-overlay .r12-modal.delete .r12-confirm,
.r12-overlay .r12-modal.delete .r12-confirm.danger,
.r12-overlay .r12-modal.delete.danger .r12-confirm,
.r12-overlay .r12-modal.danger .r12-confirm.danger {
    border: 0 !important;
    background-color: #f97316 !important;
    background-image:
        linear-gradient(
            110deg,
            #f59e0b 0%,
            #f97316 48%,
            #7c3aed 100%
        ) !important;
    color: #ffffff !important;
    box-shadow:
        0 14px 28px rgba(249, 115, 22, .24),
        0 8px 18px rgba(124, 58, 237, .17) !important;
}

.r12-overlay .r12-modal.delete::after,
.r12-overlay .r12-modal.delete.danger::after,
.r12-overlay .r12-modal.danger::after {
    display: none !important;
    background: transparent !important;
    content: none !important;
}

/* SOFAME-PWA-SALES-POINTS-R20 */

.r6-points {
    display: grid;
    gap: 18px;
}

.r6-point.r20-point {
    display: grid;
    gap: 18px;
    padding: 20px;
    border: 1px solid #dbe5f3;
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(14,165,233,.11),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #f8f7ff 52%,
            #f0fdff
        );
    box-shadow:
        0 15px 36px rgba(30,41,89,.10);
}

.r20-point-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
}

.r20-point-name {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.r20-point-name small {
    color: #7c3aed;
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: .14em;
}

.r20-point-name strong {
    overflow: hidden;
    color: #172554;
    font-size: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r20-point-name span {
    overflow: hidden;
    color: #718096;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r20-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 12px;
    font-weight: 900;
}

.r20-live i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow:
        0 0 0 4px rgba(16,185,129,.13);
}

.r20-metrics {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 11px;
}

.r20-metric {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 112px;
    align-content: space-between;
    gap: 7px;
    padding: 15px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 16px;
}

.r20-metric::after {
    position: absolute;
    right: -17px;
    bottom: -24px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    content: "";
}

.r20-metric small,
.r20-metric strong,
.r20-metric span {
    position: relative;
    z-index: 1;
    color: inherit;
}

.r20-metric small {
    font-size: 11px;
    font-weight: 1000;
}

.r20-metric strong {
    overflow: hidden;
    font-size: clamp(18px,1.6vw,25px);
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r20-metric span {
    font-size: 10px;
    font-weight: 700;
    opacity: .76;
}

.r20-metric.purple {
    border-color: #c4b5fd;
    background:
        linear-gradient(145deg,#ede9fe,#ddd6fe);
    color: #5b21b6;
}

.r20-metric.blue {
    border-color: #7dd3fc;
    background:
        linear-gradient(145deg,#e0f2fe,#bae6fd);
    color: #075985;
}

.r20-metric.green {
    border-color: #6ee7b7;
    background:
        linear-gradient(145deg,#d1fae5,#a7f3d0);
    color: #065f46;
}

.r20-metric.yellow {
    border-color: #fcd34d;
    background:
        linear-gradient(145deg,#fef3c7,#fde68a);
    color: #92400e;
}

.r20-metric.orange {
    border-color: #fdba74;
    background:
        linear-gradient(145deg,#ffedd5,#fed7aa);
    color: #9a3412;
}

@media (max-width: 1180px) {
    .r20-metrics {
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }
}

@media (max-width: 760px) {
    .r6-point.r20-point {
        padding: 15px;
        border-radius: 18px;
    }

    .r20-point-head {
        grid-template-columns: auto 1fr;
    }

    .r20-live {
        grid-column: 2;
        width: max-content;
    }

    .r20-metrics {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
        gap: 9px;
    }

    .r20-metric {
        min-height: 104px;
        padding: 13px;
    }

    .r20-metric.orange {
        grid-column: 1 / -1;
    }
}

@media (max-width: 390px) {
    .r20-metrics {
        grid-template-columns: 1fr;
    }

    .r20-metric.orange {
        grid-column: auto;
    }
}

/* SOFAME-PWA-SALES-POINTS-R20B */

.r6-points {
    display: grid !important;
    gap: 12px !important;
}

.r20b-point {
    display: grid !important;
    grid-template-columns:
        48px minmax(130px, .8fr) minmax(500px, 3fr) !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 82px !important;
    padding: 12px 16px !important;
    border: 1px solid #ddd9f1 !important;
    border-radius: 17px !important;
    background:
        linear-gradient(
            110deg,
            #ffffff,
            #faf8ff 55%,
            #f2fcff
        ) !important;
    box-shadow:
        0 8px 22px rgba(37, 43, 88, .06) !important;
}

.r20b-point .r6-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    font-size: 20px !important;
}

.r20b-identity {
    display: grid !important;
    min-width: 0 !important;
    gap: 3px !important;
}

.r20b-identity strong {
    overflow: hidden;
    color: #17213f !important;
    font-size: 16px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r20b-identity span {
    overflow: hidden;
    color: #7a7890 !important;
    font-size: 12px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r20b-metrics {
    display: grid !important;
    grid-template-columns:
        repeat(5, minmax(92px, 1fr)) !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.r20b-metrics > span {
    display: grid !important;
    min-width: 0 !important;
    min-height: 54px !important;
    align-content: center !important;
    gap: 4px !important;
    padding: 8px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    line-height: 1.1 !important;
}

.r20b-metrics small {
    overflow: hidden !important;
    color: inherit !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.r20b-metrics b {
    overflow: hidden !important;
    color: inherit !important;
    font-size: 14px !important;
    font-weight: 1000 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.r20b-metrics .available {
    border-color: #c4b5fd !important;
    background: #ede9fe !important;
    color: #5b21b6 !important;
}

.r20b-metrics .sold {
    border-color: #7dd3fc !important;
    background: #e0f2fe !important;
    color: #075985 !important;
}

.r20b-metrics .net {
    border-color: #6ee7b7 !important;
    background: #d1fae5 !important;
    color: #065f46 !important;
}

.r20b-metrics .commission {
    border-color: #fcd34d !important;
    background: #fef3c7 !important;
    color: #92400e !important;
}

.r20b-metrics .gross {
    border-color: #fdba74 !important;
    background: #ffedd5 !important;
    color: #9a3412 !important;
}

@media (max-width: 1100px) {
    .r20b-point {
        grid-template-columns:
            48px minmax(0, 1fr) !important;
    }

    .r20b-metrics {
        grid-column: 1 / -1 !important;
        grid-template-columns:
            repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .r20b-point {
        padding: 12px !important;
    }

    .r20b-metrics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .r20b-metrics .gross {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 380px) {
    .r20b-metrics {
        grid-template-columns: 1fr !important;
    }

    .r20b-metrics .gross {
        grid-column: auto !important;
    }
}

/* SOFAME-PWA-ASSIGN-ROUTER-CARDS-R23 */

.r23-shell {
    display: grid;
    gap: 18px;
    color: #21184b;
}

.r23-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 26px;
    border-radius: 28px;
    color: #fff;
    background:
        linear-gradient(
            120deg,
            #29166f,
            #6d28d9 50%,
            #0891b2
        );
    box-shadow: 0 20px 45px rgba(55, 34, 125, .20);
}

.r23-heading > div > span {
    color: #bff8ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
}

.r23-heading h1 {
    margin: 6px 0;
    font-size: 34px;
}

.r23-heading p {
    max-width: 700px;
    margin: 0;
    color: #e8e6ff;
}

.r23-heading > strong {
    flex: 0 0 auto;
    padding: 11px 16px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
}

.r23-panel {
    padding: 22px;
    border: 1px solid rgba(105, 78, 190, .13);
    border-radius: 26px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 50px rgba(49, 38, 100, .10);
}

.r23-panel > header {
    margin-bottom: 16px;
}

.r23-panel h2,
.r23-panel p {
    margin: 0;
}

.r23-panel p {
    margin-top: 4px;
    color: #77708f;
}

.r23-router-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.r23-router-card {
    display: grid;
    grid-template-columns: 48px minmax(130px, 1fr) auto 34px;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 92px;
    padding: 14px 15px;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 21px;
    color: #fff;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 13px 28px rgba(25, 25, 80, .16);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.r23-router-card:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 18px 34px rgba(25, 25, 80, .23);
}

.r23-router-card.purple {
    background: linear-gradient(135deg, #312e81, #7c3aed);
}

.r23-router-card.blue {
    background: linear-gradient(135deg, #075985, #0ea5e9);
}

.r23-router-card.green {
    background: linear-gradient(135deg, #065f46, #10b981);
}

.r23-router-card.orange {
    background: linear-gradient(135deg, #9a3412, #f97316);
}

.r23-router-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    font-size: 19px;
    font-weight: 900;
}

.r23-router-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.r23-router-copy small {
    color: rgba(255, 255, 255, .72);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .10em;
}

.r23-router-copy strong {
    overflow: hidden;
    margin-top: 2px;
    color: #fff;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r23-router-copy em {
    margin-top: 3px;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.r23-router-copy em.online {
    color: #86efac;
}

.r23-router-copy em.offline {
    color: #fecaca;
}

.r23-router-stats {
    display: flex;
    gap: 8px;
}

.r23-router-stats > span {
    display: flex;
    min-width: 82px;
    padding: 8px 9px;
    flex-direction: column;
    border-radius: 13px;
    text-align: center;
    background: rgba(255, 255, 255, .14);
}

.r23-router-stats b {
    color: #fff;
    font-size: 17px;
}

.r23-router-stats small {
    margin-top: 1px;
    color: rgba(255, 255, 255, .72);
    font-size: 9px;
    text-transform: uppercase;
}

.r23-router-card > i {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    color: #21184b;
    background: #fff;
    font-size: 25px;
    font-style: normal;
    font-weight: 900;
}

.r23-back {
    flex: 0 0 auto;
    padding: 12px 17px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 15px;
    color: #21184b;
    background: #fff;
    font-weight: 900;
    cursor: pointer;
}

.r23-back:hover {
    background: #eefcff;
}

@media (max-width: 900px) {
    .r23-router-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .r23-heading {
        align-items: flex-start;
        flex-direction: column;
        padding: 19px;
    }

    .r23-heading h1 {
        font-size: 28px;
    }

    .r23-panel {
        padding: 14px;
        border-radius: 20px;
    }

    .r23-router-card {
        grid-template-columns: 44px minmax(0, 1fr) 30px;
        min-height: 84px;
        padding: 12px;
    }

    .r23-router-icon {
        width: 42px;
        height: 42px;
    }

    .r23-router-stats {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .r23-router-stats > span {
        min-width: 0;
    }

    .r23-router-card > i {
        grid-column: 3;
        grid-row: 1;
    }

    .r23-back {
        width: 100%;
    }
}

/* SOFAME-PWA-TICKET-VERIFY-R24 */

.r24-verifier {
    display: grid;
    gap: 18px;
    padding: 25px;
    border: 1px solid rgba(86, 68, 176, .15);
    border-top: 6px solid #0ea5e9;
    border-radius: 28px;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(239,253,255,.96)
        );
    box-shadow: 0 20px 55px rgba(35, 33, 90, .12);
}

.r24-verifier-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.r24-verifier-head small {
    color: #6d28d9;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
}

.r24-verifier-head h2 {
    margin: 5px 0;
    color: #17143f;
    font-size: 30px;
}

.r24-verifier-head p {
    margin: 0;
    color: #6e6b85;
}

.r24-shield {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 19px;
    color: #fff;
    background:
        linear-gradient(135deg,#10b981,#0ea5e9);
    font-size: 27px;
    font-weight: 900;
    box-shadow: 0 12px 25px rgba(14,165,233,.24);
}

.r24-form {
    padding: 18px;
    border: 1px solid #ded9f5;
    border-radius: 20px;
    background: #fff;
}

.r24-form > label {
    display: block;
    margin-bottom: 8px;
    color: #292353;
    font-weight: 900;
}

.r24-search-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
}

.r24-search-row input {
    width: 100%;
    min-height: 55px;
    margin: 0;
    border: 2px solid #dcd6f4;
    border-radius: 16px;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: .10em;
}

.r24-search-row input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 4px rgba(124,58,237,.11);
}

.r24-search-row button {
    min-height: 55px;
    padding: 0 22px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    background:
        linear-gradient(135deg,#6d28d9,#0ea5e9);
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(79,70,229,.20);
}

.r24-search-row button:disabled {
    cursor: wait;
    opacity: .72;
}

.r24-security {
    margin: 9px 0 0;
    color: #77708f;
    font-size: 12px;
}

.r24-result:empty {
    display: none;
}

.r24-message {
    display: flex;
    padding: 17px;
    flex-direction: column;
    gap: 4px;
    border-radius: 17px;
    font-weight: 700;
}

.r24-message.loading {
    color: #075985;
    background: #e0f2fe;
}

.r24-message.error {
    color: #991b1b;
    background: #fff1f2;
    border: 1px solid #fecdd3;
}

.r24-ticket-card {
    overflow: hidden;
    border: 1px solid #dcd7f1;
    border-radius: 22px;
    background: #fff;
}

.r24-ticket-card > header {
    display: grid;
    grid-template-columns: 52px minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 18px;
}

.r24-ticket-card > header small {
    color: #766b9b;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}

.r24-ticket-card > header h3 {
    margin: 3px 0;
    color: #17143f;
    font-size: 24px;
}

.r24-ticket-card > header p {
    margin: 0;
    color: #68647d;
}

.r24-state-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    color: #fff;
    font-size: 23px;
    font-weight: 900;
}

.r24-state-badge {
    padding: 9px 13px;
    border-radius: 999px;
    font-size: 13px;
}

.r24-ticket-card.available .r24-state-icon {
    background: linear-gradient(135deg,#059669,#10b981);
}

.r24-ticket-card.available .r24-state-badge {
    color: #047857;
    background: #d1fae5;
}

.r24-ticket-card.assigned .r24-state-icon {
    background: linear-gradient(135deg,#2563eb,#06b6d4);
}

.r24-ticket-card.assigned .r24-state-badge {
    color: #075985;
    background: #cffafe;
}

.r24-ticket-card.used .r24-state-icon {
    background: linear-gradient(135deg,#7c3aed,#a855f7);
}

.r24-ticket-card.used .r24-state-badge {
    color: #6b21a8;
    background: #f3e8ff;
}

.r24-ticket-card.expired .r24-state-icon {
    background: linear-gradient(135deg,#d97706,#f59e0b);
}

.r24-ticket-card.expired .r24-state-badge {
    color: #92400e;
    background: #fef3c7;
}

.r24-ticket-card.deleted .r24-state-icon {
    background: linear-gradient(135deg,#475569,#64748b);
}

.r24-ticket-card.deleted .r24-state-badge {
    color: #334155;
    background: #e2e8f0;
}

.r24-result-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 1px;
    background: #e9e5f5;
}

.r24-result-grid > span {
    display: flex;
    min-height: 74px;
    padding: 13px;
    flex-direction: column;
    justify-content: center;
    background: #fafaff;
}

.r24-result-grid small {
    color: #817b98;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.r24-result-grid b {
    margin-top: 4px;
    overflow-wrap: anywhere;
    color: #211b4b;
    font-size: 14px;
}

.r24-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    vertical-align: -3px;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: r24-spin .65s linear infinite;
}

@keyframes r24-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 900px) {
    .r24-result-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 620px) {
    .r24-verifier {
        padding: 16px;
        border-radius: 21px;
    }

    .r24-verifier-head h2 {
        font-size: 25px;
    }

    .r24-search-row {
        grid-template-columns: 1fr;
    }

    .r24-search-row button {
        width: 100%;
    }

    .r24-ticket-card > header {
        grid-template-columns: 46px minmax(0,1fr);
    }

    .r24-state-badge {
        grid-column: 1 / -1;
        text-align: center;
    }

    .r24-result-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* SOFAME-PWA-SELLER-ACCESS-R25 */

.r25-shell {
    display: grid;
    gap: 18px;
    color: #21184b;
}

.r25-loading,
.r25-empty {
    padding: 30px;
    border: 1px dashed #c9bfeb;
    border-radius: 22px;
    color: #70698a;
    text-align: center;
    background: #faf9ff;
}

.r25-empty {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.r25-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 26px;
    border-radius: 28px;
    color: #fff;
    background:
        linear-gradient(
            120deg,
            #29166f,
            #6d28d9 50%,
            #0891b2
        );
    box-shadow: 0 20px 45px rgba(55,34,125,.20);
}

.r25-heading > div > span {
    color: #bff8ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
}

.r25-heading h1 {
    margin: 6px 0;
    font-size: 34px;
}

.r25-heading p {
    margin: 0;
    color: #e8e6ff;
}

.r25-heading > strong {
    padding: 10px 15px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(255,255,255,.16);
}

.r25-panel {
    padding: 22px;
    border: 1px solid rgba(105,78,190,.13);
    border-radius: 26px;
    background: rgba(255,255,255,.95);
    box-shadow: 0 18px 50px rgba(49,38,100,.10);
}

.r25-panel > header {
    margin-bottom: 16px;
}

.r25-panel h2,
.r25-panel p {
    margin: 0;
}

.r25-panel p {
    margin-top: 4px;
    color: #77708f;
}

.r25-router-list {
    display: grid;
    gap: 11px;
}

.r25-router-card {
    display: grid;
    grid-template-columns:
        48px minmax(150px,1fr) auto 34px;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 88px;
    padding: 13px 15px;
    border: 1px solid #ded8f3;
    border-left: 6px solid #7c3aed;
    border-radius: 20px;
    color: #21184b;
    text-align: left;
    background:
        linear-gradient(135deg,#faf9ff,#effaff);
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(40,35,90,.09);
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.r25-router-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(40,35,90,.15);
}

.r25-router-card.blue {
    border-left-color: #0ea5e9;
}

.r25-router-card.green {
    border-left-color: #10b981;
}

.r25-router-card.orange {
    border-left-color: #f97316;
}

.r25-router-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    color: #fff;
    background:
        linear-gradient(135deg,#6d28d9,#0ea5e9);
    font-size: 19px;
    font-weight: 900;
}

.r25-router-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.r25-router-copy small {
    color: #7a7295;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .10em;
}

.r25-router-copy strong {
    overflow: hidden;
    margin-top: 2px;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r25-router-copy em {
    margin-top: 3px;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.r25-router-copy em.online {
    color: #059669;
}

.r25-router-copy em.offline {
    color: #dc2626;
}

.r25-router-copy em.warning {
    color: #d97706;
}

.r25-router-metrics {
    display: flex;
    gap: 7px;
}

.r25-router-metrics > span {
    display: flex;
    min-width: 74px;
    padding: 7px 9px;
    flex-direction: column;
    border-radius: 12px;
    text-align: center;
    background: #fff;
}

.r25-router-metrics b {
    color: #32265f;
    font-size: 16px;
}

.r25-router-metrics small {
    color: #827b99;
    font-size: 9px;
    text-transform: uppercase;
}

.r25-router-card > i {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    color: #fff;
    background: #312e81;
    font-size: 24px;
    font-style: normal;
}

.r25-back {
    padding: 12px 17px;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 15px;
    color: #21184b;
    background: #fff;
    font-weight: 900;
    cursor: pointer;
}

.r25-points-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.r25-points-title > span {
    padding: 8px 12px;
    border-radius: 999px;
    color: #6525bd;
    background: #eeeaff;
    font-weight: 900;
}

.r25-warning {
    margin-bottom: 13px;
    padding: 14px;
    border: 1px solid #fde68a;
    border-radius: 15px;
    color: #92400e;
    background: #fffbeb;
    font-weight: 700;
}

.r25-point-list {
    display: grid;
    gap: 10px;
}

.r25-point {
    display: grid;
    grid-template-columns:
        48px minmax(130px,1fr)
        auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid #e5e0f3;
    border-radius: 18px;
    background: #fbfaff;
}

.r25-avatar {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    color: #fff;
    background:
        linear-gradient(135deg,#7c3aed,#0ea5e9);
    font-size: 19px;
    font-weight: 900;
}

.r25-point-identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.r25-point-identity strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r25-point-identity span {
    color: #77708f;
    font-size: 12px;
}

.r25-point-info {
    display: flex;
    gap: 7px;
}

.r25-point-info > span {
    display: flex;
    min-width: 100px;
    padding: 7px 9px;
    flex-direction: column;
    border-radius: 11px;
    background: #f0edfa;
}

.r25-point-info small {
    color: #817a98;
    font-size: 9px;
    text-transform: uppercase;
}

.r25-point-info b {
    margin-top: 2px;
    font-size: 12px;
}

.r25-status {
    padding: 8px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.r25-status.created {
    color: #047857;
    background: #d1fae5;
}

.r25-status.pending {
    color: #92400e;
    background: #fef3c7;
}

.r25-status.new {
    color: #5b21b6;
    background: #ede9fe;
}

.r25-access-button {
    padding: 11px 13px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background:
        linear-gradient(135deg,#6d28d9,#0ea5e9);
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

.r25-access-button:disabled {
    color: #77708f;
    background: #e9e7ef;
    cursor: not-allowed;
}

@media (max-width: 900px) {
    .r25-point {
        grid-template-columns: 46px minmax(0,1fr) auto;
    }

    .r25-point-info {
        grid-column: 1 / -1;
    }

    .r25-access-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 620px) {
    .r25-heading {
        align-items: flex-start;
        flex-direction: column;
        padding: 19px;
    }

    .r25-heading h1 {
        font-size: 28px;
    }

    .r25-panel {
        padding: 14px;
        border-radius: 20px;
    }

    .r25-router-card {
        grid-template-columns: 44px minmax(0,1fr) 30px;
    }

    .r25-router-metrics {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        width: 100%;
    }

    .r25-router-metrics > span {
        min-width: 0;
    }

    .r25-router-card > i {
        grid-column: 3;
        grid-row: 1;
    }

    .r25-back {
        width: 100%;
    }

    .r25-point {
        grid-template-columns: 44px minmax(0,1fr);
    }

    .r25-status {
        grid-column: 1 / -1;
        text-align: center;
    }

    .r25-point-info {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* SOFAME-PWA-SELLER-DESIGN-R29B */

.r29b-shell{display:grid;gap:18px;color:#17213d}
.r29b-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:24px 26px;border-radius:27px;background:radial-gradient(circle at 85% 10%,rgba(255,255,255,.22),transparent 25%),linear-gradient(125deg,#28156c,#7032e3 48%,#0799c1);color:#fff;box-shadow:0 20px 48px rgba(53,36,134,.22)}
.r29b-hero:after{position:absolute;right:-45px;bottom:-85px;width:210px;height:210px;border:30px solid rgba(255,255,255,.07);border-radius:50%;content:""}
.r29b-avatar{position:relative;z-index:1;display:grid;width:68px;height:68px;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:21px;background:linear-gradient(145deg,#ff9e32,#ff6815);font-size:29px;font-weight:1000;box-shadow:0 13px 27px rgba(255,104,20,.3)}
.r29b-identity{position:relative;z-index:1;min-width:0}
.r29b-identity>span,.r29b-title span{display:block;color:#bff8ff;font-size:11px;font-weight:1000;letter-spacing:.15em}
.r29b-identity h1{overflow:hidden;margin:5px 0 9px;color:#fff;font-size:clamp(27px,4vw,40px);line-height:1;text-overflow:ellipsis;white-space:nowrap}
.r29b-identity>div{display:flex;flex-wrap:wrap;gap:7px}
.r29b-identity small{padding:7px 10px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.12);color:#f5f5ff;font-weight:800}
.r29b-rate{position:relative;z-index:1;display:grid;min-width:160px;gap:2px;padding:14px 17px;border:1px solid rgba(255,255,255,.27);border-radius:18px;background:rgba(255,255,255,.14)}
.r29b-rate small,.r29b-rate span{color:#e8e9ff}
.r29b-rate strong{font-size:29px}
.r29b-period,.r29b-panel{padding:20px;border:1px solid rgba(98,76,175,.12);border-radius:24px;background:rgba(255,255,255,.86);box-shadow:0 14px 38px rgba(46,40,104,.08)}
.r29b-title{display:flex;align-items:center;justify-content:space-between;gap:13px;margin-bottom:14px}
.r29b-title span{color:#7550cb}
.r29b-title h2{margin:4px 0 0;color:#171c3c;font-size:23px}
.r29b-title em{padding:7px 11px;border-radius:999px;background:#dcf8ec;color:#07865e;font-size:11px;font-style:normal;font-weight:900}
.r29b-title em.month{background:#eee8ff;color:#6831bd}
.r29b-title em.stock{display:grid;width:44px;height:44px;place-items:center;padding:0;border-radius:14px;background:linear-gradient(135deg,#7133e7,#0c9fd1);color:#fff;font-size:19px}
.r29b-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.r29b-metric{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;min-height:101px;padding:16px;border-radius:19px;color:#fff;box-shadow:0 13px 25px rgba(32,31,91,.13)}
.r29b-metric:after{position:absolute;right:-20px;bottom:-34px;width:80px;height:80px;border:15px solid rgba(255,255,255,.1);border-radius:50%;content:""}
.r29b-metric.violet{background:linear-gradient(135deg,#6d2bdf,#9438ee)}
.r29b-metric.blue{background:linear-gradient(135deg,#0879c6,#06a8d3)}
.r29b-metric.green{background:linear-gradient(135deg,#078b6a,#0bc08c)}
.r29b-metric.orange{background:linear-gradient(135deg,#e86608,#ff9c08)}
.r29b-icon{display:grid;flex:0 0 auto;width:40px;height:40px;place-items:center;border-radius:12px;background:rgba(255,255,255,.18);font-size:19px;font-weight:1000}
.r29b-metric>div{position:relative;z-index:1;display:grid;min-width:0;gap:6px}
.r29b-metric small{overflow:hidden;color:rgba(255,255,255,.89);font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.r29b-metric strong{overflow:hidden;color:#fff;font-size:clamp(19px,2vw,28px);line-height:1;text-overflow:ellipsis;white-space:nowrap}
.r29b-bottom{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:15px}
.r29b-stock{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.r29b-stock>div{display:grid;gap:5px;padding:12px;border-radius:14px;background:#f1edfb}
.r29b-stock>div:nth-child(2){background:#e0f8ef}
.r29b-stock>div:nth-child(3){background:#fff0dd}
.r29b-stock small{color:#736d87;font-size:11px;font-weight:800}
.r29b-stock strong{color:#211b45;font-size:21px}
.r29b-progress{overflow:hidden;height:8px;margin-top:14px;border-radius:999px;background:#e8e4f2}
.r29b-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7133e7,#10b895)}
.r29b-caption{display:block;margin-top:6px;color:#78728a}
.r29b-list{display:grid;gap:8px;max-height:265px;overflow:auto}
.r29b-closure{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:11px;border:1px solid #ebe7f4;border-radius:14px;background:#faf9fd}
.r29b-closure>span{display:grid;width:36px;height:36px;place-items:center;border-radius:11px;background:#dcf7ec;color:#07966a;font-weight:1000}
.r29b-closure>div{display:grid;min-width:0;gap:2px}
.r29b-closure small{color:#7c768c}
.r29b-closure>b{color:#6030b4;white-space:nowrap}
.r29b-empty{display:grid;min-height:130px;place-items:center;align-content:center;gap:4px;color:#827b94;text-align:center}
.r29b-empty>span{color:#9870e5;font-size:29px}
.r29b-empty strong{color:#30284f}

@media(max-width:1000px){
    .r29b-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
    .r29b-bottom{grid-template-columns:1fr}
}

@media(max-width:620px){
    .r29b-shell{gap:11px}
    .r29b-hero{grid-template-columns:auto 1fr;gap:11px;padding:15px;border-radius:20px}
    .r29b-avatar{width:50px;height:50px;border-radius:15px;font-size:21px}
    .r29b-identity h1{margin-bottom:6px;font-size:23px}
    .r29b-identity>span{font-size:9px}
    .r29b-identity>div{gap:4px}
    .r29b-identity small{padding:4px 6px;font-size:9px}
    .r29b-rate{grid-column:1/-1;grid-template-columns:1fr auto;align-items:center;min-width:0;padding:9px 11px;border-radius:13px}
    .r29b-rate strong{grid-column:2;grid-row:1/3;font-size:23px}
    .r29b-rate span{font-size:10px}
    .r29b-period,.r29b-panel{padding:12px;border-radius:18px}
    .r29b-title{margin-bottom:9px}
    .r29b-title h2{font-size:18px}
    .r29b-title span{font-size:9px}
    .r29b-title em{padding:5px 7px;font-size:9px}
    .r29b-metrics{gap:6px}
    .r29b-metric{display:grid;grid-template-columns:auto 1fr;min-height:78px;gap:7px;padding:10px;border-radius:15px}
    .r29b-icon{width:29px;height:29px;border-radius:9px;font-size:14px}
    .r29b-metric>div{gap:4px}
    .r29b-metric small{font-size:9px}
    .r29b-metric strong{font-size:17px}
    .r29b-stock{gap:5px}
    .r29b-stock>div{padding:9px 5px;text-align:center}
    .r29b-stock small{font-size:9px}
    .r29b-stock strong{font-size:18px}
    .r29b-empty{min-height:95px}
}

@media(max-width:370px){
    .r29b-icon{display:none}
    .r29b-metric{grid-template-columns:1fr}
    .r29b-metric strong{font-size:15px}
}


/* SOFAME-PWA-TENANT-MOBILE-R30 */

/*
 * Optimisation intermédiaire pour tablettes.
 */
@media (max-width: 1024px) {
    .wrap {
        width: min(96%, 900px);
    }

    .r3c-main-grid,
    .r6-layout {
        grid-template-columns: 1fr;
    }

    .r3c-stats,
    .r6-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .r23-router-list,
    .r25-router-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * Navigation et interfaces mobiles tenant.
 */
@media (max-width: 760px) {
    :root {
        --r30-safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    html {
        width: 100%;
        overflow-x: hidden;
        scroll-behavior: smooth;
    }

    body {
        width: 100%;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    button,
    input,
    select {
        min-height: 44px;
    }

    button {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .shell {
        padding-bottom: calc(82px + var(--r30-safe-bottom));
    }

    /*
     * Barre supérieure compacte.
     */
    .top {
        min-height: 62px;
        padding: 9px 13px;
        gap: 10px;
        z-index: 50;
        box-shadow: 0 8px 28px rgba(20, 16, 61, .18);
    }

    .brand {
        min-width: 0;
        gap: 9px;
        font-size: 15px;
        line-height: 1.15;
    }

    .brand img {
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
    }

    .brand small {
        overflow: hidden;
        max-width: 150px;
        margin-top: 3px;
        font-size: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .top > div:last-child {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
    }

    .top > div:last-child > b {
        display: none;
    }

    .top .ghost {
        min-height: 40px;
        padding: 9px 12px;
        border-radius: 12px;
        font-size: 12px;
    }

    .wrap {
        width: calc(100% - 20px);
        margin: 14px auto 24px;
    }

    #msg:empty {
        display: none;
    }

    .notice {
        margin: 8px 0;
        padding: 10px 12px;
        border-radius: 12px;
        font-size: 12px;
        line-height: 1.4;
    }

    /*
     * Navigation principale fixe en bas.
     */
    .nav {
        position: fixed;
        right: 8px;
        bottom: calc(7px + var(--r30-safe-bottom));
        left: 8px;
        z-index: 100;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        width: auto;
        margin: 0;
        padding: 6px;
        border: 1px solid rgba(255, 255, 255, .85);
        border-radius: 20px;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 18px 50px rgba(25, 20, 70, .26);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .nav button {
        position: relative;
        display: grid;
        min-width: 0;
        min-height: 56px;
        place-items: center;
        align-content: center;
        gap: 4px;
        padding: 5px 2px;
        border-radius: 15px;
        font-size: 9px;
        line-height: 1.05;
        text-align: center;
        white-space: normal;
    }

    .nav button::before {
        display: block;
        font-size: 18px;
        font-weight: 900;
        line-height: 1;
    }

    .nav button:nth-child(1)::before {
        content: "▦";
    }

    .nav button:nth-child(2)::before {
        content: "✦";
    }

    .nav button:nth-child(3)::before {
        content: "⇄";
    }

    .nav button:nth-child(4)::before {
        content: "↗";
    }

    .nav button:nth-child(5)::before {
        content: "♙";
    }

    .nav button.active {
        transform: translateY(-2px);
        box-shadow: 0 7px 18px rgba(93, 45, 210, .3);
    }

    #view {
        min-width: 0;
    }

    /*
     * Tableau de bord.
     */
    .r3c-title {
        margin: 15px 0 12px;
    }

    .r3c-title span {
        font-size: 10px;
        letter-spacing: .15em;
    }

    .r3c-title h1 {
        margin: 5px 0;
        font-size: 29px;
        line-height: 1.05;
    }

    .r3c-title p {
        margin: 0;
        font-size: 13px;
        line-height: 1.4;
    }

    .r3c-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 12px 0;
    }

    .r3c-stats article {
        min-height: 105px;
        padding: 13px;
        border-radius: 18px;
    }

    .r3c-stats article span {
        font-size: 11px;
        line-height: 1.2;
    }

    .r3c-stats article strong {
        margin: 10px 0 5px;
        font-size: 24px;
        line-height: 1;
    }

    .r3c-stats article small {
        font-size: 10px;
        line-height: 1.25;
    }

    .r3c-main-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .r3c-panel {
        min-width: 0;
        padding: 14px;
        border-radius: 20px;
    }

    .r3c-panel-title {
        align-items: flex-start;
        gap: 8px;
    }

    .r3c-panel-title h2 {
        font-size: 20px;
    }

    .r3c-router-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .r3c-router {
        min-width: 0;
        padding: 13px;
        border-radius: 17px;
    }

    .r3c-router header {
        gap: 8px;
    }

    .r3c-router h3 {
        overflow: hidden;
        font-size: 15px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .r3c-router-money {
        grid-template-columns: repeat(2, 1fr);
        gap: 7px;
    }

    .r3c-service-list,
    .r3c-equipment-list {
        gap: 7px;
    }

    /*
     * Génération.
     */
    .r8-shell {
        gap: 12px;
    }

    .r8-page-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        padding: 4px 0;
    }

    .r8-page-heading span {
        margin-bottom: 5px;
        font-size: 10px;
    }

    .r8-page-heading h1 {
        font-size: 29px;
        line-height: 1.05;
    }

    .r8-page-heading p {
        margin-top: 7px;
        font-size: 13px;
        line-height: 1.4;
    }

    .r8-open-form {
        width: 100%;
        min-height: 48px;
        padding: 0 15px;
    }

    .r8-stock-panel,
    .r7-form-panel,
    .r7-result,
    .r8-ticket-workspace {
        padding: 13px;
        border-radius: 20px;
    }

    .r8-stock-panel > header,
    .r8-ticket-workspace > header {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
        margin-bottom: 12px;
    }

    .r8-stock-panel > header h2,
    .r8-ticket-workspace h2 {
        font-size: 19px;
    }

    .r8-stock-panel > header p {
        margin: 3px 0;
        font-size: 12px;
    }

    .r8-router-list {
        gap: 9px;
    }

    .r8-router-card {
        grid-template-columns: 43px minmax(0, 1fr) 34px;
        gap: 10px;
        min-height: 86px;
        padding: 12px;
        border-radius: 18px;
    }

    .r8-router-icon {
        width: 43px;
        height: 43px;
        border-radius: 13px;
        font-size: 18px;
    }

    .r8-router-copy {
        min-width: 0;
    }

    .r8-router-copy small {
        font-size: 9px;
    }

    .r8-router-copy strong {
        overflow: hidden;
        font-size: 15px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .r8-router-copy em {
        font-size: 11px;
    }

    .r8-router-total {
        grid-column: 2;
        justify-items: start;
    }

    .r8-router-total strong {
        font-size: 18px;
    }

    .r8-router-total small {
        font-size: 9px;
    }

    .r8-router-card > i {
        grid-column: 3;
        grid-row: 1 / 3;
        width: 34px;
        height: 34px;
        font-size: 24px;
    }

    .r8-router-details {
        padding: 10px;
    }

    .r8-profile-row {
        grid-template-columns: 38px minmax(0, 1fr) 25px;
        gap: 9px;
        padding: 10px;
        border-radius: 14px;
    }

    .r8-profile-icon {
        width: 38px;
        height: 38px;
    }

    .r8-profile-row > b {
        grid-column: 2;
        justify-items: start;
        font-size: 16px;
    }

    .r8-profile-row > i {
        grid-column: 3;
        grid-row: 1 / 3;
    }

    .r7-form-head {
        gap: 10px;
        margin-bottom: 12px;
    }

    .r7-form-head h2 {
        font-size: 20px;
    }

    .r7-form-head p {
        font-size: 12px;
    }

    .r7-form-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .r7-form-grid input,
    .r7-form-grid select {
        min-height: 48px;
    }

    .r7-ticket-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .r7-ticket-list article {
        min-width: 0;
        padding: 9px;
    }

    /*
     * Sélection des MikroTik pour Attribuer.
     */
    .r23-shell,
    .r25-shell {
        gap: 12px;
    }

    .r23-heading,
    .r25-heading {
        align-items: flex-start;
        padding: 16px;
        border-radius: 20px;
    }

    .r23-heading h1,
    .r25-heading h1 {
        margin: 5px 0;
        font-size: 27px;
        line-height: 1.05;
    }

    .r23-heading p,
    .r25-heading p {
        font-size: 12px;
        line-height: 1.4;
    }

    .r23-heading > strong,
    .r25-heading > strong {
        padding: 7px 10px;
        font-size: 11px;
    }

    .r23-panel,
    .r25-panel {
        padding: 13px;
        border-radius: 20px;
    }

    .r23-panel > header,
    .r25-panel > header {
        align-items: flex-start;
        margin-bottom: 11px;
    }

    .r23-panel h2,
    .r25-panel h2 {
        font-size: 19px;
    }

    .r23-panel p,
    .r25-panel p {
        font-size: 11px;
    }

    .r23-router-list,
    .r25-router-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .r23-router-card,
    .r25-router-card {
        min-width: 0;
        padding: 12px;
        border-radius: 17px;
    }

    .r23-router-stats,
    .r25-router-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .r23-router-stats > span,
    .r25-router-metrics > span {
        min-width: 0;
        padding: 6px 3px;
        font-size: 9px;
        text-align: center;
    }

    /*
     * Interface d’attribution ouverte.
     */
    .r6-shell {
        gap: 11px;
    }

    .r6-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 15px;
        border-radius: 20px;
    }

    .r6-heading h1 {
        font-size: 27px;
    }

    .r6-heading p {
        font-size: 12px;
    }

    .r6-heading label {
        min-width: 0;
        margin-top: 4px;
        font-size: 12px;
    }

    .r6-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .r6-kpis article {
        min-height: 92px;
        padding: 12px;
        border-radius: 17px;
    }

    .r6-kpis span {
        font-size: 11px;
        line-height: 1.2;
    }

    .r6-kpis strong {
        margin-top: 12px;
        font-size: 24px;
    }

    .r6-layout {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .r6-form,
    .r6-guide,
    .r6-section {
        min-width: 0;
        padding: 13px;
        border-radius: 19px;
    }

    .r6-form-title {
        gap: 10px;
        margin-bottom: 10px;
    }

    .r6-form-title > span {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .r6-form-title h2 {
        font-size: 19px;
    }

    .r6-form-title p {
        font-size: 11px;
    }

    .r6-form label {
        margin-top: 10px;
        font-size: 12px;
    }

    .r6-quantity {
        grid-template-columns: 46px 1fr 46px;
    }

    .r6-guide > span {
        width: 42px;
        height: 42px;
    }

    .r6-guide h3 {
        font-size: 19px;
    }

    .r6-guide p,
    .r6-guide li {
        font-size: 12px;
    }

    .r6-stocks {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .r6-stock {
        padding: 12px;
        border-radius: 15px;
    }

    .r6-stock > strong {
        margin: 9px 0;
        font-size: 24px;
    }

    .r6-point {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 9px;
        padding: 10px;
        border-radius: 15px;
    }

    .r6-avatar {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 16px;
    }

    .r6-point-metrics {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    .r6-point-metrics span {
        min-width: 0;
        padding: 7px 4px;
        font-size: 9px;
        text-align: center;
    }

    /*
     * Rapports.
     */
    .r5-shell,
    .r5-report,
    .r5-dashboard {
        min-width: 0;
    }

    .r5-heading,
    .r5-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 15px;
        border-radius: 20px;
    }

    .r5-heading h1,
    .r5-hero h1 {
        font-size: 27px;
        line-height: 1.05;
    }

    .r5-filters,
    .r5-filter-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
        border-radius: 18px;
    }

    .r5-kpis,
    .r5-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .r5-kpis article,
    .r5-summary article {
        min-width: 0;
        min-height: 94px;
        padding: 12px;
        border-radius: 17px;
    }

    .r5-kpis strong,
    .r5-summary strong {
        font-size: 23px;
    }

    .r5-grid,
    .r5-report-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .r5-panel,
    .r5-card {
        min-width: 0;
        padding: 13px;
        border-radius: 18px;
    }

    .r5-table-wrap {
        max-width: 100%;
        overflow-x: auto;
        border-radius: 14px;
        -webkit-overflow-scrolling: touch;
    }

    .r5-table {
        min-width: 650px;
    }

    /*
     * Accès vendeurs.
     */
    .r25-point {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 9px;
        padding: 10px;
        border-radius: 15px;
    }

    .r25-point-info {
        min-width: 0;
    }

    .r25-point-info strong {
        overflow: hidden;
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .r25-point-info small {
        font-size: 10px;
    }

    .r25-status {
        width: max-content;
        max-width: 100%;
        padding: 5px 8px;
        font-size: 9px;
    }

    .r25-access-button {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 44px;
        margin: 0;
    }

    /*
     * Fenêtres modales.
     */
    .r12-overlay,
    .r26-overlay,
    .r28-overlay {
        align-items: flex-end;
        padding: 8px;
    }

    .r12-modal,
    .r26-modal,
    .r28-modal {
        width: 100%;
        max-width: none;
        max-height: calc(100vh - 16px);
        padding: 18px 15px;
        overflow-y: auto;
        border-radius: 24px 24px 18px 18px;
        overscroll-behavior: contain;
    }

    .r12-modal h2,
    .r26-modal h2,
    .r28-modal h2 {
        font-size: 25px;
        line-height: 1.08;
    }

    .r12-actions,
    .r26-actions,
    .r28-actions {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .r9-overlay {
        padding: 0;
    }

    .r9-modal {
        width: 100vw;
        min-height: 100vh;
        max-height: 100vh;
        padding: 14px 11px;
        border-radius: 0;
    }

    .r9-context {
        grid-template-columns: 1fr;
    }

    .r9-table-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 390px) {
    .wrap {
        width: calc(100% - 14px);
    }

    .top {
        padding: 8px 9px;
    }

    .brand small {
        max-width: 120px;
    }

    .top .ghost {
        padding: 8px 9px;
        font-size: 10px;
    }

    .nav {
        right: 5px;
        left: 5px;
        gap: 2px;
        padding: 5px;
    }

    .nav button {
        min-height: 53px;
        font-size: 8px;
    }

    .nav button::before {
        font-size: 17px;
    }

    .r3c-stats,
    .r6-kpis,
    .r5-kpis,
    .r5-summary {
        gap: 6px;
    }

    .r3c-stats article,
    .r6-kpis article,
    .r5-kpis article,
    .r5-summary article {
        padding: 10px;
    }

    .r3c-stats article strong,
    .r6-kpis strong,
    .r5-kpis strong,
    .r5-summary strong {
        font-size: 21px;
    }
}


/* SOFAME-PWA-DASHBOARD-COMPACT-R32C */

/* Carte État du service compacte */
.r3c-service {
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 20px !important;
}

.r3c-service > header {
    gap: 8px !important;
}

.r3c-service > header small {
    font-size: 9px !important;
    letter-spacing: .13em !important;
}

.r3c-service > header h2 {
    margin: 2px 0 0 !important;
    font-size: 20px !important;
    line-height: 1.05 !important;
}

.r3c-service > header em {
    padding: 5px 8px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
}

.r3c-service-state {
    gap: 9px !important;
    margin: 10px 0 !important;
    padding: 10px !important;
    border-radius: 14px !important;
}

.r3c-service-state > span {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 20px !important;
}

.r3c-service-state small {
    font-size: 9px !important;
}

.r3c-service-state h3 {
    margin: 1px 0 !important;
    font-size: 15px !important;
    line-height: 1.1 !important;
}

.r3c-service-state p {
    margin-top: 3px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
}

.r3c-service-list {
    gap: 6px !important;
}

.r3c-service-list > span {
    min-height: 38px !important;
    padding: 8px 10px !important;
    border-radius: 11px !important;
}

.r3c-service-list > span small {
    font-size: 10px !important;
}

.r3c-service-list > span b {
    font-size: 13px !important;
}

/* Badge En ligne vert sur chaque routeur */
.r3c-router header em.online {
    color: #047857 !important;
    background: #dcfce7 !important;
    border: 1px solid #6ee7b7 !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, .22) !important;
}

.r3c-router header em.online::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 999px;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .16);
    vertical-align: middle;
}

/* Carte Vérifier un ticket compacte */
.r24-verifier {
    gap: 10px !important;
    padding: 15px !important;
    border-top-width: 4px !important;
    border-radius: 20px !important;
}

.r24-verifier-head {
    gap: 10px !important;
}

.r24-verifier-head small {
    font-size: 9px !important;
    letter-spacing: .13em !important;
}

.r24-verifier-head h2 {
    margin: 2px 0 !important;
    font-size: 22px !important;
    line-height: 1.05 !important;
}

.r24-verifier-head p {
    margin: 4px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
}

.r24-shield {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    font-size: 20px !important;
}

.r24-form {
    padding: 10px !important;
    border-radius: 14px !important;
}

.r24-form > label {
    margin-bottom: 5px !important;
    font-size: 11px !important;
}

.r24-search-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 7px !important;
}

.r24-search-row input {
    min-height: 45px !important;
    height: 45px !important;
    padding: 0 13px !important;
    border-radius: 11px !important;
    font-size: 16px !important;
    letter-spacing: .04em !important;
}

.r24-search-row button {
    min-height: 45px !important;
    height: 45px !important;
    padding: 0 14px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

.r24-security {
    margin: 5px 0 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
}

.r24-result:not(:empty) {
    padding: 10px !important;
    border-radius: 14px !important;
}

.r24-result-grid {
    gap: 7px !important;
}

.r24-result-grid > span {
    min-height: 58px !important;
    padding: 9px !important;
    border-radius: 11px !important;
}

/* Optimisation mobile */
@media (max-width: 620px) {
    .r3c-service {
        padding: 12px !important;
        border-radius: 17px !important;
    }

    .r3c-service-state {
        margin: 8px 0 !important;
        padding: 8px !important;
    }

    .r3c-service-state p {
        display: none !important;
    }

    .r3c-service-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .r3c-service-list > span:last-child {
        grid-column: 1 / -1 !important;
    }

    .r3c-service-list > span {
        display: grid !important;
        gap: 2px !important;
        min-width: 0 !important;
    }

    .r3c-service-list > span b {
        overflow-wrap: anywhere !important;
    }

    .r24-verifier {
        gap: 8px !important;
        padding: 12px !important;
        border-radius: 17px !important;
    }

    .r24-verifier-head h2 {
        font-size: 19px !important;
    }

    .r24-verifier-head p,
    .r24-security {
        display: none !important;
    }

    .r24-shield {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    .r24-form {
        padding: 8px !important;
    }

    .r24-search-row {
        grid-template-columns: minmax(0, 1fr) 112px !important;
        gap: 6px !important;
    }

    .r24-search-row input,
    .r24-search-row button {
        min-width: 0 !important;
        width: 100% !important;
        height: 43px !important;
        min-height: 43px !important;
    }

    .r24-search-row button {
        padding: 0 8px !important;
        font-size: 10px !important;
    }

    .r24-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 360px) {
    .r24-search-row {
        grid-template-columns: minmax(0, 1fr) 96px !important;
    }

    .r24-search-row button span {
        display: none !important;
    }
}


/* SOFAME-PWA-DASHBOARD-PRO-R33 */

/* =========================================
   CARTES STATISTIQUES CENTRÉES ET COMPACTES
   ========================================= */

.r3c-stats {
    gap: 12px !important;
}

.r3c-stats > button {
    position: relative !important;
    display: flex !important;
    min-height: 110px !important;
    padding: 16px 14px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    text-align: center !important;
    box-shadow:
        0 13px 25px rgba(32, 22, 92, .16) !important;
}

.r3c-stats > button::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -38px;
    width: 95px;
    height: 95px;
    border: 17px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    pointer-events: none;
}

.r3c-stats > button > span {
    display: flex !important;
    max-width: calc(100% - 14px) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    text-align: center !important;
}

.r3c-stats > button > span i {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 8px !important;
    height: 8px !important;
    box-shadow:
        0 0 0 5px rgba(255, 255, 255, .17) !important;
}

.r3c-stats strong {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* =========================================
   REVENUS PAR ROUTEUR : CARTES COMPACTES
   ========================================= */

.r3c-finance {
    min-width: 0 !important;
}

.r3c-panel-title {
    align-items: center !important;
}

.r3c-panel-title h2 {
    font-size: 23px !important;
    line-height: 1.1 !important;
}

.r3c-panel-title button {
    flex: 0 0 auto !important;
    padding: 9px 12px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

.r3c-router-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

.r3c-router {
    display: grid !important;
    grid-template-columns:
        minmax(150px, 1.15fr)
        minmax(125px, .75fr)
        minmax(125px, .75fr)
        minmax(155px, .9fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 82px !important;
    padding: 11px 12px !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    border-radius: 16px !important;
    box-shadow:
        0 9px 20px rgba(25, 24, 80, .15) !important;
}

.r3c-router > header {
    min-width: 0 !important;
}

.r3c-router > header > div {
    min-width: 0 !important;
}

.r3c-router > header b {
    overflow: hidden !important;
    font-size: 14px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.r3c-router header i {
    flex: 0 0 auto !important;
    width: 8px !important;
    height: 8px !important;
}

.r3c-router header em {
    padding: 5px 8px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

/* Statut en ligne vert */
.r3c-router header i.online {
    background: #34f5a5 !important;
    box-shadow:
        0 0 0 4px rgba(52, 245, 165, .17) !important;
}

.r3c-router header em.online {
    color: #046c4e !important;
    background: #d1fae5 !important;
    border: 1px solid #6ee7b7 !important;
    box-shadow:
        0 4px 10px rgba(5, 150, 105, .2) !important;
}

/* Statut hors ligne rouge */
.r3c-router header i.offline {
    background: #ff4d67 !important;
    box-shadow:
        0 0 0 4px rgba(255, 77, 103, .2) !important;
}

.r3c-router header em.offline {
    color: #b4233e !important;
    background: #ffe4e9 !important;
    border: 1px solid #fda4af !important;
    box-shadow:
        0 4px 10px rgba(225, 29, 72, .18) !important;
}

.r3c-router-money {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
}

.r3c-router-money > span {
    min-width: 0 !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
    background: rgba(10, 18, 58, .14) !important;
    text-align: center !important;
}

.r3c-router-money small {
    font-size: 8px !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
}

.r3c-router-money strong {
    margin-top: 2px !important;
    overflow: hidden !important;
    font-size: 13px !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.r3c-cpu {
    min-width: 0 !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
}

.r3c-cpu > div {
    align-items: center !important;
}

.r3c-cpu small {
    font-size: 8px !important;
}

.r3c-cpu strong {
    font-size: 13px !important;
}

.r3c-cpu > span {
    height: 4px !important;
    margin: 5px 0 !important;
}

.r3c-cpu > small:last-child {
    display: none !important;
}

.r3c-router footer {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
}

.r3c-router footer span {
    overflow: hidden !important;
    font-size: 9px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.r3c-router footer button {
    flex: 0 0 auto !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
}

/* =========================================
   CARTE ÉTAT DU SERVICE MODERNISÉE
   ========================================= */

.r3c-service {
    position: relative !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 14px !important;
    border: 1px solid #b7f2df !important;
    border-top: 4px solid #10b981 !important;
    border-radius: 20px !important;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .97),
            rgba(235, 255, 248, .94)
        ) !important;
    box-shadow:
        0 14px 32px rgba(5, 150, 105, .12) !important;
}

.r3c-service::after {
    content: "";
    position: absolute;
    top: -45px;
    right: -45px;
    width: 120px;
    height: 120px;
    border: 20px solid rgba(16, 185, 129, .06);
    border-radius: 50%;
    pointer-events: none;
}

.r3c-service > header {
    position: relative !important;
    z-index: 1 !important;
    gap: 8px !important;
}

.r3c-service > header small {
    color: #07805f !important;
    font-size: 9px !important;
    letter-spacing: .14em !important;
}

.r3c-service > header h2 {
    margin: 2px 0 0 !important;
    font-size: 20px !important;
    line-height: 1.05 !important;
}

.r3c-service > header em {
    padding: 5px 8px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
}

.r3c-service-state {
    position: relative !important;
    z-index: 1 !important;
    gap: 9px !important;
    margin: 10px 0 !important;
    padding: 10px !important;
    border: 1px solid #c7f5e7 !important;
    border-radius: 14px !important;
    background:
        linear-gradient(135deg, #e7fff6, #edf9ff) !important;
}

.r3c-service-state > span {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 19px !important;
    box-shadow:
        0 0 0 6px rgba(16, 185, 129, .1) !important;
}

.r3c-service-state small {
    font-size: 9px !important;
}

.r3c-service-state h3 {
    margin: 1px 0 !important;
    font-size: 15px !important;
    line-height: 1.1 !important;
}

.r3c-service-state p {
    margin: 3px 0 0 !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
}

.r3c-service-list {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

.r3c-service-list > span {
    display: grid !important;
    min-height: 48px !important;
    padding: 8px 9px !important;
    align-content: center !important;
    gap: 2px !important;
    border: 1px solid #e0e9f2 !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, .82) !important;
}

.r3c-service-list > span:last-child {
    grid-column: 1 / -1 !important;
}

.r3c-service-list small {
    font-size: 9px !important;
}

.r3c-service-list b {
    color: #17143b !important;
    font-size: 13px !important;
    overflow-wrap: anywhere !important;
}

/* =========================================
   CARTE VÉRIFIER UN TICKET MODERNISÉE
   ========================================= */

.r24-verifier {
    position: relative !important;
    gap: 9px !important;
    overflow: hidden !important;
    padding: 14px !important;
    border: 1px solid #d6d1ff !important;
    border-top: 4px solid #7147ee !important;
    border-radius: 20px !important;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(246, 243, 255, .96)
        ) !important;
    box-shadow:
        0 14px 32px rgba(86, 52, 190, .12) !important;
}

.r24-verifier::after {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 130px;
    height: 130px;
    border: 20px solid rgba(113, 71, 238, .06);
    border-radius: 50%;
    pointer-events: none;
}

.r24-verifier-head {
    position: relative !important;
    z-index: 1 !important;
    gap: 10px !important;
}

.r24-verifier-head small {
    color: #7147ee !important;
    font-size: 9px !important;
    letter-spacing: .14em !important;
}

.r24-verifier-head h2 {
    margin: 2px 0 !important;
    font-size: 21px !important;
    line-height: 1.05 !important;
}

.r24-verifier-head p {
    margin: 4px 0 0 !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
}

.r24-shield {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    font-size: 18px !important;
    border-radius: 13px !important;
    box-shadow:
        0 7px 16px rgba(113, 71, 238, .2) !important;
}

.r24-form {
    position: relative !important;
    z-index: 1 !important;
    padding: 9px !important;
    border: 1px solid #e4e0fb !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .88) !important;
}

.r24-form > label {
    margin-bottom: 5px !important;
    font-size: 10px !important;
}

.r24-search-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
}

.r24-search-row input {
    min-height: 43px !important;
    height: 43px !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    border-width: 1px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    letter-spacing: .05em !important;
}

.r24-search-row button {
    min-height: 43px !important;
    height: 43px !important;
    padding: 0 13px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
}

.r24-security {
    margin: 5px 0 0 !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
}

.r24-result:not(:empty) {
    position: relative !important;
    z-index: 1 !important;
    padding: 10px !important;
    border-radius: 13px !important;
}

.r24-result-grid {
    gap: 6px !important;
}

.r24-result-grid > span {
    min-height: 55px !important;
    padding: 8px !important;
    border-radius: 10px !important;
}

/* =========================================
   VERSION MOBILE PROFESSIONNELLE
   ========================================= */

@media (max-width: 680px) {
    .r3c-stats {
        gap: 8px !important;
    }

    .r3c-stats > button {
        min-height: 94px !important;
        padding: 12px 9px !important;
        border-radius: 18px !important;
    }

    .r3c-stats > button > span {
        max-width: calc(100% - 10px) !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
    }

    .r3c-stats > button > span i {
        top: 11px !important;
        right: 11px !important;
        width: 7px !important;
        height: 7px !important;
    }

    .r3c-stats strong {
        margin-top: 10px !important;
        font-size: 21px !important;
    }

    .r3c-panel-title {
        align-items: center !important;
    }

    .r3c-panel-title h2 {
        font-size: 19px !important;
    }

    .r3c-panel-title p {
        display: none !important;
    }

    .r3c-panel-title button {
        padding: 8px 9px !important;
        font-size: 10px !important;
    }

    .r3c-router {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(108px, .55fr) !important;
        gap: 7px !important;
        min-height: 0 !important;
        padding: 10px !important;
        border-radius: 14px !important;
    }

    .r3c-router > header {
        grid-column: 1 / -1 !important;
    }

    .r3c-router-money {
        grid-column: 1 !important;
    }

    .r3c-cpu {
        grid-column: 2 !important;
    }

    .r3c-router footer {
        grid-column: 1 / -1 !important;
        padding-top: 7px !important;
        border-top:
            1px solid rgba(255, 255, 255, .17) !important;
    }

    .r3c-service {
        padding: 11px !important;
        border-radius: 17px !important;
    }

    .r3c-service-state {
        margin: 8px 0 !important;
        padding: 8px !important;
    }

    .r3c-service-state p {
        display: none !important;
    }

    .r3c-service-list > span {
        min-height: 44px !important;
        padding: 7px 8px !important;
    }

    .r24-verifier {
        gap: 7px !important;
        padding: 11px !important;
        border-radius: 17px !important;
    }

    .r24-verifier-head h2 {
        font-size: 18px !important;
    }

    .r24-verifier-head p,
    .r24-security {
        display: none !important;
    }

    .r24-shield {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
    }

    .r24-form {
        padding: 7px !important;
    }

    .r24-search-row {
        grid-template-columns:
            minmax(0, 1fr)
            105px !important;
    }

    .r24-search-row input,
    .r24-search-row button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 41px !important;
        height: 41px !important;
    }

    .r24-search-row button {
        padding: 0 7px !important;
        font-size: 9px !important;
    }

    .r24-result-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 370px) {
    .r3c-stats > button > span {
        font-size: 11px !important;
    }

    .r3c-stats strong {
        font-size: 19px !important;
    }

    .r24-search-row {
        grid-template-columns:
            minmax(0, 1fr)
            92px !important;
    }

    .r24-search-row button span {
        display: none !important;
    }
}


/* SOFAME-PWA-TICKET-RESULT-MOBILE-R34 */

/* Résultat général */
.r24-result {
    min-width: 0 !important;
    max-width: 100% !important;
}

.r24-ticket-card {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border: 1px solid #ded8f5 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow:
        0 12px 28px rgba(42, 31, 100, .1) !important;
}

/* En-tête de la fenêtre de résultat */
.r24-ticket-card > header {
    display: grid !important;
    grid-template-columns:
        auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #faf8ff 58%,
            #f1edff 100%
        ) !important;
}

.r24-ticket-card > header > div {
    min-width: 0 !important;
}

.r24-ticket-card > header small {
    display: block !important;
    margin: 0 0 3px !important;
    color: #7769a8 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    line-height: 1.2 !important;
}

.r24-ticket-card > header h3 {
    margin: 0 !important;
    overflow: hidden !important;
    color: #17133d !important;
    font-size: 21px !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.r24-ticket-card > header p {
    margin: 4px 0 0 !important;
    color: #6f6a83 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
}

/* Icône du résultat */
.r24-state-icon {
    display: grid !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    place-items: center !important;
    border-radius: 14px !important;
    font-size: 21px !important;
    box-shadow:
        0 8px 18px rgba(16, 185, 129, .2) !important;
}

/* Badge Disponible, Utilisé, Supprimé */
.r24-state-badge {
    display: inline-flex !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Grille des informations */
.r24-result-grid {
    display: grid !important;
    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;
    gap: 1px !important;
    min-width: 0 !important;
    padding: 1px !important;
    background: #e9e5f5 !important;
}

.r24-result-grid > span {
    display: flex !important;
    min-width: 0 !important;
    min-height: 62px !important;
    padding: 10px 11px !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
    background:
        linear-gradient(145deg, #ffffff, #f8f7fd) !important;
}

.r24-result-grid small {
    overflow: hidden !important;
    color: #837b9c !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.r24-result-grid b {
    display: block !important;
    min-width: 0 !important;
    margin-top: 4px !important;
    overflow-wrap: anywhere !important;
    color: #211b4b !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.18 !important;
}

/* Fenêtre de chargement et d’erreur */
.r24-message {
    min-width: 0 !important;
    padding: 12px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
}

/* Version mobile */
@media (max-width: 620px) {
    .r24-result {
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 8px !important;
    }

    .r24-ticket-card {
        width: 100% !important;
        border-radius: 15px !important;
        box-shadow:
            0 9px 22px rgba(42, 31, 100, .1) !important;
    }

    .r24-ticket-card > header {
        grid-template-columns:
            38px minmax(0, 1fr) auto !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    .r24-state-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 12px !important;
        font-size: 18px !important;
    }

    .r24-ticket-card > header small {
        margin-bottom: 2px !important;
        font-size: 7px !important;
        letter-spacing: .08em !important;
        white-space: nowrap !important;
    }

    .r24-ticket-card > header h3 {
        font-size: 15px !important;
        line-height: 1.1 !important;
    }

    .r24-ticket-card > header p {
        display: -webkit-box !important;
        margin-top: 3px !important;
        overflow: hidden !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    .r24-state-badge {
        min-height: 27px !important;
        padding: 5px 7px !important;
        font-size: 8px !important;
    }

    .r24-result-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .r24-result-grid > span {
        min-height: 52px !important;
        padding: 7px 8px !important;
    }

    .r24-result-grid small {
        font-size: 7px !important;
        line-height: 1.1 !important;
    }

    .r24-result-grid b {
        margin-top: 3px !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
    }

    .r24-message {
        padding: 9px !important;
        border-radius: 11px !important;
        font-size: 10px !important;
    }
}

/* Très petits téléphones */
@media (max-width: 370px) {
    .r24-ticket-card > header {
        grid-template-columns:
            34px minmax(0, 1fr) !important;
    }

    .r24-state-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        font-size: 16px !important;
    }

    .r24-state-badge {
        grid-column: 1 / -1 !important;
        width: fit-content !important;
        margin-left: 42px !important;
    }

    .r24-result-grid > span {
        min-height: 49px !important;
        padding: 6px 7px !important;
    }

    .r24-result-grid b {
        font-size: 9px !important;
    }
}


/* SOFAME-PWA-GENERATE-FORM-PRO-R35 */

/* Panneau principal */
.r7-form-panel {
    position: relative !important;
    max-width: 1120px !important;
    margin: 14px auto !important;
    overflow: hidden !important;
    padding: 18px !important;
    border: 1px solid rgba(112, 82, 214, .18) !important;
    border-top: 4px solid #7047ed !important;
    border-radius: 22px !important;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(247,244,255,.97) 55%,
            rgba(235,252,255,.96)
        ) !important;
    box-shadow:
        0 16px 38px rgba(52, 35, 117, .13) !important;
}

.r7-form-panel::after {
    content: "";
    position: absolute;
    top: -75px;
    right: -70px;
    width: 180px;
    height: 180px;
    border: 28px solid rgba(112, 71, 237, .05);
    border-radius: 50%;
    pointer-events: none;
}

/* En-tête */
.r7-form-head {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    margin-bottom: 14px !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.r7-form-head span {
    color: #087f68 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .15em !important;
}

.r7-form-head h2 {
    margin: 3px 0 !important;
    color: #18143e !important;
    font-size: 23px !important;
    line-height: 1.08 !important;
}

.r7-form-head p {
    margin: 0 !important;
    color: #756f89 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
}

.r7-close {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 1px solid #ded6fb !important;
    border-radius: 12px !important;
    color: #6d28d9 !important;
    background: #f1ecff !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

/* Formulaire */
#r7-generate-form {
    position: relative !important;
    z-index: 1 !important;
}

.r7-form-grid {
    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0,1fr)) !important;
    gap: 11px 13px !important;
}

.r7-form-grid > label {
    display: flex !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex-direction: column !important;
    gap: 5px !important;
    color: #26204d !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}

/* Quantité et nombre de chiffres */
.r7-form-grid > label:nth-child(3),
.r7-form-grid > label:nth-child(4) {
    padding: 9px !important;
    border: 1px solid #e7e1f7 !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.62) !important;
}

/* Groupe du temps limite */
.r7-form-grid > label:nth-child(5),
.r7-form-grid > label:nth-child(6) {
    padding: 9px !important;
    border: 1px solid #bdebdc !important;
    border-radius: 14px !important;
    background:
        linear-gradient(145deg,#f0fff9,#f1faff) !important;
}

.r7-form-grid > label:nth-child(5)::before {
    content: "TEMPS CUMULATIF";
    display: block;
    margin-bottom: 1px;
    color: #078362;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .12em;
}

.r7-form-grid select,
.r7-form-grid input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid #d9d3ee !important;
    border-radius: 11px !important;
    color: #211b49 !important;
    background: #fff !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.r7-form-grid select:focus,
.r7-form-grid input:focus {
    border-color: #7147ee !important;
    box-shadow:
        0 0 0 3px rgba(113,71,238,.1) !important;
}

.r7-form-grid > label:nth-child(5) input:focus,
.r7-form-grid > label:nth-child(6) select:focus {
    border-color: #10a77a !important;
    box-shadow:
        0 0 0 3px rgba(16,167,122,.1) !important;
}

.r7-form-grid input::placeholder {
    color: #9a94aa !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
}

/* Bouton Générer */
#r7-generate-form > button[type="submit"] {
    display: flex !important;
    width: min(100%, 310px) !important;
    min-height: 46px !important;
    margin: 14px 0 0 auto !important;
    padding: 0 20px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 13px !important;
    color: #fff !important;
    background:
        linear-gradient(135deg,#6d28d9,#0ea5e9) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    box-shadow:
        0 11px 22px rgba(79,70,229,.2) !important;
}

/* Mobile */
@media (max-width: 620px) {
    .r7-form-panel {
        margin: 9px 0 !important;
        padding: 12px !important;
        border-top-width: 3px !important;
        border-radius: 17px !important;
        scroll-margin-top: 84px !important;
    }

    .r7-form-head {
        margin-bottom: 10px !important;
    }

    .r7-form-head span {
        font-size: 8px !important;
    }

    .r7-form-head h2 {
        font-size: 19px !important;
    }

    .r7-form-head p {
        display: none !important;
    }

    .r7-close {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 10px !important;
        font-size: 19px !important;
    }

    .r7-form-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
        gap: 8px !important;
    }

    /* MikroTik et profil occupent la largeur */
    .r7-form-grid > label:nth-child(1),
    .r7-form-grid > label:nth-child(2) {
        grid-column: 1 / -1 !important;
    }

    .r7-form-grid > label {
        gap: 4px !important;
        font-size: 9px !important;
    }

    .r7-form-grid > label:nth-child(3),
    .r7-form-grid > label:nth-child(4),
    .r7-form-grid > label:nth-child(5),
    .r7-form-grid > label:nth-child(6) {
        padding: 7px !important;
        border-radius: 11px !important;
    }

    .r7-form-grid select,
    .r7-form-grid input {
        min-height: 40px !important;
        height: 40px !important;
        padding: 0 8px !important;
        border-radius: 9px !important;
        font-size: 11px !important;
    }

    .r7-form-grid > label:nth-child(5)::before {
        font-size: 6px !important;
        letter-spacing: .07em !important;
    }

    #r7-generate-form > button[type="submit"] {
        width: 100% !important;
        min-height: 43px !important;
        margin-top: 10px !important;
        border-radius: 11px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 370px) {
    .r7-form-grid {
        gap: 6px !important;
    }

    .r7-form-grid > label {
        font-size: 8px !important;
    }

    .r7-form-grid select,
    .r7-form-grid input {
        padding: 0 6px !important;
        font-size: 10px !important;
    }
}


/* SOFAME-PWA-GENERATE-LOTS-R36B */

/* Formulaire Générer avec flou */
body.r36b-generate-open {
    overflow: hidden !important;
}

body.r36b-generate-open::before {
    content: "";
    position: fixed;
    z-index: 99980;
    inset: 0;
    background: rgba(13,20,47,.5);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

body.r36b-generate-open .r7-form-panel {
    position: fixed !important;
    z-index: 99990 !important;
    top: 50% !important;
    left: 50% !important;
    width: min(720px,calc(100vw - 28px)) !important;
    max-width: 720px !important;
    max-height: calc(100dvh - 28px) !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translate(-50%,-50%) !important;
    overscroll-behavior: contain !important;
    animation: r36bOpen .2s ease-out !important;
}

body.r36b-generate-open .r7-form-head {
    position: sticky !important;
    z-index: 5 !important;
    top: -1px !important;
    padding-bottom: 9px !important;
    background: rgba(250,248,255,.97) !important;
    backdrop-filter: blur(10px) !important;
}

@keyframes r36bOpen {
    from {
        opacity: 0;
        transform:
            translate(-50%,-47%)
            scale(.98);
    }

    to {
        opacity: 1;
        transform:
            translate(-50%,-50%)
            scale(1);
    }
}

/* Fenêtre Gestion des lots */
.r9-overlay {
    padding: 14px !important;
    background: rgba(13,20,47,.55) !important;
    backdrop-filter: blur(9px) !important;
    -webkit-backdrop-filter: blur(9px) !important;
}

.r9-modal {
    width: min(1050px,calc(100vw - 28px)) !important;
    max-width: 1050px !important;
    max-height: calc(100dvh - 28px) !important;
    padding: 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 22px !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
}

.r9-close {
    position: sticky !important;
    z-index: 20 !important;
    top: 0 !important;
    float: right !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 11px !important;
}

.r9-symbol {
    width: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
    font-size: 16px !important;
}

.r9-kicker {
    margin: 6px 0 8px !important;
    font-size: 9px !important;
}

.r9-stock-heading {
    display: grid !important;
    grid-template-columns:
        minmax(0,1fr) auto !important;
    gap: 10px !important;
    margin-bottom: 9px !important;
    padding: 11px !important;
    align-items: center !important;
    border-radius: 15px !important;
}

.r9-stock-heading h1 {
    margin: 3px 0 0 !important;
    font-size: 21px !important;
}

.r9-context {
    display: grid !important;
    grid-template-columns:
        repeat(2,minmax(100px,1fr)) !important;
    gap: 6px !important;
}

.r9-context > span {
    min-width: 0 !important;
    padding: 7px 9px !important;
    border-radius: 10px !important;
}

.r9-context small {
    font-size: 7px !important;
}

.r9-context b {
    display: block !important;
    margin-top: 2px !important;
    overflow: hidden !important;
    font-size: 11px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.r9-summary {
    display: grid !important;
    grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;
    gap: 7px !important;
    margin-bottom: 8px !important;
}

.r9-summary article {
    min-height: 60px !important;
    padding: 9px 10px !important;
    border-radius: 12px !important;
}

.r9-summary small {
    font-size: 8px !important;
}

.r9-summary strong {
    display: block !important;
    margin-top: 3px !important;
    font-size: 18px !important;
}

.r9-batch-selector {
    display: block !important;
    margin-bottom: 8px !important;
    padding: 9px !important;
    border-radius: 12px !important;
    font-size: 9px !important;
}

.r9-batch-selector select {
    width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
    margin-top: 4px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
}

.r9-batch-selector > small {
    display: block !important;
    margin-top: 4px !important;
    font-size: 8px !important;
}

.r9-batch-note {
    display: grid !important;
    grid-template-columns:
        minmax(140px,1fr)
        auto
        auto !important;
    gap: 7px !important;
    margin-bottom: 8px !important;
    padding: 8px 9px !important;
    align-items: center !important;
    border-radius: 11px !important;
}

.r9-batch-note b {
    font-size: 11px !important;
}

.r9-batch-note small,
.r9-batch-note > span {
    font-size: 8px !important;
}

.r9-batch-note button {
    min-height: 35px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
}

.r9-selection {
    display: grid !important;
    grid-template-columns:
        auto minmax(90px,1fr) auto !important;
    gap: 7px !important;
    min-height: 46px !important;
    margin-bottom: 8px !important;
    padding: 8px 9px !important;
    align-items: center !important;
    border-radius: 11px !important;
}

.r9-selection label,
.r9-selection b {
    font-size: 9px !important;
}

.r9-selection input {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
}

.r9-selection button {
    min-height: 33px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    font-size: 8px !important;
}

.r9-table-wrap {
    max-width: 100% !important;
    overflow: auto !important;
    border-radius: 12px !important;
}

.r9-table-wrap table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.r9-table-wrap th {
    padding: 7px !important;
    font-size: 7px !important;
    white-space: nowrap !important;
}

.r9-table-wrap td {
    padding: 7px !important;
    font-size: 8px !important;
}

.r9-code {
    font-size: 10px !important;
}

.r9-status {
    padding: 3px 5px !important;
    font-size: 7px !important;
    white-space: nowrap !important;
}

.r9-delete-one {
    min-height: 29px !important;
    padding: 0 6px !important;
    border-radius: 7px !important;
    font-size: 7px !important;
}

.r9-footer {
    margin-top: 8px !important;
}

/* Mobile */
@media (max-width:620px) {
    body.r36b-generate-open .r7-form-panel {
        top: 8px !important;
        left: 7px !important;
        width: calc(100vw - 14px) !important;
        max-width: none !important;
        max-height: calc(100dvh - 16px) !important;
        transform: none !important;
        border-radius: 17px !important;
        animation: none !important;
    }

    .r9-overlay {
        padding: 5px !important;
        align-items: flex-start !important;
    }

    .r9-modal {
        width: calc(100vw - 10px) !important;
        max-width: none !important;
        max-height: calc(100dvh - 10px) !important;
        padding: 9px !important;
        border-radius: 16px !important;
    }

    .r9-close {
        width: 32px !important;
        height: 32px !important;
    }

    .r9-symbol {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
    }

    .r9-kicker {
        margin: 4px 0 6px !important;
        font-size: 7px !important;
    }

    .r9-stock-heading {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        padding: 8px !important;
        border-radius: 11px !important;
    }

    .r9-stock-heading h1 {
        font-size: 17px !important;
    }

    .r9-context {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
        gap: 4px !important;
    }

    .r9-context > span {
        padding: 5px 6px !important;
    }

    .r9-summary {
        gap: 5px !important;
        margin-bottom: 6px !important;
    }

    .r9-summary article {
        min-height: 50px !important;
        padding: 6px 7px !important;
    }

    .r9-summary small {
        font-size: 7px !important;
    }

    .r9-summary strong {
        font-size: 15px !important;
    }

    .r9-batch-selector {
        margin-bottom: 6px !important;
        padding: 6px !important;
    }

    .r9-batch-selector select {
        min-height: 36px !important;
        height: 36px !important;
        font-size: 9px !important;
    }

    .r9-batch-selector > small {
        display: none !important;
    }

    .r9-batch-note {
        grid-template-columns:
            minmax(0,1fr) auto !important;
        gap: 5px !important;
        margin-bottom: 6px !important;
        padding: 6px 7px !important;
    }

    .r9-batch-note > span {
        text-align: right !important;
    }

    .r9-batch-note button {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 34px !important;
    }

    .r9-selection {
        grid-template-columns:
            minmax(0,1fr) auto !important;
        gap: 5px !important;
        min-height: 0 !important;
        margin-bottom: 6px !important;
        padding: 6px 7px !important;
    }

    .r9-selection button {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    /* Mobile : sélection, code, état, action */
    .r9-table-wrap th:nth-child(3),
    .r9-table-wrap td:nth-child(3),
    .r9-table-wrap th:nth-child(4),
    .r9-table-wrap td:nth-child(4),
    .r9-table-wrap th:nth-child(5),
    .r9-table-wrap td:nth-child(5) {
        display: none !important;
    }

    .r9-table-wrap table {
        table-layout: fixed !important;
    }

    .r9-table-wrap th,
    .r9-table-wrap td {
        padding: 5px 3px !important;
        font-size: 6px !important;
    }

    .r9-table-wrap th:nth-child(1),
    .r9-table-wrap td:nth-child(1) {
        width: 40px !important;
        text-align: center !important;
    }

    .r9-table-wrap th:nth-child(2),
    .r9-table-wrap td:nth-child(2) {
        width: 29% !important;
    }

    .r9-table-wrap th:nth-child(6),
    .r9-table-wrap td:nth-child(6) {
        width: 27% !important;
    }

    .r9-table-wrap th:nth-child(7),
    .r9-table-wrap td:nth-child(7) {
        width: 32% !important;
    }

    .r9-delete-one {
        width: 100% !important;
        min-height: 27px !important;
        padding: 0 2px !important;
        font-size: 6px !important;
        white-space: normal !important;
    }

    .r9-footer {
        position: sticky !important;
        z-index: 10 !important;
        bottom: -9px !important;
        margin: 6px -9px -9px !important;
        padding: 6px 9px !important;
        background: rgba(255,255,255,.96) !important;
    }

    .r9-footer button {
        width: 100% !important;
        min-height: 36px !important;
    }
}


/* SOFAME-PWA-ASSIGN-INTERFACE-R37 */

/* =========================================
   EN-TÊTE CHOISIR UN MIKROTIK
   ========================================= */

.r23-shell {
    gap: 13px !important;
}

.r23-heading {
    position: relative !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 17px 19px !important;
    align-items: center !important;
    border-radius: 21px !important;
    background:
        linear-gradient(
            120deg,
            #28156c,
            #6d28d9 50%,
            #0891b2
        ) !important;
    box-shadow:
        0 15px 34px rgba(55,34,125,.18) !important;
}

.r23-heading::after {
    content: "";
    position: absolute;
    top: -65px;
    right: 75px;
    width: 170px;
    height: 170px;
    border: 25px solid rgba(255,255,255,.05);
    border-radius: 50%;
    pointer-events: none;
}

.r23-heading > div {
    position: relative !important;
    z-index: 1 !important;
    min-width: 0 !important;
}

.r23-heading > div > span {
    color: #c9fbff !important;
    font-size: 9px !important;
    letter-spacing: .16em !important;
}

.r23-heading h1 {
    margin: 5px 0 3px !important;
    color: #fff !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
}

.r23-heading p {
    margin: 0 !important;
    color: rgba(255,255,255,.82) !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
}

.r23-heading > strong {
    position: relative !important;
    z-index: 1 !important;
    min-width: 105px !important;
    padding: 9px 12px !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: rgba(255,255,255,.15) !important;
    font-size: 12px !important;
    text-align: center !important;
    backdrop-filter: blur(8px) !important;
}

/* =========================================
   PANNEAU ET CARTES MIKROTIK
   ========================================= */

.r23-panel {
    padding: 15px !important;
    border-radius: 21px !important;
    box-shadow:
        0 14px 34px rgba(38,29,91,.1) !important;
}

.r23-panel > header {
    margin-bottom: 11px !important;
}

.r23-panel h2 {
    font-size: 20px !important;
    line-height: 1.1 !important;
}

.r23-panel p {
    margin-top: 3px !important;
    font-size: 10px !important;
}

.r23-router-list {
    gap: 8px !important;
}

.r23-router-card {
    min-height: 82px !important;
    padding: 11px 12px !important;
    gap: 10px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 16px !important;
    box-shadow:
        0 10px 22px rgba(29,25,80,.16) !important;
}

.r23-router-card:hover {
    transform: translateY(-2px) !important;
}

.r23-router-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 13px !important;
    font-size: 16px !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.13) !important;
}

.r23-router-copy {
    min-width: 0 !important;
    gap: 1px !important;
}

.r23-router-copy small {
    font-size: 7px !important;
    letter-spacing: .11em !important;
}

.r23-router-copy strong {
    overflow: hidden !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.r23-router-copy em {
    margin-top: 3px !important;
    font-size: 8px !important;
}

.r23-router-copy em.online {
    color: #80ffd0 !important;
}

.r23-router-copy em.offline {
    color: #ffe1e5 !important;
    background: rgba(190,18,60,.28) !important;
    border-radius: 999px !important;
}

.r23-router-stats {
    gap: 6px !important;
}

.r23-router-stats > span {
    min-width: 82px !important;
    min-height: 49px !important;
    padding: 6px 8px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.14) !important;
    text-align: center !important;
}

.r23-router-stats b {
    display: block !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

.r23-router-stats small {
    display: block !important;
    margin-top: 4px !important;
    font-size: 7px !important;
    letter-spacing: .04em !important;
}

.r23-router-card > i {
    display: grid !important;
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #fff !important;
    font-size: 20px !important;
    box-shadow:
        0 7px 15px rgba(19,20,55,.18) !important;
}

/* =========================================
   NOUVELLE ATTRIBUTION
   ========================================= */

.r6-layout {
    grid-template-columns:
        minmax(0,1.65fr)
        minmax(230px,.55fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.r6-form {
    padding: 16px !important;
    border-radius: 20px !important;
    box-shadow:
        0 13px 30px rgba(49,38,100,.09) !important;
}

.r6-form-title {
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.r6-form-title > span {
    width: 39px !important;
    height: 39px !important;
    min-width: 39px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
}

.r6-form-title h2 {
    font-size: 20px !important;
    line-height: 1.1 !important;
}

.r6-form-title p {
    margin-top: 2px !important;
    font-size: 10px !important;
}

.r6-form label {
    margin-top: 10px !important;
    font-size: 10px !important;
}

.r6-form select,
.r6-form input {
    min-height: 42px !important;
    height: 42px !important;
    margin-top: 5px !important;
    padding: 0 11px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
}

.r6-form small {
    margin-top: 4px !important;
    font-size: 8px !important;
}

.r6-quantity {
    grid-template-columns:
        42px minmax(0,1fr) 42px !important;
    gap: 6px !important;
}

.r6-quantity button {
    min-height: 42px !important;
    height: 42px !important;
    margin-top: 5px !important;
    border-radius: 10px !important;
    font-size: 20px !important;
}

.r6-form > button[type="submit"] {
    min-height: 43px !important;
    margin-top: 12px !important;
    border-radius: 11px !important;
    font-size: 11px !important;
}

/* =========================================
   ATTRIBUTION SÉCURISÉE
   ========================================= */

.r6-guide {
    position: relative !important;
    overflow: hidden !important;
    padding: 15px !important;
    border: 1px solid #bceedd !important;
    border-top: 4px solid #10b981 !important;
    border-radius: 20px !important;
    background:
        linear-gradient(145deg,#eafff7,#effaff) !important;
    box-shadow:
        0 13px 30px rgba(5,150,105,.1) !important;
}

.r6-guide::after {
    content: "";
    position: absolute;
    top: -48px;
    right: -45px;
    width: 120px;
    height: 120px;
    border: 18px solid rgba(16,185,129,.07);
    border-radius: 50%;
}

.r6-guide > span {
    position: relative !important;
    z-index: 1 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 13px !important;
    font-size: 20px !important;
    box-shadow:
        0 8px 18px rgba(16,185,129,.2) !important;
}

.r6-guide h3 {
    position: relative !important;
    z-index: 1 !important;
    margin: 11px 0 6px !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
}

.r6-guide p {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 0 7px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
}

.r6-guide ul {
    position: relative !important;
    z-index: 1 !important;
    margin: 7px 0 0 !important;
    padding-left: 18px !important;
}

.r6-guide li {
    margin: 5px 0 !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width:620px) {
    .r23-shell {
        gap: 9px !important;
    }

    .r23-heading {
        min-height: 0 !important;
        padding: 12px !important;
        border-radius: 17px !important;
    }

    .r23-heading h1 {
        font-size: 21px !important;
    }

    .r23-heading p {
        margin-top: 4px !important;
        font-size: 9px !important;
    }

    .r23-heading > strong {
        min-width: 82px !important;
        padding: 7px 8px !important;
        font-size: 9px !important;
    }

    .r23-panel {
        padding: 10px !important;
        border-radius: 17px !important;
    }

    .r23-panel h2 {
        font-size: 17px !important;
    }

    .r23-panel p {
        display: none !important;
    }

    .r23-router-list {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .r23-router-card {
        grid-template-columns:
            38px minmax(0,1fr) auto 31px !important;
        min-height: 68px !important;
        padding: 8px !important;
        gap: 7px !important;
        border-radius: 13px !important;
    }

    .r23-router-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 11px !important;
        font-size: 14px !important;
    }

    .r23-router-copy small {
        font-size: 6px !important;
    }

    .r23-router-copy strong {
        font-size: 12px !important;
    }

    .r23-router-copy em {
        font-size: 7px !important;
    }

    .r23-router-stats {
        display: grid !important;
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
        gap: 4px !important;
    }

    .r23-router-stats > span {
        min-width: 51px !important;
        min-height: 38px !important;
        padding: 5px 4px !important;
        border-radius: 8px !important;
    }

    .r23-router-stats b {
        font-size: 12px !important;
    }

    .r23-router-stats small {
        margin-top: 2px !important;
        font-size: 5px !important;
    }

    .r23-router-card > i {
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
        font-size: 16px !important;
    }

    .r6-layout {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .r6-form,
    .r6-guide {
        padding: 11px !important;
        border-radius: 16px !important;
    }

    .r6-form-title {
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    .r6-form-title > span {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 10px !important;
        font-size: 11px !important;
    }

    .r6-form-title h2 {
        font-size: 17px !important;
    }

    .r6-form-title p {
        font-size: 8px !important;
    }

    .r6-form label {
        margin-top: 8px !important;
        font-size: 9px !important;
    }

    .r6-form select,
    .r6-form input {
        min-height: 39px !important;
        height: 39px !important;
        margin-top: 4px !important;
        font-size: 10px !important;
    }

    .r6-quantity {
        grid-template-columns:
            38px minmax(0,1fr) 38px !important;
    }

    .r6-quantity button {
        min-height: 39px !important;
        height: 39px !important;
        margin-top: 4px !important;
    }

    .r6-guide {
        display: grid !important;
        grid-template-columns:
            36px minmax(0,1fr) !important;
        gap: 7px 9px !important;
        align-items: center !important;
    }

    .r6-guide > span {
        grid-row: 1 / 3 !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 17px !important;
    }

    .r6-guide h3 {
        margin: 0 !important;
        font-size: 16px !important;
    }

    .r6-guide p {
        margin: 0 !important;
        font-size: 8px !important;
    }

    .r6-guide ul {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;
        gap: 4px !important;
        margin: 3px 0 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .r6-guide li {
        margin: 0 !important;
        padding: 6px 4px !important;
        border-radius: 8px !important;
        background: rgba(255,255,255,.7) !important;
        font-size: 7px !important;
        text-align: center !important;
    }
}

/* SOFAME-PWA-REPORTS-MOBILE-R38 */

/*
 * En-tête de la page Rapports
 */
.r5-report-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
    padding: 4px 0;
}

.r5-report-heading > div {
    min-width: 0;
}

.r5-report-heading p {
    margin: 0 0 5px;
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .16em;
    line-height: 1.1;
}

.r5-report-heading h1 {
    margin: 0;
    font-size: clamp(30px, 4vw, 43px);
    line-height: 1.02;
    letter-spacing: -.035em;
}

.r5-report-heading > div > span {
    display: block;
    margin-top: 7px;
    font-size: 14px;
    line-height: 1.35;
}

.r5-report-heading > em {
    flex: 0 0 auto;
    margin: 0 0 3px;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

/*
 * Carte de sélection compacte
 */
.r5-report-filters {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(210px, .72fr);
    align-items: stretch;
    gap: 10px;
    margin-bottom: 14px;
    padding: 13px;
    border-radius: 20px;
}

.r5-report-filters > div:not(.r5-selection) {
    display: grid;
    align-content: center;
    min-width: 0;
    padding: 0;
}

.r5-report-filters label {
    display: block;
    margin: 0 0 5px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.15;
}

.r5-report-filters select {
    width: 100%;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 38px 0 13px;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 850;
    line-height: 44px;
}

.r5-selection {
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 66px;
    padding: 10px 14px;
    border-radius: 15px;
}

.r5-selection small {
    overflow: hidden;
    font-size: 10px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r5-selection b {
    overflow: hidden;
    font-size: 16px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r5-selection span {
    overflow: hidden;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Cartes statistiques plus courtes
 */
.r5-report-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.r5-report-cards article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 112px;
    padding: 14px 15px;
    border-radius: 19px;
}

.r5-report-cards article header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.r5-report-cards article header span {
    min-width: 0;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.15;
}

.r5-report-cards article header i {
    display: grid;
    flex: 0 0 auto;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 9px;
    font-size: 15px;
}

.r5-report-cards article strong {
    display: block;
    margin: 0;
    font-size: clamp(23px, 2.3vw, 31px);
    line-height: 1;
    letter-spacing: -.025em;
}

.r5-report-cards article > small {
    display: block;
    margin-top: 7px;
    font-size: 10px;
    line-height: 1.2;
}

/*
 * Synthèse compacte
 */
.r5-report-summary {
    overflow: hidden;
    border-radius: 20px;
}

.r5-report-summary > header {
    min-height: 76px;
    padding: 13px 17px;
}

.r5-report-summary > header small {
    font-size: 10px;
    letter-spacing: .14em;
}

.r5-report-summary > header h2 {
    margin: 4px 0 0;
    font-size: 22px;
    line-height: 1.05;
}

.r5-report-summary > header > span {
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

.r5-summary-clean {
    padding: 8px 16px;
    font-size: 12px;
    line-height: 1.25;
}

.r5-report-summary > footer {
    gap: 10px;
    min-height: 42px;
    padding: 9px 16px;
    font-size: 10px;
    line-height: 1.2;
}

/*
 * Tablettes
 */
@media (max-width: 900px) {
    .r5-report-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .r5-selection {
        grid-column: 1 / -1;
    }

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

/*
 * Mobile
 */
@media (max-width: 620px) {
    .r5-report-heading {
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 10px;
        padding: 0 2px;
    }

    .r5-report-heading p {
        margin-bottom: 4px;
        font-size: 8px;
        letter-spacing: .13em;
    }

    .r5-report-heading h1 {
        font-size: 27px;
        line-height: 1;
    }

    .r5-report-heading > div > span {
        max-width: 270px;
        margin-top: 5px;
        font-size: 10px;
        line-height: 1.25;
    }

    .r5-report-heading > em {
        margin: 0;
        padding: 6px 9px;
        font-size: 8px;
    }

    /*
     * Les deux sélecteurs restent côte à côte.
     */
    .r5-report-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-bottom: 10px;
        padding: 9px;
        border-radius: 16px;
    }

    .r5-report-filters label {
        margin-bottom: 4px;
        font-size: 8px;
    }

    .r5-report-filters select {
        height: 38px;
        min-height: 38px;
        padding: 0 25px 0 9px;
        border-radius: 10px;
        font-size: 10px;
        line-height: 38px;
    }

    /*
     * Résumé de la sélection sur une ligne compacte.
     */
    .r5-selection {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 1px 8px;
        min-height: 45px;
        padding: 7px 10px;
        border-radius: 11px;
    }

    .r5-selection small {
        grid-column: 1;
        grid-row: 1;
        font-size: 7px;
    }

    .r5-selection b {
        grid-column: 1;
        grid-row: 2;
        font-size: 11px;
    }

    .r5-selection span {
        grid-column: 2;
        grid-row: 1 / 3;
        font-size: 9px;
        text-align: right;
    }

    /*
     * Statistiques 2 par ligne.
     */
    .r5-report-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-bottom: 10px;
    }

    .r5-report-cards article {
        min-height: 84px;
        padding: 10px;
        border-radius: 15px;
        text-align: center;
    }

    .r5-report-cards article header {
        align-items: flex-start;
        margin-bottom: 7px;
        text-align: left;
    }

    .r5-report-cards article header span {
        font-size: 10px;
        line-height: 1.1;
    }

    .r5-report-cards article header i {
        width: 23px;
        height: 23px;
        border-radius: 7px;
        font-size: 11px;
    }

    .r5-report-cards article strong {
        font-size: 21px;
        text-align: center;
    }

    .r5-report-cards article > small {
        display: none;
    }

    /*
     * Synthèse sans grandes zones vides.
     */
    .r5-report-summary {
        border-radius: 15px;
    }

    .r5-report-summary > header {
        display: flex;
        min-height: 58px;
        padding: 9px 11px;
    }

    .r5-report-summary > header small {
        font-size: 7px;
    }

    .r5-report-summary > header h2 {
        margin-top: 3px;
        font-size: 16px;
    }

    .r5-report-summary > header > span {
        padding: 6px 8px;
        font-size: 8px;
    }

    .r5-summary-clean {
        padding: 7px 10px;
        font-size: 9px;
    }

    .r5-report-summary > footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3px;
        min-height: 0;
        padding: 7px 10px;
        font-size: 8px;
    }
}

/*
 * Très petits téléphones
 */
@media (max-width: 380px) {
    .r5-report-heading h1 {
        font-size: 24px;
    }

    .r5-report-heading > div > span {
        display: none;
    }

    .r5-report-filters {
        gap: 6px;
        padding: 8px;
    }

    .r5-report-filters select {
        font-size: 9px;
    }

    .r5-report-cards article {
        min-height: 78px;
        padding: 9px;
    }

    .r5-report-cards article header span {
        font-size: 9px;
    }

    .r5-report-cards article strong {
        font-size: 19px;
    }
}

/* SOFAME-PWA-SELLER-ACCESS-MODERN-R39 */

.r25-shell {
    display: grid;
    gap: 14px;
}

/*
 * Header Accès vendeurs
 */
.r25-heading {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 136px;
    padding: 24px 30px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 27px;
    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(255,255,255,.23),
            transparent 24%
        ),
        linear-gradient(
            120deg,
            #27156f 0%,
            #6d28d9 42%,
            #155fd2 72%,
            #06a9c7 100%
        );
    color: #fff;
    box-shadow: 0 18px 42px rgba(50,35,145,.22);
}

.r25-heading::before,
.r25-heading::after {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    content: "";
}

.r25-heading::before {
    top: -90px;
    right: 75px;
    width: 220px;
    height: 220px;
}

.r25-heading::after {
    right: -55px;
    bottom: -105px;
    width: 250px;
    height: 250px;
}

.r25-heading > div {
    min-width: 0;
}

.r25-heading small,
.r25-heading p:first-child {
    display: block;
    margin: 0 0 8px;
    color: #bffcf1;
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .18em;
    line-height: 1.1;
    text-transform: uppercase;
}

.r25-heading h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(30px,4vw,43px);
    font-weight: 1000;
    line-height: 1;
    letter-spacing: -.035em;
    text-shadow: 0 3px 15px rgba(20,10,80,.22);
}

.r25-heading > div > p:last-child,
.r25-heading > div > span {
    display: block;
    margin: 9px 0 0;
    color: rgba(255,255,255,.88);
    font-size: 14px;
    line-height: 1.35;
}

.r25-heading > strong,
.r25-heading > span,
.r25-heading > em {
    flex: 0 0 auto;
    padding: 10px 17px;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 999px;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 14px;
    font-style: normal;
    font-weight: 1000;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
}

/*
 * Carte principale Points de vente
 */
.r25-panel {
    padding: 17px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 23px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.97),
            rgba(245,247,255,.94)
        );
    box-shadow: 0 14px 38px rgba(46,39,104,.1);
}

.r25-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 13px;
    padding: 0 3px;
}

.r25-panel > header h2 {
    margin: 0;
    color: #17153d;
    font-size: 24px;
    font-weight: 1000;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.r25-panel > header p {
    margin: 5px 0 0;
    color: #716b88;
    font-size: 12px;
    line-height: 1.3;
}

/*
 * Liste des MikroTik
 */
.r25-router-grid,
.r25-router-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 11px;
}

.r25-router-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 45px minmax(0,1fr) auto 32px;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-width: 0;
    min-height: 88px;
    padding: 12px 13px;
    border: 0;
    border-radius: 19px;
    background:
        linear-gradient(125deg,#5122b8,#8734ed);
    color: #fff;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 12px 25px rgba(74,36,180,.22);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.r25-router-card::after {
    position: absolute;
    z-index: -1;
    top: -65px;
    right: -38px;
    width: 160px;
    height: 160px;
    border: 22px solid rgba(255,255,255,.08);
    border-radius: 50%;
    content: "";
}

.r25-router-card:hover,
.r25-router-card:focus-visible {
    transform: translateY(-2px);
    filter: saturate(1.08);
    box-shadow: 0 17px 34px rgba(42,28,117,.28);
}

/*
 * Couleurs distinctes existantes
 */
.r25-router-card.purple {
    background:
        linear-gradient(125deg,#4c1d95,#9333ea);
}

.r25-router-card.blue {
    background:
        linear-gradient(125deg,#075db2,#09ace2);
}

.r25-router-card.green {
    background:
        linear-gradient(125deg,#057351,#12be86);
}

.r25-router-card.orange {
    background:
        linear-gradient(125deg,#c54b08,#ff8a16);
}

/*
 * Couleurs automatiques si aucune classe couleur
 */
.r25-router-grid .r25-router-card:nth-child(4n+1),
.r25-router-list .r25-router-card:nth-child(4n+1) {
    background:
        linear-gradient(125deg,#4c1d95,#9333ea);
}

.r25-router-grid .r25-router-card:nth-child(4n+2),
.r25-router-list .r25-router-card:nth-child(4n+2) {
    background:
        linear-gradient(125deg,#075db2,#09ace2);
}

.r25-router-grid .r25-router-card:nth-child(4n+3),
.r25-router-list .r25-router-card:nth-child(4n+3) {
    background:
        linear-gradient(125deg,#057351,#12be86);
}

.r25-router-grid .r25-router-card:nth-child(4n),
.r25-router-list .r25-router-card:nth-child(4n) {
    background:
        linear-gradient(125deg,#c54b08,#ff8a16);
}

.r25-router-icon {
    display: grid;
    width: 45px;
    height: 45px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 14px;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: 18px;
    font-weight: 1000;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        0 6px 15px rgba(20,20,90,.14);
}

.r25-router-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.r25-router-copy small {
    overflow: hidden;
    color: rgba(255,255,255,.7);
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .13em;
    line-height: 1.1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.r25-router-copy strong {
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    font-weight: 1000;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r25-router-copy em {
    display: flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    margin-top: 2px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-style: normal;
    font-weight: 1000;
    line-height: 1.1;
    white-space: nowrap;
}

/*
 * En ligne : vert très lisible
 */
.r25-router-copy em.online {
    background: #d9ffed;
    color: #047446;
    box-shadow: 0 0 0 1px rgba(15,181,110,.12);
}

/*
 * Hors ligne : rouge
 */
.r25-router-copy em.offline {
    background: #ffe0e4;
    color: #bc1634;
    box-shadow: 0 0 0 1px rgba(215,34,65,.13);
}

.r25-router-copy em.warning {
    background: #fff1c9;
    color: #985a00;
}

/*
 * Compteurs dans chaque carte
 */
.r25-router-metrics {
    display: grid;
    grid-template-columns: repeat(3,minmax(55px,1fr));
    gap: 6px;
}

.r25-router-metrics > span {
    display: grid;
    min-width: 55px;
    min-height: 47px;
    align-content: center;
    justify-items: center;
    gap: 1px;
    padding: 5px 7px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 11px;
    background: rgba(255,255,255,.16);
    color: #fff;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(7px);
}

.r25-router-metrics b {
    color: #fff;
    font-size: 16px;
    font-weight: 1000;
    line-height: 1;
}

.r25-router-metrics small {
    color: rgba(255,255,255,.76);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .035em;
    line-height: 1.05;
    text-transform: uppercase;
}

.r25-router-card > i {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: #fff;
    color: #2e2479;
    font-size: 23px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 7px 15px rgba(23,16,77,.18);
}

/*
 * Tablette
 */
@media (max-width: 980px) {
    .r25-router-grid,
    .r25-router-list {
        grid-template-columns: 1fr;
    }
}

/*
 * Mobile professionnel et compact
 */
@media (max-width: 620px) {
    .r25-shell {
        gap: 9px;
    }

    .r25-heading {
        align-items: flex-start;
        min-height: 104px;
        padding: 15px;
        border-radius: 19px;
    }

    .r25-heading small,
    .r25-heading p:first-child {
        margin-bottom: 5px;
        font-size: 8px;
    }

    .r25-heading h1 {
        max-width: 230px;
        font-size: 25px;
        line-height: 1.02;
    }

    .r25-heading > div > p:last-child,
    .r25-heading > div > span {
        max-width: 250px;
        margin-top: 6px;
        font-size: 9px;
        line-height: 1.25;
    }

    .r25-heading > strong,
    .r25-heading > span,
    .r25-heading > em {
        padding: 6px 8px;
        font-size: 8px;
    }

    .r25-panel {
        padding: 9px;
        border-radius: 17px;
    }

    .r25-panel > header {
        margin-bottom: 8px;
        padding: 1px 2px;
    }

    .r25-panel > header h2 {
        font-size: 17px;
    }

    .r25-panel > header p {
        margin-top: 3px;
        font-size: 8px;
    }

    .r25-router-grid,
    .r25-router-list {
        gap: 7px;
    }

    .r25-router-card {
        grid-template-columns: 38px minmax(0,1fr) 28px;
        gap: 8px;
        min-height: 0;
        padding: 9px;
        border-radius: 15px;
    }

    .r25-router-icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
        font-size: 15px;
    }

    .r25-router-copy small {
        font-size: 6px;
    }

    .r25-router-copy strong {
        font-size: 13px;
    }

    .r25-router-copy em {
        padding: 2px 5px;
        font-size: 7px;
    }

    /*
     * Trois compteurs sur une seule ligne compacte.
     */
    .r25-router-metrics {
        grid-column: 1 / -1;
        grid-row: 2;
        grid-template-columns: repeat(3,1fr);
        width: 100%;
        gap: 5px;
    }

    .r25-router-metrics > span {
        min-width: 0;
        min-height: 34px;
        padding: 4px;
        border-radius: 9px;
    }

    .r25-router-metrics b {
        font-size: 13px;
    }

    .r25-router-metrics small {
        font-size: 6px;
    }

    .r25-router-card > i {
        grid-column: 3;
        grid-row: 1;
        width: 27px;
        height: 27px;
        font-size: 19px;
    }
}

@media (max-width: 380px) {
    .r25-heading h1 {
        font-size: 22px;
    }

    .r25-heading > div > p:last-child,
    .r25-heading > div > span {
        display: none;
    }

    .r25-heading {
        min-height: 83px;
    }

    .r25-panel > header p {
        display: none;
    }

    .r25-router-card {
        padding: 8px;
    }
}

/* SOFAME-PWA-LOGIN-PRO-R40B */

.r40b-page {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 22px;
    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(117, 49, 235, .24),
            transparent 32%
        ),
        radial-gradient(
            circle at 94% 88%,
            rgba(5, 178, 225, .24),
            transparent 34%
        ),
        linear-gradient(135deg, #f5efff, #e9fbff);
}

.r40b-shell {
    width: min(920px, 100%);
    min-height: 560px;
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.94);
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(39,28,88,.22);
}

.r40b-visual {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 38px;
    color: #fff;
    background:
        linear-gradient(
            145deg,
            #29146f 0%,
            #7028e9 52%,
            #08a9d5 100%
        );
}

.r40b-visual::before,
.r40b-visual::after {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    content: "";
}

.r40b-visual::before {
    width: 320px;
    height: 320px;
    right: -130px;
    top: -110px;
}

.r40b-visual::after {
    width: 210px;
    height: 210px;
    right: -45px;
    top: -50px;
}

.r40b-brand,
.r40b-mobile-brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.r40b-brand img,
.r40b-mobile-brand img {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(10,10,55,.24);
}

.r40b-brand > div,
.r40b-mobile-brand > div {
    display: grid;
    gap: 2px;
}

.r40b-brand strong {
    font-size: 20px;
}

.r40b-brand small {
    color: rgba(255,255,255,.75);
    font-weight: 700;
}

.r40b-copy > span {
    color: #91ffdc;
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: .17em;
}

.r40b-copy h1 {
    margin: 13px 0;
    color: #fff;
    font-size: clamp(36px,4vw,50px);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.r40b-copy p {
    max-width: 390px;
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 16px;
    line-height: 1.55;
}

.r40b-secure {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 16px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
}

.r40b-secure > i {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 12px;
    background: #10c896;
    color: #fff;
    font-style: normal;
    font-weight: 1000;
}

.r40b-secure > div {
    display: grid;
    gap: 2px;
}

.r40b-secure small {
    color: rgba(255,255,255,.74);
}

.r40b-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 41px;
    background: #fff;
}

.r40b-mobile-brand {
    display: none;
}

.r40b-heading > span {
    color: #7838e8;
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: .16em;
}

.r40b-heading h2 {
    margin: 7px 0 4px;
    color: #151437;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -.035em;
}

.r40b-heading p {
    margin: 0;
    color: #74768b;
    line-height: 1.45;
}

.r40b-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin: 21px 0 17px;
    padding: 6px;
    border: 1px solid #e7e4f2;
    border-radius: 15px;
    background: #f4f1fb;
}

.r40b-tabs button {
    min-height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border: 0;
    border-radius: 11px;
    color: #605f75;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.r40b-tabs button i {
    color: #8b63de;
    font-style: normal;
}

.r40b-tabs button.active {
    color: #fff;
    background: linear-gradient(110deg,#7435ed,#0fa7da);
    box-shadow: 0 9px 20px rgba(90,56,220,.23);
}

.r40b-tabs button.active i {
    color: #fff;
}

.r40b-form {
    display: grid;
    gap: 13px;
}

.r40b-form.hidden {
    display: none !important;
}

.r40b-form > label {
    display: grid;
    gap: 6px;
    color: #343451;
    font-size: 13px;
    font-weight: 900;
}

.r40b-field {
    min-height: 51px;
    display: grid;
    grid-template-columns: 33px 1fr auto;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid #dedbea;
    border-radius: 13px;
    background: #fbfbfe;
}

.r40b-field:focus-within {
    border-color: #7150e4;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(113,80,228,.11);
}

.r40b-field > i {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    color: #7040d5;
    background: #eee9ff;
    font-style: normal;
    font-weight: 1000;
}

.r40b-field input {
    width: 100%;
    min-width: 0;
    height: 47px;
    padding: 0;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #1d1d3b;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
}

.r40b-field input::placeholder {
    color: #a6a5b6;
    font-weight: 600;
}

.r40b-show {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    color: #79768b;
    background: #f0eef7;
    cursor: pointer;
}

.r40b-show.visible {
    color: #fff;
    background: #7144df;
}

.r40b-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: -1px 0 0;
    color: #687184;
    font-size: 11px;
}

.r40b-note i {
    display: grid;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    place-items: center;
    border-radius: 50%;
    color: #0a9769;
    background: #dcf8ed;
    font-style: normal;
    font-weight: 1000;
}

.r40b-submit {
    min-height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 3px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(110deg,#7435ef,#0ba8dc);
    box-shadow: 0 14px 26px rgba(67,77,213,.23);
    font: inherit;
    font-size: 15px;
    font-weight: 1000;
    cursor: pointer;
}

.r40b-submit i {
    font-size: 20px;
    font-style: normal;
}

.r40b-card .notice {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 11px;
    font-size: 12px;
}

.r40b-footer {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 16px;
    color: #898a9d;
    font-size: 10px;
    line-height: 1.35;
}

.r40b-footer i {
    font-style: normal;
}

@media (max-width:760px) {
    .r40b-page {
        padding:
            max(10px,env(safe-area-inset-top))
            10px
            max(10px,env(safe-area-inset-bottom));
    }

    .r40b-shell {
        width: min(430px,100%);
        min-height: auto;
        display: block;
        border-radius: 23px;
    }

    .r40b-visual {
        display: none;
    }

    .r40b-card {
        padding: 20px 17px 16px;
    }

    .r40b-mobile-brand {
        display: flex;
        margin-bottom: 17px;
    }

    .r40b-mobile-brand img {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .r40b-mobile-brand strong {
        color: #171633;
        font-size: 17px;
    }

    .r40b-mobile-brand small {
        color: #85869a;
        font-size: 10px;
        font-weight: 700;
    }

    .r40b-heading > span {
        font-size: 10px;
    }

    .r40b-heading h2 {
        margin-top: 4px;
        font-size: 26px;
    }

    .r40b-heading p {
        font-size: 12px;
    }

    .r40b-tabs {
        margin: 15px 0 13px;
    }

    .r40b-tabs button {
        min-height: 42px;
        padding: 0 6px;
        font-size: 11px;
    }

    .r40b-form {
        gap: 10px;
    }

    .r40b-form > label {
        gap: 4px;
        font-size: 11px;
    }

    .r40b-field {
        min-height: 45px;
        grid-template-columns: 29px 1fr auto;
        padding: 0 8px;
        border-radius: 11px;
    }

    .r40b-field > i {
        width: 27px;
        height: 27px;
        border-radius: 8px;
        font-size: 11px;
    }

    .r40b-field input {
        height: 42px;
        font-size: 14px;
    }

    .r40b-submit {
        min-height: 47px;
        margin-top: 2px;
        border-radius: 12px;
        font-size: 14px;
    }

    .r40b-footer {
        margin-top: 11px;
        font-size: 9px;
    }
}

@media (max-width:370px) {
    .r40b-page {
        padding: 6px;
    }

    .r40b-card {
        padding: 15px 13px 13px;
    }

    .r40b-mobile-brand {
        margin-bottom: 12px;
    }

    .r40b-heading h2 {
        font-size: 23px;
    }

    .r40b-tabs {
        margin: 11px 0;
    }

    .r40b-tabs button {
        min-height: 39px;
        font-size: 10px;
    }

    .r40b-field {
        min-height: 42px;
    }

    .r40b-field input {
        height: 39px;
    }

    .r40b-submit {
        min-height: 44px;
    }
}

/* SOFAME-PWA-BACKGROUND-PRO-R42 */

/*
 * Arrière-plan général légèrement plus foncé.
 * Les cartes et les formulaires conservent leur contraste.
 */
html {
    min-height: 100%;
    background: #c9d8ea;
}

body {
    min-height: 100vh;
    min-height: 100svh;
    background:
        radial-gradient(
            circle at 5% 7%,
            rgba(107, 51, 217, .18) 0,
            rgba(107, 51, 217, 0) 32%
        ),
        radial-gradient(
            circle at 94% 15%,
            rgba(17, 159, 202, .19) 0,
            rgba(17, 159, 202, 0) 34%
        ),
        radial-gradient(
            circle at 48% 102%,
            rgba(68, 91, 184, .13) 0,
            rgba(68, 91, 184, 0) 38%
        ),
        linear-gradient(
            135deg,
            #d5cfea 0%,
            #d2dceb 44%,
            #c3e1e9 100%
        ) !important;
    background-attachment: fixed !important;
}

.shell {
    min-height: 100vh;
    min-height: 100svh;
    background: transparent !important;
}

.wrap {
    background: transparent !important;
}

/*
 * Une ombre douce détache les grandes sections du nouvel
 * arrière-plan sans rendre l’interface trop sombre.
 */
.panel,
.r8-stock-panel,
.r6-section,
.r5-filter-panel,
.r24-shell,
.r25-shell,
.r39-shell,
.r7-form-panel {
    box-shadow:
        0 15px 38px rgba(42, 46, 88, .10),
        0 2px 8px rgba(42, 46, 88, .05);
}

/*
 * Navigation légèrement vitrée.
 */
.nav {
    border-color: rgba(255, 255, 255, .72) !important;
    background: rgba(246, 248, 255, .76) !important;
    box-shadow:
        0 12px 30px rgba(47, 43, 91, .10);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/*
 * Le nouvel arrière-plan reste uniforme derrière les fenêtres
 * et pendant le chargement des pages.
 */
#content,
#view {
    background: transparent !important;
}

@media (max-width: 760px) {
    body {
        background:
            radial-gradient(
                circle at 3% 5%,
                rgba(111, 46, 222, .20),
                transparent 30%
            ),
            radial-gradient(
                circle at 98% 18%,
                rgba(5, 164, 209, .20),
                transparent 33%
            ),
            linear-gradient(
                150deg,
                #d1cae8 0%,
                #ccd9e8 48%,
                #bcdde6 100%
            ) !important;
        background-attachment: scroll !important;
    }

    .nav {
        background: rgba(244, 246, 253, .88) !important;
        box-shadow:
            0 9px 25px rgba(45, 42, 86, .13);
    }

    .panel,
    .r8-stock-panel,
    .r6-section,
    .r5-filter-panel,
    .r24-shell,
    .r25-shell,
    .r39-shell,
    .r7-form-panel {
        box-shadow:
            0 10px 25px rgba(39, 44, 83, .10);
    }
}

/*
 * La page de connexion R40B garde son design particulier.
 */
.r40b-page {
    background:
        radial-gradient(
            circle at 6% 9%,
            rgba(116, 49, 233, .32),
            transparent 34%
        ),
        radial-gradient(
            circle at 94% 88%,
            rgba(4, 172, 216, .30),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #cbc3e4,
            #bedce5
        ) !important;
}

/* SOFAME-PWA-CARDS-SOFT-DARK-R43 */

:root {
    --r43-card-main: #f0f1f7;
    --r43-card-soft: #e9ebf3;
    --r43-card-field: #f7f7fb;
    --r43-card-border: #d8dae7;
    --r43-card-shadow: rgba(34, 38, 77, .13);
}

/*
 * Grandes cartes et grands conteneurs des interfaces.
 */
.panel,
.r8-stock-panel,
.r6-section,
.r6-form,
.r6-guide,
.r5-filter-panel,
.r5-summary,
.r24-shell,
.r25-shell,
.r39-shell,
.r7-form-panel,
.r7-stock-panel,
.r9-modal,
.r12-modal,
.r26-modal,
.r28-modal {
    border-color: var(--r43-card-border) !important;
    background:
        linear-gradient(
            145deg,
            #f3f3f8 0%,
            var(--r43-card-main) 52%,
            #e9edf4 100%
        ) !important;
    box-shadow:
        0 15px 36px var(--r43-card-shadow),
        inset 0 1px 0 rgba(255,255,255,.72) !important;
}

/*
 * Cartes blanches internes : filtres, résumés, formulaires,
 * états du service et résultats.
 */
.r5-filter-panel > div,
.r5-selected-scope,
.r9-stock-heading,
.r9-batch-selector,
.r9-table-wrap,
.r12-details,
.r24-form,
.r24-result,
.r25-router-panel,
.r25-point-card,
.r6-points,
.r6-point,
.r7-result,
.r7-empty,
.r8-profile-list,
.r8-profile-row,
.r8-stock-panel > header {
    border-color: var(--r43-card-border) !important;
    background: var(--r43-card-soft) !important;
}

/*
 * Champs de saisie légèrement teintés mais toujours lisibles.
 */
.panel input,
.panel select,
.r6-form input,
.r6-form select,
.r7-form-panel input,
.r7-form-panel select,
.r9-modal input,
.r9-modal select,
.r12-modal input,
.r24-form input,
.r25-shell input,
.r25-shell select,
.r39-shell input,
.r39-shell select {
    border-color: #d1d3e2 !important;
    background: var(--r43-card-field) !important;
    color: #20213f !important;
}

/*
 * Les lignes et petites cases auparavant blanches deviennent
 * gris-violet clair.
 */
.r9-table-wrap td,
.r12-details span,
.r5-selected-scope,
.r24-result-grid > div,
.r25-stat,
.r6-kpis article {
    border-color: #d9dbe7 !important;
    background: #eceef5 !important;
}

/*
 * Conservation des couleurs vives des cartes statistiques,
 * des routeurs et des boutons principaux.
 */
.r3c-kpi,
.r5-kpi,
.r6-router-card,
.r8-router-card,
.r25-router-card,
.r39-router-card,
.primary,
.r40b-submit,
.r12-confirm {
    color: inherit;
}

/*
 * Fenêtres modales : contraste avec l’arrière-plan flouté.
 */
.r9-modal,
.r12-modal,
.r26-modal,
.r28-modal {
    box-shadow:
        0 32px 85px rgba(7, 18, 44, .38),
        inset 0 1px 0 rgba(255,255,255,.72) !important;
}

/*
 * Carte de connexion : blanc moins intense.
 */
.r40b-card {
    background:
        linear-gradient(
            150deg,
            #f3f3f8,
            #e9edf4
        ) !important;
}

.r40b-field {
    border-color: #d3d4e1 !important;
    background: #f8f8fb !important;
}

.r40b-tabs {
    border-color: #d7d8e5 !important;
    background: #e7e8f1 !important;
}

@media (max-width:760px) {
    :root {
        --r43-card-main: #eeeff5;
        --r43-card-soft: #e7e9f1;
        --r43-card-field: #f5f5f9;
    }

    .panel,
    .r8-stock-panel,
    .r6-section,
    .r6-form,
    .r6-guide,
    .r5-filter-panel,
    .r5-summary,
    .r24-shell,
    .r25-shell,
    .r39-shell,
    .r7-form-panel {
        box-shadow:
            0 10px 26px rgba(35,39,75,.14),
            inset 0 1px 0 rgba(255,255,255,.68) !important;
    }
}

/* SOFAME-PWA-GENERATE-CONTRAST-R44 */

/*
 * La carte MikroTik de Générer possède un fond bleu foncé.
 * Tous ses textes principaux reçoivent donc une couleur
 * explicite afin de ne plus hériter des couleurs de R43.
 */
.r8-router-card {
    color: #ffffff !important;
}

.r8-router-card .r8-router-copy {
    color: #ffffff !important;
}

.r8-router-card .r8-router-copy strong {
    color: #ffffff !important;
    text-shadow:
        0 2px 5px rgba(0, 0, 0, .28) !important;
}

.r8-router-card .r8-router-copy small {
    color: #ffb35f !important;
}

.r8-router-card .r8-router-copy em {
    color: #ffffff !important;
}

.r8-router-card .r8-router-copy .online {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    padding: 4px 9px;
    border: 1px solid rgba(88, 246, 185, .42);
    border-radius: 999px;
    color: #71f6c2 !important;
    background: rgba(10, 115, 88, .34) !important;
    font-weight: 900;
}

.r8-router-card .r8-router-copy .offline {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    padding: 4px 9px;
    border: 1px solid rgba(255, 125, 125, .48);
    border-radius: 999px;
    color: #ffd1d1 !important;
    background: rgba(178, 28, 48, .40) !important;
    font-weight: 900;
}

.r8-router-card .r8-router-total {
    color: #ffffff !important;
}

.r8-router-card .r8-router-total strong {
    color: #ffffff !important;
    font-size: 27px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    text-shadow:
        0 2px 5px rgba(0, 0, 0, .30) !important;
}

.r8-router-card .r8-router-total small {
    margin-top: 5px;
    color: rgba(255, 255, 255, .82) !important;
    font-weight: 900 !important;
    letter-spacing: .09em !important;
}

/*
 * L’icône M et la flèche conservent un contraste élevé.
 */
.r8-router-card .r8-router-icon {
    color: #161638 !important;
}

.r8-router-card > i {
    color: #18203f !important;
    background: #ff841f !important;
}

/*
 * Mobile : meilleure organisation et texte plus compact.
 */
@media (max-width:620px) {
    .r8-router-card {
        min-height: 142px !important;
        grid-template-columns: 58px minmax(0,1fr) 44px !important;
        grid-template-rows: auto auto !important;
        gap: 10px 14px !important;
        padding: 17px !important;
    }

    .r8-router-card .r8-router-icon {
        width: 55px !important;
        height: 55px !important;
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
    }

    .r8-router-card .r8-router-copy {
        min-width: 0 !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .r8-router-card .r8-router-copy strong {
        overflow: hidden !important;
        font-size: 18px !important;
        line-height: 1.1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .r8-router-card .r8-router-total {
        display: flex !important;
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-items: baseline !important;
        justify-items: start !important;
        gap: 7px !important;
    }

    .r8-router-card .r8-router-total strong {
        font-size: 25px !important;
    }

    .r8-router-card .r8-router-total small {
        margin: 0 !important;
        font-size: 10px !important;
    }

    .r8-router-card > i {
        width: 42px !important;
        height: 42px !important;
        grid-column: 3 !important;
        grid-row: 1 / 3 !important;
        align-self: center !important;
    }
}

@media (max-width:370px) {
    .r8-router-card {
        grid-template-columns: 50px minmax(0,1fr) 39px !important;
        gap: 8px 11px !important;
        min-height: 132px !important;
        padding: 14px !important;
    }

    .r8-router-card .r8-router-icon {
        width: 48px !important;
        height: 48px !important;
    }

    .r8-router-card .r8-router-copy strong {
        font-size: 16px !important;
    }

    .r8-router-card .r8-router-total strong {
        font-size: 22px !important;
    }

    .r8-router-card > i {
        width: 38px !important;
        height: 38px !important;
    }
}

/* SOFAME-PWA-MOBILE-TYPOGRAPHY-R45 */

@media (max-width:760px) {
    /*
     * Base mobile lisible.
     */
    body {
        font-size: 15px !important;
        line-height: 1.42 !important;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }

    button,
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /*
     * En-tête général.
     */
    .top .brand > div,
    .top .brand strong {
        font-size: 17px !important;
        line-height: 1.12 !important;
    }

    .top .brand small {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .top > div:last-child > b {
        font-size: 13px !important;
    }

    .top .ghost,
    #logout {
        font-size: 13px !important;
        font-weight: 900 !important;
    }

    /*
     * Titres des différentes pages.
     */
    .r8-page-heading > div > span,
    .r6-heading > div > span,
    .r5-page-heading > div > span,
    .r24-heading > div > span,
    .r25-heading > div > span,
    .r39-heading > div > span,
    .r3c-heading > span {
        font-size: 12px !important;
        line-height: 1.25 !important;
        letter-spacing: .12em !important;
    }

    .r8-page-heading h1,
    .r6-heading h1,
    .r5-page-heading h1,
    .r24-heading h1,
    .r25-heading h1,
    .r39-heading h1 {
        font-size: clamp(32px,9vw,42px) !important;
        line-height: 1.05 !important;
    }

    .r8-page-heading p,
    .r6-heading p,
    .r5-page-heading p,
    .r24-heading p,
    .r25-heading p,
    .r39-heading p {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    /*
     * Titres des cartes et sections.
     */
    .panel h2,
    .panel h3,
    .r8-stock-panel h2,
    .r6-section h2,
    .r7-form-panel h2,
    .r5-filter-panel h2,
    .r24-shell h2,
    .r25-shell h2,
    .r39-shell h2 {
        line-height: 1.15 !important;
    }

    .panel h2,
    .r8-stock-panel h2,
    .r6-section h2,
    .r7-form-panel h2,
    .r24-shell h2,
    .r25-shell h2,
    .r39-shell h2 {
        font-size: 21px !important;
    }

    .panel p,
    .r8-stock-panel header p,
    .r6-section header p,
    .r7-form-panel p,
    .r24-shell p,
    .r25-shell p,
    .r39-shell p {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    /*
     * Cartes statistiques du tableau de bord et rapports.
     */
    .r3c-kpi span,
    .r3c-kpi small,
    .r5-kpi span,
    .r5-kpi small,
    .r6-kpis span,
    .r6-kpis small {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    .r3c-kpi strong,
    .r5-kpi strong,
    .r6-kpis strong {
        line-height: 1.05 !important;
    }

    /*
     * Cartes MikroTik de Générer.
     */
    .r8-router-copy small {
        font-size: 11px !important;
        line-height: 1.2 !important;
        letter-spacing: .10em !important;
    }

    .r8-router-copy strong {
        font-size: 18px !important;
        line-height: 1.16 !important;
    }

    .r8-router-copy em {
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    .r8-router-total strong {
        font-size: 25px !important;
    }

    .r8-router-total small {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    /*
     * Profils et stocks dans Générer.
     */
    .r8-profile-heading span,
    .r8-profile-heading small {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .r8-profile-row strong {
        font-size: 15px !important;
        line-height: 1.25 !important;
    }

    .r8-profile-row small {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .r8-profile-row > b {
        font-size: 19px !important;
    }

    .r8-profile-row > b small {
        font-size: 10px !important;
    }

    /*
     * Attribuer et Accès vendeurs.
     */
    .r6-router-card small,
    .r6-point small,
    .r25-router-card small,
    .r25-point-card small,
    .r39-router-card small {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    .r6-router-card strong,
    .r6-point strong,
    .r25-router-card strong,
    .r25-point-card strong,
    .r39-router-card strong {
        font-size: 15px !important;
        line-height: 1.2 !important;
    }

    /*
     * Formulaires.
     */
    .r6-form label,
    .r7-form-grid label,
    .r24-form label,
    .r25-shell label,
    .r39-shell label,
    .r9-modal label,
    .r12-modal label {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    .r6-form small,
    .r7-form-grid small,
    .r24-form small,
    .r25-shell small,
    .r39-shell small,
    .r9-modal small,
    .r12-modal small {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    /*
     * Vérifier un ticket.
     */
    .r24-result small,
    .r24-result-grid small {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    .r24-result strong,
    .r24-result-grid strong,
    .r24-result-grid b {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    /*
     * Fenêtres modales.
     */
    .r9-modal h1,
    .r12-modal h2,
    .r26-modal h2,
    .r28-modal h2 {
        font-size: 25px !important;
        line-height: 1.12 !important;
    }

    .r9-modal p,
    .r12-message,
    .r26-modal p,
    .r28-modal p {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    .r12-kicker,
    .r9-kicker {
        font-size: 11px !important;
        line-height: 1.2 !important;
        letter-spacing: .11em !important;
    }

    /*
     * Tableaux et historiques.
     */
    table th {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    table td {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    /*
     * Messages vides, erreurs et informations.
     */
    .notice,
    .r7-empty,
    .r6-empty,
    .r8-empty {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .r7-empty strong,
    .r6-empty strong,
    .r8-empty strong {
        font-size: 17px !important;
        line-height: 1.2 !important;
    }

    /*
     * Statuts.
     */
    .online,
    .offline,
    .r9-status,
    [class*="status"],
    [class*="badge"] {
        font-size: 11px !important;
        line-height: 1.2 !important;
        font-weight: 900 !important;
    }

    /*
     * Navigation mobile inférieure.
     */
    .nav button {
        font-size: 11px !important;
        line-height: 1.15 !important;
        font-weight: 900 !important;
    }

    .nav button::before {
        font-size: 20px !important;
        line-height: 1 !important;
    }

    /*
     * Page de connexion.
     */
    .r40b-mobile-brand strong {
        font-size: 18px !important;
    }

    .r40b-mobile-brand small {
        font-size: 12px !important;
    }

    .r40b-heading > span {
        font-size: 11px !important;
    }

    .r40b-heading h2 {
        font-size: 27px !important;
    }

    .r40b-heading p {
        font-size: 13px !important;
    }

    .r40b-tabs button {
        font-size: 12px !important;
    }

    .r40b-form > label {
        font-size: 13px !important;
    }

    .r40b-note,
    .r40b-footer {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }
}

@media (max-width:370px) {
    body {
        font-size: 14px !important;
    }

    button,
    input,
    select,
    textarea {
        font-size: 15px !important;
    }

    .nav button {
        font-size: 10px !important;
    }

    .r8-page-heading p,
    .r6-heading p,
    .r5-page-heading p,
    .r24-heading p,
    .r25-heading p,
    .r39-heading p {
        font-size: 13px !important;
    }

    .r8-router-copy strong {
        font-size: 16px !important;
    }

    .r8-router-total strong {
        font-size: 22px !important;
    }
}

/* SOFAME-PWA-STAT-CARDS-DARK-R46
 *
 * Assombrissement léger des cartes statistiques.
 * Le voile est peint sous le contenu : les textes et chiffres
 * conservent leur luminosité et leur contraste.
 */

:is(
    .stat-card,
    .stats-card,
    .metric-card,
    .metrics-card,
    .kpi-card,
    .dashboard-stat,
    .dashboard-stat-card,
    .report-stat,
    .report-stat-card,
    .seller-stat,
    .seller-stat-card,
    [class*="stat-card"],
    [class*="metric-card"],
    [class*="kpi-card"]
) {
    box-shadow:
        inset 0 0 0 100vmax rgba(15, 23, 42, 0.09),
        0 12px 28px rgba(30, 41, 59, 0.12) !important;
}

/*
 * Compatibilité avec les cartes statistiques déjà présentes
 * dans les différentes versions de l’interface SOFAME.
 */
:is(
    .r8-stat-card,
    .r10-stat-card,
    .r12-stat-card,
    .r20-stat-card,
    .r22-stat-card,
    .r23-stat-card,
    .r24-stat-card,
    .r31-stat-card,
    .r42-stat-card,
    .r43-stat-card,
    .r45-stat-card
) {
    box-shadow:
        inset 0 0 0 100vmax rgba(15, 23, 42, 0.09),
        0 12px 28px rgba(30, 41, 59, 0.12) !important;
}

/* Contraste préservé pour les titres et les valeurs. */
:is(
    .stat-card,
    .stats-card,
    .metric-card,
    .kpi-card,
    [class*="stat-card"],
    [class*="metric-card"],
    [class*="kpi-card"]
) :is(
    strong,
    b,
    h2,
    h3,
    h4,
    .value,
    .amount,
    .number
) {
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}

/* Mobile : ombre plus légère et cartes toujours nettes. */
@media (max-width: 760px) {
    :is(
        .stat-card,
        .stats-card,
        .metric-card,
        .metrics-card,
        .kpi-card,
        .dashboard-stat,
        .dashboard-stat-card,
        .report-stat,
        .report-stat-card,
        .seller-stat,
        .seller-stat-card,
        [class*="stat-card"],
        [class*="metric-card"],
        [class*="kpi-card"]
    ) {
        box-shadow:
            inset 0 0 0 100vmax rgba(15, 23, 42, 0.10),
            0 8px 20px rgba(30, 41, 59, 0.13) !important;
    }
}

/* SOFAME-PWA-LOGIN-COLOR-R47
 *
 * Fond légèrement foncé et lisible pour les connexions :
 * - compte tenant ;
 * - compte vendeur ;
 * - première activation.
 */

:is(
    .login-card,
    .login-panel,
    .login-box,
    .auth-card,
    .auth-panel,
    .r40b-login-card,
    .r40b-auth-card,
    [class*="login"][class*="card"],
    [class*="login"][class*="panel"],
    [class*="auth"][class*="card"],
    [class*="auth"][class*="panel"]
) {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(14, 165, 233, 0.16),
            transparent 38%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(124, 58, 237, 0.14),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #d7deec 0%,
            #cbd5e6 52%,
            #becce0 100%
        ) !important;

    border: 1px solid rgba(100, 116, 139, 0.35) !important;

    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;

    color: #101936 !important;
}

/* Titres et textes du formulaire. */
:is(
    .login-card,
    .login-panel,
    .login-box,
    .auth-card,
    .auth-panel,
    .r40b-login-card,
    .r40b-auth-card,
    [class*="login"][class*="card"],
    [class*="auth"][class*="card"]
) :is(
    h1,
    h2,
    h3,
    h4,
    strong,
    label
) {
    color: #101936 !important;
}

:is(
    .login-card,
    .login-panel,
    .login-box,
    .auth-card,
    .auth-panel,
    .r40b-login-card,
    .r40b-auth-card,
    [class*="login"][class*="card"],
    [class*="auth"][class*="card"]
) :is(
    p,
    small,
    .hint,
    .subtitle,
    .description
) {
    color: #52617a !important;
}

/* Champs clairs pour conserver une excellente lisibilité. */
:is(
    .login-card,
    .login-panel,
    .login-box,
    .auth-card,
    .auth-panel,
    .r40b-login-card,
    .r40b-auth-card,
    [class*="login"][class*="card"],
    [class*="auth"][class*="card"]
) :is(
    input,
    select
) {
    background: rgba(248, 250, 252, 0.94) !important;
    color: #101936 !important;

    border:
        1px solid rgba(100, 116, 139, 0.42) !important;

    box-shadow:
        inset 0 1px 2px rgba(15, 23, 42, 0.05),
        0 5px 14px rgba(15, 23, 42, 0.07) !important;
}

:is(
    .login-card,
    .login-panel,
    .login-box,
    .auth-card,
    .auth-panel,
    .r40b-login-card,
    .r40b-auth-card,
    [class*="login"][class*="card"],
    [class*="auth"][class*="card"]
) :is(
    input,
    select
):focus {
    background: #ffffff !important;
    border-color: #2563eb !important;

    box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.16),
        0 8px 20px rgba(37, 99, 235, 0.12) !important;

    outline: none !important;
}

:is(
    .login-card,
    .login-panel,
    .login-box,
    .auth-card,
    .auth-panel,
    .r40b-login-card,
    .r40b-auth-card,
    [class*="login"][class*="card"],
    [class*="auth"][class*="card"]
) input::placeholder {
    color: #78869c !important;
    opacity: 1 !important;
}

/* Mobile compact et confortable à lire. */
@media (max-width: 760px) {
    :is(
        .login-card,
        .login-panel,
        .login-box,
        .auth-card,
        .auth-panel,
        .r40b-login-card,
        .r40b-auth-card,
        [class*="login"][class*="card"],
        [class*="login"][class*="panel"],
        [class*="auth"][class*="card"],
        [class*="auth"][class*="panel"]
    ) {
        width: calc(100% - 24px) !important;
        max-width: 430px !important;
        margin-inline: auto !important;
        padding: 20px 17px !important;
        border-radius: 24px !important;

        box-shadow:
            0 18px 42px rgba(15, 23, 42, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
    }

    :is(
        .login-card,
        .login-panel,
        .login-box,
        .auth-card,
        .auth-panel,
        .r40b-login-card,
        .r40b-auth-card,
        [class*="login"][class*="card"],
        [class*="auth"][class*="card"]
    ) :is(
        input,
        select,
        button
    ) {
        min-height: 50px !important;
        font-size: 16px !important;
        border-radius: 14px !important;
    }
}

/* SOFAME-PWA-ATTRIBUTION-VISUAL-R7 */

.r6-shell .r6-kpis {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 12px !important;
    margin: 16px 0 !important;
}

.r6-shell .r6-kpis article {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    min-width: 0 !important;
    min-height: 106px !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 18px !important;
    color: #fff !important;
    filter: none !important;
    backdrop-filter: none !important;
    box-shadow:
        0 12px 25px rgba(15,23,42,.18),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.r6-shell .r6-kpis article:nth-child(1) {
    background: linear-gradient(
        135deg,#3b0764,#6d28d9,#8b5cf6
    ) !important;
}

.r6-shell .r6-kpis article:nth-child(2) {
    background: linear-gradient(
        135deg,#0c4a6e,#0369a1,#06b6d4
    ) !important;
}

.r6-shell .r6-kpis article:nth-child(3) {
    background: linear-gradient(
        135deg,#064e3b,#047857,#10b981
    ) !important;
}

.r6-shell .r6-kpis article:nth-child(4) {
    background: linear-gradient(
        135deg,#7c2d12,#c2410c,#f97316
    ) !important;
}

.r6-shell .r6-kpis article::after {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    right: -35px !important;
    bottom: -42px !important;
    width: 112px !important;
    height: 112px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.14) !important;
}

.r6-shell .r6-kpis span,
.r6-shell .r6-kpis small {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    margin: 0 0 8px !important;
    color: rgba(255,255,255,.9) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .025em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
}

.r6-shell .r6-kpis strong {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    color: #fff !important;
    font-size: clamp(28px,2.5vw,38px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -.03em !important;
    text-shadow: none !important;
}

/* Cartes des points de vente */

.r6-shell .r6-section {
    border: 1px solid rgba(79,70,229,.13) !important;
    border-radius: 20px !important;
    background: linear-gradient(
        145deg,rgba(255,255,255,.98),rgba(241,245,249,.96)
    ) !important;
    box-shadow: 0 13px 30px rgba(30,41,59,.09) !important;
}

.r6-shell .r6-section > header {
    margin-bottom: 10px !important;
}

.r6-shell .r6-section > header h2 {
    margin: 0 !important;
    color: #172554 !important;
    font-weight: 900 !important;
}

.r6-shell .r6-points {
    display: grid !important;
    grid-template-columns:
        repeat(auto-fit,minmax(245px,1fr)) !important;
    gap: 9px !important;
}

.r6-shell .r6-points > * {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(79,70,229,.14) !important;
    border-radius: 15px !important;
    background: linear-gradient(145deg,#fff,#f2f0ff) !important;
    box-shadow:
        0 7px 17px rgba(49,46,129,.08),
        inset 4px 0 0 #7c3aed !important;
}

.r6-shell .r6-points > *:nth-child(3n + 2) {
    box-shadow:
        0 7px 17px rgba(3,105,161,.08),
        inset 4px 0 0 #0284c7 !important;
}

.r6-shell .r6-points > *:nth-child(3n + 3) {
    box-shadow:
        0 7px 17px rgba(4,120,87,.08),
        inset 4px 0 0 #10b981 !important;
}

.r6-shell .r6-points h3,
.r6-shell .r6-points h4,
.r6-shell .r6-points strong,
.r6-shell .r6-points b {
    color: #172554 !important;
    line-height: 1.18 !important;
}

.r6-shell .r6-points p {
    margin: 3px 0 !important;
    color: #475569 !important;
    line-height: 1.25 !important;
}

.r6-shell .r6-points button,
.r6-shell .r6-points a[role="button"] {
    min-height: 34px !important;
    padding: 7px 11px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
}

@media (max-width: 980px) {
    .r6-shell .r6-kpis {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
        gap: 9px !important;
    }

    .r6-shell .r6-kpis article {
        min-height: 90px !important;
        padding: 13px 14px !important;
        border-radius: 16px !important;
    }
}

/* Affichage mobile compact */

@media (max-width: 700px) {
    .r6-shell .r6-kpis {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
        gap: 7px !important;
        margin: 9px 0 !important;
    }

    .r6-shell .r6-kpis article {
        min-height: 74px !important;
        padding: 9px 10px !important;
        border-radius: 13px !important;
        box-shadow:
            0 6px 14px rgba(15,23,42,.15),
            inset 0 1px 0 rgba(255,255,255,.2) !important;
    }

    .r6-shell .r6-kpis article::after {
        right: -24px !important;
        bottom: -29px !important;
        width: 70px !important;
        height: 70px !important;
    }

    .r6-shell .r6-kpis span,
    .r6-shell .r6-kpis small {
        margin-bottom: 5px !important;
        font-size: 8.5px !important;
        line-height: 1.12 !important;
    }

    .r6-shell .r6-kpis strong {
        font-size: 21px !important;
    }

    .r6-shell .r6-section {
        padding: 9px !important;
        border-radius: 15px !important;
    }

    .r6-shell .r6-section > header {
        margin-bottom: 7px !important;
    }

    .r6-shell .r6-section > header h2 {
        font-size: 16px !important;
    }

    .r6-shell .r6-points {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .r6-shell .r6-points > * {
        min-height: 0 !important;
        padding: 8px 9px 8px 11px !important;
        border-radius: 12px !important;
        box-shadow:
            0 4px 11px rgba(49,46,129,.08),
            inset 3px 0 0 #7c3aed !important;
    }

    .r6-shell .r6-points h3,
    .r6-shell .r6-points h4 {
        margin: 0 0 2px !important;
        font-size: 13px !important;
    }

    .r6-shell .r6-points p,
    .r6-shell .r6-points span,
    .r6-shell .r6-points small {
        margin: 2px 0 !important;
        font-size: 10px !important;
        line-height: 1.18 !important;
    }

    .r6-shell .r6-points button,
    .r6-shell .r6-points a[role="button"] {
        min-height: 29px !important;
        padding: 5px 8px !important;
        font-size: 10px !important;
    }
}

/* SOFAME-PWA-POINTS-LAYOUT-R8 */

/*
 * PC : une carte complète par ligne.
 * Les cinq indicateurs restent dans leur carte.
 */

.r6-shell .r6-points {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.r6-shell .r6-points > .r20b-point {
    display: grid !important;
    grid-template-columns:
        46px minmax(150px,.65fr) minmax(0,2.35fr) !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 78px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(99,102,241,.16) !important;
    border-radius: 16px !important;
    background: linear-gradient(
        135deg,#ffffff 0%,#f6f4ff 100%
    ) !important;
}

.r6-shell .r20b-point .r6-avatar {
    grid-column: 1 !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 14px !important;
}

.r6-shell .r20b-point .r20b-identity {
    grid-column: 2 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.r6-shell .r20b-point .r20b-identity strong,
.r6-shell .r20b-point .r20b-identity span {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.r6-shell .r20b-point .r20b-identity strong {
    color: #172554 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

.r6-shell .r20b-point .r20b-identity span {
    margin-top: 3px !important;
    color: #64748b !important;
    font-size: 11px !important;
}

.r6-shell .r20b-point .r20b-metrics {
    grid-column: 3 !important;
    display: grid !important;
    grid-template-columns:
        repeat(5,minmax(0,1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.r6-shell .r20b-metrics > span {
    display: grid !important;
    min-width: 0 !important;
    min-height: 54px !important;
    align-content: center !important;
    gap: 4px !important;
    padding: 7px 8px !important;
    overflow: hidden !important;
    border-radius: 11px !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.r6-shell .r20b-metrics > span small,
.r6-shell .r20b-metrics > span b {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.r6-shell .r20b-metrics > span small {
    margin: 0 !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
}

.r6-shell .r20b-metrics > span b {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
}

/* Écrans PC moins larges */

@media (max-width: 1100px) and (min-width: 701px) {
    .r6-shell .r6-points > .r20b-point {
        grid-template-columns:
            42px minmax(125px,.55fr) minmax(0,2.45fr)
            !important;
        gap: 9px !important;
        padding: 10px 11px !important;
    }

    .r6-shell .r20b-point .r6-avatar {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }

    .r6-shell .r20b-point .r20b-metrics {
        gap: 5px !important;
    }

    .r6-shell .r20b-metrics > span {
        min-height: 50px !important;
        padding: 6px !important;
    }

    .r6-shell .r20b-metrics > span small {
        font-size: 7px !important;
    }

    .r6-shell .r20b-metrics > span b {
        font-size: 11px !important;
    }
}

/*
 * Mobile :
 * identité en haut ;
 * trois indicateurs sur la première ligne ;
 * deux indicateurs centrés sur la seconde ligne.
 */

@media (max-width: 700px) {
    .r6-shell .r6-points {
        grid-template-columns: minmax(0,1fr) !important;
        gap: 7px !important;
    }

    .r6-shell .r6-points > .r20b-point {
        grid-template-columns: 38px minmax(0,1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        gap: 7px 9px !important;
        min-height: 0 !important;
        padding: 9px !important;
        overflow: hidden !important;
        border-radius: 14px !important;
    }

    .r6-shell .r20b-point .r6-avatar {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 11px !important;
        font-size: 15px !important;
    }

    .r6-shell .r20b-point .r20b-identity {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .r6-shell .r20b-point .r20b-identity strong {
        font-size: 13px !important;
    }

    .r6-shell .r20b-point .r20b-identity span {
        margin-top: 1px !important;
        font-size: 9px !important;
    }

    .r6-shell .r20b-point .r20b-metrics {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: grid !important;
        grid-template-columns: repeat(6,minmax(0,1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Trois cartes en haut */

    .r6-shell .r20b-metrics > span {
        grid-column: span 2 !important;
        min-width: 0 !important;
        min-height: 46px !important;
        padding: 5px 3px !important;
        border-radius: 9px !important;
        text-align: center !important;
    }

    /* Deux cartes centrées en bas */

    .r6-shell .r20b-metrics > span:nth-child(4) {
        grid-column: 2 / span 2 !important;
    }

    .r6-shell .r20b-metrics > span:nth-child(5) {
        grid-column: 4 / span 2 !important;
    }

    .r6-shell .r20b-metrics > span small {
        margin: 0 !important;
        font-size: 7px !important;
        line-height: 1.05 !important;
        text-align: center !important;
    }

    .r6-shell .r20b-metrics > span b {
        margin: 0 !important;
        font-size: 10px !important;
        line-height: 1.08 !important;
        text-align: center !important;
    }
}

/* Très petits téléphones */

@media (max-width: 370px) {
    .r6-shell .r6-points > .r20b-point {
        padding: 7px !important;
    }

    .r6-shell .r20b-point .r20b-metrics {
        gap: 4px !important;
    }

    .r6-shell .r20b-metrics > span {
        min-height: 43px !important;
        padding: 4px 2px !important;
    }

    .r6-shell .r20b-metrics > span small {
        font-size: 6.5px !important;
    }

    .r6-shell .r20b-metrics > span b {
        font-size: 9px !important;
    }
}

/* SOFAME-PWA-POINTS-COLORS-R9 */

/* Fond général de la zone légèrement plus foncé */

.r6-shell .r6-section:has(.r6-points) {
    background: linear-gradient(
        145deg,#e6e8f3 0%,#dce5f0 100%
    ) !important;
    border-color: rgba(71,85,105,.18) !important;
}

/* Fond professionnel des cartes */

.r6-shell .r6-points > .r20b-point {
    border: 1px solid rgba(91,33,182,.20) !important;
    background: linear-gradient(
        135deg,#e8e5f5 0%,#dddaf0 100%
    ) !important;
    box-shadow:
        0 9px 22px rgba(30,41,59,.14),
        inset 5px 0 0 #7c3aed,
        inset 0 1px 0 rgba(255,255,255,.65)
        !important;
}

/* Variation bleue */

.r6-shell .r6-points > .r20b-point:nth-child(3n + 2) {
    border-color: rgba(2,132,199,.22) !important;
    background: linear-gradient(
        135deg,#dceaf3 0%,#d1e2ee 100%
    ) !important;
    box-shadow:
        0 9px 22px rgba(30,41,59,.14),
        inset 5px 0 0 #0284c7,
        inset 0 1px 0 rgba(255,255,255,.65)
        !important;
}

/* Variation verte */

.r6-shell .r6-points > .r20b-point:nth-child(3n + 3) {
    border-color: rgba(5,150,105,.22) !important;
    background: linear-gradient(
        135deg,#dcece8 0%,#cee2dc 100%
    ) !important;
    box-shadow:
        0 9px 22px rgba(30,41,59,.14),
        inset 5px 0 0 #10b981,
        inset 0 1px 0 rgba(255,255,255,.65)
        !important;
}

/* Nom et emplacement du point de vente */

.r6-shell .r20b-point .r20b-identity strong {
    color: #111c44 !important;
    font-weight: 950 !important;
    text-shadow: none !important;
}

.r6-shell .r20b-point .r20b-identity span {
    color: #475569 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

/* Toutes les petites cartes de données */

.r6-shell .r20b-metrics > span {
    border-width: 1.5px !important;
    box-shadow:
        0 4px 10px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.55)
        !important;
}

/* Disponibles */

.r6-shell .r20b-metrics > .available {
    border-color: #9b87df !important;
    background: #dcd5f4 !important;
    color: #3b176f !important;
}

/* Vendus */

.r6-shell .r20b-metrics > .sold {
    border-color: #55b7d2 !important;
    background: #cde6f0 !important;
    color: #07536c !important;
}

/* Revenu net */

.r6-shell .r20b-metrics > .net {
    border-color: #4fc89c !important;
    background: #c9eadc !important;
    color: #075c42 !important;
}

/* Commission */

.r6-shell .r20b-metrics > .commission {
    border-color: #e3b936 !important;
    background: #f3e4aa !important;
    color: #71430a !important;
}

/* Revenu brut */

.r6-shell .r20b-metrics > .gross {
    border-color: #df9451 !important;
    background: #efd4b8 !important;
    color: #78350f !important;
}

/* Titres et valeurs en gras */

.r6-shell .r20b-metrics > span small {
    color: inherit !important;
    font-weight: 950 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.r6-shell .r20b-metrics > span b {
    color: #101a3b !important;
    font-weight: 1000 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Mobile : préserver les trois cartes puis les deux cartes */

@media (max-width: 700px) {
    .r6-shell .r6-points > .r20b-point {
        box-shadow:
            0 7px 17px rgba(30,41,59,.16),
            inset 4px 0 0 #7c3aed,
            inset 0 1px 0 rgba(255,255,255,.6)
            !important;
    }

    .r6-shell .r6-points > .r20b-point:nth-child(3n + 2) {
        box-shadow:
            0 7px 17px rgba(30,41,59,.16),
            inset 4px 0 0 #0284c7,
            inset 0 1px 0 rgba(255,255,255,.6)
            !important;
    }

    .r6-shell .r6-points > .r20b-point:nth-child(3n + 3) {
        box-shadow:
            0 7px 17px rgba(30,41,59,.16),
            inset 4px 0 0 #10b981,
            inset 0 1px 0 rgba(255,255,255,.6)
            !important;
    }

    .r6-shell .r20b-metrics > span small {
        font-size: 7.5px !important;
        font-weight: 950 !important;
    }

    .r6-shell .r20b-metrics > span b {
        font-size: 10.5px !important;
        font-weight: 1000 !important;
    }
}

/* SOFAME-PWA-CODES-GRID-R10 */

/*
 * Routeur ouvert :
 * les autres MikroTik sont retirés de la liste.
 */

.r8-router-list.r10-focused {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    overflow: hidden !important;
    border-radius: 22px !important;
}

.r8-router-row.r10-router-muted {
    display: none !important;
}

.r8-router-list.r10-focused > .r8-router-row:not(
    .r10-router-muted
) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.r8-router-list.r10-focused .r8-router-card.active {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    box-shadow:
        0 15px 32px rgba(15,23,42,.22),
        0 0 0 3px rgba(124,58,237,.18)
        !important;
}

.r8-router-list.r10-focused .r8-router-card.active::after {
    content: "Cliquer pour afficher les autres MikroTik";
    position: absolute;
    right: 76px;
    bottom: 12px;
    color: rgba(255,255,255,.72);
    font-size: 9px;
    font-weight: 800;
}

/* Profils du MikroTik ouvert */

.r8-router-list.r10-focused .r8-router-details {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.r8-router-list.r10-focused .r8-profile-list {
    display: grid !important;
    grid-template-columns:
        repeat(auto-fit,minmax(230px,1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.r8-router-list.r10-focused .r8-profile-heading {
    grid-column: 1 / -1 !important;
}

/*
 * Modal des codes :
 * remplacement visuel du tableau par une grille.
 */

.r9-modal .r9-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.r9-modal .r9-table-wrap table,
.r9-modal .r9-table-wrap tbody {
    display: block !important;
    width: 100% !important;
}

.r9-modal .r9-table-wrap thead {
    display: none !important;
}

.r9-modal .r9-table-wrap tbody {
    display: grid !important;
    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;
    gap: 9px !important;
}

.r9-modal .r9-table-wrap tr {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0,1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    min-height: 126px !important;
    padding: 10px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(99,102,241,.20) !important;
    border-radius: 15px !important;
    background: linear-gradient(
        145deg,#ebe9f8 0%,#dde5f1 100%
    ) !important;
    box-shadow:
        0 7px 17px rgba(30,41,59,.11),
        inset 0 1px 0 rgba(255,255,255,.7)
        !important;
}

.r9-modal .r9-table-wrap td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
}

/* Case de sélection */

.r9-modal .r9-table-wrap td:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    place-items: center !important;
}

.r9-modal .r9-ticket-check {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    accent-color: #6d28d9 !important;
}

/* Code */

.r9-modal .r9-table-wrap td:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.r9-modal .r9-code {
    display: block !important;
    overflow: hidden !important;
    color: #172554 !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    letter-spacing: .09em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/*
 * La date, le lot et le routeur sont déjà indiqués
 * dans l’en-tête du modal.
 */

.r9-modal .r9-table-wrap td:nth-child(3),
.r9-modal .r9-table-wrap td:nth-child(4),
.r9-modal .r9-table-wrap td:nth-child(5) {
    display: none !important;
}

/* État */

.r9-modal .r9-table-wrap td:nth-child(6) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
}

.r9-modal .r9-status {
    display: block !important;
    width: 100% !important;
    padding: 6px 7px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Action de suppression */

.r9-modal .r9-table-wrap td:nth-child(7) {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
}

.r9-modal .r9-delete-one {
    display: block !important;
    width: 100% !important;
    min-height: 30px !important;
    padding: 5px 7px !important;
    border-radius: 8px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    white-space: normal !important;
}

/* Tablettes : trois codes par ligne */

@media (max-width: 1100px) {
    .r9-modal .r9-table-wrap tbody {
        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;
        gap: 8px !important;
    }
}

/* Mobile : deux codes par ligne */

@media (max-width: 700px) {
    .r8-router-list.r10-focused .r8-router-card.active::after {
        content: "Touchez pour afficher les autres";
        right: 55px;
        bottom: 7px;
        max-width: 135px;
        font-size: 7px;
        text-align: right;
    }

    .r8-router-list.r10-focused .r8-profile-list {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
        gap: 7px !important;
    }

    .r8-router-list.r10-focused .r8-profile-row {
        min-width: 0 !important;
        padding: 9px 7px !important;
    }

    .r8-router-list.r10-focused .r8-profile-row > span:nth-child(2) {
        min-width: 0 !important;
    }

    .r8-router-list.r10-focused .r8-profile-row strong,
    .r8-router-list.r10-focused .r8-profile-row small {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .r9-modal .r9-table-wrap tbody {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
        gap: 7px !important;
    }

    .r9-modal .r9-table-wrap tr {
        grid-template-columns: 25px minmax(0,1fr) !important;
        min-height: 111px !important;
        gap: 5px !important;
        padding: 8px !important;
        border-radius: 12px !important;
    }

    .r9-modal .r9-ticket-check {
        width: 19px !important;
        height: 19px !important;
    }

    .r9-modal .r9-code {
        font-size: 13px !important;
        letter-spacing: .055em !important;
    }

    .r9-modal .r9-status {
        padding: 5px 3px !important;
        font-size: 7.5px !important;
    }

    .r9-modal .r9-delete-one {
        min-height: 27px !important;
        padding: 4px 3px !important;
        font-size: 7.5px !important;
    }
}

/* Très petits téléphones */

@media (max-width: 370px) {
    .r9-modal .r9-table-wrap tbody {
        gap: 5px !important;
    }

    .r9-modal .r9-table-wrap tr {
        min-height: 104px !important;
        padding: 6px !important;
    }

    .r9-modal .r9-code {
        font-size: 11px !important;
        letter-spacing: .03em !important;
    }
}

/* SOFAME-PWA-GENERATE-MOBILE-R11 */

/* Profils : affichage horizontal propre */

@media (max-width: 700px) {
    .r8-router-list.r10-focused .r8-router-details {
        padding: 9px !important;
        overflow: hidden !important;
    }

    .r8-router-list.r10-focused .r8-profile-list {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .r8-router-list.r10-focused .r8-profile-heading {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) auto !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 7px 8px !important;
    }

    .r8-router-list.r10-focused .r8-profile-heading span {
        min-width: 0 !important;
        overflow: hidden !important;
        color: #334155 !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .r8-router-list.r10-focused .r8-profile-heading small {
        padding: 5px 7px !important;
        border-radius: 8px !important;
        background: #ddd6fe !important;
        color: #5b21b6 !important;
        font-size: 9px !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    .r8-router-list.r10-focused .r8-profile-row {
        display: grid !important;
        grid-template-columns:
            38px minmax(0,1fr) auto 16px !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 67px !important;
        padding: 8px 9px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        border-radius: 13px !important;
    }

    .r8-router-list.r10-focused .r8-profile-icon {
        display: grid !important;
        place-items: center !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        margin: 0 !important;
        border-radius: 11px !important;
        font-size: 17px !important;
    }

    .r8-router-list.r10-focused
    .r8-profile-row > span:nth-child(2) {
        display: grid !important;
        min-width: 0 !important;
        gap: 3px !important;
        text-align: left !important;
    }

    .r8-router-list.r10-focused .r8-profile-row strong {
        display: block !important;
        overflow: hidden !important;
        color: #172554 !important;
        font-size: 14px !important;
        font-weight: 950 !important;
        line-height: 1.1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .r8-router-list.r10-focused
    .r8-profile-row > span:nth-child(2) small {
        display: block !important;
        overflow: hidden !important;
        color: #5f6078 !important;
        font-size: 9px !important;
        font-weight: 750 !important;
        line-height: 1.15 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .r8-router-list.r10-focused .r8-profile-row > b {
        display: grid !important;
        min-width: 48px !important;
        gap: 1px !important;
        color: #25105b !important;
        font-size: 17px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .r8-router-list.r10-focused .r8-profile-row > b small {
        display: block !important;
        margin-top: 3px !important;
        color: #64748b !important;
        font-size: 7px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
    }

    .r8-router-list.r10-focused .r8-profile-row > i {
        width: 16px !important;
        margin: 0 !important;
        color: #f97316 !important;
        font-size: 24px !important;
        font-weight: 950 !important;
        text-align: center !important;
    }
}

/* Modal plus compact sur mobile */

@media (max-width: 700px) {
    body.r9-modal-open .r9-overlay {
        padding: 7px !important;
    }

    body.r9-modal-open .r9-modal {
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
        padding: 9px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        border-radius: 18px !important;
    }

    body.r9-modal-open .r9-selection {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) auto !important;
        align-items: center !important;
        gap: 7px !important;
        padding: 9px !important;
        border-radius: 13px !important;
    }

    body.r9-modal-open .r9-selection label {
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        gap: 7px !important;
    }

    body.r9-modal-open .r9-selection label span {
        overflow: hidden !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.r9-modal-open .r9-selection > b {
        font-size: 9px !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    body.r9-modal-open .r9-selection > button {
        grid-column: 1 / -1 !important;
        min-height: 32px !important;
        padding: 6px !important;
        border-radius: 9px !important;
        font-size: 10px !important;
        font-weight: 900 !important;
    }
}

/*
 * Forcer la structure du tableau à devenir une vraie grille.
 * Les sélecteurs sont volontairement plus précis que les anciens styles.
 */

@media (max-width: 700px) {
    body.r9-modal-open
    .r9-overlay
    .r9-modal
    .r9-table-wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    body.r9-modal-open
    .r9-overlay
    .r9-modal
    .r9-table-wrap > table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
        border-collapse: separate !important;
    }

    body.r9-modal-open
    .r9-overlay
    .r9-modal
    .r9-table-wrap > table > thead {
        display: none !important;
    }

    body.r9-modal-open
    .r9-overlay
    .r9-modal
    .r9-table-wrap > table > tbody {
        display: grid !important;
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.r9-modal-open
    .r9-overlay
    .r9-modal
    .r9-table-wrap > table > tbody > tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 24px minmax(0,1fr) !important;
        grid-template-rows: 31px 25px 28px !important;
        align-items: center !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 100px !important;
        margin: 0 !important;
        padding: 7px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        border: 1px solid #c7c9e8 !important;
        border-radius: 12px !important;
        background: linear-gradient(
            145deg,#e5e7f4,#dce4f0
        ) !important;
        box-shadow:
            0 5px 12px rgba(30,41,59,.10),
            inset 0 1px 0 rgba(255,255,255,.65)
            !important;
    }

    body.r9-modal-open
    .r9-table-wrap tbody > tr > td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 0 !important;
        border: 0 !important;
    }

    body.r9-modal-open
    .r9-table-wrap tbody > tr > td:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: grid !important;
        place-items: center !important;
    }

    body.r9-modal-open
    .r9-table-wrap tbody > tr > td:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
    }

    body.r9-modal-open
    .r9-table-wrap tbody > tr > td:nth-child(3),
    body.r9-modal-open
    .r9-table-wrap tbody > tr > td:nth-child(4),
    body.r9-modal-open
    .r9-table-wrap tbody > tr > td:nth-child(5) {
        display: none !important;
    }

    body.r9-modal-open
    .r9-table-wrap tbody > tr > td:nth-child(6) {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: block !important;
    }

    body.r9-modal-open
    .r9-table-wrap tbody > tr > td:nth-child(7) {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        display: block !important;
    }

    body.r9-modal-open .r9-ticket-check {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
    }

    body.r9-modal-open .r9-code {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        color: #12234c !important;
        font-size: 12px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        letter-spacing: .035em !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.r9-modal-open .r9-status {
        display: block !important;
        width: 100% !important;
        padding: 5px 3px !important;
        box-sizing: border-box !important;
        border-radius: 7px !important;
        font-size: 7px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    body.r9-modal-open .r9-delete-one {
        display: block !important;
        width: 100% !important;
        min-height: 26px !important;
        padding: 4px 2px !important;
        border-radius: 7px !important;
        font-size: 7px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        text-align: center !important;
    }
}

/* Téléphones très étroits */

@media (max-width: 360px) {
    body.r9-modal-open
    .r9-overlay
    .r9-modal
    .r9-table-wrap > table > tbody {
        gap: 5px !important;
    }

    body.r9-modal-open
    .r9-overlay
    .r9-modal
    .r9-table-wrap > table > tbody > tr {
        padding: 5px !important;
    }

    body.r9-modal-open .r9-code {
        font-size: 10.5px !important;
    }
}

/* SOFAME-PWA-PROFILE-MODAL-BOLD-R12 */

/* Titre principal du modal */

.r9-modal .r9-kicker {
    color: #5b21b6 !important;
    font-weight: 950 !important;
    letter-spacing: .13em !important;
}

.r9-modal .r9-stock-heading h1 {
    color: #111c44 !important;
    font-weight: 950 !important;
    letter-spacing: -.025em !important;
}

.r9-modal .r9-stock-heading small {
    color: #5b21b6 !important;
    font-weight: 950 !important;
}

/* Profil et MikroTik */

.r9-modal .r9-context span small {
    color: #64748b !important;
    font-weight: 900 !important;
    letter-spacing: .05em !important;
}

.r9-modal .r9-context span b {
    color: #172554 !important;
    font-weight: 950 !important;
}

/* Cartes statistiques du modal */

.r9-modal .r9-summary article small {
    color: #475569 !important;
    font-weight: 900 !important;
}

.r9-modal .r9-summary article strong {
    color: #172554 !important;
    font-weight: 1000 !important;
}

/* Sélecteur du lot */

.r9-modal .r9-batch-selector {
    color: #172554 !important;
    font-weight: 950 !important;
}

.r9-modal .r9-batch-selector select {
    color: #172554 !important;
    font-weight: 850 !important;
}

.r9-modal .r9-batch-selector > small {
    color: #64748b !important;
    font-weight: 750 !important;
}

/* Informations du lot sélectionné */

.r9-modal .r9-batch-note b {
    color: #3b176f !important;
    font-weight: 950 !important;
}

.r9-modal .r9-batch-note small {
    color: #475569 !important;
    font-weight: 800 !important;
}

.r9-modal .r9-batch-note > span {
    color: #172554 !important;
    font-weight: 950 !important;
}

/* Zone de sélection */

.r9-modal .r9-selection label span {
    color: #172554 !important;
    font-weight: 950 !important;
}

.r9-modal .r9-selection > b {
    color: #172554 !important;
    font-weight: 950 !important;
}

/* Codes, états et boutons */

.r9-modal .r9-code {
    color: #10234f !important;
    font-weight: 1000 !important;
}

.r9-modal .r9-status {
    font-weight: 950 !important;
}

.r9-modal button {
    font-weight: 900 !important;
}

/* Message lorsqu’aucun ticket n’est présent */

.r9-modal .r7-empty strong {
    color: #172554 !important;
    font-weight: 950 !important;
}

.r9-modal .r7-empty span {
    color: #64748b !important;
    font-weight: 750 !important;
}

/* Mobile : garder le texte gras sans le surcharger */

@media (max-width: 700px) {
    .r9-modal .r9-kicker {
        font-size: 8px !important;
    }

    .r9-modal .r9-stock-heading h1 {
        font-size: 21px !important;
        line-height: 1.05 !important;
    }

    .r9-modal .r9-context span small {
        font-size: 7px !important;
    }

    .r9-modal .r9-context span b {
        font-size: 10px !important;
    }

    .r9-modal .r9-summary article small {
        font-size: 7.5px !important;
        line-height: 1.1 !important;
    }

    .r9-modal .r9-summary article strong {
        font-size: 16px !important;
    }

    .r9-modal .r9-batch-selector {
        font-size: 10px !important;
    }

    .r9-modal .r9-batch-selector select {
        font-size: 10px !important;
    }

    .r9-modal .r9-batch-selector > small {
        font-size: 8px !important;
        line-height: 1.2 !important;
    }

    .r9-modal .r9-batch-note b {
        font-size: 11px !important;
    }

    .r9-modal .r9-batch-note small,
    .r9-modal .r9-batch-note > span {
        font-size: 8px !important;
    }

    .r9-modal .r9-code {
        font-size: 12px !important;
        font-weight: 1000 !important;
    }
}

/* SOFAME_PWA_GENERATE_VIVID_R465 */
@media screen {
body.r36b-generate-open::before{
    background:rgba(15,10,38,.72)!important;
}
body.r36b-generate-open #r7-form-panel{
    padding:22px!important;
    border:1px solid #9074e6!important;
    border-top:4px solid #b997ff!important;
    border-radius:24px!important;
    background:linear-gradient(135deg,#43217b 0%,#342061 58%,#203655 100%)!important;
    box-shadow:0 24px 70px rgba(12,5,35,.5)!important;
    color:#fff!important;
    color-scheme:light;
}
body.r36b-generate-open #r7-form-panel::after{
    display:none!important;
}
body.r36b-generate-open #r7-form-panel .r7-form-head{
    background:#39216b!important;
    padding:10px 0 16px!important;
    border-bottom:1px solid rgba(255,255,255,.2)!important;
    margin-bottom:18px!important;
}
body.r36b-generate-open #r7-form-panel .r7-form-head span{
    color:#99f6e4!important;
    font-size:11px!important;
}
body.r36b-generate-open #r7-form-panel .r7-form-head h2{
    color:#fff!important;
    font-size:25px!important;
    line-height:1.2!important;
}
body.r36b-generate-open #r7-form-panel .r7-form-head p{
    color:#e5ddf8!important;
}
body.r36b-generate-open #r7-form-panel .r7-close{
    width:42px!important;
    height:42px!important;
    flex-shrink:0;
    border:1px solid #a78bdb!important;
    border-radius:12px!important;
    background:#523484!important;
    color:#fff!important;
    font-size:26px!important;
    cursor:pointer;
}
body.r36b-generate-open #r7-form-panel .r7-form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
}
body.r36b-generate-open #r7-form-panel .r7-form-grid>label{
    padding:10px!important;
    gap:7px!important;
    border:1px solid rgba(214,195,255,.28)!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.07)!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:750!important;
    line-height:1.35!important;
}
body.r36b-generate-open #r7-form-panel .r7-form-grid>label::before{
    content:none!important;
    display:none!important;
}
body.r36b-generate-open #r7-form-panel input,
body.r36b-generate-open #r7-form-panel select{
    min-height:46px!important;
    height:46px!important;
    padding:0 12px!important;
    background:#f8f5ff!important;
    border:1px solid #ddd2f4!important;
    border-radius:10px!important;
    color:#271741!important;
    font-size:14px!important;
    font-weight:650!important;
}
body.r36b-generate-open #r7-form-panel input::placeholder{
    color:#70647e!important;
}
body.r36b-generate-open #r7-form-panel select option{
    color:#271741;
    background:#f8f5ff;
}
body.r36b-generate-open #r7-form-panel input:focus,
body.r36b-generate-open #r7-form-panel select:focus{
    border-color:#5eead4!important;
    outline:2px solid #5eead4!important;
    outline-offset:2px!important;
    box-shadow:none!important;
}
body.r36b-generate-open #r7-generate-form>button[type="submit"]{
    width:100%!important;
    min-height:48px!important;
    margin-top:16px!important;
    border-radius:13px!important;
    background:linear-gradient(110deg,#5eead4,#67e8f9)!important;
    color:#103c42!important;
    font-size:15px!important;
    font-weight:900!important;
    box-shadow:0 8px 22px rgba(0,0,0,.2)!important;
}
body.r36b-generate-open #r7-form-panel button:focus-visible{
    outline:3px solid #fff!important;
    outline-offset:3px!important;
}
body.r36b-generate-open #r7-form-panel button:disabled{
    opacity:.6!important;
    cursor:wait!important;
}
}
@media screen and (max-width:600px){
body.r36b-generate-open #r7-form-panel{
    padding:14px!important;
    border-radius:18px!important;
}
body.r36b-generate-open #r7-form-panel .r7-form-head h2{
    font-size:22px!important;
}
body.r36b-generate-open #r7-form-panel .r7-form-grid{
    gap:9px!important;
}
body.r36b-generate-open #r7-form-panel .r7-form-grid>label{
    padding:8px!important;
    font-size:12px!important;
}
body.r36b-generate-open #r7-form-panel input,
body.r36b-generate-open #r7-form-panel select{
    font-size:16px!important;
    padding:0 9px!important;
}
}

/* SOFAME_PWA_PRINT_OPTIONS_R466 */
@media screen{
.r12-generated .r466-options,
.r9-modal .r466-options{
 display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
 gap:10px!important;margin:14px 0!important;text-align:left!important;
}
.r466-options>label{
 display:grid!important;gap:7px!important;min-width:0!important;
 padding:12px!important;border:1px solid #c4b5fd!important;
 border-radius:13px!important;background:linear-gradient(130deg,#ede9fe,#e0e7ff)!important;
 color:#271741!important;
}
.r466-options>label>span{font-size:13px!important;font-weight:800!important}
.r466-options select{
 width:100%!important;min-width:0!important;min-height:44px!important;
 padding:8px!important;border:1px solid #a78bfa!important;border-radius:9px!important;
 background:#fff!important;color:#271741!important;font-size:14px!important;
}
.r466-options select:disabled{
 opacity:1!important;color:#271741!important;-webkit-text-fill-color:#271741!important;
 background:#f5f3ff!important;
}
.r466-options select:focus-visible{outline:3px solid #8b5cf6;outline-offset:2px}
}
@media screen and (max-width:600px){
.r466-options>label{padding:8px!important}
.r466-options select{font-size:16px!important;padding:6px!important}
}

/* SOFAME_PWA_CARD_BACKGROUNDS_R467 */
@media screen {
.r3c-panel.r3c-finance{
    background:linear-gradient(135deg,#ded5f1,#d6dfef)!important;
    color:#241b3d!important;
}
.r3c-panel.r3c-service{
    background:linear-gradient(135deg,#cce9df,#cddfe7)!important;
    color:#173a36!important;
}
.r3c-finance>.r3c-panel-title,
.r3c-service>header{
    background:transparent!important;
}
.r3c-finance>.r3c-panel-title h2{
    color:#30204e!important;
}
.r3c-finance>.r3c-panel-title small{
    color:#62418a!important;
}
.r3c-service>header h2{
    color:#173d35!important;
}
.r3c-service>header small{
    color:#286655!important;
}
.r3c-service .r3c-service-state{
    background:#b9dfd2!important;
    border:1px solid #91c5b3!important;
    color:#173d35!important;
}
.r3c-service .r3c-service-state h3{
    color:#164c3b!important;
}
.r3c-service .r3c-service-state small,
.r3c-service .r3c-service-state p{
    color:#31584c!important;
}
.r3c-service .r3c-service-list>span{
    background:#d5e5e0!important;
    border:1px solid #abc9bf!important;
}
.r3c-service .r3c-service-list>span small{
    color:#3b5b52!important;
}
.r3c-service .r3c-service-list>span b{
    color:#173d35!important;
}
.r24-verifier{
    background:linear-gradient(135deg,#ded5ef,#d4dff0)!important;
    color:#2c2345!important;
}
.r24-verifier .r24-verifier-head{
    background:transparent!important;
}
.r24-verifier .r24-verifier-head h2{
    color:#352052!important;
}
.r24-verifier .r24-verifier-head small{
    color:#69438d!important;
}
.r24-verifier .r24-verifier-head p,
.r24-verifier .r24-security{
    color:#524663!important;
}
.r24-verifier .r24-form{
    background:#cfc6e4!important;
    border:1px solid #b4a6cd!important;
}
.r24-verifier .r24-form label{
    color:#35284b!important;
}
.r24-verifier #r24-ticket-code{
    background:#e9e4f3!important;
    border:1px solid #a899c4!important;
    color:#251a3b!important;
}
.r24-verifier #r24-ticket-code::placeholder{
    color:#675b79!important;
}
.r24-verifier #r24-ticket-code:focus{
    outline:2px solid #7652b0!important;
    outline-offset:2px!important;
}
}