:root{
    --bg:#f6f8fb;
    --surface:#ffffff;
    --surface-soft:#f9fbfc;

    --text:#0f172a;
    --text-2:#475569;
    --text-3:#94a3b8;

    --border:#e5eaf0;

    --primary:#00b8ad;
    --primary-dark:#009a91;
    --secondary:#2563eb;

    --success:#22c55e;
    --warning:#f5a623;
    --danger:#ef4444;

    --radius:14px;
    --shadow:
        0 1px 2px rgba(15,23,42,.03),
        0 8px 30px rgba(15,23,42,.045);
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}

a{
    color:inherit;
}

.app-shell{
    min-height:100vh;
    display:flex;
}

/* SIDEBAR */

.sidebar{
    width:240px;
    background:#fff;
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
    position:fixed;
    inset:0 auto 0 0;
    z-index:20;
}

.brand{
    height:92px;
    padding:20px 22px;
    display:flex;
    align-items:center;
    gap:12px;
    border-bottom:1px solid #f0f2f5;
}

.brand img{
    width:46px;
    height:46px;
}

.brand-name{
    font-size:18px;
    font-weight:750;
    line-height:1.02;
    letter-spacing:-.4px;
}

.brand-name span{
    display:block;
}

.nav{
    padding:18px 12px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.nav a{
    text-decoration:none;
    color:#475569;
    min-height:45px;
    padding:0 13px;
    border-radius:10px;
    display:flex;
    align-items:center;
    gap:12px;
    font-size:14px;
    font-weight:550;
}

.nav a:hover{
    background:#f5f8fa;
    color:#0f172a;
}

.nav a.active{
    color:#008f87;
    background:#eafaf8;
}

.nav-icon{
    width:22px;
    text-align:center;
    font-size:17px;
}

.sidebar-bottom{
    margin-top:auto;
    padding:14px;
}

.help-box{
    border:1px solid var(--border);
    border-radius:12px;
    padding:13px;
    color:var(--text-2);
    font-size:12px;
    margin-bottom:12px;
}

.user-box{
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:12px;
    padding:11px;
    display:flex;
    align-items:center;
    gap:10px;
}

.avatar{
    width:34px;
    height:34px;
    border-radius:9px;
    display:grid;
    place-items:center;
    background:#18212f;
    color:white;
    font-size:12px;
    font-weight:700;
}

.user-name{
    font-weight:650;
    font-size:13px;
}

.user-sub{
    font-size:11px;
    color:var(--text-3);
    margin-top:2px;
}

/* MAIN */

.main{
    margin-left:240px;
    width:calc(100% - 240px);
}

.topbar{
    min-height:92px;
    background:#fff;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
}

.topbar-inner{
    width:100%;
    max-width:1500px;
    margin:auto;
    padding:18px 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

.page-title{
    font-size:25px;
    font-weight:760;
    letter-spacing:-.5px;
    margin:0;
}

.page-subtitle{
    color:var(--text-2);
    font-size:13px;
    margin-top:4px;
}

.store-select{
    min-width:220px;
    padding:10px 38px 10px 12px;
    border-radius:9px;
    border:1px solid #dce2e8;
    background:#fff;
    color:#1e293b;
    font-weight:550;
    cursor:pointer;
}

.content{
    max-width:1500px;
    margin:auto;
    padding:26px 30px 60px;
}

/* CARDS */

.card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.card-pad{
    padding:22px;
}

.card-title{
    font-size:17px;
    font-weight:720;
    margin:0 0 5px;
}

.card-subtitle{
    font-size:13px;
    color:var(--text-2);
    margin:0;
}

/* KPI */

.kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:22px;
}

.kpi{
    padding:18px;
    display:flex;
    gap:14px;
    align-items:center;
}

.kpi-icon{
    width:48px;
    height:48px;
    flex:0 0 48px;
    border-radius:12px;
    display:grid;
    place-items:center;
    font-size:21px;
}

.kpi-icon.teal{
    background:#e6f9f7;
    color:#00a79e;
}

.kpi-icon.blue{
    background:#eaf0ff;
    color:#2563eb;
}

.kpi-icon.green{
    background:#ebf9ef;
    color:#16a34a;
}

.kpi-icon.orange{
    background:#fff2e3;
    color:#f59e0b;
}

.kpi-label{
    color:var(--text-2);
    font-size:12px;
    font-weight:550;
}

.kpi-value{
    font-size:25px;
    font-weight:760;
    margin-top:2px;
    letter-spacing:-.5px;
}

.kpi-note{
    color:var(--text-3);
    font-size:11px;
    margin-top:2px;
}

/* STATUS */

.status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:650;
}

.status.green{
    background:#eaf8ee;
    color:#18823a;
}

.status.yellow{
    background:#fff5d9;
    color:#8a6500;
}

.status.blue{
    background:#edf3ff;
    color:#265fb5;
}

.status.red{
    background:#ffeded;
    color:#b42318;
}

.dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:currentColor;
}

/* GRID */

.dashboard-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 390px;
    gap:20px;
}

.stack{
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* TABLE */

.table-wrap{
    overflow:auto;
}

.table{
    width:100%;
    border-collapse:collapse;
}

.table th{
    text-align:left;
    padding:11px 14px;
    color:#64748b;
    font-size:11px;
    font-weight:650;
    border-bottom:1px solid var(--border);
    background:#fbfcfd;
}

.table td{
    padding:13px 14px;
    border-bottom:1px solid #edf0f3;
    font-size:13px;
}

.table tbody tr:last-child td{
    border-bottom:0;
}

.table tbody tr:hover{
    background:#fbfdfd;
}

/* BUTTONS */

.btn{
    border:0;
    text-decoration:none;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:38px;
    padding:0 14px;
    border-radius:9px;
    font-size:13px;
    font-weight:650;
}

.btn-primary{
    color:white;
    background:
        linear-gradient(135deg,#00b8ad,#009e96);
}

.btn-primary:hover{
    filter:brightness(.96);
}

.btn-secondary{
    background:#fff;
    color:#334155;
    border:1px solid #dbe2e8;
}

.btn-danger{
    background:#fff1f1;
    color:#c12c2c;
}

/* FORM */

.form-label{
    display:block;
    font-size:12px;
    font-weight:650;
    margin-bottom:6px;
}

.input,
.select{
    width:100%;
    min-height:42px;
    border:1px solid #dbe2e8;
    border-radius:9px;
    background:#fff;
    padding:0 12px;
    font-size:13px;
    color:#1e293b;
    outline:none;
}

.input:focus,
.select:focus{
    border-color:#00b8ad;
    box-shadow:0 0 0 3px rgba(0,184,173,.09);
}

.form-grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

/* ALERT */

.alert{
    border-radius:10px;
    padding:12px 14px;
    font-size:12px;
}

.alert-info{
    background:#edf8ff;
    color:#235b78;
}

.alert-warning{
    background:#fff8e4;
    color:#7c620a;
}

.alert-success{
    background:#ebf8ef;
    color:#23683a;
}

/* EMPTY */

.empty{
    text-align:center;
    color:#64748b;
    padding:36px 20px;
}

/* RESPONSIVE */

@media(max-width:1150px){
    .kpi-grid{
        grid-template-columns:1fr 1fr;
    }

    .dashboard-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:800px){
    .sidebar{
        width:72px;
    }

    .brand{
        padding:13px;
        justify-content:center;
    }

    .brand-name,
    .nav-label,
    .sidebar-bottom{
        display:none;
    }

    .nav a{
        justify-content:center;
        padding:0;
    }

    .main{
        margin-left:72px;
        width:calc(100% - 72px);
    }

    .topbar-inner,
    .content{
        padding-left:18px;
        padding-right:18px;
    }

    .store-select{
        min-width:150px;
    }
}

@media(max-width:600px){
    .kpi-grid{
        grid-template-columns:1fr;
    }

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

    .form-grid-2{
        grid-template-columns:1fr;
    }
}

/* ==========================================================
   V3.2
   ========================================================== */

.section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
}

.tabs-modern{
    display:inline-flex;
    padding:4px;
    gap:4px;
    background:#f1f5f9;
    border-radius:10px;
    margin:18px 0;
}

.tabs-modern a{
    min-height:36px;
    display:flex;
    align-items:center;
    padding:0 14px;
    border-radius:8px;
    text-decoration:none;
    color:#64748b;
    font-size:12px;
    font-weight:650;
}

.tabs-modern a.active{
    background:#fff;
    color:#008f87;
    box-shadow:
        0 1px 3px rgba(15,23,42,.08);
}

.rule-type-badge{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    background:#edf6ff;
    color:#2c67ad;
    padding:4px 8px;
    font-size:10px;
    font-weight:700;
}

.priority{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:11px;
    font-weight:650;
}

.priority.high{color:#ea7300}
.priority.medium{color:#d29a00}
.priority.low{color:#22a447}

.rule-name{
    font-weight:680;
    font-size:13px;
}

.rule-sub{
    color:#94a3b8;
    font-size:11px;
    margin-top:3px;
}

.payment-grid{
    display:grid;
    grid-template-columns:
        repeat(auto-fit,minmax(180px,1fr));
    gap:11px;
}

.payment-choice{
    display:block;
    position:relative;
    cursor:pointer;
}

.payment-choice input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.payment-choice-box{
    min-height:95px;
    border:1px solid #dfe5ea;
    border-radius:11px;
    padding:13px;
    background:#fff;
    transition:.15s ease;
}

.payment-choice input:checked
+ .payment-choice-box{
    border-color:#00b8ad;
    background:#f2fffd;
    box-shadow:
        0 0 0 2px rgba(0,184,173,.07);
}

.payment-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
}

.payment-icon{
    width:32px;
    height:32px;
    border-radius:9px;
    display:grid;
    place-items:center;
    background:#e8f9f7;
    color:#009d94;
    font-weight:750;
}

.payment-check{
    width:18px;
    height:18px;
    border-radius:5px;
    border:1px solid #cbd5e1;
    display:grid;
    place-items:center;
    font-size:11px;
    color:white;
}

.payment-choice input:checked
+ .payment-choice-box
.payment-check{
    background:#00a89f;
    border-color:#00a89f;
}

.payment-name{
    font-weight:650;
    font-size:12px;
    margin-top:9px;
}

.payment-meta{
    color:#94a3b8;
    font-size:10px;
    margin-top:4px;
}

.rule-editor-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 370px;
    gap:20px;
}

.preview-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:15px;
}

.preview-payment{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:47px;
    border:1px solid #e8edf2;
    border-radius:10px;
    padding:9px 11px;
}

.preview-payment.hidden{
    opacity:.45;
}

.preview-payment-name{
    flex:1;
    font-size:12px;
    font-weight:600;
}

.preview-visible{
    color:#18823a;
    background:#eaf8ee;
    border-radius:999px;
    padding:4px 8px;
    font-size:9px;
    font-weight:700;
}

.preview-hidden{
    color:#9f2931;
    background:#fff0f0;
    border-radius:999px;
    padding:4px 8px;
    font-size:9px;
    font-weight:700;
}

.rule-form-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:20px;
}

.toggle-row{
    display:flex;
    align-items:center;
    gap:10px;
}

.toggle{
    position:relative;
    display:inline-block;
    width:40px;
    height:22px;
}

.toggle input{
    opacity:0;
    width:0;
    height:0;
}

.toggle-slider{
    position:absolute;
    cursor:pointer;
    inset:0;
    border-radius:999px;
    background:#cbd5e1;
    transition:.2s;
}

.toggle-slider:before{
    content:"";
    position:absolute;
    width:16px;
    height:16px;
    left:3px;
    top:3px;
    border-radius:50%;
    background:#fff;
    transition:.2s;
}

.toggle input:checked
+ .toggle-slider{
    background:#00a89f;
}

.toggle input:checked
+ .toggle-slider:before{
    transform:translateX(18px);
}

.payment-provider{
    margin-bottom:20px;
}

.payment-provider-title{
    font-size:12px;
    font-weight:700;
    color:#475569;
    margin-bottom:10px;
}

.sim-grid{
    display:grid;
    grid-template-columns:360px minmax(0,1fr);
    gap:20px;
}

.engine-time{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:13px 15px;
    background:#ebf8ef;
    border-radius:10px;
    color:#23683a;
    font-size:12px;
}

.json-box{
    background:#111827;
    color:#d8e0ec;
    padding:16px;
    border-radius:11px;
    overflow:auto;
    font-size:11px;
    line-height:1.55;
}

.option-row{
    display:flex;
    align-items:center;
    gap:11px;
    padding:11px 0;
    border-bottom:1px solid #edf0f3;
}

.option-row:last-child{
    border-bottom:0;
}

.option-row-name{
    font-size:12px;
    font-weight:620;
}

.option-row-sub{
    color:#94a3b8;
    font-size:10px;
    margin-top:3px;
}

.store-card{
    padding:18px;
}

.store-card-top{
    display:flex;
    align-items:center;
    gap:12px;
}

.store-icon{
    width:44px;
    height:44px;
    border-radius:11px;
    display:grid;
    place-items:center;
    background:#e9f8f7;
    color:#009d94;
    font-size:20px;
}

.store-grid{
    display:grid;
    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));
    gap:16px;
}

.settings-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding:17px 0;
    border-bottom:1px solid #edf0f3;
}

.settings-row:last-child{
    border-bottom:0;
}

.settings-label{
    font-size:13px;
    font-weight:650;
}

.settings-sub{
    font-size:11px;
    color:#94a3b8;
    margin-top:4px;
}

@media(max-width:1100px){
    .rule-editor-grid,
    .sim-grid{
        grid-template-columns:1fr;
    }
}


/* ==========================================================
   RULE EDITOR V5
   ========================================================== */

.rule-save-alert{
    margin-bottom:20px;
}

.rule-editor-v5-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 390px;
    gap:22px;
    align-items:start;
}

.rule-editor-v5-main{
    display:flex;
    flex-direction:column;
    gap:20px;
    min-width:0;
}

.rule-editor-v5-side{
    min-width:0;
}

.rule-side-sticky{
    position:sticky;
    top:18px;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.rule-hero-card{
    padding:22px;
}

.rule-hero-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.rule-hero-identity{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}

.rule-hero-icon{
    width:50px;
    height:50px;
    flex:0 0 50px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:linear-gradient(135deg,#e7faf8,#edf4ff);
    color:#008f87;
    border:1px solid #daefed;
    font-size:20px;
    font-weight:800;
}

.rule-eyebrow{
    color:#64748b;
    font-size:10px;
    line-height:1.2;
    font-weight:750;
    text-transform:uppercase;
    letter-spacing:.6px;
    margin-bottom:5px;
}

.rule-hero-title{
    margin:0;
    color:#0f172a;
    font-size:19px;
    line-height:1.25;
    font-weight:760;
    letter-spacing:-.25px;
}

.rule-hero-meta{
    margin-top:5px;
    color:#94a3b8;
    font-size:10px;
}

.rule-hero-controls{
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid #edf1f4;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.rule-control-block{
    min-width:0;
}

.rule-field-help{
    color:#94a3b8;
    font-size:10px;
    line-height:1.4;
    margin-top:5px;
}

.rule-status-control{
    min-height:42px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:0 12px;
    border:1px solid #dbe2e8;
    border-radius:9px;
    background:#fff;
}

.rule-status-title{
    color:#334155;
    font-size:12px;
    font-weight:680;
}

.rule-section-head{
    align-items:center;
}

.rule-section-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#eef8f7;
    color:#009d94;
    font-size:14px;
    font-weight:800;
}

.rule-amount-selector{
    margin-top:18px;
}

.rule-amount-fields{
    margin-top:14px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.rule-amount-fields[hidden],
.rule-no-amount[hidden]{
    display:none !important;
}

.rule-money-input{
    position:relative;
}

.rule-money-input .input{
    padding-left:31px;
}

.rule-money-prefix{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    color:#94a3b8;
    font-size:12px;
    font-weight:700;
    pointer-events:none;
    z-index:1;
}

.rule-no-amount{
    margin-top:14px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:13px 14px;
    border:1px solid #dcefeb;
    border-radius:10px;
    background:#f3fcfa;
    color:#285e58;
    font-size:12px;
}

.rule-no-amount-icon{
    width:28px;
    height:28px;
    flex:0 0 28px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#dff7f2;
    color:#008f87;
    font-weight:800;
}

.rule-payment-count{
    flex:0 0 auto;
    padding:5px 9px;
    border-radius:999px;
    background:#eef8f7;
    color:#008f87;
    font-size:10px;
    font-weight:700;
}

.rule-payment-toolbar{
    margin:17px 0 14px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.rule-payment-providers{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.rule-payment-provider{
    border:1px solid #e7ecf1;
    border-radius:13px;
    overflow:hidden;
    background:#fff;
}

.rule-payment-provider-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:13px 15px;
    border-bottom:1px solid #edf1f4;
    background:#fafcfd;
}

.rule-payment-provider-name{
    color:#334155;
    font-size:12px;
    font-weight:720;
}

.rule-payment-provider-count{
    color:#94a3b8;
    font-size:9px;
    margin-top:2px;
}

.rule-payment-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(205px,1fr));
    gap:10px;
    padding:12px;
}

.rule-payment-choice{
    display:block;
    position:relative;
    cursor:pointer;
}

.rule-payment-choice input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.rule-payment-card{
    min-height:145px;
    display:flex;
    flex-direction:column;
    padding:13px;
    border:1px solid #e3e8ed;
    border-radius:11px;
    background:#fff;
    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.rule-payment-choice:hover .rule-payment-card{
    border-color:#cfd9e2;
    transform:translateY(-1px);
}

.rule-payment-choice input:checked
+ .rule-payment-card{
    border-color:#00b8ad;
    background:#f4fffd;
    box-shadow:0 0 0 2px rgba(0,184,173,.07);
}

.rule-payment-card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}

.rule-payment-card-icon{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#e8f9f7;
    color:#009d94;
    font-size:13px;
    font-weight:800;
}

.rule-payment-card-check{
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    border-radius:6px;
    border:1px solid #cbd5e1;
    color:transparent;
    font-size:11px;
    font-weight:800;
}

.rule-payment-choice input:checked
+ .rule-payment-card
.rule-payment-card-check{
    background:#00a89f;
    border-color:#00a89f;
    color:#fff;
}

.rule-payment-card-name{
    margin-top:12px;
    color:#1e293b;
    font-size:12px;
    line-height:1.35;
    font-weight:680;
}

.rule-payment-card-meta{
    margin-top:4px;
    color:#94a3b8;
    font-size:9px;
    line-height:1.35;
}

.rule-payment-card-state{
    margin-top:auto;
    padding-top:12px;
    display:flex;
    align-items:center;
    gap:6px;
    color:#94a3b8;
    font-size:9px;
    font-weight:650;
}

.rule-payment-card-state-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#cbd5e1;
}

.rule-payment-choice input:checked
+ .rule-payment-card
.rule-payment-card-state{
    color:#18823a;
}

.rule-payment-choice input:checked
+ .rule-payment-card
.rule-payment-card-state-dot{
    background:#22c55e;
}

.rule-payment-warning{
    margin-top:14px;
}

.rule-result-card{
    overflow:hidden;
}

.rule-preview-list{
    margin-top:15px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.rule-preview-payment{
    min-height:50px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 10px;
    border:1px solid #e7ecf1;
    border-radius:10px;
    background:#fff;
    transition:.15s ease;
}

.rule-preview-payment.is-hidden{
    background:#fafbfc;
    opacity:.58;
}

.rule-preview-icon{
    width:31px;
    height:31px;
    flex:0 0 31px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#eef8f7;
    color:#009d94;
    font-size:11px;
    font-weight:800;
}

.rule-preview-info{
    flex:1;
    min-width:0;
}

.rule-preview-name{
    color:#334155;
    font-size:11px;
    font-weight:650;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.rule-preview-type{
    margin-top:2px;
    color:#94a3b8;
    font-size:9px;
}

.rule-preview-badge{
    flex:0 0 auto;
    padding:4px 7px;
    border-radius:999px;
    font-size:8px;
    font-weight:750;
}

.rule-preview-badge.visible{
    background:#eaf8ee;
    color:#18823a;
}

.rule-preview-badge.hidden{
    background:#f1f3f5;
    color:#7b8794;
}

.rule-preview-note{
    margin-top:14px;
    padding:10px 11px;
    border-radius:9px;
    background:#f5f9fc;
    color:#64748b;
    font-size:9px;
    line-height:1.45;
}

.rule-summary-list{
    margin-top:15px;
}

.rule-summary-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:11px 0;
    border-bottom:1px solid #edf1f4;
}

.rule-summary-row:last-child{
    border-bottom:0;
}

.rule-summary-label{
    color:#334155;
    font-size:11px;
    font-weight:680;
}

.rule-summary-help{
    margin-top:2px;
    color:#94a3b8;
    font-size:9px;
}

.rule-summary-row strong{
    max-width:205px;
    color:#334155;
    font-size:10px;
    line-height:1.35;
    text-align:right;
}

.rule-summary-value{
    word-break:break-word;
}

.rule-side-actions{
    margin-top:17px;
    padding-top:16px;
    border-top:1px solid #edf1f4;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
}

.rule-save-button,
.rule-simulator-button{
    width:100%;
    min-height:43px;
}

.rule-side-footnote{
    display:flex;
    gap:9px;
    padding:12px 13px;
    border:1px solid #e2e8f0;
    border-radius:11px;
    background:#f8fafc;
    color:#64748b;
    font-size:9px;
    line-height:1.5;
}

@media(max-width:1180px){

    .rule-editor-v5-grid{
        grid-template-columns:minmax(0,1fr) 340px;
    }

}

@media(max-width:1020px){

    .rule-editor-v5-grid{
        grid-template-columns:1fr;
    }

    .rule-side-sticky{
        position:static;
    }

    .rule-editor-v5-side{
        order:-1;
    }

}

@media(max-width:700px){

    .rule-hero-top{
        flex-direction:column;
    }

    .rule-hero-controls,
    .rule-amount-fields{
        grid-template-columns:1fr;
    }

    .rule-payment-grid{
        grid-template-columns:1fr;
    }

    .rule-payment-toolbar{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

}