openyida 2026.9.20 → 2026.9.21

package/yida-skills/skills/yida-design/templates/design-themes/free-creative/app_theme.css

@@ -1,4 +1,3 @@
-/* Free creative: author design.md before generating the project CSS. */
 @charset "UTF-8";
 
 /*
@@ -14,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 选择其他主色，必须同步替换品牌色阶、基础色阶、图表色组，以及模板中按钮、
@@ -26,9 +25,9 @@
 
 :root {
   /* surfaces */
-  --pod-app-root-bg-color: #ffffff;
+  --pod-app-root-bg-color: #f6f6f6;
   --pod-app-root-bg-image: none;
-  --pod-page-bg-color: #ffffff;
+  --pod-page-bg-color: #f6f6f6;
   --pod-card-bg-color: #ffffff;
   --pod-table-cell-color: var(--pod-card-bg-color);
 
@@ -36,37 +35,36 @@
   --color-white: var(--pod-card-bg-color);
 
   /* brand */
-  --color-brand1-1: rgba(155, 136, 121, 0.8);
-  --color-brand1-2: rgba(243, 240, 239, 1);
-  --color-brand1-3: rgba(155, 136, 121, 0.2);
-  --color-brand1-5: rgba(52, 50, 44, 1);
-  --color-brand1-6: rgba(155, 136, 121, 1);
-  --color-brand1-9: rgba(58, 55, 49, 1);
-  --color-brand1-10: rgba(155, 136, 121, 0.32);
+  --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: #efefef;
-  --color-line1-2: #e5e5e5;
+  --color-line1-1: #cccccc;
+  --color-line1-2: #cccccc;
 
   /* fill */
-  --color-fill1-1: #f1f2f3;
-  --color-fill1-2: #f2f2f2;
-  --color-fill1-3: #eaeaea;
+  --color-fill1-1: #f6f6f6;
+  --color-fill1-2: #f6f6f6;
+  --color-fill1-3: #cccccc;
   --color-fill1-5: #ffffff;
   --color-fill1-10: #262626;
 
   /* text */
-  --color-text1-5: #ffffff;
-  --color-text1-4: #202020;
-  --color-text1-10: #606060;
-  --color-text1-3: #737373;
-  --color-text1-2: #adadad;
-  --color-text1-1: #d6d6d6;
+  --color-text1-5: #FFFFFF;
+  --color-text1-4: #242424;
+  --color-text1-10: #242424;
+  --color-text1-3: #242424;
+  --color-text1-2: #858781;
+  --color-text1-1: #cccccc;
 
   /* typography */
   --font-family-base:
-    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    sans-serif;
+    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-size-subhead: 18px;
   --font-weight-subhead: 500;
   --font-lineheight-subhead: 1.3;
@@ -98,10 +96,10 @@
   /* rounded */
   --corner-zero: 0px;
   --corner-1: 4px;
-  --corner-2: 8px;
-  --corner-3: 12px;
-  --corner-4: 16px;
-  --corner-5: 20px;
+  --corner-2: 4px;
+  --corner-3: 4px;
+  --corner-4: 4px;
+  --corner-5: 4px;
   --corner-circle: 50%;
   --corner-semicircle: 500px;
 
@@ -150,7 +148,7 @@
     rgba(255, 255, 255, 0.43) 72%
   );
   --pod-sticky-footer-box-shadow:
-    0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    none;
 
   /* 宜搭相关，后面再做抽离，本次发布只影响私有化 */
   --yida-sm-border-radius: var(--corner-2);
@@ -169,12 +167,12 @@
 
   /* 新主题下变量 */
   /* shell 背景 padding 圆角 */
-  --pod-shell-bg-color-light: var(--color-brand1-2, rgba(243, 240, 239, 1));
+  --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, rgba(52, 50, 44, 1));
+  --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: 4px;
   /* 新版主题shell main 容器相关 暂时不需要这个变量，写死用户不可配置 */
   --pod-shell-content-container-padding: 0px;
   --pod-shell-content-container-margin: 0px;
@@ -191,7 +189,7 @@
 
   /* 新版主题页面容器相关 */
   --pod-page-border: 1px solid var(--color-line1-1, #efefef);
-  --pod-page-border-radius: var(--pod-xl-border-radius, 20px);
+  --pod-page-border-radius: 4px;
   --pod-page-padding: 20px;
   --pod-page-mobile-margin: 12px;
   --pod-page-mobile-padding: 12px;
@@ -206,33 +204,30 @@
   --pod-formView-stickyFooter: 0 0 var(--pod-page-border-radius, 20px)
     var(--pod-page-border-radius, 20px);
   --pod-formView-stickyFooter-border: none;
-  --pod-formView-stickyFooter-border-top: var(
-    --pod-page-border,
-    1px solid var(--color-line1-1, #efefef)
-  );
+  --pod-formView-stickyFooter-border-top: 1px solid #cccccc;
   --pod-inDrawer-stickyFooter-border: none;
   --pod-inDrawer-stickyFooter-border-top: 0.5px solid
     var(--color-line1-1, #efefef);
-  --pod-formView-stickyFooter-bg-color: var(--pod-page-bg-color, #fff);
+  --pod-formView-stickyFooter-bg-color: #f6f6f6;
   --pod-formView-stickyFooter-box-shadow: none;
-  --pod-formView-stickyFooter-height: 50px;
-  --pod-formView-stickyFooter-bottom: var(--pod-page-auto-width-margin, 8px);
-  --pod-page-header-bg-color: var(--color-white, #fff);
+  --pod-formView-stickyFooter-height: 56px;
+  --pod-formView-stickyFooter-bottom: 8px;
+  --pod-page-header-bg-color: var(--pod-shell-theme-bg-color);
 
   /* 原生表单：按项目设计调整控件形状、密度和填充，不通过全局 input 选择器覆盖状态。 */
-  --form-element-medium-corner: var(--corner-2, 8px);
-  --form-element-medium-height: 32px;
+  --form-element-medium-corner: 4px;
+  --form-element-medium-height: 36px;
   --form-element-medium-font-size: 14px;
-  --input-bg-color: var(--pod-card-bg-color, #fff);
+  --input-bg-color: #ffffff;
   --input-border-width: 1px;
-  --input-border-color: var(--color-line1-2, rgba(24, 28, 31, .12));
-  --input-hover-border-color: var(--color-brand1-6, #0089ff);
-  --input-focus-border-color: var(--color-brand1-6, #006dcc);
-  --input-focus-bg-color: var(--input-bg-color, #fff);
+  --input-border-color: #cccccc;
+  --input-hover-border-color: var(--color-brand1-6);
+  --input-focus-border-color: var(--color-brand1-6);
+  --input-focus-bg-color: #ffffff;
   /* DeepContainer 的 inline backgroundColor 通过此变量接入应用页面表面。 */
-  --yida-form-content-bgcolor: var(--pod-page-bg-color, #fff);
-  --pod-form-label-color: var(--color-text1-10, rgba(24, 28, 31, .8));
-  --form-top-label-margin-b: 0px;
+  --yida-form-content-bgcolor: #ffffff;
+  --pod-form-label-color: #242424;
+  --form-top-label-margin-b: 8px;
 
   --pod-data-manager-title-padding: 12px 8px 0;
   --pod-data-manager-container-padding: 16px 20px 20px;
@@ -240,14 +235,13 @@
   --pod-detail-container-margin: 0px;
   --pod-detail-shell-padding: var(--pod-detail-container-padding, 8px);
   --pod-field-preview-min-height: 32px;
-  --pod-field-preview-padding: 0 8px;
+  --pod-field-preview-padding: 8px 12px;
   --pod-field-preview-gap: 4px;
-  --pod-field-preview-bg-color: var(--color-fill1-1, #f1f2f3);
-  --pod-field-preview-border-radius: var(--pod-sm-border-radius, 8px);
-  --pod-field-preview-indicator-color: var(--color-fill1-3, #eaeaea);
-  --pod-field-preview-shadow: inset 2px 0 0 0
-    var(--pod-field-preview-indicator-color, #eaeaea);
-  --pod-field-preview-text-color: var(--color-text1-4, #202020);
+  --pod-field-preview-bg-color: #ffffff;
+  --pod-field-preview-border-radius: 4px;
+  --pod-field-preview-indicator-color: var(--color-fill1-3);
+  --pod-field-preview-shadow: none;
+  --pod-field-preview-text-color: #242424;
   --pod-field-preview-line-height: 20px;
 
   /* 新版主题页面容器内部相关 */
@@ -257,18 +251,15 @@
   --pod-card-spacing: var(--pod-md-gap-pad-margin);
   /* 普通提交（含有导航页面）、iframe 抽屉提交及详情：控制内层按钮容器。
    * 阴影使用 --pod-sticky-footer-box-shadow；与上面的 formView 外层分别设计。 */
-  --pod-page-footer-bg-color: var(
-    --pod-card-bg-color,
-    var(--color-white, #fff)
-  );
-  --pod-page-footer-border-radius: var(--corner-semicircle, 500px);
-  --pod-page-content-max-width: 1180px;
+  --pod-page-footer-bg-color: #ffffff;
+  --pod-page-footer-border-radius: 4px;
+  --pod-page-content-max-width: 1000px;
   --pod-nav-page-bg-color: var(--color-white, #fff);
   --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: #CCCCCC;
+  --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;
@@ -291,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;
@@ -305,38 +296,42 @@
   --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 #CCCCCC;
   --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, rgba(155, 136, 121, 0.8)) 5.22%,
-      var(--color-brand1-5, rgba(52, 50, 44, 1)) 50.54%,
-      var(--color-brand1-9, rgba(58, 55, 49, 1)) 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, rgba(155, 136, 121, 1));
-  --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 #CCCCCC;
+  --pod-nav-logo-icon: var(--pod-nav-item-text-selected-color);
+  --pod-nav-logo-border-radius: 4px;
   --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: #CCCCCC;
   --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: 40px;
   --pod-nav-menu-item-padding: 8px;
-  --pod-nav-menu-item-radius: var(--pod-sm-border-radius, 8px);
+  --pod-nav-menu-item-radius: 4px;
+  --pod-nav-menu-item-border: none;
+  --pod-nav-menu-item-hover-border: none;
+  --pod-nav-menu-item-selected-border: none;
   --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;
@@ -345,8 +340,8 @@
   --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: 4px;
+  --pod-nav-popup-shadow: none;
 
   /* 侧导菜单滚动区底部渐隐遮罩高度，并预留等高底部空间。 */
   --pod-nav-menu-fade-height: 32px;
@@ -364,6 +359,55 @@
   --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: #404040;
+  --pod-nav-item-text-hover-color: #171717;
+  --pod-nav-item-text-selected-color: #FFFFFF;
+  --pod-nav-menu-bg-hover-color: #F0F0F0;
+  --pod-nav-menu-bg-selected-color: #303030;
+  --pod-nav-logo-text: var(--pod-nav-item-text-hover-color);
+  --pod-nav-sub-divider-color: #CCCCCC;
+  --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: #CCCCCC;
+  --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: #CCCCCC;
+  --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: #ffffff;
+  --oyd-page-bg: var(--pod-page-bg-color);
+  --oyd-surface: var(--pod-card-bg-color);
+  --oyd-canvas-image: var(--pod-app-root-bg-image);
+  --oyd-ink: var(--color-text1-4);
+  --oyd-border: var(--color-line1-2);
+  --oyd-accent: var(--color-brand1-6);
+  --oyd-radius: 4px;
+  --oyd-content-width: 1000px;
+  --oyd-content-padding: 24px;
+  --oyd-field-gap: 20px;
+  --oyd-section-gap: 40px;
+  --oyd-heading-font: var(--font-family-base);
+  --oyd-heading-size: 32px;
+  --oyd-rule-style: solid;
+  --oyd-layout-columns: minmax(0, 12fr);
+  --oyd-surface-shadow: none;
+  --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）使用应用外衬；平台默认壳层取导航背景且不消费背景图。 */
@@ -375,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 模式；抽屉提交标记按平台规则优先。
  * 管理页、旧主题、移动端继续由各自布局负责占位。 */
@@ -429,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: var(--color-text1-4, #202020);
-  --pod-nav-item-text-hover-color: var(--color-text1-4, #202020);
-  --pod-nav-item-text-disabled-color: rgba(24, 28, 31, 0.24);
-  --pod-nav-item-text-selected-color: var(--color-brand1-6, rgba(155, 136, 121, 1));
-  --pod-nav-menu-bg-hover-color: rgba(24, 28, 31, 0.05);
-  --pod-nav-menu-bg-selected-color: var(--color-brand1-3, rgba(155, 136, 121, 0.2));
-  --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, rgba(155, 136, 121, 1));
-  --pod-nav-tab-line-selected-color: var(--color-brand1-6, rgba(155, 136, 121, 1));
-  --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, rgba(155, 136, 121, 1));
-  --pod-nav-search-border-active-color: var(--color-brand1-6, rgba(155, 136, 121, 1));
-  --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: #CCCCCC;
+  --pod-nav-item-text-color: #404040;
+  --pod-nav-item-text-hover-color: #171717;
+  --pod-nav-item-text-disabled-color: rgba(24,28,31,.30);
+  --pod-nav-item-text-selected-color: #FFFFFF;
+  --pod-nav-menu-bg-hover-color: #F0F0F0;
+  --pod-nav-menu-bg-selected-color: #303030;
+  --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: #CCCCCC;
+  --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: #CCCCCC;
+  --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: var(--pod-shell-bg-color-light, var(--color-brand1-2, rgba(243, 240, 239, 1)));
-  --pod-page-header-bg-color: var(--pod-shell-theme-bg-color, var(--color-white, #fff));
+  --pod-shell-theme-bg-color: #FFFFFF;
+  --pod-page-header-bg-color: var(--pod-shell-theme-bg-color);
+  --pod-shell-lshape-border-radius: 4px;
 }
 
 .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 {
@@ -482,12 +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, rgba(155, 136, 121, 1));
-  --pod-nav-logo-border: none;
-  --pod-nav-item-text-selected-color: var(--color-brand1-6, rgba(155, 136, 121, 1));
-  --pod-nav-menu-bg-selected-color: var(--color-brand1-3, rgba(155, 136, 121, 0.2));
-  --pod-nav-popup-bg-color: var(--color-white, #fff);
-  --pod-nav-action-icon-color: var(--color-text1-2, #adadad);
+  --pod-nav-logo-bg: var(--pod-nav-menu-bg-selected-color);
+  --pod-nav-logo-border: 1px solid #CCCCCC;
+  --pod-nav-item-text-selected-color: #FFFFFF;
+  --pod-nav-menu-bg-selected-color: #303030;
+  --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: #404040;
+  --pod-nav-item-text-hover-color: #171717;
+  --pod-nav-menu-bg-hover-color: #F0F0F0;
+  --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: #CCCCCC;
+  --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: 4px;
+  --pod-nav-sub-divider-color: #CCCCCC;
+  --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: #CCCCCC;
+  --pod-nav-popup-border-radius: 4px;
+  --pod-nav-popup-shadow: none;
+  --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: #CCCCCC;
+  --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: #CCCCCC;
+  --pod-nav-action-border: 1px solid #CCCCCC;
+  --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: 40px;
+  --pod-nav-menu-item-radius: 4px;
+  --pod-nav-menu-item-border: none;
+  --pod-nav-menu-item-hover-border: none;
+  --pod-nav-menu-item-selected-border: none;
+  --pod-nav-menu-font-size: 14px;
+  --pod-nav-menu-item-selected-font-weight: 500;
+  --pod-nav-menu-line-height: 20px;
+  --pod-nav-menu-gap: 8px;
 }
 
 .pod-premium.is-dark {
@@ -523,4 +626,64 @@ 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 */