优化拼写页面

word-app/src/app/spelling-practice/spelling-practice.page.scss

@@ -49,7 +49,7 @@ ion-toolbar {
         h2 {
           font-size: 1.4rem !important; // 增加字体大小到1.4rem
           font-weight: 600;
-          color: #000;
+          color: $ocean-deep;
           margin: 0;
           line-height: 1.2;
         }
@@ -57,12 +57,12 @@ ion-toolbar {
       
       .wrong-count {
         font-size: 1rem !important; // 增加字体大小到1rem
-        color: #666;
+        color: rgba($ocean-deep, 0.6);
         font-weight: 500;
       }
 
       .wrong-number {
-            color: #f44336 !important;
+            color: $coral !important; /* 主题珊瑚色 */
           }
     }
   }
@@ -152,13 +152,14 @@ ion-toolbar {
 /* 拼写练习：白色矩形框高度（对齐背单词页面卡片体验） */
 .word-container.shell-card.word-container--spelling {
   height: 62vh;
-  margin-top: 18px;
+  margin-top: 28px;
+  padding-top: 70px; /* 让输入框+释义整体下移一大距离 */
 }
 
 .word-container.shell-card.word-container--spelling-summary {
   height: 62vh;
   overflow: hidden;
-  margin-top: 18px;
+  margin-top: 28px;
 
   .summary-container {
     height: 100%;
@@ -191,7 +192,7 @@ ion-toolbar {
       width: 100%;
       font-size: 3rem;
       text-align: center;
-      color: #000;
+      color: $ocean-deep;
       font-weight: 900;
       letter-spacing: 1px;
       --background: transparent;
@@ -199,13 +200,13 @@ ion-toolbar {
       --border-color: transparent;
       --border-style: none;
       
-      caret-color: #000;
+      caret-color: #11B1F6;
       font-size: 3.2rem;
       font-weight: 900;
       
       &:focus {
         font-weight: 900;
-        caret-color: #666;
+        caret-color: #11B1F6;
       }
       
       &.correct {
@@ -236,14 +237,39 @@ ion-toolbar {
       outline: none;
       background: transparent;
       transition: all 0.3s ease;
+      caret-color: #11B1F6;
+      color: $ocean-deep;
       
       &:focus {
-        border-bottom-color: #666;
+        border-bottom-color: rgba(17, 177, 246, 0.9);
       }
     }
   }
 }
 
+/* 强制覆盖：无论 correct/wrong 状态，输入光标统一使用海洋主题蓝色 */
+.spelling-input.correct,
+.spelling-input.wrong {
+  caret-color: #11B1F6 !important;
+}
+
+/* 强制覆盖：把 correct/wrong 状态下的输入下划线颜色也固定为海洋蓝 */
+.spelling-input.correct::part(native),
+.spelling-input.wrong::part(native) {
+  border-bottom-color: rgba(17, 177, 246, 0.9) !important;
+}
+
+/* 更高优先级覆盖：匹配原 correct/wrong 的“深层”选择器，确保压住绿色 */
+.input-section .input-wrapper .spelling-input.correct,
+.input-section .input-wrapper .spelling-input.wrong {
+  caret-color: #11B1F6 !important;
+}
+
+.input-section .input-wrapper .spelling-input.correct::part(native),
+.input-section .input-wrapper .spelling-input.wrong::part(native) {
+  border-bottom-color: rgba(17, 177, 246, 0.9) !important;
+}
+
 .meaning-section {
   flex: 1;
   display: flex;
@@ -265,8 +291,8 @@ ion-toolbar {
     text-align: center;
     
     .meaning-text {
-      font-size: 1.2rem;
-      color: #000;
+      font-size: 1.4rem;
+      color: rgba($ocean-deep, 0.9); /* 海洋主题释义色 */
       line-height: 1.5;
       font-weight: 500;
     }
@@ -279,7 +305,7 @@ ion-toolbar {
     .correct-word {
       font-size: 3rem;
       font-weight: 900;
-      color: #000;
+      color: $ocean-deep; /* 海洋主题正确单词色 */
       margin-bottom: 8px;
     }
   }
@@ -292,15 +318,29 @@ ion-toolbar {
   padding: 30px 16px 60px;
   margin-top: auto;
   background: transparent;
+
+  /* 覆盖 Ionic/全局对 ion-button 内部 ::part(native) 的颜色设置 */
+  .action-button[fill='clear']::part(native) {
+    color: #11B1F6;
+  }
+
+  .action-button[fill='clear'][disabled]::part(native) {
+    color: rgba(17, 177, 246, 0.45);
+  }
   
   .action-button {
     --padding-start: 0;
     --padding-end: 0;
     --border-radius: 16px;
-    --border-width: 0;
-    --border-color: transparent;
-    --border-style: none;
+    --border-width: 2px;
+    --border-color: rgba(17, 177, 246, 0.65); /* #11B1F6 */
+    --border-style: solid;
     --background: transparent;
+    --background-activated: rgba(17, 177, 246, 0.08); /* #11B1F6 */
+    --background-focused: rgba(17, 177, 246, 0.05); /* #11B1F6 */
+    --ripple-color: rgba(17, 177, 246, 0.16); /* #11B1F6 */
+    --color: #11B1F6; /* #11B1F6 图标/文字色 */
+    color: #11B1F6;
     width: 70px;
     height: 70px;
     margin: 0;
@@ -313,7 +353,7 @@ ion-toolbar {
     
     ion-icon {
       font-size: 28px;
-      color: currentColor;
+      color: inherit; /* 继承 ion-button 的主题色 */
       margin: 0;
     }
     
@@ -321,7 +361,7 @@ ion-toolbar {
       opacity: 0.45;
       
       ion-icon {
-        color: rgba($ocean-deep, 0.45);
+        color: rgba(17, 177, 246, 0.45);
       }
     }
   }
@@ -333,7 +373,7 @@ ion-toolbar {
     
     ion-icon {
       font-size: 30px;
-      color: currentColor;
+      color: inherit;
     }
   }
 }