:root{--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-content-start: 16px;--spacing-content-end: 16px;--spacing-list-item-start: 8px;--spacing-list-item-end: 8px;--title-size: 24px;--subtitle-size: 18px;--body-size: 16px;--caption-size: 14px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 16px;--touch-target-minimum: 44px;--motion-enter-duration: .2s;--motion-exit-duration: .15s;--motion-emphasis-duration: .3s}[data-theme=default-dark]{--color-bg-primary: #1a1a2e;--color-bg-secondary: #16213e;--color-bg-tertiary: #0f3460;--color-text-primary: #eeeeee;--color-text-secondary: #a0a0a0;--color-accent: #4fc3f7;--color-accent-dark: #0288d1;--color-success: #4caf50;--color-error: #f44336;--color-warning: #ff9800;--color-border: #333333}[data-theme=default-light]{--color-bg-primary: #ffffff;--color-bg-secondary: #f5f5f5;--color-bg-tertiary: #e0e0e0;--color-text-primary: #212121;--color-text-secondary: #757575;--color-accent: #1976d2;--color-accent-dark: #0d47a1;--color-success: #388e3c;--color-error: #d32f2f;--color-warning: #f57c00;--color-border: #e0e0e0}[data-theme=catppuccin-mocha]{--color-bg-primary: #1e1e2e;--color-bg-secondary: #181825;--color-bg-tertiary: #313244;--color-text-primary: #cdd6f4;--color-text-secondary: #a6adc8;--color-accent: #89b4fa;--color-accent-dark: #74c7ec;--color-success: #a6e3a1;--color-error: #f38ba8;--color-warning: #fab387;--color-border: #45475a}[data-theme=catppuccin-latte]{--color-bg-primary: #eff1f5;--color-bg-secondary: #e6e9ef;--color-bg-tertiary: #ccd0da;--color-text-primary: #4c4f69;--color-text-secondary: #6a6d82;--color-accent: #1e66f5;--color-accent-dark: #209fb5;--color-success: #40a02b;--color-error: #d20f39;--color-warning: #fe640b;--color-border: #9ca0b0}[data-theme=catppuccin-frappe]{--color-bg-primary: #303446;--color-bg-secondary: #292c3c;--color-bg-tertiary: #414559;--color-text-primary: #c6d0f5;--color-text-secondary: #a5adce;--color-accent: #8caaee;--color-accent-dark: #85c1dc;--color-success: #a6d189;--color-error: #e78284;--color-warning: #ef9f76;--color-border: #51576d}[data-theme=catppuccin-macchiato]{--color-bg-primary: #24273a;--color-bg-secondary: #1e2030;--color-bg-tertiary: #363a4f;--color-text-primary: #cad3f5;--color-text-secondary: #a5adcb;--color-accent: #8aadf4;--color-accent-dark: #7dc4e4;--color-success: #a6da95;--color-error: #ed8796;--color-warning: #f5a97f;--color-border: #494d64}[data-theme=dracula]{--color-bg-primary: #282a36;--color-bg-secondary: #21222c;--color-bg-tertiary: #44475a;--color-text-primary: #f8f8f2;--color-text-secondary: #8390b7;--color-accent: #bd93f9;--color-accent-dark: #ff79c6;--color-success: #50fa7b;--color-error: #ff5555;--color-warning: #ffb86c;--color-border: #44475a}[data-theme=nord]{--color-bg-primary: #2e3440;--color-bg-secondary: #3b4252;--color-bg-tertiary: #434c5e;--color-text-primary: #eceff4;--color-text-secondary: #d8dee9;--color-accent: #88c0d0;--color-accent-dark: #81a1c1;--color-success: #a3be8c;--color-error: #bf616a;--color-warning: #ebcb8b;--color-border: #4c566a}[data-theme=solarized-dark]{--color-bg-primary: #002b36;--color-bg-secondary: #073642;--color-bg-tertiary: #586e75;--color-text-primary: #839496;--color-text-secondary: #7a9199;--color-accent: #268bd2;--color-accent-dark: #2aa198;--color-success: #859900;--color-error: #dc322f;--color-warning: #b58900;--color-border: #073642}[data-theme=solarized-light]{--color-bg-primary: #fdf6e3;--color-bg-secondary: #eee8d5;--color-bg-tertiary: #93a1a1;--color-text-primary: #586e75;--color-text-secondary: #60747c;--color-accent: #268bd2;--color-accent-dark: #2aa198;--color-success: #859900;--color-error: #dc322f;--color-warning: #b58900;--color-border: #eee8d5}[data-theme=gruvbox-dark]{--color-bg-primary: #282828;--color-bg-secondary: #3c3836;--color-bg-tertiary: #504945;--color-text-primary: #ebdbb2;--color-text-secondary: #a89984;--color-accent: #83a598;--color-accent-dark: #8ec07c;--color-success: #b8bb26;--color-error: #fb4934;--color-warning: #fabd2f;--color-border: #504945}[data-theme=gruvbox-light]{--color-bg-primary: #fbf1c7;--color-bg-secondary: #ebdbb2;--color-bg-tertiary: #d5c4a1;--color-text-primary: #3c3836;--color-text-secondary: #665c54;--color-accent: #458588;--color-accent-dark: #689d6a;--color-success: #98971a;--color-error: #cc241d;--color-warning: #d79921;--color-border: #d5c4a1}[data-theme=high-contrast]{--color-bg-primary: #000000;--color-bg-secondary: #0a0a0a;--color-bg-tertiary: #1a1a1a;--color-text-primary: #ffffff;--color-text-secondary: #e0e0e0;--color-accent: #ffff00;--color-accent-dark: #00ffff;--color-success: #00ff00;--color-error: #ff0000;--color-warning: #ffff00;--color-border: #ffffff}[data-theme=high-contrast-light]{--color-bg-primary: #ffffff;--color-bg-secondary: #f0f0f0;--color-bg-tertiary: #e0e0e0;--color-text-primary: #000000;--color-text-secondary: #1a1a1a;--color-accent: #0000cc;--color-accent-dark: #000099;--color-success: #006600;--color-error: #cc0000;--color-warning: #996600;--color-border: #000000}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color-scheme:light dark}body{margin:0;display:flex;justify-content:center;min-height:100vh;background:var(--color-bg-primary);color:var(--color-text-primary)}.app{max-width:480px;width:100%;padding:var(--spacing-md)}.app-header{text-align:center;margin-bottom:var(--spacing-lg)}.demo-notice{font-size:12px;color:var(--color-text-secondary)}.workflow-tabs{display:flex;gap:var(--spacing-xs);justify-content:center;margin-top:var(--spacing-sm)}.workflow-tab{padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-md);background:transparent;color:var(--color-text-secondary);cursor:pointer;font-size:13px}.workflow-tab-active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.screen{display:flex;flex-direction:column;gap:var(--spacing-md)}.subtitle{color:var(--color-text-secondary)}.components{display:flex;flex-direction:column;gap:12px}.actions{display:flex;gap:var(--spacing-sm);justify-content:center;margin-top:var(--spacing-md)}.action-btn{padding:10px 20px;border-radius:var(--radius-md);border:1px solid var(--color-border);cursor:pointer}.action-btn:disabled{opacity:.5;cursor:not-allowed}.action-primary{background:var(--color-accent);color:#fff;border:none}.action-secondary{background:transparent}.action-destructive{background:var(--color-error);color:#fff;border:none}.error{color:var(--color-error)}.divider{border:0;border-top:1px solid var(--color-border);margin:var(--spacing-sm) 0}.progress-bar{height:var(--spacing-xs);background:var(--color-border);border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:var(--color-accent);transition:width .3s}.component{margin:var(--spacing-sm) 0}.text{margin:var(--spacing-xs) 0}.text-title{font-size:var(--title-size);font-weight:700}.text-subtitle{font-size:var(--subtitle-size);font-weight:600;color:var(--color-text-secondary)}.text-body{font-size:var(--caption-size)}.text-caption{font-size:12px;color:var(--color-text-secondary)}.text-input label{display:block;font-weight:600;margin-bottom:var(--spacing-xs)}.text-input input{width:100%;padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:6px;box-sizing:border-box;font-size:var(--caption-size)}.text-input input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px #007aff33}.validation-error{color:var(--color-error);font-size:12px;margin-top:var(--spacing-xs);display:block}.toggle-list .toggle-list-label{font-weight:600;margin-bottom:var(--spacing-sm)}.toggle-items{list-style:none;padding:0;margin:0}.toggle-item{padding:6px 0}.toggle-item-label{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer}.toggle-item-label input[type=checkbox]{width:var(--spacing-md);height:var(--spacing-md);accent-color:var(--color-accent)}.field-list{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.field-row{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) 12px;border-bottom:1px solid var(--color-bg-secondary)}.field-row:last-child{border-bottom:none}.field-info{display:flex;flex-direction:column;gap:2px}.field-label{font-size:12px;color:var(--color-text-secondary)}.field-value{font-size:var(--caption-size)}.field-visibility{display:flex;align-items:center;gap:var(--spacing-xs)}.visibility-icon{font-size:var(--spacing-md)}.visibility-hidden{opacity:.4}.group-badge{font-size:11px;padding:2px 6px;background:color-mix(in srgb,var(--color-accent) 13%,transparent);color:var(--color-accent);border-radius:var(--radius-sm)}.card-preview{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-md);background:var(--color-bg-primary)}.card-group-tabs{display:flex;gap:var(--spacing-xs);margin-bottom:12px;overflow-x:auto}.card-tab{padding:var(--spacing-xs) 12px;border-radius:var(--spacing-md);border:1px solid var(--color-border);background:transparent;cursor:pointer;font-size:12px;white-space:nowrap}.card-tab-active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.card-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}.card-avatar{width:48px;height:48px;border-radius:50%;background:var(--color-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;flex-shrink:0}.card-name{margin:0;font-size:var(--subtitle-size)}.card-fields{display:flex;flex-direction:column}.card-field-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--color-bg-secondary)}.card-field-row:last-child{border-bottom:none}.card-field-label{font-size:12px;color:var(--color-text-secondary)}.card-field-value{font-size:var(--caption-size)}.info-panel{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:12px;background:var(--color-bg-secondary)}.info-panel-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.info-panel-icon{font-size:20px}.info-panel-title{margin:0;font-size:var(--caption-size);font-weight:600}.info-panel-items{display:flex;flex-direction:column;gap:var(--spacing-xs)}.info-item{display:flex;justify-content:space-between;font-size:13px}.info-label{color:var(--color-text-secondary)}.info-value{font-weight:500}.contact-list .search{width:100%;padding:var(--spacing-sm);margin-bottom:var(--spacing-sm);border:1px solid var(--color-border);border-radius:6px;box-sizing:border-box;font-size:var(--caption-size)}.contact-list .search:focus{outline:none;border-color:var(--color-accent)}.contact-items{display:flex;flex-direction:column}.contact-item{display:flex;align-items:center;gap:12px;padding:var(--spacing-sm);cursor:pointer;border-radius:6px}.contact-item:hover{background:var(--color-bg-secondary)}.avatar{width:36px;height:36px;border-radius:50%;background:var(--color-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--caption-size);flex-shrink:0}.contact-info{display:flex;flex-direction:column}.contact-name{font-size:var(--caption-size);font-weight:500}.contact-subtitle{font-size:12px;color:var(--color-text-secondary)}.settings-group .settings-label{font-weight:600;margin-bottom:var(--spacing-sm);font-size:var(--caption-size)}.settings-items{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.settings-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--color-bg-secondary)}.settings-item:last-child{border-bottom:none}.settings-item-label{font-size:var(--caption-size)}.switch{appearance:none;width:var(--touch-target-minimum);height:var(--spacing-lg);border-radius:12px;background:var(--color-border);cursor:pointer;position:relative;border:none;flex-shrink:0}.switch:checked{background:var(--color-success)}.switch:before{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;top:2px;left:2px;transition:transform .2s}.switch:checked:before{transform:translate(20px)}.settings-nav{display:flex;align-items:center;gap:var(--spacing-xs);cursor:pointer}.settings-detail{font-size:13px;color:var(--color-text-secondary)}.nav-arrow{font-size:var(--subtitle-size);color:var(--color-border)}.settings-action-link{background:none;border:none;cursor:pointer;font-size:var(--subtitle-size);color:var(--color-border)}.action-destructive-text{color:var(--color-error)}.action-list{display:flex;flex-direction:column}.action-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:10px var(--spacing-sm);cursor:pointer;border-radius:6px;font-size:var(--caption-size)}.action-item:hover{background:var(--color-bg-secondary)}.action-item.action-destructive{color:var(--color-error);background:transparent}.action-item.action-destructive:hover{background:color-mix(in srgb,var(--color-error) 7%,transparent)}.action-icon{font-size:var(--spacing-md)}.status-indicator{display:flex;align-items:center;gap:12px;padding:var(--spacing-sm)}.status-icon{font-size:20px}.status-content{display:flex;flex-direction:column;flex:1}.status-title{font-size:var(--caption-size);font-weight:500}.status-detail{font-size:12px;color:var(--color-text-secondary)}.status-badge{padding:2px var(--spacing-sm);border-radius:var(--radius-sm);font-size:12px;font-weight:600}.status-Pending{background:var(--color-border);color:var(--color-text-secondary)}.status-InProgress{background:color-mix(in srgb,var(--color-accent) 13%,transparent);color:var(--color-accent)}.status-Success{background:color-mix(in srgb,var(--color-success) 13%,transparent);color:var(--color-success)}.status-Failed{background:color-mix(in srgb,var(--color-error) 13%,transparent);color:var(--color-error)}.status-Warning{background:color-mix(in srgb,var(--color-warning) 13%,transparent);color:var(--color-warning)}.pin-input-container label{display:block;font-weight:600;margin-bottom:var(--spacing-sm)}.pin-input{display:flex;gap:var(--spacing-sm);justify-content:center}.pin-input input{width:40px;height:48px;text-align:center;font-size:20px;border:1px solid var(--color-border);border-radius:var(--radius-md)}.pin-input input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px #007aff33}.qr-display{text-align:center;padding:var(--spacing-md)}.qr-label{font-weight:600;margin-bottom:12px;font-size:var(--caption-size)}.qr-image{border-radius:var(--radius-md);display:block;margin:0 auto}.qr-error{color:var(--color-error);font-size:13px;padding:var(--spacing-md)}.qr-placeholder{width:200px;height:200px;border:2px dashed var(--color-border);display:flex;align-items:center;justify-content:center;margin:0 auto;border-radius:var(--radius-lg)}.qr-scan{border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 3%,transparent)}.qr-placeholder-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);color:var(--color-text-secondary);font-size:13px}.qr-icon{font-size:28px}.qr-data-hint{font-size:11px;color:var(--color-text-secondary);max-width:160px;overflow:hidden;text-overflow:ellipsis}.inline-confirm{border:1px solid var(--color-warning);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);background:color-mix(in srgb,var(--color-warning) 8%,var(--color-bg-secondary))}.inline-confirm-warning{margin:0 0 var(--spacing-sm);font-size:var(--caption-size);color:var(--color-text-primary)}.inline-confirm-actions{display:flex;gap:var(--spacing-sm);justify-content:flex-end}.editable-text label{display:block;font-size:var(--caption-size);color:var(--color-text-secondary);margin-bottom:var(--spacing-xs)}.editable-text-display{display:flex;align-items:center;gap:var(--spacing-sm)}.editable-text-value{font-size:var(--body-size);color:var(--color-text-primary);flex:1}.editable-text input{width:100%;padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-primary);color:var(--color-text-primary);font-size:var(--caption-size);box-sizing:border-box}.editable-text input:focus{border-color:var(--color-accent);outline:none}.btn-edit{background:transparent;border:1px solid var(--color-border);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);cursor:pointer;font-size:var(--caption-size);color:var(--color-accent)}.banner{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:color-mix(in srgb,var(--color-accent) 10%,var(--color-bg-secondary));border-radius:var(--radius-md);border:1px solid color-mix(in srgb,var(--color-accent) 30%,transparent)}.banner-text{font-size:var(--caption-size);font-weight:500;color:var(--color-accent)}.banner-action{background:transparent;border:1px solid var(--color-accent);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);cursor:pointer;font-size:var(--caption-size);color:var(--color-accent);white-space:nowrap}.btn-cancel{background:transparent;border:1px solid var(--color-border);padding:10px 20px;border-radius:var(--radius-md);cursor:pointer;font-size:var(--caption-size)}.btn-confirm{background:var(--color-accent);color:#fff;border:none;padding:10px 20px;border-radius:var(--radius-md);cursor:pointer;font-size:var(--caption-size)}.btn-destructive{background:var(--color-error);color:#fff;border:none;padding:10px 20px;border-radius:var(--radius-md);cursor:pointer;font-size:var(--caption-size)}.spinner{width:var(--spacing-lg);height:var(--spacing-lg);border:3px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite}.loading-container{display:flex;flex-direction:column;align-items:center;gap:12px;padding:var(--spacing-xl);color:var(--color-text-secondary)}@keyframes spin{to{transform:rotate(360deg)}}.toast-region{position:fixed;bottom:var(--spacing-lg);left:50%;transform:translate(-50%);z-index:200;pointer-events:none}.toast{background:var(--color-bg-tertiary);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-xs);box-shadow:0 4px 16px #0003;animation:toast-in .2s ease-out;max-width:320px}.toast strong{font-size:var(--caption-size)}.toast span{font-size:12px;color:var(--color-text-secondary)}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.contact-item:focus-visible,.action-item:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}