*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:#06111d;
    color:#edf5ff;
}

a{
    text-decoration:none;
    color:inherit;
}

.panel-page{
    min-height:100vh;
    background:
        radial-gradient(circle at 12% 8%,rgba(255,193,7,.08),transparent 24%),
        radial-gradient(circle at 88% 8%,rgba(33,111,255,.16),transparent 28%),
        linear-gradient(180deg,#06111d,#081827 55%,#06111d);
}

.panel-shell{
    display:grid;
    grid-template-columns:270px minmax(0,1fr);
    min-height:100vh;
}

/* SIDEBAR */

.panel-sidebar{
    position:sticky;
    top:0;
    height:100vh;
    padding:18px 14px;
    border-right:1px solid rgba(255,255,255,.08);
    background:rgba(2,10,20,.76);
    backdrop-filter:blur(16px);
    overflow-y:auto;
}

.panel-logo{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin:4px 4px 24px;
    padding:8px 4px;
}

.panel-logo-img{
    display:block;
    width:100%;
    max-width:215px;
    height:auto;
    object-fit:contain;
}

.owner-mini{
    padding:14px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    background:rgba(255,255,255,.035);
    margin-bottom:16px;
}

.owner-mini b,
.owner-mini small{
    display:block;
}

.owner-mini small{
    color:#9aa9bd;
    margin-top:4px;
}

.panel-sidebar nav{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.panel-sidebar nav a{
    padding:12px 13px;
    border-radius:13px;
    color:#b8c5d6;
    font-weight:750;
}

.panel-sidebar nav a:hover,
.panel-sidebar nav a.active{
    background:linear-gradient(90deg,rgba(16,102,255,.38),rgba(16,102,255,.12));
    color:#fff;
}

.panel-sidebar nav a.logout{
    color:#ff6f6f;
    margin-top:10px;
}

/* MAIN */

.panel-main{
    padding:20px 22px 50px;
    max-width:1220px;
    width:100%;
    margin:0 auto;
}

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

.panel-topbar h1{
    font-size:28px;
    margin:0 0 3px;
}

.panel-topbar p{
    margin:0;
    color:#97a8bd;
}

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

.bell,
.avatar{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:16px;
    background:rgba(255,255,255,.04);
}

.avatar{
    background:#115ce7;
    font-weight:900;
}

/* CARDS */

.hero-card,
.card,
.stat,
.pricing article,
.empty{
    border:1px solid rgba(255,255,255,.09);
    border-radius:22px;
    background:linear-gradient(180deg,rgba(8,25,45,.9),rgba(4,14,27,.94));
    box-shadow:0 18px 40px rgba(0,0,0,.22);
}

.hero-card{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:24px;
    margin-bottom:16px;
}

.hero-card small{
    color:#42d56b;
    font-weight:900;
}

.hero-card h2{
    font-size:28px;
    margin:8px 0;
}

.hero-card p{
    color:#aebbd0;
}

.hero-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.card{
    padding:20px;
    margin-bottom:16px;
}

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

.card h2{
    margin:0;
}

.card small,
.muted,
.card-head small{
    color:#97a8bd;
}

/* BUTTONS */

.btn,
.primary,
.login-card button,
.pricing button,
.panel-page form button,
.panel-page .card button,
.panel-page button[type="submit"]{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    border:0;
    border-radius:999px;
    background:linear-gradient(135deg,#146bff,#003ec6);
    color:#fff;
    padding:12px 18px;
    font-weight:900;
    font-size:15px;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(20,107,255,.18);
    transition:transform .16s ease,filter .16s ease,background .16s ease;
}

.btn:hover,
.primary:hover,
.login-card button:hover,
.pricing button:hover,
.panel-page form button:hover,
.panel-page .card button:hover,
.panel-page button[type="submit"]:hover{
    transform:translateY(-1px);
    filter:brightness(1.05);
}

.btn.ghost{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    box-shadow:none;
}

/* FORMS GLOBAL FIX */

.panel-page input,
.panel-page select,
.panel-page textarea{
    width:100%;
    min-height:48px;
    padding:13px 15px;
    border-radius:15px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(3,16,31,.72);
    color:#eef4ff;
    font-size:15px;
    font-weight:600;
    outline:none;
    box-shadow:none;
    transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}

.panel-page textarea{
    min-height:130px;
    resize:vertical;
    line-height:1.5;
    font-family:inherit;
}

.panel-page input::placeholder,
.panel-page textarea::placeholder{
    color:rgba(238,244,255,.42);
}

.panel-page input:focus,
.panel-page select:focus,
.panel-page textarea:focus{
    border-color:rgba(255,193,7,.55);
    background:rgba(5,22,42,.94);
    box-shadow:0 0 0 4px rgba(255,193,7,.08);
}

.panel-page label{
    display:block;
    margin:0 0 7px;
    color:#eef4ff;
    font-size:14px;
    font-weight:800;
}

.form-grid,
.station-switch,
.prices-form,
.settings-form{
    display:grid;
    gap:14px;
}

.form-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:4px;
}

/* STATS */

.score{
    min-width:150px;
    display:grid;
    place-items:center;
    text-align:center;
}

.score span{
    display:grid;
    place-items:center;
    width:82px;
    height:82px;
    border-radius:50%;
    border:8px solid #19bd51;
    font-weight:900;
}

.stat-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-bottom:16px;
}

.stat{
    padding:20px;
}

.stat b{
    font-size:28px;
    display:block;
}

.stat span{
    display:block;
    color:#a8b7c9;
    margin-top:4px;
}

.stat em{
    display:block;
    color:#28d762;
    margin-top:12px;
    font-style:normal;
    font-weight:900;
}

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

/* PRICES */

.price-list{
    display:flex;
    flex-direction:column;
}

.price-row,
.fuel-edit{
    display:grid;
    grid-template-columns:74px 1fr 110px 74px;
    gap:12px;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.fuel-edit{
    grid-template-columns:1fr 180px;
}

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    height:32px;
    padding:0 8px;
    border-radius:9px;
    background:#1268ff;
    color:white;
    font-weight:900;
}

.price-row strong{
    font-size:18px;
}

.price-row a{
    color:#5b98ff;
    font-weight:900;
}

.fuel-edit small{
    display:block;
    color:#98a9bd;
    margin-top:5px;
}

/* QUICK LINKS */

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

.quick a{
    padding:16px;
    border-radius:17px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    display:flex;
    flex-direction:column;
    gap:5px;
}

.quick a:first-letter{
    font-size:28px;
}

.quick span{
    color:#9aa9bd;
    font-size:13px;
}

/* ALERTS */

.alert{
    padding:14px 16px;
    border-radius:14px;
    margin-bottom:14px;
    border:1px solid rgba(255,255,255,.1);
}

.alert.success{
    background:rgba(25,190,81,.12);
    color:#73ff9d;
}

.alert.error{
    background:rgba(255,70,70,.12);
    color:#ff9696;
}

/* STATIONS */

.station-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.station-list article{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:14px;
    border-radius:15px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.06);
}

.station-list span{
    display:block;
    color:#9aa9bd;
}

/* PRICING / PROMOS */

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

.pricing article{
    padding:26px;
}

.pricing article.hot{
    border-color:rgba(255,193,7,.45);
}

.pricing h2{
    font-size:34px;
    margin:8px 0;
}

.pricing h2 span{
    font-size:15px;
    color:#aab8ca;
}

.pricing small{
    color:#ffc107;
    font-weight:900;
}

.pricing form{
    display:grid;
    gap:12px;
    margin-top:18px;
}

/* TABLES */

.table-wrap{
    overflow-x:auto;
}

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

.panel-page th,
.panel-page td{
    padding:12px;
    border-bottom:1px solid rgba(255,255,255,.07);
    text-align:left;
}

.panel-page th{
    color:#aab8ca;
    font-size:13px;
    font-weight:900;
}

/* MESSAGES */

.messages-list{
    display:grid;
    gap:12px;
}

.message-item{
    padding:14px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.045);
}

.message-item.admin,
.message-item.system{
    border-color:rgba(255,193,7,.24);
    background:rgba(255,193,7,.06);
}

.message-top{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
    color:rgba(255,255,255,.66);
}

.message-item h3{
    margin:0 0 8px;
    font-size:16px;
}

.message-item p{
    margin:0;
    color:rgba(255,255,255,.78);
}

/* LOGIN */

.login-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:20px;
    background:
        radial-gradient(circle at 20% 10%,rgba(255,193,7,.12),transparent 25%),
        radial-gradient(circle at 80% 0,rgba(22,119,255,.18),transparent 28%),
        #06111d;
}

.login-card{
    width:min(440px,100%);
    padding:30px;
    border-radius:28px;
    border:1px solid rgba(255,255,255,.1);
    background:linear-gradient(180deg,rgba(8,25,45,.96),rgba(4,14,27,.98));
    box-shadow:0 22px 60px rgba(0,0,0,.35);
}

.login-logo{
    display:flex;
    justify-content:center;
    margin-bottom:22px;
    font-size:24px;
    font-weight:900;
    text-align:center;
}

.login-logo img{
    display:block;
    width:100%;
    max-width:230px;
    height:auto;
    object-fit:contain;
}

.login-logo span{
    color:#1677ff;
}

.login-card h1{
    margin:0 0 8px;
}

.login-card p,
.login-card small{
    color:#9aa9bd;
}

.login-card form{
    display:flex;
    flex-direction:column;
    gap:11px;
    margin-top:20px;
}

/* MOBILE */

@media(max-width:900px){
    .panel-logo{
        justify-content:center;
        margin-bottom:16px;
    }

    .panel-logo-img{
        max-width:230px;
    }

    .panel-shell{
        display:block;
    }

    .panel-sidebar{
        position:relative;
        height:auto;
    }

    .panel-sidebar nav{
        display:grid;
        grid-template-columns:repeat(2,1fr);
    }

    .panel-main{
        padding:16px;
    }

    .stat-grid,
    .grid-2,
    .pricing{
        grid-template-columns:1fr;
    }

    .hero-card{
        flex-direction:column;
    }

    .price-row{
        grid-template-columns:58px 1fr 96px;
    }

    .price-row a{
        display:none;
    }

    .fuel-edit{
        grid-template-columns:1fr;
    }

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

    .panel-topbar h1{
        font-size:24px;
    }

    .card-head{
        display:block;
    }

    .panel-page form button,
    .panel-page .card button,
    .panel-page button[type="submit"]{
        width:100%;
    }
}

@media(max-width:560px){
    .panel-sidebar nav{
        grid-template-columns:1fr;
    }

    .panel-topbar{
        align-items:flex-start;
    }

    .bell{
        display:none;
    }

    .card{
        padding:16px;
        border-radius:18px;
    }

    .panel-page th,
    .panel-page td{
        padding:10px;
    }
}

/* =====================================================
OWNER PANEL — MESSAGES
===================================================== */

.messages-list{
    display:grid;
    gap:14px;
}

.messages-list .message-item{
    position:relative;
    display:block;
    padding:16px 18px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.09);
    background:
        radial-gradient(circle at 10% 0%, rgba(255,193,7,.045), transparent 26%),
        linear-gradient(180deg, rgba(8,25,45,.86), rgba(4,14,27,.96));
    box-shadow:0 14px 32px rgba(0,0,0,.18);
    transition:.18s ease;
    color:inherit;
    text-decoration:none;
}

.messages-list .message-item:hover{
    transform:translateY(-2px);
    border-color:rgba(255,193,7,.28);
    box-shadow:0 18px 40px rgba(0,0,0,.26);
}

.messages-list .message-item.admin,
.messages-list .message-item.system{
    border-color:rgba(255,193,7,.22);
    background:
        radial-gradient(circle at 10% 0%, rgba(255,193,7,.09), transparent 28%),
        linear-gradient(180deg, rgba(15,32,48,.94), rgba(6,16,30,.98));
}

.message-top{
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:flex-start;
    margin-bottom:10px;
}

.message-top strong{
    color:#fff;
    font-size:15px;
    font-weight:900;
}

.message-top span{
    color:rgba(238,244,255,.48);
    font-size:12px;
    white-space:nowrap;
}

.message-item p{
    margin:0;
    color:rgba(238,244,255,.72);
    line-height:1.55;
}

.message-item::after{
    content:"Czytaj →";
    display:inline-flex;
    margin-top:12px;
    color:#ffc107;
    font-weight:900;
    font-size:13px;
}

.message-item.admin::before,
.message-item.system::before,
.message-item.owner::before{
    content:"";
    position:absolute;
    left:0;
    top:18px;
    bottom:18px;
    width:4px;
    border-radius:999px;
}

.message-item.admin::before,
.message-item.system::before{
    background:#ffc107;
}

.message-item.owner::before{
    background:#1677ff;
}

.message-detail-card,
.message-reply-card{
    padding:22px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.09);
    background:
        radial-gradient(circle at 12% 0%, rgba(255,193,7,.08), transparent 28%),
        linear-gradient(180deg, rgba(8,25,45,.94), rgba(4,14,27,.98));
    box-shadow:0 18px 42px rgba(0,0,0,.24);
}

.message-detail-meta{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    color:rgba(238,244,255,.56);
    font-size:13px;
}

.message-detail-body{
    margin-top:18px;
    padding:18px;
    border-radius:18px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
    color:rgba(238,244,255,.84);
    line-height:1.65;
    white-space:pre-wrap;
}

.message-reply-card{
    border-color:rgba(255,193,7,.16);
}

.message-reply-card textarea{
    min-height:170px;
}

/* =====================================================
SHARED OWNER COMPONENTS
===================================================== */

.panel-note{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 14px;
}

.panel-note span{
    display:inline-flex;
    align-items:center;
    padding:8px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.82);
    font-size:13px;
    font-weight:700;
}

.empty-state{
    padding:22px;
    border-radius:20px;
    background:rgba(255,255,255,.045);
    border:1px dashed rgba(255,255,255,.14);
}

.empty-state b{
    display:block;
    color:#fff;
    margin-bottom:6px;
}

.empty-state p{
    margin:0;
    color:rgba(255,255,255,.66);
}

.owner-station-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:16px 0;
    padding:16px;
    border-radius:22px;
    background:
        radial-gradient(circle at 0% 0%, rgba(255,193,7,.09), transparent 30%),
        rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
}

.owner-station-summary strong{
    display:block;
    color:#fff;
    font-size:18px;
}

.owner-station-summary span{
    display:block;
    margin-top:3px;
    color:rgba(255,255,255,.68);
    font-size:13px;
}

.owner-station-actions,
.owner-station-card-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.owner-station-actions a,
.owner-station-card-actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 12px;
    border-radius:999px;
    text-decoration:none;
    font-weight:800;
    font-size:13px;
    color:#fff;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.10);
}

.owner-station-card-actions .primary-link,
.owner-station-actions a:first-child{
    background:linear-gradient(135deg,#ffc107,#ff9f1c);
    color:#15100a;
    border-color:rgba(255,193,7,.45);
}

/* =====================================================
PRICES
===================================================== */

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

.owner-fuel-edit{
    position:relative;
    padding:16px;
    border-radius:22px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
}

.owner-fuel-edit.fresh{
    border-color:rgba(55,214,122,.25);
}

.owner-fuel-edit.warning,
.owner-fuel-edit.old{
    border-color:rgba(255,193,7,.28);
}

.owner-fuel-edit.missing{
    border-color:rgba(255,255,255,.10);
}

.owner-fuel-top{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:14px;
}

.fuel-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:46px;
    height:34px;
    padding:0 10px;
    border-radius:12px;
    background:rgba(255,193,7,.14);
    color:#ffd45a;
    border:1px solid rgba(255,193,7,.22);
    font-weight:900;
    font-size:13px;
}

.owner-price-input{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:7px;
    border-radius:16px;
    background:rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.10);
    padding:0 12px;
}

.owner-price-input input{
    width:100%;
    min-height:48px;
    border:0;
    outline:0;
    background:transparent;
    color:#fff;
    font-size:22px;
    font-weight:900;
}

.owner-fuel-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-top:12px;
    color:rgba(255,255,255,.58);
    font-size:12px;
    font-weight:700;
}

.status-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:rgba(255,255,255,.3);
}

.status-dot.fresh{
    background:#37d67a;
}

.status-dot.warning,
.status-dot.old{
    background:#ffc107;
}

.status-dot.missing{
    background:rgba(255,255,255,.32);
}

.owner-save-bar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
    margin-top:18px;
    padding:14px;
    border-radius:22px;
    background:rgba(5,16,31,.94);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 16px 40px rgba(0,0,0,.35);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

.owner-save-bar b{
    display:block;
    color:#fff;
    font-size:14px;
    font-weight:800;
    line-height:1.2;
}

.owner-save-bar small{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.62);
    font-size:12px;
    line-height:1.45;
}

.owner-save-bar button.primary{
    background:linear-gradient(180deg,#ffd54a 0%, #ffbf00 100%);
    color:#111827;
    border:1px solid rgba(255,213,74,.35);
    box-shadow:0 10px 24px rgba(255,193,7,.22);
}

.owner-save-bar button.primary:hover{
    background:linear-gradient(180deg,#ffe073 0%, #ffc928 100%);
    color:#111827;
    box-shadow:0 14px 28px rgba(255,193,7,.28);
    transform:translateY(-1px);
}

/* =====================================================
STATIONS
===================================================== */

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

.owner-station-card{
    padding:16px;
    border-radius:24px;
    background:
        radial-gradient(circle at 12% 0%, rgba(255,193,7,.07), transparent 28%),
        rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
}

.owner-station-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.owner-brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.owner-brand img{
    width:42px;
    height:42px;
    object-fit:contain;
    border-radius:14px;
    background:#fff;
    padding:6px;
}

.owner-brand b{
    display:block;
    color:#fff;
    font-size:16px;
}

.owner-brand span{
    display:block;
    margin-top:3px;
    color:rgba(255,255,255,.62);
    font-size:12px;
}

.owner-station-status{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
    background:rgba(255,255,255,.07);
    color:rgba(255,255,255,.78);
}

.owner-station-status.fresh{
    background:rgba(55,214,122,.12);
    color:#6ff0a4;
}

.owner-station-status.warning{
    background:rgba(255,193,7,.13);
    color:#ffd45a;
}

.owner-station-status.missing{
    background:rgba(255,95,95,.12);
    color:#ff9a9a;
}

.owner-prices-preview{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.owner-price-pill{
    min-height:72px;
    padding:10px;
    border-radius:16px;
    background:rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.08);
}

.owner-price-pill span{
    display:block;
    color:rgba(255,255,255,.54);
    font-size:11px;
    font-weight:900;
}

.owner-price-pill b{
    display:block;
    margin-top:3px;
    color:#fff;
    font-size:16px;
    line-height:1.1;
}

.owner-price-pill small{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.48);
    font-size:10px;
}

.owner-price-pill.fresh{
    border-color:rgba(55,214,122,.2);
}

.owner-price-pill.warning,
.owner-price-pill.old{
    border-color:rgba(255,193,7,.24);
}

.owner-price-pill.missing{
    opacity:.72;
}

.owner-station-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:14px 0;
    color:rgba(255,255,255,.58);
    font-size:12px;
}

/* =====================================================
STATION EDIT
===================================================== */

.station-edit-card{
    overflow:visible;
}

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

.station-edit-section{
    padding:18px;
    border-radius:24px;
    background:
        radial-gradient(circle at 0 0, rgba(255,193,7,.06), transparent 30%),
        rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
}

.station-edit-section-wide{
    grid-column:1 / -1;
}

.station-edit-section h3{
    margin:0 0 14px;
    color:#fff;
    font-size:18px;
}

.station-edit-section label{
    display:block;
    margin-bottom:12px;
    color:rgba(255,255,255,.72);
    font-size:13px;
    font-weight:800;
}

.station-edit-section input[type="text"],
.station-edit-section input[type="email"],
.station-edit-section input[type="url"],
.station-edit-section input[type="time"],
.station-edit-section input[type="number"],
.station-edit-section input[type="datetime-local"],
.station-edit-section input:not([type]),
.station-edit-section textarea,
.station-edit-section select{
    width:100%;
    margin-top:7px;
    min-height:46px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.22);
    color:#fff;
    padding:0 13px;
    outline:none;
    font-weight:700;
}

.station-edit-section textarea{
    padding:13px;
    resize:vertical;
    line-height:1.5;
}

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

.switch-card{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:48px;
    margin:0 !important;
    padding:12px;
    border-radius:16px;
    background:rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.08);
    cursor:pointer;
}

.switch-card input{
    width:18px;
    height:18px;
    accent-color:#ffc107;
}

.switch-card span{
    color:#fff;
    font-weight:900;
}

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

.hours-row{
    display:grid;
    grid-template-columns:150px 120px 20px 120px 1fr;
    align-items:center;
    gap:10px;
    padding:10px;
    border-radius:16px;
    background:rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.08);
}

.hours-row strong{
    color:#fff;
}

.hours-row span{
    text-align:center;
    color:rgba(255,255,255,.55);
    font-weight:900;
}

.hours-row input[type="time"]{
    margin:0;
}

.closed-check{
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin:0 !important;
    white-space:nowrap;
}

.closed-check input{
    width:18px;
    height:18px;
    accent-color:#ffc107;
}

/* =====================================================
PROMOTIONS
===================================================== */

.promotions-page{
    overflow:visible;
}

.promo-layout,
.promo-layout-single{
    display:block !important;
    margin-top:18px;
}

.promo-list-wrap,
.promo-form{
    padding:18px;
    border-radius:24px;
    background:
        radial-gradient(circle at 0 0, rgba(255,193,7,.08), transparent 34%),
        rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
}

.promo-list-wrap{
    margin-bottom:18px;
}

.promo-form{
    position:relative !important;
    top:auto !important;
    max-width:100% !important;
}

.promo-manager-head,
.promo-form-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:16px;
}

.promo-manager-head h3,
.promo-form-head h3{
    margin:0 0 4px;
    color:#fff;
    font-size:18px;
}

.promo-manager-head p,
.promo-form-head p{
    margin:0;
    color:rgba(255,255,255,.58);
    font-size:13px;
}

.promo-add-btn,
.promo-form-head a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 14px;
    border-radius:999px;
    background:linear-gradient(135deg,#ffc107,#ff9f1c);
    color:#16100a;
    text-decoration:none;
    font-weight:900;
    white-space:nowrap;
}

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

.promo-card{
    padding:16px;
    border-radius:22px;
    background:rgba(0,0,0,.20);
    border:1px solid rgba(255,255,255,.08);
}

.promo-card.active{
    border-color:rgba(55,214,122,.22);
}

.promo-card.inactive{
    opacity:.72;
}

.promo-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.promo-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:26px;
    padding:0 9px;
    margin-bottom:8px;
    border-radius:999px;
    background:rgba(255,193,7,.14);
    color:#ffd45a;
    border:1px solid rgba(255,193,7,.22);
    font-size:11px;
    font-weight:900;
}

.promo-card h4{
    margin:0 0 6px;
    color:#fff;
    font-size:17px;
}

.promo-card p{
    margin:0;
    color:rgba(255,255,255,.66);
    font-size:13px;
    line-height:1.45;
}

.promo-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:0 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
}

.promo-status.active{
    background:rgba(55,214,122,.13);
    color:#6ff0a4;
}

.promo-status.inactive{
    background:rgba(255,255,255,.07);
    color:rgba(255,255,255,.62);
}

.promo-meta,
.promo-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}

.promo-meta span{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:0 9px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.58);
    font-size:11px;
    font-weight:800;
}

.promo-meta b{
    color:#fff;
    margin-left:4px;
}

.promo-actions a,
.promo-actions button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.07);
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
}

.promo-actions button.danger{
    background:rgba(255,80,80,.12);
    color:#ff9b9b;
    border-color:rgba(255,80,80,.20);
}

.promo-form label{
    display:block;
    margin-bottom:12px;
    color:rgba(255,255,255,.72);
    font-size:13px;
    font-weight:800;
}

.promo-form input,
.promo-form textarea{
    width:100%;
    margin-top:7px;
    min-height:46px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.22);
    color:#fff;
    padding:0 13px;
    outline:none;
    font-weight:700;
}

.promo-form textarea{
    padding:13px;
    resize:vertical;
    line-height:1.5;
}

.promo-form-grid,
.promo-form-full .promo-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.promo-form-wide{
    grid-column:1 / -1;
}

.promo-active-inline{
    display:flex !important;
    align-items:center;
    gap:9px;
    min-height:46px;
    margin-top:21px;
    padding:0 13px;
    border-radius:16px;
    background:rgba(255,193,7,.11);
    border:1px solid rgba(255,193,7,.20);
    color:#ffd45a !important;
}

.promo-active-inline input{
    width:18px;
    height:18px;
    accent-color:#ffc107;
}

.promo-form button.primary{
    margin-top:12px;
}

/* =====================================================
STATS
===================================================== */

.stats-hero-grid{
    display:grid;
    grid-template-columns:1.4fr repeat(3,1fr);
    gap:14px;
    margin-bottom:16px;
}

.stats-hero-card{
    padding:18px;
    border-radius:24px;
    background:
        radial-gradient(circle at 0 0, rgba(255,193,7,.08), transparent 34%),
        rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
}

.stats-hero-card.main{
    background:
        radial-gradient(circle at 0 0, rgba(255,193,7,.16), transparent 38%),
        linear-gradient(135deg, rgba(255,193,7,.12), rgba(255,255,255,.045));
    border-color:rgba(255,193,7,.20);
}

.stats-hero-card span,
.stats-mini-list span,
.stats-quality span{
    display:block;
    color:rgba(255,255,255,.58);
    font-size:12px;
    font-weight:800;
}

.stats-hero-card b{
    display:block;
    margin-top:8px;
    color:#fff;
    font-size:34px;
    line-height:1;
}

.stats-hero-card em{
    display:block;
    margin-top:8px;
    color:rgba(255,255,255,.45);
    font-size:12px;
    font-style:normal;
}

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

.stats-mini-list,
.stats-quality{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

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

.stats-mini-list div,
.stats-quality div{
    padding:14px;
    border-radius:18px;
    background:rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.08);
}

.stats-mini-list b,
.stats-quality b{
    display:block;
    margin-top:6px;
    color:#fff;
    font-size:24px;
}

.stats-quality .good{
    border-color:rgba(55,214,122,.22);
}

.stats-quality .warn{
    border-color:rgba(255,193,7,.25);
}

.stats-quality .bad{
    border-color:rgba(255,90,90,.22);
}

.stats-muted{
    margin:12px 0 0;
    color:rgba(255,255,255,.52);
    font-size:13px;
}

.owner-stats-table-wrap{
    width:100%;
    overflow-x:auto;
}

.owner-stats-table{
    width:100%;
    border-collapse:collapse;
    min-width:860px;
}

.owner-stats-table th,
.owner-stats-table td{
    padding:12px 10px;
    border-bottom:1px solid rgba(255,255,255,.08);
    text-align:left;
    vertical-align:middle;
}

.owner-stats-table th{
    color:rgba(255,255,255,.56);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.owner-stats-table td{
    color:#fff;
    font-size:14px;
}

.owner-stats-table small{
    color:rgba(255,255,255,.54);
}

/* =====================================================
DASHBOARD
===================================================== */

.dashboard-switch{
    margin-bottom:14px;
}

.dashboard-hero-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:22px;
    margin-bottom:16px;
    border-radius:28px;
    background:
        radial-gradient(circle at 0 0, rgba(255,193,7,.16), transparent 36%),
        radial-gradient(circle at 100% 0, rgba(80,145,255,.12), transparent 30%),
        linear-gradient(135deg, rgba(255,193,7,.10), rgba(255,255,255,.045));
    border:1px solid rgba(255,193,7,.18);
    box-shadow:0 18px 50px rgba(0,0,0,.24);
}

.dashboard-hero-card small{
    display:block;
    color:rgba(255,255,255,.58);
    font-weight:900;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.dashboard-hero-card h2{
    margin:7px 0 6px;
    color:#fff;
    font-size:28px;
    line-height:1.15;
}

.dashboard-hero-card p{
    margin:0;
    color:rgba(255,255,255,.66);
}

.dashboard-score{
    flex:0 0 auto;
    width:128px;
    height:128px;
    border-radius:36px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.20);
    border:1px solid rgba(255,255,255,.10);
}

.dashboard-score span{
    color:#fff;
    font-size:34px;
    font-weight:950;
    line-height:1;
}

.dashboard-score small{
    margin-top:7px;
    text-align:center;
    color:rgba(255,255,255,.56);
    text-transform:none;
    letter-spacing:0;
}

.dashboard-stat-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    margin-bottom:14px;
}

.dashboard-stat{
    padding:16px;
    border-radius:22px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
}

.dashboard-stat b{
    display:block;
    color:#fff;
    font-size:27px;
    line-height:1;
}

.dashboard-stat span{
    display:block;
    margin-top:8px;
    color:rgba(255,255,255,.70);
    font-weight:900;
    font-size:13px;
}

.dashboard-stat em{
    display:block;
    margin-top:5px;
    color:rgba(255,255,255,.44);
    font-size:12px;
    font-style:normal;
}

.dashboard-quality-row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-bottom:16px;
}

.quality-pill{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:14px 16px;
    border-radius:20px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
}

.quality-pill b{
    color:#fff;
    font-size:26px;
}

.quality-pill span{
    color:rgba(255,255,255,.66);
    font-weight:900;
    font-size:13px;
}

.quality-pill.good{
    border-color:rgba(55,214,122,.22);
}

.quality-pill.warn{
    border-color:rgba(255,193,7,.25);
}

.quality-pill.bad{
    border-color:rgba(255,90,90,.22);
}

.dashboard-price-row{
    grid-template-columns:auto minmax(0,1fr) auto auto auto;
}

.dashboard-price-row small{
    color:rgba(255,255,255,.48);
    font-size:12px;
    white-space:nowrap;
}

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

/* =====================================================
RESPONSIVE EXTENSIONS
===================================================== */

@media(max-width:1100px){
    .stats-hero-grid,
    .dashboard-stat-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .stats-hero-card.main{
        grid-column:1 / -1;
    }

    .stats-two-cols,
    .promo-layout{
        grid-template-columns:1fr;
    }

    .promo-form{
        position:relative;
        top:auto;
    }
}

@media(max-width:900px){
    .owner-fuel-grid,
    .owner-stations-grid,
    .station-edit-grid,
    .promo-list,
    .promo-form-grid{
        grid-template-columns:1fr;
    }

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

    .owner-station-summary,
    .owner-save-bar,
    .owner-station-card-head{
        align-items:stretch;
        flex-direction:column;
    }

    .owner-station-actions,
    .owner-station-card-actions{
        width:100%;
    }

    .owner-station-actions a,
    .owner-station-card-actions a{
        flex:1 1 auto;
    }

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

    .hours-row{
        grid-template-columns:1fr 1fr 20px 1fr;
    }

    .hours-row strong,
    .closed-check{
        grid-column:1 / -1;
    }

    .closed-check{
        justify-content:flex-start;
    }
}

@media(max-width:760px){
    .promo-manager-head,
    .promo-form-head,
    .promo-card-top,
    .dashboard-hero-card{
        flex-direction:column;
        align-items:stretch;
    }

    .promo-add-btn,
    .promo-form-head a{
        width:100%;
    }

    .promo-actions a,
    .promo-actions button,
    .promo-actions form{
        flex:1 1 auto;
    }

    .promo-actions button{
        width:100%;
    }

    .stats-hero-grid,
    .stats-mini-list,
    .stats-quality,
    .dashboard-stat-grid,
    .dashboard-quality-row,
    .dashboard-quick,
    .promo-form-full .promo-form-grid{
        grid-template-columns:1fr;
    }

    .dashboard-score{
        width:100%;
        height:auto;
        min-height:96px;
        border-radius:24px;
    }

    .dashboard-price-row{
        grid-template-columns:auto minmax(0,1fr) auto;
    }

    .dashboard-price-row small{
        grid-column:2 / -1;
    }

    .dashboard-price-row a{
        grid-column:1 / -1;
        justify-content:center;
    }
}

@media(max-width:700px){
    .message-top{
        display:block;
    }

    .message-top span{
        display:block;
        margin-top:4px;
    }
}

.dashboard-info-card{
    margin-bottom:16px;
    border-color:rgba(255,193,7,.14);
}

.dashboard-info-card h2{
    margin-bottom:8px;
    font-size:18px;
}

.dashboard-info-card p{
    margin:0;
    color:rgba(255,255,255,.66);
    line-height:1.55;
}

/* =====================================================
SETTINGS
===================================================== */

.settings-grid-simple{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin-bottom:16px;
}

.settings-tile{
    text-align:left;
}

.settings-icon{
    width:58px;
    height:58px;
    margin-bottom:14px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:linear-gradient(135deg,#ffc107,#ff9f1c);
    color:#16100a;
    font-size:26px;
    box-shadow:0 14px 26px rgba(255,193,7,.16);
}

.settings-tile h2{
    margin:0 0 8px;
    color:#fff;
    font-size:20px;
}

.settings-tile p,
.settings-note-card p{
    margin:0;
    color:rgba(255,255,255,.66);
    line-height:1.6;
}

.settings-note-card h2{
    margin-bottom:8px;
}

@media(max-width:900px){
    .settings-grid-simple{
        grid-template-columns:1fr;
    }
}

/* LOGIN INPUT FIX */

.login-card label{
    display:block;
    margin-top:4px;
    margin-bottom:7px;
    color:#eef4ff;
    font-size:14px;
    font-weight:800;
}

.login-card input{
    width:100%;
    min-height:54px;
    padding:15px 16px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.13);
    background:rgba(3,16,31,.82);
    color:#eef4ff;
    font-size:16px;
    font-weight:700;
    outline:none;
}

.login-card input:focus{
    border-color:rgba(255,193,7,.65);
    box-shadow:0 0 0 4px rgba(255,193,7,.10);
}

.login-card button{
    min-height:54px;
    margin-top:10px;
    font-size:16px;
}

.login-card h1{
    text-align:center;
    font-size:26px;
}

.login-card p,
.login-card small{
    text-align:center;
    display:block;
}

.hours-quick-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:14px 0;
}

.hours-quick-btn{
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    color:#eef4ff;
    border-radius:14px;
    padding:10px 13px;
    font-weight:800;
    cursor:pointer;
}

.hours-quick-btn:hover{
    background:rgba(255,193,7,.14);
    border-color:rgba(255,193,7,.35);
}

.hours-row.is-24h{
    border-color:rgba(34,197,94,.35);
    background:rgba(34,197,94,.07);
}

.hours-row.is-closed{
    opacity:.68;
    background:rgba(255,255,255,.035);
}

.hours-row input[readonly]{
    opacity:.65;
    cursor:not-allowed;
}

/* =====================================================
SETTINGS PAGE — ACCOUNT + PASSWORD
===================================================== */

.settings-form{
    margin-top:18px;
}

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

.settings-form label{
    display:block;
    color:#eaf2ff;
    font-size:13px;
    font-weight:800;
}

.settings-form input{
    width:100%;
    height:52px;
    margin-top:8px;
    padding:0 16px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.06);
    color:#fff;
    outline:none;
}

.settings-form input:focus{
    border-color:rgba(255,193,7,.55);
    box-shadow:0 0 0 4px rgba(255,193,7,.12);
}

.settings-form input:disabled{
    opacity:.75;
    cursor:not-allowed;
    background:rgba(255,255,255,.035);
}

.settings-form small{
    display:block;
    margin-top:7px;
    color:rgba(234,242,255,.52);
    font-size:12px;
    line-height:1.45;
}

.settings-note-card .card-head{
    margin-bottom:10px;
}

.settings-note-card .owner-save-bar{
    margin-top:22px;
    justify-content:flex-end;
}

@media(max-width:760px){
    .settings-form-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .settings-form input{
        height:50px;
        border-radius:14px;
    }

    .settings-note-card .owner-save-bar .primary{
        width:100%;
    }
}

/* =====================================================
OWNER PANEL — MOBILE / PWA FINAL TOUCH
===================================================== */

@media(max-width:900px){

    html,
    body,
    .panel-page{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    .panel-main{
        width:100%;
        max-width:100%;
        padding:14px 12px 34px;
    }

    .panel-sidebar{
        padding:14px 12px;
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.08);
        overflow:visible;
    }

    .panel-logo{
        margin:0 0 12px;
        justify-content:center;
    }

    .panel-logo-img{
        max-width:210px;
    }

    .owner-mini{
        margin-bottom:12px;
        padding:12px;
        border-radius:18px;
    }

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

    .panel-sidebar nav a{
        min-height:48px;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        padding:12px 10px;
        border-radius:16px;
        font-size:13px;
        line-height:1.2;
        background:rgba(255,255,255,.04);
        border:1px solid rgba(255,255,255,.06);
    }

    .panel-sidebar nav a.active{
        background:linear-gradient(135deg,#ffc107,#ff9f1c);
        color:#15100a;
        border-color:rgba(255,193,7,.35);
    }

    .panel-topbar{
        margin-top:14px;
        margin-bottom:14px;
        align-items:flex-start;
    }

    .panel-topbar h1{
        font-size:24px;
        line-height:1.15;
    }

    .panel-topbar p{
        font-size:13px;
        line-height:1.4;
    }

    .card,
    .settings-tile,
    .settings-note-card{
        padding:16px;
        border-radius:20px;
        margin-bottom:14px;
    }

    .card-head{
        gap:8px;
        margin-bottom:14px;
    }

    .card-head h2,
    .settings-note-card h2{
        font-size:20px;
        line-height:1.2;
    }

    .card-head small{
        display:block;
        margin-top:5px;
        line-height:1.45;
    }

    .settings-grid-simple{
        gap:12px;
        margin-bottom:14px;
    }

    .settings-icon{
        width:50px;
        height:50px;
        border-radius:16px;
        font-size:23px;
        margin-bottom:12px;
    }

    .settings-tile h2{
        font-size:18px;
    }

    .settings-tile p,
    .settings-note-card p{
        font-size:14px;
        line-height:1.55;
    }

    .settings-form{
        margin-top:14px;
    }

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

    .settings-form label{
        font-size:13px;
        line-height:1.25;
    }

    .settings-form input,
    .panel-page input,
    .panel-page select,
    .panel-page textarea{
        min-height:54px;
        height:auto;
        padding:14px 15px;
        border-radius:16px;
        font-size:16px;
    }

    .settings-form input{
        height:54px;
    }

    .settings-form small{
        font-size:12px;
        line-height:1.45;
    }

    .owner-save-bar{
        padding:12px;
        border-radius:18px;
        margin-top:16px;
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }

    .owner-save-bar button,
    .owner-save-bar .primary,
    .owner-save-bar button.primary{
        width:100%;
        min-height:54px;
        font-size:16px;
        border-radius:16px;
    }

    .panel-page form button,
    .panel-page .card button,
    .panel-page button[type="submit"],
    .btn,
    .primary{
        min-height:54px;
        border-radius:16px;
        font-size:16px;
        width:100%;
    }

    .table-wrap{
        margin-left:-4px;
        margin-right:-4px;
        padding-bottom:4px;
    }

    .panel-page table{
        min-width:680px;
    }
}

@media(max-width:520px){

    .panel-main{
        padding:12px 10px 30px;
    }

    .panel-sidebar nav{
        grid-template-columns:1fr 1fr;
        gap:7px;
    }

    .panel-sidebar nav a{
        min-height:46px;
        padding:11px 8px;
        font-size:12px;
    }

    .panel-topbar{
        flex-direction:column;
        gap:10px;
    }

    .top-actions{
        width:100%;
        justify-content:flex-end;
    }

    .avatar{
        width:42px;
        height:42px;
        border-radius:14px;
    }

    .card,
    .settings-tile,
    .settings-note-card{
        padding:14px;
        border-radius:18px;
    }

    .settings-form input,
    .panel-page input,
    .panel-page select,
    .panel-page textarea{
        min-height:52px;
        font-size:16px;
        border-radius:15px;
    }

    .panel-note span{
        width:100%;
        border-radius:14px;
        justify-content:flex-start;
        line-height:1.35;
    }
}