:root{
    --bg:#f4f7f4;
    --panel:#ffffff;
    --panel2:#f8fbf8;
    --text:#17251d;
    --muted:#6b7d70;
    --green:#176d3b;
    --green2:#229954;
    --gold:#d8a328;
    --red:#d94332;
    --blue:#276ef1;
    --line:#e1ebe4;
    --shadow:0 18px 45px rgba(20,43,30,.10);
    --radius:22px;
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family:Inter,Arial,Helvetica,sans-serif;
    color:var(--text);
    background:
      radial-gradient(circle at top left, rgba(34,153,84,.14), transparent 34%),
      radial-gradient(circle at top right, rgba(216,163,40,.14), transparent 34%),
      var(--bg);
}
a{text-decoration:none;color:inherit}
.app-shell{display:flex;min-height:100vh}
.sidebar{
    width:285px;
    background:linear-gradient(180deg,#082417,#0e3b25);
    color:white;
    padding:22px;
    position:sticky;
    top:0;
    height:100vh;
    overflow:auto;
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:25px;
}
.brand-icon{
    width:48px;height:48px;border-radius:16px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--green2),var(--gold));
    font-size:24px;
}
.brand h2{font-size:19px;margin:0}
.brand p{margin:3px 0 0;font-size:12px;opacity:.74}
.menu-section{font-size:11px;text-transform:uppercase;opacity:.55;margin:22px 0 9px;letter-spacing:.08em}
.menu a{
    display:flex;
    align-items:center;
    gap:11px;
    padding:12px 13px;
    border-radius:15px;
    margin-bottom:7px;
    color:rgba(255,255,255,.88);
    transition:.18s;
}
.menu a:hover,.menu a.active{
    background:rgba(255,255,255,.13);
    color:white;
    transform:translateX(3px);
}
.menu small{
    margin-left:auto;
    background:rgba(255,255,255,.14);
    padding:3px 7px;
    border-radius:999px;
}
.main{
    flex:1;
    padding:24px;
    min-width:0;
}
.top-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-bottom:20px;
}
.searchbox{
    flex:1;
    max-width:620px;
    background:white;
    border:1px solid var(--line);
    border-radius:18px;
    padding:13px 16px;
    box-shadow:0 10px 25px rgba(20,43,30,.05);
    display:flex;
    gap:10px;
    align-items:center;
}
.searchbox input{
    border:0;
    outline:0;
    margin:0;
    padding:0;
    background:transparent;
    width:100%;
    font-size:14px;
}
.user-pill{
    background:white;
    border:1px solid var(--line);
    padding:10px 14px;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(20,43,30,.05);
    font-weight:700;
}
.hero-modern{
    border-radius:30px;
    padding:30px;
    min-height:250px;
    color:white;
    overflow:hidden;
    position:relative;
    background:
      linear-gradient(115deg,rgba(4,35,22,.96) 0%,rgba(23,109,59,.90) 48%,rgba(216,163,40,.80) 100%),
      url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1800&q=80') center/cover;
    box-shadow:var(--shadow);
    margin-bottom:20px;
}
.hero-modern:after{
    content:"";
    position:absolute;
    width:420px;height:420px;
    border-radius:50%;
    background:rgba(255,255,255,.10);
    right:-150px;bottom:-180px;
}
.hero-inner{position:relative;z-index:1;max-width:820px}
.kicker{
    display:inline-flex;
    gap:8px;
    align-items:center;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.22);
    padding:8px 13px;
    border-radius:999px;
    font-weight:800;
    font-size:13px;
}
.hero-modern h1{
    font-size:42px;
    line-height:1.05;
    margin:18px 0 10px;
    letter-spacing:-1px;
}
.hero-modern p{
    font-size:17px;
    line-height:1.7;
    margin:0 0 22px;
    color:rgba(255,255,255,.90);
}
.quick-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:0;
    border-radius:14px;
    padding:11px 15px;
    cursor:pointer;
    font-weight:800;
    background:var(--green);
    color:white;
    transition:.18s;
}
.btn:hover{filter:brightness(.94);transform:translateY(-1px)}
.btn-light{background:#eef7f1;color:var(--green)}
.btn-gold{background:#ffd166;color:#17251d}
.btn-red{background:var(--red);color:white}
.card{
    background:rgba(255,255,255,.86);
    border:1px solid rgba(225,235,228,.9);
    border-radius:var(--radius);
    padding:20px;
    box-shadow:var(--shadow);
    margin-bottom:18px;
    backdrop-filter:blur(12px);
}
.card h2,.card h3{margin-top:0}
.section-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:14px;
}
.section-title h2{margin:0;font-size:22px}
.section-title p{margin:4px 0 0;color:var(--muted);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat-card{
    background:white;
    border:1px solid var(--line);
    border-radius:22px;
    padding:18px;
    box-shadow:0 10px 28px rgba(20,43,30,.06);
    position:relative;
    overflow:hidden;
}
.stat-card:after{
    content:"";
    position:absolute;
    right:-30px;top:-30px;
    width:95px;height:95px;border-radius:50%;
    background:rgba(34,153,84,.10);
}
.stat-card .icon{
    width:42px;height:42px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    background:#eff8f2;
    color:var(--green);
    font-size:21px;
    margin-bottom:12px;
}
.stat-card p{margin:0;color:var(--muted);font-size:13px}
.stat-card h2{margin:5px 0 0;font-size:25px;letter-spacing:-.5px}
.stat-card.red .icon{background:#ffecea;color:var(--red)}
.stat-card.gold .icon{background:#fff5d8;color:#8b6200}
.stat-card.blue .icon{background:#eaf0ff;color:var(--blue)}
.smart-alert{
    display:flex;
    gap:13px;
    align-items:flex-start;
    padding:14px;
    border-radius:18px;
    background:#fff8e6;
    border:1px solid #ffe4a1;
    margin-bottom:10px;
}
.smart-alert.red{background:#ffefed;border-color:#ffc4bd}
.smart-alert.green{background:#ecf9f0;border-color:#c8ebd2}
.smart-alert strong{display:block;margin-bottom:4px}
table{width:100%;border-collapse:collapse;background:white;border-radius:16px;overflow:hidden}
th,td{padding:13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#f5faf7;color:#405447;font-size:13px}
tr:hover td{background:#fbfdfb}
.badge{
    display:inline-flex;align-items:center;gap:5px;
    background:#e9f6ee;
    color:var(--green);
    border-radius:999px;
    padding:5px 9px;
    font-size:12px;
    font-weight:800;
}
.badge.red{background:#ffecea;color:var(--red)}
.badge.gold{background:#fff5d8;color:#8b6200}
.badge.blue{background:#eaf0ff;color:var(--blue)}
.progress{
    height:11px;
    background:#e3ece6;
    border-radius:999px;
    overflow:hidden;
    min-width:120px;
}
.progress div{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--green2),var(--gold));
}
input,select,textarea{
    width:100%;
    padding:12px 13px;
    border:1px solid #d8e4dc;
    border-radius:14px;
    background:white;
    margin:6px 0 13px;
    outline:0;
    font:inherit;
}
input:focus,select:focus,textarea:focus{
    border-color:var(--green2);
    box-shadow:0 0 0 4px rgba(34,153,84,.10);
}
label{font-weight:800;font-size:13px;color:#35483c}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.photo-card,.smart-photo,.timeline-photo{
    background:white;
    border:1px solid var(--line);
    border-radius:18px;
    padding:10px;
    box-shadow:0 10px 25px rgba(20,43,30,.07);
}
.gallery img,.smart-photo img,.timeline-photo img{
    width:100%;
    height:175px;
    object-fit:cover;
    border-radius:14px;
}
.timeline{
    position:relative;
    padding-left:22px;
}
.timeline:before{
    content:"";
    position:absolute;
    left:6px;top:0;bottom:0;
    width:4px;background:#dfeae2;border-radius:99px;
}
.t-item{
    background:white;
    border:1px solid var(--line);
    border-radius:18px;
    padding:16px;
    margin-bottom:13px;
    position:relative;
}
.t-item:before{
    content:"";
    position:absolute;left:-23px;top:20px;
    width:16px;height:16px;border-radius:50%;
    background:var(--green2);
    box-shadow:0 0 0 5px #eaf6ee;
}
.tabs{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:15px;
}
.tab-btn{
    border:1px solid var(--line);
    background:white;
    padding:10px 14px;
    border-radius:999px;
    cursor:pointer;
    font-weight:800;
}
.tab-btn.active{background:var(--green);color:white;border-color:var(--green)}
.tab-content{display:none}
.tab-content.active{display:block}
.floating-add{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:50;
    background:linear-gradient(135deg,var(--green2),var(--green));
    color:white;
    width:58px;height:58px;border-radius:22px;
    display:flex;align-items:center;justify-content:center;
    font-size:28px;
    box-shadow:0 18px 40px rgba(23,109,59,.35);
}
.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.82);align-items:center;justify-content:center;padding:20px}
.modal img{max-width:92%;max-height:86%;border-radius:16px}.modal button{position:absolute;top:20px;right:25px;font-size:30px;background:none;color:white;border:0;cursor:pointer}
.note-box{background:#fff9df;border-left:5px solid var(--gold);padding:14px;border-radius:12px;margin:10px 0}
.login{max-width:430px;margin:10vh auto;background:rgba(255,255,255,.94);padding:28px;border-radius:24px;box-shadow:var(--shadow)}
.mobile-menu{display:none}
@media(max-width:1100px){
    .grid{grid-template-columns:repeat(2,1fr)}
    .grid3{grid-template-columns:repeat(2,1fr)}
    .sidebar{width:245px}
}
@media(max-width:820px){
    .app-shell{display:block}
    .sidebar{display:none;position:fixed;z-index:99;left:0;top:0;width:82%;height:100vh}
    .sidebar.open{display:block}
    .mobile-menu{display:inline-flex}
    .main{padding:15px}
    .top-nav{align-items:stretch}
    .searchbox{max-width:none}
    .user-pill{display:none}
    .hero-modern{padding:24px}
    .hero-modern h1{font-size:31px}
    .grid,.grid2,.grid3{grid-template-columns:1fr}
    table{font-size:13px}
}