/* Perch Cloud - shared 8-bit style (same look as the dashboard) */
:root {
  --bg: #0f0e17; --bg2: #1a1a2e; --bg3: #222244;
  --border: #3a3a5c; --border-hi: #5a5a8c;
  --text: #e0e0e0; --text2: #8888aa;
  --red: #ff6b6b; --teal: #4ecdc4; --green: #95e06c;
  --yellow: #ffe66d; --purple: #6c5ce7; --blue: #74b9ff;
  --orange: #ffa502; --pink: #fd79a8;
  --shadow: #08081a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: 'Sarabun','Tahoma',sans-serif; font-size: 15px; min-height: 100vh; line-height: 1.5; }
a { color: var(--teal); }
.pixel-font { font-family: 'Press Start 2P', monospace; }
.pixel-box { border: 3px solid var(--border); background: var(--bg2); box-shadow: 4px 4px 0 var(--shadow); }
.pixel-btn {
  font-family: 'Press Start 2P', monospace; font-size: 10px; line-height: 1.4;
  border: 3px solid var(--border); background: var(--bg3); color: var(--text);
  padding: 8px 14px; cursor: pointer; box-shadow: 3px 3px 0 var(--shadow); text-decoration: none; display: inline-block;
}
.pixel-btn:hover { background: var(--border); }
.pixel-btn:active { transform: translate(3px,3px); box-shadow: none; }
.pixel-btn-primary { background: #2d5aa0; border-color: #4a7fd4; }
.pixel-btn-green { background: #2a6e3f; border-color: #4a9e5f; }
.pixel-btn-red { background: #8b2040; border-color: #c0305a; }
.pixel-btn-sm { font-size: 8px; padding: 4px 8px; }
.pixel-input, .pixel-select {
  border: 2px solid var(--border); background: var(--bg); color: var(--text);
  padding: 8px 12px; font-size: 14px; outline: none; font-family: inherit;
}
.pixel-input { width: 100%; }
.pixel-input:focus, .pixel-select:focus { border-color: var(--teal); }
label.f { display: block; font-size: 12px; color: var(--text2); margin-bottom: 4px; }
.field { margin-bottom: 12px; }
h2.sec { font-family: 'Press Start 2P', monospace; font-size: 12px; margin-bottom: 12px; }
.muted { color: var(--text2); font-size: 13px; }
.mono { font-family: ui-monospace, Consolas, monospace; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 20px 16px; }
.card { padding: 16px; margin-bottom: 20px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media(max-width:768px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
table { width: 100%; border-collapse: collapse; }
th { font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--text2); text-align: left; padding: 8px; border-bottom: 2px solid var(--border); }
td { padding: 6px 8px; border-bottom: 1px solid rgba(58,58,92,0.5); font-size: 13px; vertical-align: top; }
.table-scroll { overflow-x: auto; }
.badge { font-family: 'Press Start 2P', monospace; font-size: 7px; padding: 3px 5px; border: 2px solid; display: inline-block; }
.on { color: var(--green); } .off { color: var(--red); } .warn { color: var(--orange); }
.flash { padding: 10px 14px; margin-bottom: 14px; border: 2px solid; }
.flash.ok { border-color: var(--green); color: var(--green); }
.flash.error { border-color: var(--red); color: var(--red); }
.flash.link, .flash.secret { border-color: var(--yellow); color: var(--text); }
.copybox { display: flex; gap: 8px; margin-top: 6px; }
.copybox input { flex: 1; }
/* top bar */
.topbar { background: linear-gradient(135deg,#0a1628,#162447,#1f4068); border-bottom: 4px solid var(--teal); }
.topbar-in { max-width: 1100px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.brand { font-family: 'Press Start 2P', monospace; font-size: 13px; color: var(--teal); text-decoration: none; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--text); text-decoration: none; padding: 6px 8px; border: 2px solid transparent; }
.nav a:hover, .nav a.active { border-color: var(--border-hi); background: rgba(255,255,255,0.05); }
.nav-right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nav-right form { display: inline; }
.auth-box { max-width: 420px; margin: 40px auto; padding: 24px; }
.footer { text-align: center; color: var(--text2); font-size: 12px; padding: 24px 16px; }
.footer a { color: var(--text2); }
pre.out { white-space: pre-wrap; background: var(--bg); border: 2px solid var(--border); padding: 8px; font-size: 12px; max-height: 260px; overflow: auto; }
.prose h3 { font-size: 16px; margin: 18px 0 6px; color: var(--teal); }
.prose p, .prose li { margin-bottom: 8px; }
.prose ul { padding-left: 22px; }