@compose-market/theme 0.0.72 → 0.0.80

package/dist/css/agents.css

@@ -6,13 +6,14 @@
 .cm-agent-card {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
-  gap: 1rem;
-  border-radius: 0.55rem;
-  border: 1px solid hsl(var(--border) / 0.75);
-  background: linear-gradient(145deg, hsl(var(--card) / 0.82), hsl(var(--card) / 0.48));
+  gap: 0.85rem;
+  border-radius: max(var(--radius, 0.25rem), 0.3rem);
+  border: 1px solid hsl(var(--border) / 0.84);
+  background:
+    linear-gradient(180deg, hsl(var(--card) / 0.96), hsl(var(--card) / 0.78));
   box-shadow:
-    0 4px 24px -1px hsl(0 0% 0% / 0.3),
-    inset 0 1px 0 hsl(0 0% 100% / 0.05);
+    0 18px 40px hsl(240 30% 2% / 0.24),
+    inset 0 1px 0 hsl(0 0% 100% / 0.04);
   overflow: hidden;
 }
 
@@ -27,7 +28,7 @@
   transform: translateY(-2px);
   border-color: hsl(var(--primary) / 0.45);
   box-shadow:
-    0 16px 36px hsl(240 30% 2% / 0.28),
+    0 18px 36px hsl(240 30% 2% / 0.32),
     0 0 24px hsl(var(--primary) / 0.14),
     inset 0 1px 0 hsl(0 0% 100% / 0.05);
 }
@@ -42,8 +43,8 @@
 
 .cm-agent-card__main {
   display: grid;
-  gap: 1rem;
-  padding: 1.2rem;
+  gap: 0.9rem;
+  padding: 1rem;
 }
 
 .cm-agent-card__header {
@@ -55,13 +56,15 @@
 .cm-agent-card__avatar {
   width: 3.5rem;
   height: 3.5rem;
-  border-radius: 999px;
-  border: 2px solid hsl(var(--primary) / 0.24);
-  background: radial-gradient(circle, hsl(var(--primary) / 0.12), transparent 72%);
+  border-radius: max(var(--radius, 0.25rem), 0.35rem);
+  border: 1px solid hsl(var(--primary) / 0.28);
+  background:
+    linear-gradient(180deg, hsl(var(--background) / 0.92), hsl(var(--muted) / 0.34));
   display: grid;
   place-items: center;
   flex-shrink: 0;
   overflow: hidden;
+  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.08);
 }
 
 .cm-agent-card__avatar-image {
@@ -73,9 +76,9 @@
 .cm-agent-card__avatar-fallback {
   font-family: var(--font-mono), monospace;
   color: hsl(var(--primary));
-  font-size: 1rem;
+  font-size: 0.88rem;
   font-weight: 700;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.14em;
   text-transform: uppercase;
 }
 
@@ -107,8 +110,8 @@
 
 .cm-agent-card__description {
   color: hsl(var(--muted-foreground));
-  font-size: 0.86rem;
-  line-height: 1.55;
+  font-size: 0.84rem;
+  line-height: 1.48;
 }
 
 .cm-agent-card__badges,
@@ -129,8 +132,11 @@
   border: 1px solid hsl(var(--border) / 0.72);
   background: hsl(var(--muted) / 0.28);
   color: hsl(var(--muted-foreground));
-  font-size: 0.72rem;
+  font-family: var(--font-mono), monospace;
+  font-size: 0.64rem;
+  letter-spacing: 0.08em;
   line-height: 1;
+  text-transform: uppercase;
 }
 
 .cm-agent-card__badge-icon {
@@ -180,8 +186,8 @@
   grid-template-columns: auto minmax(0, 1fr);
   gap: 0.6rem;
   align-items: center;
-  padding: 0.8rem 0.9rem;
-  border-radius: 0.35rem;
+  padding: 0.72rem 0.8rem;
+  border-radius: var(--radius, 0.25rem);
   border: 1px solid hsl(var(--border) / 0.65);
   background: hsl(var(--background) / 0.5);
 }
@@ -204,8 +210,9 @@
 .cm-agent-card__tags-title,
 .cm-agent-card__meta-label {
   color: hsl(var(--muted-foreground));
-  font-size: 0.68rem;
-  letter-spacing: 0.08em;
+  font-family: var(--font-mono), monospace;
+  font-size: 0.62rem;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
 }
 
@@ -214,7 +221,7 @@
 .cm-agent-card__meta-value {
   color: hsl(var(--foreground));
   font-family: var(--font-mono), monospace;
-  font-size: 0.86rem;
+  font-size: 0.8rem;
   line-height: 1.2;
   overflow-wrap: anywhere;
 }
@@ -249,10 +256,11 @@
   grid-template-columns: auto minmax(0, 1fr);
   gap: 0.7rem;
   align-items: center;
-  padding: 0.95rem 1rem;
-  border-radius: 0.4rem;
+  padding: 0.85rem 0.95rem;
+  border-radius: var(--radius, 0.25rem);
   border: 1px solid hsl(var(--border) / 0.72);
-  background: linear-gradient(135deg, hsl(var(--primary) / 0.12), transparent 68%);
+  background:
+    linear-gradient(135deg, hsl(var(--primary) / 0.11), transparent 68%);
 }
 
 .cm-agent-card__focus-icon {
@@ -310,7 +318,7 @@
   gap: 0.6rem;
   align-items: center;
   padding: 0.65rem 0.75rem;
-  border-radius: 0.35rem;
+  border-radius: var(--radius, 0.25rem);
   border: 1px solid hsl(var(--border) / 0.65);
   background: hsl(var(--background) / 0.42);
 }
@@ -342,7 +350,7 @@
   display: flex;
   align-items: flex-start;
   gap: 0.55rem;
-  padding: 1.2rem 1.2rem 1.2rem 0;
+  padding: 1rem 1rem 1rem 0;
 }
 
 .cm-agent-card__action-stack {
@@ -357,7 +365,7 @@
 }
 
 .cm-agent-card__skeleton {
-  border-radius: 0.75rem;
+  border-radius: var(--radius, 0.25rem);
   background: linear-gradient(90deg, hsl(var(--muted) / 0.55), hsl(var(--muted) / 0.8), hsl(var(--muted) / 0.55));
   background-size: 220% 100%;
   animation: cm-agent-card-shimmer 1.6s linear infinite;
@@ -366,7 +374,7 @@
 .cm-agent-card__skeleton--avatar {
   width: 3.5rem;
   height: 3.5rem;
-  border-radius: 999px;
+  border-radius: max(var(--radius, 0.25rem), 0.35rem);
 }
 
 .cm-agent-card__skeleton--title {
@@ -410,59 +418,57 @@
 }
 
 @media (max-width: 720px) {
-  .cm-agent-card__actions {
-    padding: 0 1.2rem 1.2rem;
-    justify-content: flex-end;
-    flex-wrap: wrap;
-  }
-
   .cm-agent-card__main {
+    gap: 0.65rem;
     padding: 0.85rem;
-    gap: 0.75rem;
   }
 
-  .cm-agent-card__metrics {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 0.45rem;
+  .cm-agent-card__avatar {
+    width: 2.5rem;
+    height: 2.5rem;
   }
 
-  .cm-agent-card__metric {
-    padding: 0.6rem 0.7rem;
+  .cm-agent-card__title {
+    font-size: 0.92rem;
   }
 
   .cm-agent-card__description {
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
+    font-size: 0.78rem;
+    line-height: 1.4;
   }
 
-  .cm-agent-card__tags {
-    max-height: 3.5rem;
-    overflow: hidden;
+  .cm-agent-card__metrics {
+    grid-template-columns: repeat(2, 1fr);
   }
 
-  .cm-agent-card__avatar {
-    width: 2.5rem;
-    height: 2.5rem;
+  .cm-agent-card__metric {
+    padding: 0.55rem 0.7rem;
   }
 
   .cm-agent-card__focus {
     padding: 0.7rem 0.8rem;
   }
-}
 
-@media (max-width: 480px) {
-  .cm-agent-card__metrics {
-    grid-template-columns: 1fr;
+  .cm-agent-card__badges,
+  .cm-agent-card__tags {
+    gap: 0.3rem;
   }
 
-  .cm-agent-card__focus {
-    grid-template-columns: 1fr;
-    text-align: center;
+  .cm-agent-card__badge,
+  .cm-agent-card__tag {
+    min-height: 1.45rem;
+    padding: 0 0.5rem;
+    font-size: 0.65rem;
   }
 
-  .cm-agent-card__focus-icon {
-    justify-self: center;
+  .cm-agent-card__endpoint-code,
+  .cm-agent-card__creator-value {
+    font-size: 0.68rem;
+  }
+
+  .cm-agent-card__actions {
+    padding: 0 0.85rem 0.85rem;
+    justify-content: flex-end;
+    flex-wrap: wrap;
   }
 }

package/dist/css/app.css

@@ -5,10 +5,12 @@
 
 .cm-app-shell {
   position: relative;
-  min-height: 100vh;
+  min-height: 100dvh;
   background: hsl(var(--background));
   color: hsl(var(--foreground));
   overflow-x: hidden;
+  overflow-y: hidden;
+  isolation: isolate;
 }
 
 .cm-app-shell__backdrop {
@@ -17,6 +19,11 @@
   pointer-events: none;
   z-index: 0;
   overflow: hidden;
+  background:
+    radial-gradient(circle at 18% 14%, hsl(var(--primary) / 0.14), transparent 26%),
+    radial-gradient(circle at 82% 12%, hsl(var(--accent) / 0.12), transparent 22%),
+    radial-gradient(circle at 50% 100%, hsl(220 60% 7% / 0.9), transparent 48%),
+    linear-gradient(180deg, hsl(220 50% 4%), hsl(var(--background)) 42%, hsl(223 47% 3%));
 }
 
 .cm-app-shell__grid,
@@ -27,24 +34,26 @@
 }
 
 .cm-app-shell__grid {
-  background-size: 40px 40px;
+  background-size: 48px 48px;
   background-image:
-    linear-gradient(to right, hsl(217 33% 17% / 0.3) 1px, transparent 1px),
-    linear-gradient(to bottom, hsl(217 33% 17% / 0.3) 1px, transparent 1px);
+    linear-gradient(to right, hsl(188 95% 43% / 0.08) 1px, transparent 1px),
+    linear-gradient(to bottom, hsl(188 95% 43% / 0.08) 1px, transparent 1px);
   transition: transform 140ms linear;
+  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.16));
 }
 
 .cm-app-shell__gradient {
   background-image:
-    radial-gradient(circle at 50% 0%, hsl(270 60% 10% / 0.2), transparent 70%),
-    linear-gradient(to bottom, transparent, hsl(var(--background)));
+    radial-gradient(circle at 50% 0%, hsl(var(--primary) / 0.08), transparent 38%),
+    radial-gradient(circle at 55% 18%, hsl(var(--accent) / 0.08), transparent 30%),
+    linear-gradient(180deg, transparent 0%, hsl(var(--background) / 0.18) 36%, hsl(var(--background)) 100%);
 }
 
 .cm-app-shell__scanline {
   top: -100px;
   height: 100px;
-  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, hsl(188 95% 43% / 0.05) 50%, rgba(0, 0, 0, 0) 100%);
-  opacity: 0.1;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, hsl(188 95% 43% / 0.07) 50%, rgba(0, 0, 0, 0) 100%);
+  opacity: 0.22;
   animation: cm-app-scanline 8s linear infinite;
 }
 
@@ -61,5 +70,5 @@
 .cm-app-shell__content {
   position: relative;
   z-index: 1;
-  min-height: 100vh;
+  min-height: 100dvh;
 }

package/dist/css/index.d.ts

@@ -12,5 +12,5 @@ export declare function generateRadiusCss(): string;
 export declare const baseTokensCss: string;
 export declare const darkThemeCss: string;
 export declare const lightThemeCss: string;
-export declare const indexCss = "/**\n * Compose.Market Theme System\n * @compose-market/theme/css\n * \n * Import this file for the complete theme (dark by default).\n * For light mode support, also import ./light.css\n */\n\n@import './tokens.css';\n@import './dark.css';\n@import './shell.css';\n";
+export declare const indexCss = "/**\n * Compose.Market Theme System\n * @compose-market/theme/css\n * \n * Import this file for the complete theme (dark by default).\n * For light mode support, also import ./light.css\n */\n\n@import './tokens.css';\n@import './dark.css';\n@import './shell.css';\n@import './effects.css';\n@import './app.css';\n@import './agents.css';\n@import './session.css';\n";
 //# sourceMappingURL=index.d.ts.map

package/dist/css/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/css/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,SAAS,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAanF;AAED,wBAAgB,eAAe,IAAI,MAAM,CASxC;AAED,wBAAgB,iBAAiB,IAAI,MAAM,CAS1C;AAED,eAAO,MAAM,aAAa,QAazB,CAAC;AAEF,eAAO,MAAM,YAAY,QAaxB,CAAC;AAEF,eAAO,MAAM,aAAa,QAiBzB,CAAC;AAEF,eAAO,MAAM,QAAQ,+QAWpB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/css/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,SAAS,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAanF;AAED,wBAAgB,eAAe,IAAI,MAAM,CASxC;AAED,wBAAgB,iBAAiB,IAAI,MAAM,CAS1C;AAED,eAAO,MAAM,aAAa,QAazB,CAAC;AAEF,eAAO,MAAM,YAAY,QAaxB,CAAC;AAEF,eAAO,MAAM,aAAa,QAiBzB,CAAC;AAEF,eAAO,MAAM,QAAQ,kXAepB,CAAC"}

package/dist/css/index.js

@@ -93,5 +93,9 @@ export const indexCss = `/**
 @import './tokens.css';
 @import './dark.css';
 @import './shell.css';
+@import './effects.css';
+@import './app.css';
+@import './agents.css';
+@import './session.css';
 `;
 //# sourceMappingURL=index.js.map

package/dist/css/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/css/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,UAAU,gBAAgB,CAAC,KAAuB,EAAE,SAAiB;IACzE,MAAM,KAAK,GAAa,EAAE,CAAC;IAE3B,KAAK,CAAC,IAAI,CAAC,4BAA4B,SAAS,KAAK,CAAC,CAAC;IACvD,KAAK,CAAC,IAAI,CAAC,4CAA4C,CAAC,CAAC;IACzD,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEf,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACjD,MAAM,UAAU,GAAG,KAAK,GAAG,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC;QACvE,KAAK,CAAC,IAAI,CAAC,KAAK,UAAU,KAAK,KAAK,GAAG,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAED,MAAM,UAAU,eAAe;IAC7B,MAAM,KAAK,GAAa,EAAE,CAAC;IAE3B,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC/B,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC;QAC/C,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IACnE,CAAC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAED,MAAM,UAAU,iBAAiB;IAC/B,MAAM,KAAK,GAAa,EAAE,CAAC;IAE3B,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAClC,KAAK,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;QACtC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;EAS3B,eAAe,EAAE;;EAEjB,iBAAiB,EAAE;;CAEpB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;EAS1B,gBAAgB,CAAC,SAAS,EAAE,MAAM,CAAC;;;;CAIpC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;EAS3B,gBAAgB,CAAC,UAAU,EAAE,OAAO,CAAC;;;;;;EAMrC,gBAAgB,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;;CAEtE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;CAWvB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/css/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,UAAU,gBAAgB,CAAC,KAAuB,EAAE,SAAiB;IACzE,MAAM,KAAK,GAAa,EAAE,CAAC;IAE3B,KAAK,CAAC,IAAI,CAAC,4BAA4B,SAAS,KAAK,CAAC,CAAC;IACvD,KAAK,CAAC,IAAI,CAAC,4CAA4C,CAAC,CAAC;IACzD,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEf,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACjD,MAAM,UAAU,GAAG,KAAK,GAAG,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC;QACvE,KAAK,CAAC,IAAI,CAAC,KAAK,UAAU,KAAK,KAAK,GAAG,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAED,MAAM,UAAU,eAAe;IAC7B,MAAM,KAAK,GAAa,EAAE,CAAC;IAE3B,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC/B,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC;QAC/C,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IACnE,CAAC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAED,MAAM,UAAU,iBAAiB;IAC/B,MAAM,KAAK,GAAa,EAAE,CAAC;IAE3B,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAClC,KAAK,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;QACtC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;EAS3B,eAAe,EAAE;;EAEjB,iBAAiB,EAAE;;CAEpB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;EAS1B,gBAAgB,CAAC,SAAS,EAAE,MAAM,CAAC;;;;CAIpC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;EAS3B,gBAAgB,CAAC,UAAU,EAAE,OAAO,CAAC;;;;;;EAMrC,gBAAgB,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;;CAEtE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;CAevB,CAAC"}

package/dist/css/session.css

@@ -43,7 +43,7 @@
   align-items: flex-start;
   justify-content: space-between;
   gap: 1rem;
-  font-size: 0.76rem;
+  font-size: 0.72rem;
 }
 
 .cm-session-menu__row span,
@@ -71,7 +71,10 @@
   border: 0;
   background: transparent;
   color: hsl(var(--foreground));
-  font-size: 0.86rem;
+  font-family: var(--font-mono), monospace;
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
   cursor: pointer;
   transition: background-color 180ms ease, color 180ms ease;
 }
@@ -82,6 +85,7 @@
 
 .cm-session-modal {
   max-width: 34rem;
+  border-radius: max(var(--radius, 0.25rem), 0.3rem);
 }
 
 .cm-session-modal__title-wrap,
@@ -105,9 +109,10 @@
 .cm-session-section__label,
 .cm-session-manage__header {
   color: hsl(var(--muted-foreground));
-  font-size: 0.78rem;
+  font-family: var(--font-mono), monospace;
+  font-size: 0.68rem;
   font-weight: 700;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
 }
 
@@ -120,11 +125,14 @@
 .cm-session-choice {
   min-height: 2.3rem;
   padding: 0.45rem 0.6rem;
-  border-radius: 0.35rem;
+  border-radius: var(--radius, 0.25rem);
   border: 1px solid hsl(var(--border));
   background: hsl(var(--muted));
   color: hsl(var(--foreground));
-  font-size: 0.82rem;
+  font-family: var(--font-mono), monospace;
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
   cursor: pointer;
   transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
 }
@@ -140,7 +148,7 @@
   display: grid;
   gap: 0.45rem;
   padding: 0.9rem 1rem;
-  border-radius: 0.45rem;
+  border-radius: var(--radius, 0.25rem);
   border: 1px solid hsl(var(--border));
   background: hsl(var(--muted) / 0.45);
 }
@@ -191,7 +199,7 @@
   min-height: 9rem;
   padding: 1rem;
   border: 1px dashed hsl(var(--border));
-  border-radius: 0.5rem;
+  border-radius: max(var(--radius, 0.25rem), 0.3rem);
   color: hsl(var(--muted-foreground));
   text-align: center;
 }
@@ -236,7 +244,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 0.35rem;
+  border-radius: var(--radius, 0.25rem);
   border: 1px solid hsl(var(--border));
   background: transparent;
   color: hsl(var(--muted-foreground));
@@ -280,6 +288,10 @@
     grid-template-columns: 1fr;
   }
 
+  .cm-session-modal {
+    max-width: 100%;
+  }
+
   .cm-session-modal__footer,
   .cm-session-manage__header {
     flex-direction: column;
@@ -293,6 +305,6 @@
 
 @media (max-width: 480px) {
   .cm-session-choice-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(2, 1fr);
   }
 }