openyida 2026.9.20 → 2026.9.21

package/yida-skills/skills/yida-design/templates/design-themes/app-finance/design.md

@@ -12,12 +12,57 @@ tokens:
         "--pod-card-bg-color": "#ffffff"
         "--pod-table-cell-color": "var(--pod-card-bg-color)"
       navigation:
-        "--pod-shell-theme-bg-color": "#FFFFFF"
-        "--pod-nav-item-text-color": "#595959"
-        "--pod-nav-item-text-hover-color": "#262626"
-        "--pod-nav-item-text-selected-color": "var(--color-brand1-6)"
-        "--pod-nav-menu-bg-hover-color": "#F5F5F5"
-        "--pod-nav-menu-bg-selected-color": "#F0F0F0"
+        "--pod-shell-theme-bg-color": "#E2EBF5"
+        "--pod-nav-item-text-color": "#274E78"
+        "--pod-nav-item-text-hover-color": "#153856"
+        "--pod-nav-item-text-selected-color": "#F2F7FC"
+        "--pod-nav-menu-bg-hover-color": "#CDDCED"
+        "--pod-nav-menu-bg-selected-color": "#274E78"
+        "--pod-nav-menu-item-selected-shadow": "none"
+        "--pod-page-header-bg-color": "var(--pod-shell-theme-bg-color)"
+        "--pod-nav-l-sub-main-bg-color": "var(--pod-shell-theme-bg-color)"
+        "--pod-nav-top-main-border-width": "1px"
+        "--pod-nav-top-main-border-color": "#AFC4DC"
+        "--pod-nav-top-tab-indicator-width": "0px"
+        "--pod-nav-logo-text": "var(--pod-nav-item-text-hover-color)"
+        "--pod-nav-logo-bg": "var(--pod-nav-menu-bg-selected-color)"
+        "--pod-nav-logo-icon": "var(--pod-nav-item-text-selected-color)"
+        "--pod-nav-logo-border": "1px solid #AFC4DC"
+        "--pod-nav-logo-border-radius": "4px"
+        "--pod-nav-sub-divider-color": "#AFC4DC"
+        "--pod-nav-item-text-disabled-color": "rgba(24,28,31,.30)"
+        "--pod-nav-l-container-bg": "var(--pod-shell-theme-bg-color)"
+        "--pod-nav-l-group-label-color": "var(--pod-nav-item-text-color)"
+        "--pod-nav-l-search-border-color": "#AFC4DC"
+        "--pod-nav-popup-bg-color": "var(--pod-shell-theme-bg-color)"
+        "--pod-nav-popup-border-radius": "4px"
+        "--pod-nav-popup-shadow": "0 6px 18px rgba(39,78,120,.12)"
+        "--pod-nav-tab-line-hover-color": "var(--pod-nav-item-text-hover-color)"
+        "--pod-nav-tab-line-selected-color": "var(--pod-nav-item-text-hover-color)"
+        "--pod-nav-search-bg-color": "var(--pod-nav-menu-bg-hover-color)"
+        "--pod-nav-search-bg-hover-color": "var(--pod-nav-menu-bg-hover-color)"
+        "--pod-nav-search-bg-active-color": "var(--pod-nav-menu-bg-hover-color)"
+        "--pod-nav-search-placeholder-color": "var(--pod-nav-item-text-color)"
+        "--pod-nav-search-text-color": "var(--pod-nav-item-text-hover-color)"
+        "--pod-nav-search-icon-color": "var(--pod-nav-item-text-color)"
+        "--pod-nav-search-border-color": "#AFC4DC"
+        "--pod-nav-search-border-hover-color": "var(--pod-nav-item-text-hover-color)"
+        "--pod-nav-search-border-active-color": "var(--pod-nav-item-text-hover-color)"
+        "--pod-nav-action-icon-color": "var(--pod-nav-item-text-color)"
+        "--pod-nav-action-border-color": "#AFC4DC"
+        "--pod-nav-action-border": "1px solid #AFC4DC"
+        "--pod-nav-action-bg-hover-color": "var(--pod-nav-menu-bg-hover-color)"
+        "--pod-nav-action-bg-active-color": "var(--pod-nav-menu-bg-hover-color)"
+        "--pod-nav-menu-item-height": "36px"
+        "--pod-nav-menu-item-radius": "2px"
+        "--pod-nav-menu-item-border": "1px solid #AFC4DC"
+        "--pod-nav-menu-item-hover-border": "1px solid #274E78"
+        "--pod-nav-menu-item-selected-border": "1px solid #153856"
+        "--pod-nav-menu-font-size": "14px"
+        "--pod-nav-menu-item-selected-font-weight": "600"
+        "--pod-nav-menu-line-height": "20px"
+        "--pod-nav-menu-gap": "4px"
+        "--pod-shell-lshape-border-radius": "4px"
       native-form:
         "--form-element-medium-corner": "4px"
         "--form-element-medium-height": "36px"
@@ -105,10 +150,10 @@ tokens:
     rounded:
       "--corner-zero": "0px"
       "--corner-1": "4px"
-      "--corner-2": "6px"
-      "--corner-3": "8px"
-      "--corner-4": "10px"
-      "--corner-5": "12px"
+      "--corner-2": "4px"
+      "--corner-3": "4px"
+      "--corner-4": "4px"
+      "--corner-5": "4px"
       "--corner-circle": "50%"
       "--corner-semicircle": "500px"
     shadow:
@@ -147,7 +192,7 @@ themeProfile:
 
 密集双列、水平标签与对齐金额；淡蓝图纸、清晰细边界、低圆角。适合预算、风险与资金计划。
 
-应用、自定义页面、表单、编辑与详情共用这一套视觉语言。业务内容来自 PRD，不复制示例行业、编号、标题或数据。色彩来源：{{COLOR_SOURCE}}；主色由 {{PRIMARY_COLOR}} 实例化，示范配色只是参考。
+导航、应用框架、自定义页面、表单、编辑与详情共用这一套视觉语言。业务内容来自 PRD，按实际行业、页面标题和数据设计。色彩来源：{{COLOR_SOURCE}}；主色由 {{PRIMARY_COLOR}} 实例化，品牌悬停色按同源占位说明生成；模板不固定项目品牌色。
 
 ## 2. 页面视觉系统
 
@@ -157,7 +202,17 @@ themeProfile:
 
 ### 2.2 应用导航
 
-平台侧导航与内容区域使用同一设计语言；选中项用品牌色和明确文字，不靠图标猜测。 默认保留平台导航，菜单来自真实业务范围。只有需求确定自绘导航时才在 Canvas 实现结构。当前模板使用 contentTone: light、navTheme: light。
+淡蓝导航如图纸索引，紧凑低圆角菜单与细线网格呼应金额表单，当前入口以蓝底白字突出。
+
+菜单轮廓使用 --pod-nav-menu-item-radius、--pod-nav-menu-item-border、--pod-nav-menu-item-hover-border、--pod-nav-menu-item-selected-border。侧栏和顶部菜单共用轮廓，各状态保持相同边框宽度，文字位置稳定；具体数值以本项目 Token 为准。
+
+导航与应用框架、表单、自定义页面和详情页共用设计语言。先按业务入口安排菜单、分组、搜索、品牌区与常用操作，再一起确定导航与正文的明暗、表面、字体、边界、圆角和密度。平台导航使用真实页面菜单；自绘导航按同一套导航 Token 实现。命名模板沿用自身 navTheme，换主色保持导航明暗与内容画布；需要另一导航明暗时改选主题，自由创意按项目明确设计。
+
+导航底色使用 --pod-shell-theme-bg-color；普通、悬停和选中文字分别使用 --pod-nav-item-text-color、--pod-nav-item-text-hover-color、--pod-nav-item-text-selected-color；悬停和选中背景使用 --pod-nav-menu-bg-hover-color、--pod-nav-menu-bg-selected-color。图标跟随对应文字状态，当前入口同时用背景或字重表达。
+
+菜单高度、圆角与间距使用 --pod-nav-menu-item-height、--pod-nav-menu-item-radius、--pod-nav-menu-gap；搜索、品牌区、分组、操作和弹出菜单使用 navigation 分组中的对应 Token。弹出菜单的底色、文字与搜索状态成组配套，导航与内容可以分别选择明暗。选中项使用 --pod-nav-menu-item-selected-shadow：none 关闭额外标记，完整 box-shadow 值可表达左、右或底部内阴影，不占据菜单布局空间；该 Token 独立于导航明暗。菜单高度、文字行高、内距和框架留白一起调整，给外阴影、长标题与键盘焦点留出空间。
+
+桌面检查菜单、搜索、选中态与表单的协调；折叠后保留可识别图标和入口名称；窄屏保持菜单可展开、当前页面可定位、键盘焦点可见。提交、编辑、详情与自定义页都沿用这一导航设计。 当前模板使用 contentTone: light、navTheme: light。
 
 ### 2.3 页面标题与操作
 
@@ -213,7 +268,7 @@ YAML Token 是唯一数值源。沿用当前主题的构图与材质语言，按
 
 ### 验收
 
-- [ ] 应用壳、Canvas、表单与详情的字体、线条、材质和状态一致。
+- [ ] 导航、应用框架、Canvas、表单与详情的字体、线条、材质和状态一致。
 - [ ] 正文与底栏对齐；四类容器与移动端无横向溢出。
 - [ ] 文字/焦点/禁用/错误在实际背景上可辨，长说明与表格未裁切。
 - [ ] 表单布局与逐页设计一致；组件、字段、主题和响应式规则均已核对。

package/yida-skills/skills/yida-design/templates/design-themes/app-glass/app_theme.css

@@ -13,7 +13,7 @@
  *    --design-file <design.md> --output <app-theme.css> 生成主题。
  * 2. 修改 design.md 后重跑同一命令，CLI 增量更新 token 并保留其他定制。
  *    省略 --design-file 会重置模板，不用于保留已有定制的更新。
- * 3. 本模板默认品牌种子为 coffee 咖啡色；最终配色和圆角以 design.md 的 tokens 为准。
+ * 3. 品牌值保留项目占位和派生说明；先完成 design.md，再生成实际主题 CSS。
  * 4. 应用品牌色阶只使用平台实际生成的 --color-brand1-1、2、3、5、6、9、10；
  *    CLI 同时生成 --color-brand-1 至 --color-brand-4 和 --color-group，不要补造 4、7、8。
  * 5. 若 design.md 选择其他主色，必须同步替换品牌色阶、基础色阶、图表色组，以及模板中按钮、
@@ -35,13 +35,13 @@
   --color-white: var(--pod-card-bg-color);
 
   /* brand */
-  --color-brand1-1: #5B4C72;
-  --color-brand1-2: #E9E7EC;
-  --color-brand1-3: #F8F7F9;
-  --color-brand1-5: #282232;
-  --color-brand1-6: #45345f;
-  --color-brand1-9: #342848;
-  --color-brand1-10: #2A2530;
+  --color-brand1-1: <生成实际色值：--color-brand1-6 88% + #FFFFFF 12%，sRGB 逐通道混合>;
+  --color-brand1-2: <生成实际色值：--color-brand1-6 12% + #FFFFFF 88%，sRGB 逐通道混合>;
+  --color-brand1-3: <生成实际色值：--color-brand1-6 4% + #FFFFFF 96%，sRGB 逐通道混合>;
+  --color-brand1-5: <生成实际色值：--color-brand1-6 38% + #171717 62%，sRGB 逐通道混合>;
+  --color-brand1-6: {{PRIMARY_COLOR}};
+  --color-brand1-9: <生成实际色值：--color-brand1-6 76% + #000000 24%，sRGB 逐通道混合>;
+  --color-brand1-10: <生成实际色值：--color-brand1-6 26% + #202020 74%，sRGB 逐通道混合>;
 
   /* line */
   --color-line1-1: #c8bfd6;
@@ -95,11 +95,11 @@
 
   /* rounded */
   --corner-zero: 0px;
-  --corner-1: 4px;
-  --corner-2: 6px;
-  --corner-3: 8px;
-  --corner-4: 10px;
-  --corner-5: 12px;
+  --corner-1: 20px;
+  --corner-2: 20px;
+  --corner-3: 20px;
+  --corner-4: 20px;
+  --corner-5: 20px;
   --corner-circle: 50%;
   --corner-semicircle: 500px;
 
@@ -167,12 +167,12 @@
 
   /* 新主题下变量 */
   /* shell 背景 padding 圆角 */
-  --pod-shell-bg-color-light: var(--color-brand1-2, #E9E7EC);
+  --pod-shell-bg-color-light: var(--color-brand1-2, var(--color-brand1-2));
   --pod-shell-bg-color-white: #fff;
   --pod-shell-bg-color-gray: var(--pod-common-bg-color, #f0f2f5);
-  --pod-shell-bg-color-dark: var(--color-brand1-5, #282232);
+  --pod-shell-bg-color-dark: var(--color-brand1-5, var(--color-brand1-5));
   --pod-shell-padding: 4px;
-  --pod-shell-lshape-border-radius: 16px;
+  --pod-shell-lshape-border-radius: 20px;
   /* 新版主题shell main 容器相关 暂时不需要这个变量，写死用户不可配置 */
   --pod-shell-content-container-padding: 0px;
   --pod-shell-content-container-margin: 0px;
@@ -212,7 +212,7 @@
   --pod-formView-stickyFooter-box-shadow: none;
   --pod-formView-stickyFooter-height: 56px;
   --pod-formView-stickyFooter-bottom: 8px;
-  --pod-page-header-bg-color: var(--color-white, #fff);
+  --pod-page-header-bg-color: var(--pod-shell-theme-bg-color);
 
   /* 原生表单：按项目设计调整控件形状、密度和填充，不通过全局 input 选择器覆盖状态。 */
   --form-element-medium-corner: 20px;
@@ -258,8 +258,8 @@
   --pod-nav-page-white-bg-color: rgba(246, 247, 247, 1);
   --pod-nav-page-padding: var(--pod-lg-gap-pad-margin, 16px);
   --pod-nav-top-main-border-width: 1px;
-  --pod-nav-top-main-border-color: #00000014;
-  --pod-nav-l-sub-main-bg-color: var(--color-white, #fff);
+  --pod-nav-top-main-border-color: #C8BFD6;
+  --pod-nav-l-sub-main-bg-color: var(--pod-shell-theme-bg-color);
   --pod-nav-l-header-gap: 28px;
   --pod-nav-l-header-padding: 8px 16px;
   --pod-nav-l-aside-padding: 8px;
@@ -282,7 +282,7 @@
   --pod-nav-top-tab-item-max-width: 120px;
   --pod-nav-top-tab-item-padding: 0 12px;
   --pod-nav-top-tab-item-inner-padding: 12px 0;
-  --pod-nav-top-tab-indicator-width: 2px;
+  --pod-nav-top-tab-indicator-width: 0px;
 
   /* 新版导航平台 Header、内容行与操作区。 */
   --pod-nav-platform-header-height: 48px;
@@ -296,48 +296,52 @@
   --pod-nav-platform-action-badge-font-size: 9px;
   --pod-nav-platform-action-badge-radius: 7px;
   --pod-nav-platform-action-badge-digit-width: 6px;
-  --pod-nav-action-border: 0.5px solid var(--pod-nav-action-border-color);
+  --pod-nav-action-border: 1px solid #C8BFD6;
   --pod-nav-ai-wenban-border-color: #ffffff3d;
   --pod-nav-ai-wenban-bg:
     radial-gradient(64px 24px at 31% 0%, transparent, rgba(0, 0, 0, 0.6)),
     linear-gradient(
       161deg,
-      var(--color-brand1-1, #5B4C72) 5.22%,
-      var(--color-brand1-5, #282232) 50.54%,
-      var(--color-brand1-9, #342848) 89.61%
+      var(--color-brand1-1, #4584B3) 5.22%,
+      var(--color-brand1-5, #1F3A4E) 50.54%,
+      var(--color-brand1-9, #215780) 89.61%
     );
   --pod-nav-ai-wenban-text-color: var(--color-text1-5, #fff);
   --pod-nav-logo-gap: 8px;
   --pod-nav-logo-padding: 4px 8px;
-  --pod-nav-logo-bg: var(--color-brand1-6, #45345f);
-  --pod-nav-logo-border: none;
-  --pod-nav-logo-icon: var(--color-text1-5, #fff);
-  --pod-nav-logo-border-radius: 6px;
+  --pod-nav-logo-bg: var(--pod-nav-menu-bg-selected-color);
+  --pod-nav-logo-border: 1px solid #C8BFD6;
+  --pod-nav-logo-icon: var(--pod-nav-item-text-selected-color);
+  --pod-nav-logo-border-radius: 20px;
   --pod-nav-logo-size: 32px;
   --pod-nav-logo-img-size: calc(var(--pod-nav-logo-size, 32px) - 6px);
 
   /* 新版导航搜索 & 菜单栏 & 导航项气泡 */
   --pod-nav-search-height: var(--pod-nav-platform-row-height, 32px);
-  --pod-nav-search-border-color: transparent;
+  --pod-nav-search-border-color: #C8BFD6;
   --pod-nav-search-menu-gap: 8px;
   --pod-nav-menu-panel-search-padding-top: 8px;
   --pod-nav-menu-panel-top: 12px;
   --pod-nav-menu-panel-after-collapse-top: 40px;
-  --pod-nav-menu-item-height: 36px;
+  --pod-nav-menu-item-height: 48px;
   --pod-nav-menu-item-padding: 8px;
-  --pod-nav-menu-item-radius: var(--pod-sm-border-radius, 8px);
+  --pod-nav-menu-item-radius: 24px;
+  --pod-nav-menu-item-border: 1px solid #FFFFFF;
+  --pod-nav-menu-item-hover-border: 1px solid #FFFFFF;
+  --pod-nav-menu-item-selected-border: 1px solid #7C6996;
   --pod-nav-menu-font-size: 14px;
-  --pod-nav-menu-item-selected-font-weight: 400;
+  --pod-nav-menu-item-selected-font-weight: 500;
+  --pod-nav-menu-item-selected-shadow: none;
   --pod-nav-menu-line-height: 20px;
   --pod-nav-menu-icon-size: 16px;
   --pod-nav-menu-arrow-icon-size: 12px;
-  --pod-nav-menu-gap: 8px;
+  --pod-nav-menu-gap: 10px;
   --pod-nav-menu-item-gap: 4px;
   --pod-nav-popup-width: 220px;
   --pod-nav-popup-max-height: 400px;
   --pod-nav-popup-padding: 8px;
-  --pod-nav-popup-border-radius: var(--corner-3);
-  --pod-nav-popup-shadow: 0 8px 24px rgba(31, 35, 41, 0.12);
+  --pod-nav-popup-border-radius: 20px;
+  --pod-nav-popup-shadow: 0 10px 32px rgba(69,52,95,.12);
 
   /* 侧导菜单滚动区底部渐隐遮罩高度，并预留等高底部空间。 */
   --pod-nav-menu-fade-height: 32px;
@@ -355,12 +359,33 @@
   --page-bg: var(--pod-page-bg-color, #fff);
   --card-bg: var(--pod-card-bg-color, #fff);
   --popup-bg: var(--color-fill1-5, #fff);
-  --pod-shell-theme-bg-color: #FFFFFF;
-  --pod-nav-item-text-color: #595959;
-  --pod-nav-item-text-hover-color: #262626;
-  --pod-nav-item-text-selected-color: var(--color-brand1-6);
-  --pod-nav-menu-bg-hover-color: #F5F5F5;
-  --pod-nav-menu-bg-selected-color: #F0F0F0;
+  --pod-shell-theme-bg-color: #EBE5F4;
+  --pod-nav-item-text-color: #5A4674;
+  --pod-nav-item-text-hover-color: #45345F;
+  --pod-nav-item-text-selected-color: #37264F;
+  --pod-nav-menu-bg-hover-color: #E0D7EE;
+  --pod-nav-menu-bg-selected-color: #D2C4E3;
+  --pod-nav-logo-text: var(--pod-nav-item-text-hover-color);
+  --pod-nav-sub-divider-color: #C8BFD6;
+  --pod-nav-item-text-disabled-color: rgba(24,28,31,.30);
+  --pod-nav-l-container-bg: var(--pod-shell-theme-bg-color);
+  --pod-nav-l-group-label-color: var(--pod-nav-item-text-color);
+  --pod-nav-l-search-border-color: #C8BFD6;
+  --pod-nav-popup-bg-color: var(--pod-shell-theme-bg-color);
+  --pod-nav-tab-line-hover-color: var(--pod-nav-item-text-hover-color);
+  --pod-nav-tab-line-selected-color: var(--pod-nav-item-text-hover-color);
+  --pod-nav-search-bg-color: var(--pod-nav-menu-bg-hover-color);
+  --pod-nav-search-bg-hover-color: var(--pod-nav-menu-bg-hover-color);
+  --pod-nav-search-bg-active-color: var(--pod-nav-menu-bg-hover-color);
+  --pod-nav-search-placeholder-color: var(--pod-nav-item-text-color);
+  --pod-nav-search-text-color: var(--pod-nav-item-text-hover-color);
+  --pod-nav-search-icon-color: var(--pod-nav-item-text-color);
+  --pod-nav-search-border-hover-color: var(--pod-nav-item-text-hover-color);
+  --pod-nav-search-border-active-color: var(--pod-nav-item-text-hover-color);
+  --pod-nav-action-icon-color: var(--pod-nav-item-text-color);
+  --pod-nav-action-border-color: #C8BFD6;
+  --pod-nav-action-bg-hover-color: var(--pod-nav-menu-bg-hover-color);
+  --pod-nav-action-bg-active-color: var(--pod-nav-menu-bg-hover-color);
   --input-hover-bg-color: #f9f7fd;
   --oyd-page-bg: var(--pod-page-bg-color);
   --oyd-surface: var(--pod-card-bg-color);
@@ -378,11 +403,11 @@
   --oyd-rule-style: solid;
   --oyd-layout-columns: minmax(0, 6fr) minmax(0, 6fr);
   --oyd-surface-shadow: 0 10px 32px rgba(69,52,95,.12);
-  --color-brand-1: #2A2530;
-  --color-brand-2: #5B4C72;
-  --color-brand-3: #45345f;
-  --color-brand-4: #342848;
-  --color-group: #45345f, #5B4C72, #282232, #E9E7EC, #342848, #F8F7F9;
+  --color-brand-1: var(--color-brand1-10);
+  --color-brand-2: var(--color-brand1-1);
+  --color-brand-3: var(--color-brand1-6);
+  --color-brand-4: var(--color-brand1-9);
+  --color-group: var(--color-brand1-6), var(--color-brand1-1), var(--color-brand1-5), var(--color-brand1-2), var(--color-brand1-9), var(--color-brand1-3);
 }
 
 /* 独立提交页（含抽屉 iframe）使用应用外衬；平台默认壳层取导航背景且不消费背景图。 */
@@ -394,6 +419,22 @@ body.pod-premium.page-type-submit .vc-shell-without-nav.pod-premium {
   background-size: cover;
 }
 
+/* 原生详情属于内容区，独立页面和抽屉内都沿用内容画布与前景。 */
+body.pod-premium.page-type-detail .vc-shell-without-nav.pod-premium {
+  background-color: var(--pod-page-bg-color, var(--color-white, #fff));
+  --pod-theme-text-color: var(--color-text1-4, #202020);
+}
+
+/* 详情顶栏的独立图标使用内容文字色，保留按钮自身的禁用状态。 */
+body.pod-premium.page-type-detail .top-banner-area
+  .next-yida-button-iconOnly:not([disabled]):not(.disabled) .next-icon {
+  color: var(--color-text1-3, #737373);
+}
+body.pod-premium.page-type-detail .top-banner-area
+  .next-yida-button-iconOnly:not([disabled]):not(.disabled):hover .next-icon {
+  color: var(--color-text1-4, #202020);
+}
+
 /* 按实际底栏类型适配 PC 固定提交栏，不按有无导航判断。
  * 排除 DATA_MANAGE 和容器内 sticky 模式；抽屉提交标记按平台规则优先。
  * 管理页、旧主题、移动端继续由各自布局负责占位。 */
@@ -448,44 +489,46 @@ body.pod-premium.page-type-submit
 
 :root {
   /* Light theme defaults. */
-  --pod-nav-logo-text: var(--color-text1-4, #202020);
-  --pod-nav-sub-divider-color: var(--color-line1-1, #efefef);
-  --pod-nav-item-text-color: #595959;
-  --pod-nav-item-text-hover-color: #262626;
-  --pod-nav-item-text-disabled-color: rgba(24, 28, 31, 0.24);
-  --pod-nav-item-text-selected-color: var(--color-brand1-6);
-  --pod-nav-menu-bg-hover-color: #F5F5F5;
-  --pod-nav-menu-bg-selected-color: #F0F0F0;
-  --pod-nav-l-container-bg: rgba(255, 255, 255, 0.4);
-  --pod-nav-l-group-label-color: rgba(24, 28, 31, 0.4);
-  --pod-nav-l-search-border-color: rgba(0, 0, 0, 0);
-  --pod-nav-popup-bg-color: var(--popup-bg, var(--color-white, #fff));
-  --pod-nav-tab-line-hover-color: var(--color-brand1-6, #45345f);
-  --pod-nav-tab-line-selected-color: var(--color-brand1-6, #45345f);
-  --pod-nav-search-bg-color: var(--ovrelay-fill1-6, rgba(24, 28, 31, 0.06));
-  --pod-nav-search-bg-hover-color: var(--ovrelay-fill1-6, rgba(24, 28, 31, 0.06));
-  --pod-nav-search-bg-active-color: rgba(83, 88, 97, 0.24);
-  --pod-nav-search-placeholder-color: var(--color-text1-1, #d6d6d6);
-  --pod-nav-search-text-color: var(--color-text1-4, #202020);
-  --pod-nav-search-icon-color: var(--color-text1-2, #adadad);
-  --pod-nav-search-border-hover-color: var(--color-brand1-6, #45345f);
-  --pod-nav-search-border-active-color: var(--color-brand1-6, #45345f);
-  --pod-nav-action-icon-color: var(--color-text1-2, #adadad);
-  --pod-nav-action-border-color: rgba(24, 28, 31, 0.12);
-  --pod-nav-action-bg-hover-color: rgba(83, 88, 97, 0.16);
-  --pod-nav-action-bg-active-color: rgba(83, 88, 97, 0.24);
+  --pod-nav-logo-text: var(--pod-nav-item-text-hover-color);
+  --pod-nav-sub-divider-color: #C8BFD6;
+  --pod-nav-item-text-color: #5A4674;
+  --pod-nav-item-text-hover-color: #45345F;
+  --pod-nav-item-text-disabled-color: rgba(24,28,31,.30);
+  --pod-nav-item-text-selected-color: #37264F;
+  --pod-nav-menu-bg-hover-color: #E0D7EE;
+  --pod-nav-menu-bg-selected-color: #D2C4E3;
+  --pod-nav-l-container-bg: var(--pod-shell-theme-bg-color);
+  --pod-nav-l-group-label-color: var(--pod-nav-item-text-color);
+  --pod-nav-l-search-border-color: #C8BFD6;
+  --pod-nav-popup-bg-color: var(--pod-shell-theme-bg-color);
+  --pod-nav-tab-line-hover-color: var(--pod-nav-item-text-hover-color);
+  --pod-nav-tab-line-selected-color: var(--pod-nav-item-text-hover-color);
+  --pod-nav-search-bg-color: var(--pod-nav-menu-bg-hover-color);
+  --pod-nav-search-bg-hover-color: var(--pod-nav-menu-bg-hover-color);
+  --pod-nav-search-bg-active-color: var(--pod-nav-menu-bg-hover-color);
+  --pod-nav-search-placeholder-color: var(--pod-nav-item-text-color);
+  --pod-nav-search-text-color: var(--pod-nav-item-text-hover-color);
+  --pod-nav-search-icon-color: var(--pod-nav-item-text-color);
+  --pod-nav-search-border-hover-color: var(--pod-nav-item-text-hover-color);
+  --pod-nav-search-border-active-color: var(--pod-nav-item-text-hover-color);
+  --pod-nav-action-icon-color: var(--pod-nav-item-text-color);
+  --pod-nav-action-border-color: #C8BFD6;
+  --pod-nav-action-bg-hover-color: var(--pod-nav-menu-bg-hover-color);
+  --pod-nav-action-bg-active-color: var(--pod-nav-menu-bg-hover-color);
   --pod-theme-text-color: var(--color-text1-4, #202020);
   --pod-page-header-text-color: var(--pod-theme-text-color, var(--color-text1-4, #202020));
 }
 
 .pod-premium.nav-light {
-  --pod-shell-theme-bg-color: #FFFFFF;
-  --pod-page-header-bg-color: #FFFFFF;
+  --pod-shell-theme-bg-color: #EBE5F4;
+  --pod-page-header-bg-color: var(--pod-shell-theme-bg-color);
+  --pod-shell-lshape-border-radius: 20px;
 }
 
 .pod-premium.nav-dark {
   --pod-shell-theme-bg-color: var(--pod-shell-bg-color-dark, var(--color-brand1-5, rgba(52, 50, 44, 1)));
   --pod-page-header-bg-color: var(--pod-shell-theme-bg-color, var(--color-white, #fff));
+  --pod-shell-lshape-border-radius: 16px;
 }
 
 .pod-premium.nav-white {
@@ -501,15 +544,53 @@ body.pod-premium.page-type-submit
 .pod-premium.is-light {
   --pod-theme-text-color: var(--color-text1-4, #202020);
   --pod-page-header-text-color: var(--pod-theme-text-color, var(--color-text1-4, #202020));
-  --pod-nav-logo-bg: var(--color-brand1-6, #45345f);
-  --pod-nav-logo-border: none;
-  --pod-nav-item-text-selected-color: var(--color-brand1-6);
-  --pod-nav-menu-bg-selected-color: #F0F0F0;
-  --pod-nav-popup-bg-color: var(--color-white, #fff);
-  --pod-nav-action-icon-color: var(--color-text1-2, #adadad);
-  --pod-nav-item-text-color: #595959;
-  --pod-nav-item-text-hover-color: #262626;
-  --pod-nav-menu-bg-hover-color: #F5F5F5;
+  --pod-nav-logo-bg: var(--pod-nav-menu-bg-selected-color);
+  --pod-nav-logo-border: 1px solid #C8BFD6;
+  --pod-nav-item-text-selected-color: #37264F;
+  --pod-nav-menu-bg-selected-color: #D2C4E3;
+  --pod-nav-popup-bg-color: var(--pod-shell-theme-bg-color);
+  --pod-nav-action-icon-color: var(--pod-nav-item-text-color);
+  --pod-nav-item-text-color: #5A4674;
+  --pod-nav-item-text-hover-color: #45345F;
+  --pod-nav-menu-bg-hover-color: #E0D7EE;
+  --pod-nav-l-sub-main-bg-color: var(--pod-shell-theme-bg-color);
+  --pod-nav-top-main-border-width: 1px;
+  --pod-nav-top-main-border-color: #C8BFD6;
+  --pod-nav-top-tab-indicator-width: 0px;
+  --pod-nav-logo-text: var(--pod-nav-item-text-hover-color);
+  --pod-nav-logo-icon: var(--pod-nav-item-text-selected-color);
+  --pod-nav-logo-border-radius: 20px;
+  --pod-nav-sub-divider-color: #C8BFD6;
+  --pod-nav-item-text-disabled-color: rgba(24,28,31,.30);
+  --pod-nav-l-container-bg: var(--pod-shell-theme-bg-color);
+  --pod-nav-l-group-label-color: var(--pod-nav-item-text-color);
+  --pod-nav-l-search-border-color: #C8BFD6;
+  --pod-nav-popup-border-radius: 20px;
+  --pod-nav-popup-shadow: 0 10px 32px rgba(69,52,95,.12);
+  --pod-nav-tab-line-hover-color: var(--pod-nav-item-text-hover-color);
+  --pod-nav-tab-line-selected-color: var(--pod-nav-item-text-hover-color);
+  --pod-nav-search-bg-color: var(--pod-nav-menu-bg-hover-color);
+  --pod-nav-search-bg-hover-color: var(--pod-nav-menu-bg-hover-color);
+  --pod-nav-search-bg-active-color: var(--pod-nav-menu-bg-hover-color);
+  --pod-nav-search-placeholder-color: var(--pod-nav-item-text-color);
+  --pod-nav-search-text-color: var(--pod-nav-item-text-hover-color);
+  --pod-nav-search-icon-color: var(--pod-nav-item-text-color);
+  --pod-nav-search-border-color: #C8BFD6;
+  --pod-nav-search-border-hover-color: var(--pod-nav-item-text-hover-color);
+  --pod-nav-search-border-active-color: var(--pod-nav-item-text-hover-color);
+  --pod-nav-action-border-color: #C8BFD6;
+  --pod-nav-action-border: 1px solid #C8BFD6;
+  --pod-nav-action-bg-hover-color: var(--pod-nav-menu-bg-hover-color);
+  --pod-nav-action-bg-active-color: var(--pod-nav-menu-bg-hover-color);
+  --pod-nav-menu-item-height: 48px;
+  --pod-nav-menu-item-radius: 24px;
+  --pod-nav-menu-item-border: 1px solid #FFFFFF;
+  --pod-nav-menu-item-hover-border: 1px solid #FFFFFF;
+  --pod-nav-menu-item-selected-border: 1px solid #7C6996;
+  --pod-nav-menu-font-size: 14px;
+  --pod-nav-menu-item-selected-font-weight: 500;
+  --pod-nav-menu-line-height: 20px;
+  --pod-nav-menu-gap: 10px;
 }
 
 .pod-premium.is-dark {
@@ -529,7 +610,7 @@ body.pod-premium.page-type-submit
   --pod-nav-l-container-bg: rgba(255, 255, 255, 0.08);
   --pod-nav-l-group-label-color: rgba(255, 255, 255, 0.4);
   --pod-nav-l-search-border-color: rgba(255, 255, 255, 0.05);
-  --pod-nav-popup-bg-color: var(--pod-shell-bg-color-dark, var(--color-brand1-5, #282232));
+  --pod-nav-popup-bg-color: var(--pod-shell-bg-color-dark, var(--color-brand1-5, rgba(52, 50, 44, 1)));
   --pod-nav-tab-line-hover-color: #fff;
   --pod-nav-tab-line-selected-color: #fff;
   --pod-nav-search-bg-color: rgba(255, 255, 255, 0.12);
@@ -545,7 +626,67 @@ body.pod-premium.page-type-submit
   --pod-nav-action-border: 0.5px solid rgba(255, 255, 255, 0.2);
   --pod-nav-action-bg-hover-color: rgba(255, 255, 255, 0.12);
   --pod-nav-action-bg-active-color: rgba(255, 255, 255, 0.16);
+  --pod-nav-l-sub-main-bg-color: var(--color-white, #fff);
+  --pod-nav-top-main-border-width: 1px;
+  --pod-nav-top-main-border-color: #00000014;
+  --pod-nav-top-tab-indicator-width: 2px;
+  --pod-nav-logo-icon: var(--color-text1-5, #fff);
+  --pod-nav-logo-border-radius: 6px;
+  --pod-nav-popup-border-radius: var(--corner-3);
+  --pod-nav-popup-shadow: 0 8px 24px rgba(31, 35, 41, 0.12);
+  --pod-nav-search-border-color: transparent;
+  --pod-nav-menu-item-height: 36px;
+  --pod-nav-menu-item-radius: var(--pod-sm-border-radius, 8px);
+  --pod-nav-menu-item-border: none;
+  --pod-nav-menu-item-hover-border: var(--pod-nav-menu-item-border);
+  --pod-nav-menu-item-selected-border: var(--pod-nav-menu-item-border);
+  --pod-nav-menu-font-size: 14px;
+  --pod-nav-menu-item-selected-font-weight: 400;
+  --pod-nav-menu-line-height: 20px;
+  --pod-nav-menu-gap: 8px;
+}
+
+/* openyida-navigation-shape:start */
+/* Side/L navigation and top tabs share the same theme-defined menu shape.
+ * Border widths stay constant between states; border-box keeps row height stable. */
+.pod-premium .deep-shell-nav-menu-content .next-nav-item,
+.pod-premium .deep-shell-nav-tab-list .next-nav-item {
+  box-sizing: border-box;
+  border-radius: var(--pod-nav-menu-item-radius, 8px);
+  border: var(--pod-nav-menu-item-border, none);
+}
+/* Native inner rows also have a fixed minimum height. Fit them inside the
+ * bordered item instead of letting a thick outline push content below it. */
+.vc-shell.pod-premium .next-nav.next-line.next-ver.deep-shell-nav-menu-content:not(.next-icon-only) .next-nav-item.next-menu-item > .next-menu-item-inner,
+.vc-shell.pod-premium .next-shell-header .next-shell-navigation .next-nav.next-line.next-hoz.deep-shell-nav-tab-list .next-nav-item.next-menu-item > .next-menu-item-inner {
+  box-sizing: border-box;
+  height: 100% !important;
+  min-height: 0 !important;
+}
+.pod-premium .deep-shell-nav-menu-content .next-nav-item:hover,
+.pod-premium .deep-shell-nav-tab-list .next-nav-item:hover {
+  border: var(--pod-nav-menu-item-hover-border, var(--pod-nav-menu-item-border, none));
+}
+/* Platform top tabs use transparent backgrounds and zero margin !important.
+ * Match the header scope so theme surfaces and spacing can reveal their shape. */
+.vc-shell.pod-premium .next-shell-header .next-shell-navigation .next-nav.next-line.next-hoz.deep-shell-nav-tab-list .next-nav-item.next-menu-item {
+  margin-inline: calc(var(--pod-nav-menu-gap, 8px) / 2) !important;
+}
+.vc-shell.pod-premium .next-shell-header .next-shell-navigation .next-nav.next-line.next-hoz.deep-shell-nav-tab-list .next-nav-item.next-menu-item:hover {
+  background: var(--pod-nav-menu-bg-hover-color) !important;
+  color: var(--pod-nav-item-text-hover-color) !important;
+}
+.vc-shell.pod-premium .next-shell-header .next-shell-navigation .next-nav.next-line.next-hoz.deep-shell-nav-tab-list .next-nav-item.next-menu-item.next-selected {
+  background: var(--pod-nav-menu-bg-selected-color) !important;
+  color: var(--pod-nav-item-text-selected-color) !important;
+}
+/* Selected state wins over hover, retaining the original inset-shadow marker. */
+.pod-premium .deep-shell-nav-menu-content .next-nav-item.next-selected,
+.pod-premium .deep-shell-nav-tab-list .next-nav-item.next-selected {
+  border: var(--pod-nav-menu-item-selected-border, var(--pod-nav-menu-item-border, none));
+  box-shadow: var(--pod-nav-menu-item-selected-shadow, none);
 }
+/* openyida-navigation-shape:end */
 
 /* OPENYIDA APPLICATION STYLE RECIPES START
  * Opt-in semantic classes for custom pages. Native form structure stays in Schema.