Share one secret display style and add the architecture atlas

The API key block and the workspace editor password each carried their
own copy of the same monospace, break-all, boxed styling. Both now use a
single secret-value class in base.css, so a new secret surface inherits
the presentation instead of duplicating it.

ARCHITECTURE.md is a structural overview of the application derived from
the source tree, the live schema and the imported app object, linked
from the README.

devplacepy/static/css/base.css

@@ -481,6 +481,18 @@ img {
     font-size: 0.8125rem;
 }
 
+.secret-value {
+    display: block;
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    word-break: break-all;
+    padding: var(--space-sm);
+    margin-bottom: var(--space-sm);
+    background: var(--bg-input);
+    color: var(--text-primary);
+    border-radius: var(--radius);
+}
+
 .btn-icon {
     padding: 0.5rem;
     border-radius: var(--radius);

devplacepy/static/css/profile.css

@@ -396,18 +396,6 @@ a.profile-stat-value:hover {
     color: var(--accent);
 }
 
-.api-key-value {
-    display: block;
-    font-family: "JetBrains Mono", "Fira Code", monospace;
-    font-size: 0.8125rem;
-    word-break: break-all;
-    padding: 0.5rem;
-    background: var(--bg-input);
-    color: var(--text-primary);
-    border-radius: 6px;
-    margin-bottom: 0.5rem;
-}
-
 .api-key-actions {
     display: flex;
     flex-wrap: wrap;

devplacepy/static/css/workspace.css

@@ -45,19 +45,6 @@
     align-items: center;
 }
 
-.workspace-password {
-    color: var(--text-muted);
-}
-
-.workspace-password code {
-    color: var(--text-primary);
-    background: var(--bg-input);
-    font-family: var(--font-mono);
-    padding: var(--space-xs) var(--space-sm);
-    border-radius: var(--radius);
-    user-select: all;
-}
-
 .workspace-tunnel-list {
     list-style: none;
     padding: 0;

devplacepy/templates/profile.html

@@ -173,7 +173,7 @@
                 <span class="api-key-title">API Key</span>
                 <a href="/docs/authentication.html" class="api-key-docs">Docs</a>
             </div>
-            <code class="api-key-value" data-api-key data-key="{{ api_key }}" data-masked="true">{{ '•' * 12 }}</code>
+            <code class="secret-value" data-api-key data-key="{{ api_key }}" data-masked="true">{{ '•' * 12 }}</code>
             <div class="api-key-actions">
                 <button type="button" class="btn btn-sm" data-api-key-reveal>Reveal</button>
                 <button type="button" class="btn btn-sm" data-api-key-copy>Copy</button>
@@ -291,7 +291,7 @@
                 <button type="button" class="btn btn-sm" data-telegram-unpair {% if not telegram_paired %}hidden{% endif %}>Disconnect</button>
             </div>
             <div class="telegram-code" data-telegram-code hidden>
-                <code class="api-key-value" data-telegram-code-value></code>
+                <code class="secret-value" data-telegram-code-value></code>
                 <p class="customization-hint" data-telegram-code-hint></p>
             </div>
             <span class="ai-correction-status" data-telegram-status-msg role="status" aria-live="polite"></span>

devplacepy/templates/workspace.html

@@ -70,7 +70,8 @@
       </form>
       {% endif %}
       {% if editor_password %}
-      <span class="workspace-password">Editor password <code>{{ editor_password }}</code></span>
+      <code class="secret-value" id="editor-password">{{ editor_password }}</code>
+      <button type="button" class="btn btn-sm" data-copy="editor-password">Copy password</button>
       {% endif %}
       <form method="post" action="/projects/{{ project.slug or project.uid }}/workspace/delete">
         <button type="submit" data-confirm="Delete this workspace?" data-confirm-danger class="btn btn-danger">Delete</button>
@@ -93,7 +94,7 @@
         {% if tunnel.last_error %}<span class="workspace-error">{{ tunnel.last_error }}</span>{% endif %}
         <form method="post"
               action="/projects/{{ project.slug or project.uid }}/workspace/tunnels/{{ tunnel.uid }}/delete">
-          <button type="submit" data-confirm="Remove this tunnel?" data-confirm-danger class="btn btn-small">Remove</button>
+          <button type="submit" data-confirm="Remove this tunnel?" data-confirm-danger class="btn btn-sm">Remove</button>
         </form>
       </li>
       {% else %}