.cw-container { max-width: 600px; margin: 0 auto; padding: 0 16px 48px; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
        .cw-header { display: flex; align-items: center; justify-content: space-between; padding: max(16px, env(safe-area-inset-top)) 0 16px; margin-bottom: 8px; }
        .cw-header-left { display: flex; align-items: center; }
        .cw-back-btn { width: 40px; height: 40px; border-radius: 50%; background: #1c1c1c; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; cursor: pointer; transition: 0.2s; }
        .cw-back-btn:active { transform: scale(0.9); background: #333; }
        .cw-title { font-size: 22px; font-weight: 800; color: #fff; margin-left: 12px; }

        .cw-add-btn { background: #fff; color: #000; border: none; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 700; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 6px; }
        .cw-add-btn:active { transform: scale(0.95); }

        /* ── Hero — ไล่สีเทา-ดำที่ลอยตัวช้าๆ ตลอดเวลา แบบเดียวกับหน้าแชร์ไฟล์ (shares.html)
           ให้สองหน้านี้อ่านเป็น "ห้องเดียวกัน" ในธีมใหม่ ── */
        .cw-hero { position: relative; overflow: hidden; padding: calc(64px + env(safe-area-inset-top)) 4px 28px; margin: 0 0 8px;
            background: radial-gradient(ellipse 120% 90% at 80% -10%, #3a3630 0%, transparent 55%), radial-gradient(ellipse 100% 80% at 10% 10%, #232323 0%, transparent 60%), #050505;
            background-size: 180% 180%, 180% 180%, 100% 100%; animation: cwMeshDrift 22s ease-in-out infinite; border-radius: 0 0 32px 32px; }
        @keyframes cwMeshDrift { 0%,100% { background-position: 100% 0%, 0% 0%, 0 0; } 50% { background-position: 70% 60%, 30% 40%, 0 0; } }
        @media (prefers-reduced-motion: reduce) { .cw-hero { animation: none; } }
        .cw-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 40%, #000 100%); }
        .cw-hero-inner { position: relative; z-index: 1; padding: 0 12px; }
        .cw-eyebrow-icon { width: 52px; height: 52px; border-radius: 18px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; margin-bottom: 16px; }
        .cw-hero-title { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; margin-bottom: 6px; text-wrap: balance; }
        .cw-hero-sub { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.55); line-height: 1.5; max-width: 46ch; margin-bottom: 20px; }
        .cw-hero-add-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; border-radius: 26px; background: #fff; color: #000; font-weight: 700; font-size: 14px; font-family: inherit; border: none; cursor: pointer; transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1), filter 0.2s; }
        .cw-hero-add-btn:active { transform: scale(0.97); filter: brightness(0.92); }

        .cw-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding-bottom: 40px; }
        .cw-item { background: var(--item-color, #1c1c1c); border-radius: 28px; border: none; overflow: hidden; transition: 0.3s cubic-bezier(0.2, 1, 0.3, 1); cursor: pointer; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 12px rgba(0,0,0,0.2); position: relative; }
        .cw-item:active { transform: scale(0.95); filter: brightness(1.1); }
        .cw-item::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,0.3); }
        
        .cw-item-body { padding: 20px; display: flex; flex-direction: column; justify-content: space-between; flex: 1; }
        .cw-item-info { flex: 1; }
        .cw-item-name { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 4px; line-height: 1.2; word-break: break-word; letter-spacing: -0.3px; }
        .cw-item-meta { font-size: 11px; color: rgba(255,255,255,0.6); font-weight: 700; }
        .cw-item-actions { display: flex; gap: 8px; margin-top: 12px; }
        .cw-action-btn { width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; cursor: pointer; transition: 0.2s; border: 1px solid rgba(255,255,255,0.1); }
        .cw-action-btn:active { transform: scale(0.9); background: rgba(0,0,0,0.4); }
        .cw-action-btn.active { color: #f5a623; border-color: rgba(245,166,35,0.3); }

        /* Editor View */
        .cw-editor-view { display: none; flex-direction: column; flex: 1; height: 100%; position: fixed; inset: 0; background: #000; z-index: 10000; }
        .cw-editor-header { display: flex; align-items: center; justify-content: space-between; padding: max(10px, env(safe-area-inset-top)) 16px 10px; border-bottom: 1px solid #1a1a1a; }
        .cw-editor-title { font-size: 16px; font-weight: 700; color: #fff; flex: 1; margin: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        
        /* Editor Toolbar */
        .cw-editor-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: #0a0a0a; border-bottom: 1px solid #1a1a1a; overflow-x: auto; scrollbar-width: none; }
        .cw-editor-toolbar::-webkit-scrollbar { display: none; }
        .cw-tool-btn { flex-shrink: 0; height: 32px; padding: 0 12px; border-radius: 16px; background: #1c1c1c; border: 1px solid #2a2a2a; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: 0.2s; }
        .cw-tool-btn:active { transform: scale(0.94); background: #222; }
        .cw-tool-btn.danger { color: #ed4956; border-color: rgba(237,73,86,0.2); }

        .cw-editor-container { flex: 1; position: relative; overflow: hidden; background: #050505; }
        
        .cw-editor-footer { display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid #1a1a1a; background: #000; }

        /* ── Skeleton Loading ── */
        @keyframes cwsk-shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
        .cw-sk-card { border-radius: 28px; aspect-ratio: 1; background: linear-gradient(90deg, #111 25%, #1c1c1c 50%, #111 75%); background-size: 400px 100%; animation: cwsk-shimmer 1.5s linear infinite; }

        .cw-footer-btn { flex: 1; height: 48px; border-radius: 24px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 800; cursor: pointer; border: none; transition: 0.2s; }
        .cw-footer-btn.delete { background: rgba(237, 73, 86, 0.1); color: #ed4956; }
        .cw-footer-btn.open { background: #fff; color: #000; }
        .cw-footer-btn:active { transform: scale(0.95); }

        /* Redesigned Modal */
        .cw-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 20000; align-items: flex-end; justify-content: center; backdrop-filter: blur(10px); }
        .cw-modal-content { background: #121212; padding: 24px 24px calc(24px + env(safe-area-inset-bottom)); border-radius: 32px 32px 0 0; width: 100%; max-width: 500px; border-top: 1px solid #2a2a2a; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1); }
        .cw-modal.active { display: flex; }
        .cw-modal.active .cw-modal-content { transform: translateY(0); }
        .cw-modal-handle { width: 40px; height: 5px; background: #333; border-radius: 10px; margin: -12px auto 20px; }
        .cw-modal-title { font-size: 20px; font-weight: 900; color: #fff; margin-bottom: 24px; text-align: center; letter-spacing: -0.5px; }
        
        .cw-input-group { margin-bottom: 20px; }
        .cw-label { font-size: 13px; font-weight: 800; color: rgba(255,255,255,0.4); margin-bottom: 8px; display: block; text-transform: uppercase; letter-spacing: 0.5px; }
        .cw-input { width: 100%; background: #1c1c1c; border: 1px solid rgba(255,255,255,0.08); color: #fff; padding: 16px 20px; border-radius: 18px; font-size: 16px; font-weight: 600; outline: none; transition: 0.2s; }
        .cw-input:focus { border-color: var(--v8-accent); background: #222; }

        .cw-color-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 10px; }
        .cw-color-item { aspect-ratio: 1; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: 0.2s; position: relative; }
        .cw-color-item.active { border-color: #fff; transform: scale(1.1); }
        
        .cw-modal-btns { display: flex; gap: 12px; margin-top: 24px; }
        .cw-m-btn { flex: 1; height: 54px; border-radius: 27px; font-size: 16px; font-weight: 800; cursor: pointer; border: none; transition: 0.2s; }
        .cw-m-btn.cancel { background: #222; color: #fff; }
        .cw-m-btn.create { background: #fff; color: #000; }
        .cw-m-btn:active { transform: scale(0.96); }