diff --git a/index.html b/index.html
index aa2a10d..1c3e4dd 100644
--- a/index.html
+++ b/index.html
@@ -188,6 +188,26 @@
Augmenta × Three.js
+
+
diff --git a/src/styles.css b/src/styles.css
index 926708c..a147ab8 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -135,6 +135,8 @@ button, input, select { font: inherit; }
width: var(--sidebar-width);
min-width: 0;
height: 100%;
+ display: flex;
+ flex-direction: column;
overflow-y: auto;
border-left: 1px solid #252a35;
background: rgba(17, 20, 26, 0.84);
@@ -151,6 +153,67 @@ button, input, select { font: inherit; }
pointer-events: none;
}
+.sidebar-footer {
+ margin-top: auto;
+ padding: 15px 18px 16px;
+ border-top: 1px solid #252a35;
+ color: #8f99aa;
+ background: rgba(12, 15, 20, .3);
+}
+
+.sidebar-footer-app {
+ display: grid;
+ gap: 2px;
+}
+
+.sidebar-footer-title {
+ color: #dbe1eb;
+ font-size: 11.5px;
+ font-weight: 650;
+ letter-spacing: .01em;
+}
+
+.sidebar-footer-subtitle {
+ color: #737d8e;
+ font-size: 9.5px;
+ line-height: 1.35;
+}
+
+.sidebar-footer-meta {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ margin-top: 10px;
+ font-size: 9.5px;
+}
+
+.sidebar-footer-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ color: #9da7b9;
+ text-decoration: none;
+ transition: color 120ms ease;
+}
+
+.sidebar-footer-link:hover {
+ color: var(--accent-hover);
+}
+
+.sidebar-footer-link:focus-visible {
+ outline: 1px solid var(--accent);
+ outline-offset: 3px;
+ border-radius: 2px;
+}
+
+.sidebar-footer-link img {
+ display: block;
+ width: 16px;
+ height: 16px;
+ object-fit: contain;
+}
+
/* Desktop resize strip: invisible until the panel edge is hovered/focused. */
.sidebar-resizer {
position: absolute;
@@ -371,6 +434,7 @@ button.subtle-button.active:hover {
/* Sidebar section hierarchy: compact top-level sections with denser Advanced controls. */
.panel-section {
+ flex: 0 0 auto;
--section-title-size: 13px;
--advanced-title-size: 10.5px;
--disclosure-chevron-size: .54em;