1 files changed, 53 insertions, 2 deletions
diff --git a/static/css/styles.css b/static/css/styles.css
index 53f7abd..d8316bb 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -112,17 +112,68 @@ pre {
 .dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--muted); vertical-align: middle; }
 .dot.chat { background: var(--ok); }
 .dot.network { background: var(--accent-2); }
+.dot.online { background: var(--ok); }
 .dot.offline { background: var(--muted); }
 .whoami { color: var(--accent-2); font-weight: bold; }
 .whoami:hover { color: var(--accent); }
 .muted { color: var(--muted); }
 code { background: var(--panel); padding: .1rem .3rem; }
 
+/* profile: devices + dns */
+.lan-table { width: 100%; border-collapse: collapse; margin: .5rem 0; }
+.lan-table th { text-align: left; color: var(--muted); font-weight: normal; border-bottom: 1px dashed var(--muted); padding: .3rem .5rem; }
+.lan-table td { padding: .3rem .5rem; border-bottom: 1px solid var(--panel); vertical-align: middle; }
+.lan-table form { margin: 0; }
+.lan-table button { padding: .15rem .5rem; font-size: .85rem; }
+.set-primary { background: var(--panel); color: var(--ink); border-color: var(--muted); }
+.set-primary:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
+.wizard-btn { margin: .25rem 0 .5rem; }
+.dns-form { margin: .75rem 0; }
+.dns-form h4 { margin: .5rem 0 .35rem; }
+.dns-fields { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.dns-fields input[name="type"] { width: 6rem; }
+.dns-fields input[name="ttl"] { width: 5rem; }
+.dns-fields input[name="name"], .dns-fields input[name="content"] { flex: 1 1 12rem; }
+
 /* canvas / r-place */
 .palette { display: flex; flex-wrap: wrap; gap: 4px; margin: .5rem 0; }
 .swatch { width: 26px; height: 26px; border: 2px solid var(--panel); border-radius: 4px; cursor: pointer; }
 .swatch.selected { border-color: var(--ink); }
-.canvas-wrap { overflow: auto; max-width: 100%; }
-#canvas { image-rendering: pixelated; cursor: crosshair; border: 2px solid var(--muted); touch-action: none; }
+.canvas-viewport {
+  position: relative;
+  width: 100%;
+  height: 65vh;
+  min-height: 300px;
+  overflow: hidden;
+  background: var(--bg);
+  border: 2px solid var(--muted);
+  cursor: crosshair;
+  user-select: none;
+  touch-action: none;
+}
+.canvas-viewport.dragging { cursor: grabbing; }
+#canvas {
+  position: absolute;
+  top: 0; left: 0;
+  image-rendering: pixelated;
+  transform-origin: 0 0;
+}
+.pixel-cursor {
+  position: absolute;
+  top: 0; left: 0;
+  pointer-events: none;
+  display: none;
+  border: 1px solid rgba(255,255,255,0.9);
+  box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
+  box-sizing: border-box;
+}
+.canvas-coords {
+  position: absolute;
+  bottom: 6px;
+  left: 8px;
+  font-size: .75rem;
+  color: var(--muted);
+  pointer-events: none;
+}
 
 footer { color: var(--muted); }