diff --git a/src/main/resources/META-INF/resources/static/css/app.css b/src/main/resources/META-INF/resources/static/css/app.css
index cc9006d..7c1c1fb 100644
--- a/src/main/resources/META-INF/resources/static/css/app.css
+++ b/src/main/resources/META-INF/resources/static/css/app.css
@@ -1,54 +1,71 @@
 /* ============================================
-   PICO BASE — Flat size, no viewport scaling
+   AMBER CRT TERMINAL THEME
    ============================================ */
 :root {
-  color-scheme: light;
+  color-scheme: dark;
 
+  /* Font */
+  --pico-font-family: 'JetBrains Mono', monospace;
   --pico-font-size: 100%;
 
-  --pico-primary: #059669;
-  --pico-primary-background: #059669;
-  --pico-primary-border: #059669;
-  --pico-primary-color: #ffffff;
-  --pico-primary-underline: rgba(5, 150, 105, 0.5);
-  --pico-primary-hover: #047857;
-  --pico-primary-hover-background: #047857;
-  --pico-primary-hover-border: #047857;
-  --pico-primary-hover-color: #ffffff;
-  --pico-primary-focus: rgba(5, 150, 105, 0.25);
-  --pico-primary-inverse: #ffffff;
+  /* Amber phosphor palette */
+  --amber-bright: #ffb000;
+  --amber-light: #ffd966;
+  --amber-dim: #8b5a00;
+  --amber-glow: rgba(255, 176, 0, 0.35);
+  --amber-bg: #0a0606;
+  --amber-panel: #140c08;
+  --amber-border: #5a3a00;
+  --amber-success: #ffcc66;
+  --amber-error: #ff6b1a;
+  --amber-warning: #ffe066;
 
-  --pico-background-color: #ffffff;
-  --pico-color: #1f2937;
-  --pico-card-background-color: #ffffff;
-  --pico-card-sectioning-background-color: #f9fafb;
-  --pico-card-border-color: #e5e7eb;
+  /* Pico overrides */
+  --pico-primary: #ffbf00;
+  --pico-primary-background: #ffbf00;
+  --pico-primary-border: #ffbf00;
+  --pico-primary-color: #0a0606;
+  --pico-primary-underline: rgba(255, 176, 0, 0.5);
+  --pico-primary-hover: #ffd966;
+  --pico-primary-hover-background: #ffd966;
+  --pico-primary-hover-border: #ffd966;
+  --pico-primary-hover-color: #0a0606;
+  --pico-primary-focus: rgba(255, 176, 0, 0.35);
+  --pico-primary-inverse: #0a0606;
 
-  --pico-h1-color: #111827;
-  --pico-h2-color: #1f2937;
-  --pico-h3-color: #1f2937;
-  --pico-h4-color: #1f2937;
-  --pico-h5-color: #1f2937;
-  --pico-h6-color: #1f2937;
+  --pico-background-color: #0a0606;
+  --pico-color: #ffb000;
+  --pico-card-background-color: #140c08;
+  --pico-card-sectioning-background-color: #1a0f08;
+  --pico-card-border-color: #5a3a00;
 
-  --pico-muted-color: #6b7280;
-  --pico-muted-border-color: #e5e7eb;
+  --pico-h1-color: #ffbf00;
+  --pico-h2-color: #ffb000;
+  --pico-h3-color: #ffd966;
+  --pico-h4-color: #ffb000;
+  --pico-h5-color: #ffb000;
+  --pico-h6-color: #ffb000;
 
-  --pico-form-element-background-color: #ffffff;
-  --pico-form-element-border-color: #d1d5db;
-  --pico-form-element-color: #1f2937;
-  --pico-form-element-placeholder-color: #9ca3af;
-  --pico-form-element-focus-color: #059669;
-  --pico-form-element-active-border-color: #059669;
-  --pico-form-element-disabled-background-color: #f9fafb;
-  --pico-form-element-disabled-border-color: #d1d5db;
+  --pico-muted-color: #8b5a00;
+  --pico-muted-border-color: #5a3a00;
+
+  --pico-form-element-background-color: #0a0606;
+  --pico-form-element-border-color: #5a3a00;
+  --pico-form-element-color: #ffb000;
+  --pico-form-element-placeholder-color: #8b5a00;
+  --pico-form-element-focus-color: #ffbf00;
+  --pico-form-element-focus-border-color: #ffbf00;
+  --pico-form-element-active-border-color: #ffbf00;
+  --pico-form-element-disabled-background-color: #140c08;
+  --pico-form-element-disabled-border-color: #5a3a00;
   --pico-form-element-disabled-opacity: 0.5;
 
-  --pico-table-border-color: #e5e7eb;
-  --pico-table-row-stripped-background-color: #f9fafb;
+  --pico-table-border-color: #5a3a00;
+  --pico-table-row-stripped-background-color: #140c08;
+  --pico-table-row-hover-background-color: #1a0f08;
 
-  --pico-code-background-color: #f3f4f6;
-  --pico-code-color: #1f2937;
+  --pico-code-background-color: #1a0f08;
+  --pico-code-color: #ffd966;
 
   --pico-spacing: 0.75rem;
   --pico-block-spacing-vertical: 1rem;
@@ -59,29 +76,17 @@
   --pico-card-box-shadow: none;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --pico-primary-background: #059669;
-    --pico-primary-border: #059669;
-    --pico-primary-color: #ffffff;
-    --pico-background-color: #ffffff;
-    --pico-color: #1f2937;
-    --pico-card-background-color: #ffffff;
-    --pico-card-sectioning-background-color: #f9fafb;
-    --pico-card-border-color: #e5e7eb;
-    --pico-h1-color: #111827;
-    --pico-h2-color: #1f2937;
-    --pico-muted-color: #6b7280;
-    --pico-muted-border-color: #e5e7eb;
-    --pico-form-element-background-color: #ffffff;
-    --pico-form-element-border-color: #d1d5db;
-    --pico-form-element-color: #1f2937;
-    --pico-table-border-color: #e5e7eb;
-  }
+/* ============================================
+   GLOBAL BODY
+   ============================================ */
+body {
+  background-color: #0a0606;
+  color: #ffb000;
+  font-family: 'JetBrains Mono', monospace;
 }
 
 /* ============================================
-   TYPOGRAPHY — Compact heading scale
+   TYPOGRAPHY
    ============================================ */
 h1 { font-size: 1.5rem; margin: 0 0 0.75rem; line-height: 1.25; font-weight: 700; }
 h2 { font-size: 1.125rem; margin: 0 0 0.5rem; line-height: 1.3; font-weight: 600; }
@@ -90,7 +95,7 @@ h4 { font-size: 0.875rem; margin: 0 0 0.25rem; line-height: 1.4; font-weight: 60
 h5, h6 { font-size: 0.875rem; margin: 0 0 0.25rem; line-height: 1.4; font-weight: 600; }
 
 /* ============================================
-   FORM ELEMENTS — Compact
+   FORM ELEMENTS
    ============================================ */
 input, select, textarea {
   font-size: 0.875rem;
@@ -98,6 +103,33 @@ input, select, textarea {
   margin: 0;
   height: auto;
   line-height: 1.4;
+  background-color: #0a0606;
+  border: 1px solid #5a3a00;
+  color: #ffb000;
+  caret-color: #ffb000;
+  border-radius: 0;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+input:focus, select:focus, textarea:focus {
+  border-color: #ffbf00;
+  box-shadow: 0 0 0 2px rgba(255, 176, 0, 0.25);
+  outline: none;
+}
+
+input[type="number"] {
+  font-family: 'JetBrains Mono', monospace;
+  -moz-appearance: textfield;
+  width: 100%;
+  min-width: 0;
+}
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  opacity: 0.4;
+}
+
+input::placeholder {
+  color: #8b5a00;
 }
 
 label {
@@ -105,65 +137,202 @@ label {
   font-weight: 500;
   margin-bottom: 0.25rem;
   line-height: 1.3;
+  color: #ffb000;
 }
 
 label > span {
   font-size: 0.8125rem;
-  color: var(--pico-muted-color);
-}
-
-input[type="number"] {
-  font-family: monospace;
+  color: #8b5a00;
 }
 
 /* ============================================
-   BUTTONS — Compact
+   BUTTONS
    ============================================ */
 button {
   font-size: 0.875rem;
   padding: 0.375rem 0.875rem;
   margin: 0;
   font-weight: 500;
-  border-radius: 0.25rem;
+  border-radius: 0;
+  font-family: 'JetBrains Mono', monospace;
+  background: transparent;
+  border: 1px solid #ffb000;
+  color: #ffb000;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+button:hover {
+  background: #ffb000;
+  color: #0a0606;
+}
+
+button:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(255, 176, 0, 0.35);
+}
+
+button[disabled], button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: transparent;
+  color: #8b5a00;
+  border-color: #5a3a00;
+}
+
+button.contrast, button[type="submit"] {
+  background: #ffbf00;
+  border-color: #ffbf00;
+  color: #0a0606;
+}
+
+button.contrast:hover, button[type="submit"]:hover {
+  background: #ffd966;
+  border-color: #ffd966;
 }
 
 /* ============================================
-   ARTICLES — Flat, no card shadow
+   TERMINAL WINDOW COMPONENT
+   ============================================ */
+.term-window {
+  background: #140c08;
+  border: 1px solid #5a3a00;
+  margin-bottom: 1rem;
+  position: relative;
+}
+
+.term-titlebar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  background: #1a0f08;
+  border-bottom: 1px solid #5a3a00;
+  font-size: 0.75rem;
+  color: #8b5a00;
+  user-select: none;
+}
+
+.term-titlebar::before {
+  content: '';
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #ffb000;
+  box-shadow: 0 0 6px #ffb000, 0 0 2px #ffb000;
+  flex-shrink: 0;
+}
+
+.term-titlebar span {
+  margin-left: 0.25rem;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.term-body {
+  padding: 1rem;
+}
+
+.term-body h1::before,
+.term-body h2::before {
+  content: '~$ ';
+  color: #8b5a00;
+  font-weight: 400;
+}
+
+.term-body h1::after,
+.term-body h2::after {
+  content: '';
+}
+
+.term-body h1 {
+  display: inline;
+}
+
+/* ============================================
+   ARTICLES (used as panels on pages)
    ============================================ */
 article {
-  background: transparent;
-  box-shadow: none;
+  background: #140c08;
+  border: 1px solid #5a3a00;
   padding: 0;
   margin-bottom: 1.5rem;
-  border: none;
 }
 
 article > header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   margin-bottom: 0.75rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid var(--pico-muted-border-color);
+  padding: 0.375rem 0.75rem;
+  background: #1a0f08;
+  border-bottom: 1px solid #5a3a00;
+  font-size: 0.75rem;
+  color: #8b5a00;
+  user-select: none;
+}
+
+article > header::before {
+  content: '';
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #ffb000;
+  box-shadow: 0 0 6px #ffb000, 0 0 2px #ffb000;
+  flex-shrink: 0;
 }
 
 article > header > h2 {
-  margin-bottom: 0.125rem;
+  margin-bottom: 0;
+  font-size: 0.875rem;
+  color: #ffb000;
 }
 
 article > header > p {
   margin-bottom: 0;
-  font-size: 0.8125rem;
-  color: var(--pico-muted-color);
+  font-size: 0.75rem;
+  color: #8b5a00;
+  margin-left: auto;
+}
+
+@media (max-width: 640px) {
+  article > header { flex-wrap: wrap; }
+  article > header > p { margin-left: 0; flex-basis: 100%; font-size: 0.7rem; }
+  article > header > h2 { flex-grow: 1; }
+}
+
+article > *:not(header) {
+  padding: 0 1rem 1rem;
+}
+
+article > header + * {
+  padding-top: 0;
+}
+
+article > *:first-child:not(header) {
+  padding-top: 1rem;
 }
 
 /* ============================================
-   TABLES — Compact
+   TABLES
    ============================================ */
+.table-wrapper {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 table {
   font-size: 0.875rem;
   width: 100%;
+  border-collapse: collapse;
 }
 
 table th, table td {
   padding: 0.375rem 0.5rem;
+  border-bottom: 1px solid #5a3a00;
+  text-align: left;
 }
 
 table th {
@@ -171,19 +340,25 @@ table th {
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--pico-muted-color);
-  border-bottom: 1px solid var(--pico-muted-border-color);
-  background: var(--pico-card-sectioning-background-color);
+  color: #8b5a00;
+  background: #1a0f08;
+  border-bottom: 1px solid #5a3a00;
 }
 
-table tbody tr:hover { background: var(--pico-tr-hover-background-color); }
-table tfoot tr { background: var(--pico-muted-border-color); }
+table tbody tr:hover { background: #1a0f08; }
+table tfoot tr { background: #140c08; }
 
 /* ============================================
-   CONTAINER — Wider for data tables
+   CONTAINER
    ============================================ */
 .container {
   max-width: 1200px;
+  padding: 0 1rem;
+  margin: 0 auto;
+}
+
+@media (min-width: 768px) {
+  .container { padding: 0 1.5rem; }
 }
 
 /* ============================================
@@ -199,6 +374,17 @@ table tfoot tr { background: var(--pico-muted-border-color); }
   transform-origin: center;
 }
 
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+.cursor-blink::after {
+  content: '_';
+  animation: blink 1s step-end infinite;
+  color: #ffb000;
+}
+
 /* ============================================
    UTILITIES
    ============================================ */
@@ -206,13 +392,13 @@ table tfoot tr { background: var(--pico-muted-border-color); }
 
 .text-right { text-align: right; }
 .text-center { text-align: center; }
-.text-mono { font-family: monospace; }
+.text-mono { font-family: 'JetBrains Mono', monospace; }
 .text-sm { font-size: 0.875rem; }
 .text-xs { font-size: 0.75rem; }
-.text-muted { color: var(--pico-muted-color); }
-.text-success { color: #059669; }
-.text-error { color: #dc2626; }
-.text-warning { color: #d97706; }
+.text-muted { color: #8b5a00; }
+.text-success { color: #ffcc66; }
+.text-error { color: #ff6b1a; }
+.text-warning { color: #ffe066; }
 .text-bold { font-weight: 600; }
 
 .flex-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@@ -221,10 +407,24 @@ table tfoot tr { background: var(--pico-muted-border-color); }
 .justify-end { justify-content: flex-end; }
 
 .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
-.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; }
-.grid-8 { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.75rem; }
+.grid-3 { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
+.grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
+.grid-5 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
+.grid-8 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
 .grid-auto { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
 
+@media (min-width: 640px) {
+  .grid-3 { grid-template-columns: repeat(3, 1fr); }
+  .grid-4 { grid-template-columns: repeat(2, 1fr); }
+  .grid-5 { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media (min-width: 1024px) {
+  .grid-4 { grid-template-columns: repeat(4, 1fr); }
+  .grid-5 { grid-template-columns: repeat(5, 1fr); }
+  .grid-8 { grid-template-columns: repeat(8, 1fr); }
+}
+
 .mb-0 { margin-bottom: 0; }
 .mb-2 { margin-bottom: 0.5rem; }
 .mb-3 { margin-bottom: 0.75rem; }
@@ -241,11 +441,15 @@ table tfoot tr { background: var(--pico-muted-border-color); }
 
 .w-full { width: 100%; }
 .max-w-md { max-width: 28rem; margin-inline: auto; }
+.w-max { width: max-content; }
 
 .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.gap-1 { gap: 0.25rem; }
+.gap-2 { gap: 0.5rem; }
+.gap-4 { gap: 1rem; }
 
 /* ============================================
-   HEADER — Compact global header
+   HEADER
    ============================================ */
 header h1 {
   font-size: 1.125rem !important;
@@ -253,6 +457,7 @@ header h1 {
   margin-bottom: 0.25rem !important;
   line-height: 1.2;
   font-weight: 600;
+  text-shadow: 0 0 8px rgba(255, 176, 0, 0.4);
 }
 
 header hgroup {
@@ -265,7 +470,7 @@ header {
 
 .header-meta {
   font-size: 0.8125rem;
-  color: var(--pico-muted-color);
+  color: #8b5a00;
   margin: 0;
 }
 
@@ -291,7 +496,7 @@ header {
   width: auto;
   justify-content: flex-start;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: 0.5rem 0.75rem;
   align-items: center;
 }
 @media (min-width: 640px) {
@@ -303,28 +508,36 @@ header {
 .header-actions button.link-action {
   background: none;
   border: none;
-  color: var(--pico-primary);
+  color: #ffbf00;
   cursor: pointer;
   text-decoration: underline;
   padding: 0;
   font-size: 0.8125rem;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.header-actions button.link-action + button.link-action::before {
+  content: '│';
+  color: #5a3a00;
+  margin-right: 0.75rem;
 }
 
 .header-actions button.link-action:hover {
-  color: var(--pico-primary-hover);
+  color: #ffd966;
 }
 
 .link-action {
   background: none;
   border: none;
-  color: var(--pico-primary);
+  color: #ffbf00;
   cursor: pointer;
   font-size: 0.875rem;
   text-decoration: underline;
   padding: 0;
+  font-family: 'JetBrains Mono', monospace;
 }
 .link-action:hover {
-  color: var(--pico-primary-hover);
+  color: #ffd966;
 }
 
 /* ============================================
@@ -332,17 +545,20 @@ header {
    ============================================ */
 .modal-backdrop {
   position: fixed; inset: 0;
-  background: rgba(0,0,0,0.4);
+  background: rgba(0,0,0,0.75);
   display: flex; align-items: center; justify-content: center;
   z-index: 50; padding: 1rem;
 }
 .modal-content {
-  background: var(--pico-card-background-color);
-  border-radius: 8px;
+  background: #140c08;
+  border: 1px solid #5a3a00;
   max-width: 90vw; max-height: 90vh;
   overflow-y: auto;
   width: 100%;
 }
+.modal-lg .modal-content {
+  max-width: 900px;
+}
 
 /* ============================================
    BADGES
@@ -351,23 +567,33 @@ header {
   display: inline-block;
   padding: 2px 8px;
   font-size: 0.75rem;
-  border-radius: 4px;
+  border-radius: 0;
   font-weight: 500;
+  border: 1px solid currentColor;
+  font-family: 'JetBrains Mono', monospace;
 }
-.badge-admin { background: #dbeafe; color: #1e3a8a; }
-.badge-warning { background: #fef3c7; color: #92400e; }
-.badge-success { background: #d1fae5; color: #065f46; }
-.badge-error { background: #fee2e2; color: #991b1b; }
-.badge-muted { background: #f3f4f6; color: #6b7280; }
+.badge-admin { color: #ffd966; border-color: #ffd966; background: transparent; }
+.badge-warning { color: #ffe066; border-color: #ffe066; background: transparent; }
+.badge-success { color: #ffcc66; border-color: #ffcc66; background: transparent; }
+.badge-error { color: #ff6b1a; border-color: #ff6b1a; background: transparent; }
+.badge-muted { color: #8b5a00; border-color: #8b5a00; background: transparent; }
 
 /* ============================================
    TABS
    ============================================ */
+.tabs-wrap {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  margin-bottom: 1rem;
+  padding-bottom: 1px;
+}
+
 .tabs {
   display: flex; gap: 4px;
-  border-bottom: 1px solid var(--pico-muted-border-color);
+  border-bottom: 1px solid #5a3a00;
   padding: 0;
-  margin-bottom: 1rem;
+  margin-bottom: 0;
+  min-width: max-content;
 }
 .tabs li { display: contents; }
 .tabs a {
@@ -375,13 +601,19 @@ header {
   text-decoration: none;
   border-bottom: 2px solid transparent;
   margin-bottom: -1px;
-  color: var(--pico-muted-color);
+  color: #8b5a00;
   font-size: 0.875rem;
+  font-family: 'JetBrains Mono', monospace;
+  white-space: nowrap;
 }
 .tabs a.active {
-  border-bottom-color: var(--pico-primary);
-  color: var(--pico-primary);
+  border-bottom-color: #ffbf00;
+  color: #ffd966;
   font-weight: 500;
+  text-shadow: 0 0 6px rgba(255, 176, 0, 0.4);
+}
+.tabs a:hover {
+  color: #ffb000;
 }
 
 /* ============================================
@@ -390,28 +622,30 @@ header {
 .grade-badge {
   display: inline-flex; align-items: center; justify-content: center;
   width: 1.75rem; height: 1.75rem;
-  border-radius: 50%;
-  background: var(--pico-muted-border-color);
+  border-radius: 0;
+  border: 1px solid #5a3a00;
   font-size: 0.75rem; font-weight: 600;
+  color: #ffb000;
+  background: #140c08;
 }
 
 .cell-label {
   font-size: 0.75rem; font-weight: 500;
-  color: var(--pico-muted-color);
+  color: #8b5a00;
   text-transform: uppercase; letter-spacing: 0.05em;
 }
 .cell-input { padding: 0.375rem 0.5rem; }
-.cell-calculated { font-family: monospace; }
+.cell-calculated { font-family: 'JetBrains Mono', monospace; }
 
 /* ============================================
    ALERTS & MESSAGES
    ============================================ */
-.bg-warning { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1rem; }
-.bg-success-light { background: #d1fae5; border: 1px solid #6ee7b7; color: #065f46; padding: 0.75rem 1rem; border-radius: 4px; }
-.bg-error-light { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; padding: 0.75rem 1rem; border-radius: 4px; }
+.bg-warning { background: rgba(255, 224, 102, 0.1); border: 1px solid #ffe066; color: #ffe066; padding: 0.75rem 1rem; margin-bottom: 1rem; }
+.bg-success-light { background: rgba(255, 204, 102, 0.1); border: 1px solid #ffcc66; color: #ffcc66; padding: 0.75rem 1rem; }
+.bg-error-light { background: rgba(255, 107, 26, 0.1); border: 1px solid #ff6b1a; color: #ff6b1a; padding: 0.75rem 1rem; }
 
-.error-msg { color: #991b1b; background: #fee2e2; border: 1px solid #fca5a5; padding: 0.5rem 0.75rem; border-radius: 4px; font-size: 0.875rem; }
-.success-msg { color: #065f46; background: #d1fae5; border: 1px solid #6ee7b7; padding: 0.5rem 0.75rem; border-radius: 4px; font-size: 0.875rem; }
+.error-msg { color: #ff6b1a; background: rgba(255, 107, 26, 0.1); border: 1px solid #ff6b1a; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
+.success-msg { color: #ffcc66; background: rgba(255, 204, 102, 0.1); border: 1px solid #ffcc66; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
 
 /* ============================================
    STATS GRID
@@ -419,13 +653,11 @@ header {
 .stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
 @media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
 
-.w-max { width: max-content; }
-
 /* ============================================
-   LOGIN PAGE — centered card with branding
+   LOGIN PAGE
    ============================================ */
 .login-page {
-  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0f9ff 100%);
+  background: radial-gradient(circle at center, #1a0f08 0%, #0a0606 100%);
   min-height: 100vh;
   display: flex;
   align-items: center;
@@ -436,11 +668,10 @@ header {
 .login-card {
   width: 100%;
   max-width: 26rem;
-  padding: 2.5rem 2rem;
-  border-radius: 12px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
-  background: white;
+  background: #140c08;
+  border: 1px solid #5a3a00;
   margin: 0;
+  position: relative;
 }
 
 .login-logo {
@@ -448,23 +679,22 @@ header {
   height: 72px;
   margin: 0 auto 1rem;
   display: block;
-  filter: drop-shadow(0 2px 4px rgba(5, 150, 105, 0.2));
+  filter: drop-shadow(0 0 8px rgba(255, 176, 0, 0.5));
 }
 
 .login-footer {
   text-align: center;
   margin-top: 1.5rem;
   font-size: 0.75rem;
-  color: var(--pico-muted-color);
+  color: #8b5a00;
 }
 
 /* ============================================
    HISTORIAL — SPARKLINE
    ============================================ */
 .sparkline-container {
-  background: var(--pico-card-sectioning-background-color);
-  border: 1px solid var(--pico-muted-border-color);
-  border-radius: 6px;
+  background: #140c08;
+  border: 1px solid #5a3a00;
   padding: 0.75rem 1rem;
   margin-bottom: 1rem;
 }
@@ -488,12 +718,12 @@ header {
 .sparkline-bar {
   width: 100%;
   min-height: 4px;
-  border-radius: 2px 2px 0 0;
+  border-radius: 0;
   transition: height 0.3s ease;
 }
 
-.bar-positive { background: #059669; }
-.bar-negative { background: #dc2626; }
+.bar-positive { background: #ffb000; }
+.bar-negative { background: #ff6b1a; }
 
 .sparkline-labels {
   display: flex;
@@ -505,9 +735,8 @@ header {
    HISTORIAL — TIPO BREAKDOWN
    ============================================ */
 .tipos-breakdown {
-  background: var(--pico-card-sectioning-background-color);
-  border: 1px solid var(--pico-muted-border-color);
-  border-radius: 6px;
+  background: #140c08;
+  border: 1px solid #5a3a00;
   padding: 0.75rem 1rem;
   margin-bottom: 1.5rem;
 }
@@ -523,19 +752,17 @@ header {
 
 .tipo-bar-track {
   height: 8px;
-  background: var(--pico-muted-border-color);
-  border-radius: 4px;
+  background: #5a3a00;
   overflow: hidden;
 }
 
 .tipo-bar-fill {
   height: 100%;
-  border-radius: 4px;
   transition: width 0.3s ease;
 }
 
-.fill-positive { background: #059669; }
-.fill-negative { background: #dc2626; }
+.fill-positive { background: #ffb000; }
+.fill-negative { background: #ff6b1a; }
 
 /* ============================================
    HISTORIAL — SORTABLE COLUMNS
@@ -546,7 +773,7 @@ header {
   white-space: nowrap;
 }
 
-.sortable:hover { color: var(--pico-primary); }
+.sortable:hover { color: #ffbf00; }
 
 .sort-icon {
   font-size: 0.65rem;
@@ -561,13 +788,13 @@ header {
   display: inline-block;
   font-size: 0.65rem;
   padding: 1px 4px;
-  border-radius: 3px;
   margin-left: 4px;
-  font-family: monospace;
+  font-family: 'JetBrains Mono', monospace;
+  border: 1px solid currentColor;
 }
 
-.delta-up { background: #d1fae5; color: #065f46; }
-.delta-down { background: #fee2e2; color: #991b1b; }
+.delta-up { color: #ff6b1a; }
+.delta-down { color: #ffcc66; }
 
 /* ============================================
    HISTORIAL — TIPO CHIPS
@@ -576,11 +803,11 @@ header {
   display: inline-block;
   font-size: 0.6rem;
   padding: 1px 5px;
-  border-radius: 3px;
-  background: var(--pico-muted-border-color);
-  color: var(--pico-muted-color);
+  background: transparent;
+  border: 1px solid #5a3a00;
+  color: #8b5a00;
   font-weight: 600;
-  font-family: monospace;
+  font-family: 'JetBrains Mono', monospace;
   letter-spacing: 0.3px;
   cursor: help;
 }
@@ -588,21 +815,16 @@ header {
 /* ============================================
    HISTORIAL — METRIC CARDS
    ============================================ */
-.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
-.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
-
 .metric-card {
-  background: var(--pico-card-sectioning-background-color);
-  border: 1px solid var(--pico-muted-border-color);
+  background: #140c08;
+  border: 1px solid #5a3a00;
   padding: 0.625rem 0.75rem;
-  border-radius: 6px;
 }
 
 .metric-card-sm {
   background: transparent;
   border: none;
-  border-top: 1px solid var(--pico-muted-border-color);
-  border-radius: 0;
+  border-top: 1px solid #5a3a00;
   padding: 0.375rem 0;
 }
 
@@ -616,22 +838,22 @@ header {
   display: inline-block;
   padding: 2px 8px;
   font-size: 0.7rem;
-  border-radius: 4px;
   font-weight: 600;
+  border: 1px solid currentColor;
+  font-family: 'JetBrains Mono', monospace;
 }
 
-.badge-profit { background: #d1fae5; color: #065f46; }
-.badge-loss { background: #fee2e2; color: #991b1b; }
-.badge-craft { background: #d1fae5; color: #065f46; }
-.badge-buy { background: #fee2e2; color: #991b1b; }
+.badge-profit { color: #ffcc66; border-color: #ffcc66; }
+.badge-loss { color: #ff6b1a; border-color: #ff6b1a; }
+.badge-craft { color: #ffcc66; border-color: #ffcc66; }
+.badge-buy { color: #ff6b1a; border-color: #ff6b1a; }
 
 /* ============================================
    HISTORIAL — SNAPSHOT SECTION
    ============================================ */
 .snapshot-section {
-  background: var(--pico-card-sectioning-background-color);
-  border: 1px solid var(--pico-muted-border-color);
-  border-radius: 6px;
+  background: #140c08;
+  border: 1px solid #5a3a00;
   padding: 0.75rem 1rem;
   margin-bottom: 1.5rem;
 }
@@ -650,73 +872,65 @@ header {
   font-size: 0.75rem;
 }
 
+@media (max-width: 640px) {
+  .snapshot-row {
+    grid-template-columns: 1fr;
+    gap: 0.25rem;
+  }
+}
+
 /* ============================================
    HISTORIAL — DIFF BADGES
    ============================================ */
 .diff-badge {
   font-size: 0.65rem;
   padding: 1px 4px;
-  border-radius: 3px;
-  font-family: monospace;
+  font-family: 'JetBrains Mono', monospace;
   white-space: nowrap;
+  border: 1px solid currentColor;
 }
 
-.diff-up { background: #fee2e2; color: #991b1b; }
-.diff-down { background: #d1fae5; color: #065f46; }
-.diff-same { background: var(--pico-muted-border-color); color: var(--pico-muted-color); }
-
-/* ============================================
-   MODAL — LARGER
-   ============================================ */
-.modal-lg .modal-content {
-  max-width: 900px;
-}
-
-/* ============================================
-   GAPS
-   ============================================ */
-.gap-1 { gap: 0.25rem; }
-.gap-2 { gap: 0.5rem; }
-.gap-4 { gap: 1rem; }
+.diff-up { color: #ff6b1a; }
+.diff-down { color: #ffcc66; }
+.diff-same { color: #8b5a00; border-color: #8b5a00; }
 
 /* ============================================
    RANKING ROWS
    ============================================ */
-.row-profit { background: #f0fdf4; }
-.row-loss { background: #fff5f5; }
+.row-profit { background: rgba(255, 204, 102, 0.05); }
+.row-loss { background: rgba(255, 107, 26, 0.05); }
 
 /* ============================================
    SALES CARDS
    ============================================ */
 .card-expired { opacity: 0.7; }
-.card-urgent { border-left: 3px solid #dc2626; }
+.card-urgent { border-left: 3px solid #ff6b1a; }
 
 /* ============================================
-   COST SPLIT BAR — distribución de costo (cristales / ore / fee)
+   COST SPLIT BAR
    ============================================ */
 .cost-split-bar {
   display: flex;
   height: 0.75rem;
-  background: var(--pico-muted-border-color);
-  border-radius: 4px;
+  background: #5a3a00;
   overflow: hidden;
-  border: 1px solid var(--pico-muted-border-color);
+  border: 1px solid #5a3a00;
 }
 
 .cost-split-segment-cristales {
-  background: #6366f1;
+  background: #ffd966;
   height: 100%;
   transition: width 0.2s ease-out;
 }
 
 .cost-split-segment-ore {
-  background: #f59e0b;
+  background: #ffb000;
   height: 100%;
   transition: width 0.2s ease-out;
 }
 
 .cost-split-segment-fee {
-  background: #94a3b8;
+  background: #8b5a00;
   height: 100%;
   transition: width 0.2s ease-out;
 }
@@ -725,12 +939,43 @@ header {
   display: inline-block;
   width: 0.6rem;
   height: 0.6rem;
-  border-radius: 2px;
+  border-radius: 0;
   vertical-align: middle;
   margin-right: 0.25rem;
 }
 
-.cost-split-section {
-  /* container for the cost split bar + legend */
+.cost-split-section {}
+
+/* ============================================
+   SCROLLBARS — Webkit
+   ============================================ */
+::-webkit-scrollbar { width: 10px; height: 10px; background: #0a0606; }
+::-webkit-scrollbar-thumb { background: #5a3a00; }
+::-webkit-scrollbar-thumb:hover { background: #8b5a00; }
+::-webkit-scrollbar-corner { background: #0a0606; }
+
+/* ============================================
+   SELECTION
+   ============================================ */
+::selection {
+  background: rgba(255, 176, 0, 0.3);
+  color: #ffd966;
 }
 
+/* ============================================
+   TEXT GLOW — For headings and highlights
+   ============================================ */
+.glow {
+  text-shadow: 0 0 8px rgba(255, 176, 0, 0.5), 0 0 2px rgba(255, 176, 0, 0.3);
+}
+
+.glow-dim {
+  text-shadow: 0 0 4px rgba(255, 176, 0, 0.3);
+}
+
+/* ============================================
+   FOOTER
+   ============================================ */
+footer.container p {
+  color: #8b5a00;
+}
diff --git a/src/main/resources/META-INF/resources/static/favicon.svg b/src/main/resources/META-INF/resources/static/favicon.svg
index 9b1fd6d..16b789e 100644
--- a/src/main/resources/META-INF/resources/static/favicon.svg
+++ b/src/main/resources/META-INF/resources/static/favicon.svg
@@ -1,12 +1,14 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
   <defs>
     <linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#10b981"/>
-      <stop offset="100%" stop-color="#047857"/>
+      <stop offset="0%" stop-color="#ffd966"/>
+      <stop offset="100%" stop-color="#ffb000"/>
     </linearGradient>
   </defs>
-  <path d="M32 6 L52 22 L32 58 L12 22 Z" fill="url(#gem)" stroke="#065f46" stroke-width="2"/>
-  <path d="M32 6 L52 22 L12 22 Z" fill="rgba(255,255,255,0.2)"/>
-  <path d="M32 58 L52 22 L32 22 Z" fill="rgba(0,0,0,0.12)"/>
-  <circle cx="40" cy="14" r="3" fill="white" opacity="0.8"/>
+  <rect width="64" height="64" fill="#0a0606"/>
+  <path d="M32 8 L52 24 L32 56 L12 24 Z" fill="url(#gem)" stroke="#8b5a00" stroke-width="1.5"/>
+  <path d="M32 8 L52 24 L12 24 Z" fill="rgba(255,255,255,0.1)"/>
+  <path d="M32 56 L52 24 L32 24 Z" fill="rgba(0,0,0,0.15)"/>
+  <circle cx="44" cy="14" r="4" fill="#ffb000" opacity="0.9"/>
+  <circle cx="44" cy="14" r="6" fill="none" stroke="#ffb000" stroke-width="1" opacity="0.3"/>
 </svg>
diff --git a/src/main/resources/templates/PageResource/calculadora.html b/src/main/resources/templates/PageResource/calculadora.html
index 5178594..5daa087 100644
--- a/src/main/resources/templates/PageResource/calculadora.html
+++ b/src/main/resources/templates/PageResource/calculadora.html
@@ -1,10 +1,12 @@
 <!doctype html>
-<html lang="es" data-theme="light">
+<html lang="es">
 <head>
   <meta charset="UTF-8"/>
   <link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Calculadora — Calculadora de Craft de Shots</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
   <link rel="stylesheet" href="/static/css/pico.min.css"/>
   <link rel="stylesheet" href="/static/css/app.css"/>
 </head>
diff --git a/src/main/resources/templates/PageResource/changePassword.html b/src/main/resources/templates/PageResource/changePassword.html
index eeeaa29..f6c9474 100644
--- a/src/main/resources/templates/PageResource/changePassword.html
+++ b/src/main/resources/templates/PageResource/changePassword.html
@@ -1,68 +1,73 @@
 <!doctype html>
-<html lang="es" data-theme="light">
+<html lang="es">
 <head>
   <meta charset="UTF-8"/>
   <link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Cambiar contrasena — Calculadora de Craft de Shots</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
   <link rel="stylesheet" href="/static/css/pico.min.css"/>
   <link rel="stylesheet" href="/static/css/app.css"/>
 </head>
 <body class="login-page" x-data="authChangePassword()">
-  <article class="login-card">
-    <svg class="login-logo" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
-         aria-label="Logo">
-      <defs>
-        <linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stop-color="#10b981"/>
-          <stop offset="100%" stop-color="#047857"/>
-        </linearGradient>
-      </defs>
-      <path d="M40 8 L62 28 L40 72 L18 28 Z" fill="url(#gem)" stroke="#065f46" stroke-width="1.5"/>
-      <path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.15)"/>
-      <path d="M40 72 L62 28 L40 28 Z" fill="rgba(0,0,0,0.1)"/>
-      <g class="sparkle">
-        <circle cx="50" cy="18" r="2.5" fill="white"/>
-        <path d="M50 14 L51 18 L50 22 L49 18 Z M46 18 L50 17 L54 18 L50 19 Z"
-              fill="white" opacity="0.7"/>
-      </g>
-    </svg>
+  <article class="term-window login-card">
+    <div class="term-titlebar"><span>shot-crafter:~$</span></div>
+    <div class="term-body">
+      <svg class="login-logo" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
+           aria-label="Logo">
+        <defs>
+          <linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#ffd966"/>
+            <stop offset="100%" stop-color="#ffb000"/>
+          </linearGradient>
+        </defs>
+        <path d="M40 8 L62 28 L40 72 L18 28 Z" fill="url(#gem)" stroke="#8b5a00" stroke-width="1.5"/>
+        <path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.1)"/>
+        <path d="M40 72 L62 28 L40 28 Z" fill="rgba(0,0,0,0.15)"/>
+        <g class="sparkle">
+          <circle cx="50" cy="18" r="2.5" fill="#ffb000"/>
+          <path d="M50 14 L51 18 L50 22 L49 18 Z M46 18 L50 17 L54 18 L50 19 Z"
+                fill="#ffb000" opacity="0.7"/>
+        </g>
+      </svg>
 
-    <hgroup style="text-align:center;margin-bottom:1.5rem">
-      <h1 style="font-size:1.5rem;margin-bottom:0.25rem">Cambiar contrasena</h1>
-      <p style="margin-bottom:0">Debes cambiar tu contrasena antes de continuar.</p>
-    </hgroup>
+      <hgroup style="text-align:center;margin-bottom:1.5rem">
+        <h1 style="font-size:1.25rem;margin-bottom:0.25rem;display:block">Cambiar contrasena</h1>
+        <p style="margin-bottom:0;font-size:0.75rem;color:#8b5a00">Debes cambiar tu contrasena antes de continuar.</p>
+      </hgroup>
 
-    <div x-show="!done">
-      <form @submit.prevent="handleSubmit">
-        <label>Contrasena actual
-          <input type="password" x-model="currentPassword"
-                 autocomplete="current-password" autofocus required minlength="8"/>
-        </label>
-        <label>Nueva contrasena
-          <input type="password" x-model="newPassword"
-                 autocomplete="new-password" required minlength="8"/>
-          <small>Minimo 8 caracteres.</small>
-        </label>
+      <div x-show="!done">
+        <form @submit.prevent="handleSubmit">
+          <label>Contrasena actual
+            <input type="password" x-model="currentPassword"
+                   autocomplete="current-password" autofocus required minlength="8"/>
+          </label>
+          <label>Nueva contrasena
+            <input type="password" x-model="newPassword"
+                   autocomplete="new-password" required minlength="8"/>
+            <small style="color:#8b5a00;font-size:0.7rem">Minimo 8 caracteres.</small>
+          </label>
 
-        <div x-show="error" x-transition class="error-msg" x-text="error"></div>
+          <div x-show="error" x-transition class="error-msg" x-text="error"></div>
 
-        <button type="submit" :disabled="submitting">
-          <span x-show="!submitting">Cambiar contrasena</span>
-          <span x-show="submitting">Procesando…</span>
-        </button>
-      </form>
-    </div>
+          <button type="submit" :disabled="submitting" class="contrast" style="width:100%;margin-top:0.5rem">
+            <span x-show="!submitting">Cambiar contrasena</span>
+            <span x-show="submitting">Procesando...</span>
+          </button>
+        </form>
+      </div>
 
-    <div x-show="done" x-transition class="text-center">
-      <p class="success-msg mb-4">Contrasena actualizada.</p>
-      <p class="text-sm text-muted">Redirigiendo a la app…</p>
+      <div x-show="done" x-transition class="text-center">
+        <p class="success-msg mb-4">Contrasena actualizada.</p>
+        <p class="text-sm text-muted">Redirigiendo a la app...</p>
+      </div>
     </div>
   </article>
 
-  <script src="/static/js/defaults.js?v=5"></script>
-  <script src="/static/js/api.js?v=5"></script>
-  <script src="/static/js/app.js?v=5"></script>
-  <script defer src="/static/js/alpine.min.js?v=5"></script>
+  <script src="/static/js/defaults.js?v=6"></script>
+  <script src="/static/js/api.js?v=6"></script>
+  <script src="/static/js/app.js?v=6"></script>
+  <script defer src="/static/js/alpine.min.js?v=6"></script>
 </body>
 </html>
diff --git a/src/main/resources/templates/PageResource/formulas.html b/src/main/resources/templates/PageResource/formulas.html
index 322e4c5..7292e28 100644
--- a/src/main/resources/templates/PageResource/formulas.html
+++ b/src/main/resources/templates/PageResource/formulas.html
@@ -1,10 +1,12 @@
 <!doctype html>
-<html lang="es" data-theme="light">
+<html lang="es">
 <head>
   <meta charset="UTF-8"/>
   <link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Formulas — Calculadora de Craft de Shots</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
   <link rel="stylesheet" href="/static/css/pico.min.css"/>
   <link rel="stylesheet" href="/static/css/app.css"/>
 </head>
diff --git a/src/main/resources/templates/PageResource/historial.html b/src/main/resources/templates/PageResource/historial.html
index 63ed3ee..5170b57 100644
--- a/src/main/resources/templates/PageResource/historial.html
+++ b/src/main/resources/templates/PageResource/historial.html
@@ -1,10 +1,12 @@
 <!doctype html>
-<html lang="es" data-theme="light">
+<html lang="es">
 <head>
   <meta charset="UTF-8"/>
   <link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Historial — Calculadora de Craft de Shots</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
   <link rel="stylesheet" href="/static/css/pico.min.css"/>
   <link rel="stylesheet" href="/static/css/app.css"/>
 </head>
diff --git a/src/main/resources/templates/PageResource/insumos.html b/src/main/resources/templates/PageResource/insumos.html
index e1260a6..15a0bd2 100644
--- a/src/main/resources/templates/PageResource/insumos.html
+++ b/src/main/resources/templates/PageResource/insumos.html
@@ -1,10 +1,12 @@
 <!doctype html>
-<html lang="es" data-theme="light">
+<html lang="es">
 <head>
   <meta charset="UTF-8"/>
   <link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Insumos — Calculadora de Craft de Shots</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
   <link rel="stylesheet" href="/static/css/pico.min.css"/>
   <link rel="stylesheet" href="/static/css/app.css"/>
 </head>
diff --git a/src/main/resources/templates/PageResource/login.html b/src/main/resources/templates/PageResource/login.html
index f16796f..e29cc52 100644
--- a/src/main/resources/templates/PageResource/login.html
+++ b/src/main/resources/templates/PageResource/login.html
@@ -1,64 +1,69 @@
 <!doctype html>
-<html lang="es" data-theme="light">
+<html lang="es">
 <head>
   <meta charset="UTF-8"/>
   <link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Calculadora de Craft de Shots — Lineage 2</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
   <link rel="stylesheet" href="/static/css/pico.min.css"/>
   <link rel="stylesheet" href="/static/css/app.css"/>
 </head>
 <body class="login-page" x-data="authLogin()">
-  <article class="login-card">
-    <svg class="login-logo" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
-         aria-label="Logo">
-      <defs>
-        <linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stop-color="#10b981"/>
-          <stop offset="100%" stop-color="#047857"/>
-        </linearGradient>
-      </defs>
-      <path d="M40 8 L62 28 L40 72 L18 28 Z" fill="url(#gem)" stroke="#065f46" stroke-width="1.5"/>
-      <path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.15)"/>
-      <path d="M40 72 L62 28 L40 28 Z" fill="rgba(0,0,0,0.1)"/>
-      <g class="sparkle">
-        <circle cx="50" cy="18" r="2.5" fill="white"/>
-        <path d="M50 14 L51 18 L50 22 L49 18 Z M46 18 L50 17 L54 18 L50 19 Z"
-              fill="white" opacity="0.7"/>
-      </g>
-    </svg>
+  <article class="term-window login-card">
+    <div class="term-titlebar"><span>guest@shot-crafter:~$</span></div>
+    <div class="term-body">
+      <svg class="login-logo" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
+           aria-label="Logo">
+        <defs>
+          <linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#ffd966"/>
+            <stop offset="100%" stop-color="#ffb000"/>
+          </linearGradient>
+        </defs>
+        <path d="M40 8 L62 28 L40 72 L18 28 Z" fill="url(#gem)" stroke="#8b5a00" stroke-width="1.5"/>
+        <path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.1)"/>
+        <path d="M40 72 L62 28 L40 28 Z" fill="rgba(0,0,0,0.15)"/>
+        <g class="sparkle">
+          <circle cx="50" cy="18" r="2.5" fill="#ffb000"/>
+          <path d="M50 14 L51 18 L50 22 L49 18 Z M46 18 L50 17 L54 18 L50 19 Z"
+                fill="#ffb000" opacity="0.7"/>
+        </g>
+      </svg>
 
-    <hgroup style="text-align:center;margin-bottom:1.5rem">
-      <h1 style="font-size:1.5rem;margin-bottom:0.25rem">Calculadora de Craft de Shots</h1>
-      <p style="margin-bottom:0">Lineage 2 — Interlude / Clasico</p>
-    </hgroup>
+      <hgroup style="text-align:center;margin-bottom:1.5rem">
+        <h1 style="font-size:1.25rem;margin-bottom:0.25rem;display:block">Calculadora de Craft de Shots</h1>
+        <p style="margin-bottom:0;font-size:0.75rem;color:#8b5a00">Lineage 2 — Interlude / Clasico</p>
+      </hgroup>
 
-    <form @submit.prevent="handleSubmit">
-      <label>Username
-        <input type="text" x-model="username" autocomplete="username" autofocus
-               required minlength="3" maxlength="30"/>
-      </label>
-      <label>Contrasena
-        <input type="password" x-model="password" autocomplete="current-password"
-               required minlength="8"/>
-      </label>
+      <form @submit.prevent="handleSubmit">
+        <label>Username
+          <input type="text" x-model="username" autocomplete="username" autofocus
+                 required minlength="3" maxlength="30"/>
+        </label>
+        <label>Contrasena
+          <input type="password" x-model="password" autocomplete="current-password"
+                 required minlength="8"/>
+        </label>
 
-      <div x-show="error" x-transition class="error-msg" x-text="error"></div>
+        <div x-show="error" x-transition class="error-msg" x-text="error"></div>
 
-      <button type="submit" :disabled="submitting">
-        <span x-show="!submitting">Iniciar sesion</span>
-        <span x-show="submitting">Procesando…</span>
-      </button>
-    </form>
+        <button type="submit" :disabled="submitting" class="contrast" style="width:100%;margin-top:0.5rem">
+          <span x-show="!submitting">Iniciar sesion</span>
+          <span x-show="submitting">Procesando...</span>
+        </button>
+      </form>
 
-    <p class="login-footer">
-      <a href="/register" class="link-action">No tenes cuenta? Crea una</a>
-    </p>
+      <p class="login-footer">
+        <a href="/register" class="link-action">No tenes cuenta? Crea una</a>
+      </p>
+    </div>
   </article>
 
-  <script src="/static/js/defaults.js?v=5"></script>
-  <script src="/static/js/api.js?v=5"></script>
-  <script src="/static/js/app.js?v=5"></script>
-  <script defer src="/static/js/alpine.min.js?v=5"></script>
+  <script src="/static/js/defaults.js?v=6"></script>
+  <script src="/static/js/api.js?v=6"></script>
+  <script src="/static/js/app.js?v=6"></script>
+  <script defer src="/static/js/alpine.min.js?v=6"></script>
 </body>
 </html>
diff --git a/src/main/resources/templates/PageResource/personajes.html b/src/main/resources/templates/PageResource/personajes.html
index 6f904ed..8eacb41 100644
--- a/src/main/resources/templates/PageResource/personajes.html
+++ b/src/main/resources/templates/PageResource/personajes.html
@@ -1,10 +1,12 @@
 <!doctype html>
-<html lang="es" data-theme="light">
+<html lang="es">
 <head>
   <meta charset="UTF-8"/>
   <link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Personajes — Calculadora de Craft de Shots</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
   <link rel="stylesheet" href="/static/css/pico.min.css"/>
   <link rel="stylesheet" href="/static/css/app.css"/>
 </head>
diff --git a/src/main/resources/templates/PageResource/register.html b/src/main/resources/templates/PageResource/register.html
index 1576701..cd2c93c 100644
--- a/src/main/resources/templates/PageResource/register.html
+++ b/src/main/resources/templates/PageResource/register.html
@@ -1,66 +1,71 @@
 <!doctype html>
-<html lang="es" data-theme="light">
+<html lang="es">
 <head>
   <meta charset="UTF-8"/>
   <link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Crear cuenta — Calculadora de Craft de Shots</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
   <link rel="stylesheet" href="/static/css/pico.min.css"/>
   <link rel="stylesheet" href="/static/css/app.css"/>
 </head>
 <body class="login-page" x-data="authRegister()">
-  <article class="login-card">
-    <svg class="login-logo" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
-         aria-label="Logo">
-      <defs>
-        <linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stop-color="#10b981"/>
-          <stop offset="100%" stop-color="#047857"/>
-        </linearGradient>
-      </defs>
-      <path d="M40 8 L62 28 L40 72 L18 28 Z" fill="url(#gem)" stroke="#065f46" stroke-width="1.5"/>
-      <path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.15)"/>
-      <path d="M40 72 L62 28 L40 28 Z" fill="rgba(0,0,0,0.1)"/>
-      <g class="sparkle">
-        <circle cx="50" cy="18" r="2.5" fill="white"/>
-        <path d="M50 14 L51 18 L50 22 L49 18 Z M46 18 L50 17 L54 18 L50 19 Z"
-              fill="white" opacity="0.7"/>
-      </g>
-    </svg>
+  <article class="term-window login-card">
+    <div class="term-titlebar"><span>guest@shot-crafter:~$</span></div>
+    <div class="term-body">
+      <svg class="login-logo" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
+           aria-label="Logo">
+        <defs>
+          <linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#ffd966"/>
+            <stop offset="100%" stop-color="#ffb000"/>
+          </linearGradient>
+        </defs>
+        <path d="M40 8 L62 28 L40 72 L18 28 Z" fill="url(#gem)" stroke="#8b5a00" stroke-width="1.5"/>
+        <path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.1)"/>
+        <path d="M40 72 L62 28 L40 28 Z" fill="rgba(0,0,0,0.15)"/>
+        <g class="sparkle">
+          <circle cx="50" cy="18" r="2.5" fill="#ffb000"/>
+          <path d="M50 14 L51 18 L50 22 L49 18 Z M46 18 L50 17 L54 18 L50 19 Z"
+                fill="#ffb000" opacity="0.7"/>
+        </g>
+      </svg>
 
-    <hgroup style="text-align:center;margin-bottom:1.5rem">
-      <h1 style="font-size:1.5rem;margin-bottom:0.25rem">Crear cuenta</h1>
-      <p style="margin-bottom:0">Unete a la comunidad de crafteo</p>
-    </hgroup>
+      <hgroup style="text-align:center;margin-bottom:1.5rem">
+        <h1 style="font-size:1.25rem;margin-bottom:0.25rem;display:block">Crear cuenta</h1>
+        <p style="margin-bottom:0;font-size:0.75rem;color:#8b5a00">Unete a la comunidad de crafteo</p>
+      </hgroup>
 
-    <form @submit.prevent="handleSubmit">
-      <label>Username
-        <input type="text" x-model="username" autocomplete="username" autofocus
-               required minlength="3" maxlength="30"/>
-        <small>3-30 caracteres, letras, numeros y guion bajo.</small>
-      </label>
-      <label>Contrasena
-        <input type="password" x-model="password" autocomplete="new-password"
-               required minlength="8"/>
-        <small>Minimo 8 caracteres.</small>
-      </label>
+      <form @submit.prevent="handleSubmit">
+        <label>Username
+          <input type="text" x-model="username" autocomplete="username" autofocus
+                 required minlength="3" maxlength="30"/>
+          <small style="color:#8b5a00;font-size:0.7rem">3-30 caracteres, letras, numeros y guion bajo.</small>
+        </label>
+        <label>Contrasena
+          <input type="password" x-model="password" autocomplete="new-password"
+                 required minlength="8"/>
+          <small style="color:#8b5a00;font-size:0.7rem">Minimo 8 caracteres.</small>
+        </label>
 
-      <div x-show="error" x-transition class="error-msg" x-text="error"></div>
+        <div x-show="error" x-transition class="error-msg" x-text="error"></div>
 
-      <button type="submit" :disabled="submitting">
-        <span x-show="!submitting">Crear cuenta</span>
-        <span x-show="submitting">Procesando…</span>
-      </button>
-    </form>
+        <button type="submit" :disabled="submitting" class="contrast" style="width:100%;margin-top:0.5rem">
+          <span x-show="!submitting">Crear cuenta</span>
+          <span x-show="submitting">Procesando...</span>
+        </button>
+      </form>
 
-    <p class="login-footer">
-      <a href="/login" class="link-action">Ya tenes cuenta? Inicia sesion</a>
-    </p>
+      <p class="login-footer">
+        <a href="/login" class="link-action">Ya tenes cuenta? Inicia sesion</a>
+      </p>
+    </div>
   </article>
 
-  <script src="/static/js/defaults.js?v=5"></script>
-  <script src="/static/js/api.js?v=5"></script>
-  <script src="/static/js/app.js?v=5"></script>
-  <script defer src="/static/js/alpine.min.js?v=5"></script>
+  <script src="/static/js/defaults.js?v=6"></script>
+  <script src="/static/js/api.js?v=6"></script>
+  <script src="/static/js/app.js?v=6"></script>
+  <script defer src="/static/js/alpine.min.js?v=6"></script>
 </body>
 </html>
diff --git a/src/main/resources/templates/PageResource/usuarios.html b/src/main/resources/templates/PageResource/usuarios.html
index 351ec04..84bbc61 100644
--- a/src/main/resources/templates/PageResource/usuarios.html
+++ b/src/main/resources/templates/PageResource/usuarios.html
@@ -1,10 +1,12 @@
 <!doctype html>
-<html lang="es" data-theme="light">
+<html lang="es">
 <head>
   <meta charset="UTF-8"/>
   <link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Usuarios — Calculadora de Craft de Shots</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
   <link rel="stylesheet" href="/static/css/pico.min.css"/>
   <link rel="stylesheet" href="/static/css/app.css"/>
 </head>
diff --git a/src/main/resources/templates/PageResource/ventas.html b/src/main/resources/templates/PageResource/ventas.html
index 074d571..a1501c5 100644
--- a/src/main/resources/templates/PageResource/ventas.html
+++ b/src/main/resources/templates/PageResource/ventas.html
@@ -1,10 +1,12 @@
 <!doctype html>
-<html lang="es" data-theme="light">
+<html lang="es">
 <head>
   <meta charset="UTF-8"/>
   <link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Ventas — Calculadora de Craft de Shots</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
   <link rel="stylesheet" href="/static/css/pico.min.css"/>
   <link rel="stylesheet" href="/static/css/app.css"/>
 </head>
diff --git a/src/main/resources/templates/layout/base.html b/src/main/resources/templates/layout/base.html
index e509383..ca55862 100644
--- a/src/main/resources/templates/layout/base.html
+++ b/src/main/resources/templates/layout/base.html
@@ -5,6 +5,8 @@
   <link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>{title ?: 'Calculadora de Craft de Shots'}</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
   <link rel="stylesheet" href="/static/css/styles.css"/>
   <script defer src="/static/js/alpine.min.js"></script>
   <script defer src="/static/js/api.js"></script>
diff --git a/src/main/resources/templates/partials/header.html b/src/main/resources/templates/partials/header.html
index 570f073..08f1375 100644
--- a/src/main/resources/templates/partials/header.html
+++ b/src/main/resources/templates/partials/header.html
@@ -1,4 +1,7 @@
-<header x-data="appHeader()">
+<header x-data="appHeader()" class="term-window">
+  <div class="term-titlebar">
+    <span>shot-crafter@<span x-text="user()?.username || 'local'"></span>:~$</span>
+  </div>
   <div class="container">
     <nav class="header-nav">
       <div>
diff --git a/src/main/resources/templates/partials/tab-bar.html b/src/main/resources/templates/partials/tab-bar.html
index a219ea5..d878972 100644
--- a/src/main/resources/templates/partials/tab-bar.html
+++ b/src/main/resources/templates/partials/tab-bar.html
@@ -1,11 +1,13 @@
 <nav x-data="appTabBar()" class="container">
-  <ul class="tabs">
-    <li><a href="/insumos" :class="activeTab('/insumos')">Insumos</a></li>
-    <li><a href="/formulas" :class="activeTab('/formulas')">Formulas</a></li>
-    <li><a href="/calculadora" :class="activeTab('/calculadora')">Calculadora</a></li>
-    <li><a href="/historial" :class="activeTab('/historial')">Historial</a></li>
-    <li><a href="/ventas" :class="activeTab('/ventas')">Ventas</a></li>
-    <li><a href="/personajes" :class="activeTab('/personajes')">Personajes</a></li>
-    <li x-show="user()?.isAdmin"><a href="/usuarios" :class="activeTab('/usuarios')">Usuarios</a></li>
-  </ul>
+  <div class="tabs-wrap">
+    <ul class="tabs">
+      <li><a href="/insumos" :class="activeTab('/insumos')">Insumos</a></li>
+      <li><a href="/formulas" :class="activeTab('/formulas')">Formulas</a></li>
+      <li><a href="/calculadora" :class="activeTab('/calculadora')">Calculadora</a></li>
+      <li><a href="/historial" :class="activeTab('/historial')">Historial</a></li>
+      <li><a href="/ventas" :class="activeTab('/ventas')">Ventas</a></li>
+      <li><a href="/personajes" :class="activeTab('/personajes')">Personajes</a></li>
+      <li x-show="user()?.isAdmin"><a href="/usuarios" :class="activeTab('/usuarios')">Usuarios</a></li>
+    </ul>
+  </div>
 </nav>
diff --git a/src/main/resources/templates/partials/term-section.html b/src/main/resources/templates/partials/term-section.html
new file mode 100644
index 0000000..7644075
--- /dev/null
+++ b/src/main/resources/templates/partials/term-section.html
@@ -0,0 +1,6 @@
+<section class="term-window">
+  <div class="term-titlebar"><span>{title ?: ''}</span></div>
+  <div class="term-body">
+    {#insert body /}
+  </div>
+</section>