diff --git a/services/premiere-plugin/css/styles.css b/services/premiere-plugin/css/styles.css
index 5df5512..e17632a 100644
--- a/services/premiere-plugin/css/styles.css
+++ b/services/premiere-plugin/css/styles.css
@@ -1,5 +1,7 @@
-/* Wild Dragon MAM Panel — Wild Dragon Design System */
-/* OKLCH tokens aligned with web-ui/common.css */
+/* Wild Dragon MAM Panel — Dragonflight Design System v1.2.0
+ * CEP-compatible: all oklch() converted to hex/rgba via OKLab→sRGB math.
+ * Source of truth: services/web-ui/src/css/components/
+ * Do not hand-edit hex values — regenerate from tokens.css if tokens change. */
 
 :root {
   /* Background scale */
@@ -165,7 +167,7 @@ html, body {
   flex: 1;
   min-width: 0;
   height: 32px;
-  padding: 0 var(--sp-2);
+  padding: 0 10px;
   background: var(--bg-deep);
   border: 1px solid var(--border);
   border-radius: var(--r-sm);
@@ -173,7 +175,8 @@ html, body {
   font-size: var(--text-xs);
   font-family: var(--font-mono);
   outline: none;
-  transition: border-color var(--t-fast), box-shadow var(--t-fast);
+  transition: border-color var(--dur-fast) var(--ease-out-quart),
+              box-shadow   var(--dur-fast) var(--ease-out-quart);
 }
 
 .server-url:focus-visible {
@@ -191,7 +194,8 @@ html, body {
   border-radius: 50%;
   background: var(--signal-bad);
   flex-shrink: 0;
-  transition: background var(--t-fast), box-shadow var(--t-fast);
+  transition: background var(--dur-fast) var(--ease-out-quart),
+              box-shadow  var(--dur-fast) var(--ease-out-quart);
 }
 
 .status-indicator.connected {
@@ -210,28 +214,26 @@ html, body {
 }
 
 /* ================================================================
-   BUTTONS (design system patterns)
+   BUTTONS (design system — mirrors wd-btn)
    ================================================================ */
 
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--sp-1);
-  padding: 0 var(--sp-3);
+  gap: 6px;
+  padding: 0 12px;
   height: 32px;
-  font-size: var(--text-sm);
-  font-weight: 500;
+  font: 500 13px/1 var(--font);
   border: 1px solid transparent;
-  border-radius: var(--r-sm);
-  transition: background var(--dur-fast) var(--ease-out-quart),
-              border-color var(--dur-fast) var(--ease-out-quart),
-              color var(--dur-fast) var(--ease-out-quart);
+  border-radius: 4px;
+  transition: background-color var(--dur-fast) var(--ease-out-quart),
+              border-color     var(--dur-fast) var(--ease-out-quart),
+              color            var(--dur-fast) var(--ease-out-quart);
   white-space: nowrap;
-  line-height: 1;
   flex-shrink: 0;
   cursor: pointer;
-  font-family: var(--font);
+  user-select: none;
 }
 
 .btn:focus-visible {
@@ -246,14 +248,14 @@ html, body {
 
 .btn-sm {
   height: 28px;
-  padding: 0 var(--sp-2);
-  font-size: 11px;
+  padding: 0 10px;
+  font-size: 12px;
 }
 
 .btn-lg {
   height: 36px;
-  padding: 0 var(--sp-4);
-  font-size: var(--text-sm);
+  padding: 0 14px;
+  font-size: 13px;
 }
 
 .btn-icon {
@@ -264,7 +266,7 @@ html, body {
 
 .btn-primary {
   background: var(--accent);
-  color: #070403;
+  color: #f5f7fb;
   border-color: var(--accent);
 }
 
@@ -276,11 +278,12 @@ html, body {
 .btn-secondary {
   background: var(--bg-surface);
   color: var(--text-primary);
-  border-color: var(--border-strong);
+  border-color: var(--border);
 }
 
 .btn-secondary:hover:not(:disabled) {
-  background: var(--bg-raised);
+  background: var(--bg-hover);
+  border-color: var(--border-strong);
 }
 
 .btn-ghost {
@@ -296,7 +299,7 @@ html, body {
 
 .btn-danger {
   background: var(--signal-bad);
-  color: #fcf7f7;
+  color: #fbf6f6;
   border-color: var(--signal-bad);
 }
 
@@ -305,7 +308,7 @@ html, body {
   border-color: var(--signal-bad-hover);
 }
 
-.btn:disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; }
+.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
 
 /* Legacy button compatibility */
 button {
@@ -314,7 +317,7 @@ button {
 }
 
 button:disabled {
-  opacity: 0.38;
+  opacity: 0.4;
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -322,20 +325,21 @@ button:disabled {
 button.secondary {
   background: var(--bg-surface);
   color: var(--text-primary);
-  border: 1px solid var(--border-strong);
-  border-radius: var(--r-sm);
-  padding: 0 var(--sp-2);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0 10px;
   height: 32px;
-  font-size: var(--text-sm);
-  font-weight: 500;
+  font: 500 13px/1 var(--font);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: background var(--t-fast);
+  transition: background-color var(--dur-fast) var(--ease-out-quart),
+              border-color     var(--dur-fast) var(--ease-out-quart);
 }
 
 button.secondary:hover:not(:disabled) {
-  background: var(--bg-raised);
+  background: var(--bg-hover);
+  border-color: var(--border-strong);
 }
 
 /* ================================================================
@@ -358,19 +362,20 @@ button.secondary:hover:not(:disabled) {
 .search-input {
   flex: 1;
   height: 32px;
-  padding: 0 var(--sp-3);
+  padding: 0 10px;
   background: var(--bg-deep);
   border: 1px solid var(--border);
-  border-radius: var(--r-sm);
+  border-radius: 4px;
   color: var(--text-primary);
-  font-size: var(--text-xs);
+  font: 400 13px/1 var(--font);
   outline: none;
-  transition: border-color var(--t-fast), box-shadow var(--t-fast);
+  transition: border-color var(--dur-fast) var(--ease-out-quart);
 }
 
 .search-input:focus-visible {
   border-color: var(--accent-border);
-  box-shadow: 0 0 0 2px var(--accent-subtle);
+  outline: 2px solid var(--accent-subtle);
+  outline-offset: 1px;
 }
 
 .search-input::placeholder { color: var(--text-tertiary); }
@@ -383,45 +388,45 @@ button.secondary:hover:not(:disabled) {
 select {
   flex: 1;
   height: 32px;
-  padding: 0 24px 0 var(--sp-2);
+  padding: 0 24px 0 10px;
   background: var(--bg-deep);
   border: 1px solid var(--border);
-  border-radius: var(--r-sm);
+  border-radius: 4px;
   color: var(--text-primary);
-  font-size: var(--text-xs);
+  font: 400 13px/1 var(--font);
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath fill='%23667788' d='m7 10 5 5 5-5z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 6px center;
   cursor: pointer;
   outline: none;
-  transition: border-color var(--t-fast), box-shadow var(--t-fast);
+  transition: border-color var(--dur-fast) var(--ease-out-quart);
 }
 
 select:focus-visible {
   border-color: var(--accent-border);
-  box-shadow: 0 0 0 2px var(--accent-subtle);
+  outline: 2px solid var(--accent-subtle);
+  outline-offset: 1px;
 }
 
 select option { background: var(--bg-surface); color: var(--text-primary); }
 
 /* ================================================================
-   CHIP (design system)
+   CHIP / BADGE (mirrors wd-badge)
    ================================================================ */
 
 .chip {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 2px 8px;
+  gap: 4px;
+  padding: 0 6px;
   height: 18px;
   border-radius: 3px;
-  font-family: var(--font);
-  font-size: 11px;
+  font: 600 10px/1 var(--font);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   background: var(--bg-surface);
-  color: var(--text-secondary);
+  color: var(--text-tertiary);
   white-space: nowrap;
 }
 
@@ -430,7 +435,9 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 .chip--good { color: var(--signal-good); background: var(--signal-good-bg); }
 .chip--warn { color: var(--signal-warn); background: var(--signal-warn-bg); }
 .chip--bad  { color: var(--signal-bad);  background: var(--signal-bad-bg); }
+.chip--idle { color: var(--text-tertiary); background: var(--bg-surface); }
 .chip--rec  { color: var(--accent);      background: var(--accent-subtle); }
+.chip--info { color: var(--accent);      background: var(--accent-subtle); }
 
 /* ================================================================
    SEQUENCE INFO BAR
@@ -452,8 +459,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 .seq-info-label { flex-shrink: 0; }
 
 .seq-info-name {
-  font-size: 11px;
-  font-weight: 500;
+  font: 500 11px/1 var(--font);
   color: var(--text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -485,15 +491,15 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
   border: none;
   border-bottom: 2px solid transparent;
   color: var(--text-secondary);
-  font-family: var(--font);
-  font-size: var(--text-xs);
-  font-weight: 600;
+  font: 600 11px/1 var(--font);
+  letter-spacing: 0.02em;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--sp-2);
   cursor: pointer;
-  transition: all var(--t-fast);
+  transition: background-color var(--dur-fast) var(--ease-out-quart),
+              color            var(--dur-fast) var(--ease-out-quart);
 }
 
 .tab-btn:hover {
@@ -510,11 +516,9 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 .tab-btn .badge {
   background: var(--bg-raised);
   color: var(--text-secondary);
-  font-size: 10px;
-  font-family: var(--font);
+  font: normal 10px/1 var(--font);
   padding: 1px 6px;
   border-radius: 10px;
-  font-weight: normal;
 }
 
 .tab-btn.active .badge {
@@ -542,7 +546,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 }
 
 /* ================================================================
-   ASSET GRID
+   ASSET GRID (mirrors wd-card-asset-grid)
    ================================================================ */
 
 .asset-grid {
@@ -555,27 +559,27 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 }
 
 .asset-card {
-  background: var(--bg-surface);
+  background: var(--bg-panel);
   border: 1px solid var(--border-faint);
-  border-radius: var(--r-md);
+  border-radius: 6px;
   overflow: hidden;
   cursor: pointer;
-  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
+  transition: border-color var(--dur-fast) var(--ease-out-quart);
   display: flex;
   flex-direction: column;
 }
 
 .asset-card:hover {
-  border-color: var(--accent-border);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+  border-color: var(--border);
+}
+
+.asset-card:hover .asset-thumbnail img {
   filter: brightness(1.04);
 }
 
 .asset-card.selected {
   border-color: var(--accent);
-  background: var(--bg-panel);
-  box-shadow: 0 0 0 1px var(--accent-border);
+  background: var(--bg-raised);
 }
 
 .asset-thumbnail {
@@ -595,10 +599,12 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
   width: 100%;
   height: 100%;
   object-fit: cover;
+  display: block;
+  transition: filter var(--dur-fast) var(--ease-out-quart);
 }
 
 .asset-info {
-  padding: var(--sp-2);
+  padding: 8px;
   display: flex;
   flex-direction: column;
   gap: 3px;
@@ -607,8 +613,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 }
 
 .asset-filename {
-  font-weight: 500;
-  font-size: 11px;
+  font: 500 12px/1.3 var(--font);
   color: var(--text-primary);
   white-space: nowrap;
   overflow: hidden;
@@ -618,9 +623,9 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 .asset-meta {
   display: flex;
   gap: var(--sp-1);
-  font-size: 10px;
-  color: var(--text-secondary);
-  font-family: var(--font-mono);
+  font: 400 11px/1.3 var(--font-mono);
+  color: var(--text-tertiary);
+  font-variant-numeric: tabular-nums;
 }
 
 .asset-status-badge {
@@ -628,10 +633,8 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
   align-items: center;
   height: 18px;
   padding: 0 6px;
-  border-radius: 100px;
-  font-family: var(--font);
-  font-size: 9px;
-  font-weight: 600;
+  border-radius: 3px;
+  font: 600 10px/1 var(--font);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   width: fit-content;
@@ -692,8 +695,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 }
 
 .empty-state-title {
-  font-size: var(--text-sm);
-  font-weight: 600;
+  font: 600 13px/1.4 var(--font);
   color: var(--text-secondary);
 }
 
@@ -726,8 +728,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 }
 
 .details-header-label {
-  font-size: 10px;
-  font-weight: 600;
+  font: 600 11px/1 var(--font);
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--text-tertiary);
@@ -740,11 +741,10 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 }
 
 .details-label {
-  font-size: 9px;
-  font-weight: 600;
+  font: 600 10px/1 var(--font);
   text-transform: uppercase;
   color: var(--text-tertiary);
-  letter-spacing: 0.07em;
+  letter-spacing: 0.08em;
 }
 
 .details-value {
@@ -826,8 +826,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 .export-panel.hidden { display: none; }
 
 .export-panel-title {
-  font-size: 10px;
-  font-weight: 600;
+  font: 600 11px/1 var(--font);
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--accent);
@@ -838,21 +837,22 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 .export-panel .input {
   width: 100%;
   height: 32px;
-  padding: 0 var(--sp-2);
+  padding: 0 10px;
   background: var(--bg-deep);
   border: 1px solid var(--border);
-  border-radius: var(--r-sm);
+  border-radius: 4px;
   color: var(--text-primary);
-  font-size: var(--text-xs);
+  font: 400 13px/1 var(--font);
   margin-bottom: var(--sp-2);
   outline: none;
-  transition: border-color var(--t-fast), box-shadow var(--t-fast);
+  transition: border-color var(--dur-fast) var(--ease-out-quart);
 }
 
 .export-panel input[type="text"]:focus-visible,
 .export-panel .input:focus-visible {
   border-color: var(--accent-border);
-  box-shadow: 0 0 0 2px var(--accent-subtle);
+  outline: 2px solid var(--accent-subtle);
+  outline-offset: 1px;
 }
 
 .export-panel select {
@@ -887,8 +887,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 }
 
 .advanced-section-title {
-  font-size: 9px;
-  font-weight: 600;
+  font: 600 10px/1 var(--font);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: var(--text-tertiary);
@@ -924,7 +923,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 .action-row .btn { flex: 1; }
 
 /* ================================================================
-   SLIDE PANEL (design system pattern)
+   SLIDE PANEL (mirrors wd-slide-panel)
    ================================================================ */
 
 .slide-overlay {
@@ -978,7 +977,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
   padding: 18px;
   display: flex;
   flex-direction: column;
-  gap: var(--sp-4);
+  gap: 16px;
 }
 
 .slide-panel-footer {
@@ -1005,13 +1004,14 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
   padding: var(--sp-2) var(--sp-3);
   background: var(--bg-surface);
   border: 1px solid var(--border);
-  border-radius: var(--r-md);
+  border-radius: 6px;
   cursor: pointer;
-  transition: border-color var(--t-fast), background var(--t-fast);
+  transition: border-color var(--dur-fast) var(--ease-out-quart),
+              background    var(--dur-fast) var(--ease-out-quart);
 }
 
 .preset-card:hover {
-  border-color: var(--accent-border);
+  border-color: var(--border-strong);
   background: var(--bg-raised);
 }
 
@@ -1021,20 +1021,18 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 }
 
 .preset-card-title {
-  font-size: var(--text-xs);
-  font-weight: 600;
+  font: 600 12px/1 var(--font);
   color: var(--text-primary);
-  margin-bottom: 3px;
+  margin-bottom: 4px;
 }
 
 .preset-card-desc {
-  font-size: 10px;
+  font: 400 10px/1.4 var(--font-mono);
   color: var(--text-tertiary);
-  font-family: var(--font-mono);
 }
 
 /* ================================================================
-   CLIP LIST (for Hi-Res Relink)
+   CLIP LIST (for Hi-Res Relink — mirrors wd-list-row)
    ================================================================ */
 
 .clip-list-container {
@@ -1042,7 +1040,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
   min-height: 0;
   overflow-y: auto;
   border: 1px solid var(--border);
-  border-radius: var(--r-md);
+  border-radius: 6px;
   background: var(--bg-base);
 }
 
@@ -1057,12 +1055,12 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
   gap: var(--sp-2);
   padding: var(--sp-2) var(--sp-3);
   border-bottom: 1px solid var(--border-faint);
-  transition: background var(--t-fast);
+  transition: background-color var(--dur-fast) var(--ease-out-quart);
 }
 
 .clip-list-item:last-child { border-bottom: none; }
 
-.clip-list-item:hover { background: var(--bg-surface); }
+.clip-list-item:hover { background: var(--bg-hover); }
 
 .clip-list-item-checkbox {
   width: 14px;
@@ -1078,8 +1076,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 }
 
 .clip-list-item-name {
-  font-size: var(--text-xs);
-  font-weight: 500;
+  font: 500 12px/1 var(--font);
   color: var(--text-primary);
   white-space: nowrap;
   overflow: hidden;
@@ -1087,15 +1084,13 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 }
 
 .clip-list-item-meta {
-  font-size: 10px;
+  font: 400 11px/1.3 var(--font-mono);
   color: var(--text-tertiary);
-  font-family: var(--font-mono);
 }
 
 .clip-list-item-status {
   flex-shrink: 0;
-  font-size: 9px;
-  font-weight: 600;
+  font: 600 10px/1 var(--font);
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
@@ -1126,8 +1121,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 .relink-summary-icon { color: var(--signal-good); }
 
 .relink-summary-text {
-  font-size: var(--text-sm);
-  font-weight: 500;
+  font: 500 13px/1 var(--font);
   color: var(--text-primary);
 }
 
@@ -1146,7 +1140,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
   border: 1px solid rgba(245, 60, 65, 0.25);
   color: var(--signal-bad);
   padding: var(--sp-2) var(--sp-3);
-  border-radius: var(--r-sm);
+  border-radius: 4px;
   font-size: var(--text-xs);
   line-height: 1.5;
   margin-bottom: var(--sp-2);
@@ -1157,7 +1151,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
   border: 1px solid rgba(53, 187, 88, 0.25);
   color: var(--signal-good);
   padding: var(--sp-2) var(--sp-3);
-  border-radius: var(--r-sm);
+  border-radius: 4px;
   font-size: var(--text-xs);
   line-height: 1.5;
   margin-bottom: var(--sp-2);
@@ -1168,14 +1162,14 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
   border: 1px solid var(--accent-border);
   color: var(--accent);
   padding: var(--sp-2) var(--sp-3);
-  border-radius: var(--r-sm);
+  border-radius: 4px;
   font-size: var(--text-xs);
   line-height: 1.5;
   margin-bottom: var(--sp-2);
 }
 
 /* ================================================================
-   FORM GROUP (design system)
+   FORM GROUP (mirrors wd-form-group + wd-label)
    ================================================================ */
 
 .form-group {
@@ -1185,17 +1179,16 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 }
 
 .form-label {
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.07em;
+  font: 600 11px/1 var(--font);
+  letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--text-secondary);
+  color: var(--text-tertiary);
+  margin-bottom: 4px;
 }
 
 .form-hint {
-  font-size: var(--text-xs);
+  font: 400 11px/1.5 var(--font);
   color: var(--text-tertiary);
-  line-height: 1.5;
 }
 
 /* ================================================================
@@ -1251,3 +1244,40 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 
   .slide-panel { width: 100%; }
 }
+
+/* ================================================================
+   SKELETON SHIMMER
+   ================================================================ */
+
+@keyframes wd-shimmer {
+  0%   { background-position: -200% 0; }
+  100% { background-position:  200% 0; }
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--bg-surface) 0%,
+    var(--bg-hover)   50%,
+    var(--bg-surface) 100%
+  );
+  background-size: 200% 100%;
+  animation: wd-shimmer 1.8s ease-in-out infinite;
+  border-radius: 3px;
+}
+
+/* ================================================================
+   REDUCED MOTION
+   ================================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton,
+  .status-indicator.connecting {
+    animation: none;
+  }
+
+  *, *::before, *::after {
+    transition-duration: 0ms !important;
+    animation-duration:  0ms !important;
+  }
+}