:root{ --bg:#fbfbfc; --card:#fff; --muted:#6b7280; --accent:#0f766e; --text:#111827; }
body{ margin:0; font-family:Inter, system-ui, Arial; background:var(--bg); color:var(--text);} 
.site-header{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:linear-gradient(90deg,#fff,#f3f4f6); border-bottom:1px solid #e6e6e6; }
.brand{ display:flex; align-items:center; gap:12px; }
.logo{ width:40px; height:40px; object-fit:contain; }
.logo-lg{ width:96px; }
.title{ font-weight:700; }
.header-actions button{ margin-left:8px; }
.app{ display:flex; min-height:calc(100vh - 64px); }
.sidebar{ width:80px; background:var(--card); border-right:1px solid #e6e6e6; padding:12px; }
.sidebar nav ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.sidebar nav li{ cursor:pointer; padding:8px; text-align:center; font-size:13px; border-radius:8px; }
.sidebar nav li.active{ background:rgba(15,118,110,0.08); color:var(--accent); }
.content{ flex:1; padding:14px; }
.card{ background:var(--card); padding:12px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.04); margin-bottom:12px; }
.grid{ display:grid; gap:12px; grid-template-columns: repeat(2,1fr); }
@media(min-width:900px){ .grid{ grid-template-columns: repeat(4,1fr); } .sidebar{ width:220px; } }
.small{ font-size:13px; color:var(--muted); }
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ padding:8px; border-bottom:1px solid #eee; }
.btn{ padding:8px 12px; border-radius:8px; cursor:pointer; background:var(--accent); color:#fff; border:none; }
.btn.ghost{ background:transparent; color:var(--accent); border:1px solid rgba(15,118,110,0.12); }
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.4); }
.modal.hidden{ display:none; }
.modal-card{ width:96%; max-width:760px; background:var(--card); padding:16px; border-radius:12px; position:relative; }
.modal-close{ position:absolute; right:12px; top:12px; }
.form-row{ display:flex; gap:8px; flex-wrap:wrap; }
.form-field{ flex:1; min-width:160px; display:flex; flex-direction:column; gap:6px; }
.input, textarea, select{ padding:8px; border-radius:8px; border:1px solid #ddd; }
.preview-popup{ position:fixed; right:16px; bottom:16px; background:var(--card); padding:12px; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,0.12); }
.login-page{ display:flex; align-items:center; justify-content:center; height:100vh; }
.login-card{ width:320px; text-align:center; }