From 592cce580ea8e2bab3fc3fbf1eeb72f3c30951b8 Mon Sep 17 00:00:00 2001
From: Daniel Dada <doesdeos@gmail.com>
Date: Fri, 6 Feb 2026 12:31:12 +0300
Subject: [PATCH] styles refactor

---
 list-manager/list-manager.css  | 385 +++------------------------------
 list-manager/list-manager.html |  18 +-
 popup/popup.css                | 331 +++-------------------------
 popup/popup.html               |  12 +-
 shared/base.css                |  18 ++
 shared/layout.css              | 117 ++++++++++
 shared/word-list.css           | 272 +++++++++++++++++++++++
 7 files changed, 476 insertions(+), 677 deletions(-)
 create mode 100644 shared/base.css
 create mode 100644 shared/layout.css
 create mode 100644 shared/word-list.css

diff --git a/list-manager/list-manager.css b/list-manager/list-manager.css
index 24a14bc..691e2fd 100644
--- a/list-manager/list-manager.css
+++ b/list-manager/list-manager.css
@@ -1,29 +1,17 @@
 @import url('../shared/fonts.css');
 @import url('../shared/colors.css');
+@import url('../shared/base.css');
+@import url('../shared/layout.css');
+@import url('../shared/word-list.css');
 @import url('../shared/ui-components.css');
 
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
 html {
   height: 100%;
 }
 
 body {
-  font-family: var(--font-sans);
-  font-size: var(--text-base);
-  line-height: var(--leading-normal);
-  letter-spacing: var(--tracking-tight);
-  margin: 0;
-  background: var(--bg-color);
-  color: var(--text-color);
   height: 100%;
   overflow: hidden;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
 .app {
@@ -43,96 +31,15 @@ body {
   border-radius: 6px;
 }
 
-.topbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+/* List-manager–specific: compact header padding; shared .app-header does the rest */
+.topbar.app-header {
   padding: 8px 16px;
-  background: var(--bg-color);
-  border-bottom: 1px solid var(--input-border);
-  flex-shrink: 0;
 }
 
-.title {
-  display: flex;
-  align-items: center;
+.title.app-header-content {
   gap: 10px;
 }
 
-.title img {
-  height: 28px;
-  width: 28px;
-  border-radius: 8px;
-  background: var(--text-color);
-  padding: 4px;
-  object-fit: contain;
-}
-
-html.dark .title img,
-body.dark .title img {
-  background: var(--highlight-tag);
-}
-
-.name {
-  font-weight: 600;
-  font-size: 13px;
-  color: var(--text-color);
-}
-
-.subtitle {
-  font-size: 11px;
-  opacity: 0.6;
-}
-
-.topbar-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.topbar-actions button {
-  min-height: 28px;
-  padding: 4px 10px;
-  font-size: 12px;
-  border-radius: 6px;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.topbar-actions button.primary {
-  background: rgba(255, 140, 0, 0.1);
-  color: var(--accent);
-  border: 1px solid rgba(255, 140, 0, 0.35);
-}
-
-.topbar-actions button.primary:hover {
-  background: rgba(255, 140, 0, 0.18);
-  border-color: rgba(255, 140, 0, 0.5);
-}
-
-html.dark .topbar-actions button.primary,
-body.dark .topbar-actions button.primary {
-  background: rgba(255, 140, 0, 0.12);
-  border-color: rgba(255, 140, 0, 0.4);
-}
-
-html.dark .topbar-actions button.primary:hover,
-body.dark .topbar-actions button.primary:hover {
-  background: rgba(255, 140, 0, 0.2);
-  border-color: rgba(255, 140, 0, 0.55);
-}
-
-.topbar-actions button.ghost {
-  background: var(--input-bg);
-  border: 1px solid var(--input-border);
-  color: var(--text-color);
-}
-
-.topbar-actions button.ghost:hover {
-  background: var(--section-bg);
-}
-
 .topbar-actions .icon-toggle {
   width: 28px;
   height: 28px;
@@ -217,17 +124,6 @@ body.dark .topbar-actions button.primary:hover {
   background: var(--section-bg);
 }
 
-.lists-panel .panel-actions button.danger {
-  background: rgba(239, 68, 68, 0.08);
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  color: var(--danger);
-}
-
-.lists-panel .panel-actions button.danger:hover {
-  background: rgba(239, 68, 68, 0.15);
-  border-color: rgba(239, 68, 68, 0.45);
-}
-
 .panel-actions.secondary {
   margin-top: 0;
   gap: 6px;
@@ -441,23 +337,7 @@ body.dark .list-item.selected {
   align-items: flex-start;
 }
 
-.add-words textarea {
-  flex: 1;
-  min-height: 56px;
-  resize: vertical;
-  background: var(--input-bg);
-  color: var(--text-color);
-  border: 1px solid var(--input-border);
-  border-radius: 8px;
-  padding: 6px 10px;
-  font-size: 13px;
-}
-
-.add-words textarea:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
+/* List-manager–specific: add-words button width; shared word-list.css does the rest */
 .add-words button {
   min-width: 100px;
   height: 32px;
@@ -466,62 +346,38 @@ body.dark .list-item.selected {
   flex-shrink: 0;
 }
 
-.add-words button.primary {
-  background: rgba(255, 140, 0, 0.1);
-  color: var(--accent);
-  border: 1px solid rgba(255, 140, 0, 0.35);
+.word-controls input[type="text"],
+.word-controls select {
+  flex: 1;
+  min-width: 140px;
+  min-height: 32px;
+  padding: 0 10px;
+  font-size: 14px;
+  border-radius: 8px;
 }
 
-.add-words button.primary:hover {
-  background: rgba(255, 140, 0, 0.18);
-  border-color: rgba(255, 140, 0, 0.5);
+/* Search/move row: align input, select and buttons to same height */
+.word-controls .row:has(#wordSearch) button {
+  height: 32px;
 }
 
-html.dark .add-words button.primary,
-body.dark .add-words button.primary {
-  background: rgba(255, 140, 0, 0.12);
-  border-color: rgba(255, 140, 0, 0.4);
+.word-item .word-item-eye-toggle {
+  flex-shrink: 0;
 }
 
-html.dark .add-words button.primary:hover,
-body.dark .add-words button.primary:hover {
-  background: rgba(255, 140, 0, 0.2);
-  border-color: rgba(255, 140, 0, 0.55);
-}
-
-/* Word controls: action row matches popup .word-actions-row / .word-action-btn */
-.word-controls .row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  align-items: center;
-}
-
-.word-controls .row button {
-  height: 26px;
-  padding: 0 8px;
-  font-size: 12px;
+.app input[type="color"] {
+  padding: 0;
+  height: 32px;
   border-radius: 6px;
-  background: var(--input-bg);
   border: 1px solid var(--input-border);
-  color: var(--text-color);
+  cursor: pointer;
 }
 
-.word-controls .row button:hover {
-  background: var(--section-bg);
+.app input[type="color"]:hover {
+  border-color: var(--accent);
 }
 
-.word-controls .row button.danger {
-  background: rgba(239, 68, 68, 0.1);
-  border-color: rgba(239, 68, 68, 0.3);
-  color: var(--danger);
-}
-
-.word-controls .row button.danger:hover {
-  background: rgba(239, 68, 68, 0.2);
-}
-
-/* Subdued primary/danger in list manager – outline style, less distracting */
+/* Subdued primary for compact buttons (e.g. Apply list settings) */
 .compact-btn.primary {
   background: rgba(255, 140, 0, 0.1);
   color: var(--accent);
@@ -545,193 +401,6 @@ body.dark .compact-btn.primary:hover {
   border-color: rgba(255, 140, 0, 0.55);
 }
 
-.word-controls input[type="text"],
-.word-controls select {
-  flex: 1;
-  min-width: 140px;
-  min-height: 32px;
-  padding: 0 10px;
-  font-size: 14px;
-  border-radius: 8px;
-}
-
-#wordSearch {
-  height: 32px;
-  padding: 0 10px;
-  font-size: 14px;
-  border-radius: 8px;
-}
-
-/* Search/move row: align input, select and buttons to same height */
-.word-controls .row:has(#wordSearch) button {
-  height: 32px;
-}
-
-/* Word list container – matches popup .word-list-container */
-.word-list {
-  flex: 1;
-  overflow-y: auto;
-  background: var(--input-bg);
-  border: 1px solid var(--input-border);
-  border-radius: 8px;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.word-list .empty {
-  padding: 16px;
-  text-align: center;
-  font-size: 14px;
-  color: var(--text-color);
-  opacity: 0.6;
-}
-
-/* Word item – matches popup .word-item (flex row, border-bottom, left accent when selected) */
-.word-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
-  cursor: pointer;
-  transition: all 0.2s;
-  border-bottom: 1px solid var(--input-border);
-  min-width: 0;
-}
-
-.word-item:last-child {
-  border-bottom: none;
-}
-
-.word-item:hover {
-  background: var(--highlight-tag);
-}
-
-.word-item.selected {
-  background: var(--section-bg);
-  border-left: 3px solid var(--accent);
-  padding-left: 9px;
-}
-
-.word-item.disabled {
-  opacity: 0.5;
-}
-
-.word-text {
-  flex: 1;
-  font-size: 14px;
-  color: var(--text-color);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  user-select: none;
-}
-
-.word-text.editing {
-  display: none;
-}
-
-.word-edit-input {
-  display: none;
-  flex: 1;
-  height: 28px;
-  padding: 0 8px;
-  background: var(--bg-color);
-  border: 1px solid var(--accent);
-  border-radius: 4px;
-  font-size: 14px;
-  color: var(--text-color);
-  min-width: 0;
-}
-
-.word-edit-input:focus {
-  outline: none;
-}
-
-.word-edit-input.active {
-  display: block;
-}
-
-.word-actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-shrink: 0;
-  pointer-events: auto;
-}
-
-.word-actions > * {
-  pointer-events: auto;
-}
-
-/* Word item icon button – matches popup .word-item-icon-btn */
-.word-item .icon-btn {
-  width: 28px;
-  height: 28px;
-  min-width: 28px;
-  min-height: 28px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  color: var(--text-color);
-  opacity: 0.6;
-}
-
-.word-item .icon-btn:hover {
-  opacity: 1;
-  background: var(--highlight-tag);
-  color: var(--accent);
-}
-
-.word-item .icon-btn i {
-  font-size: 14px;
-}
-
-/* Word item color picker – matches popup .word-item-color-picker */
-.word-item input[type="color"] {
-  width: 28px;
-  height: 28px;
-  border-radius: 4px;
-  border: 1px solid var(--input-border);
-  cursor: pointer;
-  padding: 0;
-  flex-shrink: 0;
-}
-
-.word-item input[type="color"]::-webkit-color-swatch-wrapper {
-  padding: 0;
-  border-radius: 3px;
-}
-
-.word-item input[type="color"]::-webkit-color-swatch {
-  border: none;
-  border-radius: 3px;
-}
-
-.word-item input[type="color"]:hover {
-  border-color: var(--accent);
-}
-
-.word-item .word-item-eye-toggle {
-  flex-shrink: 0;
-}
-
-
-
-.app input[type="color"] {
-  padding: 0;
-  height: 32px;
-  border-radius: 6px;
-  border: 1px solid var(--input-border);
-  cursor: pointer;
-}
-
-.app input[type="color"]:hover {
-  border-color: var(--accent);
-}
-
 .colors input[type="color"] {
   width: 100%;
 }
diff --git a/list-manager/list-manager.html b/list-manager/list-manager.html
index e2df92f..84c2db5 100644
--- a/list-manager/list-manager.html
+++ b/list-manager/list-manager.html
@@ -11,22 +11,24 @@
 
 <body>
   <div class="app">
-    <header class="topbar">
-      <div class="title">
-        <img src="../img/logo-outlined.png" alt="Goose Highlighter" />
+    <header class="topbar app-header">
+      <div class="title app-header-content">
+        <div class="app-logo">
+          <img src="../img/logo-outlined.png" alt="Goose Highlighter" />
+        </div>
         <div>
-          <div class="name" data-i18n="extension_name">Goose Highlighter</div>
-          <div class="subtitle" data-i18n="list_manager_title">List Manager</div>
+          <div class="name app-title" data-i18n="extension_name">Goose Highlighter</div>
+          <div class="subtitle app-subtitle" data-i18n="list_manager_title">List Manager</div>
         </div>
       </div>
-<div class="topbar-actions">
+      <div class="topbar-actions app-header-actions">
         <label class="icon-toggle" data-i18n-title="toggle_dark_mode_title" title="Toggle dark mode">
           <input type="checkbox" class="hidden-toggle" id="themeToggle" />
           <i class="toggle-icon theme-icon fa-solid"></i>
         </label>
         <button id="importListBtn" class="ghost"><i class="fa-solid fa-upload"></i> <span data-i18n="import_list">Import List</span></button>
         <button id="exportListBtn" class="ghost"><i class="fa-solid fa-download"></i> <span data-i18n="export_list">Export List</span></button>
-        <button id="newListBtn" class="primary"><i class="fa-solid fa-plus"></i> <span data-i18n="new_list">New List</span></button>
+        <button id="newListBtn" class="btn-primary-subdued"><i class="fa-solid fa-plus"></i> <span data-i18n="new_list">New List</span></button>
       </div>
       <input type="file" id="importFileInput" accept=".json" style="display: none;" />
     </header>
@@ -73,7 +75,7 @@
         <div class="word-controls">
           <div class="add-words">
             <textarea id="bulkAddWords" data-i18n="paste_hint" placeholder="Paste words here..."></textarea>
-            <button id="addWordsBtn" class="primary"><i class="fa-solid fa-plus"></i> <span data-i18n="add_words">Add Words</span></button>
+            <button id="addWordsBtn" class="btn-primary-subdued"><i class="fa-solid fa-plus"></i> <span data-i18n="add_words">Add Words</span></button>
           </div>
           <div class="row">
             <button id="selectAllWordsBtn" data-i18n="select_all">Select All</button>
diff --git a/popup/popup.css b/popup/popup.css
index ff99c86..d961caa 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -1,27 +1,15 @@
 @import url('../shared/fonts.css');
 @import url('../shared/colors.css');
+@import url('../shared/base.css');
+@import url('../shared/layout.css');
+@import url('../shared/word-list.css');
 @import url('../shared/ui-components.css');
 
-/* Reset and Base Styles */
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
 body {
-  font-family: var(--font-sans);
-  font-size: var(--text-base);
-  line-height: var(--leading-normal);
-  letter-spacing: var(--tracking-tight);
-  background: var(--bg-color);
-  color: var(--text-color);
   width: 380px;
   min-height: 500px;
   max-height: 600px;
   overflow: hidden;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   display: flex;
   flex-direction: column;
 }
@@ -71,57 +59,18 @@ body {
   min-height: 0;
 }
 
-/* Header */
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+/* Popup header uses shared .app-header; override padding only */
+.header.app-header {
   padding: 6px 12px;
-  border-bottom: 1px solid var(--input-border);
-  background: var(--bg-color);
-  flex-shrink: 0;
 }
 
-.header-content {
-  display: flex;
-  align-items: center;
+.header-content.app-header-content {
   gap: 6px;
 }
 
-.header-logo {
-  width: 28px;
-  height: 28px;
-  border-radius: 8px;
-  background: var(--text-color);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-}
-
-html.dark .header-logo,
-body.dark .header-logo {
-  background: var(--highlight-tag);
-}
-
-.header-logo img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.header-title {
+.header-title.app-title {
   font-size: var(--text-base);
-  font-weight: 600;
   letter-spacing: var(--tracking-tight);
-  color: var(--text-color);
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
 }
 
 .header-settings-btn,
@@ -135,9 +84,6 @@ body.dark .header-logo {
   min-height: 28px;
   padding: 0;
   line-height: 0;
-}
-
-.header-settings-btn {
   flex-shrink: 0;
 }
 
@@ -590,7 +536,7 @@ body.dark .header-logo {
   opacity: 0.6;
 }
 
-/* Apply Button – same subdued primary style as list-manager */
+/* Apply button uses shared .btn-primary-subdued */
 .apply-button {
   width: 100%;
   height: 32px;
@@ -598,9 +544,6 @@ body.dark .header-logo {
   align-items: center;
   justify-content: center;
   gap: 8px;
-  background: rgba(255, 140, 0, 0.1);
-  color: var(--accent);
-  border: 1px solid rgba(255, 140, 0, 0.35);
   border-radius: 6px;
   cursor: pointer;
   font-size: var(--text-base);
@@ -609,28 +552,11 @@ body.dark .header-logo {
   transition: all 0.2s;
 }
 
-.apply-button:hover {
-  background: rgba(255, 140, 0, 0.18);
-  border-color: rgba(255, 140, 0, 0.5);
-}
-
-html.dark .apply-button,
-body.dark .apply-button {
-  background: rgba(255, 140, 0, 0.12);
-  border-color: rgba(255, 140, 0, 0.4);
-}
-
-html.dark .apply-button:hover,
-body.dark .apply-button:hover {
-  background: rgba(255, 140, 0, 0.2);
-  border-color: rgba(255, 140, 0, 0.55);
-}
-
 .apply-button i {
   font-size: 14px;
 }
 
-/* Words Tab Styles */
+/* Words Tab Styles – layout only; shared word-list.css does the rest */
 .add-words-section {
   display: flex;
   flex-direction: column;
@@ -658,15 +584,25 @@ body.dark .apply-button:hover {
   opacity: 1;
 }
 
-.add-words-textarea {
-  min-height: 56px;
-  padding: 6px 8px;
-  background: var(--input-bg);
-  border: 1px solid var(--input-border);
+.add-words-button {
+  width: 100%;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border-radius: 8px;
+  cursor: pointer;
   font-size: var(--text-md);
-  color: var(--text-color);
-  font-family: var(--font-sans);
+  font-weight: 600;
+  transition: all 0.2s;
+}
+
+.add-words-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.add-words-textarea {
   resize: none;
   line-height: var(--leading-relaxed);
 }
@@ -675,50 +611,6 @@ body.dark .apply-button:hover {
   font-size: 12px;
 }
 
-.add-words-textarea:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-.add-words-button {
-  width: 100%;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(255, 140, 0, 0.1);
-  color: var(--accent);
-  border: 1px solid rgba(255, 140, 0, 0.35);
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: var(--text-md);
-  font-weight: 600;
-  transition: all 0.2s;
-}
-
-.add-words-button:hover {
-  background: rgba(255, 140, 0, 0.18);
-  border-color: rgba(255, 140, 0, 0.5);
-}
-
-html.dark .add-words-button,
-body.dark .add-words-button {
-  background: rgba(255, 140, 0, 0.12);
-  border-color: rgba(255, 140, 0, 0.4);
-}
-
-html.dark .add-words-button:hover,
-body.dark .add-words-button:hover {
-  background: rgba(255, 140, 0, 0.2);
-  border-color: rgba(255, 140, 0, 0.55);
-}
-
-.add-words-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Word List Section */
 .word-list-section {
   display: flex;
   flex-direction: column;
@@ -733,188 +625,17 @@ body.dark .add-words-button:hover {
   justify-content: space-between;
 }
 
-.word-actions-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.word-action-btn {
-  height: 26px;
-  padding: 0 8px;
-  background: var(--input-bg);
-  border: 1px solid var(--input-border);
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: var(--text-sm);
-  font-weight: 500;
-  color: var(--text-color);
-  transition: all 0.2s;
-}
-
-.word-action-btn:hover {
-  background: var(--section-bg);
-}
-
 .word-action-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.word-action-btn.danger {
-  background: rgba(239, 68, 68, 0.1);
-  border-color: rgba(239, 68, 68, 0.3);
-  color: var(--danger);
-}
-
-.word-action-btn.danger:hover {
-  background: rgba(239, 68, 68, 0.2);
-}
-
-/* Word Search */
 .word-search-wrapper {
   position: relative;
 }
 
-.word-search-input {
-  width: 100%;
-  height: 32px;
-  padding: 0 12px;
-  background: var(--input-bg);
-  border: 1px solid var(--input-border);
-  border-radius: 8px;
-  font-size: var(--text-md);
-  color: var(--text-color);
-}
-
-.word-search-input:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-/* Word List Container */
 .word-list-container {
-  flex: 1;
-  overflow-y: auto;
-  background: var(--input-bg);
-  border: 1px solid var(--input-border);
-  border-radius: 8px;
   max-height: 200px;
-  min-height: 0;
-}
-
-.word-list-empty {
-  padding: 16px;
-  text-align: center;
-  font-size: 14px;
-  color: var(--text-color);
-  opacity: 0.6;
-}
-
-.word-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
-  cursor: pointer;
-  transition: all 0.2s;
-  border-bottom: 1px solid var(--input-border);
-}
-
-.word-item:last-child {
-  border-bottom: none;
-}
-
-.word-item:hover {
-  background: var(--highlight-tag);
-}
-
-.word-item.selected {
-  background: var(--section-bg);
-  border-left: 3px solid var(--accent);
-  padding-left: 9px;
-}
-
-.word-item-text {
-  flex: 1;
-  font-size: 14px;
-  color: var(--text-color);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-}
-
-.word-item-edit-input {
-  flex: 1;
-  height: 28px;
-  padding: 0 8px;
-  background: var(--bg-color);
-  border: 1px solid var(--accent);
-  border-radius: 4px;
-  font-size: 14px;
-  color: var(--text-color);
-}
-
-.word-item-edit-input:focus {
-  outline: none;
-}
-
-.word-item-actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.word-item-icon-btn {
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  border-radius: 4px;
-  transition: all 0.2s;
-  color: var(--text-color);
-  opacity: 0.6;
-  flex-shrink: 0;
-}
-
-.word-item-icon-btn:hover {
-  opacity: 1;
-  background: var(--highlight-tag);
-  color: var(--accent);
-}
-
-.word-item-icon-btn i {
-  font-size: 14px;
-}
-
-.word-item-color-picker {
-  width: 28px;
-  height: 28px;
-  border-radius: 4px;
-  border: 1px solid var(--input-border);
-  cursor: pointer;
-  background: transparent;
-  padding: 0;
-  flex-shrink: 0;
-}
-
-.word-item-color-picker::-webkit-color-swatch-wrapper {
-  padding: 0;
-  border-radius: 3px;
-}
-
-.word-item-color-picker::-webkit-color-swatch {
-  border: none;
-  border-radius: 3px;
-}
-
-.word-item-color-picker:hover {
-  border-color: var(--accent);
 }
 
 .word-list-hint {
diff --git a/popup/popup.html b/popup/popup.html
index d49ec0c..fc9a576 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -16,14 +16,14 @@
   <div class="popup-container">
 
     <!-- Header -->
-    <div class="header">
-      <div class="header-content">
-        <div class="header-logo">
+    <div class="header app-header">
+      <div class="header-content app-header-content">
+        <div class="header-logo app-logo">
           <img src="../img/logo-outlined.png" alt="Goose" style="width: 18px; height: 18px;">
         </div>
-        <span class="header-title" data-i18n="extension_name">Goose Highlighter</span>
+        <span class="header-title app-title" data-i18n="extension_name">Goose Highlighter</span>
       </div>
-      <div class="header-actions">
+      <div class="header-actions app-header-actions">
         <button class="icon-button header-settings-btn" id="settingsBtn" data-i18n-title="options" title="Options" aria-label="Settings">
           <i class="fa-solid fa-gear"></i>
         </button>
@@ -137,7 +137,7 @@
         </div>
 
         <!-- Apply Button -->
-        <button class="apply-button" id="applyListSettingsBtn">
+        <button class="apply-button btn-primary-subdued" id="applyListSettingsBtn">
           <i class="fa-solid fa-check"></i>
           <span data-i18n="apply">Apply Changes</span>
         </button>
diff --git a/shared/base.css b/shared/base.css
new file mode 100644
index 0000000..d2b1e42
--- /dev/null
+++ b/shared/base.css
@@ -0,0 +1,18 @@
+/* Shared base reset and typography – used by list-manager and popup */
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  letter-spacing: var(--tracking-tight);
+  background: var(--bg-color);
+  color: var(--text-color);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/shared/layout.css b/shared/layout.css
new file mode 100644
index 0000000..af40ab7
--- /dev/null
+++ b/shared/layout.css
@@ -0,0 +1,117 @@
+/* Shared app chrome – header/topbar used by list-manager and popup */
+
+/* App header bar (use with .topbar, .header, or standalone .app-header) */
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  background: var(--bg-color);
+  border-bottom: 1px solid var(--input-border);
+  flex-shrink: 0;
+}
+
+.app-header-content {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.app-logo {
+  height: 28px;
+  width: 28px;
+  border-radius: 8px;
+  background: var(--text-color);
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+html.dark .app-logo,
+body.dark .app-logo {
+  background: var(--highlight-tag);
+}
+
+.app-logo img {
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
+}
+
+.app-title {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--text-color);
+}
+
+.app-subtitle {
+  font-size: 11px;
+  opacity: 0.6;
+}
+
+.app-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.app-header-actions button {
+  min-height: 28px;
+  padding: 4px 10px;
+  font-size: 12px;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Subdued primary button – shared orange outline style */
+.btn-primary-subdued {
+  background: rgba(255, 140, 0, 0.1);
+  color: var(--accent);
+  border: 1px solid rgba(255, 140, 0, 0.35);
+}
+
+.btn-primary-subdued:hover {
+  background: rgba(255, 140, 0, 0.18);
+  border-color: rgba(255, 140, 0, 0.5);
+}
+
+html.dark .btn-primary-subdued,
+body.dark .btn-primary-subdued {
+  background: rgba(255, 140, 0, 0.12);
+  border-color: rgba(255, 140, 0, 0.4);
+}
+
+html.dark .btn-primary-subdued:hover,
+body.dark .btn-primary-subdued:hover {
+  background: rgba(255, 140, 0, 0.2);
+  border-color: rgba(255, 140, 0, 0.55);
+}
+
+/* Ghost button in header/panels */
+.app-header-actions button.ghost,
+.panel-actions button.ghost {
+  background: var(--input-bg);
+  border: 1px solid var(--input-border);
+  color: var(--text-color);
+}
+
+.app-header-actions button.ghost:hover,
+.panel-actions button.ghost:hover {
+  background: var(--section-bg);
+}
+
+/* Danger button in header/panels */
+.panel-actions button.danger {
+  background: rgba(239, 68, 68, 0.08);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  color: var(--danger);
+}
+
+.panel-actions button.danger:hover {
+  background: rgba(239, 68, 68, 0.15);
+  border-color: rgba(239, 68, 68, 0.45);
+}
diff --git a/shared/word-list.css b/shared/word-list.css
new file mode 100644
index 0000000..36d1505
--- /dev/null
+++ b/shared/word-list.css
@@ -0,0 +1,272 @@
+/* Shared word list UI – used by list-manager and popup (class names aliased for both) */
+
+/* Word list container */
+.word-list,
+.word-list-container {
+  flex: 1;
+  overflow-y: auto;
+  background: var(--input-bg);
+  border: 1px solid var(--input-border);
+  border-radius: 8px;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.word-list .empty,
+.word-list-empty {
+  padding: 16px;
+  text-align: center;
+  font-size: 14px;
+  color: var(--text-color);
+  opacity: 0.6;
+}
+
+/* Word item row */
+.word-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  cursor: pointer;
+  transition: all 0.2s;
+  border-bottom: 1px solid var(--input-border);
+  min-width: 0;
+}
+
+.word-item:last-child {
+  border-bottom: none;
+}
+
+.word-item:hover {
+  background: var(--highlight-tag);
+}
+
+.word-item.selected {
+  background: var(--section-bg);
+  border-left: 3px solid var(--accent);
+  padding-left: 9px;
+}
+
+.word-item.disabled {
+  opacity: 0.5;
+}
+
+/* Text label (list-manager: .word-text, popup: .word-item-text) */
+.word-text,
+.word-item-text {
+  flex: 1;
+  font-size: 14px;
+  color: var(--text-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  user-select: none;
+}
+
+.word-text.editing,
+.word-item-text.editing {
+  display: none;
+}
+
+/* Inline edit input */
+.word-edit-input,
+.word-item-edit-input {
+  display: none;
+  flex: 1;
+  height: 28px;
+  padding: 0 8px;
+  background: var(--bg-color);
+  border: 1px solid var(--accent);
+  border-radius: 4px;
+  font-size: 14px;
+  color: var(--text-color);
+  min-width: 0;
+}
+
+.word-edit-input:focus,
+.word-item-edit-input:focus {
+  outline: none;
+}
+
+.word-edit-input.active,
+.word-item-edit-input.active {
+  display: block;
+}
+
+/* Actions container */
+.word-actions,
+.word-item-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  pointer-events: auto;
+}
+
+.word-actions > *,
+.word-item-actions > * {
+  pointer-events: auto;
+}
+
+/* Icon button inside word item (list-manager: .word-item .icon-btn, popup: .word-item-icon-btn) */
+.word-item .icon-btn,
+.word-item-icon-btn {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  min-height: 28px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--text-color);
+  opacity: 0.6;
+}
+
+.word-item .icon-btn:hover,
+.word-item-icon-btn:hover {
+  opacity: 1;
+  background: var(--highlight-tag);
+  color: var(--accent);
+}
+
+.word-item .icon-btn i,
+.word-item-icon-btn i {
+  font-size: 14px;
+}
+
+/* Color picker inside word item */
+.word-item input[type="color"],
+.word-item-color-picker {
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  border: 1px solid var(--input-border);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.word-item input[type="color"]::-webkit-color-swatch-wrapper,
+.word-item-color-picker::-webkit-color-swatch-wrapper {
+  padding: 0;
+  border-radius: 3px;
+}
+
+.word-item input[type="color"]::-webkit-color-swatch,
+.word-item-color-picker::-webkit-color-swatch {
+  border: none;
+  border-radius: 3px;
+}
+
+.word-item input[type="color"]:hover,
+.word-item-color-picker:hover {
+  border-color: var(--accent);
+}
+
+/* Word action row (Select All, Delete, etc.) – list-manager: .word-controls .row, popup: .word-actions-row */
+.word-controls .row,
+.word-actions-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+
+.word-controls .row button,
+.word-action-btn {
+  height: 26px;
+  padding: 0 8px;
+  font-size: 12px;
+  border-radius: 6px;
+  background: var(--input-bg);
+  border: 1px solid var(--input-border);
+  color: var(--text-color);
+}
+
+.word-controls .row button:hover,
+.word-action-btn:hover {
+  background: var(--section-bg);
+}
+
+.word-controls .row button.danger,
+.word-action-btn.danger {
+  background: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.3);
+  color: var(--danger);
+}
+
+.word-controls .row button.danger:hover,
+.word-action-btn.danger:hover {
+  background: rgba(239, 68, 68, 0.2);
+}
+
+/* Add-words textarea (shared look) */
+.add-words textarea,
+.add-words-textarea {
+  flex: 1;
+  min-height: 56px;
+  padding: 6px 10px;
+  background: var(--input-bg);
+  color: var(--text-color);
+  border: 1px solid var(--input-border);
+  border-radius: 8px;
+  font-size: 13px;
+  resize: vertical;
+}
+
+.add-words textarea:focus,
+.add-words-textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+/* Add-words primary button (subdued) */
+.add-words button.primary,
+.add-words-button {
+  background: rgba(255, 140, 0, 0.1);
+  color: var(--accent);
+  border: 1px solid rgba(255, 140, 0, 0.35);
+}
+
+.add-words button.primary:hover,
+.add-words-button:hover {
+  background: rgba(255, 140, 0, 0.18);
+  border-color: rgba(255, 140, 0, 0.5);
+}
+
+html.dark .add-words button.primary,
+html.dark .add-words-button,
+body.dark .add-words button.primary,
+body.dark .add-words-button {
+  background: rgba(255, 140, 0, 0.12);
+  border-color: rgba(255, 140, 0, 0.4);
+}
+
+html.dark .add-words button.primary:hover,
+html.dark .add-words-button:hover,
+body.dark .add-words button.primary:hover,
+body.dark .add-words-button:hover {
+  background: rgba(255, 140, 0, 0.2);
+  border-color: rgba(255, 140, 0, 0.55);
+}
+
+/* Word search input (shared) */
+.word-search-input,
+#wordSearch {
+  height: 32px;
+  padding: 0 10px;
+  font-size: 14px;
+  border-radius: 8px;
+  background: var(--input-bg);
+  border: 1px solid var(--input-border);
+  color: var(--text-color);
+}
+
+.word-search-input:focus,
+#wordSearch:focus {
+  outline: none;
+  border-color: var(--accent);
+}