:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Microsoft YaHei,sans-serif;line-height:1.5;font-weight:400;color:#333;background-color:#f5f5f5}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}.app-container{display:flex;flex-direction:column;height:100vh}.top-nav{display:flex;align-items:center;justify-content:space-between;height:48px;background:#fff;border-bottom:1px solid #e0e0e0;padding:0 16px;flex-shrink:0}.top-nav-left{display:flex;align-items:center;gap:8px}.nav-tabs{display:flex;align-items:center;gap:10px;margin-left:16px}.nav-tab{border:none;background:transparent;color:#666;padding:5px 12px;border-radius:999px;cursor:pointer;font-size:12px}.nav-tab.active{background:#1890ff;color:#fff}.nav-tab:hover:not(.active){color:#1890ff}.nav-link{font-size:13px;color:#999;text-decoration:none;margin-left:12px;padding-left:14px;border-left:1px solid #e5e7eb;transition:color .2s}.nav-link:hover{color:#1890ff}.top-nav-right{display:flex;align-items:center;gap:8px}.export-dropdown{position:relative}.export-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:120px;padding:6px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 8px 24px #0f172a1f;z-index:20}.export-menu button{width:100%;padding:8px 10px;border:none;border-radius:6px;background:transparent;color:#333;font-size:12px;text-align:left;cursor:pointer}.export-menu button:hover{background:#f0f7ff;color:#1890ff}.nav-btn{padding:6px 12px;font-size:12px;border:1px solid #d9d9d9;border-radius:4px;background:#fff;cursor:pointer;color:#333}.nav-btn:hover{border-color:#1890ff;color:#1890ff}.nav-btn.primary{background:#1890ff;color:#fff;border-color:#1890ff}.nav-btn.primary:hover{background:#40a9ff}.main-content{display:flex;flex:1;overflow:hidden}.left-panel{width:280px;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0}.panel-section{padding:16px;border-bottom:1px solid #f0f0f0}.panel-section-title{font-size:13px;font-weight:600;color:#333;margin-bottom:12px}.icp-card{margin:auto 14px 14px;padding:10px 12px;display:flex;align-items:center;justify-content:center;gap:8px;color:#8a6d3b;font-size:12px;line-height:1;text-decoration:none;background:linear-gradient(135deg,#fffaf0,#fff4dc);border:1px solid #f2dfb0;border-radius:999px;box-shadow:0 4px 12px #a67c3814;flex-shrink:0;transition:border-color .2s,box-shadow .2s,transform .2s}.icp-card:hover{color:#8a6d3b;border-color:#e3bf72;box-shadow:0 6px 16px #a67c3824;transform:translateY(-1px)}.icp-dot{width:6px;height:6px;border-radius:50%;background:#d6a64f;box-shadow:0 0 0 3px #d6a64f24}.panel-item{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.panel-item:last-child{margin-bottom:0}.panel-item-label{font-size:12px;color:#666}.panel-item-value{font-size:12px;color:#333;font-weight:500}.grid-style-selector{display:flex;gap:8px}.grid-style-btn{width:48px;height:48px;border:2px solid #e0e0e0;border-radius:6px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.grid-style-btn:hover{border-color:#1890ff}.grid-style-btn.active{border-color:#1890ff;background:#e6f7ff}.grid-style-btn:disabled{cursor:not-allowed;opacity:.45}.grid-style-btn svg{width:32px;height:32px}.slider-control{display:flex;flex-direction:column;gap:8px}.slider-header{display:flex;justify-content:space-between;align-items:center}.slider-label{font-size:12px;color:#666}.slider-value{font-size:12px;color:#333;font-weight:500;min-width:30px;text-align:right}.color-picker{display:flex;align-items:center;gap:8px}.color-swatch{width:24px;height:24px;border-radius:4px;border:1px solid #d9d9d9;cursor:pointer}.color-value{font-size:12px;color:#333;font-family:monospace}.preview-area{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;background:#e8e8e8;overflow:auto;padding:20px;position:relative}.preview-toolbar{position:sticky;top:0;z-index:5;align-self:flex-end;display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:6px 10px;background:#ffffffeb;border:1px solid #e5e7eb;border-radius:999px;box-shadow:0 4px 12px #0f172a14;font-size:12px;color:#666}.preview-toolbar select{border:none;outline:none;background:transparent;color:#333;font-size:12px;cursor:pointer}.paper-viewport{margin:0 auto;overflow:visible;flex-shrink:0}.paper-stack{width:595px;display:flex;flex-direction:column;gap:20px;align-items:center}.paper-preview{width:595px;height:842px;background:#fff;box-shadow:0 2px 8px #00000026;position:relative;flex-shrink:0;margin:0 auto;overflow:hidden}.paper-preview.empty{display:flex;align-items:center;justify-content:center;color:#999;font-size:14px}.empty-preview{height:100%;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;color:#999;font-size:14px}.empty-preview strong{color:#333;font-size:18px}@media print{.paper-stack{gap:0}.paper-preview{box-shadow:none;margin:0;page-break-after:always;break-after:page}.paper-preview:last-child{page-break-after:auto;break-after:auto}}.right-panel{width:260px;background:#fff;border-left:1px solid #e0e0e0;display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0}.input-section{padding:16px;border-bottom:1px solid #f0f0f0}.input-section h3{font-size:13px;font-weight:600;color:#333;margin-bottom:12px}.input-textarea{width:100%;min-height:80px;padding:10px;font-size:14px;line-height:1.6;border:1px solid #d9d9d9;border-radius:4px;resize:vertical;transition:border-color .2s;font-family:inherit}.input-textarea:focus{outline:none;border-color:#1890ff}.input-stats{display:flex;gap:16px;margin-top:8px;font-size:11px;color:#999}.input-stats span{color:#666}.input-tip{margin-top:10px;padding:8px 10px;background:#f8fafc;border:1px solid #edf2f7;border-radius:6px;font-size:11px;color:#64748b;line-height:1.5}.property-list{padding:0}.property-item{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer}.property-item:hover{background:#fafafa}.property-item.disabled{cursor:not-allowed;opacity:.55}.property-label{font-size:13px;color:#333}.property-value{font-size:12px;color:#999;display:flex;align-items:center;gap:4px}.property-icon{width:8px;height:8px;border:solid #ccc;border-width:0 1px 1px 0;transform:rotate(-45deg)}.toggle-switch{width:36px;height:20px;background:#d9d9d9;border-radius:10px;position:relative;cursor:pointer;transition:background .3s}.toggle-switch.active{background:#1890ff}.toggle-switch:after{content:"";position:absolute;width:16px;height:16px;background:#fff;border-radius:50%;top:2px;left:2px;transition:transform .3s;box-shadow:0 1px 3px #0003}.toggle-switch.active:after{transform:translate(16px)}.template-summary{font-size:12px;color:#666;line-height:1.6;margin-bottom:6px}.pinyin-grid-item{display:flex;flex-direction:column;align-items:center}.export-mode .pinyin-indicator{display:none!important}@media (max-width: 1200px){.left-panel{width:240px}.right-panel{width:220px}}@media (max-width: 900px){.main-content{flex-direction:column}.left-panel,.right-panel{width:100%;max-height:200px;border-right:none;border-left:none;border-bottom:1px solid #e0e0e0}.preview-area{min-height:400px}.paper-preview{width:100%;min-height:auto;padding:40px}}