@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap";:root{--color-bg: #0F0F12;--color-bg-elevated: #18181D;--color-bg-card: #1E1E25;--color-bg-hover: #26262F;--color-border: rgba(255,255,255,.06);--color-border-accent: rgba(139,94,60,.3);--color-text-primary: #F0EDE8;--color-text-secondary: #9B978F;--color-text-muted: #605D56;--color-accent: #C4956A;--color-accent-light: #D4AB82;--color-accent-dark: #8B5E3C;--color-success: #4ADE80;--color-warning: #FACC15;--color-danger: #F87171;--color-info: #60A5FA;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-2xl: 32px;--font-sans: "Inter", system-ui, -apple-system, sans-serif;--font-serif: "Playfair Display", Georgia, serif;--shadow-sm: 0 2px 8px rgba(0,0,0,.3);--shadow-md: 0 4px 16px rgba(0,0,0,.4);--shadow-lg: 0 8px 32px rgba(0,0,0,.5);--shadow-glow: 0 0 20px rgba(196,149,106,.15)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::selection{background:var(--color-accent);color:#fff}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-text-muted);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}.mode-switcher-container{position:absolute;left:50%;transform:translate(-50%);display:flex;justify-content:center}.mode-switcher{display:inline-flex;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:100px;padding:3px;gap:2px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow-sm)}.mode-switcher button{padding:6px 16px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border:none;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);background:transparent;color:var(--color-text-muted)}.mode-switcher button:hover{color:var(--color-text-secondary);background:var(--color-bg-hover)}.mode-switcher button.active{background:var(--color-accent);color:#fff;box-shadow:0 2px 10px #c4956a4d}.top-bar{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:64px;background:var(--color-bg-elevated);border-bottom:1px solid var(--color-border);position:relative;z-index:100}.top-bar .logo{display:flex;align-items:center;gap:12px;cursor:pointer}.top-bar .logo-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--color-accent),var(--color-accent-dark));border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-serif);font-style:italic;font-size:18px;font-weight:700}.top-bar .logo-text{font-family:var(--font-serif);font-size:20px;font-weight:600;color:var(--color-text-primary);letter-spacing:-.02em}.nav-toggle-btn{background:var(--color-bg-card);border:1px solid var(--color-border);color:var(--color-text-secondary);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.nav-toggle-btn:hover{background:var(--color-bg-hover);color:var(--color-accent);border-color:var(--color-accent)}.nav-toggle-btn.open{transform:rotate(180deg);background:var(--color-accent);color:#fff}.bottom-nav-bar{position:fixed;bottom:0;left:0;right:0;background:var(--color-bg-elevated);border-top:1px solid var(--color-border);padding:8px 24px 20px;z-index:80;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);cursor:pointer;transition:background .3s;display:flex;flex-direction:column;align-items:center;gap:8px}.bottom-nav-bar:hover{background:var(--color-bg-hover)}.bottom-nav-bar .nav-handle{width:36px;height:4px;background:var(--color-text-muted);border-radius:2px;opacity:.5}.bottom-nav-bar .nav-bar-content{display:flex;width:100%;justify-content:space-around;align-items:center}.nav-bar-item{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--color-text-muted);transition:all .2s}.nav-bar-item.active{color:var(--color-accent)}.nav-bar-item span{font-size:10px;font-weight:600}.nav-bar-more{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--color-text-muted)}.nav-bar-more .dots{display:flex;gap:3px}.nav-bar-more .dots span{width:4px;height:4px;background:currentColor;border-radius:50%}.nav-bar-more span:last-child{font-size:10px;font-weight:600}.nav-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:150;opacity:0;pointer-events:none;transition:opacity .4s ease}.nav-overlay.visible{opacity:1;pointer-events:all}.nav-drawer{position:fixed;left:0;right:0;bottom:0;max-height:85vh;background:var(--color-bg-elevated);border-top:1px solid var(--color-border);border-radius:32px 32px 0 0;z-index:160;transform:translateY(100%);transition:transform .5s cubic-bezier(.32,.72,0,1);overflow-y:auto;box-shadow:0 -12px 48px #0009;padding-bottom:40px}.nav-drawer.open{transform:translateY(0)}.nav-drawer .drawer-handle{width:48px;height:5px;background:var(--color-text-muted);border-radius:3px;margin:16px auto 24px}.nav-drawer .nav-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 24px}.nav-drawer .nav-item{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 12px;border-radius:20px;cursor:pointer;background:var(--color-bg-card);border:1px solid var(--color-border);transition:all .3s;text-decoration:none;color:var(--color-text-secondary)}.nav-drawer .nav-item:hover,.nav-drawer .nav-item.active{background:var(--color-bg-hover);border-color:var(--color-accent);transform:translateY(-4px);box-shadow:var(--shadow-glow);color:var(--color-text-primary)}.nav-drawer .nav-item .nav-icon{width:52px;height:52px;border-radius:14px;background:var(--color-bg);display:flex;align-items:center;justify-content:center;color:var(--color-accent);transition:all .3s}.nav-drawer .nav-item:hover .nav-icon,.nav-drawer .nav-item.active .nav-icon{background:var(--color-accent);color:#fff}.nav-drawer .nav-item .nav-label{font-size:13px;font-weight:700;text-align:center}.main-content{flex:1;overflow-y:auto;padding:24px 24px 40px}.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:24px;transition:all .25s}.card:hover{border-color:var(--color-border-accent);box-shadow:var(--shadow-glow)}.card-featured{background:linear-gradient(135deg,var(--color-accent-dark),#3D2B1F);border:1px solid var(--color-border-accent)}.editor-tabs{display:flex;background:var(--color-bg);border-bottom:1px solid var(--color-border);padding:0 4px}.editor-tabs button{padding:10px 20px;font-size:13px;font-weight:600;color:var(--color-text-muted);background:none;border:none;cursor:pointer;position:relative;transition:color .2s}.editor-tabs button:hover{color:var(--color-text-secondary)}.editor-tabs button.active{color:var(--color-accent)}.editor-tabs button.active:after{content:"";position:absolute;bottom:-1px;left:8px;right:8px;height:2px;background:var(--color-accent);border-radius:1px}.wysiwyg-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:8px 16px;background:#fff;border-bottom:1px solid #E1DFDD;position:sticky;top:0;z-index:10}.wysiwyg-toolbar .toolbar-group{display:flex;align-items:center;gap:2px;padding:0 8px;border-right:1px solid #EDEBE9}.wysiwyg-toolbar .toolbar-group:last-child{border-right:none}.wysiwyg-toolbar button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:4px;color:#323130;cursor:pointer;transition:all .1s}.wysiwyg-toolbar button:hover{background:#f3f2f1;color:#0078d4}.wysiwyg-toolbar button.active{background:#edebe9;border-color:#0078d4;color:#0078d4}.wysiwyg-toolbar select{height:32px;padding:0 8px;border:1px solid #D2D0CE;border-radius:4px;background:#fff;color:#323130;font-size:13px;cursor:pointer;outline:none}.wysiwyg-toolbar select:hover{border-color:#0078d4}.wysiwyg-content{flex:1;background:#f3f2f1;padding:40px;overflow-y:auto;display:flex;justify-content:center}.wysiwyg-editor-page{width:100%;max-width:800px;min-height:1056px;background:#fff;padding:60px 80px;box-shadow:0 0 20px #0000001a;outline:none;color:#201f1e;font-family:Segoe UI,system-ui,sans-serif;line-height:1.6}.wysiwyg-editor-page h1{font-size:28px;margin-bottom:20px;color:#323130}.wysiwyg-editor-page h2{font-size:22px;margin-bottom:16px;color:#323130}.wysiwyg-editor-page p{margin-bottom:12px}.html-editor{width:100%;flex:1;padding:24px;font-family:Cascadia Code,Fira Code,monospace;font-size:14px;background:#1e1e1e;color:#d4d4d4;border:none;outline:none;resize:none}.preview-container{flex:1;padding:40px;background:#fafafa;color:#1a1a1a;overflow-y:auto}.preview-paper{max-width:700px;margin:0 auto;background:#fff;padding:60px;box-shadow:0 4px 24px #0000000d;border-radius:4px;font-family:Georgia,serif;line-height:1.8;font-size:17px}.section-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:16px}@media(max-width:640px){.section-grid{grid-template-columns:repeat(2,1fr)}}.section-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 12px;border-radius:var(--radius-lg);background:var(--color-bg-card);border:1px solid var(--color-border);cursor:pointer;transition:all .25s;text-align:center}.section-card:hover{border-color:var(--color-accent);background:var(--color-bg-hover);transform:translateY(-2px);box-shadow:var(--shadow-glow)}.section-card.selected{border-color:var(--color-accent);background:#c4956a1a;box-shadow:var(--shadow-glow)}.section-card .section-icon{width:48px;height:48px;border-radius:var(--radius-md);background:var(--color-bg);display:flex;align-items:center;justify-content:center;color:var(--color-accent);transition:all .25s}.section-card:hover .section-icon,.section-card.selected .section-icon{background:var(--color-accent);color:#fff}.section-card .section-name{font-size:12px;font-weight:600;color:var(--color-text-secondary);line-height:1.3}.section-card.selected .section-name{color:var(--color-accent-light)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}.modal-content{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:32px;width:100%;max-width:480px;box-shadow:var(--shadow-lg)}.modal-content h3{font-size:18px;font-weight:700;margin-bottom:16px;color:var(--color-text-primary)}.modal-content input{width:100%;padding:12px 16px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text-primary);font-size:14px;outline:none;transition:border-color .2s}.modal-content input:focus{border-color:var(--color-accent)}.modal-content .modal-actions{display:flex;gap:12px;margin-top:20px;justify-content:flex-end}.modal-content .btn-primary{padding:10px 24px;background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:background .2s}.modal-content .btn-primary:hover{background:var(--color-accent-light)}.modal-content .btn-secondary{padding:10px 24px;background:var(--color-bg-card);color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:all .2s}.modal-content .btn-secondary:hover{background:var(--color-bg-hover)}.edit-layout{display:flex;height:100%;overflow:hidden}.edit-sidebar{width:280px;border-right:1px solid var(--color-border);background:var(--color-bg-elevated);overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column}@media(max-width:768px){.edit-layout{flex-direction:column}.edit-sidebar{width:100%;max-height:45vh;border-right:none;border-bottom:1px solid var(--color-border)}}.edit-main{flex:1;display:flex;flex-direction:column;overflow:hidden}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 8px #c4956a33}50%{box-shadow:0 0 20px #c4956a66}}@keyframes spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.animate-fade-in{animation:fadeIn .4s ease-out forwards}.animate-slide-up{animation:slideUp .4s cubic-bezier(.32,.72,0,1) forwards}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}