:root{
    --green:#3ECF71;
    --green-dark:#289856;
    --green-deep:#0E1E15;
    --green-deep-2:#16281E;
    --bg:#F2FAF5;
    --card:#FFFFFF;
    --border:#E1ECE5;
    --text:#10241A;
    --muted:#6E8A7C;
    --gold:#F2B84B;
    --radius-lg:22px;
    --radius-md:14px;
    --radius-pill:999px;
    --shadow:0 10px 30px -14px rgba(14,30,21,0.18);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
  }
  h1,h2,h3,h4{font-family:'Poppins',sans-serif;}

  /* ===== LOGIN SCREEN ===== */
  #login-screen{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
      radial-gradient(circle at 15% 20%, rgba(62,207,113,0.16), transparent 45%),
      radial-gradient(circle at 85% 80%, rgba(242,184,75,0.12), transparent 40%),
      var(--green-deep);
    padding:24px;
  }
  .login-card{
    width:100%;
    max-width:420px;
    background:var(--card);
    border-radius:var(--radius-lg);
    padding:44px 40px 36px;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.5);
    position:relative;
    overflow:hidden;
  }
  .login-card::before{
    content:"";
    position:absolute; top:-60px; right:-60px;
    width:160px; height:160px; border-radius:50%;
    background:radial-gradient(circle,rgba(62,207,113,0.25),transparent 70%);
  }
  .login-logo{
    display:flex; align-items:center; gap:10px; margin-bottom:30px;
  }
  .leaf-mark{
    width:38px;height:38px;border-radius:11px;
    background:linear-gradient(145deg,var(--green),var(--green-dark));
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 18px -6px rgba(40,152,86,0.55);
  }
  .leaf-mark svg{width:20px;height:20px;}
  .login-logo span{font-family:'Poppins';font-weight:800;font-size:19px;letter-spacing:0.3px;}
  .login-card h2{font-size:24px;font-weight:700;margin-bottom:6px;}
  .login-card p.sub{color:var(--muted);font-size:14px;margin-bottom:28px;}
  .field{margin-bottom:18px;}
  .field label{display:block;font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:7px;letter-spacing:0.2px;}
  .field input{
    width:100%;
    padding:12px 15px;
    border:1.5px solid var(--border);
    border-radius:var(--radius-md);
    font-size:14px;
    font-family:'Inter';
    outline:none;
    transition:border-color .15s, box-shadow .15s;
    background:#FBFEFC;
  }
  .field input:focus{border-color:var(--green); box-shadow:0 0 0 4px rgba(62,207,113,0.14);}
  .login-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;font-size:13px;}
  .login-row a{color:var(--green-dark);text-decoration:none;font-weight:600;}
  .checkbox-wrap{display:flex;align-items:center;gap:7px;color:var(--muted);}
  .btn-primary{
    width:100%;
    background:linear-gradient(135deg,var(--green),var(--green-dark));
    color:#fff;
    border:none;
    padding:13px;
    border-radius:var(--radius-pill);
    font-family:'Inter';
    font-weight:700;
    font-size:14.5px;
    cursor:pointer;
    box-shadow:0 12px 22px -8px rgba(40,152,86,0.55);
    transition:transform .15s, box-shadow .15s;
  }
  .btn-primary:hover{transform:translateY(-1px); box-shadow:0 16px 26px -8px rgba(40,152,86,0.6);}
  .login-foot{text-align:center;margin-top:22px;font-size:13px;color:var(--muted);}
  .error-msg{
    display:none;
    background:#FDEDED;color:#C23B3B;
    border:1px solid #F5C6C6;
    padding:10px 14px;border-radius:10px;
    font-size:13px;margin-bottom:16px;font-weight:500;
  }

  /* ===== APP SHELL ===== */
 #app{
    display:block;
    min-height:100vh;
}
  .shell{display:flex; min-height:100vh;}

  /* SIDEBAR */
  .sidebar{
    width:252px;
    background:linear-gradient(190deg,var(--green-deep),var(--green-deep-2));
    color:#EAF5EE;
    display:flex;
    flex-direction:column;
    padding:26px 18px;
    position:sticky; top:0;
    flex-shrink:0;
  }
  .sb-logo{display:flex;align-items:center;gap:10px;padding:0 6px 26px;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:22px;}
  .sb-logo span{font-family:'Poppins';font-weight:800;font-size:16.5px;letter-spacing:0.4px;}
  .nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;color:rgba(234,245,238,0.4);font-weight:700;margin:14px 10px 8px;}
  nav.sb-nav{display:flex;flex-direction:column;gap:3px;}
  .nav-item{
    display:flex; align-items:center; gap:12px;
    padding:11px 14px;
    border-radius:var(--radius-md);
    color:rgba(234,245,238,0.72);
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:background .15s, color .15s;
    border:none; background:transparent;
    width:100%; text-align:left;
  }
  .nav-item svg{width:17px;height:17px;flex-shrink:0;opacity:0.85;}
  .nav-item:hover{background:rgba(255,255,255,0.06); color:#fff;}
  .nav-item.active{
    background:var(--green);
    color:#0E1E15;
    font-weight:700;
    box-shadow:0 8px 18px -6px rgba(62,207,113,0.45);
  }
  .nav-item.active svg{opacity:1;}
  .sb-bottom{margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,0.08);}
  .sb-user{display:flex;align-items:center;gap:10px;padding:8px 6px;}
  .sb-avatar{width:34px;height:34px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#3A2A00;flex-shrink:0;}
  .sb-user div p{font-size:13px;font-weight:600;color:#fff;}
  .sb-user div span{font-size:11.5px;color:rgba(234,245,238,0.5);}
  .logout-btn{
    margin-top:10px;width:100%;display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:var(--radius-md);
    background:rgba(255,255,255,0.05);border:none;color:rgba(234,245,238,0.75);
    font-size:13.5px;font-weight:600;cursor:pointer;font-family:'Inter';
    transition:background .15s;
  }
  .logout-btn:hover{background:rgba(255,90,90,0.15); color:#ff8a8a;}

  /* MAIN */
  .main{flex:1; min-width:0; display:flex; flex-direction:column;}
  .topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 32px;background:var(--card);border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:5;
  }
  .search-box{
    display:flex;align-items:center;gap:9px;
    background:var(--bg); border:1px solid var(--border);
    border-radius:var(--radius-pill); padding:9px 16px; width:320px;
  }
  .search-box input{border:none;background:transparent;outline:none;font-size:13.5px;width:100%;font-family:'Inter';}
  .search-box svg{width:15px;height:15px;color:var(--muted);flex-shrink:0;}
  .top-right{display:flex;align-items:center;gap:16px;}
  .icon-btn{
    width:38px;height:38px;border-radius:50%;border:1px solid var(--border);
    background:var(--card);display:flex;align-items:center;justify-content:center;
    cursor:pointer; position:relative;
  }
  .icon-btn svg{width:17px;height:17px;color:var(--text);}
  .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;background:var(--gold);border-radius:50%;border:1.5px solid var(--card);}
  .content{padding:30px 32px 60px; flex:1;}
  .page{
    display:block;
    animation:fadein .25s ease;
    margin-bottom:30px;
}
  .page.active{display:block; animation:fadein .25s ease;}
  @keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

  .page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:14px;}
  .page-head h1{font-size:24px;font-weight:700;}
  .page-head p{color:var(--muted);font-size:13.5px;margin-top:4px;}
  .pill-tag{
    display:inline-flex;align-items:center;gap:6px;
    background:rgba(62,207,113,0.12);color:var(--green-dark);
    font-size:11.5px;font-weight:700;padding:5px 13px;border-radius:var(--radius-pill);
    margin-bottom:10px;
  }

  /* STAT CARDS */
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px;}
  .stat-card{
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:20px 22px; box-shadow:var(--shadow);
    display:flex; flex-direction:column; gap:10px;
  }
  .stat-top{display:flex;align-items:center;justify-content:space-between;}
  .stat-icon{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;}
  .stat-icon svg{width:18px;height:18px;}
  .stat-value{font-family:'Poppins';font-size:26px;font-weight:800;}
  .stat-label{color:var(--muted);font-size:12.5px;font-weight:500;}
  .stat-trend{font-size:11.5px;font-weight:700;display:flex;align-items:center;gap:3px;}

  .ring-card{display:flex;align-items:center;gap:16px;}
  .ring-wrap{position:relative;width:64px;height:64px;flex-shrink:0;}
  .ring-wrap svg{width:64px;height:64px;transform:rotate(-90deg);}
  .ring-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Poppins';font-weight:800;font-size:13px;}

  /* GRID LAYOUT for dashboard */
  .dash-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;}
  .panel{
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:22px; box-shadow:var(--shadow);
  }
  .panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
  .panel-head h3{font-size:15.5px;font-weight:700;}
  .link-mini{font-size:12.5px;color:var(--green-dark);font-weight:700;text-decoration:none;}

  .activity-item{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px dashed var(--border);}
  .activity-item:last-child{border-bottom:none;}
  .act-dot{width:8px;height:8px;border-radius:50%;background:var(--green);margin-top:6px;flex-shrink:0;}
  .act-dot.gold{background:var(--gold);}
  .activity-item p{font-size:13.5px;font-weight:600;}
  .activity-item span{font-size:11.5px;color:var(--muted);}

  .progress-row{margin-bottom:15px;}
  .progress-row-top{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:7px;}
  .progress-row-top span:last-child{color:var(--muted);font-weight:500;}
  .progress-bar-bg{height:8px;background:var(--bg);border-radius:var(--radius-pill);overflow:hidden;}
  .progress-bar-fill{height:100%;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--green),var(--green-dark));}

  /* FORM PAGE */
  .form-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:start;}
  .form-section-title{font-size:15px;font-weight:700;margin-bottom:16px;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
  .field-full{margin-bottom:16px;}
  .field-full label, .form-row .field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:7px;color:var(--text);}
  .field-full input, .field-full select, .field-full textarea,
  .form-row input, .form-row select{
    width:100%;padding:11px 14px;border:1.5px solid var(--border);
    border-radius:var(--radius-md);font-size:13.5px;font-family:'Inter';
    outline:none; background:#FBFEFC; transition:border-color .15s, box-shadow .15s;
  }
  .field-full textarea{resize:vertical;min-height:100px;font-family:'Inter';}
  .field-full input:focus,.field-full select:focus,.field-full textarea:focus,
  .form-row input:focus, .form-row select:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(62,207,113,0.13);}

  .dropzone{
    border:2px dashed var(--border); border-radius:var(--radius-md);
    padding:30px 16px; text-align:center; background:var(--bg);
    cursor:pointer; transition:border-color .15s, background .15s;
    margin-bottom:16px;
  }
  .dropzone.dragover{border-color:var(--green); background:rgba(62,207,113,0.08);}
  .dropzone svg{width:30px;height:30px;color:var(--green-dark);margin-bottom:8px;}
  .dropzone p{font-size:13px;font-weight:600;}
  .dropzone span{font-size:11.5px;color:var(--muted);}

  .status-toggle-row{display:flex;align-items:center;justify-content:space-between;background:var(--bg);padding:13px 16px;border-radius:var(--radius-md);margin-bottom:20px;border:1px solid var(--border);}
  .status-toggle-row p{font-size:13px;font-weight:600;}
  .status-toggle-row span{font-size:11.5px;color:var(--muted);}
  .switch{position:relative;width:42px;height:24px;flex-shrink:0;}
  .switch input{opacity:0;width:0;height:0;}
  .slider-tg{position:absolute;cursor:pointer;inset:0;background:#D6E3DA;border-radius:var(--radius-pill);transition:.2s;}
  .slider-tg::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,0.3);}
  .switch input:checked + .slider-tg{background:var(--green);}
  .switch input:checked + .slider-tg::before{transform:translateX(18px);}

  .form-actions{display:flex;gap:10px;}
  .btn-ghost{
    background:transparent;border:1.5px solid var(--border);color:var(--text);
    padding:11px 22px;border-radius:var(--radius-pill);font-weight:700;font-size:13.5px;
    cursor:pointer;font-family:'Inter';
  }
  .btn-save{
    background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;border:none;
    padding:11px 26px;border-radius:var(--radius-pill);font-weight:700;font-size:13.5px;
    cursor:pointer;font-family:'Inter'; box-shadow:0 12px 20px -8px rgba(40,152,86,0.5);
  }

  .tip-card{background:linear-gradient(160deg,rgba(62,207,113,0.08),rgba(242,184,75,0.06));border:1px solid rgba(62,207,113,0.2);}
  .tip-card h4{font-size:13.5px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:7px;}
  .tip-card ul{padding-left:18px;font-size:12.5px;color:var(--muted);line-height:1.9;}

  /* TABLE PAGE */
  .table-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:12px;}
  .filter-chips{display:flex;gap:8px;flex-wrap:wrap;}
  .chip{
    padding:7px 15px;border-radius:var(--radius-pill);border:1.5px solid var(--border);
    background:var(--card); font-size:12.5px; font-weight:600; color:var(--muted);
    cursor:pointer;
  }
  .chip.active{background:var(--green-deep);color:#fff;border-color:var(--green-deep);}
  .table-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);}
  table{width:100%;border-collapse:collapse;}
  thead tr{background:var(--bg);}
  th{text-align:left;padding:13px 20px;font-size:11.5px;text-transform:uppercase;letter-spacing:0.6px;color:var(--muted);font-weight:700;border-bottom:1px solid var(--border);}
  td{padding:14px 20px;font-size:13.5px;border-bottom:1px solid var(--border);vertical-align:middle;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:rgba(62,207,113,0.04);}
  .row-title{display:flex;align-items:center;gap:12px;}
  .row-thumb{width:42px;height:42px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--bg);}
  .row-title strong{display:block;font-size:13.5px;font-weight:700;}
  .row-title span{font-size:11.5px;color:var(--muted);}
  .cat-tag{background:var(--bg);color:var(--text);font-size:11px;font-weight:700;padding:4px 11px;border-radius:var(--radius-pill);border:1px solid var(--border);}
  .badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:5px 12px;border-radius:var(--radius-pill);}
  .badge::before{content:"";width:6px;height:6px;border-radius:50%;}
  .badge.published{background:rgba(62,207,113,0.13);color:var(--green-dark);}
  .badge.published::before{background:var(--green);}
  .badge.draft{background:rgba(242,184,75,0.15);color:#8a6110;}
  .badge.draft::before{background:var(--gold);}
  .badge.archived{background:#F1F1F1;color:#7A7A7A;}
  .badge.archived::before{background:#A0A0A0;}
  .row-actions{display:flex;gap:6px;}
  .act-btn{
    width:40%;height:30px;border-radius:9px;border:1px solid var(--border);
    background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;
  }
  .act-btn svg{width:14px;height:14px;color:var(--muted);}
  .act-btn.danger:hover{background:#FDEDED;border-color:#F5C6C6;}
  .act-btn.danger:hover svg{color:#C23B3B;}
  .act-btn.edit:hover{background:rgba(62,207,113,0.1);border-color:var(--green);}
  .act-btn.edit:hover svg{color:var(--green-dark);}

  .table-foot{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-top:1px solid var(--border);}
  .table-foot span{font-size:12.5px;color:var(--muted);}
  .pager{display:flex;gap:6px;}
  .page-btn{width:30px;height:30px;border-radius:9px;border:1px solid var(--border);background:var(--card);font-size:12.5px;font-weight:600;cursor:pointer;}
  .page-btn.active{background:var(--green);color:#fff;border-color:var(--green);}

  @media(max-width:1050px){
    .stats-grid{grid-template-columns:repeat(2,1fr);}
    .dash-grid{grid-template-columns:1fr;}
    .form-grid{grid-template-columns:1fr;}
  }
  @media(max-width:760px){
    .sidebar{position:fixed;left:-260px;z-index:50;transition:left .2s; box-shadow:20px 0 40px rgba(0,0,0,0.2);}
    .sidebar.open{left:0;}
    .search-box{width:180px;}
  }
  
  
  
  /* Dropdown */

.nav-dropdown{
    width:100%;
    margin-bottom:8px;
}

.dropdown-btn{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:none;
    border:none;
    color:#d7e4dc;
    padding:12px 14px;
    cursor:pointer;
    border-radius:12px;
    transition:.3s;
    font-family:inherit;
    font-size:15px;
}

.dropdown-btn:hover{
    background:#203528;
}

.dropdown-btn .left{
    display:flex;
    align-items:center;
    gap:12px;
}

.dropdown-btn svg{
    width:18px;
    height:18px;
}

.arrow{
    transition:.3s;
    font-size:12px;
}

.dropdown-menu{
    display:none;
    padding-left:18px;
    margin-top:6px;
}

.dropdown-menu .nav-item{
    display:flex;
    align-items:center;
    color:#cbd5ce;
    text-decoration:none;
    padding:10px 14px;
    border-radius:10px;
    margin:3px 0;
    transition:.3s;
    font-size:14px;
}

.dropdown-menu .nav-item:hover{
    background:#2d4838;
    color:#fff;
}

.nav-dropdown.active .dropdown-menu{
    display:block;
}

.nav-dropdown.active .arrow{
    transform:rotate(180deg);
}