:root{
    --bg:#f4f6f4;
    --surface:#fff;
    --text:#17201b;
    --muted:#66716a;
    --line:#dfe5e1;
    --green:#173f2c;
    --green2:#245c41;
    --red:#8f2735;
    --amber:#946b12;
    --orange:#b15e19;
    --shadow:0 12px 34px rgba(23,32,27,.08)
}

*{box-sizing:border-box}

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

a{color:inherit}

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    padding:24px clamp(20px,4vw,56px);
    background:var(--green);
    color:#fff
}

.topbar h1{
    margin:2px 0 0;
    font-size:clamp(26px,4vw,38px)
}

.version{
    font-size:.4em;
    opacity:.6;
    vertical-align:middle
}

.eyebrow{
    font-size:11px;
    letter-spacing:.13em;
    opacity:.72;
    font-weight:800
}

.eyebrow.dark{
    color:var(--green);
    opacity:.72
}

.top-actions{
    display:flex;
    align-items:center;
    gap:10px
}

.logout{
    text-decoration:none;
    border:1px solid rgba(255,255,255,.32);
    border-radius:10px;
    padding:10px 14px;
    font-weight:700
}

.wrap{
    width:min(1500px,calc(100% - 32px));
    margin:28px auto 60px
}

.panel,
.summary-card,
.login-card,
.comparison-card,
.limit-panel{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:var(--shadow)
}

.toolbar{
    padding:14px 16px;
    margin-bottom:18px;
    overflow:visible
}

.period-form{
    display:flex;
    align-items:end;
    gap:12px;
    flex-wrap:wrap
}

.period-form label{
    display:grid;
    gap:5px;
    font-size:12px;
    font-weight:800;
    color:#4d5952
}

.period-form select{
    min-width:180px;
    border:1px solid #cfd8d2;
    border-radius:9px;
    padding:10px 12px;
    background:#fff;
    font:inherit
}

.period-form button{
    border:0;
    border-radius:9px;
    padding:11px 16px;
    background:var(--green);
    color:#fff;
    font:inherit;
    font-weight:800;
    cursor:pointer
}

.limit-panel{
    display:grid;
    grid-template-columns:minmax(0,2.2fr) minmax(280px,1fr);
    overflow:visible;
    margin-bottom:18px
}

.limit-main{
    padding:24px;
    overflow:hidden;
    border-radius:16px 0 0 16px
}

.limit-note{
    padding:24px;
    background:#eef4f0;
    border-left:1px solid var(--line);
    border-radius:0 16px 16px 0
}

.limit-note>strong{
    display:block;
    margin-bottom:5px
}

.limit-note>p{
    margin:0;
    color:#526159;
    font-size:13px;
    line-height:1.55
}

.limit-row{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin:9px 0 14px
}

.limit-value{
    font-size:clamp(30px,5vw,48px);
    font-weight:900;
    color:var(--green)
}

.limit-separator{
    font-size:24px;
    color:#9aa49e;
    padding:0 4px
}

.limit-max{
    font-size:22px;
    color:#68736c;
    font-weight:750
}

.usage{
    font-size:24px;
    color:var(--green)
}

.muted-value{
    color:var(--muted)
}

.progress{
    height:14px;
    background:#e7ece9;
    border-radius:999px;
    overflow:hidden
}

.progress-bar{
    height:100%;
    border-radius:inherit;
    transition:width .3s ease
}

.progress-ok{background:#2d7650}
.progress-watch{background:#a78628}
.progress-warn{background:#c46b20}
.progress-danger{background:#a82a3a}

.limit-meta{
    display:flex;
    justify-content:space-between;
    gap:20px;
    color:var(--muted);
    font-size:13px;
    margin-top:10px
}

.over{color:var(--red)}

.missing-limit{
    margin-top:12px;
    padding:11px 13px;
    background:#f7f3e9;
    border:1px solid #eadfbe;
    border-radius:10px;
    color:#665a36;
    font-size:13px
}

.inline-details{
    margin-top:14px;
    font-size:13px
}

.inline-details summary{
    cursor:pointer;
    font-weight:800;
    color:var(--green)
}

.inline-details p{
    margin:8px 0 0;
    color:#526159;
    line-height:1.5
}

.comparison-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-bottom:18px
}

.comparison-card{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:15px;
    padding:18px
}

.comparison-card.active{
    outline:2px solid rgba(36,92,65,.28);
    background:#fbfdfb
}

.comparison-card span{
    display:block;
    color:var(--muted);
    font-size:13px;
    font-weight:700
}

.comparison-card strong{
    display:block;
    font-size:22px;
    margin-top:7px
}

.summary{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:14px;
    margin-bottom:18px
}

.summary-card{padding:18px}

.summary-card span,
.summary-card small{
    display:block;
    color:var(--muted)
}

.summary-card span{
    font-size:13px;
    font-weight:700
}

.summary-card strong{
    display:block;
    font-size:22px;
    margin:7px 0 4px
}

.summary-card small{
    font-size:12px;
    line-height:1.35
}

.grid-two{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:18px
}

.panel{
    overflow:hidden;
    margin-bottom:18px
}

.grid-two .panel{
    margin-bottom:0
}

.panel-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:24px;
    padding:22px 24px;
    border-bottom:1px solid var(--line);
    overflow:visible
}

.panel-head h2{
    margin:0 0 4px
}

.panel-head p,
.footnote,
.muted{
    color:var(--muted)
}

.panel-head p{
    margin:0;
    font-size:14px
}

.source-list{
    padding:4px 20px 12px
}

.source-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:14px 4px;
    border-bottom:1px solid var(--line)
}

.source-row:last-child{
    border-bottom:0
}

.manual-form{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:14px;
    padding:20px 24px 24px
}

.manual-form label{
    display:grid;
    gap:6px;
    font-size:12px;
    font-weight:800;
    color:#47554d
}

.manual-form .full{
    grid-column:1/-1
}

.manual-form input{
    width:100%;
    border:1px solid #cfd8d2;
    border-radius:9px;
    padding:10px 11px;
    font:inherit;
    background:#fff
}

.manual-form input:focus{
    outline:2px solid rgba(36,92,65,.18);
    border-color:var(--green2)
}

.manual-form button{
    border:0;
    border-radius:9px;
    padding:11px 15px;
    background:var(--green);
    color:#fff;
    font:inherit;
    font-weight:800;
    cursor:pointer
}

.manual-form button:hover{
    background:var(--green2)
}

.table-wrap{
    overflow-x:auto
}

table{
    width:100%;
    border-collapse:collapse;
    min-width:1100px
}

.manual-table{
    min-width:760px
}

th,td{
    padding:13px 15px;
    text-align:left;
    border-bottom:1px solid var(--line);
    vertical-align:middle
}

th{
    background:#f8faf8;
    color:#4f5b54;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.06em
}

td{
    font-size:14px
}

tbody tr:hover{
    background:#fbfcfb
}

.row-excluded{
    opacity:.58
}

.amount{
    font-weight:800
}

.counted-amount{
    color:var(--green)
}

.status{
    display:inline-flex;
    border-radius:999px;
    padding:5px 9px;
    font-size:12px;
    font-weight:750;
    background:#eef1ef
}

.status.ok{background:#e8f5ed;color:#23653c}
.status.info{background:#e9f0f7;color:#2f5f86}
.status.warn{background:#fbf3da;color:#805e08}
.status.bad{background:#f9e6e8;color:#8f2735}
.status.refund{background:#efe9f6;color:#65488b}

.count-badge{
    display:inline-flex;
    border-radius:999px;
    padding:4px 7px;
    font-size:10px;
    font-weight:900;
    letter-spacing:.04em
}

.count-yes{background:#e8f5ed;color:#23653c}
.count-no{background:#f1eeee;color:#746a6c}

.alert{
    padding:13px 15px;
    border-radius:12px;
    margin:14px 0;
    font-size:14px
}

.alert-error{
    background:#f9e6e8;
    color:#771e2a;
    border:1px solid #efc9ce
}

.alert-warn{
    background:#fff4d8;
    color:#76570e;
    border:1px solid #f0d99d
}

.alert-success{
    background:#e8f5ed;
    color:#23653c;
    border:1px solid #bfdfcb
}

.empty{
    text-align:center;
    padding:35px 16px;
    color:var(--muted)
}

.footnote{
    text-align:center;
    font-size:12px;
    margin-top:16px;
    line-height:1.5
}

.actions-cell{
    text-align:right
}

.delete-button{
    border:1px solid #ddb9bf;
    background:#fff;
    color:var(--red);
    border-radius:8px;
    padding:6px 9px;
    font-size:12px;
    font-weight:800;
    cursor:pointer
}

/* Tooltip widoczny po najechaniu i focusie z klawiatury */
.help{
    position:relative;
    display:inline-grid;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:999px;
    background:#e8eeea;
    color:var(--green);
    font-size:12px;
    font-weight:900;
    cursor:help;
    flex:0 0 auto
}

.help::after{
    content:attr(data-tooltip);
    position:absolute;
    z-index:50;
    left:50%;
    bottom:calc(100% + 10px);
    width:min(330px,80vw);
    padding:10px 12px;
    border-radius:9px;
    background:#17201b;
    color:#fff;
    font-size:12px;
    line-height:1.45;
    font-weight:500;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
    opacity:0;
    visibility:hidden;
    transform:translate(-50%,5px);
    transition:.15s ease;
    pointer-events:none
}

.help::before{
    content:"";
    position:absolute;
    z-index:51;
    left:50%;
    bottom:calc(100% + 4px);
    border:6px solid transparent;
    border-top-color:#17201b;
    opacity:0;
    visibility:hidden;
    transform:translateX(-50%);
    transition:.15s ease
}

.help:hover::after,
.help:hover::before,
.help:focus::after,
.help:focus::before{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0)
}

.help:hover::before,
.help:focus::before{
    transform:translateX(-50%)
}

.legal-popover{
    position:relative
}

.legal-popover summary{
    list-style:none;
    cursor:pointer;
    border:1px solid rgba(255,255,255,.32);
    border-radius:10px;
    padding:10px 14px;
    font-weight:700
}

.legal-popover summary::-webkit-details-marker{
    display:none
}

.legal-popover-content{
    position:absolute;
    z-index:80;
    right:0;
    top:calc(100% + 10px);
    width:min(420px,90vw);
    background:#fff;
    color:var(--text);
    border:1px solid var(--line);
    border-radius:12px;
    padding:18px;
    box-shadow:0 16px 45px rgba(0,0,0,.20)
}

.legal-popover-content strong{
    display:block;
    margin-top:10px
}

.legal-popover-content strong:first-child{
    margin-top:0
}

.legal-popover-content p{
    margin:5px 0 0;
    color:#5d6962;
    font-size:12px;
    line-height:1.55
}

.disclaimer{
    margin-top:18px
}

.disclaimer summary{
    cursor:pointer;
    padding:18px 22px;
    font-weight:900;
    color:var(--green)
}

.disclaimer-content{
    border-top:1px solid var(--line);
    padding:4px 22px 18px
}

.disclaimer-content p{
    margin:14px 0;
    color:#536159;
    line-height:1.58;
    font-size:13px
}

.login-body{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
    background:
        radial-gradient(circle at 20% 20%,rgba(36,92,65,.12),transparent 35%),
        var(--bg)
}

.login-card{
    width:min(420px,100%);
    padding:30px
}

.brand-mark{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--green);
    color:#fff;
    font-weight:900
}

.login-card h1{
    margin:18px 0 5px
}

.login-card form{
    display:grid;
    gap:10px;
    margin-top:22px
}

.login-card label{
    font-size:13px;
    font-weight:800
}

.login-card input{
    width:100%;
    border:1px solid #cfd8d2;
    border-radius:10px;
    padding:12px 13px;
    font:inherit
}

.login-card button{
    border:0;
    border-radius:10px;
    padding:12px 14px;
    background:var(--green);
    color:#fff;
    font:inherit;
    font-weight:800;
    cursor:pointer
}

.login-card button:hover{
    background:var(--green2)
}

code{
    background:rgba(0,0,0,.06);
    border-radius:5px;
    padding:2px 5px
}

@media(max-width:1250px){
    .summary{
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}

@media(max-width:900px){
    .limit-panel{
        grid-template-columns:1fr
    }

    .limit-main{
        border-radius:16px 16px 0 0
    }

    .limit-note{
        border-left:0;
        border-top:1px solid var(--line);
        border-radius:0 0 16px 16px
    }

    .comparison-grid{
        grid-template-columns:1fr
    }

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

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

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

@media(max-width:650px){
    .manual-form{
        grid-template-columns:1fr
    }

    .manual-form .full{
        grid-column:auto
    }

    .topbar{
        align-items:flex-start
    }

    .top-actions{
        align-items:flex-end;
        flex-direction:column
    }
}

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

    .topbar{
        padding:20px
    }

    .wrap{
        width:min(100% - 20px,1500px);
        margin-top:14px
    }

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

    .limit-meta{
        flex-direction:column;
        gap:4px
    }

    .period-form{
        align-items:stretch;
        flex-direction:column
    }

    .period-form select,
    .period-form button{
        width:100%
    }
}

/* v0.4 */
.threshold-notice{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
    padding:16px 18px;
    border-radius:14px;
    border:1px solid var(--line);
    box-shadow:var(--shadow)
}
.threshold-notice strong{display:block;margin-bottom:3px}
.threshold-notice p{margin:0;font-size:13px;line-height:1.5}
.notice-info{background:#eef4f7;border-color:#d7e3e8}
.notice-watch{background:#faf5df;border-color:#eadfae}
.notice-warn{background:#fff0df;border-color:#efcfaa}
.notice-danger{background:#f9e6e8;border-color:#e8bcc2}

.settings-panel{margin-bottom:18px}
.settings-panel>summary{
    cursor:pointer;
    padding:18px 22px;
    font-weight:900;
    color:var(--green)
}
.settings-body{border-top:1px solid var(--line);padding:20px 22px 24px}
.settings-form{display:grid;gap:22px}
.settings-group{
    padding:16px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fbfcfb
}
.settings-group h3{margin:0 0 14px;font-size:16px}
.settings-group label{
    display:grid;
    gap:6px;
    max-width:560px;
    margin-bottom:12px;
    font-size:12px;
    font-weight:800;
    color:#47554d
}
.settings-group input[type="number"],
.settings-group input[type="email"],
.settings-group select{
    width:100%;
    border:1px solid #cfd8d2;
    border-radius:9px;
    padding:10px 11px;
    background:#fff;
    font:inherit
}
.threshold-inputs{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px
}
.threshold-inputs label{margin:0}
.checkbox-label{
    display:flex!important;
    grid-template-columns:none!important;
    flex-direction:row;
    align-items:center;
    gap:8px!important
}
.checkbox-label input{width:auto}
.field-help{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.primary-button{
    justify-self:start;
    border:0;
    border-radius:9px;
    padding:11px 16px;
    background:var(--green);
    color:#fff;
    font:inherit;
    font-weight:800;
    cursor:pointer
}
.primary-button:hover{background:var(--green2)}

.shipping-form{display:flex;align-items:center;gap:6px;min-width:128px}
.shipping-cost-input{
    width:92px;
    border:1px solid #cfd8d2;
    border-radius:8px;
    padding:7px 8px;
    font:inherit;
    font-size:13px;
    background:#fff
}
.shipping-form button{
    width:30px;
    height:30px;
    border:0;
    border-radius:8px;
    background:var(--green);
    color:#fff;
    font-weight:900;
    cursor:pointer
}
.shipping-form button:hover{background:var(--green2)}

@media(max-width:900px){
    .threshold-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
    .threshold-inputs{grid-template-columns:1fr}
    .threshold-notice{flex-direction:column}
}