* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Tahoma, sans-serif; font-size: 12px; color: #ccc; background: #080808; }
a { color: #888; text-decoration: none; }
a:hover { color: #bbb; }
.titlebar { background: #111; border-bottom: 1px solid #1e1e1e; padding: 6px 10px; display: flex; align-items: center; gap: 8px; }
.titlebar-title { font-size: 11px; color: #888; flex: 1; }
.menubar { background: #0e0e0e; border-bottom: 1px solid #1a1a1a; padding: 0 8px; display: flex; }
.menubar a { padding: 4px 8px; font-size: 11px; color: #888; display: block; }
.menubar a:hover { background: #1a1a1a; color: #bbb; }
.toolbar { background: #111; border-bottom: 2px solid #1e1e1e; padding: 4px 8px; display: flex; align-items: center; gap: 2px; }
.toolbar a, .toolbar span.tool-btn { padding: 3px 8px; background: #151515; border: 1px solid #2a2a2a; color: #888; font-size: 11px; font-family: Tahoma, sans-serif; cursor: pointer; display: inline-block; }
.toolbar a:hover { background: #1e1e1e; color: #bbb; border-color: #444; }
.toolbar a.active { background: #1a1a1a; color: #aaa; border-top: 2px solid #666; border-bottom: 1px solid #1a1a1a; margin-top: -1px; }
.tool-sep { width: 1px; height: 20px; background: #2a2a2a; margin: 0 4px; display: inline-block; vertical-align: middle; }
.layout { display: flex; min-height: calc(100vh - 120px); }
.sidebar { width: 160px; min-width: 160px; background: #0c0c0c; border-right: 1px solid #1e1e1e; padding: 8px 0; }
.sidebar-header { padding: 4px 10px; font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 0.5px; border-top: 1px solid #1a1a1a; margin-top: 4px; padding-top: 8px; }
.sidebar a { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 18px; color: #777; font-size: 11px; }
.sidebar a:hover { background: #151515; color: #bbb; }
.sidebar a.active { background: #161616; color: #ccc; border-left: 2px solid #555; padding-left: 16px; }
.sidebar-dot { width: 6px; height: 6px; background: #333; flex-shrink: 0; display: inline-block; }
.sidebar-dot.green { background: #2a5a2a; }
.main { flex: 1; padding: 12px; background: #090909; overflow-y: auto; }
.panel { border: 1px solid #1e1e1e; border-top: 2px solid #444; margin-bottom: 10px; background: #0d0d0d; }
.panel-header { background: #111; padding: 5px 10px; border-bottom: 1px solid #1a1a1a; font-size: 11px; color: #888; display: flex; align-items: center; justify-content: space-between; }
.panel-body { padding: 10px; }
.panel-body.no-pad { padding: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.stat-box { border: 1px solid #1e1e1e; border-top: 2px solid #555; background: #0c0c0c; padding: 8px 10px; }
.stat-label { font-size: 10px; color: #555; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
.stat-val { font-size: 18px; color: #aaa; }
table.data { width: 100%; border-collapse: collapse; font-size: 11px; }
table.data th { background: #111; color: #666; text-align: left; padding: 5px 8px; border-bottom: 1px solid #1e1e1e; font-weight: normal; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; }
table.data td { padding: 5px 8px; border-bottom: 1px solid #141414; color: #888; }
table.data tr:hover td { background: #111; color: #aaa; }
table.data tr:last-child td { border-bottom: none; }
.badge { display: inline-block; padding: 1px 6px; font-size: 10px; border: 1px solid #2a2a2a; color: #666; }
.badge.green { border-color: #1a3a1a; color: #4a8a4a; background: #0d180d; }
.badge.red { border-color: #3a1a1a; color: #8a4a4a; background: #180d0d; }
.badge.amber { border-color: #3a3010; color: #8a7a3a; background: #181408; }
.statusbar { background: #0c0c0c; border-top: 1px solid #1a1a1a; padding: 3px 10px; display: flex; align-items: center; gap: 16px; font-size: 10px; color: #555; position: fixed; bottom: 0; left: 0; right: 0; }
.status-sep { width: 1px; height: 12px; background: #1e1e1e; }
.status-dot { width: 5px; height: 5px; background: #2a5a2a; display: inline-block; margin-right: 4px; }
.form-row { margin-bottom: 10px; }
.form-row label { display: block; font-size: 10px; color: #666; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.3px; }
.form-row input, .form-row select { background: #080808; border: 1px solid #222; color: #bbb; padding: 5px 7px; font-family: Tahoma, sans-serif; font-size: 11px; width: 100%; }
.form-row input:focus, .form-row select:focus { outline: none; border-color: #444; }
.btn { background: #151515; border: 1px solid #333; border-top: 1px solid #444; color: #999; padding: 5px 14px; font-family: Tahoma, sans-serif; font-size: 11px; cursor: pointer; }
.btn:hover { background: #1a1a1a; color: #bbb; }
.btn.danger { border-color: #3a1a1a; color: #8a4a4a; }
.btn.danger:hover { background: #1a0d0d; }
.error-box { border: 1px solid #3a1a1a; background: #180d0d; color: #8a4a4a; padding: 6px 10px; font-size: 11px; margin-bottom: 10px; border-top: 2px solid #5a2a2a; }
.success-box { border: 1px solid #1a3a1a; background: #0d180d; color: #4a8a4a; padding: 6px 10px; font-size: 11px; margin-bottom: 10px; border-top: 2px solid #2a5a2a; }
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 60px); }
.login-box { width: 280px; border: 1px solid #222; border-top: 2px solid #555; background: #0d0d0d; }
.login-header { background: #111; border-bottom: 1px solid #1a1a1a; padding: 8px 12px; }
.login-title { font-size: 12px; color: #888; }
.login-subtitle { font-size: 10px; color: #555; margin-top: 2px; }
.login-body { padding: 16px 12px; }
.login-footer { background: #0a0a0a; border-top: 1px solid #141414; padding: 5px 12px; font-size: 10px; color: #444; }