@mysten-incubation/dev-wallet 0.0.0 → 0.2.0

package/dist/ui/styles.mjs

@@ -1,10 +1,10 @@
 import { css } from "lit";
-
 //#region src/ui/styles.ts
 const resetStyles = css`
 	* {
 		box-sizing: border-box;
 		-webkit-font-smoothing: antialiased;
+		text-rendering: optimizeLegibility;
 		font-family: var(--dev-wallet-font-sans);
 	}
 
@@ -36,44 +36,68 @@ const resetStyles = css`
 `;
 const themeStyles = css`
 	:host {
-		/* Colors — OKLch dark theme */
-		--dev-wallet-background: oklch(0.175 0.028 283);
-		--dev-wallet-foreground: oklch(0.91 0 0);
-		--dev-wallet-primary: oklch(0.55 0.24 265);
-		--dev-wallet-primary-foreground: oklch(0.98 0 0);
-		--dev-wallet-secondary: oklch(0.195 0.04 262);
-		--dev-wallet-secondary-foreground: oklch(0.91 0 0);
-		--dev-wallet-muted: oklch(0.25 0.035 280);
-		--dev-wallet-muted-foreground: oklch(0.62 0.04 280);
-		--dev-wallet-destructive: oklch(0.63 0.26 25);
-		--dev-wallet-positive: oklch(0.72 0.19 145);
-		--dev-wallet-warning: oklch(0.79 0.17 75);
-		--dev-wallet-border: oklch(0.25 0.035 280);
-		--dev-wallet-input: oklch(0.25 0.035 280);
-		--dev-wallet-ring: oklch(0.55 0.24 265);
-		--dev-wallet-status-connected: #22c55e;
-		--dev-wallet-status-disconnected: #6b7280;
-
-		/* Radius scale — derived from base */
-		--dev-wallet-radius: 12px;
-		--dev-wallet-radius-xs: calc(var(--dev-wallet-radius) - 6px);
-		--dev-wallet-radius-sm: calc(var(--dev-wallet-radius) - 4px);
-		--dev-wallet-radius-md: calc(var(--dev-wallet-radius) - 2px);
-		--dev-wallet-radius-xl: calc(var(--dev-wallet-radius) + 4px);
+		/* Handoff tokens — dark devtools surface, Sui blue accent. */
+		--dev-wallet-bg-0: #05080f;
+		--dev-wallet-bg-1: #0a1322;
+		--dev-wallet-bg-2: #0f1b30;
+		--dev-wallet-bg-3: #15243e;
+		--dev-wallet-bg-4: #1c2f4d;
+		--dev-wallet-bg-hover: rgba(255, 255, 255, 0.04);
+		--dev-wallet-border: rgba(255, 255, 255, 0.07);
+		--dev-wallet-border-2: rgba(255, 255, 255, 0.12);
+		--dev-wallet-border-strong: rgba(77, 162, 255, 0.35);
+		--dev-wallet-foreground: #e6eefb;
+		--dev-wallet-text-2: #94a6c2;
+		--dev-wallet-text-3: #5c708e;
+		--dev-wallet-text-mute: #3d526f;
+		--dev-wallet-scrim: rgba(2, 6, 14, 0.7);
+		--dev-wallet-primary: #4da2ff;
+		--dev-wallet-primary-hover: #6fbcff;
+		--dev-wallet-primary-foreground: #03101f;
+		--dev-wallet-accent-fade: rgba(77, 162, 255, 0.12);
+		--dev-wallet-secondary: var(--dev-wallet-bg-2);
+		--dev-wallet-secondary-foreground: var(--dev-wallet-foreground);
+		--dev-wallet-background: var(--dev-wallet-bg-0);
+		--dev-wallet-surface: var(--dev-wallet-bg-1);
+		--dev-wallet-muted: var(--dev-wallet-bg-3);
+		--dev-wallet-muted-foreground: var(--dev-wallet-text-2);
+		--dev-wallet-input: var(--dev-wallet-bg-2);
+		--dev-wallet-ring: var(--dev-wallet-primary);
+		--dev-wallet-destructive: #ff6b6b;
+		--dev-wallet-positive: #4ecca3;
+		--dev-wallet-warning: #ffb454;
+		--dev-wallet-magenta: #c792ea;
+		--dev-wallet-teal: #66e1d0;
+		--dev-wallet-status-connected: var(--dev-wallet-positive);
+		--dev-wallet-status-disconnected: var(--dev-wallet-text-3);
+
+		/* Radius scale */
 		--dev-wallet-radius-2xs: 3px;
+		--dev-wallet-radius-xs: 4px;
+		--dev-wallet-radius-sm: 4px;
+		--dev-wallet-radius: 6px;
+		--dev-wallet-radius-md: 6px;
+		--dev-wallet-radius-lg: 10px;
+		--dev-wallet-radius-xl: 14px;
 
 		/* Shadows */
-		--dev-wallet-shadow-sm: 0 1px 3px color-mix(in oklab, oklch(0 0 0) 10%, transparent);
-		--dev-wallet-shadow-md: 0 4px 12px color-mix(in oklab, oklch(0 0 0) 30%, transparent);
+		--dev-wallet-shadow-sm: 0 1px 3px rgba(2, 8, 20, 0.25);
+		--dev-wallet-shadow-md:
+			0 8px 24px rgba(0, 8, 24, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
+		--dev-wallet-shadow-card:
+			0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 30px rgba(2, 8, 20, 0.4);
+		--dev-wallet-shadow-lg:
+			0 24px 60px rgba(0, 8, 24, 0.55), 0 2px 0 rgba(255, 255, 255, 0.04) inset;
+		--dev-wallet-shadow-drawer:
+			0 30px 80px rgba(0, 8, 24, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
 
 		/* Typography */
 		--dev-wallet-font-sans:
-			ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-			'Helvetica Neue', Arial, sans-serif;
+			'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 		--dev-wallet-font-weight-medium: 500;
 		--dev-wallet-font-weight-semibold: 600;
-		--dev-wallet-font-mono:
-			ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+		--dev-wallet-font-weight-bold: 700;
+		--dev-wallet-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
 
 		/* Font-size scale */
 		--dev-wallet-text-2xs: 10px;
@@ -83,7 +107,90 @@ const themeStyles = css`
 		--dev-wallet-text-md: 14px;
 		--dev-wallet-text-lg: 15px;
 		--dev-wallet-text-xl: 16px;
-		--dev-wallet-shadow-lg: 0 8px 32px color-mix(in oklab, oklch(0 0 0) 40%, transparent);
+	}
+
+	.mono {
+		font-family: var(--dev-wallet-font-mono);
+		font-feature-settings: 'ss01', 'cv01';
+	}
+
+	.chip {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		height: 22px;
+		padding: 0 8px;
+		border-radius: 999px;
+		font-family: var(--dev-wallet-font-mono);
+		font-size: 10.5px;
+		font-weight: var(--dev-wallet-font-weight-medium);
+		letter-spacing: 0.02em;
+		background: var(--dev-wallet-bg-3);
+		color: var(--dev-wallet-text-2);
+		border: 1px solid var(--dev-wallet-border);
+		white-space: nowrap;
+	}
+
+	.chip-accent {
+		color: var(--dev-wallet-primary);
+		border-color: var(--dev-wallet-border-strong);
+		background: var(--dev-wallet-accent-fade);
+	}
+
+	.chip-success {
+		color: var(--dev-wallet-positive);
+		border-color: rgba(78, 204, 163, 0.3);
+		background: rgba(78, 204, 163, 0.08);
+	}
+
+	.chip-warn {
+		color: var(--dev-wallet-warning);
+		border-color: rgba(255, 180, 84, 0.3);
+		background: rgba(255, 180, 84, 0.08);
+	}
+
+	.chip-mute {
+		color: var(--dev-wallet-text-3);
+	}
+
+	@keyframes slidein-right {
+		from {
+			opacity: 0;
+			transform: translateX(20px);
+		}
+		to {
+			opacity: 1;
+			transform: translateX(0);
+		}
+	}
+
+	@keyframes fadein {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes popin {
+		from {
+			opacity: 0;
+			transform: scale(0.96) translateY(8px);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1) translateY(0);
+		}
+	}
+
+	@keyframes pulse-ring {
+		0% {
+			box-shadow: 0 0 0 0 rgba(77, 162, 255, 0.45);
+		}
+		100% {
+			box-shadow: 0 0 0 14px rgba(77, 162, 255, 0);
+		}
 	}
 `;
 const dropdownItemStyles = css`
@@ -92,14 +199,15 @@ const dropdownItemStyles = css`
 		align-items: center;
 		gap: 8px;
 		width: 100%;
-		padding: 8px 10px;
+		padding: 7px 8px;
+		border-radius: var(--dev-wallet-radius);
 		font-size: 12px;
 		color: var(--dev-wallet-foreground);
 		text-align: left;
 	}
 
 	.dropdown-item:hover {
-		background: var(--dev-wallet-secondary);
+		background: var(--dev-wallet-bg-hover);
 	}
 
 	.dropdown-item[aria-selected='true'] {
@@ -108,33 +216,36 @@ const dropdownItemStyles = css`
 `;
 const connectDialogStyles = css`
 	.connect-dialog {
-		width: 360px;
+		width: 460px;
 		max-height: min(600px, 80vh);
 		border-radius: var(--dev-wallet-radius-xl);
-		background: var(--dev-wallet-background);
-		border: 1px solid var(--dev-wallet-border);
+		background: var(--dev-wallet-surface);
+		border: 1px solid var(--dev-wallet-border-2);
 		box-shadow: var(--dev-wallet-shadow-lg);
 		overflow: hidden;
 		display: flex;
 		flex-direction: column;
 		padding: 0;
 		color: inherit;
+		pointer-events: auto;
+		animation: popin 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
 	}
 
 	.connect-dialog::backdrop {
-		background: color-mix(in oklab, oklch(0 0 0) 50%, transparent);
+		background: rgba(2, 6, 14, 0.55);
 	}
 
 	.connect-dialog-header {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		padding: 14px 16px;
+		padding: 14px 16px 12px;
 		border-bottom: 1px solid var(--dev-wallet-border);
+		background: var(--dev-wallet-bg-1);
 	}
 
 	.connect-dialog-title {
-		font-size: 15px;
+		font-size: 13px;
 		font-weight: var(--dev-wallet-font-weight-semibold);
 		color: var(--dev-wallet-foreground);
 	}
@@ -146,40 +257,70 @@ const actionButtonStyles = css`
 	}
 
 	.btn {
+		height: 30px;
+		padding: 0 12px;
+		border-radius: var(--dev-wallet-radius);
+		border: 1px solid var(--dev-wallet-border-2);
+		background: var(--dev-wallet-bg-3);
+		color: var(--dev-wallet-foreground);
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 6px;
+		font-size: 12px;
+		font-weight: var(--dev-wallet-font-weight-medium);
+		white-space: nowrap;
+		transition:
+			background 120ms,
+			border-color 120ms,
+			color 120ms,
+			transform 80ms;
+	}
+
+	.actions .btn {
 		flex: 1;
-		padding: 10px 16px;
-		border-radius: var(--dev-wallet-radius-md);
-		font-size: 13px;
-		font-weight: var(--dev-wallet-font-weight-semibold);
-		transition: background-color 0.15s;
+	}
+
+	.btn:hover {
+		background: var(--dev-wallet-bg-4);
+		border-color: var(--dev-wallet-border-strong);
+	}
+
+	.btn:active {
+		transform: translateY(0.5px);
 	}
 
 	.btn-approve {
-		background: var(--dev-wallet-positive);
+		background: var(--dev-wallet-primary);
+		border-color: var(--dev-wallet-primary);
 		color: var(--dev-wallet-primary-foreground);
+		font-weight: var(--dev-wallet-font-weight-semibold);
 	}
 
 	.btn-approve:hover {
-		background: oklab(from var(--dev-wallet-positive) calc(l - 0.03) a b);
+		background: var(--dev-wallet-primary-hover);
+		border-color: var(--dev-wallet-primary-hover);
 	}
 
 	.btn-reject {
-		background: var(--dev-wallet-destructive);
-		color: var(--dev-wallet-primary-foreground);
+		background: transparent;
+		color: var(--dev-wallet-destructive);
 	}
 
 	.btn-reject:hover {
-		background: oklab(from var(--dev-wallet-destructive) calc(l - 0.05) a b);
+		background: rgba(255, 107, 107, 0.07);
+		border-color: var(--dev-wallet-destructive);
 	}
 
 	.btn-cancel {
-		background: var(--dev-wallet-secondary);
-		color: var(--dev-wallet-foreground);
-		border: 1px solid var(--dev-wallet-border);
+		background: transparent;
+		color: var(--dev-wallet-text-2);
+		border-color: transparent;
 	}
 
 	.btn-cancel:hover {
-		background: oklab(from var(--dev-wallet-secondary) calc(l - 0.02) a b);
+		background: var(--dev-wallet-bg-hover);
+		color: var(--dev-wallet-foreground);
 	}
 
 	.btn-create {
@@ -202,8 +343,11 @@ const stateStyles = css`
 	.empty-state,
 	.error-state {
 		text-align: center;
-		padding: 16px;
+		padding: 18px 16px;
 		font-size: 13px;
+		border-radius: var(--dev-wallet-radius-lg);
+		border: 1px solid var(--dev-wallet-border);
+		background: var(--dev-wallet-bg-1);
 	}
 
 	.loading {
@@ -220,15 +364,232 @@ const stateStyles = css`
 `;
 const sectionHeaderStyles = css`
 	.section-header {
-		font-size: 13px;
+		font-family: var(--dev-wallet-font-mono);
+		font-size: 10px;
+		font-weight: var(--dev-wallet-font-weight-medium);
+		color: var(--dev-wallet-text-3);
+		text-transform: uppercase;
+		letter-spacing: 0.14em;
+		margin-bottom: 10px;
+	}
+`;
+/** `<dialog>` chrome shared by new-account / accounts confirm-remove / signing-modal. */
+const dialogStyles = css`
+	dialog:not([open]),
+	.confirm-dialog:not([open]) {
+		display: none;
+	}
+
+	dialog,
+	.confirm-dialog {
+		max-width: calc(100vw - 32px);
+		border-radius: var(--dev-wallet-radius-xl);
+		background: var(--dev-wallet-surface);
+		border: 1px solid var(--dev-wallet-border-2);
+		box-shadow: var(--dev-wallet-shadow-lg);
+		display: flex;
+		flex-direction: column;
+		color: inherit;
+		animation: popin 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
+	}
+
+	dialog::backdrop,
+	.confirm-dialog::backdrop {
+		background: color-mix(in oklab, oklch(0 0 0) 50%, transparent);
+	}
+
+	.dialog-title {
+		font-size: 16px;
 		font-weight: var(--dev-wallet-font-weight-semibold);
+		color: var(--dev-wallet-foreground);
+		margin-bottom: 16px;
+	}
+`;
+/** Flex-row card with secondary bg + border + active highlight. */
+const cardItemStyles = css`
+	.network-item,
+	.account-item,
+	.slot-item,
+	.import-item {
+		display: flex;
+		align-items: center;
+		border-radius: var(--dev-wallet-radius-lg);
+		border: 1px solid var(--dev-wallet-border);
+		background: var(--dev-wallet-surface);
+	}
+
+	.network-item.active,
+	.account-item.active,
+	.slot-item.active,
+	.import-item.selected {
+		border-color: var(--dev-wallet-border-strong);
+		background: var(--dev-wallet-accent-fade);
+	}
+`;
+/** Vertical flex container with a 4px gap (override gap per-list). */
+const listContainerStyles = css`
+	.network-list,
+	.account-list,
+	.slot-list,
+	.import-list,
+	.commands-list,
+	.coin-flows {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+`;
+/** Text-input with focus-highlight and reset chrome. */
+const formInputStyles = css`
+	.form-input,
+	.field-input,
+	.action-input,
+	.network-url-input,
+	.edit-label-input {
+		outline: none;
+		box-sizing: border-box;
+		font-family: inherit;
+		color: var(--dev-wallet-foreground);
+		width: 100%;
+	}
+
+	.form-input:focus,
+	.field-input:focus,
+	.action-input:focus {
+		border-color: var(--dev-wallet-primary);
+	}
+
+	.form-input::placeholder,
+	.field-input::placeholder,
+	.action-input::placeholder {
+		color: var(--dev-wallet-muted-foreground);
+	}
+`;
+/** Click-to-copy cursor / hover-tint / `.copied` positive-color states. */
+const copyableTextStyles = css`
+	.account-address,
+	.detail-value.copyable-addr {
+		cursor: pointer;
+		border-radius: var(--dev-wallet-radius-2xs);
+		transition: background 0.15s;
+	}
+
+	.account-address:hover,
+	.detail-value.copyable-addr:hover {
+		background: color-mix(in oklab, var(--dev-wallet-primary) 15%, transparent);
+	}
+
+	.account-address.copied,
+	.detail-value.copied {
+		color: var(--dev-wallet-positive);
+	}
+`;
+/** Truncated monospace text — every muted address span in the wallet UI. */
+const monoTruncateStyles = css`
+	.account-address,
+	.import-item-address,
+	.slot-address,
+	.network-url,
+	.command-detail,
+	.command-arg {
+		font-family: var(--dev-wallet-font-mono);
+		color: var(--dev-wallet-text-3);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-feature-settings: 'ss01', 'cv01';
+	}
+
+	.confirm-account-address {
+		font-family: var(--dev-wallet-font-mono);
+		color: var(--dev-wallet-muted-foreground);
+	}
+`;
+/** Small square icon button used for inline edit / delete actions. */
+const iconButtonStyles = css`
+	.btn-icon,
+	.edit-label-btn,
+	.delete-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: var(--dev-wallet-radius-xs);
 		color: var(--dev-wallet-muted-foreground);
+	}
+
+	.btn-icon:hover,
+	.edit-label-btn:hover {
+		background: var(--dev-wallet-border);
+		color: var(--dev-wallet-foreground);
+	}
+`;
+/** Tiny uppercase pill — every status / scheme / network badge. */
+const badgeStyles = css`
+	.network-active-badge,
+	.account-badge,
+	.import-item-badge,
+	.slot-toggle {
+		font-family: var(--dev-wallet-font-mono);
+		font-size: 10.5px;
+		font-weight: var(--dev-wallet-font-weight-medium);
 		text-transform: uppercase;
-		letter-spacing: 0.5px;
-		margin-bottom: 12px;
+		letter-spacing: 0.02em;
+		white-space: nowrap;
+	}
+`;
+/** Uppercase muted label headings (`.section-label`, `.status-label`, `.field-label`). */
+const subLabelStyles = css`
+	.section-label,
+	.status-label {
+		font-family: var(--dev-wallet-font-mono);
+		font-size: 10px;
+		font-weight: var(--dev-wallet-font-weight-medium);
+		color: var(--dev-wallet-text-3);
+		text-transform: uppercase;
+		letter-spacing: 0.14em;
+	}
+
+	.field-label {
+		display: block;
+		font-size: 12px;
+		font-weight: var(--dev-wallet-font-weight-medium);
+		color: var(--dev-wallet-muted-foreground);
+		margin-bottom: 4px;
+	}
+
+	.section-label-error {
+		color: var(--dev-wallet-destructive);
+	}
+`;
+/** Inline single-line destructive error message. */
+const inlineErrorStyles = css`
+	.error,
+	.inline-error,
+	.confirm-error {
+		color: var(--dev-wallet-destructive);
+		font-size: 12px;
+		word-break: break-word;
 	}
 `;
-const reducedMotionStyles = css`
+/** Circular initial-avatar shared by accounts list + account-selector. */
+const avatarStyles = css`
+	.account-avatar,
+	.avatar {
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: var(--dev-wallet-font-weight-semibold);
+		color: var(--dev-wallet-primary-foreground);
+		background: linear-gradient(135deg, var(--dev-wallet-primary), var(--dev-wallet-teal));
+		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
+		flex-shrink: 0;
+	}
+`;
+const sharedStyles = [
+	resetStyles,
+	themeStyles,
+	css`
 	@media (prefers-reduced-motion: reduce) {
 		*,
 		*::before,
@@ -238,13 +599,14 @@ const reducedMotionStyles = css`
 			transition-duration: 0.01ms !important;
 		}
 	}
-`;
-const sharedStyles = [
-	resetStyles,
-	themeStyles,
-	reducedMotionStyles
+`,
+	css`
+	:host {
+		display: block;
+	}
+`
 ];
-
 //#endregion
-export { actionButtonStyles, connectDialogStyles, dropdownItemStyles, sectionHeaderStyles, sharedStyles, stateStyles };
+export { actionButtonStyles, avatarStyles, badgeStyles, cardItemStyles, connectDialogStyles, copyableTextStyles, dialogStyles, dropdownItemStyles, formInputStyles, iconButtonStyles, inlineErrorStyles, listContainerStyles, monoTruncateStyles, sectionHeaderStyles, sharedStyles, stateStyles, subLabelStyles };
+
 //# sourceMappingURL=styles.mjs.map

package/dist/ui/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","names":[],"sources":["../../src/ui/styles.ts"],"sourcesContent":["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { css } from 'lit';\n\nconst resetStyles = css`\n\t* {\n\t\tbox-sizing: border-box;\n\t\t-webkit-font-smoothing: antialiased;\n\t\tfont-family: var(--dev-wallet-font-sans);\n\t}\n\n\tbutton {\n\t\tappearance: none;\n\t\tbackground-color: transparent;\n\t\tfont-size: inherit;\n\t\tfont-family: inherit;\n\t\tcolor: inherit;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\tcursor: pointer;\n\t\toutline-color: color-mix(in oklab, var(--dev-wallet-ring) 50%, transparent);\n\t}\n\n\tp,\n\th1,\n\th2,\n\th3 {\n\t\tmargin: 0;\n\t\tcolor: var(--dev-wallet-foreground);\n\t}\n\n\t:focus-visible {\n\t\toutline: 2px solid var(--dev-wallet-ring);\n\t\toutline-offset: 2px;\n\t}\n`;\n\nconst themeStyles = css`\n\t:host {\n\t\t/* Colors — OKLch dark theme */\n\t\t--dev-wallet-background: oklch(0.175 0.028 283);\n\t\t--dev-wallet-foreground: oklch(0.91 0 0);\n\t\t--dev-wallet-primary: oklch(0.55 0.24 265);\n\t\t--dev-wallet-primary-foreground: oklch(0.98 0 0);\n\t\t--dev-wallet-secondary: oklch(0.195 0.04 262);\n\t\t--dev-wallet-secondary-foreground: oklch(0.91 0 0);\n\t\t--dev-wallet-muted: oklch(0.25 0.035 280);\n\t\t--dev-wallet-muted-foreground: oklch(0.62 0.04 280);\n\t\t--dev-wallet-destructive: oklch(0.63 0.26 25);\n\t\t--dev-wallet-positive: oklch(0.72 0.19 145);\n\t\t--dev-wallet-warning: oklch(0.79 0.17 75);\n\t\t--dev-wallet-border: oklch(0.25 0.035 280);\n\t\t--dev-wallet-input: oklch(0.25 0.035 280);\n\t\t--dev-wallet-ring: oklch(0.55 0.24 265);\n\t\t--dev-wallet-status-connected: #22c55e;\n\t\t--dev-wallet-status-disconnected: #6b7280;\n\n\t\t/* Radius scale — derived from base */\n\t\t--dev-wallet-radius: 12px;\n\t\t--dev-wallet-radius-xs: calc(var(--dev-wallet-radius) - 6px);\n\t\t--dev-wallet-radius-sm: calc(var(--dev-wallet-radius) - 4px);\n\t\t--dev-wallet-radius-md: calc(var(--dev-wallet-radius) - 2px);\n\t\t--dev-wallet-radius-xl: calc(var(--dev-wallet-radius) + 4px);\n\t\t--dev-wallet-radius-2xs: 3px;\n\n\t\t/* Shadows */\n\t\t--dev-wallet-shadow-sm: 0 1px 3px color-mix(in oklab, oklch(0 0 0) 10%, transparent);\n\t\t--dev-wallet-shadow-md: 0 4px 12px color-mix(in oklab, oklch(0 0 0) 30%, transparent);\n\n\t\t/* Typography */\n\t\t--dev-wallet-font-sans:\n\t\t\tui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n\t\t\t'Helvetica Neue', Arial, sans-serif;\n\t\t--dev-wallet-font-weight-medium: 500;\n\t\t--dev-wallet-font-weight-semibold: 600;\n\t\t--dev-wallet-font-mono:\n\t\t\tui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;\n\n\t\t/* Font-size scale */\n\t\t--dev-wallet-text-2xs: 10px;\n\t\t--dev-wallet-text-xs: 11px;\n\t\t--dev-wallet-text-sm: 12px;\n\t\t--dev-wallet-text-base: 13px;\n\t\t--dev-wallet-text-md: 14px;\n\t\t--dev-wallet-text-lg: 15px;\n\t\t--dev-wallet-text-xl: 16px;\n\t\t--dev-wallet-shadow-lg: 0 8px 32px color-mix(in oklab, oklch(0 0 0) 40%, transparent);\n\t}\n`;\n\nexport const dropdownItemStyles = css`\n\t.dropdown-item {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t\twidth: 100%;\n\t\tpadding: 8px 10px;\n\t\tfont-size: 12px;\n\t\tcolor: var(--dev-wallet-foreground);\n\t\ttext-align: left;\n\t}\n\n\t.dropdown-item:hover {\n\t\tbackground: var(--dev-wallet-secondary);\n\t}\n\n\t.dropdown-item[aria-selected='true'] {\n\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t}\n`;\n\nexport const connectDialogStyles = css`\n\t.connect-dialog {\n\t\twidth: 360px;\n\t\tmax-height: min(600px, 80vh);\n\t\tborder-radius: var(--dev-wallet-radius-xl);\n\t\tbackground: var(--dev-wallet-background);\n\t\tborder: 1px solid var(--dev-wallet-border);\n\t\tbox-shadow: var(--dev-wallet-shadow-lg);\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 0;\n\t\tcolor: inherit;\n\t}\n\n\t.connect-dialog::backdrop {\n\t\tbackground: color-mix(in oklab, oklch(0 0 0) 50%, transparent);\n\t}\n\n\t.connect-dialog-header {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\t\tpadding: 14px 16px;\n\t\tborder-bottom: 1px solid var(--dev-wallet-border);\n\t}\n\n\t.connect-dialog-title {\n\t\tfont-size: 15px;\n\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\tcolor: var(--dev-wallet-foreground);\n\t}\n`;\n\nexport const actionButtonStyles = css`\n\t.actions {\n\t\tdisplay: flex;\n\t\tgap: 8px;\n\t}\n\n\t.btn {\n\t\tflex: 1;\n\t\tpadding: 10px 16px;\n\t\tborder-radius: var(--dev-wallet-radius-md);\n\t\tfont-size: 13px;\n\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\ttransition: background-color 0.15s;\n\t}\n\n\t.btn-approve {\n\t\tbackground: var(--dev-wallet-positive);\n\t\tcolor: var(--dev-wallet-primary-foreground);\n\t}\n\n\t.btn-approve:hover {\n\t\tbackground: oklab(from var(--dev-wallet-positive) calc(l - 0.03) a b);\n\t}\n\n\t.btn-reject {\n\t\tbackground: var(--dev-wallet-destructive);\n\t\tcolor: var(--dev-wallet-primary-foreground);\n\t}\n\n\t.btn-reject:hover {\n\t\tbackground: oklab(from var(--dev-wallet-destructive) calc(l - 0.05) a b);\n\t}\n\n\t.btn-cancel {\n\t\tbackground: var(--dev-wallet-secondary);\n\t\tcolor: var(--dev-wallet-foreground);\n\t\tborder: 1px solid var(--dev-wallet-border);\n\t}\n\n\t.btn-cancel:hover {\n\t\tbackground: oklab(from var(--dev-wallet-secondary) calc(l - 0.02) a b);\n\t}\n\n\t.btn-create {\n\t\tbackground: var(--dev-wallet-primary);\n\t\tcolor: var(--dev-wallet-primary-foreground);\n\t}\n\n\t.btn-create:hover {\n\t\tbackground: oklab(from var(--dev-wallet-primary) calc(l - 0.03) a b);\n\t}\n\n\t.btn-create:disabled,\n\t.btn-approve:disabled {\n\t\topacity: 0.5;\n\t\tcursor: not-allowed;\n\t}\n`;\n\nexport const stateStyles = css`\n\t.loading,\n\t.empty-state,\n\t.error-state {\n\t\ttext-align: center;\n\t\tpadding: 16px;\n\t\tfont-size: 13px;\n\t}\n\n\t.loading {\n\t\tcolor: var(--dev-wallet-muted-foreground);\n\t}\n\n\t.empty-state {\n\t\tcolor: var(--dev-wallet-muted-foreground);\n\t}\n\n\t.error-state {\n\t\tcolor: var(--dev-wallet-destructive);\n\t}\n`;\n\nexport const sectionHeaderStyles = css`\n\t.section-header {\n\t\tfont-size: 13px;\n\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.5px;\n\t\tmargin-bottom: 12px;\n\t}\n`;\n\nconst reducedMotionStyles = css`\n\t@media (prefers-reduced-motion: reduce) {\n\t\t*,\n\t\t*::before,\n\t\t*::after {\n\t\t\tanimation-duration: 0.01ms !important;\n\t\t\tanimation-iteration-count: 1 !important;\n\t\t\ttransition-duration: 0.01ms !important;\n\t\t}\n\t}\n`;\n\nexport const sharedStyles = [resetStyles, themeStyles, reducedMotionStyles];\n"],"mappings":";;;AAKA,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCvB,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDvB,MAAa,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;AAqBrC,MAAa,sBAAsB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCtC,MAAa,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DrC,MAAa,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;AAsB9B,MAAa,sBAAsB,GAAG;;;;;;;;;;AAWtC,MAAM,sBAAsB,GAAG;;;;;;;;;;;AAY/B,MAAa,eAAe;CAAC;CAAa;CAAa;CAAoB"}
+{"version":3,"file":"styles.mjs","names":[],"sources":["../../src/ui/styles.ts"],"sourcesContent":["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { css } from 'lit';\n\nconst resetStyles = css`\n\t* {\n\t\tbox-sizing: border-box;\n\t\t-webkit-font-smoothing: antialiased;\n\t\ttext-rendering: optimizeLegibility;\n\t\tfont-family: var(--dev-wallet-font-sans);\n\t}\n\n\tbutton {\n\t\tappearance: none;\n\t\tbackground-color: transparent;\n\t\tfont-size: inherit;\n\t\tfont-family: inherit;\n\t\tcolor: inherit;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\tcursor: pointer;\n\t\toutline-color: color-mix(in oklab, var(--dev-wallet-ring) 50%, transparent);\n\t}\n\n\tp,\n\th1,\n\th2,\n\th3 {\n\t\tmargin: 0;\n\t\tcolor: var(--dev-wallet-foreground);\n\t}\n\n\t:focus-visible {\n\t\toutline: 2px solid var(--dev-wallet-ring);\n\t\toutline-offset: 2px;\n\t}\n`;\n\nconst themeStyles = css`\n\t:host {\n\t\t/* Handoff tokens — dark devtools surface, Sui blue accent. */\n\t\t--dev-wallet-bg-0: #05080f;\n\t\t--dev-wallet-bg-1: #0a1322;\n\t\t--dev-wallet-bg-2: #0f1b30;\n\t\t--dev-wallet-bg-3: #15243e;\n\t\t--dev-wallet-bg-4: #1c2f4d;\n\t\t--dev-wallet-bg-hover: rgba(255, 255, 255, 0.04);\n\t\t--dev-wallet-border: rgba(255, 255, 255, 0.07);\n\t\t--dev-wallet-border-2: rgba(255, 255, 255, 0.12);\n\t\t--dev-wallet-border-strong: rgba(77, 162, 255, 0.35);\n\t\t--dev-wallet-foreground: #e6eefb;\n\t\t--dev-wallet-text-2: #94a6c2;\n\t\t--dev-wallet-text-3: #5c708e;\n\t\t--dev-wallet-text-mute: #3d526f;\n\t\t--dev-wallet-scrim: rgba(2, 6, 14, 0.7);\n\t\t--dev-wallet-primary: #4da2ff;\n\t\t--dev-wallet-primary-hover: #6fbcff;\n\t\t--dev-wallet-primary-foreground: #03101f;\n\t\t--dev-wallet-accent-fade: rgba(77, 162, 255, 0.12);\n\t\t--dev-wallet-secondary: var(--dev-wallet-bg-2);\n\t\t--dev-wallet-secondary-foreground: var(--dev-wallet-foreground);\n\t\t--dev-wallet-background: var(--dev-wallet-bg-0);\n\t\t--dev-wallet-surface: var(--dev-wallet-bg-1);\n\t\t--dev-wallet-muted: var(--dev-wallet-bg-3);\n\t\t--dev-wallet-muted-foreground: var(--dev-wallet-text-2);\n\t\t--dev-wallet-input: var(--dev-wallet-bg-2);\n\t\t--dev-wallet-ring: var(--dev-wallet-primary);\n\t\t--dev-wallet-destructive: #ff6b6b;\n\t\t--dev-wallet-positive: #4ecca3;\n\t\t--dev-wallet-warning: #ffb454;\n\t\t--dev-wallet-magenta: #c792ea;\n\t\t--dev-wallet-teal: #66e1d0;\n\t\t--dev-wallet-status-connected: var(--dev-wallet-positive);\n\t\t--dev-wallet-status-disconnected: var(--dev-wallet-text-3);\n\n\t\t/* Radius scale */\n\t\t--dev-wallet-radius-2xs: 3px;\n\t\t--dev-wallet-radius-xs: 4px;\n\t\t--dev-wallet-radius-sm: 4px;\n\t\t--dev-wallet-radius: 6px;\n\t\t--dev-wallet-radius-md: 6px;\n\t\t--dev-wallet-radius-lg: 10px;\n\t\t--dev-wallet-radius-xl: 14px;\n\n\t\t/* Shadows */\n\t\t--dev-wallet-shadow-sm: 0 1px 3px rgba(2, 8, 20, 0.25);\n\t\t--dev-wallet-shadow-md:\n\t\t\t0 8px 24px rgba(0, 8, 24, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;\n\t\t--dev-wallet-shadow-card:\n\t\t\t0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 30px rgba(2, 8, 20, 0.4);\n\t\t--dev-wallet-shadow-lg:\n\t\t\t0 24px 60px rgba(0, 8, 24, 0.55), 0 2px 0 rgba(255, 255, 255, 0.04) inset;\n\t\t--dev-wallet-shadow-drawer:\n\t\t\t0 30px 80px rgba(0, 8, 24, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;\n\n\t\t/* Typography */\n\t\t--dev-wallet-font-sans:\n\t\t\t'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\t\t--dev-wallet-font-weight-medium: 500;\n\t\t--dev-wallet-font-weight-semibold: 600;\n\t\t--dev-wallet-font-weight-bold: 700;\n\t\t--dev-wallet-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;\n\n\t\t/* Font-size scale */\n\t\t--dev-wallet-text-2xs: 10px;\n\t\t--dev-wallet-text-xs: 11px;\n\t\t--dev-wallet-text-sm: 12px;\n\t\t--dev-wallet-text-base: 13px;\n\t\t--dev-wallet-text-md: 14px;\n\t\t--dev-wallet-text-lg: 15px;\n\t\t--dev-wallet-text-xl: 16px;\n\t}\n\n\t.mono {\n\t\tfont-family: var(--dev-wallet-font-mono);\n\t\tfont-feature-settings: 'ss01', 'cv01';\n\t}\n\n\t.chip {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tgap: 6px;\n\t\theight: 22px;\n\t\tpadding: 0 8px;\n\t\tborder-radius: 999px;\n\t\tfont-family: var(--dev-wallet-font-mono);\n\t\tfont-size: 10.5px;\n\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\tletter-spacing: 0.02em;\n\t\tbackground: var(--dev-wallet-bg-3);\n\t\tcolor: var(--dev-wallet-text-2);\n\t\tborder: 1px solid var(--dev-wallet-border);\n\t\twhite-space: nowrap;\n\t}\n\n\t.chip-accent {\n\t\tcolor: var(--dev-wallet-primary);\n\t\tborder-color: var(--dev-wallet-border-strong);\n\t\tbackground: var(--dev-wallet-accent-fade);\n\t}\n\n\t.chip-success {\n\t\tcolor: var(--dev-wallet-positive);\n\t\tborder-color: rgba(78, 204, 163, 0.3);\n\t\tbackground: rgba(78, 204, 163, 0.08);\n\t}\n\n\t.chip-warn {\n\t\tcolor: var(--dev-wallet-warning);\n\t\tborder-color: rgba(255, 180, 84, 0.3);\n\t\tbackground: rgba(255, 180, 84, 0.08);\n\t}\n\n\t.chip-mute {\n\t\tcolor: var(--dev-wallet-text-3);\n\t}\n\n\t@keyframes slidein-right {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateX(20px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateX(0);\n\t\t}\n\t}\n\n\t@keyframes fadein {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t@keyframes popin {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: scale(0.96) translateY(8px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: scale(1) translateY(0);\n\t\t}\n\t}\n\n\t@keyframes pulse-ring {\n\t\t0% {\n\t\t\tbox-shadow: 0 0 0 0 rgba(77, 162, 255, 0.45);\n\t\t}\n\t\t100% {\n\t\t\tbox-shadow: 0 0 0 14px rgba(77, 162, 255, 0);\n\t\t}\n\t}\n`;\n\nexport const dropdownItemStyles = css`\n\t.dropdown-item {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t\twidth: 100%;\n\t\tpadding: 7px 8px;\n\t\tborder-radius: var(--dev-wallet-radius);\n\t\tfont-size: 12px;\n\t\tcolor: var(--dev-wallet-foreground);\n\t\ttext-align: left;\n\t}\n\n\t.dropdown-item:hover {\n\t\tbackground: var(--dev-wallet-bg-hover);\n\t}\n\n\t.dropdown-item[aria-selected='true'] {\n\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t}\n`;\n\nexport const connectDialogStyles = css`\n\t.connect-dialog {\n\t\twidth: 460px;\n\t\tmax-height: min(600px, 80vh);\n\t\tborder-radius: var(--dev-wallet-radius-xl);\n\t\tbackground: var(--dev-wallet-surface);\n\t\tborder: 1px solid var(--dev-wallet-border-2);\n\t\tbox-shadow: var(--dev-wallet-shadow-lg);\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 0;\n\t\tcolor: inherit;\n\t\tpointer-events: auto;\n\t\tanimation: popin 200ms cubic-bezier(0.2, 0.7, 0.2, 1);\n\t}\n\n\t.connect-dialog::backdrop {\n\t\tbackground: rgba(2, 6, 14, 0.55);\n\t}\n\n\t.connect-dialog-header {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\t\tpadding: 14px 16px 12px;\n\t\tborder-bottom: 1px solid var(--dev-wallet-border);\n\t\tbackground: var(--dev-wallet-bg-1);\n\t}\n\n\t.connect-dialog-title {\n\t\tfont-size: 13px;\n\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\tcolor: var(--dev-wallet-foreground);\n\t}\n`;\n\nexport const actionButtonStyles = css`\n\t.actions {\n\t\tdisplay: flex;\n\t\tgap: 8px;\n\t}\n\n\t.btn {\n\t\theight: 30px;\n\t\tpadding: 0 12px;\n\t\tborder-radius: var(--dev-wallet-radius);\n\t\tborder: 1px solid var(--dev-wallet-border-2);\n\t\tbackground: var(--dev-wallet-bg-3);\n\t\tcolor: var(--dev-wallet-foreground);\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 6px;\n\t\tfont-size: 12px;\n\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\twhite-space: nowrap;\n\t\ttransition:\n\t\t\tbackground 120ms,\n\t\t\tborder-color 120ms,\n\t\t\tcolor 120ms,\n\t\t\ttransform 80ms;\n\t}\n\n\t.actions .btn {\n\t\tflex: 1;\n\t}\n\n\t.btn:hover {\n\t\tbackground: var(--dev-wallet-bg-4);\n\t\tborder-color: var(--dev-wallet-border-strong);\n\t}\n\n\t.btn:active {\n\t\ttransform: translateY(0.5px);\n\t}\n\n\t.btn-approve {\n\t\tbackground: var(--dev-wallet-primary);\n\t\tborder-color: var(--dev-wallet-primary);\n\t\tcolor: var(--dev-wallet-primary-foreground);\n\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t}\n\n\t.btn-approve:hover {\n\t\tbackground: var(--dev-wallet-primary-hover);\n\t\tborder-color: var(--dev-wallet-primary-hover);\n\t}\n\n\t.btn-reject {\n\t\tbackground: transparent;\n\t\tcolor: var(--dev-wallet-destructive);\n\t}\n\n\t.btn-reject:hover {\n\t\tbackground: rgba(255, 107, 107, 0.07);\n\t\tborder-color: var(--dev-wallet-destructive);\n\t}\n\n\t.btn-cancel {\n\t\tbackground: transparent;\n\t\tcolor: var(--dev-wallet-text-2);\n\t\tborder-color: transparent;\n\t}\n\n\t.btn-cancel:hover {\n\t\tbackground: var(--dev-wallet-bg-hover);\n\t\tcolor: var(--dev-wallet-foreground);\n\t}\n\n\t.btn-create {\n\t\tbackground: var(--dev-wallet-primary);\n\t\tcolor: var(--dev-wallet-primary-foreground);\n\t}\n\n\t.btn-create:hover {\n\t\tbackground: oklab(from var(--dev-wallet-primary) calc(l - 0.03) a b);\n\t}\n\n\t.btn-create:disabled,\n\t.btn-approve:disabled {\n\t\topacity: 0.5;\n\t\tcursor: not-allowed;\n\t}\n`;\n\nexport const stateStyles = css`\n\t.loading,\n\t.empty-state,\n\t.error-state {\n\t\ttext-align: center;\n\t\tpadding: 18px 16px;\n\t\tfont-size: 13px;\n\t\tborder-radius: var(--dev-wallet-radius-lg);\n\t\tborder: 1px solid var(--dev-wallet-border);\n\t\tbackground: var(--dev-wallet-bg-1);\n\t}\n\n\t.loading {\n\t\tcolor: var(--dev-wallet-muted-foreground);\n\t}\n\n\t.empty-state {\n\t\tcolor: var(--dev-wallet-muted-foreground);\n\t}\n\n\t.error-state {\n\t\tcolor: var(--dev-wallet-destructive);\n\t}\n`;\n\nexport const sectionHeaderStyles = css`\n\t.section-header {\n\t\tfont-family: var(--dev-wallet-font-mono);\n\t\tfont-size: 10px;\n\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\tcolor: var(--dev-wallet-text-3);\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.14em;\n\t\tmargin-bottom: 10px;\n\t}\n`;\n\n/** `<dialog>` chrome shared by new-account / accounts confirm-remove / signing-modal. */\nexport const dialogStyles = css`\n\tdialog:not([open]),\n\t.confirm-dialog:not([open]) {\n\t\tdisplay: none;\n\t}\n\n\tdialog,\n\t.confirm-dialog {\n\t\tmax-width: calc(100vw - 32px);\n\t\tborder-radius: var(--dev-wallet-radius-xl);\n\t\tbackground: var(--dev-wallet-surface);\n\t\tborder: 1px solid var(--dev-wallet-border-2);\n\t\tbox-shadow: var(--dev-wallet-shadow-lg);\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tcolor: inherit;\n\t\tanimation: popin 200ms cubic-bezier(0.2, 0.7, 0.2, 1);\n\t}\n\n\tdialog::backdrop,\n\t.confirm-dialog::backdrop {\n\t\tbackground: color-mix(in oklab, oklch(0 0 0) 50%, transparent);\n\t}\n\n\t.dialog-title {\n\t\tfont-size: 16px;\n\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\tcolor: var(--dev-wallet-foreground);\n\t\tmargin-bottom: 16px;\n\t}\n`;\n\n/** Flex-row card with secondary bg + border + active highlight. */\nexport const cardItemStyles = css`\n\t.network-item,\n\t.account-item,\n\t.slot-item,\n\t.import-item {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tborder-radius: var(--dev-wallet-radius-lg);\n\t\tborder: 1px solid var(--dev-wallet-border);\n\t\tbackground: var(--dev-wallet-surface);\n\t}\n\n\t.network-item.active,\n\t.account-item.active,\n\t.slot-item.active,\n\t.import-item.selected {\n\t\tborder-color: var(--dev-wallet-border-strong);\n\t\tbackground: var(--dev-wallet-accent-fade);\n\t}\n`;\n\n/** Vertical flex container with a 4px gap (override gap per-list). */\nexport const listContainerStyles = css`\n\t.network-list,\n\t.account-list,\n\t.slot-list,\n\t.import-list,\n\t.commands-list,\n\t.coin-flows {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 4px;\n\t}\n`;\n\n/** Text-input with focus-highlight and reset chrome. */\nexport const formInputStyles = css`\n\t.form-input,\n\t.field-input,\n\t.action-input,\n\t.network-url-input,\n\t.edit-label-input {\n\t\toutline: none;\n\t\tbox-sizing: border-box;\n\t\tfont-family: inherit;\n\t\tcolor: var(--dev-wallet-foreground);\n\t\twidth: 100%;\n\t}\n\n\t.form-input:focus,\n\t.field-input:focus,\n\t.action-input:focus {\n\t\tborder-color: var(--dev-wallet-primary);\n\t}\n\n\t.form-input::placeholder,\n\t.field-input::placeholder,\n\t.action-input::placeholder {\n\t\tcolor: var(--dev-wallet-muted-foreground);\n\t}\n`;\n\n/** Click-to-copy cursor / hover-tint / `.copied` positive-color states. */\nexport const copyableTextStyles = css`\n\t.account-address,\n\t.detail-value.copyable-addr {\n\t\tcursor: pointer;\n\t\tborder-radius: var(--dev-wallet-radius-2xs);\n\t\ttransition: background 0.15s;\n\t}\n\n\t.account-address:hover,\n\t.detail-value.copyable-addr:hover {\n\t\tbackground: color-mix(in oklab, var(--dev-wallet-primary) 15%, transparent);\n\t}\n\n\t.account-address.copied,\n\t.detail-value.copied {\n\t\tcolor: var(--dev-wallet-positive);\n\t}\n`;\n\n/** Truncated monospace text — every muted address span in the wallet UI. */\nexport const monoTruncateStyles = css`\n\t.account-address,\n\t.import-item-address,\n\t.slot-address,\n\t.network-url,\n\t.command-detail,\n\t.command-arg {\n\t\tfont-family: var(--dev-wallet-font-mono);\n\t\tcolor: var(--dev-wallet-text-3);\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\tfont-feature-settings: 'ss01', 'cv01';\n\t}\n\n\t.confirm-account-address {\n\t\tfont-family: var(--dev-wallet-font-mono);\n\t\tcolor: var(--dev-wallet-muted-foreground);\n\t}\n`;\n\n/** Small square icon button used for inline edit / delete actions. */\nexport const iconButtonStyles = css`\n\t.btn-icon,\n\t.edit-label-btn,\n\t.delete-btn {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder-radius: var(--dev-wallet-radius-xs);\n\t\tcolor: var(--dev-wallet-muted-foreground);\n\t}\n\n\t.btn-icon:hover,\n\t.edit-label-btn:hover {\n\t\tbackground: var(--dev-wallet-border);\n\t\tcolor: var(--dev-wallet-foreground);\n\t}\n`;\n\n/** Tiny uppercase pill — every status / scheme / network badge. */\nexport const badgeStyles = css`\n\t.network-active-badge,\n\t.account-badge,\n\t.import-item-badge,\n\t.slot-toggle {\n\t\tfont-family: var(--dev-wallet-font-mono);\n\t\tfont-size: 10.5px;\n\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.02em;\n\t\twhite-space: nowrap;\n\t}\n`;\n\n/** Uppercase muted label headings (`.section-label`, `.status-label`, `.field-label`). */\nexport const subLabelStyles = css`\n\t.section-label,\n\t.status-label {\n\t\tfont-family: var(--dev-wallet-font-mono);\n\t\tfont-size: 10px;\n\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\tcolor: var(--dev-wallet-text-3);\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.14em;\n\t}\n\n\t.field-label {\n\t\tdisplay: block;\n\t\tfont-size: 12px;\n\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\tmargin-bottom: 4px;\n\t}\n\n\t.section-label-error {\n\t\tcolor: var(--dev-wallet-destructive);\n\t}\n`;\n\n/** Inline single-line destructive error message. */\nexport const inlineErrorStyles = css`\n\t.error,\n\t.inline-error,\n\t.confirm-error {\n\t\tcolor: var(--dev-wallet-destructive);\n\t\tfont-size: 12px;\n\t\tword-break: break-word;\n\t}\n`;\n\n/** Circular initial-avatar shared by accounts list + account-selector. */\nexport const avatarStyles = css`\n\t.account-avatar,\n\t.avatar {\n\t\tborder-radius: 50%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\tcolor: var(--dev-wallet-primary-foreground);\n\t\tbackground: linear-gradient(135deg, var(--dev-wallet-primary), var(--dev-wallet-teal));\n\t\tbox-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);\n\t\tflex-shrink: 0;\n\t}\n`;\n\nconst reducedMotionStyles = css`\n\t@media (prefers-reduced-motion: reduce) {\n\t\t*,\n\t\t*::before,\n\t\t*::after {\n\t\t\tanimation-duration: 0.01ms !important;\n\t\t\tanimation-iteration-count: 1 !important;\n\t\t\ttransition-duration: 0.01ms !important;\n\t\t}\n\t}\n`;\n\nconst hostBlockStyles = css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`;\n\nexport const sharedStyles = [resetStyles, themeStyles, reducedMotionStyles, hostBlockStyles];\n"],"mappings":";;AAKA,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCvB,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgKvB,MAAa,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;AAsBrC,MAAa,sBAAsB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCtC,MAAa,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFrC,MAAa,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;AAyB9B,MAAa,sBAAsB,GAAG;;;;;;;;;;;;AAatC,MAAa,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiC/B,MAAa,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;;;AAsBjC,MAAa,sBAAsB,GAAG;;;;;;;;;;;;;AActC,MAAa,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BlC,MAAa,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;AAoBrC,MAAa,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;AAsBrC,MAAa,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;AAmBnC,MAAa,cAAc,GAAG;;;;;;;;;;;;;;AAe9B,MAAa,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;AAyBjC,MAAa,oBAAoB,GAAG;;;;;;;;;;AAWpC,MAAa,eAAe,GAAG;;;;;;;;;;;;;;AAiC/B,MAAa,eAAe;CAAC;CAAa;CAAa,AAlB3B,GAAG;;;;;;;;;;;CAkB6C,AANpD,GAAG;;;;;CAMiE"}