:root{--bg: #f9fbfd;--canvas: #f0f2f5;--surface: #ffffff;--text: #1f1f1f;--muted: #5f6368;--border: #dadce0;--hover: #e8eaed;--active: #d3e3fd;--accent: #0b57d0;--accent-soft: #c2e7ff;--toolbar: #edf2fa;--page-shadow: 0 1px 3px rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Google Sans,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}button,input,select{font:inherit;color:inherit}.app{display:flex;flex-direction:column;height:100%}.topbar{display:flex;align-items:center;gap:10px;padding:8px 16px 4px;background:var(--bg)}.logo{display:flex;align-items:center;flex-shrink:0}.icon-btn{border:none;background:none;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:20px;flex-shrink:0}.icon-btn:hover{background:var(--hover)}.title-area{display:flex;flex-direction:column;min-width:0;flex:1}.doc-title{border:1px solid transparent;border-radius:4px;background:transparent;font-size:18px;padding:2px 6px;width:min(100%,420px)}.doc-title:hover{border-color:var(--border)}.doc-title:focus{outline:none;border-color:var(--accent);background:#fff}.menubar{display:flex;gap:2px;flex-wrap:wrap}.menu{position:relative}.menu-btn{border:none;background:none;padding:4px 8px;border-radius:4px;font-size:14px;cursor:pointer}.menu-btn:hover,.menu-btn.open{background:var(--hover)}.dropdown{position:absolute;top:100%;left:0;z-index:50;min-width:270px;background:var(--surface);border-radius:6px;padding:6px 0;box-shadow:0 2px 6px 2px #3c404326,0 1px 2px #3c40434d}.dropdown-item{display:flex;justify-content:space-between;gap:24px;width:100%;border:none;background:none;text-align:left;padding:8px 18px;font-size:14px;cursor:pointer}.dropdown-item:hover{background:var(--hover)}.hint{color:var(--muted);font-size:13px}.save-state{color:var(--muted);font-size:13px;white-space:nowrap}.share-btn{border:none;background:var(--accent-soft);color:#001d35;font-weight:500;padding:10px 20px;border-radius:20px;cursor:pointer;white-space:nowrap}.share-btn:hover{box-shadow:0 1px 3px #00000040}.toolbar{display:flex;align-items:center;gap:2px;margin:4px 12px 6px;padding:4px 10px;background:var(--toolbar);border-radius:24px;overflow-x:auto;scrollbar-width:thin;flex-shrink:0}.tb-btn{position:relative;border:none;background:none;min-width:30px;height:30px;padding:0 6px;border-radius:4px;cursor:pointer;font-size:15px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.tb-btn:hover{background:var(--hover)}.tb-btn.on{background:var(--active);color:#041e49}.tb-select{border:none;background:transparent;height:30px;border-radius:4px;padding:0 4px;font-size:14px;cursor:pointer;flex-shrink:0}.tb-select:hover{background:var(--hover)}.tb-select.style{width:140px}.tb-select.font{width:130px}.tb-select.size{width:52px;text-align:center;border:1px solid #747775}.size-ctrl{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}.sep{width:1px;height:20px;background:#c4c7c5;margin:0 6px;flex-shrink:0}.color input[type=color]{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;padding:0;border:none;opacity:0;cursor:pointer;background:none}.color-a,.color-hl{pointer-events:none;padding-bottom:2px}.color-a{font-weight:600;border-bottom:4px solid #000;line-height:1.1}.color-hl{border-bottom:4px solid #fff475;line-height:1.1}.find-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 12px 6px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px}.find-bar input{border:1px solid var(--border);border-radius:4px;padding:6px 8px;min-width:140px}.find-bar button{border:1px solid var(--border);background:#fff;border-radius:16px;padding:6px 14px;cursor:pointer}.find-bar button:hover{background:var(--hover)}.find-bar .close{border:none;margin-left:auto}.find-msg{color:var(--muted);font-size:13px}.body{flex:1;display:flex;min-height:0;position:relative}.sidebar{width:260px;flex-shrink:0;padding:8px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;background:var(--bg)}.new-doc{display:flex;align-items:center;gap:10px;border:none;cursor:pointer;background:var(--surface);padding:14px 18px;border-radius:16px;font-weight:500;box-shadow:0 1px 2px #3c40434d,0 1px 3px 1px #3c404326}.new-doc:hover{background:#f6f8fc}.plus{font-size:22px;color:var(--accent);line-height:1}.search{border:none;background:var(--toolbar);padding:10px 14px;border-radius:20px}.search:focus{outline:2px solid var(--accent);background:#fff}.doc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.doc-list li{display:flex;align-items:center;border-radius:0 20px 20px 0}.doc-list li:hover{background:var(--hover)}.doc-list li.sel{background:var(--active)}.doc-item{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:none;background:none;text-align:left;padding:8px 10px;cursor:pointer}.doc-meta{display:flex;flex-direction:column;min-width:0}.doc-name{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.doc-date{font-size:12px;color:var(--muted)}.del{border:none;background:none;cursor:pointer;opacity:0;padding:6px 10px;font-size:14px;min-width:36px;min-height:36px}.doc-list li:hover .del,.doc-list li.sel .del{opacity:.7}.del:hover{opacity:1!important}.empty{color:var(--muted);font-size:13px;padding:10px}.scrim,.menu-toggle{display:none}.canvas{flex:1;overflow:auto;background:var(--canvas);border-radius:16px 0 0;padding:24px 16px 60px}.page-wrap{display:flex;justify-content:center}.page{width:816px;max-width:100%;min-height:1056px;background:#fff;box-shadow:var(--page-shadow);padding:96px;outline:none;font-family:Arial,sans-serif;font-size:11pt;line-height:1.5;color:#000;word-wrap:break-word}.page p{margin:0 0 6pt}.page h1{font-size:26pt;font-weight:400;margin:0 0 6pt}.page h2{font-size:20pt;font-weight:400;margin:18pt 0 6pt}.page h3{font-size:16pt;font-weight:400;margin:16pt 0 4pt;color:#434343}.page blockquote{border-left:3px solid #c4c7c5;margin:8pt 0;padding:2pt 14pt;color:#444}.page pre{background:#f1f3f4;padding:10px 12px;border-radius:4px;font-family:Courier New,monospace;white-space:pre-wrap}.page ul,.page ol{margin:0 0 6pt;padding-left:28px}.page a{color:#15c}.page img{max-width:100%}.page hr{border:none;border-top:1px solid #9aa0a6;margin:12pt 0}.page table,.doc-table{border-collapse:collapse;width:100%;margin:6pt 0}.page td,.page th{border:1px solid #9aa0a6;padding:6px 8px;min-width:40px;vertical-align:top}.statusbar{display:flex;gap:18px;padding:6px 18px;font-size:12px;color:var(--muted);background:var(--bg);border-top:1px solid var(--border)}.spacer{flex:1}@media (max-width: 900px){.menu-toggle{display:inline-flex;align-items:center;justify-content:center}.sidebar{position:absolute;top:0;bottom:0;left:0;z-index:40;transform:translate(-100%);transition:transform .2s,visibility .2s;box-shadow:2px 0 8px #00000026;visibility:hidden}.sidebar.open{transform:none;visibility:visible}.scrim{display:block;position:absolute;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:30}.canvas{border-radius:0;padding:12px 8px 40px}.page{padding:40px 28px;min-height:70vh}}@media (max-width: 600px){.topbar{padding:6px 8px 2px;gap:6px}.save-state{display:none}.share-btn{padding:8px 12px;font-size:13px}.doc-title{font-size:16px;min-height:36px}.toolbar{margin:4px 6px}.tb-btn{min-width:40px;height:40px}.toolbar .tb-select{height:40px;min-height:40px}.menu-btn{padding:8px}.page{padding:28px 18px}.statusbar{gap:10px;padding:6px 10px}.statusbar span:last-child{display:none}}@media print{.topbar,.toolbar,.sidebar,.statusbar,.find-bar,.scrim{display:none!important}.canvas{background:none;padding:0;overflow:visible}.page{box-shadow:none;padding:0;width:auto;min-height:0}.app,.body{display:block;height:auto}}