:root{
    --green:#0f7a48;
    --green-dark:#075934;
    --green-soft:#e9f8ef;
    --green-2:#0b633a;
    --gold:#ffe08a;
    --border:#c7dfd1;
    --border-soft:#e4efe8;
    --bg:#f7fbf8;
    --card:#ffffff;
    --text:#183229;
    --muted:#5c746a;
    --danger:#b42318;
    --success:#067647;
    --shadow:0 18px 38px rgba(13, 89, 52, .08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:14px;
}
a{color:#087443;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.header{
    background:#fff;
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:50;
}
.header-inner{
    max-width:1180px;
    margin:0 auto;
    padding:16px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:var(--text);
}
.brand:hover{text-decoration:none}
.logo{
    width:50px;
    height:50px;
    border-radius:50%;
    background:conic-gradient(from 90deg,#0f7a48,#86efac,#0f7a48);
    display:grid;
    place-items:center;
    color:#fff;
    font-size:24px;
    font-weight:900;
    box-shadow:inset 0 0 0 5px #fff, 0 0 0 1px var(--border);
    flex:0 0 auto;
}
.brand h1{margin:0;font-size:24px;color:var(--green-dark);line-height:1.1}
.brand small{color:var(--muted);display:block;margin-top:3px}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.actions a,
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:10px 14px;
    border:1px solid var(--border);
    border-radius:999px;
    background:#fff;
    color:#0a5f38;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    text-decoration:none;
    line-height:1;
}
.actions a.primary,
.btn-primary{background:var(--green);color:#fff;border-color:var(--green)}
.btn-dark{background:var(--green-dark);color:#fff;border-color:var(--green-dark)}
.btn-warning{background:var(--gold);color:#322600;border-color:#f2d46f}
.btn-danger{background:#fff1f0;color:var(--danger);border-color:#f6c6c2}
.btn-block{width:100%}
.menu-btn{display:none}
.search-strip{background:linear-gradient(180deg,var(--green),var(--green-2));padding:22px 20px}
.search{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 130px;gap:10px}
.search input,.search button{border:0;border-radius:6px;padding:14px;font-size:15px}
.search button{background:var(--gold);font-weight:900;cursor:pointer;color:#241b00}
.container{max-width:1180px;margin:18px auto 36px;padding:0 20px;min-height:58vh}
.breadcrumb,.mini-note{
    background:#fff;
    border:1px solid var(--border);
    padding:11px 13px;
    border-radius:8px;
    font-size:13px;
    color:var(--muted);
}
.layout{display:grid;grid-template-columns:1fr 310px;gap:18px;margin-top:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.panel,.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
    box-shadow:var(--shadow);
}
.panel-title{
    padding:13px 16px;
    background:var(--green-soft);
    border-bottom:1px solid var(--border);
    font-weight:900;
    color:var(--green-dark);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.panel-body{padding:16px}
.hero{
    background:linear-gradient(135deg,#ffffff,#edf9f1);
    border:1px solid var(--border);
    border-radius:14px;
    padding:26px;
    display:grid;
    grid-template-columns:1fr 320px;
    gap:22px;
    align-items:center;
    box-shadow:var(--shadow);
}
.hero h2{font-size:34px;margin:0 0 10px;color:var(--green-dark);line-height:1.15}
.hero p{margin:0;color:var(--muted);font-size:15px;line-height:1.65}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.editor-note{
    border-left:4px solid var(--green);
    background:#f2fbf5;
    padding:13px;
    margin-bottom:16px;
    line-height:1.6;
    font-size:14px;
    border-radius:0 8px 8px 0;
}
.category-columns{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 18px}
.cat-box{border-bottom:1px dashed #d6e9de;padding-bottom:12px}
.cat-box h3{margin:0 0 7px;font-size:16px}
.cat-box p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.listing{
    display:grid;
    grid-template-columns:130px 1fr;
    gap:14px;
    padding:16px 0;
    border-bottom:1px solid #edf4ef;
}
.listing:last-child{border-bottom:0}
.thumb{
    width:130px;
    height:88px;
    background:var(--green-soft);
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
}
.thumb img{width:100%;height:100%;object-fit:cover}
.leaf{
    width:32px;height:32px;background:var(--green-soft);color:var(--green);border:1px solid var(--border);border-radius:50%;display:grid;place-items:center;font-weight:900;
}
.listing h4{margin:0 0 6px;font-size:16px;line-height:1.3}
.listing p{margin:0;color:#4b6358;font-size:13px;line-height:1.55}
.meta{margin-top:7px;font-size:12px;color:#789086;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.badge{
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    border-radius:999px;
    border:1px solid var(--border-soft);
    background:#f7fbf8;
    color:#0a5f38;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.02em;
}
.badge.vip{background:#fff8d6;border-color:#f1dc81;color:#755b00}
.badge.basic{background:#edf9f1;border-color:#bfe4cc;color:#075934}
.badge.free{background:#f3f5f4;color:#5c746a}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:#f8fcf9;border:1px solid #d8eadf;border-radius:8px;padding:13px}
.stat strong{display:block;color:var(--green-dark);font-size:22px;line-height:1}
.stat span{font-size:12px;color:var(--muted);display:block;margin-top:6px}
.tag-cloud a{display:inline-block;background:#f2fbf5;border:1px solid #d8eadf;border-radius:999px;padding:7px 11px;margin:4px 3px;font-size:12px}
.submit-box{background:linear-gradient(135deg,#e9f8ef,#ffffff);border:1px solid var(--border);padding:15px;border-radius:8px;line-height:1.55}
.form{display:grid;gap:14px}
.form-row{display:grid;gap:7px}
.form-row label{font-weight:800;color:var(--green-dark);font-size:13px}
.input,textarea,select{
    width:100%;
    border:1px solid var(--border);
    background:#fff;
    border-radius:8px;
    padding:12px 13px;
    color:var(--text);
    font:inherit;
}
textarea{min-height:120px;resize:vertical;line-height:1.55}
.help{font-size:12px;color:var(--muted);line-height:1.5}
.errors{background:#fff1f0;border:1px solid #f6c6c2;color:var(--danger);border-radius:8px;padding:12px;margin-bottom:14px}
.success-box{background:#ecfdf3;border:1px solid #abefc6;color:#067647;border-radius:8px;padding:12px;margin-bottom:14px}
.flash-wrap{display:grid;gap:10px;margin-bottom:16px}
.flash{padding:12px 14px;border-radius:8px;border:1px solid var(--border)}
.flash-error{background:#fff1f0;border-color:#f6c6c2;color:var(--danger)}
.flash-success{background:#ecfdf3;border-color:#abefc6;color:var(--success)}
.flash-info{background:#eff8ff;border-color:#b2ddff;color:#175cd3}
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px;background:#fff}
table{width:100%;border-collapse:collapse;min-width:720px}
th,td{padding:11px 12px;border-bottom:1px solid var(--border-soft);text-align:left;vertical-align:top;font-size:13px}
th{background:var(--green-soft);color:var(--green-dark);font-weight:900}
tr:last-child td{border-bottom:0}
.price-card{padding:18px;border:1px solid var(--border);border-radius:12px;background:#fff;display:grid;gap:12px;box-shadow:var(--shadow)}
.price-card h3{margin:0;color:var(--green-dark);font-size:22px}
.price{font-size:30px;font-weight:900;color:var(--green)}
.price small{font-size:13px;color:var(--muted);font-weight:500}
.check-list{margin:0;padding-left:18px;color:var(--muted);line-height:1.8}
.wallet-balance{font-size:34px;font-weight:900;color:var(--green-dark);line-height:1}
.pagination{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}
.pagination a{padding:8px 11px;border:1px solid var(--border);border-radius:7px;background:#fff;font-weight:800;font-size:12px}
.pagination a.active{background:var(--green);color:#fff;border-color:var(--green)}
.footer{background:#082d1e;color:#d8f4e4;margin-top:40px}
.footer-inner{max-width:1180px;margin:0 auto;padding:26px 20px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.footer p{margin:7px 0 0;color:#a8d9bd;line-height:1.55;max-width:680px}
.footer-links{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.footer a{color:#d8f4e4}
.admin-shell{display:grid;grid-template-columns:220px 1fr;gap:18px}
.admin-nav{display:grid;gap:8px;align-content:start}
.admin-nav a{padding:11px 12px;border:1px solid var(--border);background:#fff;border-radius:8px;font-weight:800}
.detail-hero{display:grid;grid-template-columns:360px 1fr;gap:20px;align-items:start}
.detail-thumb{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--green-soft)}
.detail-thumb img{width:100%;height:235px;object-fit:cover}
.kv{display:grid;gap:8px;margin-top:10px}
.kv div{display:grid;grid-template-columns:130px 1fr;gap:8px;padding:8px 0;border-bottom:1px dashed var(--border-soft);font-size:13px}
.kv strong{color:var(--green-dark)}
@media(max-width:980px){
    .layout,.hero,.detail-hero,.admin-shell{grid-template-columns:1fr}
    .grid-3{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
    .header-inner{display:block}
    .brand h1{font-size:21px}
    .menu-btn{display:inline-flex;margin-top:12px;border:1px solid var(--border);border-radius:8px;background:#fff;padding:9px 12px;font-weight:800;color:var(--green-dark)}
    .actions{display:none;margin-top:12px;justify-content:flex-start}
    .actions.open{display:flex}
    .search{grid-template-columns:1fr}
    .category-columns,.grid-2,.grid-3{grid-template-columns:1fr}
    .listing{grid-template-columns:1fr}
    .thumb{width:100%;height:170px}
    .footer-inner{grid-template-columns:1fr}
    .footer-links{justify-content:flex-start}
    .hero h2{font-size:27px}
}