body { font-family:'Noto Sans Myanmar', 'Inter', sans-serif; background:#f5f7fa; color:#333; margin:0; padding:0; }
header { background:#fff; padding:16px 24px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 2px 6px rgba(0,0,0,0.1); position:sticky; top:0; z-index:1000; }
header .logo { font-size:1.5rem; font-weight:700; background:linear-gradient(90deg,#4f46e5,#6366f1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; display:flex; align-items:center; gap:8px; }
header .user-actions a { text-decoration:none; color:#555; margin-left:16px; transition:0.3s; }
header .user-actions a:hover { color:#4f46e5; }
.sidebar { position:fixed; top:0; left:0; width:260px; height:100vh; background:#fff; padding:80px 16px 16px; box-shadow:2px 0 6px rgba(0,0,0,0.08); overflow-y:auto; transform:translateX(-100%); transition:0.3s; }
.sidebar.active { transform:translateX(0); }
.sidebar .menu a { display:flex; align-items:center; gap:10px; padding:12px 14px; color:#555; text-decoration:none; border-radius:10px; margin-bottom:6px; transition:0.3s; }
.sidebar .menu a:hover { background:linear-gradient(90deg,#4f46e5,#6366f1); color:#fff; }
.sidebar-toggle { position:fixed; top:16px; left:16px; width:44px; height:44px; background:linear-gradient(90deg,#4f46e5,#6366f1); color:#fff; border:none; border-radius:12px; cursor:pointer; z-index:1001; display:flex; align-items:center; justify-content:center; font-size:1.25rem; }
.main-content { margin:24px; transition:0.3s; }
@media(min-width:1024px){.sidebar{transform:translateX(0);} .main-content{margin-left:300px;} .sidebar-toggle{display:none;}}
h1 { text-align:center; margin-bottom:24px; font-size:2.5rem; background:linear-gradient(90deg,#4f46e5,#6366f1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.form-container { background:#fff; padding:18px; border-radius:14px; box-shadow:0 4px 10px rgba(0,0,0,0.08); margin-bottom:24px; }
.form-container input, .form-container textarea { width:100%; padding:10px 14px; border:1px solid #ddd; border-radius:10px; margin-bottom:12px; font-size:14px; outline:none; transition:0.3s; }
.form-container input:focus, .form-container textarea:focus { border-color:#4f46e5; background:#fff; }
.form-container button { background:linear-gradient(90deg,#4f46e5,#6366f1); color:#fff; border:none; padding:12px 20px; border-radius:10px; cursor:pointer; font-size:14px; font-weight:600; transition:0.3s; }
.form-container button:hover { opacity:0.9; }
.search-form { display:flex; gap:12px; flex-wrap:wrap; align-items:center; background:#fff; padding:14px 18px; border-radius:14px; box-shadow:0 4px 10px rgba(0,0,0,0.08); margin-bottom:24px; }
.search-form input { flex:1; min-width:220px; padding:12px 16px; border:1px solid #ddd; border-radius:10px; outline:none; transition:0.3s; background:#fafafa; }
.search-form input:focus { border-color:#4f46e5; background:#fff; }
.search-form select { padding:12px 16px; border:1px solid #ddd; border-radius:10px; background:#fafafa; cursor:pointer; transition:0.3s; }
.search-form select:focus { border-color:#4f46e5; }
.search-form button { background:linear-gradient(90deg,#4f46e5,#6366f1); color:#fff; border:none; padding:12px 20px; border-radius:10px; cursor:pointer; font-weight:600; display:flex; align-items:center; gap:6px; }
.search-form button:hover { opacity:0.9; }
.table-container { overflow-x:auto; border-radius:14px; box-shadow:0 4px 10px rgba(0,0,0,0.08); }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { padding:12px 14px; border-bottom:1px solid #ddd; text-align:left; }
th { background:linear-gradient(90deg,#4f46e5,#6366f1); color:#fff; }
tr:nth-child(even){background:#f9f9f9;}
.actions a { display:inline-block; padding:6px 12px; border-radius:8px; color:#fff; font-size:12px; text-decoration:none; margin-right:4px; }
.actions a.edit { background:linear-gradient(90deg,#06b6d4,#0ea5e9);}
.actions a.delete { background:linear-gradient(90deg,#ef4444,#f87171);}
footer { text-align:center; padding:16px; margin-top:32px; color:#555; }