:root { --bg:#ffffcc; --fg:#222; --muted:#666; --primary:#990099; --danger:#d23; --border:#ddd; }
* { box-sizing:border-box; }
body { margin:0; font:14px/1.5 -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:var(--fg); background:var(--bg); }
.container { max-width: 960px; margin: 0 auto; padding: 16px; }
.site-header, .site-footer { background:#f7f7f7; border-bottom:1px solid var(--border); }
.site-footer { border-top:1px solid var(--border); border-bottom:none; margin-top:24px; }
.header-inner { display:flex; align-items:center; justify-content:space-between; }
.brand { font-weight:600; color:#660066; }
.nav { display:flex; align-items:center; gap:12px; }
.nav a, .nav .linklike { text-decoration:none; color:#990099; transition:color 0.2s ease; }
.nav a:hover { color:var(--fg); }
.nav a.active { font-weight:600; color:var(--fg); border-bottom:2px solid #990099; padding-bottom:2px; }
.linklike.danger { color:var(--danger); }
.inline-form { display:inline; }
main h1 { margin:16px 0; color:#660066; }
.flashes { margin:8px 0; }
.flash { padding:8px 12px; border:1px solid var(--border); border-left:4px solid var(--primary); background:#fff9ff; margin-bottom:6px; }
.flash.success { border-left-color:#2aa83a; background:#f4fff6; }
.flash.danger { border-left-color:#d23; background:#fff7f7; }
.flash.info { border-left-color:#888; background:#f7f7f7; }
.toolbar { display:flex; align-items:center; gap:12px; }
.toolbar-actions { display:flex; gap:8px; }
.toolbar-actions form { margin:0; }
.toolbar .btn { margin-left:0; }
.toolbar .spacer { flex:1; }
.btn { display:inline-block; padding:8px 12px; border:1px solid var(--border); background:#fff; border-radius:4px; text-decoration:none; color:var(--fg); cursor:pointer; transition:all 0.2s ease; }
.btn:hover { background:#f5f5f5; box-shadow:0 2px 4px rgba(0,0,0,0.1); }
.btn.primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn.primary:hover { background:#770077; }
.btn.danger { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn.danger:hover { background:#b91d1d; }
.btn.info { background:#aa44aa; color:#fff; border-color:#aa44aa; }
.btn.info:hover { background:#882288; box-shadow:0 2px 4px rgba(0,0,0,0.1); }
.btn.action { background:#8833aa; color:#fff; border-color:#8833aa; }
.btn.action:hover { background:#662288; box-shadow:0 2px 4px rgba(0,0,0,0.1); }
.table { width:100%; border-collapse:collapse; }
.table th, .table td { padding:8px; border-bottom:1px solid var(--border); text-align:left; }
.table .actions a { margin-right:8px; color:var(--primary); text-decoration:none; }
.table .actions a.danger { color:var(--danger); }
.table .actions a:hover { text-decoration:underline; }
.form-row { margin-bottom:12px; }
.form-row.inline { display:flex; align-items:center; gap:8px; }
.input { width:100%; padding:8px; border:1px solid var(--border); border-radius:4px; }
.textarea { width:100%; min-height:160px; padding:8px; border:1px solid var(--border); border-radius:4px; font-family:monospace; }
.textarea.medium { min-height:200px; }
.textarea.tall { min-height:280px; }
.form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.error { color:var(--danger); font-size:12px; }
.hint { color:var(--muted); font-size:12px; }
.muted { color:var(--muted); }
.password-field { display:flex; align-items:center; gap:8px; }
.password-field .eye { border:1px solid var(--border); background:#fff; border-radius:4px; padding:6px 8px; cursor:pointer; transition:all 0.2s ease; }
.password-field .eye:hover { background:#f5f5f5; }
label { display:block; margin-bottom:4px; }
.grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }
.rule-text { margin:0; white-space:pre-wrap; word-wrap:break-word; overflow-wrap:break-word; font-family:monospace; background:#f9f9f9; padding:8px; border:1px solid var(--border); border-radius:4px; }
.dashboard-root { display:flex; flex-direction:column; gap:1.5rem; }
.dashboard-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dash-card { border:1px solid var(--border); border-radius:6px; background:#fff; display:flex; flex-direction:column; }
.dash-card.full-width { width:100%; }
.dash-card-header { border-bottom:1px solid var(--border); padding:12px 16px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.dash-card-header h2 { margin:0; font-size:1.1rem; color:#660066; }
.dash-card-body { padding:16px; display:flex; flex-direction:column; gap:12px; }
.dash-info { margin:0; display:flex; flex-direction:column; gap:12px; }
.dash-info-row { display:flex; gap:12px; align-items:flex-start; font-size:0.9rem; }
.dash-info-row dt { font-weight:700; flex:0 0 80px; color:#222; }
.dash-info-row dd { margin:0; color:var(--muted); flex:1; text-align:left; }
.dash-info-value { padding-top:2px; }
.dash-info-row-accounts { flex-direction:column; align-items:stretch; gap:6px; }
.dash-info-row-accounts dt { flex:none; text-align:left; }
.dash-accounts { display:flex; flex-direction:column; gap:4px; align-items:flex-start; text-align:left; }
.dash-account-line { display:block; width:100%; }
.dash-metrics { display:grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap:10px; }
.dash-metric-span { grid-column: 1 / 3; }
@media (max-width: 640px) {
  .dash-metrics { grid-template-columns: repeat(1, minmax(120px, 1fr)); }
  .dash-metric-span { grid-column: 1 / 2; }
}
.dash-metric { border:1px solid var(--border); border-radius:4px; padding:8px; background:#fff9ff; display:flex; flex-direction:column; gap:4px; }
.dash-metric-label { font-size:0.8rem; color:var(--muted); }
.dash-metric-value { font-size:1.4rem; font-weight:600; color:#660066; }
.dash-metric-link { font-size:0.8rem; color:#990099; text-decoration:none; }
.dash-metric-link:hover { text-decoration:underline; }
.dash-secondary { display:flex; flex-direction:column; gap:4px; font-size:0.9rem; color:var(--muted); }
.dash-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:0.9rem; }
.dash-alerts { display:flex; flex-direction:column; gap:12px; }
.dash-alert { border:1px solid var(--border); border-left:4px solid #990099; padding:12px 16px; border-radius:6px; background:#fff9ff; }
.dash-alert-warning { border-left-color:#ffc107; background:#fff8e1; }
.dash-alert-critical { border-left-color:#dc3545; background:#fff5f5; }
.dash-alert-title { font-weight:600; margin-bottom:4px; }
.dash-alert-message { color:var(--muted); font-size:0.9rem; margin-bottom:4px; }
.dash-alert-link { font-size:0.85rem; color:#990099; text-decoration:none; }
.dash-alert-link:hover { text-decoration:underline; }
.dashboard-table td, .dashboard-table th { font-size:0.85rem; }
.dashboard-table .truncate { max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.badge { padding:2px 8px; border-radius:12px; font-size:0.75rem; }
.badge-ok { background:#e6f4ea; color:#1e7e34; }
.badge-warn { background:#fdecea; color:#b71c1c; }
.table-wrapper { overflow-x:auto; }
