diff --git a/public/web/subscribe.html b/public/web/subscribe.html
index 3037141..a584e41 100644
--- a/public/web/subscribe.html
+++ b/public/web/subscribe.html
@@ -86,6 +86,64 @@
margin: 0;
}
+ .section-title {
+ font-size: 0.875rem;
+ font-weight: 600;
+ color: #475569;
+ margin-bottom: 12px;
+ }
+
+ .type-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 12px;
+ margin-bottom: 24px;
+ }
+
+ @media (max-width: 600px) {
+ .type-grid {
+ grid-template-columns: 1fr;
+ }
+ }
+
+ .type-card {
+ background: #fff;
+ border: 2px solid #e2e8f0;
+ border-radius: 10px;
+ padding: 14px 16px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ text-align: center;
+ position: relative;
+ }
+
+ .type-card:hover {
+ border-color: #10b981;
+ background: #f0fdf4;
+ }
+
+ .type-card.selected {
+ border-color: #10b981;
+ background: #ecfdf5;
+ }
+
+ .type-card.selected::after {
+ content: '';
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ width: 18px;
+ height: 18px;
+ background: #10b981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/12px no-repeat;
+ border-radius: 50%;
+ }
+
+ .type-card .type-name {
+ font-size: 0.95rem;
+ font-weight: 500;
+ color: #334155;
+ }
+
.sku-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
@@ -292,7 +350,7 @@