:root{
    --green:#139447;--green-dark:#075b31;--green-deep:#062417;--green-soft:#edf9f1;
    --lime:#d9ff72;--soft:#f5faf3;--dark:#07150f;--muted:#6b756f;
    --border:rgba(7,21,15,.09);--shadow:0 24px 70px rgba(7,21,15,.13);
}
*{font-family:'Outfit',sans-serif}
body{margin:0;background:#f6fbf4;color:var(--dark)}
a{text-decoration:none}
.btn-asoko{border:0;background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;border-radius:999px;padding:12px 22px;font-weight:900;box-shadow:0 16px 34px rgba(19,148,71,.24)}
.btn-asoko:hover{color:#fff;transform:translateY(-1px)}
.btn-soft{background:#fff;color:var(--dark);border:1px solid var(--border);border-radius:999px;padding:12px 22px;font-weight:900}
.dashboard-shell{min-height:100vh;display:grid;grid-template-columns:290px 1fr}
.seller-sidebar{background:radial-gradient(circle at top right,rgba(217,255,114,.2),transparent 32%),linear-gradient(180deg,var(--green-deep),#07150f);color:#fff;padding:22px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand-block{display:flex;align-items:center;gap:10px;padding:6px 4px 24px}
.brand-logo{width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,var(--green),var(--green-dark));display:inline-flex;align-items:center;justify-content:center;font-weight:900;color:#fff}
.brand-text{font-size:1.25rem;font-weight:900;color:#fff}.brand-text span{color:var(--lime)}
.seller-mini-card,.sidebar-bottom{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:18px}
.seller-mini-card{margin-bottom:22px}.seller-mini-card p,.sidebar-bottom p{color:rgba(255,255,255,.62)}
.sidebar-label{color:rgba(255,255,255,.42);text-transform:uppercase;font-size:.72rem;letter-spacing:1.4px;font-weight:900;margin:22px 0 10px;padding-left:10px}
.sidebar-menu{display:grid;gap:7px}.sidebar-link{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:17px;color:rgba(255,255,255,.72);font-weight:800}.sidebar-link:hover,.sidebar-link.active{background:rgba(255,255,255,.1);color:#fff}
.main-area{min-width:0}.topbar{position:sticky;top:0;z-index:50;background:rgba(246,251,244,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(7,21,15,.06);padding:18px 30px}.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:18px}
.mobile-menu-btn{display:none;width:44px;height:44px;border-radius:16px;border:1px solid var(--border);background:#fff}
.dashboard-content{padding:32px 30px 70px}
.page-hero{background:radial-gradient(circle at top right,rgba(217,255,114,.26),transparent 35%),linear-gradient(135deg,var(--green-deep),#0b4f2c);color:#fff;border-radius:36px;padding:34px;box-shadow:var(--shadow);margin-bottom:24px}
.page-hero h1{font-size:clamp(2rem,4vw,3.7rem);font-weight:900;letter-spacing:-2px}.page-hero p{color:rgba(255,255,255,.72);max-width:760px}
.panel-card{background:#fff;border:1px solid var(--border);border-radius:32px;box-shadow:0 16px 45px rgba(7,21,15,.08);overflow:hidden}.panel-header{padding:24px 24px 0}.panel-header h3{font-weight:900}.panel-body{padding:24px}
.form-label{font-weight:800}.form-control,.form-select{min-height:56px;border:1px solid rgba(7,21,15,.08);background:#f7fbf6;border-radius:18px;box-shadow:none!important;font-weight:700}
textarea.form-control{min-height:130px}
.progress-wrap{display:none;height:8px;background:#eef5ec;border-radius:999px;overflow:hidden;margin-top:14px}.progress-line{height:100%;width:0;background:linear-gradient(135deg,var(--green),var(--green-dark));transition:width .3s}
.server-message{display:none;border-radius:18px;padding:13px 15px;font-weight:800;margin-top:14px}.server-message.success{display:block;background:#edf9f1;color:var(--green-dark)}.server-message.error{display:block;background:#fff4f2;color:#9f2c1f}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.stat-card{background:#fff;border:1px solid var(--border);border-radius:28px;padding:22px}.stat-card h3{font-weight:900}
.table-wrap{overflow-x:auto}.table{min-width:780px}.status-pill{display:inline-flex;padding:7px 11px;border-radius:999px;font-size:.78rem;font-weight:900}.status-active{background:var(--green-soft);color:var(--green-dark)}.status-pending{background:#fff8e6;color:#946200}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.listing-card{background:#fff;border:1px solid var(--border);border-radius:28px;padding:20px}
.sidebar-backdrop{display:none}
@media(max-width:991px){.dashboard-shell{grid-template-columns:1fr}.seller-sidebar{position:fixed;left:-310px;width:290px;z-index:999}.seller-sidebar.show{left:0}.sidebar-backdrop.show{display:block;position:fixed;inset:0;background:rgba(7,21,15,.45);z-index:998}.mobile-menu-btn{display:inline-flex;align-items:center;justify-content:center}.dashboard-content{padding:24px 18px 70px}.stat-grid,.card-grid{grid-template-columns:1fr 1fr}}
@media(max-width:575px){.stat-grid,.card-grid{grid-template-columns:1fr}.page-hero,.panel-card{border-radius:26px}}

/* Public navigation and footer */
.public-navbar{position:sticky;top:0;z-index:1000;padding:14px 0;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
.public-nav-shell{display:flex;align-items:center;justify-content:space-between;gap:20px}
.public-brand{color:var(--dark)}
.public-menu-btn{display:none;width:44px;height:44px;border:1px solid var(--border);border-radius:15px;background:#fff;font-size:1.35rem}
.public-nav-menu{display:flex!important;align-items:center;justify-content:space-between;gap:24px;flex:1}
.public-links{display:flex;align-items:center;justify-content:center;gap:24px;flex:1}
.public-links a{color:#34423a;font-weight:800;font-size:.93rem}
.public-links a:hover,.public-links a.active{color:var(--green)}
.public-actions{display:flex;gap:10px}
.public-footer{background:radial-gradient(circle at top right,rgba(217,255,114,.12),transparent 30%),var(--dark);color:#fff;padding:60px 0 24px}
.public-footer h6{font-weight:900;margin-bottom:18px}
.public-footer a{display:block;color:rgba(255,255,255,.65);font-weight:600;margin-bottom:10px}
.public-footer a:hover{color:#fff}
.footer-intro,.public-footer p{color:rgba(255,255,255,.62);line-height:1.75}
.footer-socials{display:flex;gap:9px}
.footer-socials a{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:#fff;margin:0}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.58)}
.footer-bottom a{display:inline;color:rgba(255,255,255,.74);margin:0}
.product-image{width:100%;height:100%;object-fit:cover}
.product-placeholder{font-size:4.5rem}
.whatsapp-order-btn{background:#dcfce7;color:#0e7a38;border:1px solid rgba(14,122,56,.12);border-radius:999px;font-weight:900;padding:11px 14px}
.whatsapp-order-btn:hover{background:#128c4a;color:#fff}
@media(max-width:991px){
 .public-navbar{
    position:sticky;
    top:0;
    z-index:1050;
    padding:10px 0;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(14px);
 }
 .public-nav-shell{
    position:relative;
    gap:12px;
 }
 .public-brand{
    font-size:1.12rem;
 }
 .public-nav-shell .brand-logo{
    width:40px;
    height:40px;
    border-radius:14px;
 }
 .public-menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
    width:44px;
    height:44px;
    flex:0 0 44px;
    padding:0;
    border:1px solid rgba(7,21,15,.1);
    border-radius:15px;
    background:var(--green-soft);
    color:var(--green-dark);
    box-shadow:0 8px 22px rgba(7,21,15,.07);
 }
 .public-menu-icon{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity .18s ease,transform .18s ease;
 }
 .public-menu-btn .public-menu-close{
    opacity:1;
    transform:scale(1);
 }
 .public-menu-btn.collapsed .public-menu-close{
    opacity:0;
    transform:scale(.65);
 }
 .public-menu-btn .public-menu-open{
    opacity:0;
    transform:scale(.65);
 }
 .public-menu-btn.collapsed .public-menu-open{
    opacity:1;
    transform:scale(1);
 }
 .public-nav-menu{
    display:none!important;
    position:absolute;
    top:58px;
    left:0;
    right:0;
    width:100%;
    max-height:calc(100vh - 90px);
    overflow-y:auto;
    background:#fff;
    border:1px solid rgba(7,21,15,.09);
    border-radius:24px;
    padding:12px;
    box-shadow:0 24px 70px rgba(7,21,15,.18);
 }
 .public-nav-menu.show{
    display:block!important;
 }
 .public-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
 }
 .public-links a{
    min-height:50px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 13px;
    border-radius:15px;
    background:#f7faf7;
    border:1px solid transparent;
    color:#34423a;
    font-size:.88rem;
    font-weight:850;
 }
 .public-links a:hover,
 .public-links a.active{
    color:var(--green-dark);
    background:var(--green-soft);
    border-color:rgba(19,148,71,.15);
 }
 .public-mobile-link-icon{
    display:inline-flex;
    color:var(--green);
    font-size:1rem;
 }
 .public-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--border);
 }
 .public-actions .btn{
    min-height:47px;
    padding:10px 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.86rem;
 }
}
@media(min-width:992px){
 .public-mobile-link-icon{
    display:none;
 }
}
@media(max-width:575px){
 .public-links{
    grid-template-columns:1fr;
 }
 .public-nav-menu{
    top:56px;
    border-radius:20px;
 }
 .public-actions{
    grid-template-columns:1fr;
 }
}

/* Seller completion v7 */
.sidebar-count{
    min-width:24px;
    height:24px;
    padding:0 7px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(217,255,114,.16);
    color:var(--lime);
    font-size:.72rem;
    font-weight:900;
}
.topbar-icon-btn{
    width:46px;
    height:46px;
    border-radius:16px;
    border:1px solid var(--border);
    background:#fff;
    color:var(--dark);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
}
.topbar-count{
    position:absolute;
    top:-5px;
    right:-5px;
    min-width:21px;
    height:21px;
    padding:0 5px;
    border-radius:999px;
    background:#d92d20;
    color:#fff;
    border:2px solid #f6fbf4;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.66rem;
    font-weight:900;
}
.detail-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.detail-box{
    border:1px solid var(--border);
    background:#f8fcf7;
    border-radius:20px;
    padding:16px;
}
.detail-box small{
    display:block;
    color:var(--muted);
    font-weight:700;
    margin-bottom:4px;
}
.order-timeline{
    display:grid;
    gap:15px;
}
.timeline-item{
    display:grid;
    grid-template-columns:18px 1fr;
    gap:12px;
}
.timeline-dot{
    width:13px;
    height:13px;
    border-radius:50%;
    margin-top:5px;
    background:var(--green);
    box-shadow:0 0 0 5px var(--green-soft);
}
.timeline-item p{
    margin:2px 0 0;
    color:var(--muted);
}
.notification-card{
    border:1px solid var(--border);
    background:#fff;
    border-radius:24px;
    padding:20px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:15px;
    align-items:start;
}
.notification-card.unread{
    background:#f2fbf2;
    border-color:rgba(19,148,71,.2);
}
.notification-icon{
    width:48px;
    height:48px;
    border-radius:17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--green-soft);
    color:var(--green);
    font-size:1.2rem;
}
.document-card{
    border:1px solid var(--border);
    border-radius:22px;
    padding:18px;
    background:#f9fcf8;
}
.upload-drop{
    border:1.5px dashed rgba(19,148,71,.3);
    border-radius:24px;
    background:#f7fbf6;
    padding:26px;
}
.settings-nav{
    display:grid;
    gap:10px;
}
.settings-nav a{
    border:1px solid var(--border);
    background:#fff;
    border-radius:18px;
    padding:13px 15px;
    color:var(--dark);
    font-weight:800;
}
@media(max-width:575px){
    .detail-grid{grid-template-columns:1fr}
    .notification-card{grid-template-columns:auto 1fr}
    .notification-card .notification-action{grid-column:1/-1}
    .topbar .btn-asoko{display:none}
}