.app-container {
            display: flex;
            height: 100vh;
            position: relative;
            z-index: 1;
        }

        /* Navigation rail (kit .rail) */
        .sidebar {
            width: 248px;
            flex: 0 0 248px;
            background: var(--ws-surface-2);
            border-right: 1px solid var(--ws-border);
            color: var(--ws-ink);
            display: flex;
            flex-direction: column;
            padding: 18px 14px 14px;
            position: relative;
            z-index: 2;
            transition: width var(--dur) var(--ease), padding var(--dur) var(--ease);
        }
        html.rail-collapsed .sidebar{width:0;flex-basis:0;padding-left:0;padding-right:0;overflow:hidden;border-right:0;}
        @media (prefers-reduced-motion: reduce){ .sidebar{transition:none;} }

        /* Brand lockup (kit .rail-brand) */
        .rail-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 4px; margin-bottom: 14px; }
        .rail-brand .rail-mark { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
        .rail-brand .word { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ws-ink); }

        /* Collapse tab + edge tab (kit collapse rail tab) */
        .rail-collapse{margin-left:auto;background:transparent;border:0;color:var(--ws-ink-soft);cursor:pointer;display:flex;padding:4px;border-radius:6px;line-height:1;}
        .rail-collapse:hover{color:var(--ws-accent);background:color-mix(in srgb, var(--ws-ink) 6%, transparent);}
        .rail-tab{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:50;display:none;background:var(--ws-surface-2);color:var(--ws-ink-soft);border:1px solid var(--ws-border);border-left:0;border-radius:0 10px 10px 0;padding:14px 5px;cursor:pointer;box-shadow:2px 0 10px var(--ws-shadow);font-size:14px;line-height:1;}
        .rail-tab:hover{color:var(--ws-accent);}
        html.rail-collapsed .rail-tab{display:block;}
        .rail-group{margin-bottom:14px;}

        /* Main Content Area */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        /* Mobile Navigation */
        .mobile-nav {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: var(--ws-surface-2);
            border-bottom: 1px solid var(--ws-border);
            padding: var(--sp-3) var(--sp-4);
            z-index: 1000;
            align-items: center;
            justify-content: space-between;
        }

        .mobile-nav.show {
            display: flex;
        }

        .mobile-hamburger {
            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-hamburger:hover {
            color: var(--ws-accent);
            background: color-mix(in srgb, var(--ws-ink) 6%, transparent);
        }

        /* Mobile Sidebar Overlay */
        .mobile-sidebar-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: color-mix(in srgb, var(--ws-ink) 45%, transparent);
            z-index: 1100;
            opacity: 0;
            transition: opacity var(--dur) var(--ease);
        }

        .mobile-sidebar-overlay.active {
            display: block;
            opacity: 1;
        }

        .mobile-sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 280px;
            height: 100vh;
            background: var(--ws-surface-2);
            color: var(--ws-ink);
            border-right: 1px solid var(--ws-border);
            padding: var(--sp-6) var(--sp-4);
            z-index: 1110;
            transform: translateX(-300px);
            transition: transform var(--dur) var(--ease);
            overflow-y: auto;
        }

        .mobile-sidebar.active {
            transform: translateX(0);
        }

        /* Enhanced Mobile Responsive Design */
        @media (max-width: 768px) {
            body {
                padding-top: 60px; /* Space for mobile nav */
            }

            .app-container {
                flex-direction: column;
                height: calc(100vh - 60px);
            }
            
            .sidebar {
                display: none; /* Hide desktop sidebar */
            }

            .mobile-nav {
                display: flex;
            }
            
            .main-content {
                flex: 1;
                width: 100%;
                overflow: hidden;
            }

            /* Auth Screen Mobile */
            .auth {
                padding: var(--sp-4);
            }

            .auth-card {
                max-width: 100%;
                margin: var(--sp-4) 0;
                padding: 28px 22px;
            }

            .auth-title {
                font-size: 24px;
            }

            .form-input, .form-textarea, .auth-card .input {
                font-size: var(--text-base);
                padding: var(--sp-4);
                min-height: 50px;
            }

            .auth-submit {
                padding: var(--sp-4);
                font-size: var(--text-base);
                min-height: 50px;
            }

            /* Modal Mobile Optimizations */
            .modal {
                padding: var(--sp-4);
                align-items: stretch;
            }

            .modal-content {
                max-width: 100%;
                max-height: calc(100vh - 60px);
                margin: 0;
                border-radius: var(--r-lg);
                overflow-y: auto;
            }

            .modal-header {
                padding: var(--sp-4) var(--sp-5);
                position: sticky;
                top: 0;
                background: var(--ws-surface-2);
                border-bottom: 1px solid var(--ws-border);
                z-index: 10;
            }

            /* Touch-friendly improvements */
            .btn, .nav-item {
                min-height: 48px;
                touch-action: manipulation;
            }

            /* Notification adjustments */
            .notification {
                top: 70px;
                right: var(--sp-4);
                left: var(--sp-4);
                max-width: none;
                transform: translateY(-100px);
            }

            .notification.show {
                transform: translateY(0);
            }

            /* Connection status mobile */
            .connection-status {
                top: 65px;
                left: var(--sp-4);
                font-size: var(--text-xs);
                padding: var(--sp-1) var(--sp-3);
            }
        }

        /* Tablet optimizations */
        @media (min-width: 769px) and (max-width: 1024px) {
            .sidebar {
                width: 260px;
                flex-basis: 260px;
            }

            .modal-content {
                max-width: 90%;
            }
        }
        .ws-focus .ws-toolbar, .ws-focus .ws-drawer, .ws-focus .ws-statusbar, .ws-focus .ws-find{display:none !important;}
        .ws-focus-body .sidebar{display:none !important;}
        .ws-focus-body .rail-tab{display:none !important;}
        .ws-focus .ws-editor #wsDocTitle{padding-top:72px;}
        .ws-focus #wsFocusExit{display:block;}
        .docs-head{display:flex;align-items:center;gap:14px;padding:30px 40px 18px;max-width:1080px;margin:0 auto;flex-wrap:wrap;}
        .docs-title{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:0;flex:1;color:var(--ws-ink);}
        .docs-actions{display:flex;align-items:center;gap:8px;}
        .search-wrap{position:relative;display:flex;align-items:center;}
        .search-wrap svg{position:absolute;left:10px;color:var(--ws-ink-soft);pointer-events:none;}
        .docs-search{padding-left:32px;width:220px;}
        .docs-groups{padding:0 40px 48px;max-width:1080px;margin:0 auto;}
        .docs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
        .ws-body{display:flex;flex:1;min-height:0;}
        .ws-editor-wrap{position:relative;flex:1;display:flex;min-height:0;}
        /* === Editor surface (Phase 9 — kit .ed-scroll/.ed-page/.ed-doctitle/.ed-prose) === */
        .ws-editor{flex:1;overflow:auto;display:flex;flex-direction:column;background:var(--ws-surface);}
        .ws-editor #wsDocTitle, .ws-editor #wsEditorMount{width:100%;max-width:var(--ws-maxw);margin:0 auto;box-sizing:border-box;padding-left:32px;padding-right:32px;transition:max-width var(--dur) var(--ease);}
        .ws-editor #wsDocTitle{padding-top:48px;padding-bottom:0;}
        .ws-editor #wsEditorMount{flex:1;padding-top:0;padding-bottom:120px;}
        .ws-doc-title{display:block;background:transparent;border:0;outline:none;color:var(--ws-ink);font:700 30px/1.25 var(--ws-font);letter-spacing:-.01em;margin-bottom:18px;}
        .ws-doc-title::placeholder{color:var(--ws-ink-soft);opacity:.55;}
        .ws-editor .ProseMirror{outline:none;font:var(--ws-fontsize)/var(--ws-lh) var(--ws-font);color:var(--ws-ink);caret-color:var(--ws-accent);min-height:100%;}
        .ws-editor .ProseMirror p{margin:0 0 1.1em;}
        .ws-editor .ProseMirror:focus, .ws-editor .ProseMirror:focus-visible{outline:none;box-shadow:none;}
        .ws-doc-title:focus, .ws-doc-title:focus-visible{outline:none;box-shadow:none;}
        .ws-editor .ProseMirror p.is-editor-empty:first-child::before{content:attr(data-placeholder);color:var(--ws-ink-soft);opacity:.7;float:left;height:0;pointer-events:none;}
        .ws-drawer{width:318px;flex:0 0 318px;border-left:1px solid var(--ws-border);padding:18px 16px;overflow:auto;background:var(--ws-surface-2);color:var(--ws-ink);}
        .ws-drawer{transition:width var(--dur) var(--ease), flex-basis var(--dur) var(--ease), padding var(--dur) var(--ease);}
        .ws-drawer.collapsed{width:0;flex-basis:0;min-width:0;padding:18px 0;overflow:hidden;border-left:0;}
        .drawer-tab{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:6;display:none;background:var(--ws-surface-2);color:var(--ws-ink);border:1px solid var(--ws-border);border-right:0;border-radius:10px 0 0 10px;padding:16px 5px;cursor:pointer;box-shadow:-2px 0 10px var(--ws-shadow);font-size:14px;}
        #writingView.drawer-collapsed .drawer-tab{display:block;}
        .ws-focus .drawer-tab{display:none !important;}
        @media (prefers-reduced-motion: reduce){ .ws-drawer{transition:none;} }
        .ws-editor .ws-hl{transition:background .3s ease;}
        @media(max-width:768px){
          .ws-drawer{width:min(86vw,320px);box-shadow:-8px 0 24px var(--ws-shadow);}
          .ws-toolbar{flex-wrap:wrap;gap:6px;}
          .ws-sug-rewrite{font-size:14px;}
        }
        @media(max-width:768px){.ws-drawer{position:absolute;right:0;top:0;bottom:0;background:var(--ws-surface-2);z-index:5;}}
        #writingView{background:var(--ws-surface)!important;color:var(--ws-ink);}
        #docsView{background:var(--ws-surface)!important;color:var(--ws-ink);}
        body.pre-auth .sidebar, body.pre-auth .mobile-nav, body.pre-auth .rail-tab{display:none !important;}