* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: 'Open Sans', Arial, sans-serif; background:#ecf0f5; color:#333; font-size:14px; }
a { text-decoration:none; color:#3c8dbc; }

/* Layout */
.wrapper { display:flex; min-height:100vh; }
.sidebar { width:230px; background:#222d32; color:#b8c7ce; position:fixed; height:100vh; overflow-y:auto; }
.sidebar .logo { background:#3c8dbc; color:#fff; padding:18px; font-weight:700; font-size:18px; text-align:center; }
.sidebar .search { padding:10px; }
.sidebar .search input { width:100%; padding:8px; background:#374850; border:1px solid #374850; color:#fff; border-radius:3px; }
.sidebar ul { list-style:none; }
.sidebar ul li a { display:block; padding:12px 16px; color:#b8c7ce; border-left:3px solid transparent; }
.sidebar ul li a:hover, .sidebar ul li a.active { background:#1e282c; color:#fff; border-left-color:#3c8dbc; }
.sidebar ul li a i { width:20px; display:inline-block; }
.submenu { background:#2c3b41; display:none; }
.submenu.open { display:block; }
.submenu a { padding-left:40px !important; font-size:13px; }
.has-sub > a::after { content:'❮'; float:right; font-size:10px; }

.main { margin-left:230px; flex:1; display:flex; flex-direction:column; }
.topbar { background:#3c8dbc; color:#fff; padding:14px 20px; display:flex; justify-content:space-between; align-items:center; }
.topbar .right span { margin-left:20px; }
.content-header { background:#fff; padding:15px 20px; display:flex; justify-content:space-between; border-bottom:1px solid #d2d6de; }
.content-header h1 { font-size:22px; font-weight:400; }
.breadcrumb { color:#777; font-size:13px; }
.content { padding:20px; flex:1; }
.footer { background:#fff; padding:12px 20px; border-top:1px solid #d2d6de; text-align:center; color:#555; font-size:13px; display:flex; justify-content:space-between; }

/* Dashboard cards */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:25px; }
.stat-card { padding:20px; color:#fff; border-radius:3px; position:relative; overflow:hidden; }
.stat-card .num { font-size:38px; font-weight:700; }
.stat-card .label { font-size:14px; margin-top:5px; }
.stat-card i { position:absolute; right:15px; bottom:10px; font-size:60px; opacity:0.3; }
.bg-orange { background:#f39c12; }
.bg-blue { background:#00c0ef; }
.bg-green { background:#00a65a; }
.bg-pink { background:#d81b60; }

/* Panels */
.panel { background:#fff; border-radius:3px; box-shadow:0 1px 1px rgba(0,0,0,0.1); margin-bottom:20px; }
.panel-head { padding:12px 15px; color:#d81b60; font-weight:600; border-bottom:1px solid #f4f4f4; }
.panel-body { padding:15px; }

.two-col { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* Notifications table */
.notif-table { width:100%; }
.notif-table td { padding:10px; vertical-align:top; border-bottom:1px solid #f4f4f4; color:#dd4b39; font-style:italic; font-size:13px; }
.notif-table td:first-child { white-space:nowrap; width:80px; }

/* Tables */
table.data { width:100%; background:#fff; border-collapse:collapse; }
table.data th, table.data td { padding:10px; border-bottom:1px solid #f4f4f4; text-align:left; }
table.data th { background:#fff; font-weight:600; }
table.data tr:hover { background:#f5f5f5; }
table.data a { color:#3c8dbc; }
.btn { display:inline-block; padding:6px 12px; border-radius:3px; border:none; cursor:pointer; font-size:13px; color:#fff; }
.btn-info { background:#00c0ef; }
.btn-warning { background:#f39c12; }
.btn-success { background:#00a65a; }
.btn-primary { background:#3c8dbc; }
.btn-danger { background:#dd4b39; }

/* Forms */
.form-row { display:flex; align-items:center; padding:10px 0; border-bottom:1px solid #f4f4f4; }
.form-row label { width:200px; text-align:right; padding-right:20px; font-weight:600; }
.form-row .field { flex:1; }
.form-row.split { display:grid; grid-template-columns:200px 1fr 200px 1fr; align-items:center; padding:10px 0; }
.form-row.split label { text-align:right; padding-right:20px; font-weight:600; width:auto; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
  width:100%; padding:8px 10px; border:1px solid #d2d6de; border-radius:3px; font-size:14px;
}
textarea { min-height:70px; resize:vertical; }
.form-actions { text-align:center; padding:20px 0; }

/* Login */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:#3c8dbc; }
.login-box { background:#fff; padding:30px; width:360px; border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,0.2); }
.login-box h1 { text-align:center; color:#3c8dbc; margin-bottom:20px; }
.login-box input { margin-bottom:12px; }
.login-box .btn { width:100%; padding:10px; }
.error { color:#dd4b39; margin-bottom:10px; }

/* Wallet rules */
.wallet-rules ol { padding-left:25px; color:#dd4b39; line-height:1.9; }
.wallet-rules h3 { color:#3c8dbc; margin-bottom:10px; }
.wallet-rules h4 { color:#00a65a; margin:20px 0 10px; }

/* Identity card */
.id-card { width:380px; border:1px dashed #aaa; padding:15px; background:#fff; margin:20px auto; }
.id-card h3 { color:#3c8dbc; text-align:center; margin-bottom:5px; }
.id-card .sub { text-align:center; color:#dd4b39; font-weight:700; margin-bottom:10px; }
.id-card table td { padding:3px 6px; font-size:13px; }
.id-card img.photo { width:80px; height:90px; object-fit:cover; border:1px solid #ddd; }

/* Responsive */
@media (max-width: 900px) {
  .sidebar { width:60px; }
  .sidebar .logo, .sidebar .search, .sidebar span.lbl { display:none; }
  .main { margin-left:60px; }
  .stats { grid-template-columns:1fr 1fr; }
  .two-col { grid-template-columns:1fr; }
  .form-row.split { grid-template-columns:1fr; }
  .form-row label { text-align:left; width:auto; }
}