diff --git a/manager/media/style/SoftSlate/style.css b/manager/media/style/SoftSlate/style.css
index 8e0a0cda9..1a232e028 100644
--- a/manager/media/style/SoftSlate/style.css
+++ b/manager/media/style/SoftSlate/style.css
@@ -92,11 +92,23 @@
     --color-warning: #444;
     --color-info: #3CB371;
 
-    /* Component Colors - Sections */
-    --color-section-header-text: #606060;
+    /* Component Colors - Sections (白地 + 細い枠。影と丸みは控えめ) */
+    --color-section-header-text: #2c3a46;
     --color-section-header-start: var(--gray-100);
-    --color-section-header-end: #dddddd;
+    --color-section-header-end: #f5f7f9;
     --color-section-bg: #F7F7F7;
+    --color-heading: #1f2d38;
+    --color-frame: #d5dce3;
+    --color-frame-light: #e3e8ec;
+    --shadow-frame: 0 1px 2px rgba(16, 24, 40, 0.05);
+
+    /* Focus - キーボード操作時の枠 */
+    --color-focus: #4a7ba7;
+
+    /* Danger - 削除など取り消せない操作 */
+    --color-danger: #b42318;
+    --color-danger-border: #e0b4ae;
+    --color-danger-bg-hover: #fdf1f0;
 
     /* Component Colors - Navigation */
     --color-nav-subnav-start: #4a5f6f;
@@ -270,11 +282,12 @@ h1, h2, h3, h4, h5, h6, .subTitle {
     font-weight: normal;
 }
 
+/* ページタイトル。灰色の帯をやめ、濃い文字で本文と階層を分ける */
 h1 {
     font-size: 1.25em;
-    color: var(--gray-800);
+    color: var(--color-heading);
     font-weight: bold;
-    background-color: #d0d0d0;
+    background-color: transparent;
     letter-spacing: 1px;
     line-height: 1em;
     padding: var(--space-2);
@@ -282,10 +295,24 @@ h1 {
     margin: var(--space-2);
 }
 
+/* 下書きは地色で見分けるため残す */
 h1.draft {
     background-color: #F4E2C3;
 }
 
+/* 狭い画面では、右上に浮かぶ操作ボタン群(shell.css で fixed)がタイトルを覆うため、浮かせる位置を右下へ移す。
+   本文は押し下げず、最後の項目がボタン群に隠れないよう下側にだけ余白を足す */
+@media (max-width: 1100px) {
+    html body.evo-shell #mainPane #actions {
+        top: auto;
+        bottom: var(--space-2);
+    }
+
+    html body.evo-shell > #mainPane:has(#actions) {
+        padding-bottom: 72px;
+    }
+}
+
 h2 {
     font-size: 1.64em;
 }
@@ -727,16 +754,17 @@ form .imeoff {
     margin-bottom: 10px;
 }
 
+/* セクション見出し。グラデーションの帯をやめ、ごく薄い地色と下線で本文と区切る */
 .sectionHeader {
     color: var(--color-section-header-text);
     margin: 0 8px;
     padding: 8px 16px;
     font-weight: bold;
-    border: 1px solid var(--color-border-default);
-    border-bottom: none;
-    background: linear-gradient(180deg, var(--gray-100), var(--gray-200));
+    border: 1px solid var(--color-frame);
+    border-bottom-color: var(--color-frame-light);
+    background: var(--color-section-header-end);
     box-shadow: none;
-    border-radius: 8px 8px 0 0;
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
 }
 
 .tab-page .sectionHeader {
@@ -757,13 +785,19 @@ form .imeoff {
 .tab-page .sectionBody,
 .section .sectionBody {
     background: var(--color-surface);
-    border: 1px solid var(--color-border-default);
-    border-radius: 0 0 10px 10px;
-    box-shadow: var(--shadow-sm);
+    border: 1px solid var(--color-frame);
+    border-radius: var(--radius-lg);
+    box-shadow: none;
     margin: 0 3px 15px;
     padding: 15px;
 }
 
+/* 見出しの直後は、見出しと一枚の枠にまとめる(二重線にしない) */
+.sectionHeader + .sectionBody {
+    border-top: none;
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+}
+
 .rtl .sectionBody {
     direction: rtl;
     position: inherit;
@@ -856,12 +890,19 @@ a img {
     background-color: var(--gray-100);
 }
 
+/* ツリーは明るいブルーグレーのフラットな地。メインとの境目は 1px の線にする */
 div.treeframebody {
-    background: linear-gradient(180deg, #f3f5f9 0%, #e9edf5 100%) !important;
-    box-shadow: inset -1px 0 0 rgba(15, 23, 42, 0.08);
+    background: #eef2f6 !important;
+    box-shadow: none;
     padding: var(--space-2);
 }
 
+/* shell.css の 3px の白い境目を、枠と同じ細い線にする
+   (shell.css より後に効かせるため html を足して詳細度を上げる) */
+html body.evo-shell > #treePane {
+    border-inline-end: 1px solid var(--color-frame);
+}
+
 #treeMenu * {
     vertical-align: middle;
 }
@@ -918,18 +959,20 @@ div.treeNode {
     white-space: nowrap;
 }
 
+/* ホバーは淡い地色だけ、選択中はスレートの地色と枠で示す。行の寸法は変えない */
 .treeNodeSelected,
 .treeNodeHover {
-    background-color: rgba(59, 130, 246, 0.12);
-    border: 1px solid rgba(15, 23, 42, 0.08);
+    background-color: rgba(61, 79, 93, 0.07);
+    border: 1px solid transparent;
     color: #0f172a;
     padding: 1px 2px;
     margin-left: -3px;
-    border-radius: 6px;
+    border-radius: var(--radius-md);
 }
 
-.treeNodeHover {
-    background-color: rgba(59, 130, 246, 0.08);
+.treeNodeSelected {
+    background-color: rgba(61, 79, 93, 0.14);
+    border-color: rgba(61, 79, 93, 0.45);
 }
 
 .unpublished a, .unpublishedNode {
@@ -1192,20 +1235,13 @@ a.hometblink:hover {
     /* Softer dark gray palette */
     --topnav-background: #3d4f5d;
     --topnav-border: #4a5f6f;
-    --topnav-link-color: #d4dade;
+    --topnav-link-color: #e2e7ea;
     --topnav-link-hover-color: #ffffff;
     --topnav-link-hover-bg: #4a5f6f;
     --topnav-link-active-bg: #2f3d48;
     border-bottom: 1px solid var(--topnav-border);
-    background:
-        repeating-linear-gradient(
-            90deg,
-            rgba(255,255,255,0.015) 0px,
-            rgba(255,255,255,0.015) 1px,
-            rgba(0,0,0,0) 1px,
-            rgba(0,0,0,0) 4px
-        ),
-        #3d4f5d;
+    /* 縦ストライプはやめ、スレートブルーのごく弱い縦グラデーションにする */
+    background: linear-gradient(180deg, #415465 0%, #3a4b58 100%);
     box-shadow:
         0 1px 0 rgba(255, 255, 255, 0.05) inset,
         0 -1px 0 rgba(0, 0, 0, 0.25) inset,
@@ -1213,7 +1249,7 @@ a.hometblink:hover {
   }
 
 #Navcontainer {
-    color: #d4dade;
+    color: var(--topnav-link-color);
     padding: var(--topnav-padding-top, 10px) var(--subnav-horizontal-padding) calc(var(--subnav-height) + 12px);
     position: relative;
     text-shadow: none;
@@ -1260,12 +1296,20 @@ a.hometblink:hover {
     border-color: var(--topnav-border);
 }
 
+#nav > li > a:focus-visible,
+#nav > li > ul.subnav a:focus-visible {
+    outline: 2px solid #9cc3e0;
+    outline-offset: -2px;
+}
+
+/* 選択中は 2 段目と同じ暗いスレートの地色でつなげ、白い太字で示す。線や影は付けない */
 #nav > li.active > a {
     background: var(--topnav-link-active-bg);
     border-color: var(--topnav-link-active-bg);
-    border-top: 1px solid var(--topnav-border);
     border-bottom: none;
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
     color: var(--topnav-link-hover-color);
+    font-weight: 600;
     position: relative;
     text-shadow: none;
     z-index: 2;
@@ -1313,7 +1357,7 @@ a.hometblink:hover {
     line-height: var(--subnav-height);
     padding: 0 18px;
     text-decoration: none;
-    border-radius: 8px;
+    border-radius: var(--radius-md);
     transition: background-color .18s ease, color .18s ease;
 }
 
@@ -1466,52 +1510,59 @@ a.hometblink:hover {
     direction: rtl;
 }
 
+/* タブ。フラットなフォルダ型にする。未選択は薄いグレー、選択中は白地・太字・上端のスレートの線で示し、
+   下の中身(白い枠)とつなげる。タブ列の下線に、選択中のタブの白い下辺を 1px 重ねて切る */
 .dynamic-tab-pane-control .tab-row .tab {
-    color: var(--color-secondary-text);
+    color: #4a5a67;
     font-size: 1em;
     cursor: pointer;
     display: inline;
-    margin: 3px 2px 1px 0;
+    margin: 0 var(--space-1) -1px 0;
     float: left;
     padding: 8px 16px;
     z-index: 1;
     position: relative;
-    top: 1px;
-    border: 1px solid var(--color-secondary-border);
-    border-radius: 5px 5px 0 0;
-    background-color: var(--color-secondary-start);
+    top: 0;
+    border: 1px solid var(--color-frame);
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
+    background-color: #e8edf1;
+    transition: background-color var(--transition-fast), color var(--transition-fast);
 }
 
 .rtl .dynamic-tab-pane-control .tab-row .tab {
-    margin: 3px 5px 1px -3px;
+    margin: 0 0 -1px var(--space-1);
     float: right;
-    padding: 2px 15px 3px;
+    padding: 8px 16px;
 }
 
 .dynamic-tab-pane-control .tab-row .tab:hover {
     text-decoration: none;
-    color: var(--color-secondary-hover-text);
-    border-color: var(--color-secondary-border);
-    background-color: var(--color-secondary-hover-start);
-    background-image: linear-gradient(var(--color-secondary-hover-start), var(--color-secondary-hover-end));
+    color: var(--color-heading);
+    border-color: var(--color-frame);
+    background-color: #dde4ea;
+    background-image: none;
+}
+
+.dynamic-tab-pane-control .tab-row .tab:focus-visible {
+    outline: 2px solid var(--color-focus);
+    outline-offset: -2px;
 }
 
 .dynamic-tab-pane-control .tab-row .tab.selected {
-    color: var(--gray-900);
+    color: var(--color-heading);
+    font-weight: 600;
     z-index: 999;
-    top: 1px;
-    border-width: 1px;
-    border-bottom-style: solid;
-    border-color: var(--color-primary-hover-end) #b7c2c7 #FFF #b7c2c7;
-    border-radius: 5px 5px 0 0;
-    border-width: 1px 1px 0;
+    top: 0;
+    border-color: var(--color-frame);
+    border-bottom-color: var(--color-surface);
     background-color: var(--color-surface);
     background-image: none;
+    box-shadow: inset 0 2px 0 var(--color-primary);
 }
 
 .dynamic-tab-pane-control .tab-row .tab.selected span {
-    color: #111;
-    background-color: var(--color-surface);
+    color: inherit;
+    background-color: transparent;
     text-shadow: none;
 }
 
@@ -1525,14 +1576,15 @@ a.hometblink:hover {
 }
 
 .dynamic-tab-pane-control .tab-row .tab.selected:hover {
-    color: var(--gray-900);
-    border-color: var(--color-primary-hover-end) #b7c2c7 #FFF #b7c2c7;
+    color: var(--color-heading);
+    border-color: var(--color-frame);
+    border-bottom-color: var(--color-surface);
     background-color: var(--color-surface);
     background-image: none;
 }
 
 .dynamic-tab-pane-control .tab-row .tab.selected:hover span {
-    color: #111;
+    color: inherit;
 }
 
 .dynamic-tab-pane-control .tab-row .tab .alert {
@@ -1543,12 +1595,15 @@ a.hometblink:hover {
     color: #c00;
 }
 
+/* タブの中身。上辺はタブ列の下線が受け持つので、残りの 3 辺を細い枠で囲む */
 .dynamic-tab-pane-control .tab-page {
     clear: both;
     background: var(--color-surface);
     z-index: 2;
     position: relative;
-    top: -2px;
+    top: 0;
+    border-top: none;
+    box-shadow: var(--shadow-frame);
     padding: 20px 15px 14px !important;
 }
 
@@ -1559,6 +1614,9 @@ a.hometblink:hover {
 .dynamic-tab-pane-control .tab-row {
     z-index: 1;
     white-space: nowrap;
+    /* float のタブを包み、下線をタブの下に引く */
+    display: flow-root;
+    border-bottom: 1px solid var(--color-frame);
 }
 
 .dynamic-tab-pane-control ul {
@@ -1626,8 +1684,8 @@ a.hometblink, a.hometblink img {
 }
 
 .tab-page {
-    border: 1px solid var(--color-secondary-border);
-    border-radius: 0 0 10px 10px;
+    border: 1px solid var(--color-frame);
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
     background: #ffffff;
 }
 
@@ -1737,8 +1795,12 @@ h2#edit_document_title {
    ============================================================================ */
 
 /* from https://github.com/manse/ScienceStyle */
+/* 操作ボタンの群。灰色の半透明の帯をやめ、白地と細い枠でまとめる。
+   右上に浮かび、タイトルの上にもスクロール後の本文の上にも重なる */
 #actions {
-    background: none repeat scroll 0 0 rgba(60, 60, 60, 0.2);
+    background: var(--color-surface);
+    border: 1px solid var(--color-frame);
+    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
     margin: 0;
     padding: var(--space-2) var(--space-4) !important;
     position: fixed;
@@ -1746,7 +1808,13 @@ h2#edit_document_title {
     text-align: right;
     top: var(--space-2);
     z-index: 100;
-    border-radius: var(--space-2);
+    border-radius: var(--radius-lg);
+}
+
+/* モーダルでは shell.js が #actions をフッターへ移す。shell.css は位置と背景だけを戻すため、枠と影もここで外す */
+body.evo-shell #evoShellModalFooter #actions {
+    border: none;
+    box-shadow: none;
 }
 
 select#stay {
@@ -1802,16 +1870,22 @@ ul.actionButtons {
 .actionButtons a {
     display: block;
     float: left;
-    border-radius: 6px;
-    border: 1px solid var(--color-neutral-button-border);
-    color: var(--gray-900);
+    border-radius: var(--radius-md);
+    border: 1px solid #c3ccd4;
+    color: var(--color-heading);
     font-size: 1em;
     font-weight: 700;
     outline: medium none;
     padding: 8px 12px;
     text-decoration: none;
     white-space: nowrap;
-    background-color: var(--color-neutral-button-start);
+    background-color: var(--color-surface);
+    transition: background-color var(--transition-fast), border-color var(--transition-fast);
+}
+
+.actionButtons a:focus-visible {
+    outline: 2px solid var(--color-focus);
+    outline-offset: 2px;
 }
 
 .actionButtons a.disabled img {
@@ -1820,7 +1894,7 @@ ul.actionButtons {
 
 .actionButtons a:hover {
     border-color: var(--color-neutral-button-border);
-    background-color: var(--color-neutral-button-hover-end);
+    background-color: #f0f3f6;
 }
 
 .actionButtons a:active {
@@ -1868,10 +1942,29 @@ ul.actionButtons {
     border-color: var(--color-primary-end);
 }
 
+/* 主ボタンのホバーは、明るい青に変えず同じスレートを一段濃くする */
 .actionButtons #Button1 a:hover,
 .actionButtons a:hover.default {
-    background-color: var(--color-primary-hover-start);
-    border-color: var(--color-primary-hover-end);
+    color: #fff;
+    background-color: #33434f;
+    border-color: #33434f;
+}
+
+/* 削除系。取り消せない操作なので赤い文字と枠で示す。
+   リソースは li#delete / li#deletedraft、エレメントやユーザーは onclick="delete…();" のボタン */
+.actionButtons #delete a,
+.actionButtons #deletedraft a,
+.actionButtons a[onclick^="delete"] {
+    color: var(--color-danger);
+    border-color: var(--color-danger-border);
+}
+
+.actionButtons #delete a:hover,
+.actionButtons #deletedraft a:hover,
+.actionButtons a[onclick^="delete"]:hover {
+    color: var(--color-danger);
+    border-color: var(--color-danger);
+    background-color: var(--color-danger-bg-hover);
 }
 
 .actionButtons #Button1 a:active,