@transcodes/ui-components 0.2.0 → 0.3.0

package/dist/index.d.ts

@@ -286,6 +286,35 @@ export declare class StorageController<T = unknown> extends BaseController {
     hostDisconnected(): void;
 }
 
+/**
+ * A card component for displaying authenticator information.
+ * Commonly used for passkeys, TOTP, USB security keys, etc.
+ *
+ * @fires tc-delete - Fired when the delete button is clicked
+ * @fires tc-toggle - Fired when the enable/disable toggle is clicked
+ * @fires tc-click - Fired when the card is clicked
+ * @csspart card - The card container
+ * @csspart icon - The authenticator type icon container
+ * @csspart content - The main content area
+ * @csspart name - The authenticator name
+ * @csspart meta - The metadata area (last used, etc.)
+ * @csspart actions - The actions area
+ * @csspart delete - The delete button
+ */
+export declare class TcAuthenticatorCard extends LitElement {
+    name: string;
+    type: 'passkey' | 'totp' | 'usb' | 'phone' | 'email';
+    lastUsed: string;
+    enabled: boolean;
+    deletable: boolean;
+    clickable: boolean;
+    static styles: CSSResult;
+    private getIconName;
+    private handleCardClick;
+    private handleDelete;
+    render(): TemplateResult<1>;
+}
+
 /**
  * A simple container component without default flex layout.
  * Use for wrapping content with custom styles.
@@ -391,6 +420,23 @@ export declare class TcDivider extends LitElement {
     render(): TemplateResult<1>;
 }
 
+/**
+ * A simplified error/warning/info message component.
+ * Wraps tc-callout with appropriate icon and text styling.
+ *
+ * @csspart callout - The underlying callout container
+ * @csspart icon - The icon element
+ * @csspart message - The message text
+ */
+export declare class TcErrorMessage extends LitElement {
+    variant: 'warning' | 'info' | 'error';
+    message: string;
+    static styles: CSSResult;
+    private getIconName;
+    private getIconColor;
+    render(): TemplateResult<1> | null;
+}
+
 /**
  * A full-screen error state with icon, message, and retry action.
  *
@@ -539,6 +585,38 @@ export declare class TcInput extends LitElement {
     focus(): void;
 }
 
+/**
+ * An input field with an attached chip indicator.
+ * Useful for showing authentication method alongside email/username input.
+ *
+ * @fires tc-input - Fired when input value changes
+ * @fires tc-blur - Fired when input loses focus
+ * @fires tc-keydown - Fired on keydown
+ * @csspart wrapper - The input wrapper container
+ * @csspart input - The input element
+ * @csspart chip - The chip element
+ */
+export declare class TcInputWithChip extends LitElement {
+    label: string;
+    placeholder: string;
+    value: string;
+    error: string;
+    disabled: boolean;
+    readonly: boolean;
+    chipLabel: string;
+    chipIcon: string;
+    chipVariant: 'default' | 'success' | 'error' | 'info';
+    private inputId;
+    private isFocused;
+    static styles: CSSResult[];
+    render(): TemplateResult<1>;
+    private handleInput;
+    private handleFocus;
+    private handleBlur;
+    private handleKeydown;
+    focus(): void;
+}
+
 /**
  * A banner prompting users to install the PWA.
  * Remembers dismissal state via localStorage.

package/dist/ui-components.css

@@ -1 +1 @@
-[data-theme=dark]{--ink-black: #ffffff;--ink-dark: #e5e5e5;--ink-medium: #a3a3a3;--ink-light: #737373;--ink-faint: #525252;--paper-white: #1a1a1a;--paper-cream: #2d2d2d;--paper-warm: #404040;--accent-primary: #a78bfa;--accent-primary-hover: #c4b5fd;--accent-primary-pressed: #8b5cf6;--accent-success: #4ade80;--accent-success-hover: #86efac;--accent-success-pressed: #22c55e;--semantic-warning: #fbbf24;--semantic-warning-hover: #fcd34d;--semantic-info: #38bdf8;--semantic-info-hover: #7dd3fc;--error-base: #f87171;--error-bg: rgba(248, 113, 113, .12);--error-border: rgba(248, 113, 113, .3)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-.25rem)}75%{transform:translate(.25rem)}}@keyframes inkFloat{0%,to{transform:translate(0) scale(1);opacity:.5}50%{transform:translate(.625rem,-.625rem) scale(1.1);opacity:.7}}@keyframes inkDrift{0%,to{transform:translate(0) rotate(0);opacity:.4}33%{transform:translate(-.5rem,.5rem) rotate(-5deg);opacity:.6}66%{transform:translate(.375rem,-.375rem) rotate(3deg);opacity:.5}}@keyframes inkSpread{0%{transform:scale(0);opacity:.4}to{transform:scale(var(--ink-effect-spread-scale, 2.5));opacity:0}}.page-container{position:relative;width:100%;max-width:var(--page-container-max-width);margin:0 auto;padding:0 var(--page-container-padding);animation:fadeInUp .6s var(--transition-smooth) both}.page-container--wide{max-width:var(--page-container-max-width-wide)}.page-card{background:var(--paper-white);padding:var(--page-card-padding);border-radius:var(--page-card-radius);box-shadow:var(--shadow-card);position:relative;overflow:hidden}.page-card:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--space-fixed-2xs);background:linear-gradient(135deg,var(--alpha-primary08) 0%,transparent 50%,var(--alpha-primary04) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.page-card--centered{text-align:center}.page-decoration{position:absolute;border-radius:50%;filter:blur(3.75rem);pointer-events:none;z-index:0}.page-decoration--primary{background:var(--alpha-primary15)}.page-decoration--success{background:var(--alpha-success15)}.page-decoration--float{animation:inkFloat 4s ease-in-out infinite}.page-decoration--drift{animation:inkDrift 5s ease-in-out infinite}.button{height:var(--button-height);padding:0 var(--space-lg);font-family:var(--font-body);font-size:var(--button-font-size);font-weight:var(--button-font-weight);letter-spacing:var(--button-letter-spacing);border:var(--space-fixed-2xs) solid transparent;border-radius:var(--button-radius);cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast)}.button-primary{background:var(--accent-primary);color:var(--paper-white)}.button-primary:hover:not(:disabled){background:var(--accent-primary-hover);box-shadow:var(--shadow-button-hover-primary);transform:translateY(calc(-1 * var(--space-fixed-2xs)))}.button-success{background:var(--accent-success);color:var(--paper-white)}.button-success:hover:not(:disabled){background:var(--accent-success-hover);box-shadow:var(--shadow-button-hover-success);transform:translateY(calc(-1 * var(--space-fixed-2xs)))}.button-secondary{height:var(--button-height-secondary);background:transparent;color:var(--ink-dark);border:var(--space-fixed-2xs) solid var(--ink-faint)}.button-secondary:hover:not(:disabled){color:var(--accent-primary);border-color:var(--accent-primary);background:var(--alpha-primary04)}.button:disabled{cursor:not-allowed;opacity:.7}.text-button{display:inline-flex;align-items:center;justify-content:center;height:var(--button-text-height);padding:var(--space-sm) var(--space-md);font-family:var(--font-body);font-size:var(--button-text-font-size);font-weight:500;color:var(--ink-dark);background:transparent;border:none;border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.text-button:hover{background:var(--paper-cream);color:var(--accent-primary)}.text-button-sm{height:auto;padding:var(--space-xs) var(--space-sm);font-size:.8125rem}.text-button-md{height:auto;padding:var(--space-sm) var(--space-md)}.button-content{display:flex;align-items:center;justify-content:center;gap:var(--button-content-gap)}.button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.button-text{flex:1;text-align:center}.button-spinner{width:var(--button-spinner-size);height:var(--button-spinner-size);border:var(--button-spinner-border-width) solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}.button-ink{position:relative;overflow:hidden}.button-ink:after{content:"";position:absolute;top:50%;left:50%;width:21.875rem;height:21.875rem;background:radial-gradient(circle,rgba(255,255,255,.5) 0%,transparent 70%);transform:translate(-50%,-50%) scale(0);border-radius:50%;pointer-events:none;transition:transform var(--ink-effect-ripple-duration, .6s) var(--ink-effect-ripple-easing, cubic-bezier(.4, 0, .2, 1)),opacity var(--ink-effect-fade-duration, .3s) ease;opacity:0}.button-ink:hover:after{transform:translate(-50%,-50%) scale(1);opacity:1}.button-ink:active:after{transform:translate(-50%,-50%) scale(.8);opacity:.8}.card{background:var(--paper-white);padding:var(--card-padding);border-radius:var(--card-radius);box-shadow:var(--shadow-card);position:relative;overflow:hidden}.container{position:relative;width:100%;max-width:var(--container-max-width)}.container-wide{max-width:var(--container-max-width-wide)}.form-header{text-align:center;margin-bottom:var(--form-header-margin-bottom)}.form-title{font-family:var(--font-body);font-size:var(--title-font-size);font-weight:var(--title-font-weight);color:var(--ink-black);letter-spacing:var(--title-letter-spacing);animation:slideDown .4s var(--transition-smooth) .2s both}.form-subtitle{font-size:var(--form-subtitle-font-size);color:var(--ink-medium);margin-top:var(--space-sm);animation:fadeInUp .4s var(--transition-smooth) .4s both}.form-fields{display:flex;flex-direction:column;gap:var(--form-fields-gap)}.form-footer{margin-top:var(--form-footer-margin-top);text-align:center;animation:fadeInUp .4s var(--transition-smooth) .6s both}.field-group{display:flex;flex-direction:column;gap:var(--field-group-gap)}.field-label{display:block;font-size:var(--label-font-size);font-weight:var(--label-font-weight);text-transform:uppercase;letter-spacing:var(--label-letter-spacing);color:var(--ink-medium);transition:color var(--transition-fast)}.field-group.focused .field-label{color:var(--accent-primary)}.required-mark{color:var(--accent-primary);margin-left:var(--space-2xs)}.input{width:100%;padding:var(--input-padding-y) var(--input-padding-x);font-family:var(--font-body);font-size:var(--input-font-size);color:var(--ink-black);background:var(--paper-cream);border:var(--space-fixed-2xs) solid transparent;border-radius:var(--input-radius);transition:background var(--transition-smooth),border-color var(--transition-smooth),box-shadow var(--transition-smooth)}.input::placeholder{color:var(--ink-faint)}.input:hover{background:var(--paper-warm)}.input:focus{outline:none;background:var(--paper-white);border-color:var(--ink-faint);box-shadow:var(--shadow-input-focus)}.label{display:block;font-size:var(--label-font-size);font-weight:var(--label-font-weight);text-transform:uppercase;letter-spacing:var(--label-letter-spacing);color:var(--ink-medium);margin-bottom:var(--space-sm);transition:color var(--transition-fast)}.title{font-family:var(--font-body);font-size:var(--title-font-size);font-weight:var(--title-font-weight);color:var(--ink-black);letter-spacing:var(--title-letter-spacing)}.error-message{display:flex;align-items:flex-start;gap:var(--feedback-error-gap);padding:var(--feedback-error-padding);background:var(--error-bg);border:var(--space-fixed-2xs) solid var(--error-border);border-radius:var(--feedback-error-radius);color:var(--error-base);animation:slideDown .3s var(--transition-smooth) both}.error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--feedback-error-icon-size);height:var(--feedback-error-icon-size);color:var(--error-base)}.error-message.shake{animation:shake .4s var(--transition-smooth)}.notice{display:flex;align-items:flex-start;gap:var(--feedback-notice-gap);padding:var(--feedback-notice-padding);border-radius:var(--feedback-notice-radius);animation:slideUp .4s var(--transition-smooth) both}.notice-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--feedback-notice-icon-size);height:var(--feedback-notice-icon-size)}.notice-success{background:#357a4614;border:var(--space-fixed-2xs) solid rgba(53,122,70,.2);color:var(--accent-success)}.notice-warning{background:#b4530914;border:var(--space-fixed-2xs) solid rgba(180,83,9,.2);color:var(--semantic-warning)}.notice-info{background:#0369a114;border:var(--space-fixed-2xs) solid rgba(3,105,161,.2);color:var(--semantic-info)}
+:root,[data-theme=light]{--duration-instant: .15s;--duration-fast: .3s;--duration-smooth: .4s;--duration-slow: .6s;--duration-slower: .8s;--easing-ease: ease;--easing-ease-in-out: cubic-bezier(.4, 0, .2, 1);--easing-bounce: cubic-bezier(.34, 1.56, .64, 1);--ink-effect-ripple-duration: .6s;--ink-effect-ripple-easing: cubic-bezier(.4, 0, .2, 1);--ink-effect-spread-scale: 2.5;--ink-effect-fade-duration: .3s;--transition-fast: .15s ease;--transition-smooth: .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: .4s cubic-bezier(.34, 1.56, .64, 1);--opacity-disabled: .6;--opacity-hover: .7;--opacity-loading: .6;--opacity-hidden: 0;--opacity-visible: 1;--brand-primary: #7c5cff;--brand-primary-hover: #6a4ae8;--brand-logo-text: #1a1a1a;--accent-primary: #6b4fd9;--accent-primary-hover: #5a3fc8;--accent-primary-pressed: #4a32b0;--accent-success: #357a46;--accent-success-hover: #2d6a3c;--accent-success-pressed: #255a32;--alpha-primary04: rgba(124, 92, 255, .04);--alpha-primary08: rgba(124, 92, 255, .08);--alpha-primary10: rgba(124, 92, 255, .1);--alpha-primary12: rgba(124, 92, 255, .12);--alpha-primary15: rgba(124, 92, 255, .15);--alpha-primary20: rgba(124, 92, 255, .2);--alpha-primary30: rgba(124, 92, 255, .3);--alpha-primary40: rgba(124, 92, 255, .4);--alpha-primary50: rgba(124, 92, 255, .5);--alpha-success10: rgba(61, 138, 80, .1);--alpha-success15: rgba(61, 138, 80, .15);--alpha-success20: rgba(61, 138, 80, .2);--alpha-success30: rgba(61, 138, 80, .3);--alpha-warning08: rgba(180, 83, 9, .08);--alpha-warning15: rgba(180, 83, 9, .15);--alpha-warning20: rgba(180, 83, 9, .2);--alpha-info08: rgba(3, 105, 161, .08);--alpha-info15: rgba(3, 105, 161, .15);--alpha-info20: rgba(3, 105, 161, .2);--alpha-ink04: rgba(26, 26, 26, .04);--alpha-ink06: rgba(26, 26, 26, .06);--alpha-ink10: rgba(26, 26, 26, .1);--alpha-white15: rgba(255, 255, 255, .15);--alpha-white30: rgba(255, 255, 255, .3);--alpha-white90: rgba(255, 255, 255, .9);--error-base: #c0392b;--error-bg: rgba(231, 76, 60, .08);--error-border: rgba(231, 76, 60, .2);--ink-black: #1a1a1a;--ink-dark: #2d2d2d;--ink-medium: #5c5c5c;--ink-light: #8a8a8a;--ink-faint: #c4c4c4;--overlay-dim: rgba(0, 0, 0, .5);--overlay-dark: rgba(0, 0, 0, .7);--overlay-shadow-light: rgba(0, 0, 0, .1);--overlay-shadow-subtle: rgba(0, 0, 0, .15);--overlay-shadow-medium: rgba(0, 0, 0, .2);--overlay-shadow-strong: rgba(0, 0, 0, .3);--overlay-shadow-heavy: rgba(0, 0, 0, .4);--overlay-glow-white: rgba(255, 255, 255, .15);--overlay-spinner-track: rgba(255, 255, 255, .3);--paper-white: #faf9fc;--paper-cream: #f5f4f8;--paper-warm: #ebe9f0;--semantic-warning: #b45309;--semantic-warning-hover: #92400e;--semantic-warning-bg: #fff8e1;--semantic-warning-light: #fef3c7;--semantic-success-bg: #d1fae5;--semantic-info: #0369a1;--semantic-info-hover: #075985;--semantic-info-bg: #e0f2fe;--button-height: 3.25rem;--button-height-secondary: 3rem;--button-radius: .625rem;--button-font-size: .9375rem;--button-font-weight: 500;--button-letter-spacing: .02em;--button-dark-hover: #2a2a2a;--button-text-height: 2.5rem;--button-text-font-size: .875rem;--button-spinner-size: 1rem;--button-spinner-border-width: 2px;--container-max-width: 25rem;--container-max-width-wide: 26.25rem;--feedback-error-icon-size: 1rem;--feedback-notice-icon-size: 1.25rem;--input-padding-y: .875rem;--input-padding-x: 1rem;--input-radius: .625rem;--input-font-size: 1rem;--label-font-size: .75rem;--label-font-weight: 500;--label-letter-spacing: .08em;--title-font-size: clamp(1.375rem, 1.27rem + .54vw, 1.75rem);--title-font-weight: 600;--title-letter-spacing: -.02em;--form-subtitle-font-size: .9375rem;--page-container-max-width: 25rem;--page-container-max-width-wide: 26.25rem;--radius-sm: .5rem;--radius-md: .625rem;--radius-lg: .75rem;--radius-full: 9999px;--radius-card: clamp(.75rem, .59rem + .78vw, 1rem);--shadow-card: 0 .0625rem .1875rem rgba(26, 26, 26, .04), 0 .375rem 1rem rgba(26, 26, 26, .06), 0 1.5rem 3rem rgba(26, 26, 26, .06);--shadow-button-hover-primary: 0 .25rem .75rem rgba(124, 92, 255, .3), 0 .125rem .25rem rgba(124, 92, 255, .2);--shadow-button-hover-success: 0 .25rem .75rem rgba(61, 138, 80, .3), 0 .125rem .25rem rgba(61, 138, 80, .2);--shadow-input-focus: 0 0 0 .1875rem rgba(124, 92, 255, .12), inset 0 .0625rem .125rem rgba(26, 26, 26, .04);--shadow-overlay: 0 .25rem .5rem rgba(0, 0, 0, .1);--shadow-modal: 0 1.5rem 3rem rgba(0, 0, 0, .15);--shadow-otp-cell-focus: 0 0 0 .25rem rgba(124, 92, 255, .1);--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--z-index-dropdown: 1000;--z-index-sticky: 1020;--z-index-fixed: 1030;--z-index-modal-backdrop: 1040;--z-index-modal: 1050;--z-index-popover: 1060;--z-index-tooltip: 1070;--size-icon-sm: 1rem;--size-icon-md: 1.5rem;--size-icon-lg: 2rem;--size-icon-xl: 2.5rem;--size-spinner-sm: 1rem;--size-spinner-md: 2rem;--size-spinner-lg: 4rem;--size-spinner-button: 1.125rem;--size-border-width-thin: .0625rem;--size-border-width-base: .09375rem;--size-border-width-thick: .125rem;--size-border-width-heavy: .1875rem;--size-border-width-bold: .25rem;--size-chip-padding-sm: .125rem .5rem;--size-chip-padding-md: .25rem .75rem;--size-close-button: 2rem;--space-fixed-2xs: .0625rem;--space-fixed-xs: .125rem;--space-fixed-sm: .25rem;--space-fixed-md: .5rem;--space-xs: clamp(.25rem, .23rem + .11vw, .3125rem);--space-sm: clamp(.5rem, .46rem + .22vw, .625rem);--space-md: clamp(.875rem, .77rem + .54vw, 1.25rem);--space-lg: clamp(1.25rem, 1.03rem + 1.09vw, 2rem);--space-xl: clamp(1.5rem, 1.15rem + 1.74vw, 2.75rem);--space-2xl: clamp(2rem, 1.35rem + 3.26vw, 4.5rem);--font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-sm: clamp(.8125rem, .78rem + .16vw, .9375rem);--font-size-base: clamp(.875rem, .83rem + .22vw, 1rem);--font-size-lg: clamp(1rem, .93rem + .33vw, 1.25rem);--font-size-xl: clamp(1.25rem, 1.14rem + .54vw, 1.5rem);--font-size-2xl: clamp(1.5rem, 1.35rem + .76vw, 1.875rem);--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--button-dark: var(--ink-black);--button-light: var(--paper-cream);--button-light-hover: var(--paper-warm);--button-text-padding-sm: var(--space-xs) var(--space-sm);--button-text-padding-md: var(--space-sm) var(--space-md);--button-content-gap: var(--space-sm);--card-padding: var(--space-lg);--card-radius: var(--radius-card);--feedback-error-padding: var(--space-md);--feedback-error-radius: var(--radius-md);--feedback-error-gap: var(--space-sm);--feedback-notice-padding: var(--space-md);--feedback-notice-radius: var(--radius-md);--feedback-notice-gap: var(--space-sm);--form-header-margin-bottom: var(--space-xl);--form-fields-gap: var(--space-lg);--form-footer-margin-top: var(--space-lg);--field-group-gap: var(--space-sm);--page-container-padding: var(--space-lg);--page-card-padding: var(--space-xl);--page-card-radius: var(--radius-lg)}[data-theme=dark]{--ink-black: #ffffff;--ink-dark: #e5e5e5;--ink-medium: #a3a3a3;--ink-light: #737373;--ink-faint: #525252;--paper-white: #1a1a1a;--paper-cream: #2d2d2d;--paper-warm: #404040;--accent-primary: #a78bfa;--accent-primary-hover: #c4b5fd;--accent-primary-pressed: #8b5cf6;--accent-success: #4ade80;--accent-success-hover: #86efac;--accent-success-pressed: #22c55e;--semantic-warning: #fbbf24;--semantic-warning-hover: #fcd34d;--semantic-info: #38bdf8;--semantic-info-hover: #7dd3fc;--error-base: #f87171;--error-bg: rgba(248, 113, 113, .12);--error-border: rgba(248, 113, 113, .3)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-.25rem)}75%{transform:translate(.25rem)}}@keyframes inkFloat{0%,to{transform:translate(0) scale(1);opacity:.5}50%{transform:translate(.625rem,-.625rem) scale(1.1);opacity:.7}}@keyframes inkDrift{0%,to{transform:translate(0) rotate(0);opacity:.4}33%{transform:translate(-.5rem,.5rem) rotate(-5deg);opacity:.6}66%{transform:translate(.375rem,-.375rem) rotate(3deg);opacity:.5}}@keyframes inkSpread{0%{transform:scale(0);opacity:.4}to{transform:scale(var(--ink-effect-spread-scale, 2.5));opacity:0}}.page-container{position:relative;width:100%;max-width:var(--page-container-max-width);margin:0 auto;padding:0 var(--page-container-padding);animation:fadeInUp .6s var(--transition-smooth) both}.page-container--wide{max-width:var(--page-container-max-width-wide)}.page-card{background:var(--paper-white);padding:var(--page-card-padding);border-radius:var(--page-card-radius);box-shadow:var(--shadow-card);position:relative;overflow:hidden}.page-card:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--space-fixed-2xs);background:linear-gradient(135deg,var(--alpha-primary08) 0%,transparent 50%,var(--alpha-primary04) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.page-card--centered{text-align:center}.page-decoration{position:absolute;border-radius:50%;filter:blur(3.75rem);pointer-events:none;z-index:0}.page-decoration--primary{background:var(--alpha-primary15)}.page-decoration--success{background:var(--alpha-success15)}.page-decoration--float{animation:inkFloat 4s ease-in-out infinite}.page-decoration--drift{animation:inkDrift 5s ease-in-out infinite}.button{height:var(--button-height);padding:0 var(--space-lg);font-family:var(--font-body);font-size:var(--button-font-size);font-weight:var(--button-font-weight);letter-spacing:var(--button-letter-spacing);border:var(--space-fixed-2xs) solid transparent;border-radius:var(--button-radius);cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast)}.button-primary{background:var(--accent-primary);color:var(--paper-white)}.button-primary:hover:not(:disabled){background:var(--accent-primary-hover);box-shadow:var(--shadow-button-hover-primary);transform:translateY(calc(-1 * var(--space-fixed-2xs)))}.button-success{background:var(--accent-success);color:var(--paper-white)}.button-success:hover:not(:disabled){background:var(--accent-success-hover);box-shadow:var(--shadow-button-hover-success);transform:translateY(calc(-1 * var(--space-fixed-2xs)))}.button-secondary{height:var(--button-height-secondary);background:transparent;color:var(--ink-dark);border:var(--space-fixed-2xs) solid var(--ink-faint)}.button-secondary:hover:not(:disabled){color:var(--accent-primary);border-color:var(--accent-primary);background:var(--alpha-primary04)}.button:disabled{cursor:not-allowed;opacity:.7}.text-button{display:inline-flex;align-items:center;justify-content:center;height:var(--button-text-height);padding:var(--space-sm) var(--space-md);font-family:var(--font-body);font-size:var(--button-text-font-size);font-weight:500;color:var(--ink-dark);background:transparent;border:none;border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.text-button:hover{background:var(--paper-cream);color:var(--accent-primary)}.text-button-sm{height:auto;padding:var(--space-xs) var(--space-sm);font-size:.8125rem}.text-button-md{height:auto;padding:var(--space-sm) var(--space-md)}.button-content{display:flex;align-items:center;justify-content:center;gap:var(--button-content-gap)}.button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.button-text{flex:1;text-align:center}.button-spinner{width:var(--button-spinner-size);height:var(--button-spinner-size);border:var(--button-spinner-border-width) solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}.button-ink{position:relative;overflow:hidden}.button-ink:after{content:"";position:absolute;top:50%;left:50%;width:21.875rem;height:21.875rem;background:radial-gradient(circle,rgba(255,255,255,.5) 0%,transparent 70%);transform:translate(-50%,-50%) scale(0);border-radius:50%;pointer-events:none;transition:transform var(--ink-effect-ripple-duration, .6s) var(--ink-effect-ripple-easing, cubic-bezier(.4, 0, .2, 1)),opacity var(--ink-effect-fade-duration, .3s) ease;opacity:0}.button-ink:hover:after{transform:translate(-50%,-50%) scale(1);opacity:1}.button-ink:active:after{transform:translate(-50%,-50%) scale(.8);opacity:.8}.card{background:var(--paper-white);padding:var(--card-padding);border-radius:var(--card-radius);box-shadow:var(--shadow-card);position:relative;overflow:hidden}.container{position:relative;width:100%;max-width:var(--container-max-width)}.container-wide{max-width:var(--container-max-width-wide)}.form-header{text-align:center;margin-bottom:var(--form-header-margin-bottom)}.form-title{font-family:var(--font-body);font-size:var(--title-font-size);font-weight:var(--title-font-weight);color:var(--ink-black);letter-spacing:var(--title-letter-spacing);animation:slideDown .4s var(--transition-smooth) .2s both}.form-subtitle{font-size:var(--form-subtitle-font-size);color:var(--ink-medium);margin-top:var(--space-sm);animation:fadeInUp .4s var(--transition-smooth) .4s both}.form-fields{display:flex;flex-direction:column;gap:var(--form-fields-gap)}.form-footer{margin-top:var(--form-footer-margin-top);text-align:center;animation:fadeInUp .4s var(--transition-smooth) .6s both}.field-group{display:flex;flex-direction:column;gap:var(--field-group-gap)}.field-label{display:block;font-size:var(--label-font-size);font-weight:var(--label-font-weight);text-transform:uppercase;letter-spacing:var(--label-letter-spacing);color:var(--ink-medium);transition:color var(--transition-fast)}.field-group.focused .field-label{color:var(--accent-primary)}.required-mark{color:var(--accent-primary);margin-left:var(--space-2xs)}.input{width:100%;padding:var(--input-padding-y) var(--input-padding-x);font-family:var(--font-body);font-size:var(--input-font-size);color:var(--ink-black);background:var(--paper-cream);border:var(--space-fixed-2xs) solid transparent;border-radius:var(--input-radius);transition:background var(--transition-smooth),border-color var(--transition-smooth),box-shadow var(--transition-smooth)}.input::placeholder{color:var(--ink-faint)}.input:hover{background:var(--paper-warm)}.input:focus{outline:none;background:var(--paper-white);border-color:var(--ink-faint);box-shadow:var(--shadow-input-focus)}.label{display:block;font-size:var(--label-font-size);font-weight:var(--label-font-weight);text-transform:uppercase;letter-spacing:var(--label-letter-spacing);color:var(--ink-medium);margin-bottom:var(--space-sm);transition:color var(--transition-fast)}.title{font-family:var(--font-body);font-size:var(--title-font-size);font-weight:var(--title-font-weight);color:var(--ink-black);letter-spacing:var(--title-letter-spacing)}.error-message{display:flex;align-items:flex-start;gap:var(--feedback-error-gap);padding:var(--feedback-error-padding);background:var(--error-bg);border:var(--space-fixed-2xs) solid var(--error-border);border-radius:var(--feedback-error-radius);color:var(--error-base);animation:slideDown .3s var(--transition-smooth) both}.error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--feedback-error-icon-size);height:var(--feedback-error-icon-size);color:var(--error-base)}.error-message.shake{animation:shake .4s var(--transition-smooth)}.notice{display:flex;align-items:flex-start;gap:var(--feedback-notice-gap);padding:var(--feedback-notice-padding);border-radius:var(--feedback-notice-radius);animation:slideUp .4s var(--transition-smooth) both}.notice-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--feedback-notice-icon-size);height:var(--feedback-notice-icon-size)}.notice-success{background:#357a4614;border:var(--space-fixed-2xs) solid rgba(53,122,70,.2);color:var(--accent-success)}.notice-warning{background:#b4530914;border:var(--space-fixed-2xs) solid rgba(180,83,9,.2);color:var(--semantic-warning)}.notice-info{background:#0369a114;border:var(--space-fixed-2xs) solid rgba(3,105,161,.2);color:var(--semantic-info)}