diff --git a/clientarea/hgcloud/css/common/common.css b/clientarea/hgcloud/css/common/common.css
index 9f1f4df..d39384f 100644
--- a/clientarea/hgcloud/css/common/common.css
+++ b/clientarea/hgcloud/css/common/common.css
@@ -115,41 +115,57 @@ input::-webkit-inner-spin-button {
   justify-content: center;
   flex: 1;
   min-width: 0;
-  padding: 0 24px;
+  padding: 0 16px;
   overflow: hidden;
 }
 .announce-ticker {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  height: 28px;
-  padding: 0 14px 0 10px;
-  background: linear-gradient(135deg, rgba(79,70,229,0.06) 0%, rgba(59,130,246,0.06) 100%);
-  border: 1px solid rgba(79,70,229,0.1);
+  gap: 10px;
+  height: 32px;
+  padding: 0 18px 0 12px;
+  background: linear-gradient(135deg, var(--color-primary, #4F46E5) 0%, #6366F1 50%, #818CF8 100%);
+  border: none;
   border-radius: 999px;
-  max-width: 420px;
+  max-width: 520px;
   overflow: hidden;
-  cursor: default;
-  transition: all 200ms ease-out;
+  cursor: pointer;
+  transition: all 250ms ease-out;
+  box-shadow: 0 2px 12px rgba(79,70,229,0.25);
+  position: relative;
+}
+.announce-ticker::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, var(--color-primary, #4F46E5), #818CF8);
+  opacity: 0;
+  z-index: -1;
+  transition: opacity 250ms ease-out;
+  filter: blur(8px);
 }
 .announce-ticker:hover {
-  background: linear-gradient(135deg, rgba(79,70,229,0.1) 0%, rgba(59,130,246,0.1) 100%);
-  border-color: rgba(79,70,229,0.18);
+  box-shadow: 0 4px 20px rgba(79,70,229,0.35);
+  transform: translateY(-1px);
+}
+.announce-ticker:hover::before {
+  opacity: 0.5;
 }
 .announce-icon {
-  font-size: 14px;
-  color: var(--color-primary, #4F46E5);
+  font-size: 15px;
+  color: rgba(255,255,255,0.9);
   flex-shrink: 0;
   animation: announce-pulse 2s ease-in-out infinite;
 }
 @keyframes announce-pulse {
-  0%, 100% { opacity: 0.7; transform: scale(1); }
-  50% { opacity: 1; transform: scale(1.1); }
+  0%, 100% { opacity: 0.75; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.15); }
 }
 .announce-flipper {
   flex: 1;
   min-width: 0;
-  height: 28px;
+  height: 32px;
   display: flex;
   align-items: center;
   overflow: hidden;
@@ -158,33 +174,35 @@ input::-webkit-inner-spin-button {
 .announce-item {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-decoration: none;
-  color: inherit;
-  line-height: 28px;
+  color: #fff;
+  line-height: 32px;
 }
-.announce-item:hover { color: var(--color-primary, #4F46E5); }
+.announce-item:hover { color: #fff; opacity: 0.9; }
 .announce-tag {
   display: inline-block;
   font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  padding: 1px 6px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  padding: 2px 8px;
   border-radius: 4px;
   line-height: 1.5;
   flex-shrink: 0;
+  text-transform: uppercase;
 }
-.tag-blue { background: rgba(59,130,246,0.12); color: #2563EB; }
-.tag-green { background: rgba(5,150,105,0.12); color: #059669; }
-.tag-orange { background: rgba(217,119,6,0.12); color: #D97706; }
-.tag-red { background: rgba(220,38,38,0.12); color: #DC2626; }
-.tag-purple { background: rgba(124,58,237,0.12); color: #7C3AED; }
+.tag-blue { background: rgba(255,255,255,0.2); color: #fff; }
+.tag-green { background: rgba(52,211,153,0.35); color: #fff; }
+.tag-orange { background: rgba(251,191,36,0.35); color: #fff; }
+.tag-red { background: rgba(248,113,113,0.35); color: #fff; }
+.tag-purple { background: rgba(196,181,253,0.35); color: #fff; }
 .announce-text {
-  font-size: 12px;
-  color: #374151;
+  font-size: 13px;
+  font-weight: 500;
+  color: rgba(255,255,255,0.95);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;