diff --git a/assets/styles.css b/assets/styles.css
index 2182215..ce63cd5 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -7,13 +7,13 @@
    Reader Layout
    ========================================================================== */
 
-.reader {
+.ms-reader {
   display: flex;
   flex-direction: column;
   gap: var(--space-m);
 }
 
-.reader__header {
+.ms-reader__header {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -21,7 +21,7 @@
   justify-content: space-between;
 }
 
-.reader__actions {
+.ms-reader__actions {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-xs);
@@ -31,16 +31,16 @@
    Channel List
    ========================================================================== */
 
-.reader__channels {
+.ms-reader__channels {
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
 }
 
-.reader__channel {
+.ms-reader__channel {
   align-items: center;
   background: var(--color-offset);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-small);
   color: inherit;
   display: flex;
   gap: var(--space-s);
@@ -51,27 +51,27 @@
     box-shadow 0.2s ease;
 }
 
-.reader__channel:hover {
-  background: var(--color-offset-active);
+.ms-reader__channel:hover {
+  background: var(--color-offset-variant);
 }
 
-.reader__channel--active {
+.ms-reader__channel--active {
   background: var(--color-primary);
   color: var(--color-background);
 }
 
-.reader__channel-name {
+.ms-reader__channel-name {
   flex: 1;
   font-weight: 500;
 }
 
-.reader__channel-badge {
+.ms-reader__channel-badge {
   align-items: center;
   background: var(--color-primary);
   border-radius: 0.75rem;
   color: var(--color-background);
   display: inline-flex;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-s);
   font-weight: 600;
   height: 1.5rem;
   justify-content: center;
@@ -79,13 +79,13 @@
   padding: 0 var(--space-xs);
 }
 
-.reader__channel--active .reader__channel-badge {
+.ms-reader__channel--active .ms-reader__channel-badge {
   background: var(--color-background);
   color: var(--color-primary);
 }
 
 /* Dot indicator for boolean unread state */
-.reader__channel-badge--dot {
+.ms-reader__channel-badge--dot {
   height: 0.75rem;
   min-width: 0.75rem;
   padding: 0;
@@ -96,14 +96,14 @@
    Timeline
    ========================================================================== */
 
-.timeline {
+.ms-timeline {
   display: flex;
   flex-direction: column;
   gap: var(--space-m);
 }
 
-.timeline__paging {
-  border-top: 1px solid var(--color-offset);
+.ms-timeline__paging {
+  border-top: var(--border-width-thin) solid var(--color-offset);
   display: flex;
   gap: var(--space-m);
   justify-content: space-between;
@@ -114,10 +114,10 @@
    Item Card
    ========================================================================== */
 
-.item-card {
+.ms-item-card {
   background: var(--color-background);
-  border: 1px solid var(--color-offset);
-  border-radius: var(--border-radius);
+  border: var(--border-width-thin) solid var(--color-offset);
+  border-radius: var(--border-radius-small);
   display: block;
   overflow: hidden;
   transition:
@@ -125,21 +125,21 @@
     transform 0.1s ease;
 }
 
-.item-card:hover {
-  border-color: var(--color-offset-active);
+.ms-item-card:hover {
+  border-color: var(--color-offset-variant);
 }
 
 /* Unread state - yellow glow (Aperture pattern) */
-.item-card:not(.item-card--read) {
-  border-color: rgba(255, 204, 0, 0.5);
-  box-shadow: 0 0 10px 0 rgba(255, 204, 0, 0.8);
+.ms-item-card:not(.ms-item-card--read) {
+  border-color: hsl(var(--tint-yellow) 50% / 0.5);
+  box-shadow: 0 0 10px 0 hsl(var(--tint-yellow) 50% / 0.8);
 }
 
-.item-card--read {
+.ms-item-card--read {
   opacity: 0.85;
 }
 
-.item-card__link {
+.ms-item-card__link {
   color: inherit;
   display: block;
   padding: var(--space-m);
@@ -147,15 +147,15 @@
 }
 
 /* Author */
-.item-card__author {
+.ms-item-card__author {
   align-items: center;
   display: flex;
   gap: var(--space-s);
   margin-bottom: var(--space-s);
 }
 
-.item-card__author-photo {
-  border: 1px solid var(--color-offset);
+.ms-item-card__author-photo {
+  border: var(--border-width-thin) solid var(--color-offset);
   border-radius: 50%;
   flex-shrink: 0;
   height: 40px;
@@ -163,84 +163,84 @@
   width: 40px;
 }
 
-.item-card__author-info {
+.ms-item-card__author-info {
   display: flex;
   flex-direction: column;
   min-width: 0;
 }
 
-.item-card__author-name {
-  font-size: var(--font-size-body);
+.ms-item-card__author-name {
+  font-size: var(--font-size-m);
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.item-card__source {
-  color: var(--color-text-muted);
-  font-size: var(--font-size-small);
+.ms-item-card__source {
+  color: var(--color-on-offset);
+  font-size: var(--font-size-s);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 /* Post type indicator */
-.item-card__type {
+.ms-item-card__type {
   align-items: center;
   background: var(--color-offset);
-  border-radius: var(--border-radius);
-  color: var(--color-text-muted);
+  border-radius: var(--border-radius-small);
+  color: var(--color-on-offset);
   display: inline-flex;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-s);
   gap: var(--space-xs);
   margin-bottom: var(--space-s);
   padding: var(--space-xs) var(--space-s);
 }
 
-.item-card__type svg {
+.ms-item-card__type svg {
   height: 1em;
   width: 1em;
 }
 
 /* Context bar for interactions (Aperture pattern) */
-.item-card__context {
+.ms-item-card__context {
   align-items: center;
   background: var(--color-offset);
   display: flex;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-s);
   gap: var(--space-xs);
   margin: calc(-1 * var(--space-m));
   margin-bottom: var(--space-s);
   padding: var(--space-s) var(--space-m);
 }
 
-.item-card__context a {
+.ms-item-card__context a {
   color: var(--color-primary);
   text-decoration: none;
 }
 
-.item-card__context a:hover {
+.ms-item-card__context a:hover {
   text-decoration: underline;
 }
 
-.item-card__context svg {
+.ms-item-card__context svg {
   flex-shrink: 0;
   height: 1em;
   width: 1em;
 }
 
 /* Title */
-.item-card__title {
-  font-size: var(--font-size-heading-4);
+.ms-item-card__title {
+  font-size: var(--font-size-l);
   font-weight: 600;
   line-height: 1.3;
   margin-bottom: var(--space-xs);
 }
 
 /* Content with expandable overflow (Aperture pattern) */
-.item-card__content {
-  color: var(--color-text);
+.ms-item-card__content {
+  color: var(--color-on-background);
   line-height: 1.5;
   margin-bottom: var(--space-s);
   max-height: 200px;
@@ -248,11 +248,11 @@
   position: relative;
 }
 
-.item-card__content--expanded {
+.ms-item-card__content--expanded {
   max-height: none;
 }
 
-.item-card__content--truncated::after {
+.ms-item-card__content--truncated::after {
   background: linear-gradient(to bottom, transparent, var(--color-background));
   bottom: 0;
   content: "";
@@ -263,18 +263,18 @@
   right: 0;
 }
 
-.item-card__read-more {
+.ms-item-card__read-more {
   color: var(--color-primary);
   cursor: pointer;
   display: block;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-s);
   padding: var(--space-xs);
   text-align: center;
 }
 
 /* Photo grid (Aperture multi-photo pattern) */
-.item-card__photos {
-  border-radius: var(--border-radius);
+.ms-item-card__photos {
+  border-radius: var(--border-radius-small);
   display: grid;
   gap: 2px;
   margin-bottom: var(--space-s);
@@ -282,87 +282,87 @@
 }
 
 /* Single photo */
-.item-card__photos--1 {
+.ms-item-card__photos--1 {
   grid-template-columns: 1fr;
 }
 
 /* 2 photos - side by side */
-.item-card__photos--2 {
+.ms-item-card__photos--2 {
   grid-template-columns: 1fr 1fr;
 }
 
 /* 3 photos - one large, two small */
-.item-card__photos--3 {
+.ms-item-card__photos--3 {
   grid-template-columns: 2fr 1fr;
   grid-template-rows: 1fr 1fr;
 }
 
 /* 4+ photos - grid */
-.item-card__photos--4 {
+.ms-item-card__photos--4 {
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
 }
 
 /* Base photo styles - must come before specific overrides */
-.item-card__photo {
+.ms-item-card__photo {
   background: var(--color-offset);
   height: 150px;
   object-fit: cover;
   width: 100%;
 }
 
-.item-card__photos--1 .item-card__photo {
+.ms-item-card__photos--1 .ms-item-card__photo {
   height: auto;
   max-height: 400px;
 }
 
-.item-card__photos--3 .item-card__photo:first-child {
+.ms-item-card__photos--3 .ms-item-card__photo:first-child {
   grid-row: 1 / 3;
   height: 302px;
 }
 
 /* Video/Audio */
-.item-card__video,
-.item-card__audio {
-  border-radius: var(--border-radius);
+.ms-item-card__video,
+.ms-item-card__audio {
+  border-radius: var(--border-radius-small);
   margin-bottom: var(--space-s);
   width: 100%;
 }
 
 /* Footer */
-.item-card__footer {
+.ms-item-card__footer {
   align-items: center;
-  border-top: 1px solid var(--color-offset);
-  color: var(--color-text-muted);
+  border-top: var(--border-width-thin) solid var(--color-offset);
+  color: var(--color-on-offset);
   display: flex;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-s);
   justify-content: space-between;
   padding-top: var(--space-s);
 }
 
-.item-card__date {
+.ms-item-card__date {
   color: inherit;
 }
 
-.item-card__unread {
-  color: var(--color-warning, #ffcc00);
+.ms-item-card__unread {
+  color: var(--color-yellow50);
   font-size: 0.75rem;
 }
 
 /* Categories/Tags */
-.item-card__categories {
+.ms-item-card__categories {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-xs);
   margin-bottom: var(--space-s);
 }
 
-.item-card__category {
+.ms-item-card__category {
   background: var(--color-offset);
-  border-radius: var(--border-radius);
-  color: var(--color-text-muted);
+  border-radius: var(--border-radius-small);
+  color: var(--color-on-offset);
   display: inline-block;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-s);
   padding: 2px var(--space-xs);
 }
 
@@ -370,79 +370,79 @@
    Item Actions (inline on cards)
    ========================================================================== */
 
-.item-actions {
-  border-top: 1px solid var(--color-offset);
+.ms-item-actions {
+  border-top: var(--border-width-thin) solid var(--color-offset);
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-s);
   padding-top: var(--space-s);
 }
 
-.item-actions__button {
+.ms-item-actions__button {
   align-items: center;
   background: transparent;
-  border: 1px solid var(--color-offset);
-  border-radius: var(--border-radius);
-  color: var(--color-text-muted);
+  border: var(--border-width-thin) solid var(--color-offset);
+  border-radius: var(--border-radius-small);
+  color: var(--color-on-offset);
   cursor: pointer;
   display: inline-flex;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-s);
   gap: var(--space-xs);
   padding: var(--space-xs) var(--space-s);
   text-decoration: none;
   transition: all 0.2s ease;
 }
 
-.item-actions__button:hover {
+.ms-item-actions__button:hover {
   background: var(--color-offset);
-  border-color: var(--color-offset-active);
-  color: var(--color-text);
+  border-color: var(--color-offset-variant);
+  color: var(--color-on-background);
 }
 
-.item-actions__button svg {
+.ms-item-actions__button svg {
   height: 1em;
   width: 1em;
 }
 
-.item-actions__button--primary {
+.ms-item-actions__button--primary {
   background: var(--color-primary);
   border-color: var(--color-primary);
   color: var(--color-background);
 }
 
-.item-actions__button--primary:hover {
-  background: var(--color-primary-dark, var(--color-primary));
-  border-color: var(--color-primary-dark, var(--color-primary));
+.ms-item-actions__button--primary:hover {
+  background: var(--color-primary-variant);
+  border-color: var(--color-primary-variant);
   color: var(--color-background);
 }
 
 /* Mark as read — split button group */
-.item-actions__mark-read-group {
+.ms-item-actions__mark-read-group {
   display: inline-flex;
   margin-left: auto;
   position: relative;
 }
 
-.item-actions__mark-read-group .item-actions__mark-read {
+.ms-item-actions__mark-read-group .ms-item-actions__mark-read {
   border-bottom-right-radius: 0;
   border-right: 0;
   border-top-right-radius: 0;
   margin-left: 0;
 }
 
-.item-actions__mark-read-caret {
+.ms-item-actions__mark-read-caret {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
   font-size: 0.625rem;
   padding: var(--space-xs) 6px;
 }
 
-.item-actions__mark-read-popover {
+.ms-item-actions__mark-read-popover {
   background: var(--color-background);
-  border: 1px solid var(--color-offset-active);
-  border-radius: var(--border-radius);
+  border: var(--border-width-thin) solid var(--color-offset-variant);
+  border-radius: var(--border-radius-small);
   bottom: calc(100% + 4px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 2px 8px hsl(var(--tint-neutral) 10% / 0.15);
   padding: var(--space-xs);
   position: absolute;
   right: 0;
@@ -450,30 +450,30 @@
   z-index: 10;
 }
 
-.item-actions__mark-source-read {
+.ms-item-actions__mark-source-read {
   background: transparent;
   border: 0;
-  border-radius: var(--border-radius);
-  color: var(--color-text);
+  border-radius: var(--border-radius-small);
+  color: var(--color-on-background);
   cursor: pointer;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-s);
   padding: var(--space-xs) var(--space-s);
   text-align: left;
   width: 100%;
 }
 
-.item-actions__mark-source-read:hover {
+.ms-item-actions__mark-source-read:hover {
   background: var(--color-offset);
 }
 
 /* Mark as read button (standalone, no split group) */
-.item-actions__mark-read {
+.ms-item-actions__mark-read {
   margin-left: auto;
 }
 
 /* Save for later button */
-.item-actions__save-later--saved {
-  color: var(--color-accent, #4a9eff);
+.ms-item-actions__save-later--saved {
+  color: var(--color-primary-on-background);
   opacity: 0.6;
 }
 
@@ -481,84 +481,84 @@
    Single Item View
    ========================================================================== */
 
-.item {
+.ms-item {
   max-width: 40rem;
 }
 
-.item__header {
+.ms-item__header {
   margin-bottom: var(--space-m);
 }
 
-.item__author {
+.ms-item__author {
   align-items: center;
   display: flex;
   gap: var(--space-s);
   margin-bottom: var(--space-m);
 }
 
-.item__author-photo {
+.ms-item__author-photo {
   border-radius: 50%;
   height: 48px;
   object-fit: cover;
   width: 48px;
 }
 
-.item__author-info {
+.ms-item__author-info {
   display: flex;
   flex-direction: column;
 }
 
-.item__author-name {
+.ms-item__author-name {
   font-weight: 600;
 }
 
-.item__date {
-  color: var(--color-text-muted);
-  font-size: var(--font-size-small);
+.ms-item__date {
+  color: var(--color-on-offset);
+  font-size: var(--font-size-s);
 }
 
-.item__title {
-  font-size: var(--font-size-heading-2);
+.ms-item__title {
+  font-size: var(--font-size-xl);
   margin-bottom: var(--space-m);
 }
 
-.item__content {
+.ms-item__content {
   line-height: 1.6;
   margin-bottom: var(--space-m);
 }
 
-.item__content img {
-  border-radius: var(--border-radius);
+.ms-item__content img {
+  border-radius: var(--border-radius-small);
   height: auto;
   max-width: 100%;
 }
 
-.item__photos {
+.ms-item__photos {
   display: grid;
   gap: var(--space-s);
   margin-bottom: var(--space-m);
 }
 
-.item__photo {
-  border-radius: var(--border-radius);
+.ms-item__photo {
+  border-radius: var(--border-radius-small);
   width: 100%;
 }
 
-.item__context {
+.ms-item__context {
   background: var(--color-offset);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-small);
   margin-bottom: var(--space-m);
   padding: var(--space-m);
 }
 
-.item__context-label {
-  color: var(--color-text-muted);
-  font-size: var(--font-size-small);
+.ms-item__context-label {
+  color: var(--color-on-offset);
+  font-size: var(--font-size-s);
   margin-bottom: var(--space-xs);
 }
 
-.item__actions {
-  border-top: 1px solid var(--color-offset);
+.ms-item__actions {
+  border-top: var(--border-width-thin) solid var(--color-offset);
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-s);
@@ -569,7 +569,7 @@
    Channel Header
    ========================================================================== */
 
-.channel__header {
+.ms-channel__header {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -578,7 +578,7 @@
   margin-bottom: var(--space-m);
 }
 
-.channel__actions {
+.ms-channel__actions {
   display: flex;
   gap: var(--space-xs);
 }
@@ -587,13 +587,13 @@
    Feeds Management
    ========================================================================== */
 
-.feeds {
+.ms-feeds {
   display: flex;
   flex-direction: column;
   gap: var(--space-m);
 }
 
-.feeds__header {
+.ms-feeds__header {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -601,65 +601,65 @@
   justify-content: space-between;
 }
 
-.feeds__list {
+.ms-feeds__list {
   display: flex;
   flex-direction: column;
   gap: var(--space-s);
 }
 
-.feeds__item {
+.ms-feeds__item {
   align-items: center;
   background: var(--color-offset);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-small);
   display: flex;
   gap: var(--space-m);
   padding: var(--space-m);
 }
 
-.feeds__photo {
-  border-radius: var(--border-radius);
+.ms-feeds__photo {
+  border-radius: var(--border-radius-small);
   flex-shrink: 0;
   height: 48px;
   object-fit: cover;
   width: 48px;
 }
 
-.feeds__info {
+.ms-feeds__info {
   flex: 1;
   min-width: 0;
 }
 
-.feeds__name {
+.ms-feeds__name {
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.feeds__url {
-  color: var(--color-text-muted);
-  font-size: var(--font-size-small);
+.ms-feeds__url {
+  color: var(--color-on-offset);
+  font-size: var(--font-size-s);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.feeds__actions {
+.ms-feeds__actions {
   flex-shrink: 0;
 }
 
-.feeds__add {
+.ms-feeds__add {
   background: var(--color-offset);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-small);
   padding: var(--space-m);
 }
 
-.feeds__form {
+.ms-feeds__form {
   display: flex;
   gap: var(--space-s);
 }
 
-.feeds__form input {
+.ms-feeds__form input {
   flex: 1;
 }
 
@@ -667,48 +667,48 @@
    Search
    ========================================================================== */
 
-.search {
+.ms-search {
   display: flex;
   flex-direction: column;
   gap: var(--space-m);
 }
 
-.search__form {
+.ms-search__form {
   display: flex;
   gap: var(--space-s);
 }
 
-.search__form input {
+.ms-search__form input {
   flex: 1;
 }
 
-.search__results {
+.ms-search__results {
   margin-top: var(--space-m);
 }
 
-.search__list {
+.ms-search__list {
   display: flex;
   flex-direction: column;
   gap: var(--space-s);
 }
 
-.search__item {
+.ms-search__item {
   align-items: center;
   background: var(--color-offset);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-small);
   display: flex;
   justify-content: space-between;
   padding: var(--space-m);
 }
 
-.search__feed {
+.ms-search__feed {
   flex: 1;
   min-width: 0;
 }
 
-.search__url {
-  color: var(--color-text-muted);
-  font-size: var(--font-size-small);
+.ms-search__url {
+  color: var(--color-on-offset);
+  font-size: var(--font-size-s);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -718,20 +718,20 @@
    Compose
    ========================================================================== */
 
-.compose {
+.ms-compose {
   max-width: 40rem;
 }
 
-.compose__context {
+.ms-compose__context {
   background: var(--color-offset);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-small);
   margin-bottom: var(--space-m);
   padding: var(--space-m);
 }
 
-.compose__counter {
-  color: var(--color-text-muted);
-  font-size: var(--font-size-small);
+.ms-compose__counter {
+  color: var(--color-on-offset);
+  font-size: var(--font-size-s);
   margin-top: var(--space-xs);
   text-align: right;
 }
@@ -740,19 +740,19 @@
    Settings
    ========================================================================== */
 
-.settings {
+.ms-settings {
   max-width: 40rem;
 }
 
-.settings .divider {
-  border-top: 1px solid var(--color-offset);
+.ms-settings .divider {
+  border-top: var(--border-width-thin) solid var(--color-offset);
   margin: var(--space-l) 0;
 }
 
-.settings .danger-zone {
-  background: rgba(var(--color-error-rgb, 255, 0, 0), 0.1);
-  border: 1px solid var(--color-error);
-  border-radius: var(--border-radius);
+.ms-settings .danger-zone {
+  background: var(--color-red90);
+  border: var(--border-width-thin) solid var(--color-red45);
+  border-radius: var(--border-radius-small);
   padding: var(--space-m);
 }
 
@@ -760,8 +760,8 @@
    Keyboard Navigation Focus
    ========================================================================== */
 
-.item-card:focus-within,
-.item-card.item-card--focused {
+.ms-item-card:focus-within,
+.ms-item-card.ms-item-card--focused {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
@@ -770,13 +770,13 @@
    Empty States
    ========================================================================== */
 
-.reader__empty {
-  color: var(--color-text-muted);
+.ms-reader__empty {
+  color: var(--color-on-offset);
   padding: var(--space-xl);
   text-align: center;
 }
 
-.reader__empty svg {
+.ms-reader__empty svg {
   height: 4rem;
   margin-bottom: var(--space-m);
   opacity: 0.5;
@@ -788,32 +788,32 @@
    ========================================================================== */
 
 @media (max-width: 640px) {
-  .item-card__photos--3 {
+  .ms-item-card__photos--3 {
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto auto;
   }
 
-  .item-card__photos--3 .item-card__photo:first-child {
+  .ms-item-card__photos--3 .ms-item-card__photo:first-child {
     grid-column: 1 / 3;
     grid-row: 1;
     height: 200px;
   }
 
-  .item-card__photos--3 .item-card__photo:nth-child(2),
-  .item-card__photos--3 .item-card__photo:nth-child(3) {
+  .ms-item-card__photos--3 .ms-item-card__photo:nth-child(2),
+  .ms-item-card__photos--3 .ms-item-card__photo:nth-child(3) {
     height: 100px;
   }
 
-  .feeds__item {
+  .ms-feeds__item {
     flex-wrap: wrap;
   }
 
-  .feeds__info {
+  .ms-feeds__info {
     order: 1;
     width: calc(100% - 64px);
   }
 
-  .feeds__actions {
+  .ms-feeds__actions {
     margin-top: var(--space-s);
     order: 2;
     width: 100%;
@@ -826,7 +826,7 @@
 
 /* Extend Indiekit badges with small variant for inline use */
 .badge--small {
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-s);
   padding: 2px var(--space-xs);
 }
 
@@ -834,33 +834,33 @@
    Search Enhancements (feed validation)
    ========================================================================== */
 
-.search__name {
+.ms-search__name {
   display: block;
   font-weight: 600;
   margin-bottom: var(--space-xs);
 }
 
-.search__type {
+.ms-search__type {
   margin-left: var(--space-xs);
 }
 
-.search__error {
-  color: var(--color-error, #ff4444);
+.ms-search__error {
+  color: var(--color-red45);
   display: block;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-s);
   margin-top: var(--space-xs);
 }
 
-.search__item--invalid {
+.ms-search__item--invalid {
   opacity: 0.7;
 }
 
-.search__item--comments {
-  border-left: 3px solid var(--color-warning, #ffcc00);
+.ms-search__item--comments {
+  border-left: 3px solid var(--color-yellow50);
 }
 
 
-.search__subscribe {
+.ms-search__subscribe {
   align-items: center;
   display: flex;
   gap: var(--space-s);
@@ -870,72 +870,72 @@
    Notices (inline errors, warnings)
    ========================================================================== */
 
-.notice {
-  border-radius: var(--border-radius-small, var(--border-radius));
+.ms-notice {
+  border-radius: var(--border-radius-small);
   margin-bottom: var(--space-m);
   padding: var(--space-m);
 }
 
-.notice--error {
-  background: var(--color-red90, #fef2f2);
-  border: 1px solid var(--color-error, var(--color-red45));
-  color: var(--color-red10, #7f1d1d);
+.ms-notice--error {
+  background: var(--color-red90);
+  border: var(--border-width-thin) solid var(--color-red45);
+  color: var(--color-red10);
 }
 
-.notice--warning {
-  background: var(--color-yellow90, #fefce8);
-  border: 1px solid var(--color-yellow50, #eab308);
-  color: var(--color-yellow10, #713f12);
+.ms-notice--warning {
+  background: var(--color-yellow90);
+  border: var(--border-width-thin) solid var(--color-yellow50);
+  color: var(--color-yellow10);
 }
 
-.notice--success {
-  background: var(--color-green90, #f0fdf4);
-  border: 1px solid var(--color-success, var(--color-green50));
-  color: var(--color-green10, #14532d);
+.ms-notice--success {
+  background: var(--color-green90);
+  border: var(--border-width-thin) solid var(--color-green50);
+  color: var(--color-green10);
 }
 
 /* ==========================================================================
    Feed Management Enhancements
    ========================================================================== */
 
-.feeds__item--error {
-  border-left: 3px solid var(--color-error, #ff4444);
+.ms-feeds__item--error {
+  border-left: 3px solid var(--color-red45);
 }
 
-.feeds__error {
-  color: var(--color-error, #ff4444);
+.ms-feeds__error {
+  color: var(--color-red45);
   display: block;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-s);
   margin-top: var(--space-xs);
 }
 
-.feeds__error-count {
-  color: var(--color-warning, #ffcc00);
+.ms-feeds__error-count {
+  color: var(--color-yellow50);
   display: block;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-s);
 }
 
-.feeds__meta {
-  color: var(--color-text-muted);
+.ms-feeds__meta {
+  color: var(--color-on-offset);
   display: block;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-s);
 }
 
-.feeds__details {
+.ms-feeds__details {
   display: flex;
   flex-direction: column;
   flex: 1;
   min-width: 0;
 }
 
-.feeds__actions {
+.ms-feeds__actions {
   align-items: center;
   display: flex;
   flex-shrink: 0;
   gap: var(--space-xs);
 }
 
-.feeds__actions form {
+.ms-feeds__actions form {
   display: inline;
   margin: 0;
 }
@@ -945,51 +945,51 @@
    Feed Edit Page
    ========================================================================== */
 
-.feed-edit {
+.ms-feed-edit {
   max-width: 40rem;
 }
 
-.feed-edit__current {
+.ms-feed-edit__current {
   background: var(--color-offset);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-small);
   margin-bottom: var(--space-l);
   padding: var(--space-m);
 }
 
-.feed-edit__url {
-  color: var(--color-text-muted);
-  font-size: var(--font-size-small);
+.ms-feed-edit__url {
+  color: var(--color-on-offset);
+  font-size: var(--font-size-s);
   overflow-wrap: break-word;
   word-break: break-all;
 }
 
-.feed-edit__title {
+.ms-feed-edit__title {
   font-weight: 600;
 }
 
-.feed-edit__form {
+.ms-feed-edit__form {
   margin-bottom: var(--space-l);
 }
 
-.feed-edit__help {
-  color: var(--color-text-muted);
-  font-size: var(--font-size-small);
+.ms-feed-edit__help {
+  color: var(--color-on-offset);
+  font-size: var(--font-size-s);
   margin-bottom: var(--space-m);
 }
 
-.feed-edit__actions {
+.ms-feed-edit__actions {
   display: flex;
   flex-direction: column;
   gap: var(--space-m);
 }
 
-.feed-edit__action {
+.ms-feed-edit__action {
   background: var(--color-offset);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-small);
   padding: var(--space-m);
 }
 
-.feed-edit__action p {
+.ms-feed-edit__action p {
   margin-bottom: var(--space-s);
 }
 
@@ -997,54 +997,54 @@
    Actor Profile
    ========================================================================== */
 
-.actor-profile {
+.ms-actor-profile {
   background: var(--color-offset);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-small);
   margin-bottom: var(--space-m);
   padding: var(--space-m);
 }
 
-.actor-profile__header {
+.ms-actor-profile__header {
   align-items: flex-start;
   display: flex;
   gap: var(--space-m);
 }
 
-.actor-profile__avatar {
+.ms-actor-profile__avatar {
   border-radius: 50%;
   flex-shrink: 0;
   object-fit: cover;
 }
 
-.actor-profile__info {
+.ms-actor-profile__info {
   flex: 1;
   min-width: 0;
 }
 
-.actor-profile__name {
+.ms-actor-profile__name {
   font-size: 1.25em;
   margin: 0 0 2px;
 }
 
-.actor-profile__handle {
-  color: var(--color-text-muted, #666);
+.ms-actor-profile__handle {
+  color: var(--color-on-offset);
   font-size: 0.9em;
 }
 
-.actor-profile__summary {
+.ms-actor-profile__summary {
   font-size: 0.9em;
   margin: var(--space-xs) 0 0;
 }
 
-.actor-profile__stats {
-  color: var(--color-text-muted, #666);
+.ms-actor-profile__stats {
+  color: var(--color-on-offset);
   display: flex;
   font-size: 0.85em;
   gap: var(--space-m);
   margin-top: var(--space-xs);
 }
 
-.actor-profile__actions {
+.ms-actor-profile__actions {
   display: flex;
   gap: var(--space-s);
   margin-top: var(--space-s);
@@ -1054,8 +1054,8 @@
    AP Badge
    ========================================================================== */
 
-.item-card__badge {
-  border-radius: 3px;
+.ms-item-card__badge {
+  border-radius: var(--border-radius-small);
   display: inline-block;
   font-size: 0.7em;
   font-weight: 600;
@@ -1066,69 +1066,69 @@
   vertical-align: middle;
 }
 
-.item-card__badge--ap {
-  background: #7c3aed20;
-  color: #7c3aed;
+.ms-item-card__badge--ap {
+  background: hsl(var(--tint-purple) 45% / 0.12);
+  color: var(--color-purple45);
 }
 
 /* ==========================================================================
    Breadcrumbs
    ========================================================================== */
 
-.breadcrumbs {
+.ms-breadcrumbs {
   margin-bottom: var(--space-xs);
 }
 
-.breadcrumbs__list {
+.ms-breadcrumbs__list {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-s);
   gap: 0;
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-.breadcrumbs__item::before {
-  color: var(--color-text-muted);
+.ms-breadcrumbs__item::before {
+  color: var(--color-on-offset);
   content: "/";
   margin: 0 var(--space-xs);
 }
 
-.breadcrumbs__item:first-child::before {
+.ms-breadcrumbs__item:first-child::before {
   content: none;
   margin: 0;
 }
 
-.breadcrumbs__link {
+.ms-breadcrumbs__link {
   color: var(--color-primary);
   text-decoration: none;
 }
 
-.breadcrumbs__link:hover {
+.ms-breadcrumbs__link:hover {
   text-decoration: underline;
 }
 
-.breadcrumbs__current {
-  color: var(--color-text-muted);
+.ms-breadcrumbs__current {
+  color: var(--color-on-offset);
 }
 
 /* ==========================================================================
    View Switcher
    ========================================================================== */
 
-.view-switcher {
+.ms-view-switcher {
   display: flex;
   gap: var(--space-xs);
   padding: var(--space-xs) 0;
 }
 
-.view-switcher__button {
+.ms-view-switcher__button {
   align-items: center;
-  border: 1px solid var(--color-border, #ddd);
-  border-radius: var(--border-radius);
-  color: var(--color-text-muted);
+  border: var(--border-width-thin) solid var(--color-outline);
+  border-radius: var(--border-radius-small);
+  color: var(--color-on-offset);
   display: flex;
   justify-content: center;
   padding: var(--space-xs);
@@ -1136,33 +1136,33 @@
   transition: background-color 0.2s ease, color 0.2s ease;
 }
 
-.view-switcher__button:hover {
+.ms-view-switcher__button:hover {
   background: var(--color-offset);
-  color: var(--color-text);
+  color: var(--color-on-background);
 }
 
-.view-switcher__button--active {
-  background: var(--color-primary, #333);
-  border-color: var(--color-primary, #333);
-  color: #fff;
+.ms-view-switcher__button--active {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--color-on-primary);
 }
 
-.view-switcher__button--active:hover {
-  background: var(--color-primary, #333);
-  color: #fff;
+.ms-view-switcher__button--active:hover {
+  background: var(--color-primary);
+  color: var(--color-on-primary);
 }
 
 /* ==========================================================================
    Timeline View (all channels chronological)
    ========================================================================== */
 
-.timeline-view {
+.ms-timeline-view {
   display: flex;
   flex-direction: column;
   gap: var(--space-m);
 }
 
-.timeline-view__header {
+.ms-timeline-view__header {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -1170,13 +1170,13 @@
   justify-content: space-between;
 }
 
-.timeline-view__item {
+.ms-timeline-view__item {
   position: relative;
 }
 
-.timeline-view__channel-badge {
-  border-radius: 3px;
-  color: #fff;
+.ms-timeline-view__channel-badge {
+  border-radius: var(--border-radius-small);
+  color: var(--color-on-primary);
   display: inline-block;
   font-size: 0.6875rem;
   font-weight: 600;
@@ -1187,14 +1187,14 @@
   text-transform: uppercase;
 }
 
-.timeline-view__filter {
+.ms-timeline-view__filter {
   position: relative;
 }
 
-.timeline-view__filter-form {
+.ms-timeline-view__filter-form {
   background: var(--color-background);
-  border: 1px solid var(--color-border, #ddd);
-  border-radius: var(--border-radius);
+  border: var(--border-width-thin) solid var(--color-outline);
+  border-radius: var(--border-radius-small);
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
@@ -1206,15 +1206,15 @@
   z-index: 10;
 }
 
-.timeline-view__filter-label {
+.ms-timeline-view__filter-label {
   align-items: center;
   cursor: pointer;
   display: flex;
   gap: var(--space-xs);
 }
 
-.timeline-view__filter-color {
-  border-radius: 2px;
+.ms-timeline-view__filter-color {
+  border-radius: var(--border-radius-small);
   display: inline-block;
   height: 12px;
   width: 12px;
@@ -1224,27 +1224,27 @@
    Compact Item Card (Deck view)
    ========================================================================== */
 
-.item-card-compact {
+.ms-item-card-compact {
   background: var(--color-background);
-  border: 1px solid var(--color-border, #e0e0e0);
-  border-radius: var(--border-radius);
+  border: var(--border-width-thin) solid var(--color-outline);
+  border-radius: var(--border-radius-small);
   overflow: hidden;
   transition: background-color 0.2s ease;
 }
 
-.item-card-compact:hover {
+.ms-item-card-compact:hover {
   background: var(--color-offset);
 }
 
-.item-card-compact--read {
+.ms-item-card-compact--read {
   opacity: 0.7;
 }
 
-.item-card-compact:not(.item-card-compact--read) {
-  border-left: 3px solid rgba(255, 204, 0, 0.8);
+.ms-item-card-compact:not(.ms-item-card-compact--read) {
+  border-left: 3px solid hsl(var(--tint-yellow) 50% / 0.8);
 }
 
-.item-card-compact__link {
+.ms-item-card-compact__link {
   color: inherit;
   display: flex;
   gap: var(--space-xs);
@@ -1252,21 +1252,21 @@
   text-decoration: none;
 }
 
-.item-card-compact__photo {
-  border-radius: var(--border-radius);
+.ms-item-card-compact__photo {
+  border-radius: var(--border-radius-small);
   flex-shrink: 0;
   height: 60px;
   object-fit: cover;
   width: 60px;
 }
 
-.item-card-compact__body {
+.ms-item-card-compact__body {
   flex: 1;
   min-width: 0;
   overflow: hidden;
 }
 
-.item-card-compact__title {
+.ms-item-card-compact__title {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
@@ -1277,10 +1277,10 @@
   overflow: hidden;
 }
 
-.item-card-compact__text {
+.ms-item-card-compact__text {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
-  color: var(--color-text-muted);
+  color: var(--color-on-offset);
   display: -webkit-box;
   font-size: 0.8125rem;
   line-height: 1.4;
@@ -1288,28 +1288,28 @@
   overflow: hidden;
 }
 
-.item-card-compact__meta {
-  color: var(--color-text-muted);
+.ms-item-card-compact__meta {
+  color: var(--color-on-offset);
   display: flex;
   font-size: 0.75rem;
   gap: var(--space-xs);
   margin-top: 2px;
 }
 
-.item-card-compact__source {
+.ms-item-card-compact__source {
   font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.item-card-compact__date {
+.ms-item-card-compact__date {
   flex-shrink: 0;
   white-space: nowrap;
 }
 
-.item-card-compact__unread {
-  color: rgba(255, 204, 0, 0.9);
+.ms-item-card-compact__unread {
+  color: hsl(var(--tint-yellow) 50% / 0.9);
   flex-shrink: 0;
   font-size: 0.625rem;
 }
@@ -1318,13 +1318,13 @@
    Deck View (TweetDeck-style columns)
    ========================================================================== */
 
-.deck {
+.ms-deck {
   display: flex;
   flex-direction: column;
   gap: var(--space-m);
 }
 
-.deck__header {
+.ms-deck__header {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -1332,7 +1332,7 @@
   justify-content: space-between;
 }
 
-.deck__columns {
+.ms-deck__columns {
   display: flex;
   gap: var(--space-m);
   overflow-x: auto;
@@ -1340,16 +1340,16 @@
   scroll-snap-type: x mandatory;
 }
 
-.deck__column {
+.ms-deck__column {
   flex-shrink: 0;
   scroll-snap-align: start;
   width: 320px;
 }
 
-.deck__column-header {
+.ms-deck__column-header {
   align-items: center;
   background: var(--color-offset);
-  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
   display: flex;
   gap: var(--space-s);
   justify-content: space-between;
@@ -1359,13 +1359,13 @@
   z-index: 1;
 }
 
-.deck__column-name {
+.ms-deck__column-name {
   color: inherit;
   font-weight: 600;
   text-decoration: none;
 }
 
-.deck__column-items {
+.ms-deck__column-items {
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
@@ -1374,28 +1374,28 @@
   padding: var(--space-xs);
 }
 
-.deck__column-empty {
-  color: var(--color-text-muted);
+.ms-deck__column-empty {
+  color: var(--color-on-offset);
   font-size: 0.875rem;
   padding: var(--space-m);
   text-align: center;
 }
 
-.deck__column-more {
+.ms-deck__column-more {
   display: block;
   margin-top: var(--space-xs);
   text-align: center;
 }
 
 /* Deck settings */
-.deck-settings__channels {
+.ms-deck-settings__channels {
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
   margin: var(--space-m) 0;
 }
 
-.deck-settings__channel {
+.ms-deck-settings__channel {
   align-items: center;
   cursor: pointer;
   display: flex;
diff --git a/package.json b/package.json
index 4a11850..977fb41 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-endpoint-microsub",
-  "version": "1.0.45",
+  "version": "1.0.46",
   "description": "Microsub endpoint for Indiekit. Enables subscribing to feeds and reading content using the Microsub protocol.",
   "keywords": [
     "indiekit",
diff --git a/views/actor.njk b/views/actor.njk
index 3b2c761..6b7c8c7 100644
--- a/views/actor.njk
+++ b/views/actor.njk
@@ -1,33 +1,32 @@
 {% extends "layouts/reader.njk" %}
 
 {% block reader %}
-  <div class="channel">
-    <header class="channel__header">
+  <div class="ms-channel">
+    <header class="ms-channel__header">
       <a href="{{ baseUrl }}/channels/activitypub" class="back-link">
         {{ icon("previous") }} Fediverse
       </a>
     </header>
 
     {# Actor profile card #}
-    <div class="actor-profile">
-      <div class="actor-profile__header">
+    <div class="ms-actor-profile">
+      <div class="ms-actor-profile__header">
         {% if actor.photo %}
         <img src="{{ actor.photo }}"
              alt=""
-             class="actor-profile__avatar"
+             class="ms-actor-profile__avatar"
              width="80"
-             height="80"
-             onerror="this.style.display='none'">
+             height="80">
         {% endif %}
-        <div class="actor-profile__info">
-          <h2 class="actor-profile__name">{{ actor.name }}</h2>
+        <div class="ms-actor-profile__info">
+          <h2 class="ms-actor-profile__name">{{ actor.name }}</h2>
           {% if actor.handle %}
-          <span class="actor-profile__handle">@{{ actor.handle }}</span>
+          <span class="ms-actor-profile__handle">@{{ actor.handle }}</span>
           {% endif %}
           {% if actor.summary %}
-          <p class="actor-profile__summary">{{ actor.summary }}</p>
+          <p class="ms-actor-profile__summary">{{ actor.summary }}</p>
           {% endif %}
-          <div class="actor-profile__stats">
+          <div class="ms-actor-profile__stats">
             {% if actor.followersCount %}
             <span>{{ actor.followersCount }} followers</span>
             {% endif %}
@@ -37,7 +36,7 @@
           </div>
         </div>
       </div>
-      <div class="actor-profile__actions">
+      <div class="ms-actor-profile__actions">
         <a href="{{ actor.url }}" class="button button--secondary button--small" target="_blank" rel="noopener">
           {{ icon("external") }} View profile
         </a>
@@ -63,39 +62,38 @@
     </div>
 
     {% if error %}
-    <div class="reader__empty">
+    <div class="ms-reader__empty">
       {{ icon("warning") }}
       <p>{{ error }}</p>
     </div>
     {% elif items.length > 0 %}
-    <div class="timeline" id="timeline">
+    <div class="ms-timeline" id="timeline">
       {% for item in items %}
-      <article class="item-card">
+      <article class="ms-item-card">
         {# Author #}
         {% if item.author %}
-        <div class="item-card__author" style="padding: 12px 16px 0;">
+        <div class="ms-item-card__author" style="padding: 12px 16px 0;">
           {% if item.author.photo %}
           <img src="{{ item.author.photo }}"
                alt=""
-               class="item-card__author-photo"
+               class="ms-item-card__author-photo"
                width="40"
                height="40"
-               loading="lazy"
-               onerror="this.style.display='none'">
+               loading="lazy">
           {% endif %}
-          <div class="item-card__author-info">
-            <span class="item-card__author-name">{{ item.author.name or "Unknown" }}</span>
+          <div class="ms-item-card__author-info">
+            <span class="ms-item-card__author-name">{{ item.author.name or "Unknown" }}</span>
             {% if item.author.url %}
-            <span class="item-card__source">{{ item.author.url | replace("https://", "") | replace("http://", "") }}</span>
+            <span class="ms-item-card__source">{{ item.author.url | replace("https://", "") | replace("http://", "") }}</span>
             {% endif %}
           </div>
         </div>
         {% endif %}
 
-        <a href="{{ item.url }}" class="item-card__link" target="_blank" rel="noopener">
+        <a href="{{ item.url }}" class="ms-item-card__link" target="_blank" rel="noopener">
           {# Reply context #}
           {% if item["in-reply-to"] and item["in-reply-to"].length > 0 %}
-          <div class="item-card__context">
+          <div class="ms-item-card__context">
             {{ icon("reply") }}
             <span>Reply to</span>
             <span>{{ item["in-reply-to"][0] | replace("https://", "") | replace("http://", "") | truncate(50) }}</span>
@@ -104,12 +102,12 @@
 
           {# Title #}
           {% if item.name %}
-          <h3 class="item-card__title">{{ item.name }}</h3>
+          <h3 class="ms-item-card__title">{{ item.name }}</h3>
           {% endif %}
 
           {# Content #}
           {% if item.content %}
-          <div class="item-card__content{% if (item.content.text or '') | length > 300 %} item-card__content--truncated{% endif %}">
+          <div class="ms-item-card__content{% if (item.content.text or '') | length > 300 %} ms-item-card__content--truncated{% endif %}">
             {% if item.content.html %}
             {{ item.content.html | safe | striptags | truncate(400) }}
             {% elif item.content.text %}
@@ -120,10 +118,10 @@
 
           {# Tags #}
           {% if item.category and item.category.length > 0 %}
-          <div class="item-card__categories">
+          <div class="ms-item-card__categories">
             {% for cat in item.category %}
             {% if loop.index0 < 5 %}
-            <span class="item-card__category">#{{ cat }}</span>
+            <span class="ms-item-card__category">#{{ cat }}</span>
             {% endif %}
             {% endfor %}
           </div>
@@ -132,20 +130,19 @@
           {# Photos #}
           {% if item.photo and item.photo.length > 0 %}
           {% set photoCount = item.photo.length if item.photo.length <= 4 else 4 %}
-          <div class="item-card__photos item-card__photos--{{ photoCount }}">
+          <div class="ms-item-card__photos ms-item-card__photos--{{ photoCount }}">
             {% for photo in item.photo %}
             {% if loop.index0 < 4 %}
-            <img src="{{ photo }}" alt="" class="item-card__photo" loading="lazy"
-                 onerror="this.parentElement.removeChild(this)">
+            <img src="{{ photo }}" alt="" class="ms-item-card__photo" loading="lazy">
             {% endif %}
             {% endfor %}
           </div>
           {% endif %}
 
           {# Footer #}
-          <footer class="item-card__footer">
+          <footer class="ms-item-card__footer">
             {% if item.published %}
-            <time datetime="{{ item.published }}" class="item-card__date">
+            <time datetime="{{ item.published }}" class="ms-item-card__date">
               {{ item.published | date("PP", { locale: locale, timeZone: application.timeZone }) }}
             </time>
             {% endif %}
@@ -153,20 +150,20 @@
         </a>
 
         {# Actions #}
-        <div class="item-actions">
-          <a href="{{ item.url }}" class="item-actions__button" target="_blank" rel="noopener" title="View original">
+        <div class="ms-item-actions">
+          <a href="{{ item.url }}" class="ms-item-actions__button" target="_blank" rel="noopener" title="View original">
             {{ icon("external") }}
           </a>
-          <a href="{{ baseUrl }}/compose?reply={{ item.url | urlencode }}" class="item-actions__button" title="Reply">
+          <a href="{{ baseUrl }}/compose?reply={{ item.url | urlencode }}" class="ms-item-actions__button" title="Reply">
             {{ icon("reply") }}
           </a>
-          <a href="{{ baseUrl }}/compose?like={{ item.url | urlencode }}" class="item-actions__button" title="Like">
+          <a href="{{ baseUrl }}/compose?like={{ item.url | urlencode }}" class="ms-item-actions__button" title="Like">
             {{ icon("like") }}
           </a>
-          <a href="{{ baseUrl }}/compose?repost={{ item.url | urlencode }}" class="item-actions__button" title="Repost">
+          <a href="{{ baseUrl }}/compose?repost={{ item.url | urlencode }}" class="ms-item-actions__button" title="Repost">
             {{ icon("repost") }}
           </a>
-          <a href="{{ baseUrl }}/compose?bookmark={{ item.url | urlencode }}" class="item-actions__button" title="Bookmark">
+          <a href="{{ baseUrl }}/compose?bookmark={{ item.url | urlencode }}" class="ms-item-actions__button" title="Bookmark">
             {{ icon("bookmark") }}
           </a>
         </div>
@@ -174,7 +171,7 @@
       {% endfor %}
     </div>
     {% else %}
-    <div class="reader__empty">
+    <div class="ms-reader__empty">
       {{ icon("syndicate") }}
       <p>No posts found for this actor.</p>
     </div>
diff --git a/views/channel.njk b/views/channel.njk
index ec87228..1975991 100644
--- a/views/channel.njk
+++ b/views/channel.njk
@@ -1,10 +1,10 @@
 {% extends "layouts/reader.njk" %}
 
 {% block reader %}
-  <div class="channel">
-    <header class="channel__header">
+  <div class="ms-channel">
+    <header class="ms-channel__header">
       <h1>{{ channel.name }}</h1>
-      <div class="channel__actions">
+      <div class="ms-channel__actions">
         {% if not showRead and items.length > 0 %}
         <form action="{{ baseUrl }}/api/mark-read" method="POST" style="display: inline;">
           <input type="hidden" name="channel" value="{{ channel.uid }}">
@@ -33,14 +33,14 @@
     </header>
 
     {% if items.length > 0 %}
-    <div class="timeline" id="timeline" data-channel="{{ channel.uid }}">
+    <div class="ms-timeline" id="timeline" data-channel="{{ channel.uid }}">
       {% for item in items %}
       {% include "partials/item-card.njk" %}
       {% endfor %}
     </div>
 
     {% if paging %}
-    <nav class="timeline__paging" aria-label="Pagination">
+    <nav class="ms-timeline__paging" aria-label="Pagination">
       {% if paging.before %}
       <a href="?before={{ paging.before }}{% if showRead %}&showRead=true{% endif %}" class="button button--secondary">
         {{ icon("previous") }} {{ __("microsub.reader.newer") }}
@@ -56,7 +56,7 @@
     </nav>
     {% endif %}
     {% else %}
-    <div class="reader__empty">
+    <div class="ms-reader__empty">
       {% if readCount > 0 and not showRead %}
       {{ icon("checkboxChecked") }}
       <p>{{ __("microsub.reader.allRead") }}</p>
@@ -78,16 +78,16 @@
     // Keyboard navigation (j/k for items, o to open)
     const timeline = document.getElementById('timeline');
     if (timeline) {
-      const items = Array.from(timeline.querySelectorAll('.item-card'));
+      const items = Array.from(timeline.querySelectorAll('.ms-item-card'));
       let currentIndex = -1;
 
       function focusItem(index) {
         if (items[currentIndex]) {
-          items[currentIndex].classList.remove('item-card--focused');
+          items[currentIndex].classList.remove('ms-item-card--focused');
         }
         currentIndex = Math.max(0, Math.min(index, items.length - 1));
         if (items[currentIndex]) {
-          items[currentIndex].classList.add('item-card--focused');
+          items[currentIndex].classList.add('ms-item-card--focused');
           items[currentIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
         }
       }
@@ -108,7 +108,7 @@
           case 'Enter':
             e.preventDefault();
             if (items[currentIndex]) {
-              const link = items[currentIndex].querySelector('.item-card__link');
+              const link = items[currentIndex].querySelector('.ms-item-card__link');
               if (link) link.click();
             }
             break;
@@ -121,7 +121,7 @@
       const microsubApiUrl = '{{ baseUrl }}'.replace(/\/reader$/, '');
 
       timeline.addEventListener('click', async (e) => {
-        const button = e.target.closest('.item-actions__mark-read');
+        const button = e.target.closest('.ms-item-actions__mark-read');
         if (!button) return;
 
         e.preventDefault();
@@ -151,7 +151,7 @@
 
           if (response.ok) {
             // Hide the item with animation
-            const card = button.closest('.item-card');
+            const card = button.closest('.ms-item-card');
             if (card) {
               card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
               card.style.opacity = '0';
@@ -159,7 +159,7 @@
               setTimeout(() => {
                 card.remove();
                 // Check if timeline is now empty
-                if (timeline.querySelectorAll('.item-card').length === 0) {
+                if (timeline.querySelectorAll('.ms-item-card').length === 0) {
                   location.reload();
                 }
               }, 300);
@@ -176,14 +176,14 @@
 
       // Handle caret toggle for mark-source-read popover
       timeline.addEventListener('click', (e) => {
-        const caret = e.target.closest('.item-actions__mark-read-caret');
+        const caret = e.target.closest('.ms-item-actions__mark-read-caret');
         if (!caret) return;
 
         e.preventDefault();
         e.stopPropagation();
 
         // Close other open popovers
-        for (const p of timeline.querySelectorAll('.item-actions__mark-read-popover:not([hidden])')) {
+        for (const p of timeline.querySelectorAll('.ms-item-actions__mark-read-popover:not([hidden])')) {
           if (p !== caret.nextElementSibling) p.hidden = true;
         }
 
@@ -193,7 +193,7 @@
 
       // Handle mark-source-read button
       timeline.addEventListener('click', async (e) => {
-        const button = e.target.closest('.item-actions__mark-source-read');
+        const button = e.target.closest('.ms-item-actions__mark-source-read');
         if (!button) return;
 
         e.preventDefault();
@@ -220,7 +220,7 @@
 
           if (response.ok) {
             // Animate out all cards from this feed
-            const cards = timeline.querySelectorAll(`.item-card[data-feed-id="${feedId}"]`);
+            const cards = timeline.querySelectorAll(`.ms-item-card[data-feed-id="${feedId}"]`);
             for (const card of cards) {
               card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
               card.style.opacity = '0';
@@ -230,7 +230,7 @@
               for (const card of [...cards]) {
                 card.remove();
               }
-              if (timeline.querySelectorAll('.item-card').length === 0) {
+              if (timeline.querySelectorAll('.ms-item-card').length === 0) {
                 location.reload();
               }
             }, 300);
@@ -245,8 +245,8 @@
 
       // Close popovers on outside click
       document.addEventListener('click', (e) => {
-        if (!e.target.closest('.item-actions__mark-read-group')) {
-          for (const p of timeline.querySelectorAll('.item-actions__mark-read-popover:not([hidden])')) {
+        if (!e.target.closest('.ms-item-actions__mark-read-group')) {
+          for (const p of timeline.querySelectorAll('.ms-item-actions__mark-read-popover:not([hidden])')) {
             p.hidden = true;
           }
         }
@@ -254,7 +254,7 @@
 
       // Handle save-for-later buttons
       timeline.addEventListener('click', async (e) => {
-        const button = e.target.closest('.item-actions__save-later');
+        const button = e.target.closest('.ms-item-actions__save-later');
         if (!button) return;
 
         e.preventDefault();
@@ -275,7 +275,7 @@
           });
 
           if (response.ok) {
-            button.classList.add('item-actions__save-later--saved');
+            button.classList.add('ms-item-actions__save-later--saved');
             button.title = 'Saved';
           } else {
             button.disabled = false;
diff --git a/views/compose.njk b/views/compose.njk
index 4a040be..eedcb39 100644
--- a/views/compose.njk
+++ b/views/compose.njk
@@ -1,7 +1,7 @@
 {% extends "layouts/reader.njk" %}
 
 {% block reader %}
-  <div class="compose">
+  <div class="ms-compose">
     <a href="{{ backUrl or (baseUrl + '/channels') }}" class="back-link">
       {{ icon("previous") }} {{ __("Back") }}
     </a>
@@ -9,7 +9,7 @@
     <h2>{{ __("microsub.compose.title") }}</h2>
 
     {% if replyTo and replyTo is string %}
-    <div class="compose__context">
+    <div class="ms-compose__context">
       {{ icon("reply") }} {{ __("microsub.compose.replyTo") }}:
       <a href="{{ replyTo }}" target="_blank" rel="noopener">
         {{ replyTo | replace("https://", "") | replace("http://", "") }}
@@ -18,7 +18,7 @@
     {% endif %}
 
     {% if likeOf and likeOf is string %}
-    <div class="compose__context">
+    <div class="ms-compose__context">
       {{ icon("like") }} {{ __("microsub.compose.likeOf") }}:
       <a href="{{ likeOf }}" target="_blank" rel="noopener">
         {{ likeOf | replace("https://", "") | replace("http://", "") }}
@@ -27,7 +27,7 @@
     {% endif %}
 
     {% if repostOf and repostOf is string %}
-    <div class="compose__context">
+    <div class="ms-compose__context">
       {{ icon("repost") }} {{ __("microsub.compose.repostOf") }}:
       <a href="{{ repostOf }}" target="_blank" rel="noopener">
         {{ repostOf | replace("https://", "") | replace("http://", "") }}
@@ -36,7 +36,7 @@
     {% endif %}
 
     {% if bookmarkOf and bookmarkOf is string %}
-    <div class="compose__context">
+    <div class="ms-compose__context">
       {{ icon("bookmark") }} {{ __("microsub.compose.bookmarkOf") }}:
       <a href="{{ bookmarkOf }}" target="_blank" rel="noopener">
         {{ bookmarkOf | replace("https://", "") | replace("http://", "") }}
@@ -68,13 +68,13 @@
         attributes: { autofocus: true },
         hint: __("microsub.compose.commentHint") if isAction else false
       }) }}
-      <div class="compose__counter">
+      <div class="ms-compose__counter">
         <span id="char-count">0</span> characters
       </div>
 
       {# Syndication targets #}
       {% if syndicationTargets and syndicationTargets.length %}
-      <fieldset class="compose__syndication">
+      <fieldset class="ms-compose__syndication">
         <legend>{{ __("microsub.compose.syndicateTo") }}</legend>
         <p class="hint">{{ __("microsub.compose.syndicateHint") }}</p>
         {% for target in syndicationTargets %}
diff --git a/views/deck-settings.njk b/views/deck-settings.njk
index 83daa36..0f1c970 100644
--- a/views/deck-settings.njk
+++ b/views/deck-settings.njk
@@ -1,7 +1,7 @@
 {% extends "layouts/reader.njk" %}
 
 {% block reader %}
-  <div class="settings">
+  <div class="ms-settings">
     <header>
       <a href="{{ baseUrl }}/deck" class="back-link">
         {{ __("microsub.views.deck") }}
@@ -12,13 +12,13 @@
     <form action="{{ baseUrl }}/deck/settings" method="POST">
       <p>Select which channels appear as columns in your deck, and their order.</p>
 
-      <div class="deck-settings__channels">
+      <div class="ms-deck-settings__channels">
         {% for channel in channels %}
         {% if channel.uid !== "notifications" %}
-        <label class="deck-settings__channel">
+        <label class="ms-deck-settings__channel">
           <input type="checkbox" name="columns" value="{{ channel._id }}"
             {% if channel._id.toString() in selectedIds %}checked{% endif %}>
-          <span class="timeline-view__filter-color" style="background: {{ channel.color }}"></span>
+          <span class="ms-timeline-view__filter-color" style="background: {{ channel.color }}"></span>
           {{ channel.name }}
         </label>
         {% endif %}
diff --git a/views/deck.njk b/views/deck.njk
index f44d7c8..a689ab7 100644
--- a/views/deck.njk
+++ b/views/deck.njk
@@ -1,8 +1,8 @@
 {% extends "layouts/reader.njk" %}
 
 {% block reader %}
-  <div class="deck">
-    <header class="deck__header">
+  <div class="ms-deck">
+    <header class="ms-deck__header">
       <h1>{{ __("microsub.views.deck") }}</h1>
       <a href="{{ baseUrl }}/deck/settings" class="button button--secondary button--small">
         Configure columns
@@ -10,29 +10,29 @@
     </header>
 
     {% if columns.length > 0 %}
-    <div class="deck__columns">
+    <div class="ms-deck__columns">
       {% for col in columns %}
-      <div class="deck__column" data-channel-uid="{{ col.channel.uid }}">
-        <div class="deck__column-header" style="border-top: 3px solid {{ col.channel.color or '#ccc' }}">
-          <a href="{{ baseUrl }}/channels/{{ col.channel.uid }}" class="deck__column-name">
+      <div class="ms-deck__column" data-channel-uid="{{ col.channel.uid }}">
+        <div class="ms-deck__column-header" style="border-top: 3px solid {{ col.channel.color or '#ccc' }}">
+          <a href="{{ baseUrl }}/channels/{{ col.channel.uid }}" class="ms-deck__column-name">
             {{ col.channel.name }}
           </a>
           {% if col.channel.unread %}
-          <span class="reader__channel-badge{% if col.channel.unread === true %} reader__channel-badge--dot{% endif %}">
+          <span class="ms-reader__channel-badge{% if col.channel.unread === true %} ms-reader__channel-badge--dot{% endif %}">
             {% if col.channel.unread !== true %}{{ col.channel.unread }}{% endif %}
           </span>
           {% endif %}
         </div>
-        <div class="deck__column-items">
+        <div class="ms-deck__column-items">
           {% for item in col.items %}
           {% include "partials/item-card-compact.njk" %}
           {% endfor %}
           {% if col.items.length === 0 %}
-          <p class="deck__column-empty">No unread items</p>
+          <p class="ms-deck__column-empty">No unread items</p>
           {% endif %}
           {% if col.paging and col.paging.after %}
           <a href="{{ baseUrl }}/channels/{{ col.channel.uid }}"
-             class="deck__column-more button button--secondary button--small">
+             class="ms-deck__column-more button button--secondary button--small">
             View more
           </a>
           {% endif %}
@@ -41,7 +41,7 @@
       {% endfor %}
     </div>
     {% else %}
-    <div class="reader__empty">
+    <div class="ms-reader__empty">
       <p>No columns configured. Add channels to your deck.</p>
       <a href="{{ baseUrl }}/deck/settings" class="button button--primary">
         Configure deck
diff --git a/views/feed-edit.njk b/views/feed-edit.njk
index 7511ddd..5d5bd9f 100644
--- a/views/feed-edit.njk
+++ b/views/feed-edit.njk
@@ -1,7 +1,7 @@
 {% extends "layouts/reader.njk" %}
 
 {% block reader %}
-  <div class="settings">
+  <div class="ms-settings">
     <a href="{{ baseUrl }}/channels/{{ channel.uid }}/feeds" class="back-link">
       {{ icon("previous") }} {{ __("microsub.feeds.title") }}
     </a>
@@ -9,20 +9,20 @@
     <h2>{{ __("microsub.feeds.edit") }}</h2>
 
     {% if error %}
-    <div class="notice notice--error">
+    <div class="ms-notice ms-notice--error">
       <p>{{ error }}</p>
     </div>
     {% endif %}
 
-    <div class="feed-edit">
-      <div class="feed-edit__current">
+    <div class="ms-feed-edit">
+      <div class="ms-feed-edit__current">
         <h3>Current Feed</h3>
-        <p class="feed-edit__url">{{ feed.url }}</p>
+        <p class="ms-feed-edit__url">{{ feed.url }}</p>
         {% if feed.title %}
-        <p class="feed-edit__title">{{ feed.title }}</p>
+        <p class="ms-feed-edit__title">{{ feed.title }}</p>
         {% endif %}
         {% if feed.status == 'error' %}
-        <div class="notice notice--error">
+        <div class="ms-notice ms-notice--error">
           <p><strong>Status:</strong> Error</p>
           {% if feed.lastError %}
           <p><strong>Last error:</strong> {{ feed.lastError }}</p>
@@ -34,7 +34,7 @@
         {% endif %}
       </div>
 
-      <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/edit" class="feed-edit__form">
+      <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/edit" class="ms-feed-edit__form">
         {{ input({
           id: "url",
           name: "url",
@@ -46,7 +46,7 @@
           autocomplete: "off"
         }) }}
 
-        <p class="feed-edit__help">
+        <p class="ms-feed-edit__help">
           Enter the direct URL to the RSS, Atom, or JSON Feed. The URL will be validated before updating.
         </p>
 
@@ -60,10 +60,10 @@
 
       <div class="divider"></div>
 
-      <div class="feed-edit__actions">
+      <div class="ms-feed-edit__actions">
         <h3>Other Actions</h3>
 
-        <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/rediscover" class="feed-edit__action">
+        <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/rediscover" class="ms-feed-edit__action">
           <p>Run feed discovery on the current URL to find the actual RSS/Atom feed.</p>
           {{ button({
             text: "Rediscover Feed",
@@ -71,7 +71,7 @@
           }) }}
         </form>
 
-        <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/refresh" class="feed-edit__action">
+        <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/refresh" class="ms-feed-edit__action">
           <p>Force refresh this feed now.</p>
           {{ button({
             text: "Refresh Now",
diff --git a/views/feeds.njk b/views/feeds.njk
index 63adf09..ef288bc 100644
--- a/views/feeds.njk
+++ b/views/feeds.njk
@@ -1,8 +1,8 @@
 {% extends "layouts/reader.njk" %}
 
 {% block reader %}
-  <div class="feeds">
-    <header class="feeds__header">
+  <div class="ms-feeds">
+    <header class="ms-feeds__header">
       <a href="{{ baseUrl }}/channels/{{ channel.uid }}" class="back-link">
         {{ icon("previous") }} {{ channel.name }}
       </a>
@@ -11,27 +11,26 @@
     <h2>{{ __("microsub.feeds.title") }}</h2>
 
     {% if error %}
-    <div class="notice notice--error" role="alert">
+    <div class="ms-notice ms-notice--error" role="alert">
       {{ error }}
     </div>
     {% endif %}
 
     {% if feeds.length > 0 %}
-    <div class="feeds__list">
+    <div class="ms-feeds__list">
       {% for feed in feeds %}
-      <div class="feeds__item{% if feed.status == 'error' %} feeds__item--error{% endif %}">
-        <div class="feeds__info">
+      <div class="ms-feeds__item{% if feed.status == 'error' %} ms-feeds__item--error{% endif %}">
+        <div class="ms-feeds__info">
           {% if feed.photo %}
           <img src="{{ feed.photo }}"
                alt=""
-               class="feeds__photo"
+               class="ms-feeds__photo"
                width="48"
                height="48"
-               loading="lazy"
-               onerror="this.style.display='none'">
+               loading="lazy">
           {% endif %}
-          <div class="feeds__details">
-            <span class="feeds__name">
+          <div class="ms-feeds__details">
+            <span class="ms-feeds__name">
               {{ feed.title or feed.url }}
               {% if feed.feedType %}
               <span class="badge badge--offset badge--small" title="Feed format">{{ feed.feedType | upper }}</span>
@@ -42,21 +41,21 @@
               <span class="badge badge--green">Active</span>
               {% endif %}
             </span>
-            <a href="{{ feed.url }}" class="feeds__url" target="_blank" rel="noopener">
+            <a href="{{ feed.url }}" class="ms-feeds__url" target="_blank" rel="noopener">
               {{ feed.url | replace("https://", "") | replace("http://", "") }}
             </a>
             {% if feed.lastError %}
-            <span class="feeds__error">{{ feed.lastError }}</span>
+            <span class="ms-feeds__error">{{ feed.lastError }}</span>
             {% endif %}
             {% if feed.consecutiveErrors > 0 %}
-            <span class="feeds__error-count">{{ feed.consecutiveErrors }} consecutive errors</span>
+            <span class="ms-feeds__error-count">{{ feed.consecutiveErrors }} consecutive errors</span>
             {% endif %}
             {% if feed.lastSuccessAt %}
-            <span class="feeds__meta">Last success: {{ feed.lastSuccessAt }}</span>
+            <span class="ms-feeds__meta">Last success: {{ feed.lastSuccessAt }}</span>
             {% endif %}
           </div>
         </div>
-        <div class="feeds__actions">
+        <div class="ms-feeds__actions">
           <a href="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/edit"
              class="button button--secondary button--small"
              title="Edit feed URL">
@@ -83,15 +82,15 @@
       {% endfor %}
     </div>
     {% else %}
-    <div class="reader__empty">
+    <div class="ms-reader__empty">
       {{ icon("syndicate") }}
       <p>{{ __("microsub.feeds.empty") }}</p>
     </div>
     {% endif %}
 
-    <div class="feeds__add">
+    <div class="ms-feeds__add">
       <h3>{{ __("microsub.feeds.follow") }}</h3>
-      <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds" class="feeds__form">
+      <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds" class="ms-feeds__form">
         {{ input({
           id: "url",
           name: "url",
diff --git a/views/item.njk b/views/item.njk
index 6f4de2b..f27009d 100644
--- a/views/item.njk
+++ b/views/item.njk
@@ -1,24 +1,23 @@
 {% extends "layouts/reader.njk" %}
 
 {% block reader %}
-  <article class="item">
+  <article class="ms-item">
     <a href="{{ backUrl or (baseUrl + '/channels') }}" class="back-link">
       {{ icon("previous") }} {{ __("Back") }}
     </a>
 
     {% if item.author %}
-    <header class="item__author">
+    <header class="ms-item__author">
       {% if item.author.photo %}
       <img src="{{ item.author.photo }}"
            alt=""
-           class="item__author-photo"
+           class="ms-item__author-photo"
            width="48"
            height="48"
-           loading="lazy"
-           onerror="this.style.display='none'">
+           loading="lazy">
       {% endif %}
-      <div class="item__author-info">
-        <span class="item__author-name">
+      <div class="ms-item__author-info">
+        <span class="ms-item__author-name">
           {% if item.author.url %}
           <a href="{{ item.author.url }}" target="_blank" rel="noopener">{{ item.author.name or item.author.url }}</a>
           {% else %}
@@ -26,7 +25,7 @@
           {% endif %}
         </span>
         {% if item.published %}
-        <time datetime="{{ item.published }}" class="item__date">
+        <time datetime="{{ item.published }}" class="ms-item__date">
           {{ item.published | date("PPPp", { locale: locale, timeZone: application.timeZone }) }}
         </time>
         {% endif %}
@@ -36,9 +35,9 @@
 
     {# Context for interactions #}
     {% if item["in-reply-to"] or item["like-of"] or item["repost-of"] or item["bookmark-of"] %}
-    <div class="item__context">
+    <div class="ms-item__context">
       {% if item["in-reply-to"] and item["in-reply-to"].length > 0 %}
-      <p class="item__context-label">
+      <p class="ms-item__context-label">
         {{ icon("reply") }} {{ __("Reply to") }}:
         <a href="{{ item['in-reply-to'][0] }}" target="_blank" rel="noopener">
           {{ item["in-reply-to"][0] | replace("https://", "") | replace("http://", "") }}
@@ -46,7 +45,7 @@
       </p>
       {% endif %}
       {% if item["like-of"] and item["like-of"].length > 0 %}
-      <p class="item__context-label">
+      <p class="ms-item__context-label">
         {{ icon("like") }} {{ __("Liked") }}:
         <a href="{{ item['like-of'][0] }}" target="_blank" rel="noopener">
           {{ item["like-of"][0] | replace("https://", "") | replace("http://", "") }}
@@ -54,7 +53,7 @@
       </p>
       {% endif %}
       {% if item["repost-of"] and item["repost-of"].length > 0 %}
-      <p class="item__context-label">
+      <p class="ms-item__context-label">
         {{ icon("repost") }} {{ __("Reposted") }}:
         <a href="{{ item['repost-of'][0] }}" target="_blank" rel="noopener">
           {{ item["repost-of"][0] | replace("https://", "") | replace("http://", "") }}
@@ -62,7 +61,7 @@
       </p>
       {% endif %}
       {% if item["bookmark-of"] and item["bookmark-of"].length > 0 %}
-      <p class="item__context-label">
+      <p class="ms-item__context-label">
         {{ icon("bookmark") }} {{ __("Bookmarked") }}:
         <a href="{{ item['bookmark-of'][0] }}" target="_blank" rel="noopener">
           {{ item["bookmark-of"][0] | replace("https://", "") | replace("http://", "") }}
@@ -73,11 +72,11 @@
     {% endif %}
 
     {% if item.name %}
-    <h2 class="item__title">{{ item.name }}</h2>
+    <h2 class="ms-item__title">{{ item.name }}</h2>
     {% endif %}
 
     {% if item.content %}
-    <div class="item__content prose">
+    <div class="ms-item__content prose">
       {% if item.content.html %}
       {{ item.content.html | safe }}
       {% else %}
@@ -88,19 +87,19 @@
 
     {# Categories #}
     {% if item.category and item.category.length > 0 %}
-    <div class="item-card__categories">
+    <div class="ms-item-card__categories">
       {% for cat in item.category %}
-      <span class="item-card__category">#{{ cat | replace("#", "") }}</span>
+      <span class="ms-item-card__category">#{{ cat | replace("#", "") }}</span>
       {% endfor %}
     </div>
     {% endif %}
 
     {# Photos #}
     {% if item.photo and item.photo.length > 0 %}
-    <div class="item__photos">
+    <div class="ms-item__photos">
       {% for photo in item.photo %}
       <a href="{{ photo }}" target="_blank" rel="noopener">
-        <img src="{{ photo }}" alt="" class="item__photo" loading="lazy">
+        <img src="{{ photo }}" alt="" class="ms-item__photo" loading="lazy">
       </a>
       {% endfor %}
     </div>
@@ -108,7 +107,7 @@
 
     {# Video #}
     {% if item.video and item.video.length > 0 %}
-    <div class="item__media">
+    <div class="ms-item__media">
       {% for video in item.video %}
       <video src="{{ video }}"
              controls
@@ -121,14 +120,14 @@
 
     {# Audio #}
     {% if item.audio and item.audio.length > 0 %}
-    <div class="item__media">
+    <div class="ms-item__media">
       {% for audio in item.audio %}
       <audio src="{{ audio }}" controls preload="metadata"></audio>
       {% endfor %}
     </div>
     {% endif %}
 
-    <footer class="item__actions">
+    <footer class="ms-item__actions">
       {% if item.url %}
       <a href="{{ item.url }}" class="button button--secondary button--small" target="_blank" rel="noopener">
         {{ icon("external") }} {{ __("microsub.item.viewOriginal") }}
@@ -148,7 +147,7 @@
       </a>
       {% if not item._is_read %}
       <button type="button"
-              class="button button--secondary button--small item__mark-read"
+              class="button button--secondary button--small ms-item__mark-read"
               data-item-id="{{ item._id }}"
               data-channel="{{ channel.uid }}">
         {{ icon("checkboxChecked") }} {{ __("microsub.timeline.markRead") }}
@@ -159,7 +158,7 @@
 
   <script type="module">
     // Handle mark-read button
-    const markReadBtn = document.querySelector('.item__mark-read');
+    const markReadBtn = document.querySelector('.ms-item__mark-read');
     if (markReadBtn) {
       markReadBtn.addEventListener('click', async () => {
         const itemId = markReadBtn.dataset.itemId;
diff --git a/views/partials/actions.njk b/views/partials/actions.njk
index f35f0f6..c737fb0 100644
--- a/views/partials/actions.njk
+++ b/views/partials/actions.njk
@@ -1,18 +1,18 @@
 {# Item action buttons #}
-<div class="item-actions">
-  <a href="{{ baseUrl }}/compose?replyTo={{ itemUrl | urlencode }}" class="item-actions__button" title="{{ __('microsub.item.reply') }}">
+<div class="ms-item-actions">
+  <a href="{{ baseUrl }}/compose?replyTo={{ itemUrl | urlencode }}" class="ms-item-actions__button" title="{{ __('microsub.item.reply') }}">
     {{ icon("reply") }}
   </a>
-  <a href="{{ baseUrl }}/compose?likeOf={{ itemUrl | urlencode }}" class="item-actions__button" title="{{ __('microsub.item.like') }}">
+  <a href="{{ baseUrl }}/compose?likeOf={{ itemUrl | urlencode }}" class="ms-item-actions__button" title="{{ __('microsub.item.like') }}">
     {{ icon("like") }}
   </a>
-  <a href="{{ baseUrl }}/compose?repostOf={{ itemUrl | urlencode }}" class="item-actions__button" title="{{ __('microsub.item.repost') }}">
+  <a href="{{ baseUrl }}/compose?repostOf={{ itemUrl | urlencode }}" class="ms-item-actions__button" title="{{ __('microsub.item.repost') }}">
     {{ icon("repost") }}
   </a>
-  <a href="{{ baseUrl }}/compose?bookmarkOf={{ itemUrl | urlencode }}" class="item-actions__button" title="{{ __('microsub.item.bookmark') }}">
+  <a href="{{ baseUrl }}/compose?bookmarkOf={{ itemUrl | urlencode }}" class="ms-item-actions__button" title="{{ __('microsub.item.bookmark') }}">
     {{ icon("bookmark") }}
   </a>
-  <a href="{{ itemUrl }}" class="item-actions__button" target="_blank" rel="noopener" title="{{ __('microsub.item.viewOriginal') }}">
+  <a href="{{ itemUrl }}" class="ms-item-actions__button" target="_blank" rel="noopener" title="{{ __('microsub.item.viewOriginal') }}">
     {{ icon("public") }}
   </a>
 </div>
diff --git a/views/partials/breadcrumbs.njk b/views/partials/breadcrumbs.njk
index f5deb97..4b42b1c 100644
--- a/views/partials/breadcrumbs.njk
+++ b/views/partials/breadcrumbs.njk
@@ -1,13 +1,13 @@
 {# Breadcrumb navigation #}
 {% if breadcrumbs and breadcrumbs.length > 0 %}
-<nav class="breadcrumbs" aria-label="Breadcrumb">
-  <ol class="breadcrumbs__list">
+<nav class="ms-breadcrumbs" aria-label="Breadcrumb">
+  <ol class="ms-breadcrumbs__list">
     {% for crumb in breadcrumbs %}
-    <li class="breadcrumbs__item">
+    <li class="ms-breadcrumbs__item">
       {% if crumb.href %}
-      <a href="{{ crumb.href }}" class="breadcrumbs__link">{{ crumb.text }}</a>
+      <a href="{{ crumb.href }}" class="ms-breadcrumbs__link">{{ crumb.text }}</a>
       {% else %}
-      <span class="breadcrumbs__current" aria-current="page">{{ crumb.text }}</span>
+      <span class="ms-breadcrumbs__current" aria-current="page">{{ crumb.text }}</span>
       {% endif %}
     </li>
     {% endfor %}
diff --git a/views/partials/item-card-compact.njk b/views/partials/item-card-compact.njk
index c863f08..1d0a2b1 100644
--- a/views/partials/item-card-compact.njk
+++ b/views/partials/item-card-compact.njk
@@ -1,37 +1,36 @@
 {# Compact item card for deck columns #}
-<article class="item-card-compact{% if item._is_read %} item-card-compact--read{% endif %}"
+<article class="ms-item-card-compact{% if item._is_read %} ms-item-card-compact--read{% endif %}"
          data-item-id="{{ item._id }}">
-  <a href="{{ readerBaseUrl }}/item/{{ item._id }}" class="item-card-compact__link">
+  <a href="{{ readerBaseUrl }}/item/{{ item._id }}" class="ms-item-card-compact__link">
     {% if item.photo and item.photo.length > 0 %}
     <img src="{{ item.photo[0] }}"
          alt=""
-         class="item-card-compact__photo"
-         loading="lazy"
-         onerror="this.style.display='none'">
+         class="ms-item-card-compact__photo"
+         loading="lazy">
     {% endif %}
-    <div class="item-card-compact__body">
+    <div class="ms-item-card-compact__body">
       {% if item.name %}
-      <h4 class="item-card-compact__title">{{ item.name }}</h4>
+      <h4 class="ms-item-card-compact__title">{{ item.name }}</h4>
       {% elif item.content %}
-      <p class="item-card-compact__text">
+      <p class="ms-item-card-compact__text">
         {% if item.content.text %}{{ item.content.text | truncate(80) }}{% elif item.content.html %}{{ item.content.html | safe | striptags | truncate(80) }}{% endif %}
       </p>
       {% endif %}
-      <div class="item-card-compact__meta">
+      <div class="ms-item-card-compact__meta">
         {% if item._source %}
-        <span class="item-card-compact__source">{{ item._source.name or item._source.url }}</span>
+        <span class="ms-item-card-compact__source">{{ item._source.name or item._source.url }}</span>
         {% elif item.author %}
-        <span class="item-card-compact__source">{{ item.author.name }}</span>
+        <span class="ms-item-card-compact__source">{{ item.author.name }}</span>
         {% endif %}
         {% if item.published %}
-        <time datetime="{{ item.published }}" class="item-card-compact__date">
+        <time datetime="{{ item.published }}" class="ms-item-card-compact__date">
           {{ item.published | date("PP") }}
         </time>
         {% endif %}
       </div>
     </div>
     {% if not item._is_read %}
-    <span class="item-card-compact__unread" aria-label="Unread"></span>
+    <span class="ms-item-card-compact__unread" aria-label="Unread"></span>
     {% endif %}
   </a>
 </article>
diff --git a/views/partials/item-card.njk b/views/partials/item-card.njk
index 15ec77b..0137388 100644
--- a/views/partials/item-card.njk
+++ b/views/partials/item-card.njk
@@ -2,7 +2,7 @@
   Item card for timeline display
   Inspired by Aperture/Monocle reader
 #}
-<article class="item-card{% if item._is_read %} item-card--read{% endif %}"
+<article class="ms-item-card{% if item._is_read %} ms-item-card--read{% endif %}"
          data-item-id="{{ item._id }}"
          data-feed-id="{{ item._feedId or '' }}"
          data-is-read="{{ item._is_read | default(false) }}">
@@ -13,7 +13,7 @@
 
   {% if item["like-of"] and item["like-of"].length > 0 %}
   {% set contextUrl = item['like-of'][0].url or item['like-of'][0].value or item['like-of'][0] %}
-  <div class="item-card__context">
+  <div class="ms-item-card__context">
     {{ icon("like") }}
     <span>Liked</span>
     <a href="{{ contextUrl }}" target="_blank" rel="noopener">
@@ -22,7 +22,7 @@
   </div>
   {% elif item["repost-of"] and item["repost-of"].length > 0 %}
   {% set contextUrl = item['repost-of'][0].url or item['repost-of'][0].value or item['repost-of'][0] %}
-  <div class="item-card__context">
+  <div class="ms-item-card__context">
     {{ icon("repost") }}
     <span>Reposted</span>
     <a href="{{ contextUrl }}" target="_blank" rel="noopener">
@@ -31,7 +31,7 @@
   </div>
   {% elif item["in-reply-to"] and item["in-reply-to"].length > 0 %}
   {% set contextUrl = item['in-reply-to'][0].url or item['in-reply-to'][0].value or item['in-reply-to'][0] %}
-  <div class="item-card__context">
+  <div class="ms-item-card__context">
     {{ icon("reply") }}
     <span>Reply to</span>
     <a href="{{ contextUrl }}" target="_blank" rel="noopener">
@@ -40,7 +40,7 @@
   </div>
   {% elif item["bookmark-of"] and item["bookmark-of"].length > 0 %}
   {% set contextUrl = item['bookmark-of'][0].url or item['bookmark-of'][0].value or item['bookmark-of'][0] %}
-  <div class="item-card__context">
+  <div class="ms-item-card__context">
     {{ icon("bookmark") }}
     <span>Bookmarked</span>
     <a href="{{ contextUrl }}" target="_blank" rel="noopener">
@@ -49,43 +49,24 @@
   </div>
   {% endif %}
 
-  <a href="{{ baseUrl }}/item/{{ item._id }}" class="item-card__link">
+  <a href="{{ baseUrl }}/item/{{ item._id }}" class="ms-item-card__link">
     {# Author #}
     {% if item.author %}
-    <div class="item-card__author">
+    <div class="ms-item-card__author">
       {% if item.author.photo %}
       <img src="{{ item.author.photo }}"
            alt=""
-           class="item-card__author-photo"
+           class="ms-item-card__author-photo"
            width="40"
            height="40"
-           loading="lazy"
-           onerror="this.style.display='none'">
+           loading="lazy">
       {% endif %}
-      <div class="item-card__author-info">
-        <span class="item-card__author-name">{{ item.author.name or "Unknown" }}</span>
+      <div class="ms-item-card__author-info">
+        <span class="ms-item-card__author-name">{{ item.author.name or "Unknown" }}</span>
         {% if item._source %}
-        <span class="item-card__source">
-          {# Protocol source indicator #}
-          {% set sourceUrl = item._source.url or item.author.url or "" %}
-          {% set sourceType = item._source.source_type or item._source.type %}
-          {% if sourceType == "activitypub" or sourceType == "mastodon" or ("mastodon." in sourceUrl) or ("mstdn." in sourceUrl) or ("fosstodon." in sourceUrl) or ("pleroma." in sourceUrl) or ("misskey." in sourceUrl) %}
-          <svg class="item-card__source-icon" viewBox="0 0 24 24" fill="#6364ff" aria-label="Fediverse" style="width:12px;height:12px;vertical-align:middle;margin-right:3px;display:inline-block">
-            <path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.668 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
-          </svg>
-          {% elif sourceType == "bluesky" or ("bsky.app" in sourceUrl) or ("bluesky" in sourceUrl) %}
-          <svg class="item-card__source-icon" viewBox="0 0 568 501" fill="#0085ff" aria-label="ATmosphere" style="width:12px;height:12px;vertical-align:middle;margin-right:3px;display:inline-block">
-            <path d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z"/>
-          </svg>
-          {% else %}
-          <svg class="item-card__source-icon" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2" aria-label="Web" style="width:12px;height:12px;vertical-align:middle;margin-right:3px;display:inline-block">
-            <circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
-          </svg>
-          {% endif %}
-          {{ item._source.name or item._source.url }}
-        </span>
+        <span class="ms-item-card__source">{{ item._source.name or item._source.url }}</span>
         {% elif item.author.url %}
-        <span class="item-card__source">{{ item.author.url | replace("https://", "") | replace("http://", "") }}</span>
+        <span class="ms-item-card__source">{{ item.author.url | replace("https://", "") | replace("http://", "") }}</span>
         {% endif %}
       </div>
     </div>
@@ -93,12 +74,12 @@
 
     {# Title (for articles) #}
     {% if item.name %}
-    <h3 class="item-card__title">{{ item.name }}</h3>
+    <h3 class="ms-item-card__title">{{ item.name }}</h3>
     {% endif %}
 
     {# Content with overflow handling #}
     {% if item.summary or item.content %}
-    <div class="item-card__content{% if (item.content.text or item.summary or '') | length > 300 %} item-card__content--truncated{% endif %}">
+    <div class="ms-item-card__content{% if (item.content.text or item.summary or '') | length > 300 %} ms-item-card__content--truncated{% endif %}">
       {% if item.content.html %}
       {{ item.content.html | safe | striptags | truncate(400) }}
       {% elif item.content.text %}
@@ -111,10 +92,10 @@
 
     {# Categories/Tags #}
     {% if item.category and item.category.length > 0 %}
-    <div class="item-card__categories">
+    <div class="ms-item-card__categories">
       {% for cat in item.category %}
       {% if loop.index0 < 5 %}
-      <span class="item-card__category">#{{ cat | replace("#", "") }}</span>
+      <span class="ms-item-card__category">#{{ cat | replace("#", "") }}</span>
       {% endif %}
       {% endfor %}
     </div>
@@ -123,14 +104,13 @@
     {# Photo grid (Aperture multi-photo pattern) #}
     {% if item.photo and item.photo.length > 0 %}
     {% set photoCount = item.photo.length if item.photo.length <= 4 else 4 %}
-    <div class="item-card__photos item-card__photos--{{ photoCount }}">
+    <div class="ms-item-card__photos ms-item-card__photos--{{ photoCount }}">
       {% for photo in item.photo %}
       {% if loop.index0 < 4 %}
       <img src="{{ photo }}"
            alt=""
-           class="item-card__photo"
-           loading="lazy"
-           onerror="this.parentElement.removeChild(this)">
+           class="ms-item-card__photo"
+           loading="lazy">
       {% endif %}
       {% endfor %}
     </div>
@@ -138,9 +118,9 @@
 
     {# Video preview #}
     {% if item.video and item.video.length > 0 %}
-    <div class="item-card__media">
+    <div class="ms-item-card__media">
       <video src="{{ item.video[0] }}"
-             class="item-card__video"
+             class="ms-item-card__video"
              controls
              preload="metadata"
              {% if item.photo and item.photo.length > 0 %}poster="{{ item.photo[0] }}"{% endif %}>
@@ -150,74 +130,74 @@
 
     {# Audio preview #}
     {% if item.audio and item.audio.length > 0 %}
-    <div class="item-card__media">
-      <audio src="{{ item.audio[0] }}" class="item-card__audio" controls preload="metadata"></audio>
+    <div class="ms-item-card__media">
+      <audio src="{{ item.audio[0] }}" class="ms-item-card__audio" controls preload="metadata"></audio>
     </div>
     {% endif %}
 
     {# Footer with date and actions #}
-    <footer class="item-card__footer">
+    <footer class="ms-item-card__footer">
       {% if item.published %}
-      <time datetime="{{ item.published }}" class="item-card__date">
+      <time datetime="{{ item.published }}" class="ms-item-card__date">
         {{ item.published | date("PP", { locale: locale, timeZone: application.timeZone }) }}
       </time>
       {% endif %}
       {% if not item._is_read %}
-      <span class="item-card__unread" aria-label="Unread">●</span>
+      <span class="ms-item-card__unread" aria-label="Unread">●</span>
       {% endif %}
     </footer>
   </a>
 
   {# Inline actions (Aperture pattern) #}
-  <div class="item-actions">
+  <div class="ms-item-actions">
     {% if item._source and item._source.type === "activitypub" and item.author and item.author.url %}
-    <a href="{{ baseUrl }}/actor?url={{ item.author.url | urlencode }}" class="item-actions__button" title="View actor profile">
+    <a href="{{ baseUrl }}/actor?url={{ item.author.url | urlencode }}" class="ms-item-actions__button" title="View actor profile">
       {{ icon("mention") }}
-      <span class="visually-hidden">Actor profile</span>
+      <span class="-!-visually-hidden">Actor profile</span>
     </a>
     {% endif %}
     {% if item.url %}
-    <a href="{{ item.url }}" class="item-actions__button" target="_blank" rel="noopener" title="View original">
+    <a href="{{ item.url }}" class="ms-item-actions__button" target="_blank" rel="noopener" title="View original">
       {{ icon("external") }}
-      <span class="visually-hidden">Original</span>
+      <span class="-!-visually-hidden">Original</span>
     </a>
     {% endif %}
-    <a href="{{ baseUrl }}/compose?reply={{ item.url | urlencode }}" class="item-actions__button" title="Reply">
+    <a href="{{ baseUrl }}/compose?reply={{ item.url | urlencode }}" class="ms-item-actions__button" title="Reply">
       {{ icon("reply") }}
-      <span class="visually-hidden">Reply</span>
+      <span class="-!-visually-hidden">Reply</span>
     </a>
-    <a href="{{ baseUrl }}/compose?like={{ item.url | urlencode }}" class="item-actions__button" title="Like">
+    <a href="{{ baseUrl }}/compose?like={{ item.url | urlencode }}" class="ms-item-actions__button" title="Like">
       {{ icon("like") }}
-      <span class="visually-hidden">Like</span>
+      <span class="-!-visually-hidden">Like</span>
     </a>
-    <a href="{{ baseUrl }}/compose?repost={{ item.url | urlencode }}" class="item-actions__button" title="Repost">
+    <a href="{{ baseUrl }}/compose?repost={{ item.url | urlencode }}" class="ms-item-actions__button" title="Repost">
       {{ icon("repost") }}
-      <span class="visually-hidden">Repost</span>
+      <span class="-!-visually-hidden">Repost</span>
     </a>
-    <a href="{{ baseUrl }}/compose?bookmark={{ item.url | urlencode }}" class="item-actions__button" title="Bookmark">
+    <a href="{{ baseUrl }}/compose?bookmark={{ item.url | urlencode }}" class="ms-item-actions__button" title="Bookmark">
       {{ icon("bookmark") }}
-      <span class="visually-hidden">Bookmark</span>
+      <span class="-!-visually-hidden">Bookmark</span>
     </a>
     {% if not item._is_read %}
     {% if item._feedId %}
-    <span class="item-actions__mark-read-group">
+    <span class="ms-item-actions__mark-read-group">
       <button type="button"
-              class="item-actions__button item-actions__mark-read"
+              class="ms-item-actions__button ms-item-actions__mark-read"
               data-action="mark-read"
               data-item-id="{{ item._id }}"
               {% if item._channelUid %}data-channel-uid="{{ item._channelUid }}"{% endif %}
               {% if item._channelId %}data-channel-id="{{ item._channelId }}"{% endif %}
               title="Mark as read">
         {{ icon("checkboxChecked") }}
-        <span class="visually-hidden">Mark read</span>
+        <span class="-!-visually-hidden">Mark read</span>
       </button>
       <button type="button"
-              class="item-actions__button item-actions__mark-read-caret"
+              class="ms-item-actions__button ms-item-actions__mark-read-caret"
               aria-label="More mark-read options"
               title="More options">&#9662;</button>
-      <div class="item-actions__mark-read-popover" hidden>
+      <div class="ms-item-actions__mark-read-popover" hidden>
         <button type="button"
-                class="item-actions__mark-source-read"
+                class="ms-item-actions__mark-source-read"
                 data-feed-id="{{ item._feedId }}"
                 {% if item._channelUid %}data-channel-uid="{{ item._channelUid }}"{% endif %}
                 {% if item._channelId %}data-channel-id="{{ item._channelId }}"{% endif %}>
@@ -227,26 +207,26 @@
     </span>
     {% else %}
     <button type="button"
-            class="item-actions__button item-actions__mark-read"
+            class="ms-item-actions__button ms-item-actions__mark-read"
             data-action="mark-read"
             data-item-id="{{ item._id }}"
             {% if item._channelUid %}data-channel-uid="{{ item._channelUid }}"{% endif %}
             {% if item._channelId %}data-channel-id="{{ item._channelId }}"{% endif %}
             title="Mark as read">
       {{ icon("checkboxChecked") }}
-      <span class="visually-hidden">Mark read</span>
+      <span class="-!-visually-hidden">Mark read</span>
     </button>
     {% endif %}
     {% endif %}
     {% if application.readlaterEndpoint %}
     <button type="button"
-            class="item-actions__button item-actions__save-later"
+            class="ms-item-actions__button ms-item-actions__save-later"
             data-action="save-later"
             data-url="{{ item.url }}"
             data-title="{{ item.name or '' }}"
             title="Save for later">
       {{ icon("bookmark") }}
-      <span class="visually-hidden">Save for later</span>
+      <span class="-!-visually-hidden">Save for later</span>
     </button>
     {% endif %}
   </div>
diff --git a/views/partials/timeline.njk b/views/partials/timeline.njk
index f027364..322a3d7 100644
--- a/views/partials/timeline.njk
+++ b/views/partials/timeline.njk
@@ -1,5 +1,5 @@
 {# Timeline of items #}
-<div class="timeline">
+<div class="ms-timeline">
   {% if items.length > 0 %}
   {% for item in items %}
   {% include "partials/item-card.njk" %}
diff --git a/views/partials/view-switcher.njk b/views/partials/view-switcher.njk
index 6c173ad..29031d8 100644
--- a/views/partials/view-switcher.njk
+++ b/views/partials/view-switcher.njk
@@ -1,7 +1,7 @@
 {# View mode switcher - icon toolbar #}
-<nav class="view-switcher" aria-label="View mode">
+<nav class="ms-view-switcher" aria-label="View mode">
   <a href="{{ readerBaseUrl }}/channels"
-     class="view-switcher__button{% if activeView === 'channels' %} view-switcher__button--active{% endif %}"
+     class="ms-view-switcher__button{% if activeView === 'channels' %} ms-view-switcher__button--active{% endif %}"
      title="Channels">
     <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/>
@@ -9,14 +9,14 @@
     </svg>
   </a>
   <a href="{{ readerBaseUrl }}/deck"
-     class="view-switcher__button{% if activeView === 'deck' %} view-switcher__button--active{% endif %}"
+     class="ms-view-switcher__button{% if activeView === 'deck' %} ms-view-switcher__button--active{% endif %}"
      title="Deck">
     <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       <rect x="3" y="3" width="7" height="18" rx="1"/><rect x="14" y="3" width="7" height="18" rx="1"/>
     </svg>
   </a>
   <a href="{{ readerBaseUrl }}/timeline"
-     class="view-switcher__button{% if activeView === 'timeline' %} view-switcher__button--active{% endif %}"
+     class="ms-view-switcher__button{% if activeView === 'timeline' %} ms-view-switcher__button--active{% endif %}"
      title="Timeline">
     <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       <line x1="12" y1="2" x2="12" y2="22"/><polyline points="19 15 12 22 5 15"/>
diff --git a/views/reader.njk b/views/reader.njk
index 4a71db8..2f61168 100644
--- a/views/reader.njk
+++ b/views/reader.njk
@@ -1,26 +1,26 @@
 {% extends "layouts/reader.njk" %}
 
 {% block reader %}
-  <div class="reader">
+  <div class="ms-reader">
     {% if channels.length > 0 %}
-    <div class="reader__channels">
+    <div class="ms-reader__channels">
       {% for channel in channels %}
-      <a href="{{ baseUrl }}/channels/{{ channel.uid }}" class="reader__channel{% if channel.uid === currentChannel %} reader__channel--active{% endif %}">
-        <span class="reader__channel-name">
+      <a href="{{ baseUrl }}/channels/{{ channel.uid }}" class="ms-reader__channel{% if channel.uid === currentChannel %} ms-reader__channel--active{% endif %}">
+        <span class="ms-reader__channel-name">
           {% if channel.uid === "notifications" %}
           {{ icon("mention") }}
           {% endif %}
           {{ channel.name }}
         </span>
         {% if channel.unread %}
-        <span class="reader__channel-badge{% if channel.unread === true %} reader__channel-badge--dot{% endif %}">
+        <span class="ms-reader__channel-badge{% if channel.unread === true %} ms-reader__channel-badge--dot{% endif %}">
           {% if channel.unread !== true %}{{ channel.unread }}{% endif %}
         </span>
         {% endif %}
       </a>
       {% endfor %}
     </div>
-    <div class="reader__actions">
+    <div class="ms-reader__actions">
       <a href="{{ baseUrl }}/search" class="button button--primary">
         {{ icon("syndicate") }} {{ __("microsub.feeds.follow") }}
       </a>
@@ -29,7 +29,7 @@
       </a>
     </div>
     {% else %}
-    <div class="reader__empty">
+    <div class="ms-reader__empty">
       {{ icon("syndicate") }}
       <p>{{ __("microsub.channels.empty") }}</p>
       <a href="{{ baseUrl }}/channels/new" class="button button--primary">
diff --git a/views/search.njk b/views/search.njk
index ddfeef5..8de74af 100644
--- a/views/search.njk
+++ b/views/search.njk
@@ -1,14 +1,14 @@
 {% extends "layouts/reader.njk" %}
 
 {% block reader %}
-  <div class="search">
+  <div class="ms-search">
     <a href="{{ baseUrl }}/channels" class="back-link">
       {{ icon("previous") }} {{ __("microsub.channels.title") }}
     </a>
 
     <h2>{{ __("microsub.search.title") }}</h2>
 
-    <form method="post" action="{{ baseUrl }}/search" class="search__form">
+    <form method="post" action="{{ baseUrl }}/search" class="ms-search__form">
       {{ input({
         id: "query",
         name: "query",
@@ -26,42 +26,42 @@
     </form>
 
     {% if validationError %}
-    <div class="notice notice--error">
+    <div class="ms-notice ms-notice--error">
       <p>{{ validationError }}</p>
     </div>
     {% endif %}
 
     {% if discoveryError %}
-    <div class="notice notice--error">
+    <div class="ms-notice ms-notice--error">
       <p>{{ discoveryError }}</p>
     </div>
     {% endif %}
 
     {% if results and results.length > 0 %}
-    <div class="search__results">
+    <div class="ms-search__results">
       <h3>{{ __("microsub.search.title") }}</h3>
-      <div class="search__list">
+      <div class="ms-search__list">
         {% for result in results %}
-        <div class="search__item{% if not result.valid %} search__item--invalid{% endif %}{% if result.isCommentsFeed %} search__item--comments{% endif %}">
-          <div class="search__feed">
-            <span class="search__name">
+        <div class="ms-search__item{% if not result.valid %} ms-search__item--invalid{% endif %}{% if result.isCommentsFeed %} ms-search__item--comments{% endif %}">
+          <div class="ms-search__feed">
+            <span class="ms-search__name">
               {{ result.title or "Feed" }}
-              <span class="search__type badge badge--small{% if result.valid %} badge--green{% else %} badge--yellow{% endif %}">
+              <span class="ms-search__type badge badge--small{% if result.valid %} badge--green{% else %} badge--yellow{% endif %}">
                 {{ result.typeLabel }}
               </span>
               {% if result.isCommentsFeed %}
-              <span class="search__type badge badge--small badge--yellow">Comments</span>
+              <span class="ms-search__type badge badge--small badge--yellow">Comments</span>
               {% endif %}
             </span>
-            <span class="search__url">{{ result.url | replace("https://", "") | replace("http://", "") }}</span>
+            <span class="ms-search__url">{{ result.url | replace("https://", "") | replace("http://", "") }}</span>
             {% if not result.valid %}
-            <span class="search__error">{{ result.error }}</span>
+            <span class="ms-search__error">{{ result.error }}</span>
             {% endif %}
           </div>
           {% if result.valid %}
-          <form method="post" action="{{ baseUrl }}/subscribe" class="search__subscribe">
+          <form method="post" action="{{ baseUrl }}/subscribe" class="ms-search__subscribe">
             <input type="hidden" name="url" value="{{ result.url }}">
-            <label for="channel-{{ loop.index }}" class="visually-hidden">{{ __("microsub.channels.title") }}</label>
+            <label for="channel-{{ loop.index }}" class="-!-visually-hidden">{{ __("microsub.channels.title") }}</label>
             <select name="channel" id="channel-{{ loop.index }}" class="select select--small">
               {% for channel in channels %}
               <option value="{{ channel.uid }}">{{ channel.name }}</option>
@@ -80,7 +80,7 @@
       </div>
     </div>
     {% elif searched %}
-    <div class="reader__empty">
+    <div class="ms-reader__empty">
       <p>{{ __("microsub.search.noResults") }}</p>
     </div>
     {% endif %}
diff --git a/views/settings.njk b/views/settings.njk
index 0c79a17..456649d 100644
--- a/views/settings.njk
+++ b/views/settings.njk
@@ -1,7 +1,7 @@
 {% extends "layouts/reader.njk" %}
 
 {% block reader %}
-  <div class="settings">
+  <div class="ms-settings">
     <a href="{{ baseUrl }}/channels/{{ channel.uid }}" class="back-link">
       {{ icon("previous") }} {{ channel.name }}
     </a>
diff --git a/views/timeline.njk b/views/timeline.njk
index 5f1a6ba..88e91a4 100644
--- a/views/timeline.njk
+++ b/views/timeline.njk
@@ -1,22 +1,22 @@
 {% extends "layouts/reader.njk" %}
 
 {% block reader %}
-  <div class="timeline-view">
-    <header class="timeline-view__header">
+  <div class="ms-timeline-view">
+    <header class="ms-timeline-view__header">
       <h1>{{ __("microsub.views.timeline") }}</h1>
-      <div class="timeline-view__actions">
+      <div class="ms-timeline-view__actions">
         {% if channels.length > 0 %}
-        <details class="timeline-view__filter">
+        <details class="ms-timeline-view__filter">
           <summary class="button button--secondary button--small">
             Filter channels
           </summary>
-          <form action="{{ baseUrl }}/timeline" method="GET" class="timeline-view__filter-form">
+          <form action="{{ baseUrl }}/timeline" method="GET" class="ms-timeline-view__filter-form">
             {% for ch in channels %}
             {% if ch.uid !== "notifications" %}
-            <label class="timeline-view__filter-label">
+            <label class="ms-timeline-view__filter-label">
               <input type="checkbox" name="exclude" value="{{ ch._id }}"
                 {% if excludeIds and ch._id.toString() in excludeIds %}checked{% endif %}>
-              <span class="timeline-view__filter-color" style="background: {{ ch.color }}"></span>
+              <span class="ms-timeline-view__filter-color" style="background: {{ ch.color }}"></span>
               {{ ch.name }}
             </label>
             {% endif %}
@@ -29,11 +29,11 @@
     </header>
 
     {% if items.length > 0 %}
-    <div class="timeline" id="timeline">
+    <div class="ms-timeline" id="timeline">
       {% for item in items %}
-      <div class="timeline-view__item">
+      <div class="ms-timeline-view__item">
         {% if item._channelName %}
-        <span class="timeline-view__channel-badge" style="background: {{ item._channelColor or '#888' }}">
+        <span class="ms-timeline-view__channel-badge" style="background: {{ item._channelColor or '#888' }}">
           {{ item._channelName }}
         </span>
         {% endif %}
@@ -43,7 +43,7 @@
     </div>
 
     {% if paging %}
-    <nav class="timeline__paging" aria-label="Pagination">
+    <nav class="ms-timeline__paging" aria-label="Pagination">
       {% if paging.before %}
       <a href="?before={{ paging.before }}" class="button button--secondary">
         {{ __("microsub.reader.newer") }}
@@ -60,7 +60,7 @@
     {% endif %}
 
     {% else %}
-    <div class="reader__empty">
+    <div class="ms-reader__empty">
       <p>{{ __("microsub.reader.empty") }}</p>
     </div>
     {% endif %}
@@ -69,14 +69,14 @@
   <script type="module">
     const timeline = document.getElementById('timeline');
     if (timeline) {
-      const items = Array.from(timeline.querySelectorAll('.item-card'));
+      const items = Array.from(timeline.querySelectorAll('.ms-item-card'));
       let currentIndex = -1;
 
       function focusItem(index) {
-        if (items[currentIndex]) items[currentIndex].classList.remove('item-card--focused');
+        if (items[currentIndex]) items[currentIndex].classList.remove('ms-item-card--focused');
         currentIndex = Math.max(0, Math.min(index, items.length - 1));
         if (items[currentIndex]) {
-          items[currentIndex].classList.add('item-card--focused');
+          items[currentIndex].classList.add('ms-item-card--focused');
           items[currentIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
         }
       }
@@ -89,7 +89,7 @@
           case 'o': case 'Enter':
             e.preventDefault();
             if (items[currentIndex]) {
-              const link = items[currentIndex].querySelector('.item-card__link');
+              const link = items[currentIndex].querySelector('.ms-item-card__link');
               if (link) link.click();
             }
             break;
@@ -100,7 +100,7 @@
       const microsubApiUrl = '{{ baseUrl }}'.replace(/\/reader$/, '');
 
       timeline.addEventListener('click', async (e) => {
-        const button = e.target.closest('.item-actions__mark-read');
+        const button = e.target.closest('.ms-item-actions__mark-read');
         if (!button) return;
 
         e.preventDefault();
@@ -128,16 +128,16 @@
           });
 
           if (response.ok) {
-            const card = button.closest('.item-card');
+            const card = button.closest('.ms-item-card');
             if (card) {
               card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
               card.style.opacity = '0';
               card.style.transform = 'translateX(-20px)';
               setTimeout(() => {
-                const wrapper = card.closest('.timeline-view__item');
+                const wrapper = card.closest('.ms-timeline-view__item');
                 if (wrapper) wrapper.remove();
                 else card.remove();
-                if (timeline.querySelectorAll('.item-card').length === 0) {
+                if (timeline.querySelectorAll('.ms-item-card').length === 0) {
                   location.reload();
                 }
               }, 300);
@@ -154,14 +154,14 @@
 
       // Handle caret toggle for mark-source-read popover
       timeline.addEventListener('click', (e) => {
-        const caret = e.target.closest('.item-actions__mark-read-caret');
+        const caret = e.target.closest('.ms-item-actions__mark-read-caret');
         if (!caret) return;
 
         e.preventDefault();
         e.stopPropagation();
 
         // Close other open popovers
-        for (const p of timeline.querySelectorAll('.item-actions__mark-read-popover:not([hidden])')) {
+        for (const p of timeline.querySelectorAll('.ms-item-actions__mark-read-popover:not([hidden])')) {
           if (p !== caret.nextElementSibling) p.hidden = true;
         }
 
@@ -171,7 +171,7 @@
 
       // Handle mark-source-read button
       timeline.addEventListener('click', async (e) => {
-        const button = e.target.closest('.item-actions__mark-source-read');
+        const button = e.target.closest('.ms-item-actions__mark-source-read');
         if (!button) return;
 
         e.preventDefault();
@@ -200,7 +200,7 @@
 
           if (response.ok) {
             // Animate out all cards from this feed
-            const cards = timeline.querySelectorAll(`.item-card[data-feed-id="${feedId}"]`);
+            const cards = timeline.querySelectorAll(`.ms-item-card[data-feed-id="${feedId}"]`);
             for (const card of cards) {
               card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
               card.style.opacity = '0';
@@ -208,11 +208,11 @@
             }
             setTimeout(() => {
               for (const card of [...cards]) {
-                const wrapper = card.closest('.timeline-view__item');
+                const wrapper = card.closest('.ms-timeline-view__item');
                 if (wrapper) wrapper.remove();
                 else card.remove();
               }
-              if (timeline.querySelectorAll('.item-card').length === 0) {
+              if (timeline.querySelectorAll('.ms-item-card').length === 0) {
                 location.reload();
               }
             }, 300);
@@ -227,8 +227,8 @@
 
       // Close popovers on outside click
       document.addEventListener('click', (e) => {
-        if (!e.target.closest('.item-actions__mark-read-group')) {
-          for (const p of timeline.querySelectorAll('.item-actions__mark-read-popover:not([hidden])')) {
+        if (!e.target.closest('.ms-item-actions__mark-read-group')) {
+          for (const p of timeline.querySelectorAll('.ms-item-actions__mark-read-popover:not([hidden])')) {
             p.hidden = true;
           }
         }
@@ -236,7 +236,7 @@
 
       // Handle save-for-later buttons
       timeline.addEventListener('click', async (e) => {
-        const button = e.target.closest('.item-actions__save-later');
+        const button = e.target.closest('.ms-item-actions__save-later');
         if (!button) return;
 
         e.preventDefault();
@@ -257,7 +257,7 @@
           });
 
           if (response.ok) {
-            button.classList.add('item-actions__save-later--saved');
+            button.classList.add('ms-item-actions__save-later--saved');
             button.title = 'Saved';
           } else {
             button.disabled = false;