* {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
           -webkit-tap-highlight-color: transparent;
       }

       html, body {
           height: 100%;
           height: 100dvh;
           overflow: hidden;
           background: #eef0f3;
           font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
           display: flex;
           flex-direction: column;
           user-select: none;
           -webkit-user-select: none;
       }

       .top-nav {
           height: 50px;
           background: #ffffff;
           border-bottom: 1px solid #d1d5db;
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 0 16px;
           padding-left: max(16px, env(safe-area-inset-left, 16px));
           padding-right: max(16px, env(safe-area-inset-right, 16px));
           z-index: 30;
           flex-shrink: 0;
           gap: 10px;
       }

       .nav-brand {
           font-size: 1.05rem;
           font-weight: 700;
           color: #111827;
           display: flex;
           align-items: center;
           gap: 6px;
           white-space: nowrap;
       }

       .brand-logo {
           width: 25px;
           height: 25px;
           flex-shrink: 0;
           display: block;
       }

       .nav-tabs {
           display: flex;
           gap: 1px;
           background: #e5e7eb;
           padding: 1px;
           border: 1px solid #d1d5db;
           overflow-x: auto;
           max-width: 65%;
       }

       .nav-tab {
           border: none;
           outline: none;
           background: #ffffff;
           padding: 6px 12px;
           font-size: 0.82rem;
           font-weight: 600;
           color: #4b5563;
           cursor: pointer;
           transition: background 0.15s, color 0.15s;
           white-space: nowrap;
       }

           .nav-tab:hover {
               background: #f9fafb;
               color: #111827;
           }

           .nav-tab.active {
               background: #111827;
               color: #ffffff;
           }


       .nav-right-group {
           display: flex;
           align-items: center;
           gap: 8px;
       }

       /* 语言切换器 */
       .lang-switch-group {
           display: flex;
           background: #f1f5f9;
           padding: 2px;
           border-radius: 14px;
           border: 1px solid #cbd5e1;
       }

       .lang-switch-btn {
           border: none;
           outline: none;
           background: transparent;
           font-size: 0.75rem;
           font-weight: 700;
           padding: 3px 8px;
           border-radius: 12px;
           color: #64748b;
           cursor: pointer;
           transition: all 0.15s ease;
       }

           .lang-switch-btn.active {
               background: #ffffff;
               color: #0f172a;
               box-shadow: 0 1px 2px rgba(0,0,0,0.1);
           }



       .nav-burger-btn {
           display: none;
           width: 36px;
           height: 36px;
           background: #f1f5f9;
           border: none;
           outline: none;
           border-radius: 8px;
           align-items: center;
           justify-content: center;
           cursor: pointer;
       }




       .main-layout {
           display: flex;
           flex: 1;
           height: calc(100% - 50px);
           height: calc(100dvh - 50px);
           position: relative;
           overflow: hidden;
       }

       .drawer-backdrop {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background: rgba(0, 0, 0, 0.5);
           z-index: 45;
           backdrop-filter: blur(2px);
       }

           .drawer-backdrop.active {
               display: block;
           }

       .sidebar {
           width: 290px;
           background: #ffffff;
           border-right: 1px solid #d1d5db;
           display: flex;
           flex-direction: column;
           height: 100%;
           flex-shrink: 0;
           z-index: 25;
           transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
       }

       .sidebar-header {
           display: none;
           align-items: center;
           justify-content: space-between;
           padding: 12px 16px;
           background: #f8fafc;
           border-bottom: 1px solid #e2e8f0;
       }

       .sidebar-header-title {
           font-weight: 700;
           font-size: 0.95rem;
           color: #0f172a;
       }

       .sidebar-close-btn {
           border: 1px solid #cbd5e1;
           background: #ffffff;
           width: 30px;
           height: 30px;
           font-size: 0.95rem;
           font-weight: 700;
           cursor: pointer;
           border-radius: 6px;
           color: #475569;
       }

       .sidebar-scroll-content {
           flex: 1;
           overflow-y: auto;
           padding: 16px;
           display: flex;
           flex-direction: column;
           gap: 13px;
       }

       .panel-section {
           display: flex;
           flex-direction: column;
           gap: 5px;
       }

       .panel-label {
           font-size: 0.83rem;
           font-weight: 700;
           color: #111827;
           display: flex;
           align-items: center;
           justify-content: space-between;
       }

       .sidebar select, .sidebar input[type="text"] {
           width: 100%;
           padding: 8px 10px;
           border: 1px solid #9ca3af;
           background: #ffffff;
           font-size: 0.88rem;
           color: #111827;
           outline: none;
           border-radius: 4px;
       }

       .pill-toggle-group {
           display: flex;
           background: #f1f5f9;
           padding: 3px;
           border-radius: 20px;
           gap: 2px;
           border: 1px solid #e2e8f0;
       }

       .pill-toggle-btn {
           flex: 1;
           border: none;
           outline: none;
           background: transparent;
           padding: 5px 6px;
           font-size: 0.76rem;
           font-weight: 600;
           color: #64748b;
           cursor: pointer;
           border-radius: 16px;
           display: inline-flex;
           align-items: center;
           justify-content: center;
           gap: 4px;
           white-space: nowrap;
       }

           .pill-toggle-btn.active {
               background: #ffffff;
               color: #4338ca;
               box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
           }

       .pill-dot {
           width: 5px;
           height: 5px;
           border-radius: 50%;
           background: #4f46e5;
           display: inline-block;
       }

       .action-group {
           flex-shrink: 0;
           display: flex;
           flex-direction: column;
           gap: 8px;
           padding: 12px 16px;
           background: #ffffff;
           border-top: 1px solid #e5e7eb;
       }

       .btn {
           width: 100%;
           padding: 9px 12px;
           font-size: 0.88rem;
           font-weight: 700;
           cursor: pointer;
           display: inline-flex;
           align-items: center;
           justify-content: center;
           gap: 6px;
           border: 1px solid #111827;
           border-radius: 4px;
       }

       .btn-add-page {
           background: #f0fdf4;
           color: #166534;
           border-color: #86efac;
       }

       .btn-secondary {
           background: #ffffff;
           color: #111827;
       }

       .btn-primary {
           background: #111827;
           color: #ffffff;
       }

       /* 画板与工作区 */
       .center-column {
           flex: 1;
           height: 100%;
           display: flex;
           flex-direction: column;
           overflow: hidden;
           position: relative;
           background: #e5e7eb;
       }

       .zoom-wrapper {
           position: relative;
           flex: 1;
           height: calc(100% - 36px);
           overflow: hidden;
           cursor: grab;
           touch-action: none;
       }

           .zoom-wrapper.is-dragging {
               cursor: grabbing !important;
           }

       .print-container {
           background: #ffffff;
           box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
           position: absolute;
           top: 0;
           left: 0;
           transform-origin: 0 0;
           pointer-events: none;
       }

       canvas {
           display: block;
           width: 100%;
           height: 100%;
           background: #ffffff;
       }

       /* 底部状态条 */
       .bottom-bar {
           height: 36px;
           background: #f1f3f5;
           border-top: 1px solid #d1d5db;
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 0 12px;
           font-size: 0.8rem;
           color: #4b5563;
           z-index: 20;
           flex-shrink: 0;
           width: 100%;
       }

       .view-mode-group {
           display: flex;
           align-items: center;
           gap: 6px;
       }

       .view-mode-btn {
           width: 26px;
           height: 26px;
           border: 1px solid transparent;
           background: transparent;
           border-radius: 4px;
           display: flex;
           align-items: center;
           justify-content: center;
           cursor: pointer;
           color: #475569;
       }

           .view-mode-btn.active {
               background: #cbd5e1;
               border-color: #94a3b8;
               color: #0f172a;
           }

           .view-mode-btn svg {
               width: 16px;
               height: 16px;
               fill: currentColor;
           }

       .zoom-slider-group {
           display: flex;
           align-items: center;
           gap: 8px;
       }

       .zoom-btn {
           background: none;
           border: none;
           font-size: 1.1rem;
           font-weight: 700;
           color: #475569;
           cursor: pointer;
           width: 26px;
           height: 26px;
           display: flex;
           align-items: center;
           justify-content: center;
       }

       .zoom-slider {
           -webkit-appearance: none;
           width: 110px;
           height: 4px;
           background: #94a3b8;
           border-radius: 2px;
       }

           .zoom-slider::-webkit-slider-thumb {
               -webkit-appearance: none;
               width: 10px;
               height: 16px;
               background: #334155;
               cursor: pointer;
           }

       .zoom-val-text {
           font-size: 0.8rem;
           min-width: 44px;
           font-weight: 600;
           color: #334155;
           text-align: right;
       }

       .zoom-fit-btn {
           background: #ffffff;
           border: 1px solid #cbd5e1;
           padding: 3px 8px;
           border-radius: 4px;
           font-size: 0.76rem;
           font-weight: 600;
           cursor: pointer;
       }

       /* 侧边缩略图栏 */
       .thumbs-sidebar {
           width: 220px;
           background: #e9ecf0;
           border-left: 1px solid #d1d5db;
           display: flex;
           flex-direction: column;
           height: 100%;
           flex-shrink: 0;
       }

       .thumbs-list {
           flex: 1;
           overflow-y: auto;
           padding: 14px 12px;
           display: flex;
           flex-direction: column;
           gap: 14px;
       }

       .thumb-item {
           display: flex;
           align-items: flex-start;
           gap: 6px;
           cursor: pointer;
           position: relative;
       }

       .thumb-idx {
           font-size: 0.8rem;
           color: #4b5563;
           font-weight: 600;
           width: 16px;
           text-align: right;
           padding-top: 2px;
       }

       .thumb-item.active .thumb-idx {
           color: #800000;
           font-weight: 700;
       }

       .thumb-box {
           flex: 1;
           background: #ffffff;
           border: 1px solid #cbd5e1;
           padding: 2px;
           display: flex;
           align-items: center;
           justify-content: center;
           position: relative;
           overflow: hidden;
       }

       .thumb-item.active .thumb-box {
           border: 2px solid #800000;
       }

       .thumb-svg-wrapper {
           width: 100%;
           height: auto;
           display: flex;
       }

           .thumb-svg-wrapper svg {
               width: 100%;
               height: 100%;
           }

       .thumb-del-btn {
           position: absolute;
           top: -6px;
           right: -6px;
           width: 20px;
           height: 20px;
           border-radius: 50%;
           background: #ef4444;
           color: #ffffff;
           border: 1px solid #ffffff;
           font-size: 11px;
           display: none;
           align-items: center;
           justify-content: center;
           cursor: pointer;
       }

       .thumb-box:hover .thumb-del-btn, .thumb-item.active .thumb-del-btn {
           display: flex;
       }

       .overview-view {
           width: 100%;
           height: calc(100% - 36px);
           overflow-y: auto;
           padding: 20px;
           display: none;
           align-content: flex-start;
           flex-wrap: wrap;
           gap: 20px 16px;
           background: #d8dbe0;
       }

       .overview-card {
           display: flex;
           flex-direction: column;
           gap: 6px;
           cursor: pointer;
       }

       .overview-card-box {
           background: #ffffff;
           border: 1px solid #94a3b8;
           padding: 4px;
       }

       .overview-card.active .overview-card-box {
           border: 3px solid #800000;
       }

       .overview-card-num {
           font-size: 0.8rem;
           color: #475569;
           font-weight: 600;
       }

       @media screen and (max-width: 860px) {
           .nav-tabs, .thumbs-sidebar {
               display: none;
           }

           .nav-burger-btn {
               display: flex;
           }

           .sidebar {
               position: fixed;
               top: 0;
               right: 0;
               bottom: 0;
               width: 85%;
               max-width: 320px;
               height: 100%;
               z-index: 50;
               transform: translateX(100%);
           }

               .sidebar.drawer-open {
                   transform: translateX(0);
               }

           .sidebar-header {
               display: flex !important;
           }

           .zoom-slider {
               display: none;
           }
       }