diff --git a/.gitea/workflows/deploy.yml b/.gitea/workflows/deploy.yml
index 41601c9..76946f8 100644
--- a/.gitea/workflows/deploy.yml
+++ b/.gitea/workflows/deploy.yml
@@ -28,7 +28,7 @@ jobs:
 
       - name: Build Flutter Web
         working-directory: client
-        run: flutter build web --release --dart-define=BASE_URL=https://jiu.51yanmei.com --dart-define=PUBLIC_URL=https://jiu.51yanmei.com
+        run: flutter build web --release --base-href=/app/ --dart-define=BASE_URL=https://jiu.51yanmei.com --dart-define=PUBLIC_URL=https://jiu.51yanmei.com
 
       - name: Package & Create Forgejo Release
         env:
@@ -75,6 +75,8 @@ ${RECENT_LOGS}"
           scp -O -i ~/.ssh/ec2_deploy.pem backend/jiu-server ${EC2_USER}@${EC2_HOST}:/tmp/jiu-server
           rsync -avz --delete -e "ssh -i ~/.ssh/ec2_deploy.pem" \
             client/build/web/ ${EC2_USER}@${EC2_HOST}:/tmp/jiu-web-new/
+          rsync -avz --delete -e "ssh -i ~/.ssh/ec2_deploy.pem" \
+            web/ ${EC2_USER}@${EC2_HOST}:/tmp/jiu-marketing-new/
           ssh -i ~/.ssh/ec2_deploy.pem ${EC2_USER}@${EC2_HOST} << 'ENDSSH'
             sudo systemctl stop jiu
             cp /tmp/jiu-server /opt/jiu/backend/jiu-server
@@ -87,6 +89,9 @@ ${RECENT_LOGS}"
             rm -rf /opt/jiu/web-old
             mv /opt/jiu/web /opt/jiu/web-old 2>/dev/null || true
             mv /tmp/jiu-web-new /opt/jiu/web
+            mkdir -p /opt/jiu/marketing
+            rsync -a --delete /tmp/jiu-marketing-new/ /opt/jiu/marketing/
+            rm -rf /tmp/jiu-marketing-new
             sudo nginx -s reload
           ENDSSH
 
diff --git a/backend/internal/handler/public.go b/backend/internal/handler/public.go
index 716c815..2c903cd 100644
--- a/backend/internal/handler/public.go
+++ b/backend/internal/handler/public.go
@@ -2,6 +2,8 @@ package handler
 
 import (
 	"net/http"
+	"os"
+	"time"
 
 	"github.com/gin-gonic/gin"
 	"gorm.io/gorm"
@@ -29,7 +31,37 @@ func (h *PublicHandler) GetProduct(c *gin.Context) {
 		return
 	}
 
-	// Return only public-safe fields (no price/stock info)
+	// Fetch shop public info
+	var shop model.Shop
+	shopData := gin.H{}
+	if err := h.db.Where("id = ?", product.ShopID).First(&shop).Error; err == nil {
+		shopData = gin.H{
+			"name":           shop.Name,
+			"code":           shop.Code,
+			"address":        shop.Address,
+			"phone":          shop.Phone,
+			"business_hours": shop.BusinessHours,
+		}
+	}
+
+	// Fetch latest inventory batch for this product
+	var inv model.Inventory
+	batchData := gin.H(nil)
+	if err := h.db.Where("product_id = ? AND quantity > 0 AND deleted_at IS NULL", product.ID).
+		Order("created_at DESC").
+		First(&inv).Error; err == nil {
+		var pdStr *string
+		if inv.ProductionDate != nil {
+			s := inv.ProductionDate.Time.Format("2006-01-02")
+			pdStr = &s
+		}
+		batchData = gin.H{
+			"production_date": pdStr,
+			"batch_no":        inv.BatchNo,
+			"in_stock_date":   inv.CreatedAt.Format("2006-01-02"),
+		}
+	}
+
 	c.JSON(http.StatusOK, gin.H{
 		"data": gin.H{
 			"id":          product.ID,
@@ -40,6 +72,31 @@ func (h *PublicHandler) GetProduct(c *gin.Context) {
 			"unit":        product.Unit,
 			"description": product.Description,
 			"images":      product.Images,
+			"shop":        shopData,
+			"batch":       batchData,
 		},
 	})
 }
+
+// GetRelease GET /api/v1/public/release (no auth)
+func (h *PublicHandler) GetRelease(c *gin.Context) {
+	version := os.Getenv("APP_VERSION")
+	if version == "" {
+		version = "1.0.0"
+	}
+	buildDate := os.Getenv("BUILD_DATE")
+	if buildDate == "" {
+		buildDate = time.Now().Format("2006-01-02")
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"version":    version,
+		"build_date": buildDate,
+		"download_urls": gin.H{
+			"macos":   os.Getenv("DOWNLOAD_URL_MACOS"),
+			"windows": os.Getenv("DOWNLOAD_URL_WINDOWS"),
+			"web":     "https://jiu.51yanmei.com/app",
+		},
+		"changelog": []gin.H{},
+	})
+}
diff --git a/backend/internal/model/shop.go b/backend/internal/model/shop.go
index 864471f..6151c89 100644
--- a/backend/internal/model/shop.go
+++ b/backend/internal/model/shop.go
@@ -6,6 +6,7 @@ type Shop struct {
 	Code            string `gorm:"size:50;uniqueIndex" json:"code"`
 	Address         string `gorm:"size:255" json:"address"`
 	Phone           string `gorm:"size:30" json:"phone"`
+	BusinessHours   string `gorm:"size:100" json:"business_hours"`
 	ManagerName     string `gorm:"size:50" json:"manager_name"`
 	BusinessLicense string `gorm:"size:500" json:"business_license"`
 	ShopPhotos      JSON   `gorm:"type:json" json:"shop_photos,omitempty"`
diff --git a/backend/internal/router/router.go b/backend/internal/router/router.go
index 3650a6a..6c4ed4b 100644
--- a/backend/internal/router/router.go
+++ b/backend/internal/router/router.go
@@ -51,10 +51,11 @@ func Setup(r *gin.Engine, db *gorm.DB) {
 		auth.POST("/refresh", authH.Refresh)
 	}
 
-	// 商品公开详情（无需登录）
+	// 公开接口（无需登录）
 	public := v1.Group("/public")
 	{
 		public.GET("/products/:public_id", publicH.GetProduct)
+		public.GET("/release", publicH.GetRelease)
 	}
 
 	// 需要 JWT 的路由（ReadOnly 中间件：只读用户不可执行写操作）
diff --git a/client/lib/core/router/app_router.dart b/client/lib/core/router/app_router.dart
index ffaacce..55ae949 100644
--- a/client/lib/core/router/app_router.dart
+++ b/client/lib/core/router/app_router.dart
@@ -37,16 +37,17 @@ class _RouterNotifier extends ChangeNotifier {
   String? redirect(BuildContext context, GoRouterState state) {
     final authState = _ref.read(authStateProvider);
     final isLoggedIn = authState.isLoggedIn;
-    final isLoginRoute = state.matchedLocation == '/login';
-    final isPublicRoute = state.matchedLocation.startsWith('/product/');
+    final loc = state.matchedLocation;
+    final isPublicRoute = loc == '/login' ||
+        loc.startsWith('/product/');
     final result = !authState.initialized
         ? null
-        : (!isLoggedIn && !isLoginRoute && !isPublicRoute)
+        : (!isLoggedIn && !isPublicRoute)
             ? '/login'
-            : (isLoggedIn && isLoginRoute)
+            : (isLoggedIn && loc == '/login')
                 ? '/stock-in'
                 : null;
-    debugPrint('[Router] redirect: location=${state.matchedLocation}'
+    debugPrint('[Router] redirect: location=$loc'
         ' initialized=${authState.initialized}'
         ' isLoggedIn=$isLoggedIn'
         ' → ${result ?? "null (no redirect)"}');
@@ -71,7 +72,7 @@ final appRouterProvider = Provider<GoRouter>((ref) {
     refreshListenable: notifier,
     redirect: notifier.redirect,
     routes: [
-      // Public route — no auth, no shell nav bar
+      // Public product scan — no auth, no shell nav bar
       GoRoute(
         path: '/product/:public_id',
         builder: (context, state) =>
diff --git a/client/lib/core/theme/app_theme.dart b/client/lib/core/theme/app_theme.dart
index 53fd34f..b1c77fd 100644
--- a/client/lib/core/theme/app_theme.dart
+++ b/client/lib/core/theme/app_theme.dart
@@ -1,17 +1,110 @@
 import 'package:flutter/material.dart';
 
 class AppTheme {
-  static const Color primary = Color(0xFF1565C0);
-  static const Color primaryDark = Color(0xFF0D47A1);
-  static const Color primaryLight = Color(0xFF1976D2);
-  static const Color accent = Color(0xFFFF6F00);
-  static const Color success = Color(0xFF2E7D32);
-  static const Color danger = Color(0xFFC62828);
-  static const Color background = Color(0xFFF5F5F5);
+  // ─────────────────────────────────────────────────────────────────────────
+  //  LEGACY API — field names preserved, values updated to 岩美 brand.
+  // ─────────────────────────────────────────────────────────────────────────
+
+  static const Color primary = Color(0xFF2563AC);
+  static const Color primaryDark = Color(0xFF154072);
+  static const Color primaryLight = Color(0xFF4F86C6);
+
+  /// Bordeaux accent — wine context cue. Was warm orange #FF6F00.
+  static const Color accent = Color(0xFF8B2331);
+
+  static const Color success = Color(0xFF2E8B57);
+  static const Color danger = Color(0xFFD14343);
+  static const Color background = Color(0xFFF5F7FA);
   static const Color surface = Color(0xFFFFFFFF);
-  static const Color border = Color(0xFFE0E0E0);
-  static const Color textPrimary = Color(0xFF212121);
-  static const Color textSecondary = Color(0xFF757575);
+  static const Color border = Color(0xFFDCE2EB);
+  static const Color textPrimary = Color(0xFF232934);
+  static const Color textSecondary = Color(0xFF6E7888);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  //  Full brand scale (50..900)
+  // ─────────────────────────────────────────────────────────────────────────
+  static const Color brand50 = Color(0xFFEEF4FB);
+  static const Color brand100 = Color(0xFFD6E5F5);
+  static const Color brand200 = Color(0xFFADC9EA);
+  static const Color brand300 = Color(0xFF7FA8DA);
+  static const Color brand400 = Color(0xFF4F86C6);
+  static const Color brand500 = Color(0xFF2563AC);
+  static const Color brand600 = Color(0xFF1B4F8E);
+  static const Color brand700 = Color(0xFF154072);
+  static const Color brand800 = Color(0xFF0F3057);
+  static const Color brand900 = Color(0xFF0A1F3B);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  //  Full neutral (gray) scale
+  // ─────────────────────────────────────────────────────────────────────────
+  static const Color gray0 = Color(0xFFFFFFFF);
+  static const Color gray25 = Color(0xFFFBFCFD);
+  static const Color gray50 = Color(0xFFF5F7FA);
+  static const Color gray100 = Color(0xFFECEFF4);
+  static const Color gray200 = Color(0xFFDCE2EB);
+  static const Color gray300 = Color(0xFFC2CAD6);
+  static const Color gray400 = Color(0xFF99A3B3);
+  static const Color gray500 = Color(0xFF6E7888);
+  static const Color gray600 = Color(0xFF4F5867);
+  static const Color gray700 = Color(0xFF353C48);
+  static const Color gray800 = Color(0xFF232934);
+  static const Color gray900 = Color(0xFF141821);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  //  Accent (bordeaux) scale
+  // ─────────────────────────────────────────────────────────────────────────
+  static const Color accent50 = Color(0xFFFAEEF0);
+  static const Color accent100 = Color(0xFFF1D2D7);
+  static const Color accent500 = Color(0xFF8B2331);
+  static const Color accent700 = Color(0xFF5F1621);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  //  Semantic scale
+  // ─────────────────────────────────────────────────────────────────────────
+  static const Color success50 = Color(0xFFE8F5EE);
+  static const Color success500 = Color(0xFF2E8B57);
+  static const Color success700 = Color(0xFF1F6B41);
+
+  static const Color warning50 = Color(0xFFFFF4DB);
+  static const Color warning500 = Color(0xFFE08E00);
+  static const Color warning700 = Color(0xFFA66700);
+
+  static const Color danger50 = Color(0xFFFDECEC);
+  static const Color danger500 = Color(0xFFD14343);
+  static const Color danger700 = Color(0xFF9E2A2A);
+
+  static const Color info50 = Color(0xFFE5F1FB);
+  static const Color info500 = Color(0xFF2F7BD0);
+  static const Color info700 = Color(0xFF1F5C9F);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  //  State colors
+  // ─────────────────────────────────────────────────────────────────────────
+  static const Color rowHover = Color(0xFFEEF4FB);
+  static const Color tableHeader = Color(0xFFF5F7FA);
+  static const Color borderSubtle = Color(0xFFECEFF4);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  //  Radii
+  // ─────────────────────────────────────────────────────────────────────────
+  static const double radiusSm = 4.0;
+  static const double radiusMd = 6.0;
+  static const double radiusLg = 10.0;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  //  Spacing (4px base)
+  // ─────────────────────────────────────────────────────────────────────────
+  static const double space1 = 4.0;
+  static const double space2 = 8.0;
+  static const double space3 = 12.0;
+  static const double space4 = 16.0;
+  static const double space5 = 20.0;
+  static const double space6 = 24.0;
+  static const double space8 = 32.0;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  //  ThemeData
+  // ─────────────────────────────────────────────────────────────────────────
 
   static ThemeData light() {
     return ThemeData(
@@ -21,78 +114,172 @@ class AppTheme {
         brightness: Brightness.light,
       ).copyWith(
         primary: primary,
-        surface: surface,
         onPrimary: Colors.white,
+        secondary: brand400,
+        surface: surface,
+        onSurface: textPrimary,
+        error: danger,
+        outline: border,
+        outlineVariant: borderSubtle,
       ),
       scaffoldBackgroundColor: background,
+
       appBarTheme: const AppBarTheme(
         backgroundColor: primary,
         foregroundColor: Colors.white,
         elevation: 0,
         centerTitle: false,
         toolbarHeight: 56,
-      ),
-      cardTheme: CardThemeData(
-        color: surface,
-        elevation: 1,
-        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(4),
-          side: const BorderSide(color: border, width: 0.5),
+        titleTextStyle: TextStyle(
+          fontSize: 16,
+          fontWeight: FontWeight.w600,
+          color: Colors.white,
+          letterSpacing: 0.4,
         ),
       ),
+
+      cardTheme: CardThemeData(
+        color: surface,
+        elevation: 0,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(radiusLg),
+          side: const BorderSide(color: border, width: 1),
+        ),
+        margin: const EdgeInsets.all(0),
+      ),
+
       elevatedButtonTheme: ElevatedButtonThemeData(
         style: ElevatedButton.styleFrom(
           backgroundColor: primary,
           foregroundColor: Colors.white,
-          minimumSize: const Size(0, 36),
-          padding: const EdgeInsets.symmetric(horizontal: 16),
-          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
+          minimumSize: const Size(0, 40),
+          padding: const EdgeInsets.symmetric(horizontal: 18),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(radiusMd),
+          ),
+          textStyle: const TextStyle(
+            fontSize: 14,
+            fontWeight: FontWeight.w500,
+            letterSpacing: 0.2,
+          ),
+          elevation: 0,
+        ).copyWith(
+          backgroundColor: WidgetStateProperty.resolveWith((states) {
+            if (states.contains(WidgetState.pressed)) return primaryDark;
+            if (states.contains(WidgetState.hovered)) return brand600;
+            return primary;
+          }),
+          overlayColor:
+              WidgetStateProperty.all(Colors.white.withValues(alpha: 0.08)),
         ),
       ),
+
       outlinedButtonTheme: OutlinedButtonThemeData(
         style: OutlinedButton.styleFrom(
-          foregroundColor: primary,
-          minimumSize: const Size(0, 36),
-          padding: const EdgeInsets.symmetric(horizontal: 16),
-          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
-          side: const BorderSide(color: primary),
+          foregroundColor: brand700,
+          minimumSize: const Size(0, 40),
+          padding: const EdgeInsets.symmetric(horizontal: 18),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(radiusMd),
+          ),
+          side: const BorderSide(color: border, width: 1),
+          textStyle: const TextStyle(
+            fontSize: 14,
+            fontWeight: FontWeight.w500,
+          ),
+        ).copyWith(
+          backgroundColor: WidgetStateProperty.resolveWith((states) {
+            if (states.contains(WidgetState.pressed)) return gray100;
+            if (states.contains(WidgetState.hovered)) return gray50;
+            return surface;
+          }),
         ),
       ),
+
       textButtonTheme: TextButtonThemeData(
         style: TextButton.styleFrom(
           foregroundColor: primary,
           minimumSize: const Size(0, 36),
           padding: const EdgeInsets.symmetric(horizontal: 12),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(radiusSm),
+          ),
         ),
       ),
+
       inputDecorationTheme: InputDecorationTheme(
         border: OutlineInputBorder(
-          borderRadius: BorderRadius.circular(4),
+          borderRadius: BorderRadius.circular(radiusMd),
           borderSide: const BorderSide(color: border),
         ),
         enabledBorder: OutlineInputBorder(
-          borderRadius: BorderRadius.circular(4),
+          borderRadius: BorderRadius.circular(radiusMd),
           borderSide: const BorderSide(color: border),
         ),
         focusedBorder: OutlineInputBorder(
-          borderRadius: BorderRadius.circular(4),
+          borderRadius: BorderRadius.circular(radiusMd),
           borderSide: const BorderSide(color: primary, width: 1.5),
         ),
-        contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+        errorBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(radiusMd),
+          borderSide: const BorderSide(color: danger),
+        ),
+        hoverColor: gray50,
+        contentPadding:
+            const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
         isDense: true,
         filled: true,
         fillColor: surface,
+        labelStyle: const TextStyle(fontSize: 13, color: textSecondary),
+        hintStyle: TextStyle(fontSize: 13, color: gray400),
       ),
-      dividerTheme: const DividerThemeData(color: border, thickness: 0.5),
+
+      dividerTheme: const DividerThemeData(
+        color: borderSubtle,
+        thickness: 1,
+        space: 1,
+      ),
+
+      chipTheme: ChipThemeData(
+        backgroundColor: gray100,
+        labelStyle: const TextStyle(fontSize: 12, color: textPrimary),
+        side: BorderSide.none,
+        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 0),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(999),
+        ),
+      ),
+
+      tooltipTheme: TooltipThemeData(
+        decoration: BoxDecoration(
+          color: gray900,
+          borderRadius: BorderRadius.circular(radiusSm),
+        ),
+        textStyle: const TextStyle(color: Colors.white, fontSize: 12),
+        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
+      ),
+
       textTheme: const TextTheme(
-        bodyLarge: TextStyle(fontSize: 14, color: textPrimary),
-        bodyMedium: TextStyle(fontSize: 14, color: textPrimary),
-        bodySmall: TextStyle(fontSize: 12, color: textSecondary),
-        titleMedium: TextStyle(
-            fontSize: 16,
-            fontWeight: FontWeight.w600,
-            color: textPrimary),
-        labelMedium: TextStyle(fontSize: 12, color: textSecondary),
+        displayLarge: TextStyle(fontSize: 36, fontWeight: FontWeight.w600, color: brand900, height: 1.2, letterSpacing: 0.4),
+        displayMedium: TextStyle(fontSize: 28, fontWeight: FontWeight.w600, color: brand900, height: 1.2, letterSpacing: 0.4),
+        headlineSmall: TextStyle(fontSize: 22, fontWeight: FontWeight.w600, color: gray900, height: 1.3),
+        titleLarge: TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: gray900, height: 1.35),
+        titleMedium: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: textPrimary, height: 1.4),
+        titleSmall: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: textPrimary, height: 1.4),
+        bodyLarge: TextStyle(fontSize: 14, color: textPrimary, height: 1.55),
+        bodyMedium: TextStyle(fontSize: 14, color: textPrimary, height: 1.55),
+        bodySmall: TextStyle(fontSize: 12, color: textSecondary, height: 1.5),
+        labelLarge: TextStyle(fontSize: 13, color: textPrimary, fontWeight: FontWeight.w500),
+        labelMedium: TextStyle(fontSize: 12, color: textSecondary, letterSpacing: 0.4),
+        labelSmall: TextStyle(fontSize: 11, color: textSecondary, letterSpacing: 0.4),
+      ),
+
+      pageTransitionsTheme: const PageTransitionsTheme(
+        builders: {
+          TargetPlatform.windows: FadeUpwardsPageTransitionsBuilder(),
+          TargetPlatform.macOS: FadeUpwardsPageTransitionsBuilder(),
+          TargetPlatform.linux: FadeUpwardsPageTransitionsBuilder(),
+        },
       ),
     );
   }
diff --git a/client/lib/main.dart b/client/lib/main.dart
index 2d0fec2..dd0dac1 100644
--- a/client/lib/main.dart
+++ b/client/lib/main.dart
@@ -51,7 +51,7 @@ class _JiuAppState extends ConsumerState<JiuApp> {
   Widget build(BuildContext context) {
     final router = ref.watch(appRouterProvider);
     return MaterialApp.router(
-      title: '酒库管理系统',
+      title: '岩美',
       theme: AppTheme.light(),
       routerConfig: router,
       debugShowCheckedModeBanner: false,
diff --git a/client/lib/screens/public/public_product_screen.dart b/client/lib/screens/public/public_product_screen.dart
index 747ad34..780ed72 100644
--- a/client/lib/screens/public/public_product_screen.dart
+++ b/client/lib/screens/public/public_product_screen.dart
@@ -1,7 +1,25 @@
+import 'dart:math' as math;
 import 'package:dio/dio.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
+import 'package:url_launcher/url_launcher.dart';
 import '../../core/config/app_config.dart';
-import '../../core/theme/app_theme.dart';
+
+// ── Palette & typography constants ────────────────────────────────────
+const _kPaper = Color(0xFFFAF8F5);
+const _kPaperDeep = Color(0xFFF4F1EB);
+const _kInkDeep = Color(0xFF161412);
+const _kInkSoft = Color(0xFF2A2725);
+const _kBurgundy = Color(0xFF8B2331);
+const _kBurgundyLight = Color(0xFFF7ECED);
+const _kTextMid = Color(0xFF6E7888);
+const _kBorder = Color(0xFFE8E4DC);
+const _kBorderSub = Color(0xFFF0EDE7);
+const _kSuccess = Color(0xFF2E8B57);
+const _kSuccessLight = Color(0xFFE8F5EE);
+const _kGalleryDark = Color(0xFF100C0A);
+
+// ─────────────────────────────────────────────────────────────────────
 
 class PublicProductScreen extends StatefulWidget {
   final String publicId;
@@ -34,11 +52,7 @@ class _PublicProductScreenState extends State<PublicProductScreen> {
         '${AppConfig.apiBaseUrl}/public/products/${widget.publicId}',
       );
       final data = (resp.data as Map<String, dynamic>)['data'] as Map<String, dynamic>;
-      debugPrint('[public] description=${data['description']}');
-      setState(() {
-        _data = data;
-        _loading = false;
-      });
+      setState(() { _data = data; _loading = false; });
     } catch (e) {
       setState(() { _error = e.toString(); _loading = false; });
     }
@@ -48,24 +62,45 @@ class _PublicProductScreenState extends State<PublicProductScreen> {
   Widget build(BuildContext context) {
     if (_loading) {
       return const Scaffold(
-        backgroundColor: Color(0xFFF5F5F5),
-        body: Center(child: CircularProgressIndicator()),
+        backgroundColor: _kPaper,
+        body: Center(child: CircularProgressIndicator(color: _kBurgundy, strokeWidth: 2)),
       );
     }
     if (_error != null || _data == null) {
       return Scaffold(
-        backgroundColor: const Color(0xFFF5F5F5),
+        backgroundColor: _kPaper,
         body: Center(
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              const Icon(Icons.error_outline, size: 48, color: AppTheme.danger),
-              const SizedBox(height: 16),
-              const Text('商品不存在或已下架',
-                  style: TextStyle(fontSize: 16, color: Color(0xFF333333))),
-              const SizedBox(height: 16),
-              ElevatedButton(onPressed: _load, child: const Text('重试')),
-            ],
+          child: Padding(
+            padding: const EdgeInsets.all(32),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Container(
+                  width: 56, height: 56,
+                  decoration: BoxDecoration(
+                    color: const Color(0xFFFDECEC),
+                    shape: BoxShape.circle,
+                  ),
+                  child: const Icon(Icons.error_outline, size: 28, color: Color(0xFFD14343)),
+                ),
+                const SizedBox(height: 16),
+                const Text('商品不存在或已下架',
+                    style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: _kInkDeep)),
+                const SizedBox(height: 8),
+                const Text('请检查二维码是否完整，或联系出售方确认',
+                    style: TextStyle(fontSize: 13, color: _kTextMid), textAlign: TextAlign.center),
+                const SizedBox(height: 24),
+                ElevatedButton(
+                  onPressed: _load,
+                  style: ElevatedButton.styleFrom(
+                    backgroundColor: _kBurgundy,
+                    foregroundColor: Colors.white,
+                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+                  ),
+                  child: const Text('重试'),
+                ),
+              ],
+            ),
           ),
         ),
       );
@@ -80,47 +115,125 @@ class _PublicProductScreenState extends State<PublicProductScreen> {
     final brand = d['brand'] as String? ?? '';
     final unit = d['unit'] as String? ?? '';
     final description = d['description'] as String? ?? '';
+    final shop = d['shop'] as Map<String, dynamic>?;
+    final batch = d['batch'] as Map<String, dynamic>?;
+    final quickSpecs = _parseQuickSpecs(spec, batch?['production_date'] as String?);
+    final productionDate = batch?['production_date'] as String?;
 
     return Scaffold(
-      backgroundColor: const Color(0xFFF5F5F5),
+      backgroundColor: _kPaperDeep,
       body: SafeArea(
-        child: CustomScrollView(
-          slivers: [
-            SliverToBoxAdapter(
-              child: _ImageGallery(imageUrls: imageUrls),
+        child: Center(
+          child: ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 520),
+            child: CustomScrollView(
+              slivers: [
+                // 1. Gallery
+                SliverToBoxAdapter(
+                  child: _HeroGallery(imageUrls: imageUrls),
+                ),
+                // 2. Verified ribbon
+                SliverToBoxAdapter(
+                  child: _VerifiedRibbon(shop: shop),
+                ),
+                // 3. Editorial title block
+                SliverToBoxAdapter(
+                  child: _TitleBlock(
+                    name: name,
+                    brand: brand,
+                    series: series,
+                    spec: spec,
+                    unit: unit,
+                  ),
+                ),
+                // 4. Quick specs (only if we could parse any)
+                if (quickSpecs.isNotEmpty)
+                  SliverToBoxAdapter(
+                    child: _QuickSpecs(items: quickSpecs),
+                  ),
+                // 5. Description — always shown; falls back to editorial mock text
+                SliverToBoxAdapter(
+                  child: _DescriptionSection(description: description),
+                ),
+                // 6. Params — full table
+                SliverToBoxAdapter(
+                  child: _ParamsCard(
+                    publicId: widget.publicId,
+                    spec: spec,
+                    brand: brand,
+                    series: series,
+                    unit: unit,
+                    productionDate: productionDate,
+                  ),
+                ),
+                // 7. Authenticity card (batch + stamp)
+                if (batch != null)
+                  SliverToBoxAdapter(
+                    child: _AuthenticityCard(batch: batch),
+                  ),
+                // 8. Shop card
+                if (shop != null)
+                  SliverToBoxAdapter(child: _ShopCard(shop: shop)),
+                // 9. Footer
+                const SliverToBoxAdapter(child: _Footer()),
+                const SliverToBoxAdapter(child: SizedBox(height: 24)),
+              ],
             ),
-            const SliverToBoxAdapter(child: SizedBox(height: 8)),
-            SliverToBoxAdapter(
-              child: _TitleCard(name: name, series: series, spec: spec, brand: brand),
-            ),
-            const SliverToBoxAdapter(child: SizedBox(height: 8)),
-            SliverToBoxAdapter(
-              child: _ParamsCard(spec: spec, brand: brand, unit: unit, description: description),
-            ),
-            const SliverFillRemaining(
-              hasScrollBody: false,
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.end,
-                children: [_FooterBrand()],
-              ),
-            ),
-          ],
+          ),
         ),
       ),
     );
   }
+
+  // Attempt to extract quick spec items from free-text spec string
+  static List<({String value, String unit, String label})> _parseQuickSpecs(
+      String spec, String? productionDate) {
+    final items = <({String value, String unit, String label})>[];
+
+    // Alcohol degree: 53度 / 53° / 53%vol
+    final degReg = RegExp(r'(\d+(?:\.\d+)?)\s*(?:度|°|%vol)', caseSensitive: false);
+    final degM = degReg.firstMatch(spec);
+    if (degM != null) {
+      items.add((value: degM.group(1)!, unit: '°', label: '酒精度'));
+    }
+
+    // Volume in ml
+    final mlReg = RegExp(r'(\d+(?:\.\d+)?)\s*ml', caseSensitive: false);
+    final mlM = mlReg.firstMatch(spec);
+    if (mlM != null) {
+      items.add((value: mlM.group(1)!, unit: 'ml', label: '净含量'));
+    }
+
+    // Fragrance type: 清香/浓香/酱香/兼香/馥郁香/凤香
+    final xiangReg = RegExp(r'([清浓酱兼馥凤]香)');
+    final xiangM = xiangReg.firstMatch(spec);
+    if (xiangM != null) {
+      items.add((value: xiangM.group(1)!, unit: '', label: '香型'));
+    }
+
+    // Year from production date
+    if (productionDate != null) {
+      final yearM = RegExp(r'^(\d{4})').firstMatch(productionDate);
+      if (yearM != null) {
+        items.add((value: yearM.group(1)!, unit: '', label: '年份'));
+      }
+    }
+
+    return items;
+  }
 }
 
-// ── 图片画廊 ─────────────────────────────────────────────
-class _ImageGallery extends StatefulWidget {
+// ── Hero Gallery ──────────────────────────────────────────────────────
+
+class _HeroGallery extends StatefulWidget {
   final List<String> imageUrls;
-  const _ImageGallery({required this.imageUrls});
+  const _HeroGallery({required this.imageUrls});
 
   @override
-  State<_ImageGallery> createState() => _ImageGalleryState();
+  State<_HeroGallery> createState() => _HeroGalleryState();
 }
 
-class _ImageGalleryState extends State<_ImageGallery> {
+class _HeroGalleryState extends State<_HeroGallery> {
   int _current = 0;
   final PageController _ctrl = PageController();
 
@@ -130,153 +243,218 @@ class _ImageGalleryState extends State<_ImageGallery> {
     super.dispose();
   }
 
+  @override
+  Widget build(BuildContext context) {
+    final urls = widget.imageUrls;
+    final height = math.min(MediaQuery.of(context).size.width * 0.95, 440.0);
+
+    return SizedBox(
+      height: height,
+      child: Stack(
+        fit: StackFit.expand,
+        children: [
+          // Dark background gradient
+          Container(
+            decoration: const BoxDecoration(
+              gradient: RadialGradient(
+                center: Alignment(0, -0.2),
+                radius: 1.4,
+                colors: [Color(0xFF2A1F1A), _kGalleryDark],
+              ),
+            ),
+          ),
+          // Golden halo glow (behind product)
+          Center(
+            child: Container(
+              width: 240, height: 240,
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                gradient: RadialGradient(
+                  colors: [
+                    const Color(0xFFC8A572).withValues(alpha: 0.12),
+                    Colors.transparent,
+                  ],
+                ),
+              ),
+            ),
+          ),
+          // Image or placeholder
+          if (urls.isEmpty)
+            _EmptyGalleryContent()
+          else
+            PageView.builder(
+              controller: _ctrl,
+              itemCount: urls.length,
+              onPageChanged: (i) => setState(() => _current = i),
+              itemBuilder: (_, i) => GestureDetector(
+                onTap: () => _openFullscreen(i),
+                child: Image.network(
+                  urls[i],
+                  fit: BoxFit.contain,
+                  errorBuilder: (_, __, ___) => _EmptyGalleryContent(),
+                ),
+              ),
+            ),
+          // Top gradient scrim
+          Positioned(
+            top: 0, left: 0, right: 0, height: 64,
+            child: DecoratedBox(
+              decoration: BoxDecoration(
+                gradient: LinearGradient(
+                  begin: Alignment.topCenter, end: Alignment.bottomCenter,
+                  colors: [Colors.black.withValues(alpha: 0.45), Colors.transparent],
+                ),
+              ),
+            ),
+          ),
+          // "点击放大" hint (top right)
+          if (urls.isNotEmpty)
+            Positioned(
+              top: 52, right: 14,
+              child: _GlassChip(
+                child: const Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Icon(Icons.zoom_in, size: 12, color: Colors.white),
+                    SizedBox(width: 4),
+                    Text('点击放大', style: TextStyle(fontSize: 11, color: Colors.white)),
+                  ],
+                ),
+              ),
+            ),
+          // Bottom: dots + page counter
+          Positioned(
+            bottom: 16, left: 0, right: 0,
+            child: Row(
+              children: [
+                const SizedBox(width: 16),
+                // Dots
+                ...List.generate(math.max(urls.length, 1), (i) => AnimatedContainer(
+                  duration: const Duration(milliseconds: 200),
+                  width: i == _current ? 18 : 6,
+                  height: 6,
+                  margin: const EdgeInsets.only(right: 5),
+                  decoration: BoxDecoration(
+                    color: i == _current
+                        ? Colors.white.withValues(alpha: 0.95)
+                        : Colors.white.withValues(alpha: 0.30),
+                    borderRadius: BorderRadius.circular(999),
+                  ),
+                )),
+                const Spacer(),
+                if (urls.length > 1)
+                  Text(
+                    '${_current + 1} / ${urls.length}',
+                    style: const TextStyle(
+                      fontSize: 11, color: Color(0x88FFFFFF),
+                      fontFeatures: [FontFeature.tabularFigures()],
+                      letterSpacing: 0.5,
+                    ),
+                  ),
+                const SizedBox(width: 16),
+              ],
+            ),
+          ),
+          // Thumbnail strip
+          if (urls.length > 1)
+            Positioned(
+              bottom: 44, left: 0, right: 0,
+              child: Container(
+                height: 52,
+                padding: const EdgeInsets.symmetric(horizontal: 14),
+                child: ListView.separated(
+                  scrollDirection: Axis.horizontal,
+                  shrinkWrap: true,
+                  itemCount: urls.length,
+                  separatorBuilder: (_, __) => const SizedBox(width: 6),
+                  itemBuilder: (_, i) => GestureDetector(
+                    onTap: () => _ctrl.animateToPage(i,
+                        duration: const Duration(milliseconds: 250),
+                        curve: Curves.easeInOut),
+                    child: AnimatedContainer(
+                      duration: const Duration(milliseconds: 180),
+                      width: 44, height: 44,
+                      decoration: BoxDecoration(
+                        borderRadius: BorderRadius.circular(4),
+                        border: Border.all(
+                          color: i == _current
+                              ? Colors.white
+                              : Colors.white.withValues(alpha: 0.25),
+                          width: i == _current ? 2 : 1,
+                        ),
+                      ),
+                      child: ClipRRect(
+                        borderRadius: BorderRadius.circular(3),
+                        child: Image.network(urls[i], fit: BoxFit.cover,
+                            errorBuilder: (_, __, ___) => const SizedBox()),
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+
   void _openFullscreen(int index) {
     Navigator.of(context).push(PageRouteBuilder(
       opaque: false,
       barrierColor: Colors.black87,
       pageBuilder: (_, __, ___) => _FullscreenViewer(
-        urls: widget.imageUrls,
-        initialIndex: index,
-      ),
+        urls: widget.imageUrls, initialIndex: index),
     ));
   }
-
-  @override
-  Widget build(BuildContext context) {
-    final urls = widget.imageUrls;
-
-    return LayoutBuilder(builder: (context, constraints) {
-      final size = constraints.maxWidth;
-
-      if (urls.isEmpty) {
-        return Container(
-          width: size,
-          height: size,
-          color: const Color(0xFFEEEEEE),
-          child: const Center(
-            child: Icon(Icons.wine_bar, size: 96, color: Color(0xFFCCCCCC)),
-          ),
-        );
-      }
-
-      return Column(
-        children: [
-          // 主图区（正方形）
-          SizedBox(
-            width: size,
-            height: size,
-            child: Stack(
-              children: [
-              PageView.builder(
-                controller: _ctrl,
-                itemCount: urls.length,
-                onPageChanged: (i) => setState(() => _current = i),
-                itemBuilder: (_, i) => GestureDetector(
-                  onTap: () => _openFullscreen(i),
-                  child: Image.network(
-                    urls[i],
-                    fit: BoxFit.cover,
-                    width: double.infinity,
-                    errorBuilder: (_, __, ___) => Container(
-                      color: const Color(0xFFEEEEEE),
-                      child: const Center(
-                        child: Icon(Icons.broken_image, size: 64, color: Color(0xFFCCCCCC)),
-                      ),
-                    ),
-                  ),
-                ),
-              ),
-              if (urls.length > 1)
-                Positioned(
-                  right: 12,
-                  bottom: 12,
-                  child: Container(
-                    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
-                    decoration: BoxDecoration(
-                      color: Colors.black54,
-                      borderRadius: BorderRadius.circular(12),
-                    ),
-                    child: Text(
-                      '${_current + 1} / ${urls.length}',
-                      style: const TextStyle(fontSize: 12, color: Colors.white),
-                    ),
-                  ),
-                ),
-              Positioned(
-                right: 12,
-                top: 12,
-                child: Container(
-                  padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 3),
-                  decoration: BoxDecoration(
-                    color: Colors.black38,
-                    borderRadius: BorderRadius.circular(4),
-                  ),
-                  child: const Row(
-                    mainAxisSize: MainAxisSize.min,
-                    children: [
-                      Icon(Icons.zoom_in, size: 14, color: Colors.white),
-                      SizedBox(width: 3),
-                      Text('点击放大', style: TextStyle(fontSize: 11, color: Colors.white)),
-                    ],
-                  ),
-                ),
-              ),
-              ],
-            ),
-          ),
-          // 缩略图条
-        if (urls.length > 1)
-          Container(
-            color: Colors.white,
-            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
-            child: SizedBox(
-              height: 60,
-              child: ListView.separated(
-                scrollDirection: Axis.horizontal,
-                itemCount: urls.length,
-                separatorBuilder: (_, __) => const SizedBox(width: 8),
-                itemBuilder: (_, i) {
-                  final selected = i == _current;
-                  return GestureDetector(
-                    onTap: () => _ctrl.animateToPage(i,
-                        duration: const Duration(milliseconds: 250),
-                        curve: Curves.easeInOut),
-                    child: AnimatedContainer(
-                      duration: const Duration(milliseconds: 200),
-                      width: 60,
-                      height: 60,
-                      decoration: BoxDecoration(
-                        border: Border.all(
-                          color: selected ? AppTheme.primary : const Color(0xFFDDDDDD),
-                          width: selected ? 2 : 1,
-                        ),
-                        borderRadius: BorderRadius.circular(4),
-                      ),
-                      child: ClipRRect(
-                        borderRadius: BorderRadius.circular(3),
-                        child: Image.network(
-                          urls[i],
-                          fit: BoxFit.cover,
-                          errorBuilder: (_, __, ___) => const Icon(
-                            Icons.broken_image,
-                            size: 24,
-                            color: Color(0xFFCCCCCC),
-                          ),
-                        ),
-                      ),
-                    ),
-                  );
-                },
-              ),
-            ),
-          ),
-        ],
-      );
-    });
-  }
 }
 
-// ── 全屏查看器 ────────────────────────────────────────────
+class _EmptyGalleryContent extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Container(
+            width: 64, height: 64,
+            decoration: BoxDecoration(
+              color: const Color(0xFF0F3057),
+              borderRadius: BorderRadius.circular(12),
+            ),
+            child: const Center(
+              child: Text('岩美',
+                  style: TextStyle(color: Colors.white70, fontSize: 18, fontWeight: FontWeight.w700)),
+            ),
+          ),
+          const SizedBox(height: 12),
+          const Text('暂无图片',
+              style: TextStyle(fontSize: 12, color: Color(0x669E9580))),
+        ],
+      ),
+    );
+  }
+}
+
+class _GlassChip extends StatelessWidget {
+  final Widget child;
+  const _GlassChip({required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
+      decoration: BoxDecoration(
+        color: Colors.white.withValues(alpha: 0.10),
+        border: Border.all(color: Colors.white.withValues(alpha: 0.18)),
+        borderRadius: BorderRadius.circular(999),
+      ),
+      child: child,
+    );
+  }
+}
+
+// ── Full-screen image viewer ──────────────────────────────────────────
+
 class _FullscreenViewer extends StatefulWidget {
   final List<String> urls;
   final int initialIndex;
@@ -287,21 +465,16 @@ class _FullscreenViewer extends StatefulWidget {
 }
 
 class _FullscreenViewerState extends State<_FullscreenViewer> {
-  late int _current;
   late PageController _ctrl;
 
   @override
   void initState() {
     super.initState();
-    _current = widget.initialIndex;
     _ctrl = PageController(initialPage: widget.initialIndex);
   }
 
   @override
-  void dispose() {
-    _ctrl.dispose();
-    super.dispose();
-  }
+  void dispose() { _ctrl.dispose(); super.dispose(); }
 
   @override
   Widget build(BuildContext context) {
@@ -314,55 +487,25 @@ class _FullscreenViewerState extends State<_FullscreenViewer> {
             PageView.builder(
               controller: _ctrl,
               itemCount: widget.urls.length,
-              onPageChanged: (i) => setState(() => _current = i),
               itemBuilder: (_, i) => Center(
                 child: InteractiveViewer(
-                  child: Image.network(
-                    widget.urls[i],
-                    fit: BoxFit.contain,
-                    errorBuilder: (_, __, ___) => const Icon(
-                      Icons.broken_image,
-                      size: 64,
-                      color: Colors.white54,
-                    ),
-                  ),
-                ),
-              ),
+                  child: Image.network(widget.urls[i], fit: BoxFit.contain,
+                      errorBuilder: (_, __, ___) =>
+                          const Icon(Icons.broken_image, size: 64, color: Colors.white54)),
+                )),
             ),
             Positioned(
-              top: 40,
-              right: 16,
+              top: 40, right: 16,
               child: GestureDetector(
                 onTap: () => Navigator.of(context).pop(),
                 child: Container(
                   padding: const EdgeInsets.all(8),
                   decoration: BoxDecoration(
-                    color: Colors.black54,
-                    borderRadius: BorderRadius.circular(20),
-                  ),
+                    color: Colors.black54, borderRadius: BorderRadius.circular(20)),
                   child: const Icon(Icons.close, color: Colors.white, size: 20),
                 ),
               ),
             ),
-            if (widget.urls.length > 1)
-              Positioned(
-                bottom: 40,
-                left: 0,
-                right: 0,
-                child: Row(
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: List.generate(widget.urls.length, (i) => AnimatedContainer(
-                    duration: const Duration(milliseconds: 200),
-                    margin: const EdgeInsets.symmetric(horizontal: 3),
-                    width: i == _current ? 16 : 6,
-                    height: 6,
-                    decoration: BoxDecoration(
-                      color: i == _current ? Colors.white : Colors.white38,
-                      borderRadius: BorderRadius.circular(3),
-                    ),
-                  )),
-                ),
-              ),
           ],
         ),
       ),
@@ -370,113 +513,882 @@ class _FullscreenViewerState extends State<_FullscreenViewer> {
   }
 }
 
-// ── 标题卡 ────────────────────────────────────────────────
-class _TitleCard extends StatelessWidget {
-  final String name, series, spec, brand;
-  const _TitleCard({required this.name, required this.series, required this.spec, required this.brand});
+// ── Verified Ribbon ───────────────────────────────────────────────────
+
+class _VerifiedRibbon extends StatelessWidget {
+  final Map<String, dynamic>? shop;
+  const _VerifiedRibbon({this.shop});
 
   @override
   Widget build(BuildContext context) {
-    final subtitle = [if (series.isNotEmpty) series, if (spec.isNotEmpty) spec].join(' · ');
+    final shopName = shop?['name'] as String? ?? '';
+    final shopCode = shop?['code'] as String? ?? '';
+    final detail = [
+      if (shopName.isNotEmpty) shopName,
+      if (shopCode.isNotEmpty) shopCode,
+    ].join(' · ');
+
     return Container(
-      color: Colors.white,
-      padding: const EdgeInsets.fromLTRB(16, 16, 16, 14),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
+      padding: const EdgeInsets.fromLTRB(16, 14, 16, 14),
+      decoration: const BoxDecoration(
+        color: Colors.white,
+        border: Border(bottom: BorderSide(color: _kBorderSub)),
+      ),
+      child: Row(
         children: [
-          Text(name,
-              style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Color(0xFF212121), height: 1.4)),
-          if (subtitle.isNotEmpty) ...[
-            const SizedBox(height: 6),
-            Text(subtitle, style: const TextStyle(fontSize: 13, color: Color(0xFF888888))),
-          ],
-          if (brand.isNotEmpty) ...[
-            const SizedBox(height: 10),
-            Container(
-              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
-              decoration: BoxDecoration(
-                color: const Color(0xFFE8F0FE),
-                borderRadius: BorderRadius.circular(4),
-              ),
-              child: Text('品牌：$brand',
-                  style: const TextStyle(fontSize: 12, color: AppTheme.primary, fontWeight: FontWeight.w500)),
+          Container(
+            width: 28, height: 28,
+            decoration: BoxDecoration(
+              color: _kSuccessLight,
+              shape: BoxShape.circle,
+              border: Border.all(color: const Color(0xFFB4E2C5)),
             ),
-          ],
+            child: const Icon(Icons.check, size: 15, color: _kSuccess),
+          ),
+          const SizedBox(width: 12),
+          Expanded(
+            child: detail.isNotEmpty
+                ? Text.rich(TextSpan(
+                    text: '来自 ',
+                    style: const TextStyle(fontSize: 13, color: _kTextMid),
+                    children: [
+                      TextSpan(
+                        text: detail,
+                        style: const TextStyle(
+                            fontWeight: FontWeight.w600, color: Color(0xFF353C48)),
+                      ),
+                    ],
+                  ))
+                : Text.rich(
+                    TextSpan(
+                      text: 'powered by ',
+                      style: const TextStyle(fontSize: 13, color: _kTextMid),
+                      children: [
+                        TextSpan(
+                          text: '岩美科技',
+                          style: const TextStyle(
+                            fontWeight: FontWeight.w600,
+                            color: Color(0xFF2563AC),
+                            decoration: TextDecoration.underline,
+                            decorationColor: Color(0xFF2563AC),
+                          ),
+                          recognizer: TapGestureRecognizer()
+                            ..onTap = () => launchUrl(
+                                Uri.parse('https://www.yanmei.com'),
+                                mode: LaunchMode.externalApplication),
+                        ),
+                      ],
+                    ),
+                  ),
+          ),
+          const Icon(Icons.chevron_right, size: 18, color: _kTextMid),
         ],
       ),
     );
   }
 }
 
-// ── 商品参数卡 ────────────────────────────────────────────
-class _ParamsCard extends StatelessWidget {
-  final String spec, brand, unit, description;
-  const _ParamsCard({required this.spec, required this.brand, required this.unit, required this.description});
+// ── Title Block ───────────────────────────────────────────────────────
+
+class _TitleBlock extends StatelessWidget {
+  final String name, brand, series, spec, unit;
+  const _TitleBlock({
+    required this.name, required this.brand, required this.series,
+    required this.spec, required this.unit,
+  });
 
   @override
   Widget build(BuildContext context) {
-    final rows = <({String label, String value})>[];
-    if (spec.isNotEmpty) rows.add((label: '规格', value: spec));
-    if (brand.isNotEmpty) rows.add((label: '品牌', value: brand));
-    if (unit.isNotEmpty) rows.add((label: '单位', value: unit));
-    if (description.isNotEmpty) rows.add((label: '描述', value: description));
+    // Brand/series separator row text
+    final separatorParts = <String>[];
+    if (brand.isNotEmpty) separatorParts.add(brand);
+    if (series.isNotEmpty) separatorParts.add(series);
+    final separatorText = separatorParts.join(' · ');
+
+    // Spec detail line: prefer parsed display, fall back to raw spec
+    final specLine = _buildSpecLine(spec, unit, series);
+
+    return Container(
+      padding: const EdgeInsets.fromLTRB(20, 32, 20, 24),
+      decoration: const BoxDecoration(
+        color: _kPaper,
+        border: Border(bottom: BorderSide(color: _kBorder)),
+      ),
+      child: Column(
+        children: [
+          // — Brand · Series —
+          if (separatorText.isNotEmpty)
+            Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Container(width: 16, height: 1, color: _kBurgundy.withValues(alpha: 0.7)),
+                const SizedBox(width: 10),
+                Text(
+                  separatorText,
+                  style: const TextStyle(
+                    fontSize: 11, letterSpacing: 0.28,
+                    color: _kBurgundy, fontWeight: FontWeight.w600,
+                  ),
+                ),
+                const SizedBox(width: 10),
+                Container(width: 16, height: 1, color: _kBurgundy.withValues(alpha: 0.7)),
+              ],
+            ),
+          if (separatorText.isNotEmpty) const SizedBox(height: 14),
+          // Product name — large editorial
+          Text(
+            name,
+            textAlign: TextAlign.center,
+            style: const TextStyle(
+              fontSize: 38, fontWeight: FontWeight.w700,
+              letterSpacing: 0.08, color: _kInkDeep,
+              height: 1.15,
+            ),
+          ),
+          // Key spec subtitle (e.g. "53° · 酱香型白酒")
+          if (_keySpec(spec).isNotEmpty) ...[
+            const SizedBox(height: 8),
+            Text(
+              _keySpec(spec),
+              textAlign: TextAlign.center,
+              style: const TextStyle(
+                fontSize: 17, fontWeight: FontWeight.w500,
+                color: _kBurgundy, letterSpacing: 0.04,
+              ),
+            ),
+          ],
+          // Detail spec line
+          if (specLine.isNotEmpty) ...[
+            const SizedBox(height: 16),
+            Text(
+              specLine,
+              textAlign: TextAlign.center,
+              style: const TextStyle(
+                fontSize: 13, color: _kTextMid, letterSpacing: 0.03,
+              ),
+            ),
+          ],
+          // Tags
+          const SizedBox(height: 16),
+          Wrap(
+            alignment: WrapAlignment.center,
+            spacing: 8, runSpacing: 6,
+            children: [
+              if (series.isNotEmpty)
+                _TitleTag(label: series, style: _TitleTagStyle.burgundy),
+              _TitleTag(label: '正品保证', style: _TitleTagStyle.green),
+              if (unit.isNotEmpty && unit != series)
+                _TitleTag(label: unit, style: _TitleTagStyle.neutral),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+
+  // Extract "53° · 酱香型白酒" from spec
+  String _keySpec(String spec) {
+    final parts = <String>[];
+    final degM = RegExp(r'(\d+(?:\.\d+)?)\s*(?:度|°|%vol)', caseSensitive: false).firstMatch(spec);
+    if (degM != null) parts.add('${degM.group(1)!}°');
+    final xiangM = RegExp(r'([清浓酱兼馥凤]香(?:型(?:白酒)?)?)').firstMatch(spec);
+    if (xiangM != null) parts.add(xiangM.group(1)!);
+    return parts.join(' · ');
+  }
+
+  String _buildSpecLine(String spec, String unit, String series) {
+    // Remove parts already captured in _keySpec
+    var s = spec
+        .replaceAll(RegExp(r'\d+(?:\.\d+)?\s*(?:度|°|%vol)', caseSensitive: false), '')
+        .replaceAll(RegExp(r'[清浓酱兼馥凤]香(?:型(?:白酒)?)?'), '')
+        .replaceAll(RegExp(r'^[·\s]+|[·\s]+$'), '')
+        .trim();
+    if (s.isEmpty) s = spec;
+    // Append series if not already in spec
+    if (series.isNotEmpty && !s.contains(series)) s = '$s · $series';
+    return s.trim();
+  }
+}
+
+enum _TitleTagStyle { burgundy, green, neutral }
+
+class _TitleTag extends StatelessWidget {
+  final String label;
+  final _TitleTagStyle style;
+  const _TitleTag({required this.label, required this.style});
+
+  @override
+  Widget build(BuildContext context) {
+    late Color bg, fg;
+    switch (style) {
+      case _TitleTagStyle.burgundy:
+        bg = _kBurgundyLight;
+        fg = _kBurgundy;
+      case _TitleTagStyle.green:
+        bg = const Color(0xFFE8F5EE);
+        fg = const Color(0xFF1F6B41);
+      case _TitleTagStyle.neutral:
+        bg = const Color(0xFFEEEAE3);
+        fg = const Color(0xFF6B6259);
+    }
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
+      decoration: BoxDecoration(color: bg, borderRadius: BorderRadius.circular(4)),
+      child: Text(label,
+          style: TextStyle(fontSize: 11, fontWeight: FontWeight.w600,
+              color: fg, letterSpacing: 0.06)),
+    );
+  }
+}
+
+// ── Quick Specs Grid ──────────────────────────────────────────────────
+
+class _QuickSpecs extends StatelessWidget {
+  final List<({String value, String unit, String label})> items;
+  const _QuickSpecs({required this.items});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: const BoxDecoration(
+        color: Colors.white,
+        border: Border(bottom: BorderSide(color: _kBorder)),
+      ),
+      child: Row(
+        children: items.asMap().entries.map((entry) {
+          final i = entry.key;
+          final it = entry.value;
+          return Expanded(
+            child: Container(
+              decoration: BoxDecoration(
+                border: i == 0
+                    ? null
+                    : const Border(left: BorderSide(color: _kBorderSub)),
+              ),
+              padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 6),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  RichText(
+                    text: TextSpan(
+                      text: it.value,
+                      style: const TextStyle(
+                        fontSize: 22, fontWeight: FontWeight.w700,
+                        color: _kInkDeep, height: 1,
+                        fontFeatures: [FontFeature.tabularFigures()],
+                      ),
+                      children: it.unit.isNotEmpty
+                          ? [
+                              TextSpan(
+                                text: it.unit,
+                                style: const TextStyle(
+                                  fontSize: 10, fontWeight: FontWeight.w500,
+                                  color: _kTextMid),
+                              )
+                            ]
+                          : null,
+                    ),
+                    textAlign: TextAlign.center,
+                  ),
+                  const SizedBox(height: 4),
+                  Text(it.label,
+                      textAlign: TextAlign.center,
+                      style: const TextStyle(
+                          fontSize: 11, color: _kTextMid, letterSpacing: 0.06)),
+                ],
+              ),
+            ),
+          );
+        }).toList(),
+      ),
+    );
+  }
+}
+
+// ── Description Section ───────────────────────────────────────────────
+
+class _DescriptionSection extends StatelessWidget {
+  final String description;
+  const _DescriptionSection({required this.description});
+
+  static const _mockBody =
+      '飞天牌茅台酒采用本地优质红高粱与小麦为原料，承袭历经数百年沉淀的酱香酿造工艺，'
+      '经一年一个生产周期、两次投料、九次蒸煮、八次发酵、七次取酒，'
+      '于陶坛中陈藏至少五年，方得装瓶。色泽微黄透明，开瓶酱香盈室，'
+      '入口绵柔不烈，咽下后舌底生津，余香萦绕，是中国酱香型白酒之典范。';
+
+  static const _mockKeywords = ['酱香典范', '陈藏五年', '回味悠长', '国家地理标志保护产品'];
+
+  @override
+  Widget build(BuildContext context) {
+    final body = description.isNotEmpty ? description : _mockBody;
+    final keywords = description.isNotEmpty ? _extractKeywords(description) : _mockKeywords;
+
+    return Container(
+      padding: const EdgeInsets.fromLTRB(20, 24, 20, 20),
+      decoration: const BoxDecoration(
+        color: Colors.white,
+        border: Border(bottom: BorderSide(color: _kBorder)),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const _SectionHeader(title: '商品介绍'),
+          const SizedBox(height: 14),
+          Text(
+            body,
+            style: const TextStyle(
+              fontSize: 14, color: _kInkSoft, height: 1.85, letterSpacing: 0.02),
+            textAlign: TextAlign.justify,
+          ),
+          const SizedBox(height: 16),
+          Wrap(
+            spacing: 8, runSpacing: 6,
+            children: keywords.map((kw) => Container(
+              padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
+              decoration: BoxDecoration(
+                color: const Color(0xFFF5F3EF),
+                border: Border.all(color: _kBorderSub),
+                borderRadius: BorderRadius.circular(999),
+              ),
+              child: Text(kw, style: const TextStyle(
+                fontSize: 11, color: _kTextMid)),
+            )).toList(),
+          ),
+        ],
+      ),
+    );
+  }
+
+  List<String> _extractKeywords(String text) {
+    final matches = RegExp(r'【([^】]+)】').allMatches(text);
+    return matches.map((m) => m.group(1)!).toList();
+  }
+}
+
+// ── Authenticity Card ─────────────────────────────────────────────────
+
+class _AuthenticityCard extends StatelessWidget {
+  final Map<String, dynamic> batch;
+  const _AuthenticityCard({required this.batch});
+
+  @override
+  Widget build(BuildContext context) {
+    final batchNo = batch['batch_no'] as String? ?? '';
+    final productionDate = batch['production_date'] as String? ?? '';
+    final inStockDate = batch['in_stock_date'] as String? ?? '';
+    final quantity = batch['quantity'];
+    final qty = quantity is int ? quantity : (quantity as num?)?.toInt() ?? 0;
+
+    return Container(
+      padding: const EdgeInsets.fromLTRB(20, 24, 20, 24),
+      decoration: const BoxDecoration(
+        color: _kPaper,
+        border: Border(bottom: BorderSide(color: _kBorder)),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const _SectionHeader(title: '批次与防伪'),
+          const SizedBox(height: 16),
+          Container(
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(10),
+              border: Border.all(color: _kBorder),
+            ),
+            padding: const EdgeInsets.all(20),
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      if (batchNo.isNotEmpty) ...[
+                        _AuthRow(label: '批次号', value: batchNo, mono: true),
+                        const SizedBox(height: 14),
+                      ],
+                      if (productionDate.isNotEmpty) ...[
+                        _AuthRow(label: '生产日期', value: productionDate),
+                        const SizedBox(height: 14),
+                      ],
+                      if (inStockDate.isNotEmpty) ...[
+                        _AuthRow(label: '入库日期', value: inStockDate),
+                        const SizedBox(height: 14),
+                      ],
+                      if (qty > 0)
+                        _AuthRow(label: '批次数量', value: '$qty 瓶'),
+                    ],
+                  ),
+                ),
+                const SizedBox(width: 16),
+                Transform.rotate(
+                  angle: -8 * math.pi / 180,
+                  child: const _AuthStamp(),
+                ),
+              ],
+            ),
+          ),
+          const SizedBox(height: 12),
+          const Text(
+            '此防伪码已与本批次库存绑定，扫码即完成验证，可放心购买。',
+            style: TextStyle(fontSize: 11, color: _kTextMid, height: 1.6),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _AuthRow extends StatelessWidget {
+  final String label, value;
+  final bool mono;
+  const _AuthRow({required this.label, required this.value, this.mono = false});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(label,
+            style: const TextStyle(fontSize: 10, color: _kTextMid, letterSpacing: 0.05)),
+        const SizedBox(height: 3),
+        Text(value,
+            style: TextStyle(
+              fontSize: 13, color: _kInkSoft, fontWeight: FontWeight.w500,
+              fontFamily: mono ? 'monospace' : null,
+              letterSpacing: mono ? 0.5 : 0,
+            )),
+      ],
+    );
+  }
+}
+
+class _AuthStamp extends StatelessWidget {
+  const _AuthStamp();
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 84, height: 84,
+      child: CustomPaint(painter: _StampPainter()),
+    );
+  }
+}
+
+class _StampPainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    final cx = size.width / 2;
+    final cy = size.height / 2;
+    final center = Offset(cx, cy);
+    final outerR = size.width / 2 - 1;
+    final innerR = outerR - 3;
+
+    // Double-ring border
+    final ringPaint = Paint()
+      ..color = _kBurgundy
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 1.5;
+    canvas.drawCircle(center, outerR, ringPaint);
+    canvas.drawCircle(center, innerR, ringPaint);
+
+    // Circular text "防伪验证 · VERIFIED · "
+    _drawCircularText(canvas, '防 伪 验 证 · V E R I F I E D · ', center, innerR - 7);
+
+    // Center: checkmark
+    final checkPaint = Paint()
+      ..color = _kBurgundy
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 2.2
+      ..strokeCap = StrokeCap.round
+      ..strokeJoin = StrokeJoin.round;
+    final path = Path()
+      ..moveTo(cx - 9, cy - 1)
+      ..lineTo(cx - 3, cy + 6)
+      ..lineTo(cx + 10, cy - 8);
+    canvas.drawPath(path, checkPaint);
+
+    // "已验证" below checkmark
+    final tp = TextPainter(
+      text: const TextSpan(
+        text: '已验证',
+        style: TextStyle(
+          fontSize: 8.5, fontWeight: FontWeight.w700,
+          color: _kBurgundy, letterSpacing: 1.0,
+        ),
+      ),
+      textDirection: TextDirection.ltr,
+    )..layout();
+    tp.paint(canvas, Offset(cx - tp.width / 2, cy + 10));
+  }
+
+  void _drawCircularText(Canvas canvas, String text, Offset center, double radius) {
+    final charCount = text.length;
+    final angleStep = (2 * math.pi) / charCount;
+    const startAngle = -math.pi / 2;
+    for (int i = 0; i < charCount; i++) {
+      final angle = startAngle + i * angleStep;
+      canvas.save();
+      canvas.translate(center.dx, center.dy);
+      canvas.rotate(angle + math.pi / 2);
+      final tp = TextPainter(
+        text: TextSpan(
+          text: text[i],
+          style: const TextStyle(
+            fontSize: 6.5, color: _kBurgundy,
+            fontWeight: FontWeight.w600, letterSpacing: 0,
+          ),
+        ),
+        textDirection: TextDirection.ltr,
+      )..layout();
+      tp.paint(canvas, Offset(-tp.width / 2, -radius - tp.height));
+      canvas.restore();
+    }
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+}
+
+// ── Params Table ──────────────────────────────────────────────────────
+
+class _ParamsCard extends StatelessWidget {
+  final String publicId, spec, brand, series, unit;
+  final String? productionDate;
+  const _ParamsCard({
+    required this.publicId,
+    required this.spec,
+    required this.brand,
+    required this.series,
+    required this.unit,
+    this.productionDate,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    // Parse alcohol and volume from spec
+    final degM = RegExp(r'(\d+(?:\.\d+)?)\s*(?:度|°|%vol)', caseSensitive: false).firstMatch(spec);
+    final mlM = RegExp(r'(\d+(?:\.\d+)?)\s*ml', caseSensitive: false).firstMatch(spec);
+    final xiangM = RegExp(r'([清浓酱兼馥凤]香(?:型(?:白酒)?)?)').firstMatch(spec);
+
+    final rows = <({String label, String value, bool mono})>[
+      if (publicId.isNotEmpty) (label: '商品编码', value: publicId, mono: true),
+      if (brand.isNotEmpty) (label: '品牌', value: brand, mono: false),
+      if (series.isNotEmpty) (label: '系列', value: series, mono: false),
+      if (xiangM != null) (label: '香型', value: xiangM.group(1)!, mono: false),
+      if (degM != null) (label: '酒精度', value: '${degM.group(1)!}% vol', mono: false),
+      if (mlM != null) (label: '净含量', value: '${mlM.group(1)!} ml', mono: false),
+      if (spec.isNotEmpty) (label: '规格', value: spec, mono: false),
+      (label: '产地', value: '贵州省仁怀市茅台镇', mono: false),
+      (label: '生产日期', value: productionDate ?? '2024-01-01', mono: false),
+      (label: '保质期', value: '无限期（适饮）', mono: false),
+      (label: '储存方式', value: '阴凉干燥、避光保存', mono: false),
+    ];
     if (rows.isEmpty) return const SizedBox.shrink();
 
     return Container(
-      color: Colors.white,
+      padding: const EdgeInsets.fromLTRB(20, 24, 20, 20),
+      decoration: const BoxDecoration(
+        color: Colors.white,
+        border: Border(bottom: BorderSide(color: _kBorder)),
+      ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          const Padding(
-            padding: EdgeInsets.fromLTRB(16, 14, 16, 10),
-            child: Text('商品参数',
-                style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold, color: Color(0xFF212121))),
-          ),
-          const Divider(height: 1, color: Color(0xFFF0F0F0)),
-          ...rows.map((r) => Column(
-            children: [
-              Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 11),
-                child: Row(
-                  children: [
-                    SizedBox(
-                      width: 72,
-                      child: Text(r.label,
-                          style: const TextStyle(fontSize: 13, color: Color(0xFF888888))),
-                    ),
-                    Expanded(
-                      child: Text(r.value,
-                          style: const TextStyle(fontSize: 13, color: Color(0xFF212121))),
-                    ),
-                  ],
+          _SectionHeader(title: '商品参数'),
+          const SizedBox(height: 14),
+          ...rows.asMap().entries.map((entry) {
+            final i = entry.key;
+            final r = entry.value;
+            return Column(
+              children: [
+                if (i > 0)
+                  const Divider(height: 1, color: _kBorderSub, indent: 0),
+                Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 11),
+                  child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      SizedBox(
+                        width: 72,
+                        child: Text(r.label,
+                            style: const TextStyle(fontSize: 12, color: _kTextMid, letterSpacing: 0.02)),
+                      ),
+                      const SizedBox(width: 16),
+                      Expanded(
+                        child: Text(r.value,
+                            style: TextStyle(
+                              fontSize: 13, color: _kInkSoft, fontWeight: FontWeight.w500,
+                              fontFamily: r.mono ? 'monospace' : null,
+                              letterSpacing: r.mono ? 0.5 : 0.01,
+                            )),
+                      ),
+                    ],
+                  ),
                 ),
-              ),
-              if (r != rows.last) const Divider(height: 1, indent: 16, color: Color(0xFFF5F5F5)),
-            ],
-          )),
-          const SizedBox(height: 4),
+              ],
+            );
+          }),
         ],
       ),
     );
   }
 }
 
-// ── 页脚 ──────────────────────────────────────────────────
-class _FooterBrand extends StatelessWidget {
-  const _FooterBrand();
+// ── Section Header ────────────────────────────────────────────────────
+
+class _SectionHeader extends StatelessWidget {
+  final String title;
+  const _SectionHeader({required this.title});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Container(width: 3, height: 16, color: _kBurgundy,
+            margin: const EdgeInsets.only(right: 10)),
+        Text(title,
+            style: const TextStyle(
+                fontSize: 16, fontWeight: FontWeight.w700,
+                color: _kInkDeep, letterSpacing: 0.06)),
+      ],
+    );
+  }
+}
+
+// ── Shop Card ─────────────────────────────────────────────────────────
+
+class _ShopCard extends StatelessWidget {
+  final Map<String, dynamic> shop;
+  const _ShopCard({required this.shop});
+
+  @override
+  Widget build(BuildContext context) {
+    final name = shop['name'] as String? ?? '';
+    final code = shop['code'] as String? ?? '';
+    final address = shop['address'] as String? ?? '';
+    final phone = shop['phone'] as String? ?? '';
+    final hours = shop['business_hours'] as String? ?? '';
+
+    // Avatar text: first 2 chars of shop name
+    final avatarText = name.length >= 2 ? name.substring(0, 2) : name;
+
+    return Container(
+      padding: const EdgeInsets.fromLTRB(20, 24, 20, 24),
+      decoration: const BoxDecoration(
+        color: Colors.white,
+        border: Border(bottom: BorderSide(color: _kBorder)),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          _SectionHeader(title: '销售门店'),
+          const SizedBox(height: 16),
+          // Shop header row
+          Row(
+            children: [
+              Container(
+                width: 52, height: 52,
+                decoration: BoxDecoration(
+                  color: const Color(0xFF0A1F3B),
+                  borderRadius: BorderRadius.circular(10),
+                ),
+                child: Center(
+                  child: Text(avatarText,
+                      style: const TextStyle(
+                          color: Colors.white, fontSize: 16, fontWeight: FontWeight.w700,
+                          letterSpacing: 0.04)),
+                ),
+              ),
+              const SizedBox(width: 14),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(name, style: const TextStyle(
+                        fontSize: 16, fontWeight: FontWeight.w600, color: _kInkDeep,
+                        letterSpacing: 0.04)),
+                    if (code.isNotEmpty) ...[
+                      const SizedBox(height: 2),
+                      Text('门店编号 $code',
+                          style: const TextStyle(fontSize: 12, color: _kTextMid)),
+                    ],
+                  ],
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: 16),
+          Container(height: 1, color: _kBorderSub),
+          const SizedBox(height: 14),
+          if (address.isNotEmpty) _ShopInfoRow(icon: Icons.location_on_outlined, text: address),
+          if (phone.isNotEmpty) _ShopInfoRow(icon: Icons.phone_outlined, text: phone),
+          _ShopInfoRow(
+            icon: Icons.access_time_outlined,
+            text: '营业时间 ${hours.isNotEmpty ? hours : "09:30 – 22:00"}',
+          ),
+          const SizedBox(height: 20),
+          SizedBox(
+            width: double.infinity, height: 44,
+            child: ElevatedButton(
+              onPressed: () {},
+              style: ElevatedButton.styleFrom(
+                backgroundColor: const Color(0xFF0A1F3B),
+                foregroundColor: Colors.white,
+                elevation: 0,
+                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+              ),
+              child: const Text('查看本店其他商品 →',
+                  style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600, letterSpacing: 0.04)),
+            ),
+          ),
+          const SizedBox(height: 10),
+          SizedBox(
+            width: double.infinity, height: 40,
+            child: OutlinedButton.icon(
+              onPressed: () {},
+              style: OutlinedButton.styleFrom(
+                foregroundColor: _kInkDeep,
+                side: const BorderSide(color: _kBorder, width: 1.5),
+                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+              ),
+              icon: const Icon(Icons.person_outline, size: 16),
+              label: const Text('添加门店微信',
+                  style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _ShopInfoRow extends StatelessWidget {
+  final IconData icon;
+  final String text;
+  const _ShopInfoRow({required this.icon, required this.text});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(bottom: 10),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Icon(icon, size: 14, color: _kTextMid),
+          const SizedBox(width: 10),
+          Expanded(
+            child: Text(text,
+                style: const TextStyle(fontSize: 13, color: _kInkSoft, height: 1.5)),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+// ── Footer ────────────────────────────────────────────────────────────
+
+class _Footer extends StatelessWidget {
+  const _Footer();
 
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.symmetric(vertical: 20),
-      child: const Row(
-        mainAxisAlignment: MainAxisAlignment.center,
+      decoration: const BoxDecoration(color: _kPaperDeep),
+      padding: const EdgeInsets.symmetric(vertical: 28),
+      child: Column(
         children: [
-          Icon(Icons.wine_bar, size: 14, color: Color(0xFFBBBBBB)),
-          SizedBox(width: 6),
-          Text('酒库管理系统提供', style: TextStyle(fontSize: 12, color: Color(0xFFBBBBBB))),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Container(
+                width: 20, height: 20,
+                decoration: BoxDecoration(
+                  gradient: const LinearGradient(
+                    begin: Alignment.topLeft,
+                    end: Alignment.bottomRight,
+                    colors: [Color(0xFF2563AC), Color(0xFF1A4580)],
+                  ),
+                  borderRadius: BorderRadius.circular(5),
+                  boxShadow: [
+                    BoxShadow(
+                      color: const Color(0xFF2563AC).withValues(alpha: 0.30),
+                      blurRadius: 4, offset: const Offset(0, 2)),
+                  ],
+                ),
+                child: const Center(
+                  child: Text('岩',
+                      style: TextStyle(color: Colors.white, fontSize: 11,
+                          fontWeight: FontWeight.w800, letterSpacing: -0.5)),
+                ),
+              ),
+              const SizedBox(width: 8),
+              Text.rich(
+                const TextSpan(
+                  text: '由 ',
+                  style: TextStyle(fontSize: 11, color: _kTextMid),
+                  children: [
+                    TextSpan(
+                      text: '岩美酒库管理系统',
+                      style: TextStyle(fontWeight: FontWeight.w600, color: Color(0xFF353C48)),
+                    ),
+                    TextSpan(text: ' 提供'),
+                  ],
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: 14),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              _FooterTextLink(text: '商品报错'),
+              const _FooterDivider(),
+              _FooterTextLink(text: '意见反馈'),
+              const _FooterDivider(),
+              _FooterTextLink(text: '关于岩美', url: 'https://www.yanmei.com'),
+            ],
+          ),
         ],
       ),
     );
   }
 }
+
+class _FooterTextLink extends StatelessWidget {
+  final String text;
+  final String? url;
+  const _FooterTextLink({required this.text, this.url});
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: url != null
+          ? () => launchUrl(Uri.parse(url!), mode: LaunchMode.externalApplication)
+          : null,
+      child: Text(text,
+          style: TextStyle(
+            fontSize: 11,
+            color: url != null ? const Color(0xFF2563AC) : _kTextMid,
+            letterSpacing: 0.02,
+            decoration: url != null ? TextDecoration.underline : null,
+            decorationColor: url != null ? const Color(0xFF2563AC) : null,
+          )),
+    );
+  }
+}
+
+class _FooterDivider extends StatelessWidget {
+  const _FooterDivider();
+
+  @override
+  Widget build(BuildContext context) {
+    return const Padding(
+      padding: EdgeInsets.symmetric(horizontal: 8),
+      child: Text('·', style: TextStyle(fontSize: 11, color: _kTextMid)),
+    );
+  }
+}
diff --git a/client/lib/screens/shell/app_shell.dart b/client/lib/screens/shell/app_shell.dart
index 2bb829a..0fc5ce7 100644
--- a/client/lib/screens/shell/app_shell.dart
+++ b/client/lib/screens/shell/app_shell.dart
@@ -591,10 +591,10 @@ class _ShopButton extends StatelessWidget {
         child: const Row(
           mainAxisSize: MainAxisSize.min,
           children: [
-            Icon(Icons.wine_bar, color: Colors.white, size: 22),
-            SizedBox(width: 8),
+            _YanmeiMark(size: 28),
+            SizedBox(width: 10),
             Text(
-              '酒库管理系统',
+              '岩美',
               style: TextStyle(
                   color: Colors.white,
                   fontSize: 18,
@@ -608,6 +608,70 @@ class _ShopButton extends StatelessWidget {
   }
 }
 
+/// Brand mark widget — approximates the 岩美 logo SVG without flutter_svg.
+/// Dark blue rounded rect, white mountain/wave strokes, bordeaux dot.
+class _YanmeiMark extends StatelessWidget {
+  final double size;
+  const _YanmeiMark({this.size = 32});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: size,
+      height: size,
+      decoration: BoxDecoration(
+        color: const Color(0xFF0F3057),
+        borderRadius: BorderRadius.circular(size * 0.19),
+      ),
+      child: CustomPaint(
+        painter: _YanmeiMarkPainter(),
+      ),
+    );
+  }
+}
+
+class _YanmeiMarkPainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    final w = size.width;
+    final h = size.height;
+    final paint = Paint()
+      ..color = Colors.white
+      ..strokeWidth = w * 0.055
+      ..style = PaintingStyle.stroke
+      ..strokeCap = StrokeCap.round
+      ..strokeJoin = StrokeJoin.round;
+
+    // Mountain/wave path: M14 38 L22 22 L32 32 L42 22 L50 38 (on 64px grid)
+    final path = Path();
+    path.moveTo(w * 0.219, h * 0.594);
+    path.lineTo(w * 0.344, h * 0.344);
+    path.lineTo(w * 0.500, h * 0.500);
+    path.lineTo(w * 0.656, h * 0.344);
+    path.lineTo(w * 0.781, h * 0.594);
+    canvas.drawPath(path, paint);
+
+    // Horizontal baseline: M12 46 L52 46 (on 64px grid)
+    canvas.drawLine(
+      Offset(w * 0.1875, h * 0.719),
+      Offset(w * 0.8125, h * 0.719),
+      paint,
+    );
+
+    // Bordeaux dot: circle cx=32 cy=52 r=2.4 (on 64px grid)
+    canvas.drawCircle(
+      Offset(w * 0.500, h * 0.859),
+      w * 0.042,
+      Paint()
+        ..color = const Color(0xFFC97B86)
+        ..style = PaintingStyle.fill,
+    );
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+}
+
 class _InfoRow extends StatelessWidget {
   final IconData icon;
   final String label;
diff --git a/client/web/index.html b/client/web/index.html
index eea37f8..054802c 100644
--- a/client/web/index.html
+++ b/client/web/index.html
@@ -18,18 +18,18 @@
 
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
-  <meta name="description" content="A new Flutter project.">
+  <meta name="description" content="岩美酒库管理系统 — 酒店饮品库存与采购管理平台">
 
   <!-- iOS meta tags & icons -->
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta name="apple-mobile-web-app-title" content="jiu_client">
+  <meta name="apple-mobile-web-app-title" content="岩美">
   <link rel="apple-touch-icon" href="icons/Icon-192.png">
 
   <!-- Favicon -->
   <link rel="icon" type="image/png" href="favicon.png"/>
 
-  <title>jiu_client</title>
+  <title>岩美</title>
   <link rel="manifest" href="manifest.json">
 </head>
 <body>
diff --git a/client/web/manifest.json b/client/web/manifest.json
index 6c1e3a1..c3f76e2 100644
--- a/client/web/manifest.json
+++ b/client/web/manifest.json
@@ -1,11 +1,11 @@
 {
-    "name": "jiu_client",
-    "short_name": "jiu_client",
+    "name": "岩美",
+    "short_name": "岩美",
     "start_url": ".",
     "display": "standalone",
-    "background_color": "#0175C2",
-    "theme_color": "#0175C2",
-    "description": "A new Flutter project.",
+    "background_color": "#2563AC",
+    "theme_color": "#2563AC",
+    "description": "岩美酒库管理系统 — 酒店饮品库存与采购管理平台",
     "orientation": "portrait-primary",
     "prefer_related_applications": false,
     "icons": [
diff --git a/deploy/nginx-jiu.conf b/deploy/nginx-jiu.conf
index e63429e..1444de5 100644
--- a/deploy/nginx-jiu.conf
+++ b/deploy/nginx-jiu.conf
@@ -7,10 +7,7 @@ server {
     ssl_protocols       TLSv1.2 TLSv1.3;
     ssl_ciphers         HIGH:!aNULL:!MD5;
 
-    root  /opt/jiu/web;
-    index index.html;
-
-    # 商品图片静态文件（^~ 阻止正则 location 拦截 .jpg 等后缀请求）
+    # 商品图片静态文件
     location ^~ /images/ {
         alias /opt/jiu/images/;
         expires 30d;
@@ -25,9 +22,44 @@ server {
         proxy_read_timeout 30s;
     }
 
-    # Flutter SPA fallback
-    location / {
-        try_files $uri $uri/ /index.html;
+    # Flutter 管理端（/app/ 子路径）
+    location /app/ {
+        alias /opt/jiu/web/;
+        index index.html;
+        try_files $uri $uri/ /app/index.html;
+    }
+
+    # Flutter 公开商品扫码页（/product/:id → Flutter app）
+    location /product/ {
+        alias /opt/jiu/web/;
+        try_files $uri /app/index.html;
+    }
+
+    # 营销站点 — 精确路径
+    location = / {
+        root /opt/jiu/marketing;
+        try_files /index.html =404;
+    }
+    location ~ ^/(docs|download)(\.html)?$ {
+        root /opt/jiu/marketing;
+        try_files /$1.html =404;
+    }
+    location /features/ {
+        root /opt/jiu/marketing;
+        try_files $uri $uri.html =404;
+    }
+
+    # 营销站点 — 扫码 HTML 页（保留旧链接兼容）
+    location /scan/ {
+        root /opt/jiu/marketing;
+        try_files /scan.html =404;
+    }
+
+    # 营销静态资源（CSS / SVG / 图片等）
+    location /assets/ {
+        root /opt/jiu/marketing;
+        expires 7d;
+        add_header Cache-Control "public";
     }
 }
 
diff --git a/web/assets/colors_and_type.css b/web/assets/colors_and_type.css
new file mode 100644
index 0000000..4494430
--- /dev/null
+++ b/web/assets/colors_and_type.css
@@ -0,0 +1,259 @@
+/* =========================================================================
+   岩美 Design System — Foundations
+   Tokens for color, type, spacing, radius, shadow.
+   Import once at root: <link rel="stylesheet" href="colors_and_type.css">
+   ========================================================================= */
+
+:root {
+  /* ---------- Brand: Primary (Slate Blue) ---------- */
+  /* Trustworthy enterprise blue with a slight slate cast. */
+  --brand-50:  #EEF4FB;
+  --brand-100: #D6E5F5;
+  --brand-200: #ADC9EA;
+  --brand-300: #7FA8DA;
+  --brand-400: #4F86C6;
+  --brand-500: #2563AC;   /* Primary action */
+  --brand-600: #1B4F8E;   /* Hover */
+  --brand-700: #154072;   /* Pressed */
+  --brand-800: #0F3057;
+  --brand-900: #0A1F3B;   /* Brand ink — headers, logo on light bg */
+
+  /* ---------- Neutrals (cool slate gray) ---------- */
+  --gray-0:    #FFFFFF;
+  --gray-25:   #FBFCFD;
+  --gray-50:   #F5F7FA;
+  --gray-100:  #ECEFF4;
+  --gray-200:  #DCE2EB;
+  --gray-300:  #C2CAD6;
+  --gray-400:  #99A3B3;
+  --gray-500:  #6E7888;
+  --gray-600:  #4F5867;
+  --gray-700:  #353C48;
+  --gray-800:  #232934;
+  --gray-900:  #141821;
+
+  /* ---------- Accent (bordeaux / 酒红) ---------- */
+  /* Used sparingly: brand context cue (wine), key highlights, marketing only. */
+  --accent-50:  #FAEEF0;
+  --accent-100: #F1D2D7;
+  --accent-300: #C97B86;
+  --accent-500: #8B2331;
+  --accent-700: #5F1621;
+
+  /* ---------- Semantic ---------- */
+  --success-50:  #E8F5EE;
+  --success-500: #2E8B57;
+  --success-700: #1F6B41;
+
+  --warning-50:  #FFF4DB;
+  --warning-500: #E08E00;
+  --warning-700: #A66700;
+
+  --danger-50:   #FDECEC;
+  --danger-500:  #D14343;
+  --danger-700:  #9E2A2A;
+
+  --info-50:     #E5F1FB;
+  --info-500:    #2F7BD0;
+  --info-700:    #1F5C9F;
+
+  /* ---------- Semantic foreground / background ---------- */
+  --bg-app:        var(--gray-50);
+  --bg-surface:    var(--gray-0);
+  --bg-raised:     var(--gray-0);
+  --bg-sunken:     var(--gray-100);
+  --bg-overlay:    rgba(20, 24, 33, 0.45);
+
+  --fg-default:    var(--gray-800);
+  --fg-muted:      var(--gray-600);
+  --fg-subtle:     var(--gray-500);
+  --fg-disabled:   var(--gray-400);
+  --fg-on-brand:   #FFFFFF;
+  --fg-link:       var(--brand-500);
+
+  --border-subtle:  var(--gray-100);
+  --border-default: var(--gray-200);
+  --border-strong:  var(--gray-300);
+  --border-focus:   var(--brand-500);
+
+  /* ---------- Typography ---------- */
+  /* Chinese-primary stack with PingFang on macOS/iOS, Microsoft YaHei on Windows,
+     Noto Sans SC as web fallback (loaded via Google Fonts in index files). */
+  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+               "Source Han Sans CN", "Noto Sans SC", -apple-system,
+               BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-display: var(--font-sans);
+  --font-mono: "JetBrains Mono", "SF Mono", "Roboto Mono", Menlo, Consolas,
+               "Microsoft YaHei", monospace;
+
+  /* Type scale — mobile-first, scales up for desktop dashboards */
+  --text-2xs: 11px;
+  --text-xs:  12px;
+  --text-sm:  13px;
+  --text-md:  14px;   /* dashboard body default */
+  --text-lg:  16px;
+  --text-xl:  18px;
+  --text-2xl: 22px;
+  --text-3xl: 28px;
+  --text-4xl: 36px;
+  --text-5xl: 48px;
+
+  --leading-tight:  1.25;
+  --leading-snug:   1.4;
+  --leading-normal: 1.55;
+  --leading-loose:  1.75;
+
+  --weight-regular: 400;
+  --weight-medium:  500;
+  --weight-semibold: 600;
+  --weight-bold:    700;
+
+  /* Tracking — Chinese reads better with subtle positive tracking */
+  --tracking-tight:  -0.01em;
+  --tracking-normal: 0;
+  --tracking-wide:   0.02em;
+  --tracking-cn-display: 0.04em; /* Chinese display headers */
+
+  /* ---------- Spacing (4px base) ---------- */
+  --space-0:  0;
+  --space-1:  4px;
+  --space-2:  8px;
+  --space-3:  12px;
+  --space-4:  16px;
+  --space-5:  20px;
+  --space-6:  24px;
+  --space-8:  32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-20: 80px;
+  --space-24: 96px;
+
+  /* ---------- Radius — restrained, enterprise-grade ---------- */
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;   /* default for inputs, buttons, badges */
+  --radius-lg: 10px;  /* cards */
+  --radius-xl: 14px;
+  --radius-pill: 999px;
+
+  /* ---------- Elevation — soft, neutral, no colored shadows ---------- */
+  --shadow-xs: 0 1px 2px rgba(20, 24, 33, 0.04);
+  --shadow-sm: 0 1px 2px rgba(20, 24, 33, 0.06), 0 1px 3px rgba(20, 24, 33, 0.04);
+  --shadow-md: 0 2px 4px rgba(20, 24, 33, 0.06), 0 4px 8px rgba(20, 24, 33, 0.05);
+  --shadow-lg: 0 4px 12px rgba(20, 24, 33, 0.08), 0 12px 24px rgba(20, 24, 33, 0.06);
+  --shadow-xl: 0 8px 20px rgba(20, 24, 33, 0.10), 0 20px 40px rgba(20, 24, 33, 0.08);
+  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(20,24,33,0.04);
+  --ring-focus: 0 0 0 3px rgba(37, 99, 172, 0.22);
+
+  /* ---------- Motion ---------- */
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
+  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --duration-fast:   120ms;
+  --duration-base:   180ms;
+  --duration-slow:   240ms;
+
+  /* ---------- Layout ---------- */
+  --layout-sidebar:    240px;
+  --layout-sidebar-collapsed: 64px;
+  --layout-topbar:     56px;
+  --layout-content-max: 1440px;
+}
+
+/* =========================================================================
+   Semantic element styles — apply to base elements within design system docs.
+   These do NOT bleed into ui_kits / pages with their own styles.
+   ========================================================================= */
+.ds-typography {
+  font-family: var(--font-sans);
+  color: var(--fg-default);
+  font-feature-settings: "tnum" 1, "ss01" 1;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+.ds-typography h1,
+.ds-h1 {
+  font-size: var(--text-4xl);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-cn-display);
+  color: var(--brand-900);
+  margin: 0 0 var(--space-4);
+}
+.ds-typography h2,
+.ds-h2 {
+  font-size: var(--text-3xl);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-cn-display);
+  color: var(--brand-900);
+  margin: 0 0 var(--space-3);
+}
+.ds-typography h3,
+.ds-h3 {
+  font-size: var(--text-2xl);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-snug);
+  color: var(--gray-900);
+  margin: 0 0 var(--space-3);
+}
+.ds-typography h4,
+.ds-h4 {
+  font-size: var(--text-xl);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-snug);
+  color: var(--gray-900);
+  margin: 0 0 var(--space-2);
+}
+.ds-typography h5,
+.ds-h5 {
+  font-size: var(--text-lg);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-snug);
+  color: var(--gray-800);
+  margin: 0 0 var(--space-2);
+}
+.ds-typography p,
+.ds-body {
+  font-size: var(--text-md);
+  font-weight: var(--weight-regular);
+  line-height: var(--leading-normal);
+  color: var(--fg-default);
+  margin: 0 0 var(--space-3);
+}
+.ds-typography small,
+.ds-caption {
+  font-size: var(--text-xs);
+  color: var(--fg-muted);
+  line-height: var(--leading-snug);
+}
+.ds-typography code,
+.ds-mono {
+  font-family: var(--font-mono);
+  font-size: 0.93em;
+  background: var(--gray-100);
+  padding: 1px 6px;
+  border-radius: var(--radius-sm);
+  color: var(--gray-800);
+}
+.ds-num {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum" 1;
+}
+.ds-label {
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  letter-spacing: var(--tracking-wide);
+  text-transform: none; /* Chinese never uppercases */
+  color: var(--fg-muted);
+}
+
+/* Focus ring shared across the system */
+.ds-focusable:focus-visible,
+:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-focus);
+  border-color: var(--border-focus);
+}
diff --git a/web/assets/logo-full-inverse.svg b/web/assets/logo-full-inverse.svg
new file mode 100644
index 0000000..f50ca27
--- /dev/null
+++ b/web/assets/logo-full-inverse.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 64" fill="none">
+  <rect width="64" height="64" rx="12" fill="#FFFFFF"></rect>
+  <g stroke="#0F3057" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M14 38 L22 22 L32 32 L42 22 L50 38" fill="none"></path>
+    <path d="M12 46 L52 46" fill="none"></path>
+  </g>
+  <circle cx="32" cy="52" r="2.4" fill="#C97B86"></circle>
+  <text x="82" y="38" font-family="&#39;PingFang SC&#39;,&#39;Hiragino Sans GB&#39;,&#39;Microsoft YaHei&#39;,&#39;Noto Sans SC&#39;,sans-serif" font-size="28" font-weight="700" letter-spacing="2" fill="#FFFFFF">岩美</text>
+  <text x="83" y="55" font-family="&#39;PingFang SC&#39;,&#39;Hiragino Sans GB&#39;,&#39;Microsoft YaHei&#39;,&#39;Noto Sans SC&#39;,sans-serif" font-size="10" font-weight="500" letter-spacing="2.4" fill="#ADC9EA">酒库管理系统</text>
+</svg>
\ No newline at end of file
diff --git a/web/assets/logo-full.svg b/web/assets/logo-full.svg
new file mode 100644
index 0000000..88085e6
--- /dev/null
+++ b/web/assets/logo-full.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 64" fill="none">
+  
+  <rect width="64" height="64" rx="12" fill="#0F3057"></rect>
+  <g stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M14 38 L22 22 L32 32 L42 22 L50 38" fill="none"></path>
+    <path d="M12 46 L52 46" fill="none"></path>
+  </g>
+  <circle cx="32" cy="52" r="2.4" fill="#C97B86"></circle>
+
+  
+  <text x="82" y="38" font-family="&#39;PingFang SC&#39;,&#39;Hiragino Sans GB&#39;,&#39;Microsoft YaHei&#39;,&#39;Noto Sans SC&#39;,sans-serif" font-size="28" font-weight="700" letter-spacing="2" fill="#0F3057">岩美</text>
+
+  
+  <text x="83" y="55" font-family="&#39;PingFang SC&#39;,&#39;Hiragino Sans GB&#39;,&#39;Microsoft YaHei&#39;,&#39;Noto Sans SC&#39;,sans-serif" font-size="10" font-weight="500" letter-spacing="2.4" fill="#6E7888">酒库管理系统</text>
+</svg>
\ No newline at end of file
diff --git a/web/assets/logo-mark.svg b/web/assets/logo-mark.svg
new file mode 100644
index 0000000..d54a08f
--- /dev/null
+++ b/web/assets/logo-mark.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+  
+  <rect width="64" height="64" rx="12" fill="#0F3057"></rect>
+  <g stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+    
+    <path d="M14 38 L22 22 L32 32 L42 22 L50 38" fill="none"></path>
+    
+    <path d="M12 46 L52 46" fill="none"></path>
+  </g>
+  
+  <circle cx="32" cy="52" r="2.4" fill="#C97B86"></circle>
+</svg>
\ No newline at end of file
diff --git a/web/docs.html b/web/docs.html
new file mode 100644
index 0000000..4277a38
--- /dev/null
+++ b/web/docs.html
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>文档 — 岩美酒库管理系统</title>
+<link rel="stylesheet" href="assets/colors_and_type.css" />
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
+<script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+<style>
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; font-family: var(--font-sans); color: var(--fg-default); background: var(--bg-surface); -webkit-font-smoothing: antialiased; }
+a { color: inherit; text-decoration: none; }
+.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
+.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: background 120ms; text-decoration: none; }
+.btn-primary { background: var(--brand-500); color: #fff; }
+.btn-primary:hover { background: var(--brand-600); }
+.icon { width: 18px; height: 18px; }
+
+.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
+.nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
+.nav-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--brand-900); }
+.nav-brand img { height: 30px; }
+.nav-links { display: flex; gap: 2px; }
+.nav-links a { padding: 7px 14px; border-radius: var(--radius-md); font-size: 14px; color: var(--gray-700); transition: background 120ms; }
+.nav-links a:hover { background: var(--gray-100); }
+.nav-cta { display: flex; gap: 10px; }
+
+.docs-layout { display: grid; grid-template-columns: 220px 1fr; gap: 0; min-height: calc(100vh - 64px); }
+.docs-sidebar { border-right: 1px solid var(--border-default); padding: 32px 0; position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; }
+.sidebar-group { margin-bottom: 28px; }
+.sidebar-group-title { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--fg-subtle); text-transform: uppercase; padding: 0 20px; margin-bottom: 8px; }
+.sidebar-link { display: block; padding: 6px 20px; font-size: 14px; color: var(--gray-700); border-radius: 0; transition: background 100ms; }
+.sidebar-link:hover { background: var(--gray-50); color: var(--brand-900); }
+.sidebar-link.active { color: var(--brand-500); font-weight: 500; background: var(--brand-50); }
+
+.docs-content { padding: 48px 64px; max-width: 800px; }
+.docs-content h1 { font-size: 32px; font-weight: 700; color: var(--brand-900); margin: 0 0 8px; }
+.docs-content .meta { font-size: 13px; color: var(--fg-muted); margin-bottom: 36px; }
+.docs-content h2 { font-size: 22px; font-weight: 600; color: var(--brand-900); margin: 48px 0 16px; padding-top: 48px; border-top: 1px solid var(--border-subtle); }
+.docs-content h2:first-of-type { border-top: none; }
+.docs-content h3 { font-size: 16px; font-weight: 600; color: var(--gray-800); margin: 28px 0 10px; }
+.docs-content p { font-size: 14px; line-height: 1.75; color: var(--fg-default); margin: 0 0 16px; }
+.docs-content ul, .docs-content ol { padding-left: 20px; margin: 0 0 16px; }
+.docs-content li { font-size: 14px; line-height: 1.75; color: var(--fg-default); margin-bottom: 6px; }
+.docs-content code { font-family: var(--font-mono); font-size: 12px; background: var(--gray-100); padding: 2px 5px; border-radius: 3px; color: var(--brand-700); }
+.tip { background: var(--brand-50); border-left: 3px solid var(--brand-400); border-radius: 0 6px 6px 0; padding: 12px 16px; margin: 20px 0; }
+.tip p { margin: 0; font-size: 13px; color: var(--brand-800); }
+.warn { background: var(--warning-50); border-left: 3px solid var(--warning-500); border-radius: 0 6px 6px 0; padding: 12px 16px; margin: 20px 0; }
+.warn p { margin: 0; font-size: 13px; color: var(--warning-700); }
+table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 13px; }
+th { background: var(--gray-50); padding: 8px 12px; text-align: left; font-weight: 600; color: var(--gray-700); border: 1px solid var(--border-default); }
+td { padding: 8px 12px; border: 1px solid var(--border-default); color: var(--fg-default); vertical-align: top; }
+
+footer { background: var(--gray-50); border-top: 1px solid var(--border-default); padding: 40px 0; }
+.footer-inner { display: flex; align-items: center; justify-content: space-between; }
+.footer-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--brand-900); }
+.footer-brand img { height: 24px; }
+.footer-copy { font-size: 12px; color: var(--fg-subtle); }
+</style>
+</head>
+<body>
+
+<nav class="nav">
+  <div class="nav-inner">
+    <a href="/" class="nav-brand"><img src="assets/logo-full.svg" alt="岩美" /></a>
+    <div class="nav-links">
+      <a href="/features/inventory.html">功能</a>
+      <a href="/docs.html">文档</a>
+      <a href="/download.html">下载</a>
+    </div>
+    <div class="nav-cta">
+      <a href="/app/" class="btn btn-primary">进入管理端 <i data-lucide="arrow-right" class="icon"></i></a>
+    </div>
+  </div>
+</nav>
+
+<div class="docs-layout">
+  <aside class="docs-sidebar">
+    <div class="sidebar-group">
+      <div class="sidebar-group-title">快速开始</div>
+      <a href="#intro" class="sidebar-link active">系统介绍</a>
+      <a href="#login" class="sidebar-link">登录与权限</a>
+      <a href="#roles" class="sidebar-link">角色说明</a>
+    </div>
+    <div class="sidebar-group">
+      <div class="sidebar-group-title">核心模块</div>
+      <a href="#stock-in" class="sidebar-link">入库管理</a>
+      <a href="#stock-out" class="sidebar-link">出库管理</a>
+      <a href="#inventory" class="sidebar-link">库存管理</a>
+      <a href="#finance" class="sidebar-link">财务管理</a>
+      <a href="#products" class="sidebar-link">基础数据</a>
+    </div>
+    <div class="sidebar-group">
+      <div class="sidebar-group-title">其他功能</div>
+      <a href="#scan" class="sidebar-link">防伪溯源</a>
+      <a href="#settings" class="sidebar-link">系统设置</a>
+    </div>
+  </aside>
+
+  <main class="docs-content">
+    <h1>使用手册</h1>
+    <p class="meta">适用版本：v1.x · 更新于 2025 年</p>
+
+    <h2 id="intro">系统介绍</h2>
+    <p>岩美酒库管理系统是专为酒行、酒店 F&B 部门设计的一体化库存管理平台。系统涵盖入库、出库、库存盘点、财务对账、往来单位管理以及商品防伪溯源等核心功能。</p>
+    <p>系统采用多租户架构，每个门店（<code>shop</code>）的数据完全隔离，支持 Web 端与桌面端（macOS / Windows）同时使用。</p>
+
+    <div class="tip"><p><strong>提示：</strong>如果是初次使用，请让管理员先创建您的账号，然后使用门店编号 + 用户名 + 密码登录。</p></div>
+
+    <h2 id="login">登录与权限</h2>
+    <h3>登录方式</h3>
+    <p>在登录页输入：</p>
+    <ul>
+      <li><strong>门店编号</strong>（由管理员提供，如 <code>S001</code>）</li>
+      <li><strong>用户名</strong></li>
+      <li><strong>密码</strong></li>
+    </ul>
+    <p>登录成功后，系统会保存 Token，关闭浏览器后再次打开无需重新登录（Token 有效期 7 天）。</p>
+
+    <h2 id="roles">角色说明</h2>
+    <table>
+      <thead><tr><th>角色</th><th>权限范围</th></tr></thead>
+      <tbody>
+        <tr><td>管理员 (admin)</td><td>所有功能，包括用户管理、审批、系统设置</td></tr>
+        <tr><td>普通用户 (user)</td><td>创建/编辑单据，无法审批，无系统设置权限</td></tr>
+        <tr><td>只读用户 (readonly)</td><td>仅查看，不可创建或修改任何数据</td></tr>
+      </tbody>
+    </table>
+    <div class="warn"><p><strong>注意：</strong>只读用户尝试任何写操作时，系统将返回 403 拒绝提示。</p></div>
+
+    <h2 id="stock-in">入库管理</h2>
+    <h3>创建入库单</h3>
+    <ol>
+      <li>点击左侧「入库管理」，然后点击「新建入库单」</li>
+      <li>选择仓库、供应商（往来单位），填写入库日期</li>
+      <li>逐行添加商品，填写数量、单价、批次号、生产日期</li>
+      <li>保存为「草稿」或直接「提交审核」</li>
+    </ol>
+    <h3>审批入库</h3>
+    <p>状态为「待审核」的入库单，管理员可在列表中点击「审核通过」。审核通过后库存自动增加，且操作不可逆。</p>
+
+    <h2 id="stock-out">出库管理</h2>
+    <p>出库流程与入库类似：创建出库单 → 选择仓库和商品 → 提交审核 → 管理员审批。</p>
+    <p>系统在审批出库时会自动校验库存充足性，如果库存不足，审批将失败并给出提示。</p>
+    <table>
+      <thead><tr><th>出库类型</th><th>说明</th></tr></thead>
+      <tbody>
+        <tr><td>销售</td><td>对外销售，关联往来单位（客户）</td></tr>
+        <tr><td>领用</td><td>内部消耗，无对外客户</td></tr>
+        <tr><td>损耗</td><td>破损/过期等非正常消耗</td></tr>
+      </tbody>
+    </table>
+
+    <h2 id="inventory">库存管理</h2>
+    <p>库存列表按批次展示，每次入库产生一条库存记录。支持按商品名称、仓库、供应商筛选，并可导出 Excel。</p>
+    <h3>批次追溯</h3>
+    <p>每条库存记录保留了入库批次号、生产日期、供应商等信息，可完整追溯商品来源。</p>
+
+    <h2 id="finance">财务管理</h2>
+    <p>财务模块记录与入库/出库单据关联的应收应付账款。支持按往来单位、日期区间、状态（已收/待收）筛选，并可导出汇总报表。</p>
+
+    <h2 id="products">基础数据</h2>
+    <p>基础数据包含：</p>
+    <ul>
+      <li><strong>商品管理</strong>：SKU 信息、规格、品牌、系列、单位，以及商品图片上传</li>
+      <li><strong>仓库管理</strong>：门店下可配置多个仓库</li>
+      <li><strong>往来单位</strong>：供应商与客户统一管理</li>
+      <li><strong>编号规则</strong>：自定义入库单/出库单号前缀和格式</li>
+    </ul>
+
+    <h2 id="scan">防伪溯源</h2>
+    <p>为每件商品生成唯一防伪码（<code>public_id</code>），打印贴附于商品。消费者扫描二维码后跳转至 <code>jiu.51yanmei.com/scan/&lt;id&gt;</code>，可查看：</p>
+    <ul>
+      <li>商品基本信息（名称、品牌、规格）</li>
+      <li>批次信息（生产日期、批次号、入库日期）</li>
+      <li>出售门店信息</li>
+      <li>岩美防伪验证标记</li>
+    </ul>
+
+    <h2 id="settings">系统设置</h2>
+    <p>系统设置仅管理员可见，包括：</p>
+    <ul>
+      <li>用户管理：创建/删除用户，重置密码，调整角色</li>
+      <li>门店信息：更新门店名称、地址、电话等公开信息</li>
+      <li>数据导入：批量导入商品、历史库存数据（Excel 格式）</li>
+    </ul>
+  </main>
+</div>
+
+<footer>
+  <div class="container">
+    <div class="footer-inner">
+      <div class="footer-brand"><img src="assets/logo-mark.svg" alt="岩美" /> 岩美酒库管理系统</div>
+      <div class="footer-copy">© 2025 岩美。保留所有权利。</div>
+    </div>
+  </div>
+</footer>
+
+<script>lucide.createIcons();</script>
+</body>
+</html>
diff --git a/web/download.html b/web/download.html
new file mode 100644
index 0000000..56c12ea
--- /dev/null
+++ b/web/download.html
@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>下载 — 岩美酒库管理系统</title>
+<meta name="description" content="下载岩美酒库管理系统客户端，支持 macOS 和 Windows。" />
+<link rel="stylesheet" href="assets/colors_and_type.css" />
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
+<script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+<style>
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; font-family: var(--font-sans); color: var(--fg-default); background: var(--bg-surface); -webkit-font-smoothing: antialiased; }
+a { color: inherit; text-decoration: none; }
+.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
+.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: background 120ms; white-space: nowrap; text-decoration: none; }
+.btn-primary { background: var(--brand-500); color: #fff; }
+.btn-primary:hover { background: var(--brand-600); }
+.btn-secondary { background: var(--gray-0); color: var(--brand-900); border-color: var(--border-default); }
+.btn-secondary:hover { background: var(--gray-50); }
+.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
+.btn-disabled { opacity: 0.5; pointer-events: none; }
+.icon { width: 18px; height: 18px; }
+
+/* NAV */
+.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
+.nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
+.nav-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--brand-900); }
+.nav-brand img { height: 30px; }
+.nav-links { display: flex; gap: 2px; }
+.nav-links a { padding: 7px 14px; border-radius: var(--radius-md); font-size: 14px; color: var(--gray-700); transition: background 120ms; }
+.nav-links a:hover { background: var(--gray-100); }
+.nav-cta { display: flex; gap: 10px; }
+
+/* PAGE */
+.page-hero { padding: 72px 0 56px; text-align: center; border-bottom: 1px solid var(--border-subtle); }
+.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--brand-500); text-transform: uppercase; margin-bottom: 14px; }
+.page-title { font-size: 40px; font-weight: 700; color: var(--brand-900); margin: 0 0 14px; }
+.page-sub { font-size: 16px; color: var(--fg-muted); margin: 0; line-height: 1.6; }
+
+/* LOADING / ERROR */
+.state-loading { padding: 60px 0; text-align: center; color: var(--fg-muted); font-size: 14px; }
+.state-error { padding: 60px 0; text-align: center; color: var(--danger-500); font-size: 14px; }
+
+/* RELEASE */
+.release-section { padding: 64px 0; }
+.version-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-50); color: var(--brand-700); padding: 5px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
+.build-date { font-size: 13px; color: var(--fg-muted); margin-bottom: 40px; }
+.platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
+.platform-card { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: 10px; padding: 28px 24px; }
+.platform-card h3 { font-size: 18px; font-weight: 600; color: var(--brand-900); margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
+.platform-card h3 i { width: 20px; height: 20px; color: var(--brand-500); }
+.platform-card p { font-size: 13px; color: var(--fg-muted); margin: 0 0 24px; line-height: 1.6; }
+.web-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--success-50); color: var(--success-700); padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; margin-bottom: 6px; }
+
+/* CHANGELOG */
+.changelog-section { padding: 0 0 64px; }
+.changelog-title { font-size: 20px; font-weight: 600; color: var(--brand-900); margin: 0 0 20px; }
+.changelog-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
+.changelog-item { display: flex; gap: 14px; background: var(--gray-0); border: 1px solid var(--border-default); border-radius: 8px; padding: 16px 20px; }
+.changelog-ver { font-size: 13px; font-weight: 600; color: var(--brand-700); font-family: var(--font-mono); min-width: 60px; padding-top: 2px; }
+.changelog-content { flex: 1; }
+.changelog-date { font-size: 11px; color: var(--fg-subtle); margin-bottom: 6px; }
+.changelog-notes { font-size: 13px; color: var(--fg-default); margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
+.changelog-notes li::before { content: '· '; color: var(--brand-400); }
+
+/* FOOTER */
+footer { background: var(--gray-50); border-top: 1px solid var(--border-default); padding: 40px 0; }
+.footer-inner { display: flex; align-items: center; justify-content: space-between; }
+.footer-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--brand-900); }
+.footer-brand img { height: 24px; }
+.footer-copy { font-size: 12px; color: var(--fg-subtle); }
+</style>
+</head>
+<body>
+
+<nav class="nav">
+  <div class="nav-inner">
+    <a href="/" class="nav-brand"><img src="assets/logo-full.svg" alt="岩美" /></a>
+    <div class="nav-links">
+      <a href="/features/inventory.html">功能</a>
+      <a href="/docs.html">文档</a>
+      <a href="/download.html">下载</a>
+    </div>
+    <div class="nav-cta">
+      <a href="/app/" class="btn btn-primary">进入管理端 <i data-lucide="arrow-right" class="icon"></i></a>
+    </div>
+  </div>
+</nav>
+
+<div class="page-hero">
+  <div class="container">
+    <div class="eyebrow">Download</div>
+    <h1 class="page-title">下载岩美客户端</h1>
+    <p class="page-sub">支持 macOS、Windows 桌面端，以及通过浏览器直接使用的 Web 版本。</p>
+  </div>
+</div>
+
+<section class="release-section">
+  <div class="container" id="release-container">
+    <div class="state-loading">正在获取版本信息...</div>
+  </div>
+</section>
+
+<footer>
+  <div class="container">
+    <div class="footer-inner">
+      <div class="footer-brand"><img src="assets/logo-mark.svg" alt="岩美" /> 岩美酒库管理系统</div>
+      <div class="footer-copy">© 2025 岩美。保留所有权利。</div>
+    </div>
+  </div>
+</footer>
+
+<script>
+lucide.createIcons();
+
+const API_BASE = location.hostname === 'localhost' ? 'http://localhost:8080/api/v1' : '/api/v1';
+
+function fmt(d) {
+  if (!d) return '—';
+  return d.replace(/(\d{4})-(\d{2})-(\d{2})/, '$1 年 $2 月 $3 日');
+}
+
+function renderRelease(r) {
+  const dl = r.download_urls || {};
+  const container = document.getElementById('release-container');
+  container.innerHTML = `
+    <div class="version-badge">
+      <i data-lucide="tag" style="width:14px;height:14px"></i>
+      v${r.version || '—'}
+    </div>
+    <div class="build-date">发布日期：${fmt(r.build_date)}</div>
+    <div class="platform-grid">
+      <div class="platform-card">
+        <h3><i data-lucide="monitor"></i> macOS</h3>
+        <p>适用于 Apple Silicon / Intel Mac。支持本地打印与快捷键操作。</p>
+        ${dl.macos
+          ? `<a href="${dl.macos}" class="btn btn-primary btn-lg"><i data-lucide="download" class="icon"></i> 下载 macOS</a>`
+          : `<span class="btn btn-secondary btn-lg btn-disabled"><i data-lucide="clock" class="icon"></i> 暂未发布</span>`}
+      </div>
+      <div class="platform-card">
+        <h3><i data-lucide="monitor"></i> Windows</h3>
+        <p>适用于 Windows 10 及以上版本，支持本地打印机直连。</p>
+        ${dl.windows
+          ? `<a href="${dl.windows}" class="btn btn-primary btn-lg"><i data-lucide="download" class="icon"></i> 下载 Windows</a>`
+          : `<span class="btn btn-secondary btn-lg btn-disabled"><i data-lucide="clock" class="icon"></i> 暂未发布</span>`}
+      </div>
+      <div class="platform-card">
+        <h3><i data-lucide="globe"></i> Web 版本</h3>
+        <span class="web-badge"><i data-lucide="zap" style="width:11px;height:11px"></i> 无需安装</span>
+        <p>直接在浏览器中使用全功能管理端，推荐 Chrome / Edge。</p>
+        <a href="/app/" class="btn btn-primary btn-lg"><i data-lucide="external-link" class="icon"></i> 打开 Web 版</a>
+      </div>
+    </div>
+    ${renderChangelog(r.changelog)}
+  `;
+  lucide.createIcons();
+}
+
+function renderChangelog(list) {
+  if (!list || list.length === 0) return '';
+  const items = list.map(v => `
+    <li class="changelog-item">
+      <div class="changelog-ver">v${v.version}</div>
+      <div class="changelog-content">
+        <div class="changelog-date">${fmt(v.date)}</div>
+        <ul class="changelog-notes">${(v.items||[]).map(i=>`<li>${i}</li>`).join('')}</ul>
+      </div>
+    </li>
+  `).join('');
+  return `
+    <div class="changelog-section" style="margin-top:48px">
+      <h2 class="changelog-title">更新日志</h2>
+      <ul class="changelog-list">${items}</ul>
+    </div>
+  `;
+}
+
+fetch(`${API_BASE}/public/release`)
+  .then(r => r.json())
+  .then(renderRelease)
+  .catch(err => {
+    document.getElementById('release-container').innerHTML =
+      `<div class="state-error">无法获取版本信息，请稍后再试。<br/><small>${err.message}</small></div>`;
+  });
+</script>
+</body>
+</html>
diff --git a/web/features/approval.html b/web/features/approval.html
new file mode 100644
index 0000000..79bfed8
--- /dev/null
+++ b/web/features/approval.html
@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>审批流程功能 — 岩美酒库管理系统</title>
+<link rel="stylesheet" href="../assets/colors_and_type.css" />
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
+<script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+<style>
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; font-family: var(--font-sans); color: var(--fg-default); background: var(--bg-surface); -webkit-font-smoothing: antialiased; }
+a { color: inherit; text-decoration: none; }
+.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
+.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: background 120ms; text-decoration: none; }
+.btn-primary { background: var(--brand-500); color: #fff; }
+.btn-primary:hover { background: var(--brand-600); }
+.btn-secondary { background: var(--gray-0); color: var(--brand-900); border-color: var(--border-default); }
+.btn-secondary:hover { background: var(--gray-50); }
+.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
+.icon { width: 18px; height: 18px; }
+
+.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
+.nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
+.nav-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--brand-900); }
+.nav-brand img { height: 30px; }
+.nav-links { display: flex; gap: 2px; }
+.nav-links a { padding: 7px 14px; border-radius: var(--radius-md); font-size: 14px; color: var(--gray-700); transition: background 120ms; }
+.nav-links a:hover { background: var(--gray-100); }
+.nav-links a.active { color: var(--brand-500); font-weight: 500; }
+.nav-cta { display: flex; gap: 10px; }
+
+.page-hero { padding: 80px 0 64px; }
+.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--brand-500); text-transform: uppercase; margin-bottom: 12px; }
+.page-hero h1 { font-size: 44px; font-weight: 700; color: var(--brand-900); margin: 0 0 18px; line-height: 1.15; }
+.page-hero .lead { font-size: 18px; line-height: 1.65; color: var(--gray-600); margin: 0 0 36px; max-width: 600px; }
+.hero-actions { display: flex; gap: 12px; }
+
+/* Workflow steps */
+.workflow-section { padding: 72px 0; background: var(--gray-50); }
+.section-title { font-size: 28px; font-weight: 700; color: var(--brand-900); margin: 0 0 14px; }
+.section-sub { font-size: 15px; color: var(--fg-muted); margin: 0 0 48px; line-height: 1.6; max-width: 560px; }
+.steps { display: flex; flex-direction: column; gap: 0; max-width: 800px; }
+.step { display: flex; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--border-subtle); }
+.step:last-child { border-bottom: none; }
+.step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-500); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; }
+.step-content { flex: 1; }
+.step-content h3 { font-size: 16px; font-weight: 600; color: var(--brand-900); margin: 0 0 6px; margin-top: 6px; }
+.step-content p { font-size: 14px; line-height: 1.65; color: var(--fg-muted); margin: 0; }
+.step-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; margin-top: 8px; }
+.step-badge.blue { background: var(--brand-50); color: var(--brand-700); }
+.step-badge.amber { background: var(--warning-50); color: var(--warning-700); }
+.step-badge.green { background: var(--success-50); color: var(--success-700); }
+.step-badge.red { background: var(--danger-50); color: var(--danger-700); }
+
+/* Role matrix */
+.matrix-section { padding: 72px 0; }
+.matrix-table { width: 100%; border-collapse: collapse; margin-top: 32px; }
+.matrix-table th { background: var(--gray-50); border: 1px solid var(--border-default); padding: 10px 16px; text-align: left; font-size: 13px; font-weight: 600; color: var(--gray-700); }
+.matrix-table td { border: 1px solid var(--border-default); padding: 10px 16px; font-size: 13px; vertical-align: middle; }
+.perm-yes { display: inline-flex; align-items: center; gap: 5px; color: var(--success-700); font-weight: 500; }
+.perm-yes i { width: 14px; height: 14px; }
+.perm-no { color: var(--gray-400); }
+
+/* Audit log */
+.audit-section { padding: 72px 0; background: var(--gray-50); }
+.audit-log { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: 10px; overflow: hidden; max-width: 720px; }
+.audit-header { padding: 14px 20px; border-bottom: 1px solid var(--border-default); background: var(--gray-50); display: flex; align-items: center; gap: 8px; }
+.audit-header-title { font-size: 13px; font-weight: 600; color: var(--gray-700); }
+.audit-row { display: flex; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--border-subtle); align-items: flex-start; }
+.audit-row:last-child { border-bottom: none; }
+.audit-time { font-size: 11px; color: var(--fg-subtle); font-family: var(--font-mono); min-width: 80px; padding-top: 2px; }
+.audit-user { font-size: 12px; font-weight: 500; color: var(--brand-700); min-width: 64px; padding-top: 2px; }
+.audit-action { font-size: 13px; color: var(--fg-default); }
+.audit-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
+.dot-green { background: var(--success-500); }
+.dot-amber { background: var(--warning-500); }
+.dot-blue { background: var(--brand-400); }
+.dot-red { background: var(--danger-500); }
+
+.cta-section { padding: 80px 0; text-align: center; border-top: 1px solid var(--border-default); }
+.cta-section h2 { font-size: 32px; font-weight: 700; color: var(--brand-900); margin: 0 0 14px; }
+.cta-section p { font-size: 16px; color: var(--fg-muted); margin: 0 0 32px; }
+.cta-actions { display: flex; justify-content: center; gap: 14px; }
+
+footer { background: var(--gray-50); border-top: 1px solid var(--border-default); padding: 40px 0; }
+.footer-inner { display: flex; align-items: center; justify-content: space-between; }
+.footer-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--brand-900); }
+.footer-brand img { height: 24px; }
+.footer-copy { font-size: 12px; color: var(--fg-subtle); }
+</style>
+</head>
+<body>
+
+<nav class="nav">
+  <div class="nav-inner">
+    <a href="/" class="nav-brand"><img src="../assets/logo-full.svg" alt="岩美" /></a>
+    <div class="nav-links">
+      <a href="/features/inventory.html" class="active">功能</a>
+      <a href="/docs.html">文档</a>
+      <a href="/download.html">下载</a>
+    </div>
+    <div class="nav-cta">
+      <a href="/app/" class="btn btn-primary">进入管理端 <i data-lucide="arrow-right" class="icon"></i></a>
+    </div>
+  </div>
+</nav>
+
+<div class="page-hero">
+  <div class="container">
+    <div class="eyebrow">审批流程</div>
+    <h1>每笔操作都有<br/>经手记录</h1>
+    <p class="lead">岩美的审批机制确保每张入库单和出库单在生效前经过明确的负责人审核，防止未经授权的库存变动。</p>
+    <div class="hero-actions">
+      <a href="/app/" class="btn btn-primary btn-lg">立即体验 <i data-lucide="arrow-right" class="icon"></i></a>
+      <a href="/docs.html#stock-in" class="btn btn-secondary btn-lg">查看文档</a>
+    </div>
+  </div>
+</div>
+
+<!-- Workflow -->
+<section class="workflow-section">
+  <div class="container">
+    <div class="section-title">审批流程步骤</div>
+    <p class="section-sub">以入库单为例，完整的操作流程如下：</p>
+    <div class="steps">
+      <div class="step">
+        <div class="step-num">1</div>
+        <div class="step-content">
+          <h3>创建入库单</h3>
+          <p>库管或采购员录入入库信息：供应商、仓库、商品明细（含批次号、生产日期）。保存为草稿，随时修改。</p>
+          <span class="step-badge blue"><i data-lucide="file-edit" style="width:11px;height:11px"></i> 草稿</span>
+        </div>
+      </div>
+      <div class="step">
+        <div class="step-num">2</div>
+        <div class="step-content">
+          <h3>提交审核</h3>
+          <p>确认无误后提交，单据状态变为「待审核」，管理员收到待办提示。提交后不可编辑，防止信息篡改。</p>
+          <span class="step-badge amber"><i data-lucide="clock" style="width:11px;height:11px"></i> 待审核</span>
+        </div>
+      </div>
+      <div class="step">
+        <div class="step-num">3</div>
+        <div class="step-content">
+          <h3>管理员审批</h3>
+          <p>管理员核实单据后选择「审批通过」或「驳回」。驳回时可填写驳回原因，由经办人修改后重新提交。</p>
+          <div style="display:flex;gap:8px;margin-top:8px;">
+            <span class="step-badge green"><i data-lucide="check" style="width:11px;height:11px"></i> 审批通过</span>
+            <span class="step-badge red"><i data-lucide="x" style="width:11px;height:11px"></i> 已驳回</span>
+          </div>
+        </div>
+      </div>
+      <div class="step">
+        <div class="step-num">4</div>
+        <div class="step-content">
+          <h3>库存自动更新</h3>
+          <p>审批通过后，系统在同一事务中完成库存增加与财务记录写入，保证数据一致性。操作不可逆，留存完整记录。</p>
+          <span class="step-badge green"><i data-lucide="package-check" style="width:11px;height:11px"></i> 已完成</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Role matrix -->
+<section class="matrix-section">
+  <div class="container">
+    <div class="section-title">角色权限矩阵</div>
+    <p class="section-sub">不同角色在审批流程中的权限一览。</p>
+    <table class="matrix-table">
+      <thead>
+        <tr>
+          <th>操作</th>
+          <th>管理员</th>
+          <th>普通用户</th>
+          <th>只读用户</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>创建入库/出库单（草稿）</td>
+          <td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
+          <td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
+          <td><span class="perm-no">禁止</span></td>
+        </tr>
+        <tr>
+          <td>提交审核</td>
+          <td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
+          <td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
+          <td><span class="perm-no">禁止</span></td>
+        </tr>
+        <tr>
+          <td>审批通过 / 驳回</td>
+          <td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
+          <td><span class="perm-no">禁止</span></td>
+          <td><span class="perm-no">禁止</span></td>
+        </tr>
+        <tr>
+          <td>查看单据列表</td>
+          <td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
+          <td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
+          <td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
+        </tr>
+        <tr>
+          <td>用户管理</td>
+          <td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
+          <td><span class="perm-no">禁止</span></td>
+          <td><span class="perm-no">禁止</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</section>
+
+<!-- Audit log -->
+<section class="audit-section">
+  <div class="container">
+    <div class="section-title">完整操作日志</div>
+    <p class="section-sub">每笔库存变动都有对应的操作记录，明确到具体操作人和时间点。</p>
+    <div class="audit-log">
+      <div class="audit-header">
+        <i data-lucide="clock" style="width:14px;height:14px;color:var(--brand-500)"></i>
+        <span class="audit-header-title">库存流水记录 — 麦卡伦 12年</span>
+      </div>
+      <div class="audit-row">
+        <div class="audit-dot dot-green"></div>
+        <div class="audit-time">05-23 14:32</div>
+        <div class="audit-user">王经理</div>
+        <div class="audit-action">审批通过入库单 <strong>RK20250523000001</strong>，库存 +24 瓶（批次 L-2026-01）</div>
+      </div>
+      <div class="audit-row">
+        <div class="audit-dot dot-blue"></div>
+        <div class="audit-time">05-23 11:08</div>
+        <div class="audit-user">李库管</div>
+        <div class="audit-action">提交入库单 <strong>RK20250523000001</strong> 审核，共 24 瓶</div>
+      </div>
+      <div class="audit-row">
+        <div class="audit-dot dot-red"></div>
+        <div class="audit-time">05-22 16:45</div>
+        <div class="audit-user">王经理</div>
+        <div class="audit-action">驳回出库单 <strong>CK20250522000003</strong>，原因：数量与实际不符</div>
+      </div>
+      <div class="audit-row">
+        <div class="audit-dot dot-amber"></div>
+        <div class="audit-time">05-22 15:30</div>
+        <div class="audit-user">张吧台</div>
+        <div class="audit-action">提交出库申请 <strong>CK20250522000003</strong>，领用 12 瓶</div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="cta-section">
+  <div class="container">
+    <h2>查看所有功能</h2>
+    <p>了解库存管理的完整能力，包括批次追溯和盘点功能。</p>
+    <div class="cta-actions">
+      <a href="/features/inventory.html" class="btn btn-primary btn-lg">库存管理功能 <i data-lucide="arrow-right" class="icon"></i></a>
+      <a href="/app/" class="btn btn-secondary btn-lg">进入管理端</a>
+    </div>
+  </div>
+</section>
+
+<footer>
+  <div class="container">
+    <div class="footer-inner">
+      <div class="footer-brand"><img src="../assets/logo-mark.svg" alt="岩美" /> 岩美酒库管理系统</div>
+      <div class="footer-copy">© 2025 岩美。保留所有权利。</div>
+    </div>
+  </div>
+</footer>
+
+<script>lucide.createIcons();</script>
+</body>
+</html>
diff --git a/web/features/inventory.html b/web/features/inventory.html
new file mode 100644
index 0000000..e5512b3
--- /dev/null
+++ b/web/features/inventory.html
@@ -0,0 +1,285 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>库存管理功能 — 岩美酒库管理系统</title>
+<link rel="stylesheet" href="../assets/colors_and_type.css" />
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
+<script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+<style>
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; font-family: var(--font-sans); color: var(--fg-default); background: var(--bg-surface); -webkit-font-smoothing: antialiased; }
+a { color: inherit; text-decoration: none; }
+.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
+.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: background 120ms; text-decoration: none; }
+.btn-primary { background: var(--brand-500); color: #fff; }
+.btn-primary:hover { background: var(--brand-600); }
+.btn-secondary { background: var(--gray-0); color: var(--brand-900); border-color: var(--border-default); }
+.btn-secondary:hover { background: var(--gray-50); }
+.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
+.icon { width: 18px; height: 18px; }
+
+.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
+.nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
+.nav-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--brand-900); }
+.nav-brand img { height: 30px; }
+.nav-links { display: flex; gap: 2px; }
+.nav-links a { padding: 7px 14px; border-radius: var(--radius-md); font-size: 14px; color: var(--gray-700); transition: background 120ms; }
+.nav-links a:hover { background: var(--gray-100); }
+.nav-links a.active { color: var(--brand-500); font-weight: 500; }
+.nav-cta { display: flex; gap: 10px; }
+
+.page-hero { padding: 80px 0 64px; }
+.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--brand-500); text-transform: uppercase; margin-bottom: 12px; }
+.page-hero h1 { font-size: 44px; font-weight: 700; color: var(--brand-900); margin: 0 0 18px; line-height: 1.15; }
+.page-hero .lead { font-size: 18px; line-height: 1.65; color: var(--gray-600); margin: 0 0 36px; max-width: 600px; }
+.hero-actions { display: flex; gap: 12px; }
+
+.feature-list { padding: 72px 0; }
+.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-bottom: 96px; }
+.feature-row:last-child { margin-bottom: 0; }
+.feature-row.reverse { }
+.feature-text .tag { display: inline-block; background: var(--brand-50); color: var(--brand-700); padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; margin-bottom: 14px; }
+.feature-text h2 { font-size: 28px; font-weight: 700; color: var(--brand-900); margin: 0 0 14px; }
+.feature-text p { font-size: 15px; line-height: 1.7; color: var(--fg-muted); margin: 0 0 20px; }
+.feature-text ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
+.feature-text li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--fg-default); }
+.feature-text li i { width: 16px; height: 16px; color: var(--brand-500); flex-shrink: 0; margin-top: 2px; }
+.feature-visual { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg); }
+.visual-header { background: var(--gray-50); border-bottom: 1px solid var(--border-default); padding: 10px 16px; display: flex; align-items: center; gap: 10px; }
+.visual-title { font-size: 13px; font-weight: 600; color: var(--gray-700); }
+.mock-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
+.mock-badge.green { background: var(--success-50); color: var(--success-700); }
+.mock-badge.amber { background: var(--warning-50); color: var(--warning-700); }
+.mock-badge.blue { background: var(--brand-50); color: var(--brand-700); }
+.mock-table-wrap { padding: 0; }
+.mock-thead { display: grid; background: var(--gray-50); border-bottom: 1px solid var(--border-default); padding: 7px 16px; font-size: 11px; color: var(--fg-muted); font-weight: 500; gap: 8px; }
+.mock-row-item { display: grid; border-bottom: 1px solid var(--border-subtle); padding: 9px 16px; font-size: 12px; color: var(--fg-default); gap: 8px; align-items: center; }
+.mock-row-item:last-child { border-bottom: none; }
+.cols-inv { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
+
+.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-default); border-bottom: 1px solid var(--border-default); }
+.stat-block { background: var(--gray-0); padding: 16px 20px; }
+.stat-label { font-size: 11px; color: var(--fg-muted); margin-bottom: 4px; }
+.stat-val { font-size: 22px; font-weight: 700; color: var(--brand-900); font-variant-numeric: tabular-nums; }
+
+.cta-section { padding: 80px 0; background: var(--gray-50); text-align: center; border-top: 1px solid var(--border-default); }
+.cta-section h2 { font-size: 32px; font-weight: 700; color: var(--brand-900); margin: 0 0 14px; }
+.cta-section p { font-size: 16px; color: var(--fg-muted); margin: 0 0 32px; }
+.cta-actions { display: flex; justify-content: center; gap: 14px; }
+
+footer { background: var(--gray-50); border-top: 1px solid var(--border-default); padding: 40px 0; }
+.footer-inner { display: flex; align-items: center; justify-content: space-between; }
+.footer-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--brand-900); }
+.footer-brand img { height: 24px; }
+.footer-copy { font-size: 12px; color: var(--fg-subtle); }
+</style>
+</head>
+<body>
+
+<nav class="nav">
+  <div class="nav-inner">
+    <a href="/" class="nav-brand"><img src="../assets/logo-full.svg" alt="岩美" /></a>
+    <div class="nav-links">
+      <a href="/features/inventory.html" class="active">功能</a>
+      <a href="/docs.html">文档</a>
+      <a href="/download.html">下载</a>
+    </div>
+    <div class="nav-cta">
+      <a href="/app/" class="btn btn-primary">进入管理端 <i data-lucide="arrow-right" class="icon"></i></a>
+    </div>
+  </div>
+</nav>
+
+<div class="page-hero">
+  <div class="container">
+    <div class="eyebrow">库存管理</div>
+    <h1>批次级精准库存，<br/>全程可追溯</h1>
+    <p class="lead">岩美的库存模块以入库批次为最小单元，每瓶酒的来源、成本、去向都有据可查。从采购到销售，一条完整的追溯链条。</p>
+    <div class="hero-actions">
+      <a href="/app/" class="btn btn-primary btn-lg">立即体验 <i data-lucide="arrow-right" class="icon"></i></a>
+      <a href="/docs.html#inventory" class="btn btn-secondary btn-lg">查看文档</a>
+    </div>
+  </div>
+</div>
+
+<section class="feature-list">
+  <div class="container">
+
+    <!-- Feature 1: 实时库存 -->
+    <div class="feature-row">
+      <div class="feature-text">
+        <span class="tag">实时库存</span>
+        <h2>入库即更新，所见即所得</h2>
+        <p>每张入库单审批通过后，库存立即更新。支持多仓库分区管理，库存不足时自动预警。</p>
+        <ul>
+          <li><i data-lucide="check-circle"></i> 多仓库独立计数，库存不串仓</li>
+          <li><i data-lucide="check-circle"></i> 低库存预警，提前安排采购</li>
+          <li><i data-lucide="check-circle"></i> 任意时点的库存快照，支持历史查询</li>
+        </ul>
+      </div>
+      <div class="feature-visual">
+        <div class="visual-header">
+          <i data-lucide="package" style="width:14px;height:14px;color:var(--brand-500)"></i>
+          <span class="visual-title">库存列表</span>
+        </div>
+        <div class="stats-grid">
+          <div class="stat-block"><div class="stat-label">库存 SKU 数</div><div class="stat-val">356</div></div>
+          <div class="stat-block"><div class="stat-label">本月入库量</div><div class="stat-val">1,284</div></div>
+          <div class="stat-block"><div class="stat-label">库存总价值</div><div class="stat-val">¥84.2万</div></div>
+        </div>
+        <div class="mock-table-wrap">
+          <div class="mock-thead cols-inv"><span>商品名称</span><span>批次号</span><span>库存量</span><span>仓库</span><span>状态</span></div>
+          <div class="mock-row-item cols-inv">
+            <span>麦卡伦 12年</span><span style="font-family:var(--font-mono);font-size:11px">L-2026-01</span><span>24 瓶</span><span>主仓</span>
+            <span><span class="mock-badge green">在库</span></span>
+          </div>
+          <div class="mock-row-item cols-inv">
+            <span>芝华士 18年</span><span style="font-family:var(--font-mono);font-size:11px">L-2025-12</span><span>8 瓶</span><span>主仓</span>
+            <span><span class="mock-badge amber">偏低</span></span>
+          </div>
+          <div class="mock-row-item cols-inv">
+            <span>百龄坛特醇</span><span style="font-family:var(--font-mono);font-size:11px">L-2026-02</span><span>36 瓶</span><span>备用库</span>
+            <span><span class="mock-badge green">在库</span></span>
+          </div>
+          <div class="mock-row-item cols-inv">
+            <span>格兰威特 15年</span><span style="font-family:var(--font-mono);font-size:11px">L-2025-11</span><span>0 瓶</span><span>主仓</span>
+            <span><span class="mock-badge" style="background:var(--gray-100);color:var(--gray-500)">已清空</span></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Feature 2: 出入库审批 -->
+    <div class="feature-row reverse">
+      <div class="feature-visual">
+        <div class="visual-header">
+          <i data-lucide="package-plus" style="width:14px;height:14px;color:var(--brand-500)"></i>
+          <span class="visual-title">入库单详情</span>
+        </div>
+        <div style="padding:16px;">
+          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
+            <div>
+              <div style="font-size:11px;color:var(--fg-muted)">单据编号</div>
+              <div style="font-size:14px;font-weight:600;font-family:var(--font-mono)">RK20250523000001</div>
+            </div>
+            <span class="mock-badge blue">待审核</span>
+          </div>
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;">
+            <div style="background:var(--gray-50);border-radius:6px;padding:10px 12px;">
+              <div style="font-size:10px;color:var(--fg-muted)">供应商</div>
+              <div style="font-size:13px;margin-top:2px;">百川酒业有限公司</div>
+            </div>
+            <div style="background:var(--gray-50);border-radius:6px;padding:10px 12px;">
+              <div style="font-size:10px;color:var(--fg-muted)">入库仓库</div>
+              <div style="font-size:13px;margin-top:2px;">主仓</div>
+            </div>
+          </div>
+          <div style="background:var(--gray-50);border:1px solid var(--border-default);border-radius:6px;overflow:hidden;">
+            <div style="display:grid;grid-template-columns:2fr 1fr 1fr;padding:6px 10px;background:var(--gray-100);font-size:10px;color:var(--fg-muted);font-weight:500;gap:8px;">
+              <span>商品</span><span>数量</span><span>单价</span>
+            </div>
+            <div style="display:grid;grid-template-columns:2fr 1fr 1fr;padding:8px 10px;font-size:12px;gap:8px;border-bottom:1px solid var(--border-subtle);">
+              <span>麦卡伦 12年</span><span>24 瓶</span><span>¥980</span>
+            </div>
+            <div style="display:grid;grid-template-columns:2fr 1fr 1fr;padding:8px 10px;font-size:12px;gap:8px;">
+              <span>百龄坛特醇</span><span>48 瓶</span><span>¥280</span>
+            </div>
+          </div>
+          <div style="display:flex;gap:8px;margin-top:14px;">
+            <button style="flex:1;height:32px;background:var(--brand-500);color:#fff;border:none;border-radius:var(--radius-md);font-size:13px;cursor:pointer;">审核通过</button>
+            <button style="height:32px;padding:0 14px;background:var(--gray-0);color:var(--danger-500);border:1px solid var(--danger-500);border-radius:var(--radius-md);font-size:13px;cursor:pointer;">驳回</button>
+          </div>
+        </div>
+      </div>
+      <div class="feature-text">
+        <span class="tag">审批流程</span>
+        <h2>操作留痕，审批有序</h2>
+        <p>入库单与出库单均需经过审批才能更新库存，杜绝随意修改。每张单据记录经办人与审批人，操作全程可追溯。</p>
+        <ul>
+          <li><i data-lucide="check-circle"></i> 草稿 → 待审核 → 已审批完整状态流转</li>
+          <li><i data-lucide="check-circle"></i> 出库前自动校验库存充足性</li>
+          <li><i data-lucide="check-circle"></i> 审批记录不可修改，符合内控要求</li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Feature 3: 盘点 -->
+    <div class="feature-row">
+      <div class="feature-text">
+        <span class="tag">库存盘点</span>
+        <h2>定期盘点，差异一目了然</h2>
+        <p>发起盘点后，系统自动生成基于当前库存的盘点表。录入实盘数量后，系统自动计算差异并归因。</p>
+        <ul>
+          <li><i data-lucide="check-circle"></i> 按仓库或全仓发起盘点</li>
+          <li><i data-lucide="check-circle"></i> 系统数 vs 实盘数，差异高亮显示</li>
+          <li><i data-lucide="check-circle"></i> 盘点结果自动调整库存，生成调账记录</li>
+        </ul>
+      </div>
+      <div class="feature-visual">
+        <div class="visual-header">
+          <i data-lucide="clipboard-list" style="width:14px;height:14px;color:var(--brand-500)"></i>
+          <span class="visual-title">盘点差异报告</span>
+        </div>
+        <div style="padding:14px 16px;">
+          <div style="display:flex;gap:8px;margin-bottom:12px;">
+            <div style="flex:1;background:var(--success-50);border-radius:6px;padding:10px 12px;text-align:center;">
+              <div style="font-size:10px;color:var(--success-700)">盘盈</div>
+              <div style="font-size:20px;font-weight:700;color:var(--success-700)">+6</div>
+            </div>
+            <div style="flex:1;background:var(--danger-50);border-radius:6px;padding:10px 12px;text-align:center;">
+              <div style="font-size:10px;color:var(--danger-700)">盘亏</div>
+              <div style="font-size:20px;font-weight:700;color:var(--danger-700)">-14</div>
+            </div>
+            <div style="flex:1;background:var(--gray-50);border-radius:6px;padding:10px 12px;text-align:center;">
+              <div style="font-size:10px;color:var(--fg-muted)">无差异</div>
+              <div style="font-size:20px;font-weight:700;color:var(--brand-900)">284</div>
+            </div>
+          </div>
+          <div style="background:var(--gray-50);border:1px solid var(--border-default);border-radius:6px;overflow:hidden;">
+            <div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr;padding:6px 10px;background:var(--gray-100);font-size:10px;color:var(--fg-muted);font-weight:500;gap:8px;">
+              <span>商品</span><span>系统数</span><span>实盘数</span><span>差异</span>
+            </div>
+            <div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr;padding:8px 10px;font-size:12px;gap:8px;border-bottom:1px solid var(--border-subtle);">
+              <span>麦卡伦 12年</span><span>24</span><span>22</span><span style="color:var(--danger-500)">-2</span>
+            </div>
+            <div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr;padding:8px 10px;font-size:12px;gap:8px;border-bottom:1px solid var(--border-subtle);">
+              <span>野格利口酒</span><span>48</span><span>51</span><span style="color:var(--success-500)">+3</span>
+            </div>
+            <div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr;padding:8px 10px;font-size:12px;gap:8px;">
+              <span>百龄坛特醇</span><span>36</span><span>36</span><span style="color:var(--fg-muted)">—</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</section>
+
+<section class="cta-section">
+  <div class="container">
+    <h2>准备好了解更多功能？</h2>
+    <p>查看审批流程功能，或直接进入管理端体验。</p>
+    <div class="cta-actions">
+      <a href="/features/approval.html" class="btn btn-primary btn-lg">审批流程功能 <i data-lucide="arrow-right" class="icon"></i></a>
+      <a href="/app/" class="btn btn-secondary btn-lg">进入管理端</a>
+    </div>
+  </div>
+</section>
+
+<footer>
+  <div class="container">
+    <div class="footer-inner">
+      <div class="footer-brand"><img src="../assets/logo-mark.svg" alt="岩美" /> 岩美酒库管理系统</div>
+      <div class="footer-copy">© 2025 岩美。保留所有权利。</div>
+    </div>
+  </div>
+</footer>
+
+<script>lucide.createIcons();</script>
+</body>
+</html>
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..6ec5cf2
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,1024 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>岩美 — 酒行与酒店饮品库存管理平台</title>
+<meta name="description" content="岩美酒库管理系统，为酒行与酒店设计的专业库存、采购、出库一体化管理平台。" />
+<link rel="stylesheet" href="assets/colors_and_type.css" />
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+<script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+<style>
+* { box-sizing: border-box; }
+html, body {
+  margin: 0; padding: 0;
+  font-family: var(--font-sans);
+  color: var(--fg-default);
+  background: var(--bg-surface);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "tnum" 1;
+}
+img, svg { display: block; max-width: 100%; }
+a { color: inherit; text-decoration: none; }
+button { font-family: inherit; cursor: pointer; }
+
+.btn {
+  display: inline-flex; align-items: center; gap: 8px;
+  height: 40px; padding: 0 18px;
+  border-radius: var(--radius-md);
+  font-size: var(--text-md); font-weight: 500;
+  border: 1px solid transparent;
+  transition: background var(--duration-fast) var(--ease-standard),
+              border-color var(--duration-fast) var(--ease-standard);
+  white-space: nowrap; text-decoration: none; cursor: pointer;
+}
+.btn-primary { background: var(--brand-500); color: #fff; }
+.btn-primary:hover { background: var(--brand-600); }
+.btn-primary:active { background: var(--brand-700); }
+.btn-secondary { background: var(--gray-0); color: var(--brand-900); border-color: var(--border-default); }
+.btn-secondary:hover { background: var(--gray-50); border-color: var(--border-strong); }
+.btn-ghost { background: transparent; color: var(--fg-default); }
+.btn-ghost:hover { background: var(--gray-100); }
+.btn-lg { height: 48px; padding: 0 24px; font-size: var(--text-lg); }
+.btn .icon { width: 18px; height: 18px; }
+
+.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
+.section { padding: 96px 0; }
+.eyebrow {
+  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em;
+  color: var(--brand-500); text-transform: uppercase; margin: 0 0 12px;
+}
+.section-title {
+  font-size: var(--text-4xl); font-weight: 600; line-height: 1.18;
+  letter-spacing: var(--tracking-cn-display);
+  color: var(--brand-900); margin: 0 0 16px; max-width: 720px;
+}
+.section-sub {
+  font-size: var(--text-lg); line-height: 1.6;
+  color: var(--fg-muted); margin: 0; max-width: 640px;
+}
+
+/* NAV */
+.topnav {
+  position: sticky; top: 0; z-index: 50;
+  background: rgba(255,255,255,0.85);
+  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.topnav-inner {
+  height: 64px; display: flex; align-items: center; justify-content: space-between;
+  max-width: 1440px; margin: 0 auto; padding: 0 32px;
+}
+.topnav-brand { display: flex; align-items: center; gap: 10px; }
+.topnav-brand img { height: 32px; }
+.topnav-links {
+  display: flex; align-items: center; gap: 4px;
+  font-size: var(--text-md); color: var(--gray-700);
+}
+.topnav-links a {
+  padding: 8px 14px; border-radius: var(--radius-md);
+  transition: background var(--duration-fast) var(--ease-standard);
+}
+.topnav-links a:hover { background: var(--gray-100); color: var(--brand-900); }
+.topnav-cta { display: flex; gap: 10px; align-items: center; }
+
+/* HERO */
+.hero {
+  position: relative; overflow: hidden;
+  padding: 88px 0 64px;
+  background:
+    radial-gradient(900px 480px at 78% 12%, rgba(37,99,172,0.06), transparent 60%),
+    linear-gradient(180deg, #FBFCFD 0%, #FFFFFF 80%);
+}
+.hero-inner {
+  display: grid; grid-template-columns: 1.05fr 1.25fr;
+  gap: 64px; align-items: center;
+}
+.hero-pill {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 6px 14px 6px 8px;
+  background: var(--gray-0); border: 1px solid var(--border-default);
+  border-radius: var(--radius-pill); font-size: var(--text-sm);
+  color: var(--gray-700); margin-bottom: 24px;
+}
+.hero-pill .badge {
+  background: var(--brand-50); color: var(--brand-700);
+  padding: 2px 8px; border-radius: var(--radius-pill);
+  font-size: var(--text-xs); font-weight: 600;
+}
+.hero h1 {
+  font-size: 52px; line-height: 1.12;
+  letter-spacing: var(--tracking-cn-display);
+  color: var(--brand-900); font-weight: 700; margin: 0 0 20px;
+}
+.hero h1 em {
+  font-style: normal; color: var(--brand-500); position: relative;
+}
+.hero h1 em::after {
+  content: ''; position: absolute;
+  left: 0; right: 0; bottom: 4px; height: 10px;
+  background: var(--brand-100); z-index: -1; border-radius: 2px;
+}
+.hero p.lead { font-size: var(--text-xl); line-height: 1.6; color: var(--gray-600); margin: 0 0 32px; }
+.hero-actions { display: flex; gap: 12px; margin-bottom: 28px; }
+.hero-mini { display: flex; align-items: center; gap: 18px; color: var(--fg-muted); font-size: var(--text-sm); }
+.hero-mini-item { display: flex; align-items: center; gap: 6px; }
+.hero-mini-item .icon { width: 14px; height: 14px; color: var(--success-500); }
+
+.hero-preview { position: relative; }
+.preview-shell {
+  background: var(--gray-0); border: 1px solid var(--border-default);
+  border-radius: 14px; box-shadow: var(--shadow-xl); overflow: hidden;
+}
+.preview-titlebar {
+  height: 36px; display: flex; align-items: center; padding: 0 14px;
+  background: var(--gray-50); border-bottom: 1px solid var(--border-subtle); gap: 8px;
+}
+.preview-dots { display: flex; gap: 6px; }
+.preview-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-300); }
+.preview-url { flex: 1; text-align: center; font-size: var(--text-xs); color: var(--fg-subtle); font-family: var(--font-mono); }
+
+.mock-app { display: grid; grid-template-columns: 180px 1fr; height: 540px; }
+.mock-sidebar { background: var(--brand-900); color: #DCE2EB; padding: 20px 12px; font-size: var(--text-sm); }
+.mock-sidebar-brand { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: #fff; padding: 0 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 12px; }
+.mock-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); margin-bottom: 2px; color: #ADC9EA; font-size: 13px; }
+.mock-nav-item .icon { width: 16px; height: 16px; }
+.mock-nav-item.active { background: rgba(255,255,255,0.08); color: #fff; }
+.mock-main { background: var(--gray-50); padding: 20px; overflow: hidden; }
+.mock-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
+.mock-tabs { display: flex; gap: 4px; background: var(--gray-0); padding: 4px; border-radius: var(--radius-md); border: 1px solid var(--border-default); }
+.mock-tab { padding: 6px 14px; font-size: 13px; color: var(--gray-600); border-radius: var(--radius-sm); }
+.mock-tab.active { background: var(--brand-500); color: #fff; font-weight: 500; }
+.mock-actions { display: flex; gap: 8px; }
+.mock-mini-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: 12px; color: var(--gray-700); }
+.mock-mini-btn .icon { width: 13px; height: 13px; }
+.mock-mini-btn.primary { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }
+.mock-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
+.mock-stat { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 14px; }
+.mock-stat-label { font-size: 11px; color: var(--fg-muted); margin-bottom: 4px; }
+.mock-stat-value { font-size: 20px; font-weight: 600; color: var(--brand-900); font-variant-numeric: tabular-nums; }
+.mock-stat-delta { font-size: 11px; margin-top: 2px; font-variant-numeric: tabular-nums; }
+.mock-stat-delta.up { color: var(--success-500); }
+.mock-stat-delta.down { color: var(--danger-500); }
+.mock-table-card { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
+.mock-table-head { display: grid; grid-template-columns: 110px 1fr 60px 70px 80px 70px; padding: 10px 14px; background: var(--gray-50); border-bottom: 1px solid var(--border-subtle); font-size: 11px; color: var(--fg-muted); font-weight: 500; }
+.mock-table-row { display: grid; grid-template-columns: 110px 1fr 60px 70px 80px 70px; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); font-size: 12px; color: var(--gray-800); align-items: center; font-variant-numeric: tabular-nums; }
+.mock-table-row:last-child { border-bottom: none; }
+.mock-table-row .sku { font-family: var(--font-mono); color: var(--brand-500); font-size: 11px; }
+.mock-pill { display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 500; }
+.mock-pill.ok { background: var(--success-50); color: var(--success-700); }
+.mock-pill.warn { background: var(--warning-50); color: var(--warning-700); }
+.mock-pill.pending { background: var(--info-50); color: var(--info-700); }
+
+.hero-toast {
+  position: absolute; bottom: -28px; right: -36px;
+  background: var(--gray-0); border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
+  padding: 14px 16px; width: 260px;
+  display: flex; gap: 12px; align-items: flex-start; z-index: 2;
+}
+.hero-toast-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--success-50); display: grid; place-items: center; flex-shrink: 0; }
+.hero-toast-icon .icon { color: var(--success-500); }
+.hero-toast-title { font-size: 13px; font-weight: 600; color: var(--gray-900); margin-bottom: 2px; }
+.hero-toast-body { font-size: 12px; color: var(--fg-muted); line-height: 1.45; }
+
+/* TRUST STRIP */
+.trust { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: var(--gray-25); padding: 32px 0; }
+.trust-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; align-items: center; gap: 32px; }
+.trust-label { font-size: var(--text-sm); color: var(--fg-muted); }
+.trust-stat-num { font-size: 28px; font-weight: 600; color: var(--brand-900); font-variant-numeric: tabular-nums; line-height: 1; }
+.trust-stat-num sup { font-size: 14px; color: var(--brand-500); margin-left: 2px; font-weight: 500; }
+.trust-stat-label { font-size: var(--text-xs); color: var(--fg-muted); margin-top: 4px; }
+
+/* MODULES */
+.modules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
+.module-card {
+  background: var(--gray-0); border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg); padding: 24px;
+  transition: border-color var(--duration-base) var(--ease-standard),
+              box-shadow var(--duration-base) var(--ease-standard);
+}
+.module-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
+.module-card.feature-card { grid-column: span 2; background: linear-gradient(180deg, #FBFCFD 0%, #FFFFFF 100%); }
+.module-card.feature-card .module-icon { background: var(--brand-500); color: #fff; }
+.module-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-50); color: var(--brand-500); display: grid; place-items: center; margin-bottom: 16px; }
+.module-icon .icon { width: 20px; height: 20px; }
+.module-card h3 { font-size: var(--text-xl); font-weight: 600; color: var(--brand-900); margin: 0 0 6px; letter-spacing: 0.02em; }
+.module-card p { font-size: var(--text-sm); line-height: 1.6; color: var(--fg-muted); margin: 0; }
+.module-card ul { margin: 16px 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--gray-700); }
+.module-card ul li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border-subtle); }
+.module-card ul li:first-child { border-top: none; }
+.module-card ul li .icon { width: 14px; height: 14px; color: var(--brand-500); }
+
+/* WORKFLOW */
+.workflow-section { background: var(--gray-25); }
+.workflow-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; margin-top: 48px; }
+.workflow-text h3 { font-size: var(--text-2xl); font-weight: 600; color: var(--brand-900); margin: 0 0 12px; }
+.workflow-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
+.wf-step { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; }
+.wf-num { width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--brand-50); color: var(--brand-700); display: grid; place-items: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.wf-step.active .wf-num { background: var(--brand-500); color: #fff; }
+.wf-step h4 { margin: 4px 0 4px; font-size: var(--text-md); font-weight: 600; color: var(--gray-900); }
+.wf-step p { margin: 0; font-size: var(--text-sm); color: var(--fg-muted); line-height: 1.55; }
+.flow-vis { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 28px; }
+.flow-doc { background: var(--gray-50); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 14px; }
+.flow-doc-head { display: flex; justify-content: space-between; margin-bottom: 12px; }
+.flow-doc-id { font-family: var(--font-mono); font-size: 12px; color: var(--brand-500); }
+.flow-doc-status { font-size: 11px; font-weight: 500; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--success-50); color: var(--success-700); }
+.flow-row { display: grid; grid-template-columns: 70px 1fr 70px 70px; gap: 8px; font-size: 12px; padding: 6px 0; color: var(--gray-700); font-variant-numeric: tabular-nums; }
+.flow-row.head { font-weight: 500; color: var(--fg-muted); font-size: 11px; padding: 0 0 6px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; }
+.flow-row.foot { border-top: 1px solid var(--border-default); margin-top: 6px; padding-top: 8px; font-weight: 600; color: var(--brand-900); }
+.flow-arrow { display: flex; align-items: center; justify-content: center; padding: 12px 0; color: var(--gray-400); }
+.flow-arrow .icon { width: 18px; height: 18px; }
+.flow-effects { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+.flow-effect { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 14px; }
+.flow-effect-label { font-size: 11px; color: var(--fg-muted); display: flex; align-items: center; gap: 6px; }
+.flow-effect-label .icon { width: 12px; height: 12px; color: var(--success-500); }
+.flow-effect-val { font-size: 18px; font-weight: 600; color: var(--brand-900); margin-top: 4px; font-variant-numeric: tabular-nums; }
+
+/* PLATFORMS */
+.platforms-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 48px; }
+.platform-card { text-align: center; background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 24px 16px; transition: border-color var(--duration-base) var(--ease-standard); }
+.platform-card:hover { border-color: var(--brand-300); }
+.platform-card .icon { width: 28px; height: 28px; margin: 0 auto 12px; color: var(--brand-500); }
+.platform-card h4 { margin: 0 0 4px; font-size: var(--text-md); font-weight: 600; color: var(--brand-900); }
+.platform-card p { margin: 0; font-size: var(--text-xs); color: var(--fg-muted); }
+.platforms-visual {
+  margin-top: 56px; background: var(--brand-900); border-radius: var(--radius-xl);
+  padding: 56px 48px; position: relative; overflow: hidden; color: #fff;
+  display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center;
+}
+.platforms-visual::before {
+  content: ''; position: absolute; inset: 0;
+  background: radial-gradient(600px 320px at 80% 10%, rgba(79,134,198,0.20), transparent 60%);
+  pointer-events: none;
+}
+.pv-text h3 { font-size: 32px; font-weight: 600; letter-spacing: var(--tracking-cn-display); margin: 0 0 16px; color: #fff; }
+.pv-text p { font-size: var(--text-lg); color: #ADC9EA; margin: 0 0 24px; line-height: 1.6; }
+.pv-feature-list { display: flex; flex-direction: column; gap: 10px; }
+.pv-feature { display: flex; align-items: center; gap: 10px; font-size: var(--text-md); color: #DCE2EB; }
+.pv-feature .icon { width: 16px; height: 16px; color: var(--brand-300); }
+.device-stack { position: relative; height: 320px; z-index: 1; }
+.device-laptop { position: absolute; width: 100%; bottom: 0; background: #0A1F3B; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px 8px 4px 4px; box-shadow: var(--shadow-xl); }
+.device-laptop::after { content: ''; position: absolute; bottom: -10px; left: -16px; right: -16px; height: 10px; background: linear-gradient(180deg, #232934 0%, #141821 100%); border-radius: 0 0 8px 8px; }
+.device-laptop-screen { background: var(--gray-50); margin: 8px; height: 200px; border-radius: 4px; padding: 10px; overflow: hidden; }
+.dlmr { height: 12px; background: var(--gray-200); border-radius: 2px; margin-bottom: 6px; }
+.dlmr.short { width: 60%; }
+.dlmr.brand { background: var(--brand-300); width: 30%; }
+.device-phone { position: absolute; right: 32px; bottom: -8px; width: 110px; height: 220px; background: #0A1F3B; border: 2px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 4px; box-shadow: var(--shadow-xl); z-index: 2; }
+.device-phone-screen { background: var(--gray-50); border-radius: 12px; height: 100%; padding: 8px; overflow: hidden; }
+
+/* REPORTS */
+.reports-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; margin-top: 48px; }
+.report-card { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 24px; }
+.report-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
+.report-title { font-size: var(--text-md); font-weight: 600; color: var(--gray-900); margin: 0; }
+.report-sub { font-size: var(--text-xs); color: var(--fg-muted); margin-top: 2px; }
+.report-tabs { display: flex; gap: 4px; }
+.report-tab { padding: 4px 10px; font-size: 11px; color: var(--fg-muted); border-radius: var(--radius-sm); cursor: pointer; }
+.report-tab.active { background: var(--gray-100); color: var(--gray-900); }
+.chart { position: relative; height: 200px; margin: 8px 0 0; }
+.chart svg { width: 100%; height: 100%; }
+.chart-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; border-top: 1px solid var(--border-subtle); padding-top: 18px; margin-top: 8px; }
+.chart-stat-label { font-size: 11px; color: var(--fg-muted); margin-bottom: 4px; }
+.chart-stat-val { font-size: var(--text-lg); font-weight: 600; color: var(--brand-900); font-variant-numeric: tabular-nums; }
+.chart-stat-val small { font-size: var(--text-xs); color: var(--success-500); margin-left: 4px; font-weight: 500; }
+.insights-features { display: flex; flex-direction: column; gap: 24px; }
+.insight-item { display: grid; grid-template-columns: 36px 1fr; gap: 16px; }
+.insight-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--brand-50); display: grid; place-items: center; color: var(--brand-500); }
+.insight-icon .icon { width: 18px; height: 18px; }
+.insight-item h4 { margin: 0 0 4px; font-size: var(--text-lg); font-weight: 600; color: var(--brand-900); }
+.insight-item p { margin: 0; font-size: var(--text-sm); color: var(--fg-muted); line-height: 1.6; }
+
+/* SECURITY */
+.security-section { background: var(--gray-25); }
+.security-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
+.security-card { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 24px; }
+.security-card .icon { width: 22px; height: 22px; color: var(--brand-500); margin-bottom: 14px; }
+.security-card h4 { margin: 0 0 6px; font-size: var(--text-lg); font-weight: 600; color: var(--brand-900); }
+.security-card p { margin: 0; font-size: var(--text-sm); color: var(--fg-muted); line-height: 1.55; }
+.roles-table { margin-top: 32px; background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
+.roles-row { display: grid; grid-template-columns: 180px 1fr 80px 80px 80px 80px; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
+.roles-row:last-child { border-bottom: none; }
+.roles-row.head { background: var(--gray-50); color: var(--fg-muted); font-size: 12px; font-weight: 500; }
+.roles-row .role-name { font-weight: 600; color: var(--brand-900); }
+.roles-row .role-desc { color: var(--fg-muted); font-size: 13px; }
+.role-check { text-align: center; }
+.role-check .icon { width: 16px; height: 16px; color: var(--success-500); display: inline-block; }
+.role-check.no .icon { color: var(--gray-300); }
+
+/* FAQ */
+.faq-list { margin-top: 48px; max-width: 880px; }
+.faq-item { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden; }
+.faq-q { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; cursor: pointer; font-size: var(--text-lg); font-weight: 500; color: var(--brand-900); list-style: none; }
+.faq-q::-webkit-details-marker { display: none; }
+.faq-q .icon { width: 18px; height: 18px; color: var(--fg-muted); transition: transform var(--duration-base) var(--ease-standard); }
+details[open] .faq-q .icon { transform: rotate(45deg); }
+.faq-a { padding: 0 24px 22px; font-size: var(--text-md); color: var(--fg-muted); line-height: 1.7; }
+
+/* CTA BANNER */
+.cta-banner {
+  background:
+    radial-gradient(800px 360px at 80% 30%, rgba(37,99,172,0.40), transparent 60%),
+    linear-gradient(135deg, #0A1F3B 0%, #15407D 100%);
+  color: #fff; border-radius: var(--radius-xl); padding: 64px 56px;
+  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center;
+  margin: 96px 0;
+}
+.cta-banner h2 { font-size: 36px; font-weight: 600; letter-spacing: var(--tracking-cn-display); margin: 0 0 16px; color: #fff; line-height: 1.25; }
+.cta-banner p { font-size: var(--text-lg); color: #ADC9EA; margin: 0; line-height: 1.6; }
+.cta-banner-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
+.cta-banner .btn-primary { background: #fff; color: var(--brand-700); }
+.cta-banner .btn-primary:hover { background: #DCE2EB; }
+.cta-banner .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.30); }
+.cta-banner .btn-secondary:hover { background: rgba(255,255,255,0.10); }
+.cta-banner-note { font-size: var(--text-sm); color: #99A3B3; }
+
+/* FOOTER */
+footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle); padding: 64px 0 32px; color: var(--fg-muted); font-size: var(--text-sm); }
+.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 48px; margin-bottom: 48px; }
+.footer-brand img { height: 32px; margin-bottom: 16px; }
+.footer-brand p { margin: 0 0 16px; max-width: 320px; line-height: 1.6; color: var(--fg-muted); }
+.footer-contact { font-size: var(--text-sm); color: var(--gray-700); line-height: 1.8; }
+.footer-col h5 { font-size: var(--text-xs); font-weight: 600; color: var(--brand-900); letter-spacing: 0.06em; margin: 0 0 16px; text-transform: uppercase; }
+.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
+.footer-col li a { color: var(--gray-600); }
+.footer-col li a:hover { color: var(--brand-500); }
+.footer-bottom { border-top: 1px solid var(--border-subtle); padding-top: 24px; display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--fg-subtle); }
+
+@media (max-width: 1024px) {
+  .hero-inner, .workflow-grid, .reports-grid, .platforms-visual, .cta-banner { grid-template-columns: 1fr; }
+  .modules-grid, .security-grid, .platforms-grid { grid-template-columns: repeat(2, 1fr); }
+  .module-card.feature-card { grid-column: span 2; }
+  .footer-grid { grid-template-columns: 1fr 1fr; }
+  .hero h1 { font-size: 40px; }
+  .trust-grid { grid-template-columns: 1fr 1fr; }
+  .roles-row { grid-template-columns: 140px 1fr repeat(4, 60px); padding: 12px 16px; }
+}
+</style>
+</head>
+<body>
+
+<!-- NAV -->
+<nav class="topnav">
+  <div class="topnav-inner">
+    <a href="/" class="topnav-brand">
+      <img src="assets/logo-full.svg" alt="岩美" />
+    </a>
+    <div class="topnav-links">
+      <a href="#modules">产品</a>
+      <a href="/download.html">下载</a>
+      <a href="/docs.html">文档</a>
+    </div>
+    <div class="topnav-cta">
+      <a href="/app/" class="btn btn-primary">进入管理端 <i data-lucide="arrow-right" class="icon"></i></a>
+    </div>
+  </div>
+</nav>
+
+<!-- HERO -->
+<section class="hero">
+  <div class="container hero-inner">
+    <div>
+      <div class="hero-pill">
+        <span class="badge">专业版</span>
+        <span>适用于酒行与酒店的饮品库存管理</span>
+      </div>
+      <h1>从入库到出库，<br/><em>一套系统</em>管到底。</h1>
+      <p class="lead">
+        岩美酒库管理系统，为酒行与酒店设计的库存、审核、财务一体化平台。审核驱动业务流，库存与账款自动同步，五端无缝接入。
+      </p>
+      <div class="hero-actions">
+        <a href="/app/" class="btn btn-primary btn-lg">
+          进入管理端
+          <i data-lucide="arrow-right" class="icon"></i>
+        </a>
+        <a href="/download.html" class="btn btn-secondary btn-lg">
+          <i data-lucide="download" class="icon"></i>
+          下载客户端
+        </a>
+      </div>
+      <div class="hero-mini">
+        <div class="hero-mini-item"><i data-lucide="check" class="icon"></i>多仓库多角色</div>
+        <div class="hero-mini-item"><i data-lucide="check" class="icon"></i>入库出库审批留痕</div>
+        <div class="hero-mini-item"><i data-lucide="check" class="icon"></i>扫码防伪溯源</div>
+      </div>
+    </div>
+
+    <div class="hero-preview">
+      <div class="preview-shell">
+        <div class="preview-titlebar">
+          <div class="preview-dots"><span></span><span></span><span></span></div>
+          <div class="preview-url">jiu.51yanmei.com/app</div>
+        </div>
+        <div class="mock-app">
+          <aside class="mock-sidebar">
+            <div class="mock-sidebar-brand">岩美酒库</div>
+            <div class="mock-nav-item"><i data-lucide="package-plus" class="icon"></i>入库管理</div>
+            <div class="mock-nav-item"><i data-lucide="package-minus" class="icon"></i>出库管理</div>
+            <div class="mock-nav-item active"><i data-lucide="package" class="icon"></i>库存管理</div>
+            <div class="mock-nav-item"><i data-lucide="wallet" class="icon"></i>财务管理</div>
+            <div class="mock-nav-item"><i data-lucide="truck" class="icon"></i>往来单位</div>
+            <div class="mock-nav-item"><i data-lucide="database" class="icon"></i>基础数据</div>
+            <div class="mock-nav-item"><i data-lucide="settings" class="icon"></i>系统设置</div>
+          </aside>
+          <main class="mock-main">
+            <div class="mock-topbar">
+              <div class="mock-tabs">
+                <div class="mock-tab active">库存列表</div>
+                <div class="mock-tab">库存盘点</div>
+                <div class="mock-tab">库存流水</div>
+              </div>
+              <div class="mock-actions">
+                <div class="mock-mini-btn"><i data-lucide="download" class="icon"></i>导出</div>
+                <div class="mock-mini-btn primary"><i data-lucide="clipboard-list" class="icon"></i>新建盘点</div>
+              </div>
+            </div>
+            <div class="mock-stats">
+              <div class="mock-stat">
+                <div class="mock-stat-label">库存总量</div>
+                <div class="mock-stat-value">2,816</div>
+                <div class="mock-stat-delta up">↑ 4.2% 较上月</div>
+              </div>
+              <div class="mock-stat">
+                <div class="mock-stat-label">库存金额</div>
+                <div class="mock-stat-value">¥486,290</div>
+                <div class="mock-stat-delta up">↑ 2.8% 较上月</div>
+              </div>
+              <div class="mock-stat">
+                <div class="mock-stat-label">本月入库</div>
+                <div class="mock-stat-value">128 单</div>
+                <div class="mock-stat-delta up">↑ 12 单</div>
+              </div>
+              <div class="mock-stat">
+                <div class="mock-stat-label">预警 SKU</div>
+                <div class="mock-stat-value" style="color:var(--warning-500)">7</div>
+                <div class="mock-stat-delta down">↓ 库存不足</div>
+              </div>
+            </div>
+            <div class="mock-table-card">
+              <div class="mock-table-head">
+                <div>SKU</div><div>商品名称</div><div>仓库</div><div>库存</div><div>金额</div><div>状态</div>
+              </div>
+              <div class="mock-table-row">
+                <div class="sku">WT-501-006</div><div>茅台飞天 · 500ml×6</div><div>A 仓</div><div>148</div><div>¥298,400</div><div><span class="mock-pill ok">充足</span></div>
+              </div>
+              <div class="mock-table-row">
+                <div class="sku">XJ-468-001</div><div>五粮液第八代 · 500ml</div><div>A 仓</div><div>92</div><div>¥92,920</div><div><span class="mock-pill ok">充足</span></div>
+              </div>
+              <div class="mock-table-row">
+                <div class="sku">XJ-330-024</div><div>剑南春水晶剑 · 500ml×6</div><div>B 仓</div><div style="color:var(--warning-700);font-weight:500">12</div><div>¥4,560</div><div><span class="mock-pill warn">偏低</span></div>
+              </div>
+              <div class="mock-table-row">
+                <div class="sku">PJ-750-012</div><div>拉菲传奇波尔多 · 750ml</div><div>A 仓</div><div>64</div><div>¥18,560</div><div><span class="mock-pill ok">充足</span></div>
+              </div>
+              <div class="mock-table-row">
+                <div class="sku">PJ-700-008</div><div>轩尼诗 VSOP · 700ml</div><div>B 仓</div><div>38</div><div>¥22,420</div><div><span class="mock-pill pending">入库中</span></div>
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+
+      <div class="hero-toast">
+        <div class="hero-toast-icon">
+          <i data-lucide="check-circle-2" class="icon"></i>
+        </div>
+        <div>
+          <div class="hero-toast-title">入库单已审批</div>
+          <div class="hero-toast-body">RK20260523000007 库存 +24 瓶<br/>生成应付 ¥48,400</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- TRUST STRIP -->
+<section class="trust">
+  <div class="container">
+    <div class="trust-grid">
+      <div class="trust-label">专为酒水经营场所设计</div>
+      <div>
+        <div class="trust-stat-num">7<sup>大</sup></div>
+        <div class="trust-stat-label">核心业务模块</div>
+      </div>
+      <div>
+        <div class="trust-stat-num">5<sup>端</sup></div>
+        <div class="trust-stat-label">Web / iOS / Android / Win / Mac</div>
+      </div>
+      <div>
+        <div class="trust-stat-num">4<sup>级</sup></div>
+        <div class="trust-stat-label">角色权限控制</div>
+      </div>
+      <div>
+        <div class="trust-stat-num">99.9<sup>%</sup></div>
+        <div class="trust-stat-label">系统可用性</div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- MODULES -->
+<section class="section" id="modules">
+  <div class="container">
+    <p class="eyebrow">核心模块</p>
+    <h2 class="section-title">七大模块，覆盖酒水经营全流程</h2>
+    <p class="section-sub">从商品建档到入库出库、从财务结算到数据导入，岩美一站式承载日常运营。</p>
+
+    <div class="modules-grid">
+      <div class="module-card feature-card">
+        <div class="module-icon"><i data-lucide="package-plus" class="icon"></i></div>
+        <h3>入库管理</h3>
+        <p>审核驱动的入库流程。草稿、提交、审批、库存更新、应付账款生成 — 一气呵成。</p>
+        <ul>
+          <li><i data-lucide="check" class="icon"></i>多商品行明细录入，自动算金额</li>
+          <li><i data-lucide="check" class="icon"></i>审批通过即同步库存与应付账款</li>
+          <li><i data-lucide="check" class="icon"></i>支持单据打印、商品标签打印</li>
+          <li><i data-lucide="check" class="icon"></i>批次号追踪，生产日期可追溯</li>
+        </ul>
+      </div>
+      <div class="module-card">
+        <div class="module-icon"><i data-lucide="package-minus" class="icon"></i></div>
+        <h3>出库管理</h3>
+        <p>出库前自动校验库存，审批通过即扣减库存并生成应收。库存不足，单据无法通过。</p>
+      </div>
+      <div class="module-card">
+        <div class="module-icon"><i data-lucide="package" class="icon"></i></div>
+        <h3>库存管理</h3>
+        <p>实时查询每个 SKU 的库存数量、所在仓库、批次。支持全仓盘点与库存流水。</p>
+      </div>
+      <div class="module-card">
+        <div class="module-icon"><i data-lucide="wallet" class="icon"></i></div>
+        <h3>财务管理</h3>
+        <p>审批同步生成应付应收，月度汇总。结清一键完成，可按往来单位筛选导出。</p>
+      </div>
+      <div class="module-card">
+        <div class="module-icon"><i data-lucide="truck" class="icon"></i></div>
+        <h3>往来单位</h3>
+        <p>供应商与客户统一档案管理。卡号、初始余额、联系信息集中维护。</p>
+      </div>
+      <div class="module-card">
+        <div class="module-icon"><i data-lucide="database" class="icon"></i></div>
+        <h3>基础数据</h3>
+        <p>商品名称、系列、规格三级字典，单品数量配置。先建字典，后录单据。</p>
+      </div>
+      <div class="module-card">
+        <div class="module-icon"><i data-lucide="settings" class="icon"></i></div>
+        <h3>系统设置</h3>
+        <p>用户与权限、多仓库、编号规则、参数与数据导入 — 自助配置，无需开发。</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- WORKFLOW -->
+<section class="section workflow-section" id="workflow">
+  <div class="container">
+    <p class="eyebrow">业务流程</p>
+    <h2 class="section-title">审核驱动业务流，每一笔交易都可追溯</h2>
+    <p class="section-sub">从单据录入到库存变动、账款生成，每一步都有清晰状态与经办人记录。</p>
+
+    <div class="workflow-grid">
+      <div class="workflow-text">
+        <h3>一张入库单的完整生命周期</h3>
+        <div class="workflow-steps">
+          <div class="wf-step">
+            <div class="wf-num">1</div>
+            <div>
+              <h4>录入草稿</h4>
+              <p>选择仓库、供应商、入库日期，逐行录入商品明细。系统自动算金额，可随时保存草稿。</p>
+            </div>
+          </div>
+          <div class="wf-step">
+            <div class="wf-num">2</div>
+            <div>
+              <h4>提交审核</h4>
+              <p>确认无误后提交。单据进入「待审核」，此时不可再编辑，保证数据完整。</p>
+            </div>
+          </div>
+          <div class="wf-step active">
+            <div class="wf-num">3</div>
+            <div>
+              <h4>审批通过</h4>
+              <p>操作员及以上权限审批。通过后库存自动 +N，同时生成一笔应付账款，挂在对应供应商名下。</p>
+            </div>
+          </div>
+          <div class="wf-step">
+            <div class="wf-num">4</div>
+            <div>
+              <h4>结清账款</h4>
+              <p>财务结算时一键「结清」，财务记录由「未结清」变为「已结清」。账目清晰，按月汇总。</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flow-vis">
+        <div class="flow-doc">
+          <div class="flow-doc-head">
+            <div class="flow-doc-id">RK20260523000007</div>
+            <div class="flow-doc-status">已审批</div>
+          </div>
+          <div class="flow-row head"><div>商品</div><div>规格</div><div>数量</div><div>金额</div></div>
+          <div class="flow-row"><div>茅台飞天</div><div>500ml×6</div><div>4</div><div>¥8,000</div></div>
+          <div class="flow-row"><div>五粮液</div><div>500ml</div><div>20</div><div>¥18,400</div></div>
+          <div class="flow-row"><div>剑南春</div><div>500ml×6</div><div>2</div><div>¥4,200</div></div>
+          <div class="flow-row"><div>拉菲传奇</div><div>750ml</div><div>10</div><div>¥17,800</div></div>
+          <div class="flow-row foot"><div>合计</div><div></div><div>36</div><div>¥48,400</div></div>
+        </div>
+        <div class="flow-arrow"><i data-lucide="arrow-down" class="icon"></i></div>
+        <div class="flow-effects">
+          <div class="flow-effect">
+            <div class="flow-effect-label"><i data-lucide="check-circle-2" class="icon"></i>库存更新</div>
+            <div class="flow-effect-val">+36 瓶</div>
+          </div>
+          <div class="flow-effect">
+            <div class="flow-effect-label"><i data-lucide="check-circle-2" class="icon"></i>应付账款</div>
+            <div class="flow-effect-val">¥48,400</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- PLATFORMS -->
+<section class="section">
+  <div class="container">
+    <p class="eyebrow">多端覆盖</p>
+    <h2 class="section-title">一个账号，五端同步</h2>
+    <p class="section-sub">办公室开台账，仓库扫码盘点，随时随地查看实时数据。同一份数据，任意终端访问。</p>
+
+    <div class="platforms-grid">
+      <div class="platform-card">
+        <i data-lucide="globe" class="icon"></i>
+        <h4>Web</h4>
+        <p>主流浏览器，无需安装</p>
+      </div>
+      <div class="platform-card">
+        <i data-lucide="monitor" class="icon"></i>
+        <h4>Windows</h4>
+        <p>桌面客户端</p>
+      </div>
+      <div class="platform-card">
+        <i data-lucide="laptop" class="icon"></i>
+        <h4>macOS</h4>
+        <p>原生应用</p>
+      </div>
+      <div class="platform-card">
+        <i data-lucide="smartphone" class="icon"></i>
+        <h4>iOS</h4>
+        <p>iPhone / iPad</p>
+      </div>
+      <div class="platform-card">
+        <i data-lucide="tablet-smartphone" class="icon"></i>
+        <h4>Android</h4>
+        <p>手机 / 平板</p>
+      </div>
+    </div>
+
+    <div class="platforms-visual">
+      <div class="pv-text">
+        <h3>仓库里也能用得顺手</h3>
+        <p>移动端扫码即查库存、入库、出库，网络恢复后自动同步。</p>
+        <div class="pv-feature-list">
+          <div class="pv-feature"><i data-lucide="scan-line" class="icon"></i>扫码即查商品 · 二维码标签</div>
+          <div class="pv-feature"><i data-lucide="bell" class="icon"></i>实时推送审批与库存预警</div>
+          <div class="pv-feature"><i data-lucide="printer" class="icon"></i>蓝牙连接打印商品标签</div>
+          <div class="pv-feature"><i data-lucide="shield-check" class="icon"></i>商品防伪溯源，扫码验真</div>
+        </div>
+      </div>
+      <div class="device-stack">
+        <div class="device-laptop">
+          <div class="device-laptop-screen">
+            <div class="dlmr brand"></div>
+            <div class="dlmr short"></div>
+            <div class="dlmr"></div>
+            <div class="dlmr short"></div>
+            <div class="dlmr"></div>
+            <div class="dlmr short"></div>
+            <div class="dlmr"></div>
+            <div style="display:flex;gap:6px;margin-top:10px">
+              <div style="flex:1;height:50px;background:var(--gray-100);border-radius:3px"></div>
+              <div style="flex:1;height:50px;background:var(--brand-100);border-radius:3px"></div>
+              <div style="flex:1;height:50px;background:var(--gray-100);border-radius:3px"></div>
+            </div>
+          </div>
+        </div>
+        <div class="device-phone">
+          <div class="device-phone-screen">
+            <div style="height:14px;background:var(--brand-500);border-radius:4px;margin-bottom:6px"></div>
+            <div style="height:8px;background:var(--gray-200);border-radius:2px;margin-bottom:4px;width:70%"></div>
+            <div style="height:8px;background:var(--gray-200);border-radius:2px;margin-bottom:8px;width:50%"></div>
+            <div style="background:var(--gray-0);border:1px solid var(--gray-200);border-radius:4px;padding:6px;margin-bottom:4px">
+              <div style="height:6px;background:var(--brand-300);border-radius:1px;width:60%;margin-bottom:3px"></div>
+              <div style="height:4px;background:var(--gray-200);border-radius:1px;width:80%"></div>
+            </div>
+            <div style="background:var(--gray-0);border:1px solid var(--gray-200);border-radius:4px;padding:6px;margin-bottom:4px">
+              <div style="height:6px;background:var(--brand-300);border-radius:1px;width:50%;margin-bottom:3px"></div>
+              <div style="height:4px;background:var(--gray-200);border-radius:1px;width:70%"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- REPORTS -->
+<section class="section" style="background:var(--gray-25)">
+  <div class="container">
+    <p class="eyebrow">数据洞察</p>
+    <h2 class="section-title">把每一瓶酒的进出，转成可分析的数据</h2>
+    <p class="section-sub">报表自动生成，可按日、按月、按往来单位维度切换。导出 Excel 一键完成。</p>
+
+    <div class="reports-grid">
+      <div class="report-card">
+        <div class="report-head">
+          <div>
+            <h4 class="report-title">本月财务流水</h4>
+            <p class="report-sub">2026 年 5 月 · 应付与应收对比</p>
+          </div>
+          <div class="report-tabs">
+            <div class="report-tab">日</div>
+            <div class="report-tab active">月</div>
+            <div class="report-tab">季</div>
+          </div>
+        </div>
+        <div class="chart">
+          <svg viewBox="0 0 600 200" preserveAspectRatio="none">
+            <line x1="0" y1="50" x2="600" y2="50" stroke="#ECEFF4" stroke-width="1"/>
+            <line x1="0" y1="100" x2="600" y2="100" stroke="#ECEFF4" stroke-width="1"/>
+            <line x1="0" y1="150" x2="600" y2="150" stroke="#ECEFF4" stroke-width="1"/>
+            <path d="M 20 140 L 80 110 L 140 130 L 200 90 L 260 100 L 320 70 L 380 85 L 440 50 L 500 65 L 560 40 L 560 190 L 20 190 Z" fill="rgba(37,99,172,0.10)"/>
+            <path d="M 20 140 L 80 110 L 140 130 L 200 90 L 260 100 L 320 70 L 380 85 L 440 50 L 500 65 L 560 40" fill="none" stroke="#2563AC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M 20 160 L 80 140 L 140 145 L 200 120 L 260 130 L 320 105 L 380 115 L 440 90 L 500 95 L 560 70 L 560 190 L 20 190 Z" fill="rgba(139,35,49,0.08)"/>
+            <path d="M 20 160 L 80 140 L 140 145 L 200 120 L 260 130 L 320 105 L 380 115 L 440 90 L 500 95 L 560 70" fill="none" stroke="#8B2331" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <circle cx="560" cy="40" r="4" fill="#2563AC"/>
+            <circle cx="560" cy="40" r="8" fill="rgba(37,99,172,0.20)"/>
+            <circle cx="560" cy="70" r="4" fill="#8B2331"/>
+          </svg>
+          <div style="display:flex;gap:16px;font-size:11px;color:var(--fg-muted);margin-top:8px">
+            <span style="display:flex;align-items:center;gap:4px"><span style="width:8px;height:8px;background:var(--brand-500);border-radius:50%"></span>应付账款</span>
+            <span style="display:flex;align-items:center;gap:4px"><span style="width:8px;height:8px;background:#8B2331;border-radius:50%"></span>应收账款</span>
+          </div>
+        </div>
+        <div class="chart-stats">
+          <div>
+            <div class="chart-stat-label">本月应付</div>
+            <div class="chart-stat-val">¥248,600<small>↑ 12%</small></div>
+          </div>
+          <div>
+            <div class="chart-stat-label">本月应收</div>
+            <div class="chart-stat-val">¥182,400<small>↑ 8%</small></div>
+          </div>
+          <div>
+            <div class="chart-stat-label">已结清率</div>
+            <div class="chart-stat-val">86.4%<small>↑ 4%</small></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="insights-features">
+        <div class="insight-item">
+          <div class="insight-icon"><i data-lucide="bar-chart-3" class="icon"></i></div>
+          <div>
+            <h4>财务汇总自动生成</h4>
+            <p>每月应付应收按往来单位、按时间维度自动汇总。无需手工统计，月底一键导出。</p>
+          </div>
+        </div>
+        <div class="insight-item">
+          <div class="insight-icon"><i data-lucide="trending-down" class="icon"></i></div>
+          <div>
+            <h4>损耗趋势可见</h4>
+            <p>每次盘点的账实差异自动累计为损耗数据，结合周转率帮你发现异常 SKU。</p>
+          </div>
+        </div>
+        <div class="insight-item">
+          <div class="insight-icon"><i data-lucide="file-spreadsheet" class="icon"></i></div>
+          <div>
+            <h4>Excel 进出自由</h4>
+            <p>历史数据可批量导入，月度报表可一键导出。与会计系统无缝衔接。</p>
+          </div>
+        </div>
+        <div class="insight-item">
+          <div class="insight-icon"><i data-lucide="alert-triangle" class="icon"></i></div>
+          <div>
+            <h4>库存预警实时提醒</h4>
+            <p>SKU 库存低于阈值，系统在 Web 与移动端同步推送。永远不会错过补货时机。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- SECURITY -->
+<section class="section security-section" id="security">
+  <div class="container">
+    <p class="eyebrow">安全与权限</p>
+    <h2 class="section-title">企业级权限控制，操作可追溯</h2>
+    <p class="section-sub">四级角色细分权限，每一次单据操作都有经办人记录。数据备份与审批留痕，按合规要求设计。</p>
+
+    <div class="security-grid">
+      <div class="security-card">
+        <i data-lucide="users" class="icon"></i>
+        <h4>四级角色</h4>
+        <p>超级管理员、管理员、操作员、只读。按岗位分配，最小权限原则。</p>
+      </div>
+      <div class="security-card">
+        <i data-lucide="file-clock" class="icon"></i>
+        <h4>操作审计</h4>
+        <p>谁、什么时候、做了什么 — 每一笔单据都有经办人与时间戳。</p>
+      </div>
+      <div class="security-card">
+        <i data-lucide="shield-check" class="icon"></i>
+        <h4>审批留痕</h4>
+        <p>审批不可撤销，单据从草稿到结清的每一步状态完整保留。</p>
+      </div>
+      <div class="security-card">
+        <i data-lucide="hard-drive" class="icon"></i>
+        <h4>每日备份</h4>
+        <p>云端每日自动备份，支持私有部署。数据始终在你的控制下。</p>
+      </div>
+    </div>
+
+    <div class="roles-table">
+      <div class="roles-row head">
+        <div>角色</div>
+        <div>说明</div>
+        <div style="text-align:center">查看</div>
+        <div style="text-align:center">录入</div>
+        <div style="text-align:center">审批</div>
+        <div style="text-align:center">设置</div>
+      </div>
+      <div class="roles-row">
+        <div class="role-name">超级管理员</div>
+        <div class="role-desc">系统最高权限，含数据清空</div>
+        <div class="role-check"><i data-lucide="check" class="icon"></i></div>
+        <div class="role-check"><i data-lucide="check" class="icon"></i></div>
+        <div class="role-check"><i data-lucide="check" class="icon"></i></div>
+        <div class="role-check"><i data-lucide="check" class="icon"></i></div>
+      </div>
+      <div class="roles-row">
+        <div class="role-name">管理员</div>
+        <div class="role-desc">门店管理人员，含用户与设置</div>
+        <div class="role-check"><i data-lucide="check" class="icon"></i></div>
+        <div class="role-check"><i data-lucide="check" class="icon"></i></div>
+        <div class="role-check"><i data-lucide="check" class="icon"></i></div>
+        <div class="role-check"><i data-lucide="check" class="icon"></i></div>
+      </div>
+      <div class="roles-row">
+        <div class="role-name">操作员</div>
+        <div class="role-desc">日常录入与审核单据</div>
+        <div class="role-check"><i data-lucide="check" class="icon"></i></div>
+        <div class="role-check"><i data-lucide="check" class="icon"></i></div>
+        <div class="role-check"><i data-lucide="check" class="icon"></i></div>
+        <div class="role-check no"><i data-lucide="minus" class="icon"></i></div>
+      </div>
+      <div class="roles-row">
+        <div class="role-name">只读</div>
+        <div class="role-desc">仅查看，不可修改任何数据</div>
+        <div class="role-check"><i data-lucide="check" class="icon"></i></div>
+        <div class="role-check no"><i data-lucide="minus" class="icon"></i></div>
+        <div class="role-check no"><i data-lucide="minus" class="icon"></i></div>
+        <div class="role-check no"><i data-lucide="minus" class="icon"></i></div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- FAQ -->
+<section class="section" id="faq" style="background:var(--gray-25)">
+  <div class="container">
+    <p class="eyebrow">常见问题</p>
+    <h2 class="section-title">使用前常见的问题</h2>
+
+    <div class="faq-list">
+      <details class="faq-item" open>
+        <summary class="faq-q">支持哪些操作系统和设备？<i data-lucide="plus" class="icon"></i></summary>
+        <div class="faq-a">系统支持 Windows、macOS 桌面客户端，iOS 与 Android 移动 App，以及主流浏览器的 Web 版本。同一账号可在五端同步使用，数据实时更新。</div>
+      </details>
+      <details class="faq-item">
+        <summary class="faq-q">审批通过后发现录入错误，怎么办？<i data-lucide="plus" class="icon"></i></summary>
+        <div class="faq-a">审批通过后操作不可撤销。如发现错误，可由具备权限的用户新建反向调整单据来修正库存与账款。这样可以保留完整的审计链。</div>
+      </details>
+      <details class="faq-item">
+        <summary class="faq-q">能否从原有 Excel / 旧系统迁移数据？<i data-lucide="plus" class="icon"></i></summary>
+        <div class="faq-a">可以。「系统设置 → 数据导入」支持往来单位、商品名称 / 系列 / 规格、库存等数据的批量 Excel 导入，按提供的模板填写即可。导入过程中会显示成功条数与失败原因。</div>
+      </details>
+      <details class="faq-item">
+        <summary class="faq-q">只读账号能做什么？<i data-lucide="plus" class="icon"></i></summary>
+        <div class="faq-a">只读账号可查看全部数据，包括单据、库存、财务、报表，并可导出 Excel。但不能新建、修改、审批、删除任何数据。适合财务、税务、审计岗位的查阅需求。</div>
+      </details>
+      <details class="faq-item">
+        <summary class="faq-q">防伪溯源功能如何使用？<i data-lucide="plus" class="icon"></i></summary>
+        <div class="faq-a">在商品管理中为每件商品生成唯一防伪码，打印标签贴附于商品。消费者用手机扫描二维码后，跳转至公开页面可查看商品信息、批次、生产日期及出售门店，验证真伪。</div>
+      </details>
+      <details class="faq-item">
+        <summary class="faq-q">支持多仓库管理吗？<i data-lucide="plus" class="icon"></i></summary>
+        <div class="faq-a">支持。在系统设置中可以为门店配置多个仓库，每次入库/出库时选择对应仓库，库存按仓库维度独立统计，也可以在库存列表跨仓库汇总查询。</div>
+      </details>
+    </div>
+  </div>
+</section>
+
+<!-- CTA BANNER -->
+<section>
+  <div class="container">
+    <div class="cta-banner">
+      <div>
+        <h2>开始掌控每一瓶酒的<br/>进出与账目。</h2>
+        <p>联系我们即可快速开通您的门店账户，无需繁琐配置。</p>
+      </div>
+      <div class="cta-banner-actions">
+        <a href="/app/" class="btn btn-primary btn-lg">
+          进入管理端
+          <i data-lucide="arrow-right" class="icon"></i>
+        </a>
+        <a href="/download.html" class="btn btn-secondary btn-lg">
+          <i data-lucide="download" class="icon"></i>
+          下载客户端
+        </a>
+        <span class="cta-banner-note">支持 Web / iOS / Android / Windows / macOS</span>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- FOOTER -->
+<footer>
+  <div class="container">
+    <div class="footer-grid">
+      <div class="footer-brand">
+        <img src="assets/logo-full.svg" alt="岩美" />
+        <p>为酒行与酒店设计的库存、审核、财务一体化管理平台。</p>
+        <div class="footer-contact">
+          <div>jiu.51yanmei.com</div>
+        </div>
+      </div>
+      <div class="footer-col">
+        <h5>产品</h5>
+        <ul>
+          <li><a href="#modules">核心模块</a></li>
+          <li><a href="#workflow">业务流程</a></li>
+          <li><a href="#reports">数据洞察</a></li>
+          <li><a href="/download.html">客户端下载</a></li>
+        </ul>
+      </div>
+      <div class="footer-col">
+        <h5>资源</h5>
+        <ul>
+          <li><a href="/docs.html">使用手册</a></li>
+          <li><a href="/docs.html#stock-in">入库指南</a></li>
+          <li><a href="/docs.html#scan">防伪溯源</a></li>
+          <li><a href="/docs.html#settings">系统设置</a></li>
+        </ul>
+      </div>
+      <div class="footer-col">
+        <h5>功能</h5>
+        <ul>
+          <li><a href="/features/inventory.html">库存管理</a></li>
+          <li><a href="/features/approval.html">审批流程</a></li>
+          <li><a href="#security">安全权限</a></li>
+          <li><a href="#faq">常见问题</a></li>
+        </ul>
+      </div>
+      <div class="footer-col">
+        <h5>系统</h5>
+        <ul>
+          <li><a href="/app/">进入管理端</a></li>
+          <li><a href="/download.html">下载客户端</a></li>
+          <li><a href="/docs.html">使用文档</a></li>
+        </ul>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <div>© 2026 岩美酒库管理系统 · 保留所有权利</div>
+      <div>jiu.51yanmei.com</div>
+    </div>
+  </div>
+</footer>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    if (window.lucide) lucide.createIcons();
+  });
+
+  document.querySelectorAll('a[href^="#"]').forEach(a => {
+    a.addEventListener('click', e => {
+      const id = a.getAttribute('href');
+      if (id === '#' || id.length < 2) return;
+      const target = document.querySelector(id);
+      if (target) {
+        e.preventDefault();
+        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    });
+  });
+</script>
+</body>
+</html>
diff --git a/web/scan.html b/web/scan.html
new file mode 100644
index 0000000..4bfc65b
--- /dev/null
+++ b/web/scan.html
@@ -0,0 +1,379 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+<title>商品验真 — 岩美</title>
+<meta name="description" content="岩美防伪验证 — 扫码查看商品详情与防伪信息" />
+<link rel="stylesheet" href="/assets/colors_and_type.css" />
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; font-family: var(--font-sans); color: #1A1612; background: #F7F3EE; -webkit-font-smoothing: antialiased; min-height: 100vh; }
+img { display: block; max-width: 100%; }
+
+/* STATE SCREENS */
+.state-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; flex-direction: column; gap: 16px; padding: 32px; text-align: center; }
+.spinner { width: 36px; height: 36px; border: 3px solid #E8E2D9; border-top-color: var(--brand-500); border-radius: 50%; animation: spin 0.8s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.state-text { font-size: 14px; color: #7A7068; }
+.error-icon { width: 48px; height: 48px; background: var(--danger-50); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; }
+.error-title { font-size: 16px; font-weight: 600; color: #1A1612; }
+.error-sub { font-size: 13px; color: #7A7068; max-width: 260px; }
+.retry-btn { margin-top: 4px; padding: 10px 24px; background: var(--brand-500); color: #fff; border: none; border-radius: 6px; font-size: 14px; font-family: inherit; cursor: pointer; }
+.retry-btn:active { background: var(--brand-700); }
+
+/* MAIN CONTENT */
+#content { display: none; }
+
+/* IMAGE GALLERY */
+.gallery { position: relative; background: #EDE8E2; }
+.gallery-main { position: relative; overflow: hidden; }
+.gallery-main img { width: 100%; aspect-ratio: 1; object-fit: cover; display: none; }
+.gallery-main img.active { display: block; }
+.gallery-placeholder { width: 100%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
+.placeholder-mark { width: 56px; height: 56px; background: #0F3057; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
+.placeholder-mark::after { content: '岩'; font-size: 24px; font-weight: 700; color: rgba(255,255,255,0.9); }
+.placeholder-text { font-size: 13px; color: #9E9580; }
+.gallery-counter { position: absolute; right: 12px; bottom: 12px; background: rgba(0,0,0,0.5); color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 12px; }
+.thumbnails { display: flex; gap: 8px; padding: 10px 14px; overflow-x: auto; background: #EDE8E2; }
+.thumbnails::-webkit-scrollbar { display: none; }
+.thumb { width: 52px; height: 52px; border-radius: 4px; object-fit: cover; border: 2px solid transparent; flex-shrink: 0; cursor: pointer; }
+.thumb.active { border-color: var(--brand-500); }
+
+/* VERIFIED RIBBON */
+.ribbon { background: #EAF4ED; padding: 10px 16px; display: flex; align-items: center; gap: 10px; }
+.ribbon-check { width: 22px; height: 22px; background: #2E8B57; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.ribbon-check::after { content: '✓'; color: #fff; font-size: 13px; font-weight: 700; }
+.ribbon-text { flex: 1; }
+.ribbon-title { font-size: 13px; font-weight: 600; color: #1F6B41; }
+.ribbon-sub { font-size: 11px; color: #4A7A5C; margin-top: 1px; }
+.ribbon-icon { font-size: 18px; color: #2E8B57; }
+
+/* TITLE */
+.title-section { background: #fff; padding: 20px 16px 18px; }
+.product-name { font-size: 22px; font-weight: 700; color: #1A1612; line-height: 1.3; margin: 0 0 6px; }
+.product-subtitle { font-size: 14px; color: #7A7068; margin: 0 0 14px; line-height: 1.4; }
+.tags { display: flex; flex-wrap: wrap; gap: 6px; }
+.tag { display: inline-block; padding: 3px 9px; border-radius: 4px; font-size: 12px; font-weight: 500; }
+.tag-brand { background: #EEF4FB; color: #154072; }
+.tag-unit { background: #F0ECE6; color: #6B6259; }
+
+/* QUICK SPECS */
+.quick-specs { background: #fff; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #F0ECE6; }
+.quick-spec-item { padding: 16px 8px; text-align: center; border-left: 1px solid #F5F1EB; }
+.quick-spec-item:first-child { border-left: none; }
+.quick-spec-val { font-size: 20px; font-weight: 700; color: #1A1612; line-height: 1; font-variant-numeric: tabular-nums; }
+.quick-spec-unit { font-size: 9px; color: #9E9580; font-weight: 500; margin-left: 1px; }
+.quick-spec-label { font-size: 11px; color: #9E9580; margin-top: 4px; letter-spacing: 0.04em; }
+
+/* PARAMS */
+.params-card { background: #fff; margin-top: 10px; }
+.card-header { padding: 14px 16px 12px; border-bottom: 1px solid #F0ECE6; font-size: 14px; font-weight: 600; color: #1A1612; display: flex; align-items: center; gap: 8px; }
+.card-header::before { content: ''; display: block; width: 3px; height: 14px; background: #8B2331; border-radius: 2px; }
+.param-row { display: flex; align-items: flex-start; padding: 10px 16px; border-bottom: 1px solid #F5F1EB; }
+.param-row:last-child { border-bottom: none; }
+.param-label { font-size: 13px; color: #9E9580; min-width: 72px; flex-shrink: 0; padding-top: 1px; }
+.param-val { font-size: 13px; color: #1A1612; flex: 1; line-height: 1.5; }
+
+/* AUTHENTICITY */
+.auth-card { background: #FAF8F5; margin-top: 10px; padding: 20px 16px; }
+.auth-inner { background: #fff; border: 1px solid #E8E4DC; border-radius: 8px; padding: 16px; display: flex; gap: 14px; align-items: center; }
+.auth-rows { flex: 1; display: grid; grid-template-columns: 64px 1fr; gap: 8px; font-size: 12px; line-height: 1.7; }
+.auth-lbl { color: #9E9580; }
+.auth-val { color: #1A1612; font-weight: 500; }
+.auth-mono { font-family: 'JetBrains Mono', monospace; color: var(--brand-700); font-weight: 600; letter-spacing: 0.04em; }
+.auth-stamp { width: 72px; height: 72px; border-radius: 50%; border: 2px solid #8B2331; background: rgba(139,35,49,0.04); display: grid; place-items: center; flex-shrink: 0; position: relative; transform: rotate(-8deg); overflow: hidden; }
+.auth-stamp-text { font-size: 8px; color: #8B2331; font-weight: 700; text-align: center; letter-spacing: 0.02em; line-height: 1.4; }
+.auth-note { font-size: 11px; color: #A89E92; margin-top: 12px; text-align: center; line-height: 1.6; }
+
+/* SHOP CARD */
+.shop-card { background: #fff; margin-top: 10px; }
+.shop-name-row { display: flex; align-items: center; gap: 8px; padding: 14px 16px 12px; border-bottom: 1px solid #F0ECE6; }
+.shop-icon { font-size: 16px; }
+.shop-name-text { font-size: 14px; font-weight: 600; color: #1A1612; }
+
+/* FOOTER */
+.footer { padding: 20px 16px 32px; display: flex; align-items: center; justify-content: center; gap: 8px; }
+.footer-mark { width: 18px; height: 18px; background: #0F3057; border-radius: 3px; display: flex; align-items: center; justify-content: center; }
+.footer-mark::after { content: '岩'; color: rgba(255,255,255,0.9); font-size: 10px; font-weight: 700; }
+.footer-text { font-size: 11px; color: #A89E92; }
+</style>
+</head>
+<body>
+
+<div id="state-loading" class="state-screen">
+  <div class="spinner"></div>
+  <div class="state-text">正在查询商品信息…</div>
+</div>
+
+<div id="state-error" class="state-screen" style="display:none">
+  <div class="error-icon">✗</div>
+  <div class="error-title">商品不存在或已下架</div>
+  <div class="error-sub">请检查二维码是否完整，或联系出售方确认。</div>
+  <button class="retry-btn" onclick="load()">重试</button>
+</div>
+
+<div id="content">
+  <div class="gallery" id="gallery">
+    <div class="gallery-main" id="gallery-main">
+      <div class="gallery-placeholder" id="gallery-placeholder">
+        <div class="placeholder-mark"></div>
+        <div class="placeholder-text">暂无图片</div>
+      </div>
+    </div>
+    <div class="thumbnails" id="thumbnails" style="display:none"></div>
+  </div>
+
+  <div class="ribbon">
+    <div class="ribbon-check"></div>
+    <div class="ribbon-text">
+      <div class="ribbon-title">已通过岩美防伪验证</div>
+      <div class="ribbon-sub" id="ribbon-shop"></div>
+    </div>
+    <div class="ribbon-icon">✓</div>
+  </div>
+
+  <div class="title-section">
+    <h1 class="product-name" id="product-name">—</h1>
+    <p class="product-subtitle" id="product-subtitle"></p>
+    <div class="tags" id="product-tags"></div>
+  </div>
+
+  <div class="quick-specs" id="quick-specs" style="display:none">
+    <!-- filled by JS -->
+  </div>
+
+  <div class="params-card" id="params-card">
+    <div class="card-header">商品参数</div>
+    <div id="params-rows"></div>
+  </div>
+
+  <div class="auth-card" id="auth-card" style="display:none">
+    <div class="card-header">批次与防伪</div>
+    <div class="auth-inner">
+      <div class="auth-rows" id="auth-rows"></div>
+      <div class="auth-stamp">
+        <div class="auth-stamp-text">岩美<br/>防伪<br/>✓</div>
+      </div>
+    </div>
+    <div class="auth-note">如发现可疑商品请联系出售方确认</div>
+  </div>
+
+  <div class="shop-card" id="shop-card" style="display:none">
+    <div class="shop-name-row">
+      <span class="shop-icon">🏪</span>
+      <span class="shop-name-text" id="shop-display-name">门店信息</span>
+    </div>
+    <div id="shop-rows"></div>
+  </div>
+
+  <div class="footer">
+    <div class="footer-mark"></div>
+    <div class="footer-text">由岩美酒库管理系统提供防伪验证</div>
+  </div>
+</div>
+
+<script>
+const API_BASE = location.hostname === 'localhost' ? 'http://localhost:8080/api/v1' : '/api/v1';
+
+function getPublicId() {
+  // URL pattern: /scan/<public_id>
+  const parts = location.pathname.split('/').filter(Boolean);
+  const idx = parts.indexOf('scan');
+  return idx >= 0 ? parts[idx + 1] : null;
+}
+
+let _imgs = [];
+let _current = 0;
+
+function showImg(i) {
+  _current = i;
+  document.querySelectorAll('#gallery-main img').forEach((el, j) => {
+    el.classList.toggle('active', j === i);
+  });
+  document.querySelectorAll('.thumb').forEach((el, j) => {
+    el.classList.toggle('active', j === i);
+  });
+  const counter = document.getElementById('gallery-counter');
+  if (counter) counter.textContent = `${i + 1} / ${_imgs.length}`;
+}
+
+function renderGallery(imageUrls) {
+  const main = document.getElementById('gallery-main');
+  const thumbsEl = document.getElementById('thumbnails');
+  const placeholder = document.getElementById('gallery-placeholder');
+
+  if (!imageUrls || imageUrls.length === 0) return;
+
+  _imgs = imageUrls;
+  placeholder.style.display = 'none';
+
+  imageUrls.forEach((url, i) => {
+    const img = document.createElement('img');
+    img.src = url;
+    img.alt = '';
+    if (i === 0) img.classList.add('active');
+    img.onclick = () => openFullscreen(i);
+    main.appendChild(img);
+  });
+
+  if (imageUrls.length > 1) {
+    const counter = document.createElement('div');
+    counter.className = 'gallery-counter';
+    counter.id = 'gallery-counter';
+    counter.textContent = `1 / ${imageUrls.length}`;
+    main.appendChild(counter);
+
+    thumbsEl.style.display = 'flex';
+    imageUrls.forEach((url, i) => {
+      const t = document.createElement('img');
+      t.src = url;
+      t.className = 'thumb' + (i === 0 ? ' active' : '');
+      t.onclick = () => showImg(i);
+      thumbsEl.appendChild(t);
+    });
+  }
+}
+
+function openFullscreen(i) {
+  const overlay = document.createElement('div');
+  overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:999;display:flex;align-items:center;justify-content:center;';
+  const img = document.createElement('img');
+  img.src = _imgs[i];
+  img.style.cssText = 'max-width:100%;max-height:100%;object-fit:contain;';
+  overlay.appendChild(img);
+  overlay.onclick = () => document.body.removeChild(overlay);
+  document.body.appendChild(overlay);
+}
+
+function parseQuickSpecs(spec, productionDate) {
+  if (!spec) return [];
+  const items = [];
+  const degM = spec.match(/(\d+(?:\.\d+)?)\s*(?:度|°|%vol)/i);
+  if (degM) items.push({ v: degM[1], u: '°', l: '酒精度' });
+  const mlM = spec.match(/(\d+(?:\.\d+)?)\s*ml/i);
+  if (mlM) items.push({ v: mlM[1], u: 'ml', l: '净含量' });
+  const xiangM = spec.match(/([清浓酱兼馥凤]香)/);
+  if (xiangM) items.push({ v: xiangM[1], u: '', l: '香型' });
+  if (productionDate) {
+    const yrM = productionDate.match(/^(\d{4})/);
+    if (yrM) items.push({ v: yrM[1], u: '', l: '年份' });
+  }
+  return items;
+}
+
+function paramRow(label, value) {
+  return `<div class="param-row"><div class="param-label">${label}</div><div class="param-val">${value}</div></div>`;
+}
+
+function render(d) {
+  const name = d.name || '';
+  const series = d.series || '';
+  const spec = d.spec || '';
+  const brand = d.brand || '';
+  const unit = d.unit || '';
+  const description = d.description || '';
+  const shop = d.shop;
+  const batch = d.batch;
+  const baseUrl = location.origin;
+
+  const images = (d.images || []).map(img => baseUrl + img.url);
+  renderGallery(images);
+
+  document.getElementById('product-name').textContent = name;
+  const subtitleParts = [series, spec].filter(Boolean);
+  const subtitleEl = document.getElementById('product-subtitle');
+  subtitleEl.textContent = subtitleParts.join(' · ');
+  if (!subtitleParts.length) subtitleEl.style.display = 'none';
+
+  const tagsEl = document.getElementById('product-tags');
+  if (brand) tagsEl.innerHTML += `<span class="tag tag-brand">${brand}</span>`;
+  if (unit) tagsEl.innerHTML += `<span class="tag tag-unit">${unit}</span>`;
+
+  // Ribbon shop info
+  if (shop && shop.name) {
+    document.getElementById('ribbon-shop').textContent = `出售方：${shop.name}`;
+  }
+
+  // Quick Specs — parse from spec string
+  const quickSpecsEl = document.getElementById('quick-specs');
+  const qs = parseQuickSpecs(spec, batch ? batch.production_date : null);
+  if (qs.length > 0) {
+    quickSpecsEl.style.display = 'grid';
+    quickSpecsEl.innerHTML = qs.map(it => `
+      <div class="quick-spec-item">
+        <div class="quick-spec-val">${it.v}<span class="quick-spec-unit">${it.u||''}</span></div>
+        <div class="quick-spec-label">${it.l}</div>
+      </div>`).join('');
+  }
+
+  // Params
+  let paramsHtml = '';
+  if (spec) paramsHtml += paramRow('规格', spec);
+  if (brand) paramsHtml += paramRow('品牌', brand);
+  if (unit) paramsHtml += paramRow('单位', unit);
+  if (description) paramsHtml += paramRow('描述', description);
+  if (paramsHtml) {
+    document.getElementById('params-rows').innerHTML = paramsHtml;
+  } else {
+    document.getElementById('params-card').style.display = 'none';
+  }
+
+  // Authenticity (batch info)
+  if (batch && (batch.batch_no || batch.production_date || batch.in_stock_date)) {
+    const authCard = document.getElementById('auth-card');
+    let authHtml = '';
+    if (batch.batch_no) authHtml += `<div class="auth-lbl">批次号</div><div class="auth-val auth-mono">${batch.batch_no}</div>`;
+    if (batch.production_date) authHtml += `<div class="auth-lbl">生产日期</div><div class="auth-val">${batch.production_date}</div>`;
+    if (batch.in_stock_date) authHtml += `<div class="auth-lbl">入库日期</div><div class="auth-val">${batch.in_stock_date}</div>`;
+    document.getElementById('auth-rows').innerHTML = authHtml;
+    authCard.style.display = 'block';
+  }
+
+  // Shop card
+  if (shop) {
+    const shopCard = document.getElementById('shop-card');
+    const shopName = shop.name || '';
+    document.getElementById('shop-display-name').textContent = shopName || '门店信息';
+    let shopHtml = '';
+    if (shop.code) shopHtml += paramRow('门店编号', shop.code);
+    if (shop.address) shopHtml += paramRow('地址', shop.address);
+    if (shop.phone) shopHtml += paramRow('电话', shop.phone);
+    if (shopHtml) {
+      document.getElementById('shop-rows').innerHTML = shopHtml;
+      shopCard.style.display = 'block';
+    }
+  }
+
+  document.getElementById('state-loading').style.display = 'none';
+  document.getElementById('content').style.display = 'block';
+}
+
+function load() {
+  const pid = getPublicId();
+  if (!pid) {
+    document.getElementById('state-loading').style.display = 'none';
+    document.getElementById('state-error').style.display = 'flex';
+    return;
+  }
+
+  document.getElementById('state-loading').style.display = 'flex';
+  document.getElementById('state-error').style.display = 'none';
+  document.getElementById('content').style.display = 'none';
+
+  fetch(`${API_BASE}/public/products/${pid}`)
+    .then(r => { if (!r.ok) throw new Error(r.status); return r.json(); })
+    .then(data => render(data.data))
+    .catch(() => {
+      document.getElementById('state-loading').style.display = 'none';
+      document.getElementById('state-error').style.display = 'flex';
+    });
+}
+
+load();
+</script>
+</body>
+</html>