diff --git a/src/styles.css b/src/styles.css
index 258df30..a0bb330 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -249,8 +249,10 @@ label { display: grid; gap: 9px; margin-bottom: var(--space-2xl); color: var(--c
 }
 
 .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
-input, select { width: 100%; padding: var(--space-md) 13px; color: var(--color-text-primary); background: var(--color-input-bg); border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); outline: none; }
-input:focus, select:focus { border-color: var(--color-accent); }
+input, select { width: 100%; padding: var(--space-md) 13px; color: var(--color-text-primary); background: var(--color-input-bg); border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
+input:focus, select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-subtle); }
+input:invalid, select:invalid { border-color: #ff6b6b; }
+input:invalid:focus, select:invalid:focus { border-color: #ff6b6b; box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1); }
 .check { display: flex; align-items: center; justify-content: space-between; }
 .check-content { display: flex; align-items: center; gap: var(--space-sm); }
 .check input { width: auto; accent-color: var(--color-accent); }
@@ -269,6 +271,33 @@ footer { display: flex; justify-content: space-between; padding: 34px var(--page
   .nav-links a { max-width: 140px; }
 }
 
+/* Tablet-specific spacing for section headers (#186) */
+@media (min-width: 601px) and (max-width: 900px) {
+  section header {
+    margin-bottom: 60px;
+  }
+  h2 {
+    margin: var(--space-lg) 0 var(--space-xl);
+  }
+  .eyebrow {
+    margin-bottom: var(--space-xs);
+  }
+}
+
+/* Portrait tablet layout for module cards (#187) */
+@media (min-width: 601px) and (max-width: 768px) and (orientation: portrait) {
+  .module-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .module-grid article {
+    min-height: 190px;
+    padding: var(--space-3xl) var(--space-2xl);
+  }
+  .module-grid h3 {
+    margin: var(--space-4xl) 0 var(--space-sm);
+  }
+}
+
 @media (max-width: 600px) {
   nav {
     height: auto;
@@ -290,6 +319,47 @@ footer { display: flex; justify-content: space-between; padding: 34px var(--page
   .module-grid { grid-template-columns: 1fr; }
   .row { grid-template-columns: 1fr; }
   .actions { flex-direction: column; }
-  .terminal pre { padding: 22px; font-size: .7rem; }
   footer { gap: 20px; }
 }
+
+/* Improved terminal layout on narrow phones (#181) */
+@media (max-width: 420px) {
+  .terminal {
+    transform: none;
+    border-radius: var(--radius-lg);
+  }
+  .terminal-top {
+    height: 42px;
+    padding: 0 var(--space-md);
+    font-size: .65rem;
+  }
+  .terminal-top i {
+    width: 7px;
+    height: 7px;
+  }
+  .terminal pre {
+    padding: 18px 16px;
+    font-size: .68rem;
+    line-height: 1.7;
+  }
+  .pass {
+    padding: var(--space-md) var(--space-lg);
+    font-size: .7rem;
+  }
+}
+
+/* Responsive visual treatment for inline validation (#185) */
+@media (max-width: 600px) {
+  input:focus, select:focus {
+    box-shadow: 0 0 0 2px var(--color-accent-subtle);
+  }
+  input:invalid:focus, select:invalid:focus {
+    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.08);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  input, select {
+    transition: none;
+  }
+}