*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:'Source Serif 4',Georgia,serif;background:#fafaf9;color:#1c1917;font-size:15px;line-height:1.6}
input,button,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#d6d3d1;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#a8a29e}
.hidden{display:none!important}

.login-screen{height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fefce8 0%,#fafaf9 50%,#f5f5f4 100%)}
.login-card{background:#fff;border-radius:16px;padding:48px 40px;box-shadow:0 8px 40px rgba(0,0,0,.06);text-align:center;width:100%;max-width:380px;margin:0 16px;border:1px solid #e7e5e4}
.login-logo{font-size:48px;color:#a16207;margin-bottom:8px}
.login-title{font-size:24px;font-weight:700;margin-bottom:4px}
.login-subtitle{font-size:14px;color:#a8a29e;margin-bottom:28px}
.login-form{display:flex;flex-direction:column;gap:10px}
.login-form input{padding:10px 14px;border:1px solid #e7e5e4;border-radius:8px;font-size:14px;outline:none;transition:border-color .15s}
.login-form input:focus{border-color:#a16207}
.login-form button{padding:10px;background:#292524;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s}
.login-form button:hover{background:#44403c}
.login-error{color:#dc2626;font-size:13px;min-height:20px}

.app{display:flex;height:100vh;width:100vw;overflow:hidden;position:relative}

.sidebar{width:280px;min-width:280px;background:#f5f5f4;border-right:1px solid #e7e5e4;display:flex;flex-direction:column;transition:all .25s ease;overflow:hidden;z-index:20}
.sidebar.closed{width:0;min-width:0;border-right:none}
.logo{display:flex;align-items:center;gap:10px;padding:20px 20px 12px}
.logo-icon{font-size:26px;color:#a16207;font-weight:700}
.logo-text{font-size:18px;font-weight:700;letter-spacing:-.02em;color:#292524}

.search-trigger{display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:8px 12px;background:#fff;border:1px solid #e7e5e4;border-radius:8px;cursor:pointer;font-size:13px;color:#a8a29e;transition:all .15s}
.search-trigger:hover{border-color:#d6d3d1}
.search-trigger kbd{margin-left:auto;font-size:11px;padding:2px 6px;background:#f5f5f4;border:1px solid #e7e5e4;border-radius:4px;color:#a8a29e;font-family:inherit}

.fav-filter{display:flex;align-items:center;gap:8px;margin:0 12px 4px;padding:7px 12px;background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer;font-size:13px;color:#78716c;transition:all .15s}
.fav-filter:hover{background:#e7e5e4}
.fav-filter.active{background:#fef3c7;border-color:#fbbf24;color:#92400e}
.badge{margin-left:auto;font-size:11px;background:#fbbf24;color:#78350f;padding:1px 7px;border-radius:10px;font-weight:600}

.sidebar-section{flex:1;overflow:auto;padding:4px 0}
.section-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 4px}
.section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#a8a29e}
.icon-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:6px;color:#78716c;display:inline-flex;align-items:center;transition:all .15s}
.icon-btn:hover{background:#e7e5e4;color:#44403c}

.new-project-form{display:flex;gap:4px;padding:4px 12px 8px;align-items:center}
.new-project-form input{flex:1;padding:6px 10px;border:1px solid #d6d3d1;border-radius:6px;font-size:13px;outline:none;background:#fff}
.small-btn{padding:5px 10px;background:#292524;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600}
.small-btn:hover{background:#44403c}
.small-btn-ghost{padding:4px 6px;background:none;border:none;cursor:pointer;color:#a8a29e;font-size:14px}

.project-list{padding:0 8px}
.project-item{display:flex;align-items:center;gap:4px;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:14px;color:#44403c;transition:all .12s;margin-bottom:1px;user-select:none}
.project-item:hover{background:#e7e5e4}
.project-item.active{background:#e7e5e4;font-weight:500}
.project-item .file-count{font-size:11px;color:#a8a29e;margin-left:auto;margin-right:2px}
.project-item .tiny-btn{background:none;border:none;cursor:pointer;padding:2px;color:#a8a29e;display:inline-flex;opacity:0;transition:opacity .15s}
.project-item:hover .tiny-btn{opacity:.6}
.project-item .tiny-btn:hover{opacity:1;color:#dc2626}

.file-list{padding-left:12px}
.file-item{display:flex;align-items:center;gap:6px;padding:5px 8px 5px 16px;border-radius:6px;cursor:pointer;font-size:13px;color:#57534e;transition:all .12s;margin-bottom:1px}
.file-item:hover{background:#e7e5e4}
.file-item.active{background:#fef3c7;color:#292524;font-weight:500}
.file-item .file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-item .fav-btn{background:none;border:none;cursor:pointer;padding:2px;display:inline-flex;opacity:.3;transition:opacity .15s}
.file-item .fav-btn.is-fav{opacity:1}
.file-item:hover .fav-btn{opacity:.7}
.file-item .fav-btn:hover{opacity:1}
.empty-hint{font-size:12px;color:#a8a29e;padding:8px 20px;font-style:italic}

.user-section{border-top:1px solid #e7e5e4;padding:8px;position:relative}
.user-btn{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .15s}
.user-btn:hover{background:#e7e5e4}
.user-avatar{font-size:20px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#e7e5e4;border-radius:8px}
.user-name{font-size:13px;font-weight:600;color:#292524}
.user-role{font-size:11px;color:#a8a29e}
.user-menu{position:absolute;bottom:calc(100% + 4px);left:8px;right:8px;background:#fff;border:1px solid #e7e5e4;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.1);overflow:hidden;z-index:50}
.user-menu-item{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;font-size:13px;transition:background .1s}
.user-menu-item:hover{background:#f5f5f4}

.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{display:flex;align-items:center;gap:8px;padding:10px 20px;border-bottom:1px solid #e7e5e4;background:#fff;min-height:52px;flex-shrink:0}
.breadcrumb{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.breadcrumb .project-name{font-size:13px;color:#78716c;white-space:nowrap}
.breadcrumb .sep{color:#d6d3d1;font-size:13px}
.breadcrumb .file-name{font-size:14px;font-weight:600;color:#292524;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}

.action-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;background:#fff;border:1px solid #e7e5e4;border-radius:7px;cursor:pointer;font-size:12px;color:#57534e;font-weight:500;transition:all .15s;white-space:nowrap}
.action-btn:hover{background:#f5f5f4;border-color:#d6d3d1}
.action-btn-primary{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;background:#292524;border:1px solid #292524;border-radius:7px;cursor:pointer;font-size:12px;color:#fff;font-weight:600;transition:all .15s;white-space:nowrap}
.action-btn-primary:hover{background:#44403c}
.action-btn-danger{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;background:#fff;border:1px solid #fecaca;border-radius:7px;cursor:pointer;font-size:12px;color:#dc2626;transition:all .15s}
.action-btn-danger:hover{background:#fef2f2}

.content{flex:1;overflow:auto;position:relative}

.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:40px;text-align:center}
.empty-icon{font-size:64px;color:#d6d3d1;margin-bottom:16px}
.empty-state h2{font-size:22px;font-weight:700;color:#44403c;margin-bottom:8px}
.empty-state p{font-size:14px;color:#a8a29e;margin-bottom:24px}
.empty-actions{display:flex;gap:10px}
.empty-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:#292524;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600}
.empty-btn:hover{background:#44403c}
.empty-btn-outline{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:#fff;color:#292524;border:1px solid #d6d3d1;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500}
.empty-btn-outline:hover{background:#f5f5f4}

.viewer-wrap{max-width:820px;margin:0 auto;padding:32px 40px 60px}
.file-meta{margin-bottom:16px;display:flex;align-items:center;gap:12px}
.file-meta .fav-btn-lg{background:none;border:none;cursor:pointer;padding:4px;display:inline-flex}
.file-meta .time{font-size:12px;color:#a8a29e}

.editor-wrap{display:flex;height:100%;gap:0}
.editor-pane{flex:1;display:flex;flex-direction:column;border-right:1px solid #e7e5e4;min-width:0}
.preview-pane{flex:1;display:flex;flex-direction:column;overflow:auto;min-width:0}
.pane-label{padding:8px 16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#a8a29e;border-bottom:1px solid #e7e5e4;background:#fafaf9}
.editor-textarea{flex:1;padding:20px 24px;border:none;outline:none;resize:none;font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.7;color:#292524;background:#fff}

.md-render{line-height:1.8;font-size:15.5px;color:#292524;padding:20px 24px}
.md-render h1{font-size:2em;font-weight:700;margin:.8em 0 .4em;padding-bottom:.3em;border-bottom:2px solid #e7e5e4;color:#1c1917;line-height:1.3}
.md-render h2{font-size:1.5em;font-weight:700;margin:1.2em 0 .3em;color:#292524;line-height:1.35}
.md-render h3{font-size:1.25em;font-weight:600;margin:1em 0 .3em;color:#44403c}
.md-render h4,.md-render h5,.md-render h6{font-size:1.1em;font-weight:600;margin:.8em 0 .2em;color:#57534e}
.md-render p{margin:.6em 0}
.md-render strong{font-weight:700;color:#1c1917}
.md-render em{font-style:italic}
.md-render del{text-decoration:line-through;color:#a8a29e}
.md-render a{color:#a16207;text-decoration:underline;text-underline-offset:3px}
.md-render a:hover{color:#854d0e}
.md-render blockquote{border-left:3px solid #d6d3d1;padding:4px 0 4px 16px;margin:12px 0;color:#78716c;font-style:italic}
.md-render hr{border:none;border-top:1px solid #e7e5e4;margin:1.5em 0}
.md-render ul,.md-render ol{padding-left:24px;margin:8px 0}
.md-render li{margin:4px 0}
.md-render .md-check{list-style:none;margin-left:-20px}
.md-render .md-check::before{content:"☐ ";color:#a8a29e}
.md-render .md-check.checked::before{content:"☑ ";color:#16a34a}
.md-render pre{background:#1c1917;color:#e7e5e4;padding:16px 20px;border-radius:10px;overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:.88em;line-height:1.6;margin:12px 0}
.md-render code{background:#f5f5f4;color:#a16207;padding:2px 7px;border-radius:5px;font-family:'JetBrains Mono',monospace;font-size:.88em}
.md-render pre code{background:none;color:inherit;padding:0}
.md-render table{border-collapse:collapse;margin:12px 0;width:100%}
.md-render th,.md-render td{border:1px solid #e7e5e4;padding:8px 12px;text-align:left}
.md-render th{background:#f5f5f4;font-weight:600}

.drag-overlay{position:absolute;inset:0;background:rgba(254,243,199,.92);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:30;color:#92400e;border:3px dashed #fbbf24;border-radius:12px;margin:12px}
.drag-overlay p{font-size:18px;margin-top:12px;font-weight:600}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(2px);display:flex;align-items:flex-start;justify-content:center;padding-top:15vh;z-index:100}
.search-modal{width:100%;max-width:560px;background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.15);overflow:hidden;margin:0 16px}
.search-input-wrap{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #e7e5e4;color:#78716c}
.search-input-wrap input{flex:1;border:none;outline:none;font-size:15px;color:#292524;background:transparent}
.search-results{max-height:320px;overflow:auto}
.search-empty{padding:24px;text-align:center;color:#a8a29e;font-size:14px}
.search-result{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;transition:background .1s;border-bottom:1px solid #f5f5f4}
.search-result:hover{background:#fafaf9}
.search-result .name{font-size:14px;font-weight:500;color:#292524}
.search-result .project{font-size:12px;color:#a8a29e}

.user-modal{width:100%;max-width:500px;background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.15);overflow:hidden;margin:0 16px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e7e5e4}
.modal-header h3{font-size:16px;font-weight:700}
.user-list{max-height:300px;overflow:auto}
.user-list-item{display:flex;align-items:center;gap:10px;padding:10px 20px;border-bottom:1px solid #f5f5f4}
.user-list-item .info{flex:1}
.user-list-item .uname{font-size:14px;font-weight:500}
.user-list-item .urole{font-size:12px;color:#a8a29e}
.modal-footer{padding:12px 20px;border-top:1px solid #e7e5e4;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.modal-footer input,.modal-footer select{padding:6px 10px;border:1px solid #d6d3d1;border-radius:6px;font-size:13px;outline:none;background:#fff;flex:1;min-width:80px}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#292524;color:#fff;padding:10px 24px;border-radius:10px;font-size:13px;font-weight:500;box-shadow:0 4px 20px rgba(0,0,0,.15);z-index:200;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

.mobile-menu{display:none}
@media(max-width:768px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:100;box-shadow:4px 0 20px rgba(0,0,0,.1)}
  .sidebar.closed{transform:translateX(-100%)}
  .mobile-menu{display:inline-flex!important}
  .action-btn .label,.action-btn-primary .label{display:none}
  .viewer-wrap{padding:20px 16px 40px}
  .editor-wrap{flex-direction:column}
  .editor-pane{border-right:none;border-bottom:1px solid #e7e5e4;max-height:50%}
}