:root{font-family:Inter,Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;color:#17212f;background:#eef2f6}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}.authShell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 24% 18%,rgba(24,105,170,.16),transparent 30%),linear-gradient(135deg,#f4f8fb,#e9eef5)}.loginCard,.statusCard{width:min(420px,100%);border:1px solid #d8e2ed;border-radius:14px;background:#ffffffeb;box-shadow:0 18px 50px #1f304429;padding:28px;display:grid;gap:14px}.loginCard h1{font-size:28px;letter-spacing:0}.loginCard p,.statusCard{color:#5d6877;line-height:1.55}.loginCard input,.adminCard input,.adminCard textarea,.userCard input,.userCard textarea{width:100%;border:1px solid #bdc9d6;border-radius:8px;background:#fff;color:#1f2833;padding:10px 11px}.shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) 420px}.workspace{grid-column:1;grid-row:1;min-width:0;min-height:100vh;padding:24px;display:flex;align-items:center;justify-content:center;position:relative}.tutorialButton{position:fixed;left:18px;top:18px;z-index:30;height:38px;border:1px solid #c5d4e2;border-radius:999px;background:#fffffff0;color:#17304a;display:inline-flex;align-items:center;gap:7px;padding:0 13px;cursor:pointer;box-shadow:0 10px 28px #18253824}.tutorialButton:hover{border-color:#8bb9dd;color:#1769aa}.compareWorkspace{width:min(100%,1180px);height:calc(100vh - 48px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.imagePane{margin:0;min-width:0;min-height:0;border:1px solid #d8e0e8;background:#f9fbfd;border-radius:10px;box-shadow:0 16px 36px #18253814;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}.imagePane.hasHelp{grid-template-rows:auto auto minmax(0,1fr)}.imagePane figcaption{min-height:46px;padding:12px 14px;border-bottom:1px solid #e5ebf1;color:#2e3b4c;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:10px}.imagePane figcaption small{color:#738091;font-size:12px;font-weight:500}.imageHelp{padding:8px 14px;border-bottom:1px solid #e5ebf1;background:#f8fbfd;color:#5f6d7e;font-size:13px;line-height:1.45}.paneBody{min-height:0;padding:16px 16px 56px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;overscroll-behavior:contain;background:linear-gradient(45deg,#f4f7fa 25%,transparent 25%),linear-gradient(-45deg,#f4f7fa 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f4f7fa 75%),linear-gradient(-45deg,transparent 75%,#f4f7fa 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.imageStage,.resultStage{position:relative;flex:0 0 auto;background:#fff;box-shadow:0 14px 34px #18253824;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}.imageStage.panning,.resultStage.panning{cursor:grabbing}.sourceImage,.resultImage{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none;object-fit:contain}.ocrBox{position:absolute;padding:0;border:1.5px solid rgba(35,119,236,.86);background:#2377ec0f;border-radius:2px;cursor:pointer}.ocrBox:hover,.ocrBox.selected{border-color:#11a36a;background:#11a36a29;box-shadow:0 0 0 2px #11a36a2e}.ocrBox.changed{border-color:#d98214;background:#d9821424}.dragBox{position:absolute;border:2px solid #16a36a;background:#16a36a2e;box-shadow:0 0 0 9999px #1769aa14;pointer-events:none}.zoomButton{position:absolute;right:14px;bottom:14px;width:38px;height:38px;border:1px solid #c9d4e0;border-radius:999px;background:#fffffff0;color:#243448;display:inline-flex;align-items:center;justify-content:center;cursor:zoom-in;box-shadow:0 8px 22px #1825382e}.resultPlaceholder{width:min(320px,100%);min-height:220px;border:1px dashed #b8c4d1;border-radius:10px;background:#ffffffbd;color:#758294;display:grid;place-items:center;text-align:center}.downloadButton,.iconButton{width:36px;min-width:36px;height:36px;border:1px solid #c8d3df;background:#fff;color:#28384b;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.captionActions,.userActions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.downloadButton.danger,.smallButton.danger{border-color:#e0b4af;background:#fff3f1;color:#a23b34}.textPanel{grid-column:2;grid-row:1;height:100vh;border-left:1px solid #d8e0e8;background:#fbfcfe;display:flex;flex-direction:column;gap:14px;padding:18px;overflow:hidden}.brandHeader{display:flex;align-items:center;gap:11px;padding-bottom:14px;border-bottom:1px solid #e4ebf2}.brandHeader>div:nth-child(2){min-width:0;flex:1}.brandMark{width:40px;height:40px;border-radius:11px;overflow:hidden;flex:0 0 auto;box-shadow:0 10px 24px #145c9638}.brandMark.large{width:62px;height:62px;border-radius:16px}.brandMark img{width:100%;height:100%;display:block}.brandTitle{font-weight:900;font-size:18px;color:#17212f}.brandUser{margin-top:3px;color:#6a7685;font-size:12px}.usageBadge{width:46px;height:46px;min-width:46px;padding:0;border:0;border-radius:999px;background:transparent;cursor:pointer}.usageRing{width:46px;height:46px;border-radius:999px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px #1769aa1f}.usageRing span{width:34px;height:34px;border-radius:999px;background:#fff;color:#263442;display:grid;place-items:center;font-size:10px;font-weight:800}.navRow{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}.navButton{min-height:36px;border:1px solid #ccd7e2;border-radius:8px;background:#fff;color:#354456;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}.navButton.active{background:#e8f2fb;border-color:#9fc4e3;color:#155f9a;font-weight:700}.panelTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.panelTop.compact h1{font-size:18px}h1{margin:0;font-size:20px;font-weight:800}.panelTop p{margin:5px 0 0;color:#667386;font-size:13px}.uploadButton,.applyButton,.smallButton{border:1px solid #c8d3df;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;cursor:pointer}.uploadButton{width:100%;background:#fff;color:#263442;flex-wrap:wrap;row-gap:2px}.uploadButton small,.dropZone small{flex-basis:100%;color:#738091;font-size:12px;font-weight:500;text-align:center}.uploadButton:focus-visible,.dropZone:focus-visible{outline:3px solid rgba(23,105,170,.18);border-color:#79afd9}.applyButton{width:100%;background:#1769aa;border-color:#1769aa;color:#fff;font-weight:700}.uploadButton input,.dropZone input{display:none}button:disabled{opacity:.55;cursor:not-allowed}.promptPreview{max-height:96px;overflow:auto;border:1px solid #dbe4ed;background:#fff;border-radius:8px;color:#263442;padding:10px 12px;font-size:13px;line-height:1.55}.notice{border:1px solid #f0d49f;background:#fff8e9;color:#7b5520;border-radius:8px;padding:9px 11px;font-size:13px;line-height:1.45}.tutorialOverlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:#0f1a287a;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.tutorialCard{width:min(860px,100%);max-height:min(720px,calc(100vh - 48px));overflow:auto;border:1px solid #d8e2ec;border-radius:14px;background:#fff;box-shadow:0 26px 80px #0b192c47;display:grid;gap:18px;padding:20px}.tutorialHeader,.tutorialFooter{display:flex;align-items:center;justify-content:space-between;gap:12px}.tutorialHeader span{color:#1769aa;font-size:13px;font-weight:800}.tutorialHeader h2{margin:4px 0 0;font-size:22px;color:#12233a}.tutorialBody{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);gap:18px;align-items:stretch}.tutorialCopy{border:1px solid #e1e8f0;border-radius:10px;background:#f8fbfe;padding:16px;display:grid;align-content:space-between;gap:16px}.tutorialCopy p{margin:0;color:#425065;line-height:1.7}.tutorialTips{display:grid;gap:8px;color:#738091;font-size:12px}.tutorialDots{display:flex;justify-content:center;gap:7px}.tutorialDots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#cbd7e3;cursor:pointer}.tutorialDots button.active{width:24px;background:#1769aa}.tutorialVisual{min-height:330px;position:relative;overflow:hidden;border:1px solid #dbe5ee;border-radius:12px;background:linear-gradient(45deg,#f2f6fa 25%,transparent 25%),linear-gradient(-45deg,#f2f6fa 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f2f6fa 75%),linear-gradient(-45deg,transparent 75%,#f2f6fa 75%);background-position:0 0,0 9px,9px -9px,-9px 0;background-size:18px 18px}.demoSample{position:absolute;left:24px;top:28px;width:360px;height:252px;border-radius:13px;background:#fff;box-shadow:0 18px 42px #10182029;overflow:hidden;transform-origin:center}.demoSample img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}.demoOcrBox{position:absolute;border:2px solid rgba(23,105,170,.9);border-radius:3px;background:#1769aa14;box-shadow:0 0 0 1px #ffffff6b}.demoOcrBox.boxTitle{left:14px;top:14px;width:134px;height:22px}.demoOcrBox.boxMain{left:14px;top:58px;width:158px;height:44px;border-color:#ef4f42;background:#ef4f421a}.demoOcrBox.boxCost{left:14px;top:129px;width:112px;height:62px}.demoOcrBox.boxProfit{right:52px;top:131px;width:132px;height:62px;border-color:#ef4f42;background:#ef4f421a}.demoOcrBox.boxShares{right:32px;bottom:64px;width:110px;height:38px}.demoOcrList{position:absolute;right:34px;top:54px;width:138px;display:grid;gap:10px}.demoOcrList div{display:block;border-radius:999px}.demoOcrList div{height:38px;border:1px solid #c8d8e6;background:#fff}.demoOcrList div:nth-child(2){background:#eaf5ff;box-shadow:inset 3px 0 #1769aa}.demoCursor{position:absolute;left:300px;top:214px;width:16px;height:16px;border-radius:999px;background:#1769aa;box-shadow:0 0 0 7px #1769aa2e}.demoWheel{position:absolute;left:342px;top:52px;width:34px;height:50px;border:2px solid #1769aa;border-radius:999px;opacity:0}.demoWheel:after{content:"";position:absolute;left:50%;top:8px;width:4px;height:10px;border-radius:999px;background:#1769aa;transform:translate(-50%)}.demoSelectBox{position:absolute;left:42px;top:84px;width:140px;height:48px;border:2px solid #16a36a;background:#16a36a26;opacity:0}.demoCancelMark{position:absolute;left:178px;top:70px;width:34px;height:34px;border-radius:999px;background:#ffeceb;border:1px solid #ef9a96;color:#c62922;display:grid;place-items:center;font-size:24px;font-weight:800;opacity:0}.demoDownload{position:absolute;right:84px;bottom:54px;width:42px;height:42px;border-radius:999px;background:#1769aa;color:#fff;display:grid;place-items:center;opacity:0}.demoColorDrop{position:absolute;left:236px;bottom:48px;border:1px solid #b8c6d4;border-radius:999px;background:#fff;color:#17212f;padding:8px 12px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:800;opacity:0}.tutorialVisual.upload .demoCursor{animation:demoUploadCursor 2.8s infinite}.tutorialVisual.upload .demoOcrList div{animation:demoListIn 2.8s infinite}.tutorialVisual.zoom .demoWheel{animation:demoWheel 3s infinite}.tutorialVisual.zoom .demoCursor{animation:demoPanCursor 3s infinite}.tutorialVisual.select .demoCursor{animation:demoSelectCursor 3s infinite}.tutorialVisual.cancel .demoCancelMark{animation:demoCancelMark 2.8s infinite}.tutorialVisual.edit .demoOcrList div:nth-child(2){animation:demoEditList 2.8s infinite}.tutorialVisual.edit .demoSelectBox{left:218px;top:142px;width:112px;height:34px;opacity:1}.tutorialVisual.color .demoCursor{animation:demoColorCursor 2.8s infinite}@keyframes demoUploadCursor{0%,to{transform:translate(0)}45%{transform:translate(-60px,62px)}58%{transform:translate(-60px,62px) scale(.82)}72%{transform:translate(72px,-102px)}}@keyframes demoListIn{0%,48%{opacity:.35;transform:translate(18px)}70%,to{opacity:1;transform:translate(0)}}@keyframes demoZoomPhone{0%,to{transform:translate(0) scale(1)}42%{transform:translate(22px,18px) scale(1.18)}70%{transform:translate(-12px,28px) scale(1.18)}}@keyframes demoWheel{0%,15%,to{opacity:0;transform:translateY(0)}24%,54%{opacity:1}42%{transform:translateY(-12px)}}@keyframes demoPanCursor{0%,44%,to{transform:translate(0)}72%{transform:translate(-58px,34px)}}@keyframes demoSelectCursor{0%,to{transform:translate(-94px,-58px)}45%{transform:translate(-12px,-20px)}72%{transform:translate(-12px,-20px) scale(.8)}}@keyframes demoSelectBox{0%,20%,to{opacity:0;transform:scale(.2);transform-origin:left top}45%,78%{opacity:1;transform:scale(1)}}@keyframes demoCancelBox{0%,50%{opacity:1}72%,to{opacity:0;transform:scale(.84)}}@keyframes demoCancelMark{0%,35%,to{opacity:0;transform:scale(.6)}54%,72%{opacity:1;transform:scale(1)}}@keyframes demoEditList{0%,to{background:#eaf5ff}50%{background:#fff7ea}}@keyframes demoDownload{0%,35%,to{opacity:0;transform:translateY(8px)}52%,76%{opacity:1;transform:translateY(0)}}@keyframes demoCompare{0%,to{box-shadow:0 18px 40px #10182033}55%{box-shadow:210px 0 0 -2px #ffffffe6,210px 18px 42px #10182029}}@keyframes demoColorDrop{0%,30%,to{opacity:0;transform:translateY(10px)}48%,76%{opacity:1;transform:translateY(0)}}@keyframes demoColorCursor{0%,to{transform:translate(0)}45%{transform:translate(-28px,78px)}}.colorScanCard{border:1px solid #d5e0ea;background:#f8fbfe;border-radius:8px;padding:10px;display:grid;gap:9px;outline:none}.colorScanCard:focus{border-color:#79afd9;box-shadow:0 0 0 3px #1769aa1f}.colorScanMain,.colorScanResult{display:flex;align-items:center;gap:9px;min-width:0}.colorScanIcon{width:30px;min-width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:#e8f2fb;color:#1769aa}.colorScanMain strong{display:block;font-size:13px;color:#223044}.colorScanMain span{display:block;margin-top:2px;color:#6b7787;font-size:12px}.colorScanResult{padding:8px;border:1px dashed #c6d4e1;border-radius:7px;background:#fff}.sampleSwatch{width:24px;min-width:24px;height:24px;border:1px solid #b8c4d1;border-radius:999px;box-shadow:inset 0 0 0 1px #ffffff85}.colorScanResult code{flex:1;min-width:0;color:#17212f;font-size:13px;font-weight:700}.copyColorButton{width:30px;min-width:30px;height:30px;border:1px solid #c8d3df;border-radius:7px;background:#fff;color:#27384a;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.colorScanError{color:#b42318;font-size:12px}@media(max-width:760px){.tutorialButton{left:12px;top:12px;height:34px;padding:0 10px}.tutorialOverlay{padding:12px}.tutorialCard{max-height:calc(100vh - 24px);padding:14px}.tutorialBody{grid-template-columns:1fr}.tutorialVisual{min-height:280px}.demoSample{left:18px;top:30px;width:300px;height:210px;transform-origin:left top}.demoOcrList{right:18px;top:52px;width:112px}.demoCursor{left:246px;top:214px}.demoWheel{left:286px;top:54px}.demoSelectBox{left:36px;top:80px;width:118px;height:42px}}.regionList{flex:1;min-height:0;overflow:auto;border-top:1px solid #e5ebf1}.regionItem{padding:12px 10px;border-bottom:1px solid #e8edf3;cursor:pointer;display:grid;grid-template-columns:48px minmax(0,1fr);gap:6px 10px}.regionItem.selected{background:#eaf5ff;box-shadow:inset 3px 0 #1769aa}.regionItem.changed{background:#fff7ea}.regionMeta{color:#8491a3;font-size:12px;line-height:22px}.regionText{color:#26313d;font-size:15px;line-height:22px;word-break:break-word}.newText{color:#b06612;font-weight:700}.pendingColor{display:inline-flex;align-items:center;gap:5px;margin-left:8px;color:#647386;font-size:12px;font-weight:600;white-space:nowrap}.pendingColor span{width:12px;height:12px;border:1px solid #9ba8b6;border-radius:50%;box-shadow:0 0 0 1px #fff}.regionTools{grid-column:2;display:flex;gap:12px}.regionTools button{padding:0;border:0;background:transparent;color:#647386;font-size:13px;text-decoration:underline;cursor:pointer}.inlineEditor{grid-column:2;display:grid;gap:9px}.editField{display:grid;gap:6px}.editField span,.recognizedBox span,.colorField>span{color:#667386;font-size:12px}.recognizedBox{display:grid;gap:6px;border:1px solid #dbe4ed;background:#f7fafc;border-radius:8px;padding:9px 10px}.recognizedBox strong{color:#1f2d3b;font-size:14px;word-break:break-word}textarea,.labelInput{width:100%;border:1px solid #bdc9d6;border-radius:8px;background:#fff;color:#1f2833;padding:9px 10px}textarea{resize:vertical}.colorField{display:grid;grid-template-columns:auto 38px minmax(0,1fr) 32px;align-items:center;gap:8px}.colorPickerButton{width:34px;height:34px;border:1px solid #bdc9d6;border-radius:50%;background:#fff;display:grid;place-items:center;position:relative;cursor:pointer;overflow:hidden}.colorPickerButton svg{color:#536273;position:absolute;left:9px;top:9px;pointer-events:none;z-index:1}.colorPickerButton input{position:absolute;inset:0;opacity:0;cursor:pointer}.colorDot{position:absolute;right:4px;bottom:4px;width:11px;height:11px;border:1px solid #9ba8b6;border-radius:50%;box-shadow:0 0 0 1px #fff}.colorCodeInput{min-width:0;height:34px;border:1px solid #bdc9d6;border-radius:8px;padding:0 10px;color:#1f2833}.clearColorButton{width:30px;height:30px;border:1px solid #d8e0e8;border-radius:8px;background:#fff;color:#647386;display:grid;place-items:center;padding:0}.editActions{display:flex;gap:8px}.smallButton{min-height:32px;padding:0 10px;background:#16805d;border-color:#16805d;color:#fff;font-size:13px}.smallButton.secondary{background:#fff;border-color:#cad3dc;color:#394654}.dropZone{width:min(620px,100%);aspect-ratio:4 / 3;border:1px dashed #8fa0af;background:#fff;border-radius:10px;display:grid;place-items:center;align-content:center;gap:12px;color:#41515f;cursor:pointer}.canvasWrap{width:100%;height:calc(100vh - 56px);display:flex;align-items:center;justify-content:center}.floatingCoords{position:absolute;left:22px;bottom:18px;padding:8px 12px;border-radius:8px;color:#46525f;background:#ffffffeb;box-shadow:0 8px 24px #1f28331f;font-size:13px}.emptyHint,.status{color:#6a7580;font-size:14px;line-height:1.55}.adminPanel{min-height:0;display:grid;gap:12px;overflow:auto}.adminCard{border:1px solid #dbe4ed;background:#fff;border-radius:10px;padding:14px;display:grid;gap:10px}.adminCard h1,.adminWorkspace h1{font-size:18px}.adminCard h2{margin:0;display:flex;align-items:center;gap:7px;font-size:15px}.adminCard p,.deployMessage{margin:0;color:#637184;font-size:13px;line-height:1.55}.adminWorkspace{width:min(100%,1040px);height:calc(100vh - 48px);display:grid;grid-template-rows:auto minmax(0,1fr);gap:14px}.adminTableHeader{display:flex;align-items:center;justify-content:space-between;gap:14px}.userGrid{min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;align-content:start}.userCard{border:1px solid #d8e2ed;border-radius:10px;background:#fff;padding:14px;display:grid;gap:10px;box-shadow:0 12px 28px #18253812}.userCardTop{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#273648}.userCardTop span{display:block;margin-top:3px;color:#69778a;font-size:12px}.error{color:#9d332d;background:#fff0ee;border:1px solid #efc8c3;border-radius:8px;padding:10px;font-size:13px;line-height:1.45}.actionError{display:flex;align-items:center;justify-content:space-between;gap:10px}.actionError span{min-width:0}.actionError button{flex:0 0 auto;min-height:30px;padding:0 10px;border-color:#d78e86;background:#fff;color:#9d332d;font-size:12px}.lightbox{position:fixed;inset:0;z-index:20;padding:28px;background:#0c121ac7;display:flex;align-items:center;justify-content:center;cursor:zoom-out}.lightbox figure{width:min(96vw,1240px);height:min(92vh,920px);margin:0;display:grid;grid-template-rows:auto minmax(0,1fr);background:#101820;border-radius:10px;overflow:hidden}.lightbox figcaption{padding:12px 16px;color:#edf3fa;font-size:14px}.lightbox img{max-width:100%;max-height:100%;margin:auto;display:block;object-fit:contain}@media(max-width:980px){.shell{grid-template-columns:1fr}.textPanel,.workspace{grid-column:1;grid-row:auto}.workspace{min-height:60vh;padding:16px}.compareWorkspace{grid-template-columns:1fr;height:auto;min-height:80vh}.textPanel{height:44vh;border-left:0;border-top:1px solid #d8e0e8}}.navRow{grid-template-columns:1fr 1fr auto auto}.tutorialButton{position:static;z-index:auto;height:36px;min-width:76px;border:1px solid #c8d3df;border-radius:8px;background:#fff;color:#28384b;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;cursor:pointer;box-shadow:none}.tutorialButton:hover{border-color:#9fc4e3;background:#e8f2fb;color:#155f9a}.tutorialVisual{min-height:360px}.demoSample{left:20px;top:22px;width:322px;height:296px;border-radius:12px;background:#fff}.demoSample img{object-fit:contain;object-position:center}.demoOcrBox.boxTitle{left:14px;top:12px;width:78px;height:23px}.demoOcrBox.boxMain{left:14px;top:42px;width:172px;height:42px;border-color:#ef4f42}.demoOcrBox.boxCost{left:14px;top:92px;width:112px;height:64px}.demoOcrBox.boxProfit{right:28px;top:92px;width:122px;height:64px;border-color:#ef4f42}.demoOcrBox.boxShares{right:30px;bottom:70px;width:95px;height:40px}.demoSidePanel{position:absolute;right:24px;top:24px;width:170px;border:1px solid #d5e1ec;border-radius:10px;background:#fffffff5;box-shadow:0 14px 34px #1825381f;padding:10px;display:grid;gap:8px}.demoSidePanel strong{color:#12233a;font-size:13px}.demoSideItem,.demoEditForm,.demoChangeList{border:1px solid #dbe6ef;border-radius:8px;background:#fff;padding:8px;color:#263442;font-size:12px;line-height:1.35}.demoSideItem span,.demoSideItem em{display:block}.demoSideItem em{margin-top:3px;color:#1769aa;font-style:normal;font-size:11px}.demoEditForm,.demoChangeList{display:none;background:#fff7ea;border-color:#f0d49f}.demoEditForm small{display:block;color:#7b5520;margin-bottom:3px}.demoEditForm b{color:#b06612}.demoChangeList{color:#8a4d08;font-weight:700}.demoMouse{position:absolute;left:245px;top:248px;width:34px;height:50px;border:2px solid #1f3854;border-radius:18px 18px 16px 16px;background:#fff;box-shadow:0 10px 24px #18253833;transform-origin:center}.demoMouse:before{content:"";position:absolute;left:50%;top:2px;bottom:26px;width:1px;background:#d1dbe6}.demoMouse .leftKey,.demoMouse .rightKey{position:absolute;top:3px;width:13px;height:18px;border-radius:10px 10px 5px 5px;background:#eef4fa}.demoMouse .leftKey{left:3px}.demoMouse .rightKey{right:3px}.demoMouse .wheel{position:absolute;left:50%;top:8px;width:5px;height:12px;border-radius:999px;background:#1769aa;transform:translate(-50%)}.demoClickWave{position:absolute;width:28px;height:28px;border-radius:999px;border:2px solid rgba(23,105,170,.5);opacity:0}.demoWheelLabel{position:absolute;left:286px;top:228px;border-radius:999px;background:#1769aa;color:#fff;padding:4px 8px;font-size:11px;opacity:0}.demoSelectBox{left:30px;top:46px;width:168px;height:42px}.demoCancelMark{left:196px;top:42px}.demoDownload{right:120px;bottom:34px}.demoColorDrop{left:auto;right:34px;bottom:34px}.tutorialVisual.upload .demoSideItem{animation:demoListIn 2.8s infinite}.tutorialVisual.upload .demoMouse{animation:demoMouseUpload 2.8s infinite}.tutorialVisual.zoom .demoSample{animation:demoZoomPhone 3s infinite}.tutorialVisual.zoom .demoMouse{animation:demoMousePan 3s infinite}.tutorialVisual.zoom .demoMouse .wheel,.tutorialVisual.zoom .demoWheelLabel{animation:demoWheelPulse 3s infinite}.tutorialVisual.zoom .demoMouse .leftKey{animation:demoLeftClick 3s infinite}.tutorialVisual.select .demoMouse{animation:demoMouseSelect 3s infinite}.tutorialVisual.select .demoMouse .rightKey{animation:demoRightClick 3s infinite}.tutorialVisual.select .demoSelectBox{animation:demoSelectBox 3s infinite}.tutorialVisual.select .itemMain{animation:demoSelectedList 3s infinite}.tutorialVisual.cancel .demoSelectBox{opacity:1;animation:demoCancelBox 2.8s infinite}.tutorialVisual.cancel .demoMouse{animation:demoMouseCancel 2.8s infinite}.tutorialVisual.cancel .demoMouse .rightKey,.tutorialVisual.cancel .demoCancelMark{animation:demoRightClick 2.8s infinite}.tutorialVisual.cancel .itemMain{animation:demoTempItemGone 2.8s infinite}.tutorialVisual.edit .itemMain,.tutorialVisual.edit .demoEditForm,.tutorialVisual.edit .demoChangeList{display:block;animation:demoEditList 2.8s infinite}.tutorialVisual.edit .demoMouse{animation:demoMouseEdit 2.8s infinite}.tutorialVisual.edit .demoMouse .leftKey{animation:demoLeftClick 2.8s infinite}.tutorialVisual.download .demoChangeList{display:block}.tutorialVisual.download .demoSample{animation:demoCompare 2.8s infinite}.tutorialVisual.color .demoColorDrop{animation:demoColorDrop 2.8s infinite}.tutorialVisual.color .demoMouse{animation:demoMouseColor 2.8s infinite}@keyframes demoMouseUpload{0%,to{transform:translate(76px,-170px)}48%{transform:translate(18px,-52px)}58%{transform:translate(18px,-52px) scale(.94)}78%{transform:translate(150px,-166px)}}@keyframes demoMousePan{0%,to{transform:translate(72px,-162px)}42%{transform:translate(38px,-126px)}70%{transform:translate(-18px,-96px)}}@keyframes demoWheelPulse{0%,18%,to{opacity:0;transform:translateY(0)}30%,58%{opacity:1}45%{transform:translateY(-8px)}}@keyframes demoLeftClick{0%,38%,to{background:#eef4fa;transform:translateY(0)}48%,62%{background:#9fc4e3;transform:translateY(2px)}}@keyframes demoRightClick{0%,38%,to{background:#eef4fa;transform:translateY(0);opacity:1}48%,64%{background:#9fc4e3;transform:translateY(2px);opacity:1}}@keyframes demoMouseSelect{0%,to{transform:translate(-204px,-204px)}55%,76%{transform:translate(-48px,-166px)}}@keyframes demoMouseCancel{0%,to{transform:translate(-10px,-202px)}52%,70%{transform:translate(-184px,-84px)}}@keyframes demoMouseEdit{0%,to{transform:translate(132px,-184px)}45%,62%{transform:translate(122px,-116px)}}@keyframes demoMouseColor{0%,to{transform:translate(156px,8px)}44%,64%{transform:translate(124px,-20px)}}@keyframes demoSelectedList{0%,42%{background:#fff}64%,to{background:#eaf5ff;box-shadow:inset 3px 0 #1769aa}}@keyframes demoTempItemGone{0%,46%{opacity:1;transform:translate(0)}72%,to{opacity:.18;transform:translate(12px)}}@media(max-width:760px){.navRow{grid-template-columns:1fr auto auto}.tutorialButton{min-width:40px;padding:0 9px}.tutorialVisual{min-height:340px}.demoSample{left:14px;top:20px;width:260px;height:240px}.demoSidePanel{right:14px;top:30px;width:126px}}.demoSubmitButton{display:none;min-height:34px;border:1px solid #1769aa;border-radius:8px;background:#1769aa;color:#fff;font-weight:800;align-items:center;justify-content:center;gap:6px}.demoColorPanel{position:absolute;right:22px;top:22px;width:190px;border:1px solid #d5e1ec;border-radius:10px;background:#fffffffa;box-shadow:0 14px 34px #1825381f;padding:10px;display:none;gap:10px}.demoPanelTop strong{display:block;color:#0f2035;font-size:14px}.demoPanelTop span{display:block;margin-top:4px;color:#5d6b7d;font-size:11px;line-height:1.35}.demoColorCard{border:1px solid #d5e1ec;border-radius:9px;background:#f8fbfe;padding:9px;display:grid;gap:9px}.demoColorCardHeader{display:flex;align-items:center;gap:8px}.demoPaletteIcon{width:30px;height:30px;min-width:30px;border-radius:8px;display:grid;place-items:center;background:#e8f2fb;color:#1769aa}.demoColorCardHeader b,.demoColorCardHeader small{display:block}.demoColorCardHeader b{color:#14243a;font-size:12px}.demoColorCardHeader small{margin-top:2px;color:#697789;font-size:10px;line-height:1.25}.demoColorResult{min-height:42px;border:1px dashed #c6d4e1;border-radius:8px;background:#fff;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:7px}.demoColorSwatch{width:24px;height:24px;border-radius:999px;border:1px solid #b8c4d1;background:#ed1c24}.demoColorResult code{color:#17212f;font-weight:800;font-size:12px}.demoCopyIcon{width:28px;height:28px;border:1px solid #c8d3df;border-radius:7px;display:grid;place-items:center;background:#fff;color:#27384a}.tutorialVisual.color .demoSidePanel,.tutorialVisual.color .demoSample .demoOcrBox,.tutorialVisual.color .demoDownload{display:none}.tutorialVisual.color .demoColorPanel{display:grid;animation:demoColorPanelIn 2.8s infinite}.tutorialVisual.color .demoMouse{animation:demoMouseColorCard 2.8s infinite}.tutorialVisual.color .demoMouse .leftKey{animation:demoLeftClick 2.8s infinite}.tutorialVisual.download .demoSubmitButton{display:inline-flex;animation:demoSubmitPulse 2.8s infinite}.tutorialVisual.download .demoMouse{animation:demoMouseSubmit 2.8s infinite}.tutorialVisual.download .demoMouse .leftKey{animation:demoLeftClick 2.8s infinite}.tutorialVisual.download .demoDownload{animation:demoDownload 2.8s infinite}@keyframes demoColorPanelIn{0%,26%{opacity:.35;transform:translateY(8px)}48%,to{opacity:1;transform:translateY(0)}}@keyframes demoMouseColorCard{0%,to{transform:translate(160px,-156px)}44%,64%{transform:translate(112px,-112px)}}@keyframes demoMouseSubmit{0%,to{transform:translate(118px,-32px)}48%,66%{transform:translate(112px,-4px)}}@keyframes demoSubmitPulse{0%,38%,to{filter:brightness(1);transform:scale(1)}52%,68%{filter:brightness(1.12);transform:scale(.98)}}@media(max-width:760px){.demoColorPanel{right:12px;top:24px;width:148px}}