/* Navigation (kit .nav-item) */
        .nav-section {
            margin-bottom: var(--sp-2);
        }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 9px 11px;
            border-radius: 8px;
            font-size: 14px;
            color: var(--ws-ink);
            cursor: pointer;
            user-select: none;
            text-decoration: none;
            transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
        }

        .nav-item:hover { background: color-mix(in srgb, var(--ws-ink) 5%, transparent); }
        .nav-item.active { background: color-mix(in srgb, var(--ws-accent) 16%, transparent); font-weight: 500; }
        .nav-item svg { flex: 0 0 auto; color: var(--ws-ink-soft); }
        .nav-item.active svg, .nav-item:hover svg { color: var(--ws-accent); }

        .nav-item:focus-visible {
            outline: none;
            box-shadow: var(--focus-ring);
        }

        /* Group labels (kit .rail-glabel) */
        .rail-group-label {
            font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
            color: var(--ws-ink-soft); margin: 16px 8px 6px;
        }

        /* Footer (kit .rail-foot) */
        .ws-user, .rail-foot {
            margin-top: auto; display: flex; align-items: center; gap: 10px;
            padding: 10px 8px 4px; border-top: 1px solid var(--ws-border); color: var(--ws-ink);
        }
        .ws-user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--ws-border); }
        .ws-user .em { font-size: 12px; color: var(--ws-ink-soft); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .ws-user .so { background: transparent; border: 0; color: var(--ws-ink-soft); cursor: pointer; display: flex; padding: 4px; border-radius: 6px; }
        .ws-user .so:hover { color: var(--ws-accent); background: color-mix(in srgb, var(--ws-ink) 6%, transparent); }

        /* Modal Styles (Phase 9 — Ayuda Design System) */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: color-mix(in srgb, var(--ws-ink) 45%, transparent);
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal {
            background: var(--ws-surface-2);
            border: 1px solid var(--ws-border);
            border-radius: 14px;
            box-shadow: var(--shadow-lg);
            color: var(--ws-ink);
            width: 90vw;
            max-width: 800px;
            max-height: 80vh;
            padding: 24px 26px 26px;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 14px;
            margin-bottom: 18px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--ws-border);
        }

        .modal-title {
            color: var(--ws-ink);
            font-size: 22px;
            font-weight: 600;
            letter-spacing: -.01em;
            margin: 0;
        }

        .icon-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 6px;
            cursor: pointer;
            border: 1px solid transparent;
            background: transparent;
            color: var(--ws-ink-soft);
            transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
        }

        .icon-btn:hover {
            color: var(--ws-ink);
            background: color-mix(in srgb, var(--ws-ink) 6%, transparent);
        }

        .icon-btn:focus-visible {
            outline: none;
            box-shadow: var(--focus-ring);
        }

        .icon-btn.on {
            color: var(--ws-accent);
            background: color-mix(in srgb, var(--ws-accent) 14%, transparent);
        }

        .close-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 6px;
            cursor: pointer;
            border: 1px solid transparent;
            background: transparent;
            color: var(--ws-ink-soft);
            flex: 0 0 auto;
            transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
        }

        .close-button:hover {
            color: var(--ws-ink);
            background: color-mix(in srgb, var(--ws-ink) 6%, transparent);
        }

        .close-button:focus-visible {
            outline: none;
            box-shadow: var(--focus-ring);
        }

        .modal-content {
            color: var(--ws-ink);
            overflow-y: auto;
            min-height: 0;
        }

        /* Form Styles (Phase 9) */
        .form-group {
            margin-bottom: 16px;
        }

        .form-label {
            display: block;
            color: var(--ws-ink);
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 6px;
        }

        .form-input, .form-select, .form-textarea {
            font-family: var(--font-ui);
            font-size: 14px;
            width: 100%;
            padding: 10px 12px;
            border-radius: 6px;
            border: 1px solid var(--ws-border);
            background: var(--ws-surface);
            color: var(--ws-ink);
            box-sizing: border-box;
            transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
        }

        .form-textarea {
            font-family: var(--ws-font);
            line-height: 1.55;
            resize: vertical;
        }

        .form-input::placeholder, .form-textarea::placeholder {
            color: var(--ws-ink-soft);
        }

        .form-input:focus, .form-select:focus, .form-textarea:focus {
            outline: none;
            border-color: var(--ws-accent);
            box-shadow: var(--focus-ring);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            font-family: var(--font-ui);
            font-size: 14px;
            font-weight: 500;
            line-height: 1;
            padding: 9px 15px;
            border-radius: 6px;
            cursor: pointer;
            border: 1px solid var(--ws-border);
            background: var(--ws-surface);
            color: var(--ws-ink);
            transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), filter var(--dur) var(--ease);
        }

        .btn:hover {
            border-color: var(--ws-accent);
        }

        .btn:active {
            transform: translateY(.5px);
        }

        .btn:focus-visible {
            outline: none;
            box-shadow: var(--focus-ring);
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .btn-primary {
            background: var(--ws-accent);
            border-color: var(--ws-accent);
            color: #fff;
        }

        .btn-primary:hover {
            filter: brightness(.94);
            border-color: var(--ws-accent);
        }

        .btn-secondary {
            background: transparent;
            border-color: transparent;
            color: var(--ws-ink-soft);
        }

        .btn-secondary:hover {
            color: var(--ws-ink);
            background: color-mix(in srgb, var(--ws-ink) 6%, transparent);
        }

        .btn-ghost {
            background: transparent;
            border-color: transparent;
            color: var(--ws-ink-soft);
        }

        .btn-ghost:hover {
            color: var(--ws-ink);
            background: color-mix(in srgb, var(--ws-ink) 6%, transparent);
            border-color: transparent;
        }

        .btn svg {
            flex: 0 0 auto;
        }

        .mobile-nav-title {
            font-size: 19px;
            font-weight: 700;
            letter-spacing: -.02em;
            color: var(--ws-ink);
            display: flex;
            align-items: center;
            gap: var(--sp-2);
        }

        .mobile-nav-title .app-icon {
            width: 26px;
            height: 26px;
            display: flex;
            align-items: center;
        }

        .mobile-nav-actions {
            display: flex;
            gap: var(--sp-2);
        }

        .mobile-nav-btn {
            background: none;
            border: none;
            color: var(--ws-ink-soft);
            padding: var(--sp-2);
            border-radius: var(--r-md);
            cursor: pointer;
            transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
        }

        .mobile-nav-btn:hover {
            color: var(--ws-accent);
            background: color-mix(in srgb, var(--ws-ink) 6%, transparent);
        }

        .mobile-sidebar-close {
            position: absolute;
            top: var(--sp-4);
            right: var(--sp-4);
            background: none;
            border: none;
            color: var(--ws-ink-soft);
            cursor: pointer;
            display: flex;
            padding: var(--sp-2);
            border-radius: 6px;
            transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
        }

        .mobile-sidebar-close:hover {
            color: var(--ws-accent);
            background: color-mix(in srgb, var(--ws-ink) 6%, transparent);
        }

        /* Notification */
        /* === Toast notifications (Phase 9 — Ayuda Design System) ===
           showNotification(message, type) emits: class="notification {type}"
           where type is info|success|error|warning, plus .show when visible. */
        .notification {
            position: fixed;
            top: var(--sp-6);
            right: var(--sp-6);
            max-width: 320px;
            background: var(--ws-card-bg);
            border: 1px solid var(--ws-border);
            border-left: 4px solid var(--ws-ink-soft);
            border-radius: var(--r-sm);
            padding: 12px 16px;
            color: var(--ws-ink);
            font-size: 13.5px;
            line-height: 1.45;
            box-shadow: var(--shadow-lg);
            transform: translateX(400px);
            opacity: 0;
            transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
            z-index: 1100;
        }

        .notification.show {
            transform: translateX(0);
            opacity: 1;
        }

        .notification.success { border-left-color: var(--ws-accent); }
        .notification.info    { border-left-color: var(--ws-accent-2); }
        .notification.warning { border-left-color: var(--ws-accent-2); }
        .notification.error   { border-left-color: var(--ws-error); }

        /* System Status Indicators */
        .connection-status {
            position: fixed;
            top: var(--sp-4);
            left: var(--sp-4);
            background: var(--ws-surface-2);
            border: 1px solid var(--ws-border);
            border-radius: var(--r-full);
            padding: var(--sp-2) var(--sp-4);
            color: var(--ws-ink);
            font-size: var(--text-sm);
            font-weight: var(--weight-medium);
            box-shadow: var(--shadow-md);
            display: flex;
            align-items: center;
            gap: var(--sp-2);
            z-index: 1050;
            opacity: 0;
            transform: translateY(-20px);
            transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
        }

        .connection-status.show {
            opacity: 1;
            transform: translateY(0);
        }

        .connection-status.online {
            border-left: 4px solid var(--ws-accent);
        }

        .connection-status.offline {
            border-left: 4px solid var(--ws-error);
        }

        .connection-status.connecting {
            border-left: 4px solid var(--ws-accent-2);
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: var(--r-full);
            animation: statusPulse 2s ease-in-out infinite;
        }

        .status-dot.online {
            background: var(--ws-accent);
        }

        .status-dot.offline {
            background: var(--ws-error);
        }

        .status-dot.connecting {
            background: var(--ws-accent-2);
        }

        /* Enhanced Button States */
        .btn-loading {
            position: relative;
            color: transparent;
        }

        .btn-loading::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 16px;
            height: 16px;
            border: 2px solid color-mix(in srgb, var(--ws-ink) 25%, transparent);
            border-radius: 50%;
            border-top-color: var(--ws-ink);
            animation: spin 1s linear infinite;
        }

        /* Enhanced Animations */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes statusPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5;
            }
        }

        /* Authentication Styles */
        /* === AUTH (Phase 9 — Ayuda Design System) === */
        .auth {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            overflow: auto;
        }

        .auth-card {
            width: 100%;
            max-width: 400px;
            background: var(--ws-surface-2);
            border: 1px solid var(--ws-border);
            border-radius: 14px;
            padding: 36px 34px;
            box-shadow: var(--shadow-lg);
            color: var(--ws-ink);
        }

        .auth-head {
            text-align: center;
            margin-bottom: 24px;
        }

        .auth-head .mark {
            display: inline-flex;
            margin-bottom: 16px;
        }

        .auth-head .mark img {
            width: 60px;
            height: 60px;
            border-radius: 16px;
            box-shadow: var(--shadow-md);
        }

        .auth-title {
            font-size: 26px;
            font-weight: 700;
            letter-spacing: -.02em;
            color: var(--ws-ink);
            margin: 0 0 6px;
        }

        .auth-sub {
            font-family: var(--ws-font);
            font-style: italic;
            font-size: 15px;
            color: var(--ws-ink-soft);
            margin: 0;
        }

        .field {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 15px;
        }

        .field label {
            font-size: 13px;
            font-weight: 500;
            color: var(--ws-ink);
        }

        .input {
            font-family: var(--font-ui);
            font-size: 14px;
            width: 100%;
            padding: 10px 12px;
            border-radius: 6px;
            border: 1px solid var(--ws-border);
            background: var(--ws-surface);
            color: var(--ws-ink);
            box-sizing: border-box;
            transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
        }

        .input::placeholder {
            color: var(--ws-ink-soft);
        }

        .input:focus {
            outline: none;
            border-color: var(--ws-accent);
            box-shadow: var(--focus-ring);
        }

        .auth-submit {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            width: 100%;
            margin-top: 6px;
            font-family: var(--font-ui);
            font-size: 14px;
            font-weight: 500;
            line-height: 1;
            padding: 11px 15px;
            border-radius: 6px;
            cursor: pointer;
            background: var(--ws-accent);
            border: 1px solid var(--ws-accent);
            color: #fff;
            transition: filter var(--dur) var(--ease), border-color var(--dur) var(--ease);
        }

        .auth-submit:hover {
            filter: brightness(.94);
            border-color: var(--ws-accent);
        }

        .auth-submit:active {
            transform: translateY(.5px);
        }

        .auth-submit:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .auth-foot {
            text-align: center;
            margin-top: 18px;
            font-size: 13px;
            color: var(--ws-ink-soft);
        }

        .auth-foot button {
            background: 0;
            border: 0;
            color: var(--ws-accent);
            font-weight: 600;
            cursor: pointer;
            font-size: 13px;
        }

        .auth-error {
            background: color-mix(in srgb, var(--ws-error) 12%, transparent);
            border: 1px solid color-mix(in srgb, var(--ws-error) 32%, transparent);
            border-radius: 8px;
            padding: 10px 12px;
            margin-bottom: 15px;
            color: var(--ws-error);
            font-size: 13px;
            text-align: center;
        }

        .auth-success {
            background: color-mix(in srgb, var(--ws-accent) 14%, transparent);
            border: 1px solid color-mix(in srgb, var(--ws-accent) 34%, transparent);
            border-radius: 8px;
            padding: 10px 12px;
            margin-bottom: 15px;
            color: var(--ws-accent);
            font-size: 13px;
            text-align: center;
        }

        .loading-spinner {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid color-mix(in srgb, #fff 40%, transparent);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s linear infinite;
            margin-right: var(--sp-2);
        }

        /* custom inherits the sepia base; JS sets --ws-surface/--ws-surface-2/--ws-card-bg/--ws-ink/--ws-accent inline */
        /* === Editor toolbar (Phase 9 — kit .ed-toolbar/.icon-btn) === */
        .ws-toolbar{display:flex;align-items:center;gap:8px;padding:9px 16px;border-bottom:1px solid var(--ws-border);background:var(--ws-surface-2);color:var(--ws-ink);}
        .ws-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;cursor:pointer;border:0;background:transparent;color:var(--ws-ink-soft);line-height:0;padding:0;transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);}
        .ws-btn:hover{color:var(--ws-ink);background:color-mix(in srgb, var(--ws-ink) 6%, transparent);}
        .ws-btn.active{color:var(--ws-accent);background:color-mix(in srgb, var(--ws-accent) 14%, transparent);}
        .ws-btn svg{display:block;flex:0 0 auto;}
        .ws-fmt{display:inline-flex;align-items:center;gap:2px;}
        .ws-sep{width:1px;height:20px;background:var(--ws-border);margin:0 4px;flex:0 0 auto;}
        .ws-spacer{flex:1;}
        .ws-doc-actions{display:inline-flex;align-items:center;gap:2px;}
        /* text-only buttons (find bar Replace/All, export menu, prefs) keep a bordered chip look */
        .ws-find .ws-btn:not(:has(svg)), .ws-menu .ws-btn, .ws-pref-save, .ws-export-wrap + *{}
        .ws-find .ws-btn:not(:has(svg)){width:auto;height:auto;padding:5px 11px;border:1px solid var(--ws-border);background:var(--ws-surface);color:var(--ws-ink);font-size:13px;}
        .ws-find .ws-btn:not(:has(svg)):hover{border-color:var(--ws-accent);background:var(--ws-surface);color:var(--ws-ink);}
        .ws-menu .ws-btn{display:flex;align-items:center;justify-content:flex-start;width:100%;height:auto;padding:7px 10px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ws-ink);font-size:13px;text-align:left;}
        .ws-menu .ws-btn:hover{background:color-mix(in srgb, var(--ws-ink) 6%, transparent);color:var(--ws-ink);border-color:transparent;}
        .ws-status{color:var(--ws-ink-soft);font-size:12px;}
        /* === Status bar (Phase 9 — kit .ed-status / .savestate) === */
        .ws-statusbar{display:flex;align-items:center;gap:10px;padding:8px 18px;border-top:1px solid var(--ws-border);background:var(--ws-surface-2);font-family:var(--font-mono);font-size:11.5px;color:var(--ws-ink-soft);font-variant-numeric:tabular-nums;}
        .ws-sb-spacer{flex:1;}
        .ws-savestate{color:var(--ws-accent);font-variant-numeric:tabular-nums;}
        .ws-find{display:flex;align-items:center;gap:8px;padding:9px 16px;border-bottom:1px solid var(--ws-border);background:var(--ws-surface-2);}
        .ws-find-ico{display:inline-flex;align-items:center;color:var(--ws-ink-soft);flex:0 0 auto;}
        .ws-find-input{font-family:var(--font-ui);background:var(--ws-surface);color:var(--ws-ink);border:1px solid var(--ws-border);border-radius:6px;padding:8px 12px;font-size:14px;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
        .ws-find-input:focus{outline:none;border-color:var(--ws-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--ws-accent) 18%, transparent);}
        .ws-find-count{font-size:12px;color:var(--ws-ink-soft);min-width:42px;text-align:center;font-variant-numeric:tabular-nums;}
        .ws-find-hl{background:color-mix(in srgb, var(--ws-accent-2) 25%, transparent);border-radius:2px;}
        .ws-find-hl.current{background:color-mix(in srgb, var(--ws-accent-2) 55%, transparent);}
        /* === Export menu (Phase 9 — .popover-style menu card) === */
        .ws-export-wrap{position:relative;display:inline-flex;}
        .ws-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:140px;display:flex;flex-direction:column;gap:2px;background:var(--ws-surface-2);border:1px solid var(--ws-border);border-radius:var(--r-md);padding:6px;z-index:41;box-shadow:var(--shadow-lg);}
        .ws-focus-exit{position:absolute;top:14px;right:18px;z-index:8;background:var(--ws-accent);color:#fff;border:0;border-radius:20px;padding:6px 16px;cursor:pointer;font-size:13px;font-weight:600;box-shadow:0 4px 14px var(--ws-shadow);}
        .ws-focus-hint{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:8;background:var(--ws-surface-2);color:var(--ws-ink-soft);border:1px solid var(--ws-border);border-radius:20px;padding:6px 16px;font-size:13px;animation:wsFadeIn .3s ease both;}
        @media (prefers-reduced-motion: reduce){ .ws-focus-hint{animation:none;} }
        .group-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ws-ink-soft);margin:24px 2px 12px;}
        .docs-card{position:relative;background:var(--ws-card-bg);border:1px solid var(--ws-border);border-radius:10px;padding:18px;cursor:pointer;color:var(--ws-ink);transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);}
        .docs-card:hover{border-color:var(--ws-accent);transform:translateY(-2px);}
        .docs-card-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:16px;margin-bottom:8px;}
        .docs-card-ico{display:inline-flex;color:var(--ws-accent-2);flex:0 0 auto;}
        .docs-card-preview{font-family:var(--ws-font);font-size:14px;line-height:1.55;color:var(--ws-ink-soft);margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
        .docs-card-meta{font-size:12px;color:var(--ws-ink-soft);font-variant-numeric:tabular-nums;}
        .docs-card-del{position:absolute;top:12px;right:12px;display:inline-flex;background:transparent;border:0;color:var(--ws-ink-soft);cursor:pointer;opacity:0;transition:opacity var(--dur) var(--ease),color var(--dur) var(--ease);}
        .docs-card:hover .docs-card-del{opacity:.7;}
        .docs-card-del:hover, .docs-card-del:focus-visible{opacity:1;color:var(--ws-accent-2);}
        .empty{text-align:center;color:var(--ws-ink-soft);padding:56px 20px;font-family:var(--ws-font);font-style:italic;font-size:15px;}
        /* === Advice library (Phase 9 — Ayuda Design System) === */
        .lib-section-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ws-ink-soft);margin:0 2px 14px;}
        .lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
        .lib-card{background:var(--ws-card-bg);border:1px solid var(--ws-border);border-radius:10px;padding:18px;cursor:pointer;color:var(--ws-ink);transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);}
        .lib-card:hover{border-color:var(--ws-accent);transform:translateY(-2px);}
        .lib-card-top{display:flex;align-items:center;gap:11px;margin-bottom:12px;}
        .lib-card-top > div{min-width:0;flex:1;}
        .lib-ico{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--ws-accent-2) 14%, transparent);color:var(--ws-accent-2);flex:0 0 auto;}
        .lib-card-title{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        .lib-card-meta{font-size:12px;color:var(--ws-ink-soft);}
        .lib-card-quote{font-family:var(--ws-font);font-style:italic;font-size:13.5px;line-height:1.6;color:var(--ws-ink-soft);border-left:2px solid var(--ws-border);padding-left:11px;}
        .lib-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
        .tag{font-size:11px;padding:3px 9px;border-radius:999px;background:color-mix(in srgb, var(--ws-accent) 12%, transparent);color:var(--ws-ink);}
        /* === Add-advice / upload dropzone (Phase 9) === */
        .upload-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:28px 20px;border:1.5px dashed var(--ws-border);border-radius:10px;background:var(--ws-card-bg);color:var(--ws-ink-soft);transition:border-color var(--dur) var(--ease);}
        .upload-dropzone:focus-within{border-color:var(--ws-accent);}
        .upload-dropzone svg{color:var(--ws-accent-2);}
        .upload-dropzone .upload-hint{font-size:13px;color:var(--ws-ink-soft);}
        .upload-divider{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:12px;color:var(--ws-ink-soft);}
        .upload-divider::before, .upload-divider::after{content:"";flex:1;height:1px;background:var(--ws-border);}
        .modal-sub{font-family:var(--ws-font);font-style:italic;font-size:14px;line-height:1.55;color:var(--ws-ink-soft);margin:0 0 16px;}
        .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0;}
        /* === Advice pill (Phase 9 — kit .ed-pill) === */
        .ws-pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;padding:6px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;flex:0 0 auto;margin-left:6px;background:color-mix(in srgb, var(--ws-accent-2) 14%, transparent);border:1px solid color-mix(in srgb, var(--ws-accent-2) 30%, transparent);color:var(--ws-ink);transition:filter var(--dur) var(--ease);}
        .ws-pill:hover{filter:brightness(.97);}
        .ws-pill svg{color:var(--ws-accent-2);flex:0 0 auto;}
        /* === Advice highlight decorations (Phase 9 — kit .hl) === */
        .ws-hl{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;border-radius:2px;cursor:pointer;padding:0 1px;}
        .ws-hl-show-dont-tell{text-decoration-color:var(--ws-hl-show);background:color-mix(in srgb, var(--ws-hl-show) 12%, transparent);}
        .ws-hl-active-voice{text-decoration-color:var(--ws-hl-active);background:color-mix(in srgb, var(--ws-hl-active) 12%, transparent);}
        .ws-hl-default{text-decoration-color:var(--ws-hl-default);background:color-mix(in srgb, var(--ws-hl-default) 12%, transparent);}
        .ws-hl:hover{background:color-mix(in srgb, var(--ws-hl-active) 22%, transparent);}
        .ws-drawer-collapse{float:right;background:transparent;border:0;color:var(--ws-ink-soft);cursor:pointer;font-size:15px;line-height:1;margin:-2px -2px 0 0;}
        .ws-drawer-collapse:hover{color:var(--ws-accent);}
        .ws-drawer-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ws-ink-soft);margin:4px 0 10px;}
        .ws-ayuda-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
        .ws-ayuda-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--ws-border);flex:0 0 auto;}
        .ws-ayuda-name{font-weight:600;color:var(--ws-ink);font-size:14px;}
        .ws-ayuda-status{font-size:11px;color:var(--ws-ink-soft);}
        .ws-ayuda-line{font-family:var(--ws-font);font-style:italic;font-size:13.5px;line-height:1.6;color:var(--ws-ink-soft);border-left:2px solid var(--ws-accent);padding-left:11px;margin-bottom:16px;}
        .ws-sug{background:var(--ws-card-bg);border:1px solid var(--ws-border);border-radius:10px;padding:12px;margin-bottom:10px;cursor:pointer;transition:border-color var(--dur) var(--ease);}
        .ws-sug:hover{border-color:var(--ws-accent);}
        .ws-sug.flash{border-color:var(--ws-accent);}
        .ws-sug-top{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ws-ink-soft);margin-bottom:8px;white-space:nowrap;}
        .ws-sug-top > span:last-child{margin-left:auto;}
        .ws-sug-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}
        .ws-sug-src{font-weight:600;color:var(--ws-ink);overflow:hidden;text-overflow:ellipsis;}
        .ws-sug-rule{font-size:13.5px;color:var(--ws-ink);line-height:1.5;margin-bottom:9px;}
        .ws-sug-rewrite{font-family:var(--ws-font);font-size:13px;line-height:1.5;margin-bottom:10px;}
        .ws-sug-old{color:var(--ws-ink-soft);text-decoration:line-through;text-decoration-color:var(--ws-hl-show);}
        .ws-sug-new{color:var(--ws-accent);}
        .ws-sug-actions{display:flex;gap:8px;}
        .ws-sug-apply{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;background:var(--ws-accent);color:#fff;border:0;border-radius:6px;padding:6px 12px;cursor:pointer;white-space:nowrap;transition:filter var(--dur) var(--ease);}
        .ws-sug-apply:hover{filter:brightness(.94);}
        .ws-sug-apply svg{flex:0 0 auto;}
        .ws-sug-dismiss{font-size:12px;background:transparent;color:var(--ws-ink-soft);border:1px solid var(--ws-border);border-radius:6px;padding:6px 12px;cursor:pointer;white-space:nowrap;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
        .ws-sug-dismiss:hover{color:var(--ws-ink);border-color:var(--ws-ink-soft);}
        @keyframes wsFadeIn{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}
        #wsSuggestions .ws-sug{animation:wsFadeIn .22s ease both;}
        @keyframes wsSavePulse{0%{opacity:.5;}50%{opacity:1;color:var(--ws-accent);}100%{opacity:.5;}}
        .ws-savestate.pulse{animation:wsSavePulse .6s ease;}
        .docs-card{animation:wsFadeIn .2s ease both;}
        @media (prefers-reduced-motion: reduce){
          #wsSuggestions .ws-sug, .docs-card{animation:none;}
          .ws-savestate.pulse{animation:none;}
          *{scroll-behavior:auto !important;}
        }
        .ws-btn:focus-visible{
          outline:none; box-shadow:var(--focus-ring);
        }
        .nav-item:focus-visible, .ws-sug-apply:focus-visible,
        .ws-sug-dismiss:focus-visible, .docs-card:focus-visible{
          outline:2px solid var(--ws-accent); outline-offset:2px;
        }
        .ws-find-input:focus-visible, #docsSearch:focus-visible{outline:2px solid var(--ws-accent);outline-offset:1px;}
        .ws-card{background:var(--ws-card-bg);border:1px solid var(--ws-border);border-radius:8px;padding:11px 12px;margin-bottom:9px;cursor:pointer;color:var(--ws-ink);transition:border-color var(--dur) var(--ease);}
        .ws-card:hover{border-color:var(--ws-accent);}
        .ws-card.active{border-color:var(--ws-accent);}
        .ws-card .top{display:flex;justify-content:space-between;font-size:11px;color:var(--ws-ink-soft);margin-bottom:6px;}
        .ws-card .src{font-size:11px;color:var(--ws-ink-soft);margin-top:2px;}
        .ws-card .body{font-size:13px;margin-top:0;line-height:1.5;}
        .ws-popover{position:fixed;top:60px;left:272px;width:300px;max-height:calc(100vh - 80px);overflow:auto;background:var(--ws-surface-2);color:var(--ws-ink);border:1px solid var(--ws-border);border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow-lg);font-size:13px;z-index:1000;}
        @media(max-width:768px){.ws-popover{left:50%;transform:translateX(-50%);top:72px;width:min(92vw,300px);}}
        .ws-pref-title{font-weight:600;font-size:14px;margin-bottom:12px;}
        .ws-pref-sublabel{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ws-ink-soft);margin:14px 0 8px;}
        /* === Confirm dialog (Phase 9 — warm card + .btn / .btn-primary) === */
        .ws-confirm{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);z-index:2000;background:var(--ws-surface-2);color:var(--ws-ink);border:1px solid var(--ws-border);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow-lg);min-width:280px;max-width:380px;}
        .ws-confirm-msg{margin-bottom:16px;font-size:14px;line-height:1.5;color:var(--ws-ink);}
        .ws-confirm-actions{display:flex;gap:8px;justify-content:flex-end;}
        .ws-confirm .ws-btn{width:auto;height:auto;display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:6px;font-size:14px;font-weight:500;line-height:1;}
        .ws-confirm #wsConfirmNo{border:1px solid transparent;background:transparent;color:var(--ws-ink-soft);}
        .ws-confirm #wsConfirmNo:hover{color:var(--ws-ink);background:color-mix(in srgb, var(--ws-ink) 6%, transparent);}
        .ws-confirm #wsConfirmYes{background:var(--ws-accent);color:#fff;border:1px solid var(--ws-accent);}
        .ws-confirm #wsConfirmYes:hover{filter:brightness(.94);border-color:var(--ws-accent);}
        .ws-pref-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px;font-size:13px;}
        .ws-pref-hr{border:0;border-top:1px solid var(--ws-border);margin:14px 0;}
        .ws-seg{display:inline-flex;border:1px solid var(--ws-border);border-radius:8px;overflow:hidden;background:var(--ws-surface);}
        .ws-seg-btn{font-family:var(--font-ui);font-size:12.5px;padding:6px 11px;border:0;background:transparent;color:var(--ws-ink-soft);cursor:pointer;transition:all var(--dur-fast) var(--ease);}
        .ws-seg-btn.active{background:color-mix(in srgb,var(--ws-accent) 16%,transparent);color:var(--ws-ink);font-weight:500;}
        .ws-toggle{width:40px;height:23px;border-radius:999px;border:0;cursor:pointer;position:relative;flex:none;padding:0;background:color-mix(in srgb,var(--ws-ink) 22%,transparent);transition:background var(--dur) var(--ease);}
        .ws-toggle.on{background:var(--ws-accent);}
        .ws-toggle-knob{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;transition:left var(--dur) var(--ease);box-shadow:0 1px 2px rgba(0,0,0,.25);}
        .ws-toggle.on .ws-toggle-knob{left:19px;}
        .ws-swatch{width:26px;height:26px;border-radius:7px;cursor:pointer;border:2px solid transparent;padding:0;background:var(--ws-surface);}
        .ws-swatch.active{border-color:var(--ws-ink);}
        .ws-swatch-dab{display:block;width:100%;height:100%;border-radius:5px;}
        .ws-picker{margin-top:10px;user-select:none;}
        .ws-picker-sv{position:relative;width:100%;height:120px;border-radius:var(--r-sm);cursor:crosshair;
          background:linear-gradient(to top,#000,rgba(0,0,0,0)),linear-gradient(to right,#fff,rgba(255,255,255,0)),var(--ws-pick-hue,#ff0000);}
        .ws-picker-dot{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none;}
        .ws-picker-hue{position:relative;width:100%;height:14px;margin-top:10px;border-radius:var(--r-full);cursor:pointer;
          background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);}
        .ws-picker-hue-handle{position:absolute;top:-2px;width:6px;height:18px;border:2px solid #fff;border-radius:4px;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none;}
        .ws-picker-foot{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;font-variant-numeric:tabular-nums;}
        .ws-picker-preview{width:22px;height:22px;border-radius:var(--r-xs);border:1px solid var(--ws-border);}
        .ws-picker-hex{font-family:var(--font-mono,monospace);color:var(--ws-ink-soft);letter-spacing:.02em;}
        .ws-pref-save{margin-top:6px;background:var(--ws-accent);color:#fff;border-color:transparent;font-weight:500;}
        .ws-pref-save:hover{filter:brightness(1.05);border-color:transparent;}