:root{--primary-color:#6366f1;--primary-hover:#4f46e5;--bg-main:#f8fafc;--bg-card:#fff;--text-main:#1e293b;--text-muted:#64748b;--border-color:#e2e8f0;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);--radius-md:12px;--radius-lg:16px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-main);font-family:Outfit,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5}[v-cloak]{display:none}.container{max-width:1400px;margin:0 auto;padding:20px;transition:max-width .3s}.top-nav{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;margin-bottom:20px;padding:12px 0;display:flex}.it365-link{color:var(--primary-color);background:rgba(99,102,241,.1);border-radius:8px;align-items:center;gap:6px;padding:6px 12px;font-size:1.1rem;font-weight:800;text-decoration:none;transition:all .2s;display:flex}.it365-link:hover{background:rgba(99,102,241,.2);transform:translateY(-1px)}.lang-group{white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:12px;padding-bottom:4px;display:flex;overflow-x:auto}.lang-group::-webkit-scrollbar{display:none}.lang-link{color:var(--text-muted);flex-shrink:0;font-size:.85rem;text-decoration:none;transition:color .2s}.lang-link:hover{color:var(--primary-color)}.footer-links{white-space:nowrap;scrollbar-width:none;justify-content:center;gap:16px;margin-top:12px;padding:8px 0;display:flex;overflow-x:auto}.footer-links::-webkit-scrollbar{display:none}.page-layout{gap:20px;display:block}.header-section{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--border-color);background:linear-gradient(135deg,#fff 0%,#f1f5f9 100%);grid-column:1/-1;justify-content:space-between;align-items:flex-start;margin-bottom:24px;padding:32px;display:flex}.header-left h1{-webkit-text-fill-color:transparent;background:linear-gradient(90deg,#4f46e5,#ec4899);-webkit-background-clip:text;margin-bottom:12px;font-size:2.25rem;font-weight:800}.header-left p{color:var(--text-muted);max-width:600px;font-size:1.1rem}.toolbar{border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);background:#fff;grid-column:1/-1;align-items:center;gap:12px;margin-bottom:20px;padding:16px;display:flex}.tool-group{align-items:center;gap:8px;display:flex}.workspace{grid-template-columns:320px 1fr;gap:20px;min-height:700px;display:grid}.controls-sidebar{border-radius:var(--radius-md);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);background:#fff;flex-direction:column;gap:24px;padding:24px;display:flex}.control-section-title{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:12px;font-size:.875rem;font-weight:600}.style-presets{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.preset-item{aspect-ratio:1;cursor:pointer;background:#f1f5f9;border:2px solid transparent;border-radius:8px;justify-content:center;align-items:center;transition:all .2s;display:flex}.preset-item:hover{transform:scale(1.05)}.preset-item.active{border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(99,102,241,.2)}.circle-preview{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:10px;display:flex}.canvas-container{border-radius:var(--radius-md);background-color:#e2e8f0;background-image:linear-gradient(45deg,#f1f5f9 25%,transparent 25%),linear-gradient(-45deg,#f1f5f9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f1f5f9 75%),linear-gradient(-45deg,transparent 75%,#f1f5f9 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-repeat:repeat;background-size:20px 20px;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;border:2px dashed #cbd5e1;justify-content:center;align-items:center;min-height:600px;display:flex;position:relative;overflow:auto}#canvas-wrapper{box-shadow:var(--shadow-lg);background:#fff}.drop-overlay{border:4px dashed var(--primary-color);z-index:10;pointer-events:none;opacity:0;background:rgba(99,102,241,.1);justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.canvas-container.drag-over .drop-overlay{opacity:1}.drawer-content{height:calc(100% - 100px);padding:20px;overflow-y:auto}.drawer-footer{border-top:1px solid var(--border-color);background:#f8fafc;height:100px;padding:10px}.content-section{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);background:#fff;grid-column:1/-1;margin-top:40px;padding:40px}.article-body{max-width:900px;margin:0 auto}.article-body h2{margin:32px 0 16px;font-size:1.75rem}.article-body p{color:#475569;margin-bottom:16px;line-height:1.8}.btn{cursor:pointer;border:1px solid transparent;border-radius:10px;align-items:center;gap:8px;padding:10px 20px;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary{background:var(--primary-color);color:#fff}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}.btn-outline{border-color:var(--border-color);color:var(--text-main);background:#fff}.btn-outline:hover{background:#f1f5f9}@media (max-width:800px){.container{padding:10px}.header-section{flex-direction:column;padding:20px}.header-right{width:100%;margin-top:15px;overflow:hidden}.header-right ins{width:100%!important;height:auto!important}.toolbar{flex-direction:column;align-items:stretch;gap:15px}.tool-group{justify-content:space-between;width:100%}.tool-group:last-child{display:none}.workspace{grid-template-columns:1fr}.controls-sidebar{padding:15px}.canvas-container{min-height:400px}.el-drawer{width:100%!important}.content-section{padding:20px}.article-body h2{font-size:1.4rem}}