styles.css

:root{--green:#0f8a0f;--red:#cc0000;--muted:#33505a;--bg:#ffffff}
*{box-sizing:border-box} body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:var(--bg);color:#0b1b2b}

.top-header{width:100%;height:160px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(120deg,#eafdea,#dff7df,#e9ffea);background-size:300% 300%;animation:greenFlow 12s ease infinite}
.top-header .top-inner{width:100%;max-width:1200px;padding:8px;display:flex;justify-content:center;align-items:center}
.banner-img{height:180px;max-width:100%;object-fit:contain;position:relative;z-index:2}
.banner{height:260px;}
.banner-title{font-size:48px;}
@keyframes greenFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;background:linear-gradient(90deg,rgba(15,138,15,0.03),rgba(204,0,0,0.02))}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--green),var(--red));display:flex;align-items:center;justify-content:center;color:white;font-weight:700}
.titles .title{font-weight:700}.subtitle{font-size:12px;color:var(--muted)}

.nav{display:flex;gap:8px}.nav-btn{background:transparent;border:0;padding:8px 10px;border-radius:8px;color:var(--muted);cursor:pointer}.nav-btn.active{background:linear-gradient(90deg,rgba(15,138,15,0.08),rgba(204,0,0,0.04));color:var(--green);font-weight:700}

.btn{padding:8px 12px;border-radius:8px;border:0;cursor:pointer}.btn.small{padding:6px 10px;font-size:13px}.btn.primary{background:var(--green);color:white}
.card{background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(10,40,80,0.06);padding:14px;border:1px solid #eef6f4}

.container{max-width:1200px;margin:18px auto;display:grid;grid-template-columns:260px 1fr 360px;gap:18px;padding:0 12px}
.sidebar{height:calc(100vh - 220px);position:sticky;top:180px;overflow:auto}.side-menu{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}.side-btn{background:transparent;border:0;padding:10px;text-align:left;border-radius:8px;color:var(--muted);cursor:pointer}.side-btn:hover{background:rgba(15,138,15,0.03)}

.content-area{min-height:60vh}.rightcol{position:sticky;top:180px;height:calc(100vh - 220px);display:flex;flex-direction:column;gap:8px}

.dashboard-container{padding:20px;text-align:center}.dashboard-header h1{font-size:28px;margin:0;background:linear-gradient(90deg,var(--green),var(--red));-webkit-background-clip:text;color:transparent}.dashboard-grid-circular{display:flex;justify-content:center;flex-wrap:wrap;gap:30px;margin-top:24px}

.circle-card{width:140px;height:140px;border-radius:50%;background:#fff;border:3px solid rgba(15,138,15,0.12);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .25s}
.circle-card .icon{font-size:36px;color:var(--green);margin-bottom:8px}
.circle-card:hover{transform:scale(1.08);border-color:var(--red)}.circle-card:hover .icon{color:var(--red)}

.chat-window{flex:1;overflow:auto;padding:12px;border-radius:8px;background:linear-gradient(180deg,rgba(15,138,15,0.03),rgba(204,0,0,0.01))}
.chat-window .msg{padding:8px;border-radius:8px;margin:6px 0}
.chat-window .msg.user{background:var(--green);color:white;text-align:right}
.chat-window .msg.bot{background:#fff}

.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);z-index:60}
.modal.show{display:flex}.modal-card{width:420px;max-width:95%;padding:18px;border-radius:12px}.modal-close{position:absolute;right:18px;top:18px;background:transparent;border:0;font-size:20px}
input{padding:8px;border-radius:8px;border:1px solid #e6eef8}.muted{color:var(--muted)}.small{font-size:13px}

@media (max-width:1000px){ .container{grid-template-columns:1fr 360px} .sidebar{display:none} }
@media (max-width:720px){ .container{grid-template-columns:1fr} .rightcol{order:3} .sidebar{display:none} }