@charset "UTF-8";.canvas-shell{position:relative;display:grid;grid-template-rows:24px minmax(0,1fr) 34px;width:100%;height:100%;min-height:0;overflow:hidden;background:linear-gradient(90deg,rgba(30,36,44,.05) 1px,transparent 1px),linear-gradient(0deg,rgba(30,36,44,.05) 1px,transparent 1px),#f2f4f7;background-size:28px 28px}.workspace-ruler{display:flex;color:#84909f;font-size:10px;line-height:1;-webkit-user-select:none;user-select:none}.workspace-ruler--top{align-items:end;justify-content:space-around;padding:0 44px 5px 72px}.workspace-ruler--left{flex-direction:column;justify-content:space-around;width:34px;padding:34px 0 18px;text-align:right}.canvas-stage{display:grid;grid-template-columns:34px minmax(0,1fr);min-height:0;overflow:hidden}.board-viewport{position:relative;min-width:0;min-height:0;overflow:hidden;overscroll-behavior:contain;touch-action:none}.board-scale{position:absolute;top:0;left:0;will-change:transform;transform-origin:0 0}.bead-board{display:grid;background:#fff;border:1px solid #c6ccd4;border-radius:8px;box-shadow:0 18px 50px #1e242c2e;overflow:hidden;touch-action:none}.bead-cell{position:relative;min-width:0;min-height:0;border-right:1px solid rgba(154,164,176,.28);border-bottom:1px solid rgba(154,164,176,.28);cursor:crosshair}.bead-cell.filled:after{content:"";position:absolute;top:18%;right:18%;bottom:18%;left:18%;border-radius:50%;background:#ffffff3d;box-shadow:inset 0 0 0 1px #23272e1f;pointer-events:none}.bead-cell.marked{box-shadow:inset 1px 0 #373f4b38,inset 0 1px #373f4b38}.bead-board.is-pannable .bead-cell{cursor:grab}.bead-board.is-gridless .bead-cell{border-color:transparent}.bead-no{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#14181f9e;font-size:5px;font-weight:800;line-height:1;transform:scale(.86);pointer-events:none}.canvas-status{display:flex;align-items:center;justify-content:center;gap:18px;color:#626d7a;font-size:12px;background:#ffffffad;border-top:1px solid rgba(202,209,218,.75)}@media (max-width: 860px){.canvas-shell{grid-template-rows:minmax(0,1fr)}.workspace-ruler{display:none}.canvas-stage{grid-template-columns:1fr}.board-viewport{padding:12px 10px 14px}.bead-board{box-shadow:0 12px 32px #1e242c2e}.canvas-status{position:absolute;left:50%;bottom:8px;z-index:2;width:max-content;max-width:calc(100% - 20px);min-height:28px;padding:0 10px;border:1px solid rgba(202,209,218,.9);border-radius:999px;transform:translate(-50%);gap:12px;font-size:11px;box-shadow:0 8px 20px #1e242c1f}}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;color:#23272f;background:#eef1f5;font-family:Inter,PingFang SC,Microsoft YaHei,Arial,sans-serif}.editor-page{display:flex;flex-direction:column;width:100vw;height:100vh;overflow:hidden;background:#eef1f5}.topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;height:64px;padding:0 18px;background:#fff;border-bottom:1px solid #d9dee7;box-shadow:0 1px #1e242c0a}.topbar-right{display:flex;align-items:center;gap:12px}.top-actions,.project-strip,.tool-cluster,.view-cluster,.zoom-control,.selected-color,.usage-item{display:flex;align-items:center}.project-strip{justify-content:center;gap:10px;min-width:0}.app-menu{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}.menu-button{display:flex;align-items:center;justify-content:center;height:38px;min-width:112px;padding:0 12px;border:1px solid #d8dee8;border-radius:8px;color:#4a5666;background:#fff;font:inherit;font-size:13px;font-weight:750;cursor:pointer}.menu-button.active{color:#fff;border-color:#2563eb;background:#2563eb}.project-pill{display:flex;align-items:baseline;min-width:0;max-width:190px;padding:8px 12px;border:1px solid #dce2ea;border-radius:8px;background:#f8fafc}.pill-label{flex:0 0 auto;margin-right:8px;color:#8a94a3;font-size:11px}.pill-value{overflow:hidden;color:#2a303a;font-size:13px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.top-actions{justify-content:flex-end;gap:8px}.ghost-button,.primary-button,.danger-button,.export-item{display:flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:8px;font-size:13px;font-weight:650;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.ghost-button{color:#384252;border:1px solid #d8dee8;background:#fff}.primary-button{color:#fff;background:#2563eb;box-shadow:0 8px 20px #2563eb2e}.primary-button.disabled{opacity:.48;cursor:not-allowed}button:disabled,input:disabled,.ghost-button.disabled,.primary-button.disabled,.danger-button.disabled,.output-card.disabled,.admin-tab.loading{opacity:.58;cursor:not-allowed;pointer-events:none}button:disabled{box-shadow:none}.editor-layout{display:grid;grid-template-columns:280px minmax(420px,1fr) 320px;flex:1;min-height:0}.tool-page{flex:1;min-height:0;overflow-y:auto;padding:22px;background:#eef1f5}.page-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;max-width:1160px;margin:0 auto 16px}.page-kicker{display:block;color:#2563eb;font-size:12px;font-weight:800}.page-hero h1{margin:4px 0 6px;color:#18202c;font-size:28px;line-height:34px}.page-hero p{max-width:620px;margin:0;color:#687485;font-size:13px;line-height:20px}.page-actions,.quick-actions,.template-card-actions{display:flex;align-items:center;gap:8px}.conversion-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(280px,1fr);gap:14px;max-width:1160px;margin:0 auto}.convert-preview-panel,.convert-result-panel{min-height:300px}.drop-zone{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:230px;overflow:hidden;border:1px dashed #b8c3d2;border-radius:8px;background:linear-gradient(90deg,rgba(30,36,44,.04) 1px,transparent 1px),linear-gradient(0deg,rgba(30,36,44,.04) 1px,transparent 1px),#f8fbfc;background-size:22px 22px;cursor:pointer}.drop-zone input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.drop-preview{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:.24}.drop-icon{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:12px;border-radius:8px;color:#fff;background:#2563eb;font-size:32px;line-height:1}.drop-title{position:relative;z-index:1;color:#242b36;font-size:15px;font-weight:800}.drop-subtitle{position:relative;z-index:1;margin-top:5px;color:#7e8998;font-size:12px}.conversion-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}.conversion-summary div{padding:10px;border:1px solid #edf1f5;border-radius:8px;background:#fbfcfe}.summary-value,.summary-label{display:block}.summary-value{color:#202630;font-size:16px;font-weight:850}.summary-label{margin-top:3px;color:#7e8998;font-size:11px}.preview-board{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:2px;aspect-ratio:18/14;padding:10px;border-radius:8px;background:#f2f4f7}.converted-preview{max-height:420px;overflow:hidden}.preview-cell{border-radius:3px;background:#ffe2ce}.preview-cell:nth-child(4n){background:#50aaf0}.preview-cell:nth-child(5n){background:#d98c39}.preview-cell:nth-child(7n){background:#d50d21}.preview-cell:nth-child(11n){background:#000}.result-list{display:flex;flex-direction:column;gap:10px}.template-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;max-width:1160px;margin:0 auto}.template-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #dce2ea;border-radius:8px;background:#fff}.template-card.active{border-color:#2563eb6b;box-shadow:0 12px 30px #2563eb1f}.template-preview{display:flex;align-items:center;justify-content:center;height:180px;overflow:hidden;background:linear-gradient(45deg,#dce1ea 25%,transparent 25%),linear-gradient(-45deg,#dce1ea 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dce1ea 75%),linear-gradient(-45deg,transparent 75%,#dce1ea 75%);background-color:#eef1f7;background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0}.template-pixel-grid{display:grid;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.template-card-body{display:flex;flex-direction:column;gap:8px;padding:14px}.template-card-title{color:#202630;font-size:16px;font-weight:850}.template-card-meta{color:#7e8998;font-size:12px}.output-grid,.output-summary{display:grid;max-width:1160px;margin:0 auto}.output-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}.output-summary{grid-template-columns:minmax(280px,1fr) minmax(280px,1fr);gap:14px;margin-top:14px}.output-card{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:118px;padding:16px;border:1px solid #dce2ea;border-radius:8px;background:#fff;cursor:pointer}.output-card:hover{border-color:#2563eb6b;box-shadow:0 12px 30px #2563eb1a}.output-card-main{display:flex;flex:1;flex-direction:column;min-width:0}.output-card-title{color:#202630;font-size:15px;font-weight:850}.output-card-desc{margin-top:7px;color:#687485;font-size:12px;line-height:18px}.output-card-action{flex:0 0 auto;color:#2563eb;font-size:12px;font-weight:800}.summary-table{display:grid;gap:8px}.summary-table div{display:flex;align-items:center;justify-content:space-between;min-height:38px;padding:0 10px;border:1px solid #edf1f5;border-radius:8px;background:#fbfcfe}.summary-table span{color:#7e8998;font-size:12px}.summary-table strong{color:#202630;font-size:13px}.quick-actions{flex-direction:column;align-items:stretch}.quick-action{display:flex;align-items:center;height:42px;padding:0 10px;border:1px solid #d8dee8;border-radius:8px;color:#3b4656;background:#fff;font-size:13px;font-weight:750;cursor:pointer}.side-pane{box-sizing:border-box;height:100%;min-height:0;overflow-y:auto;padding:14px;background:#f7f9fb}.side-pane--left{border-right:1px solid #d9dee7}.side-pane--right{border-left:1px solid #d9dee7}.panel{padding:14px;margin-bottom:12px;border:1px solid #dce2ea;border-radius:8px;background:#fff}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;color:#202630;font-size:14px;font-weight:750}.mini-link,.status-dot{color:#2563eb;font-size:11px;font-weight:700}.project-name{display:block;margin-bottom:12px;color:#333b48;font-size:18px;font-weight:760}.progress-track,.usage-meter{overflow:hidden;height:7px;border-radius:999px;background:#e8edf3}.progress-bar,.usage-meter-fill{height:100%;border-radius:inherit;background:#f0b84f}.project-meta{display:flex;justify-content:space-between;margin-top:8px;color:#778291;font-size:12px}.grid-size-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 58px;gap:8px;align-items:end}.grid-size-field{display:flex;flex-direction:column;gap:5px;min-width:0;color:#7e8998;font-size:11px;font-weight:750}.grid-size-field input{width:100%;height:34px;min-width:0;padding:0 8px;border:1px solid #d8dee8;border-radius:8px;color:#242b36;background:#fff;font:inherit;font-size:13px;font-weight:750;outline:none}.grid-size-field input:focus{border-color:#2563ebb8;box-shadow:0 0 0 3px #2563eb1f}.grid-apply-button{height:34px;border:0;border-radius:8px;color:#fff;background:#2563eb;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.grid-size-hint{margin-top:8px;color:#8a94a3;font-size:11px;line-height:16px}.upload-box{display:flex;align-items:center;min-height:72px;padding:12px;border:1px dashed #b8c3d2;border-radius:8px;background:#f8fbfc}.upload-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-right:10px;border-radius:8px;color:#fff;background:#d9537f;font-size:24px;line-height:1}.upload-copy,.template-copy,.selected-copy,.usage-copy{display:flex;flex:1;flex-direction:column;min-width:0}.upload-title,.template-name,.selected-name,.usage-name{overflow:hidden;color:#242b36;font-size:13px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.upload-subtitle,.template-meta,.selected-code{overflow:hidden;margin-top:3px;color:#7e8998;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.setting-row{display:flex;align-items:center;justify-content:space-between;height:38px;color:#485464;font-size:13px;border-bottom:1px solid #edf1f5}.setting-row:last-child{border-bottom:0}.setting-value{font-weight:750}.setting-input{width:72px;height:30px;padding:0 8px;border:1px solid #d8dee8;border-radius:8px;color:#242b36;background:#fff;font:inherit;font-size:12px;font-weight:750;outline:none}.toggle{padding:0;border:0;width:36px;height:20px;border-radius:999px;background:#cfd7e2;position:relative;cursor:pointer}.toggle:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .12s ease}.toggle.is-on{background:#2563eb}.toggle.is-on:after{left:19px}.template-item{display:flex;align-items:center;padding:10px;margin-bottom:8px;border:1px solid transparent;border-radius:8px;background:#f5f7fa;cursor:pointer}.template-item.active{border-color:#2563eb59;background:#eff6ff}.template-thumb{display:flex;align-items:center;justify-content:center;width:42px;height:42px;margin-right:10px;border-radius:8px;color:#fff;background:linear-gradient(135deg,#2563eb,#3566b8);font-size:18px;font-weight:800}.main-workspace{display:grid;grid-template-rows:56px minmax(0,1fr);min-width:0;min-height:0;overflow:visible;background:#eef1f5}.workspace-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid #d9dee7;background:#fff}.mobile-current-color,.mobile-palette-overlay{display:none}.tool-cluster,.view-cluster{gap:8px}.tool-button{display:flex;align-items:center;height:36px;padding:0 10px 0 8px;border:1px solid #d8dee8;border-radius:8px;color:#3b4656;background:#fff;cursor:pointer}.tool-button.active,.square-button.active,.brand-tab.active,.family-tab.active{color:#fff;border-color:#2563eb;background:#2563eb}.tool-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:6px;border-radius:6px;color:inherit;background:#23272f14;font-size:12px;font-weight:850}.tool-button.active .tool-icon{background:#ffffff2e}.tool-label{font-size:12px;font-weight:700}.square-button{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid #d8dee8;border-radius:8px;color:#435063;background:#fff;font-size:13px;font-weight:800;cursor:pointer;-webkit-user-select:none;user-select:none}.zoom-control{gap:8px;padding-left:4px;color:#566273;font-size:12px;font-weight:750}.canvas-frame{min-width:0;min-height:0;overflow:visible}.selected-swatch{width:54px;height:54px;margin-right:12px;border:1px solid #c8d0db;border-radius:8px;box-shadow:inset 0 0 0 6px #ffffff42}.brand-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:12px}.family-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.brand-tab,.family-tab{display:flex;align-items:center;justify-content:center;min-width:0;height:30px;padding:0 6px;border:1px solid #d8dee8;border-radius:8px;color:#4a5666;background:#fff;font-size:11px;font-weight:700}.family-tab{flex:0 0 auto;height:28px;padding:0 8px}.color-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.color-chip{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:6px 2px;border:1px solid transparent;border-radius:8px;color:#657284;font-size:10px;font-weight:750}.color-chip.active{border-color:#2563eb;background:#eff6ff}.color-chip.active .color-swatch{box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eb57}.color-swatch,.usage-swatch{border:1px solid rgba(45,52,63,.18);border-radius:50%}.color-swatch{width:28px;height:28px}.usage-list{display:flex;flex-direction:column;gap:9px}.usage-item{gap:9px}.usage-swatch{width:24px;height:24px}.usage-meter{width:100%;height:5px;margin-top:6px}.usage-count{width:42px;color:#29313d;font-size:12px;font-weight:800;text-align:right}.empty-state{display:flex;align-items:center;justify-content:center;height:70px;color:#8a94a3;font-size:12px}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.export-item{height:34px;padding:0 8px;color:#384252;border:1px solid #d8dee8;background:#f8fafc}.danger-button{margin-top:10px;color:#b93650;border:1px solid rgba(185,54,80,.24);background:#fff6f8}@media (max-width: 1120px){.topbar{grid-template-columns:minmax(0,1fr) auto}.top-actions{display:none}.editor-layout{grid-template-columns:240px minmax(360px,1fr) 280px}}@media (max-width: 860px){html,body,#app{overflow:auto}.editor-page{height:auto;min-height:100vh;overflow:visible}.topbar{position:sticky;top:0;z-index:20;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;height:56px;padding:0 12px}.app-menu{justify-content:flex-start;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.app-menu::-webkit-scrollbar{display:none}.menu-button{flex:0 0 auto;min-width:104px;height:36px;padding:0 10px}.project-strip{justify-content:flex-start;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.project-strip::-webkit-scrollbar{display:none}.project-pill{flex:0 0 auto;max-width:none;padding:7px 10px}.editor-layout{display:flex;flex-direction:column;min-height:auto}.tool-page{min-height:calc(100svh - 104px);padding:12px;overflow:visible}.page-hero{align-items:stretch;flex-direction:column;gap:12px;margin-bottom:12px}.page-hero h1{font-size:24px;line-height:30px}.page-actions{justify-content:stretch}.page-actions .ghost-button,.page-actions .primary-button{flex:1}.conversion-grid,.template-gallery,.output-grid,.output-summary{grid-template-columns:1fr;gap:10px}.drop-zone{min-height:180px}.conversion-summary{grid-template-columns:1fr}.preview-board{grid-template-columns:repeat(14,minmax(0,1fr));aspect-ratio:14/10}.template-preview{height:150px}.template-card-actions{flex-direction:column;align-items:stretch}.side-pane{height:auto;max-height:none;border:0;overflow:visible;padding:10px 12px 0;background:#eef1f5}.side-pane--right{order:1}.side-pane--left{order:2}.main-workspace{order:-1;height:auto;min-height:0;grid-template-rows:auto auto;border-bottom:1px solid #d9dee7}.canvas-frame{height:min(70svh,620px);min-height:440px}.workspace-toolbar{position:relative;flex-direction:column;align-items:stretch;gap:8px;padding:8px 10px}.mobile-current-color{position:relative;display:flex;align-items:center;justify-content:center;height:40px;border:1px solid rgba(45,52,63,.2);border-radius:8px;box-shadow:inset 0 0 0 2px #ffffff6b;cursor:pointer;overflow:hidden}.mobile-current-color span{display:flex;align-items:center;justify-content:center;min-width:54px;height:24px;padding:0 10px;border-radius:999px;color:#fff;background:#14181f9e;font-size:12px;font-weight:850;text-shadow:0 1px 1px rgba(0,0,0,.28)}.mobile-palette-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;padding:10px;background:#1217206b}.mobile-palette-sheet{display:flex;flex-direction:column;width:100%;max-height:min(78svh,720px);padding:12px;border:1px solid rgba(216,222,232,.95);border-radius:12px 12px 8px 8px;background:#fff;box-shadow:0 -18px 42px #12172038}.mobile-sheet-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.mobile-sheet-header h2{margin:2px 0 0;color:#202630;font-size:18px;line-height:24px}.sheet-close{flex:0 0 auto;height:34px;padding:0 12px;border:1px solid #d8dee8;border-radius:8px;color:#435063;background:#fff;font:inherit;font-size:12px;font-weight:750}.mobile-selected-preview{display:flex;align-items:center;justify-content:center;height:42px;margin-bottom:10px;border:1px solid rgba(45,52,63,.18);border-radius:8px;box-shadow:inset 0 0 0 2px #ffffff6b}.mobile-selected-preview span{min-width:58px;padding:5px 12px;border-radius:999px;color:#fff;background:#14181f9e;font-size:12px;font-weight:850;text-align:center}.mobile-sheet-tabs{flex:0 0 auto;grid-template-columns:1fr}.mobile-sheet-families{flex:0 0 auto}.mobile-sheet-colors{flex:1 1 auto;min-height:0;overflow-y:auto;padding:2px 2px 6px;overscroll-behavior:contain}.tool-cluster,.view-cluster{display:grid;justify-content:space-between;gap:8px;overflow:visible}.tool-cluster{grid-template-columns:repeat(5,minmax(0,1fr))}.view-cluster{grid-template-columns:38px 38px minmax(112px,1fr)}.tool-button{justify-content:center;min-width:0;height:38px;padding:0 6px}.tool-icon{margin-right:4px}.square-button{width:38px;height:38px}.zoom-control{justify-content:flex-end;padding-left:0}.panel{padding:12px;margin-bottom:10px}.selected-color-panel,.palette-panel{display:none}.brand-tabs{grid-template-columns:1fr;gap:7px}.brand-tab{height:34px;font-size:12px}.family-tabs{flex-wrap:nowrap;overflow-x:auto;padding:0 0 4px;scrollbar-width:none}.family-tabs::-webkit-scrollbar{display:none}.family-tab{flex:0 0 auto;height:32px;padding:0 10px;font-size:12px}.color-grid{grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:7px}.color-chip{min-height:54px;padding:6px 2px}.color-swatch{width:26px;height:26px}.template-item{padding:9px}.export-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 430px){.project-pill{padding:6px 9px}.menu-button{min-width:98px;font-size:12px}.pill-label,.pill-value{font-size:11px}.main-workspace{height:auto;min-height:0}.canvas-frame{height:min(70svh,580px);min-height:430px}.tool-label{font-size:11px}.tool-icon{width:20px;height:20px;font-size:11px}.color-grid{grid-template-columns:repeat(auto-fill,minmax(38px,1fr))}.color-chip{min-height:52px;font-size:9px}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#12172099;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:modalFadeIn .2s ease-out}.modal-card{width:100%;max-width:400px;margin:16px;background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border:1px solid #e5e7eb;animation:modalScaleIn .2s ease-out;overflow:hidden}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #f3f4f6}.modal-header h3{margin:0;font-size:16px;font-weight:750;color:#111827}.close-button{background:none;border:none;font-size:24px;color:#9ca3af;cursor:pointer;padding:4px;line-height:1;border-radius:4px;transition:all .15s}.close-button:hover{color:#4b5563;background:#f3f4f6}.modal-body{padding:20px}.form-field{display:flex;flex-direction:column;gap:8px}.form-field span{font-size:13px;font-weight:750;color:#374151}.form-field input{padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;outline:none;transition:border-color .15s}.form-field input:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb26}.template-save-preview{margin-top:12px;padding:8px 12px;background:#f9fafb;border-radius:6px;font-size:12px;color:#6b7280;border:1px dashed #e5e7eb}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:12px 20px;background:#f9fafb;border-top:1px solid #f3f4f6}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalScaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.disclaimer-hint{margin-top:14px;padding:10px 12px;background:#fffbeb;border:1px solid #fef3c7;border-radius:6px;font-size:11px;color:#b45309;line-height:1.5}.user-status-container{display:flex;align-items:center;margin-left:8px}.user-profile-tag{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;font-size:13px;font-weight:750;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s;white-space:nowrap}.user-profile-tag:hover{background:#fee2e2;border-color:#fca5a5;color:#ef4444}.user-profile-tag .username{color:#334155;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-profile-tag:hover .username{color:#ef4444}.user-profile-tag .role-badge{padding:2px 6px;border-radius:999px;font-size:10px;font-weight:850}.user-profile-tag .role-badge.admin{background:#ef4444;color:#fff}.user-profile-tag .role-badge.user{background:#cbd5e1;color:#475569}.auth-form{display:flex;flex-direction:column}.auth-error-msg{margin-top:10px;padding:8px 10px;background:#fef2f2;border:1px solid #fee2e2;border-radius:6px;font-size:12px;color:#ef4444;font-weight:750}.auth-toggle-hint{margin-top:16px;text-align:center;font-size:12px;color:#64748b}.auth-toggle-hint a{color:#2563eb;font-weight:750;text-decoration:none;margin-left:4px}.auth-toggle-hint a:hover{text-decoration:underline}.admin-tab-selector{display:flex;gap:12px;max-width:1160px;margin:0 auto 16px;border-bottom:2px solid #e2e8f0;padding-bottom:8px}.admin-tab{padding:8px 16px;font-size:13px;font-weight:750;color:#64748b;cursor:pointer;border-radius:6px;transition:all .15s;-webkit-user-select:none;user-select:none}.admin-tab:hover{background:#f1f5f9;color:#334155}.admin-tab.active{background:#2563eb;color:#fff}.template-preview-modal-card{max-width:720px}.template-preview-modal-body{padding:24px}.preview-layout{display:flex;gap:24px;align-items:flex-start}.preview-canvas-container{flex:1;display:flex;justify-content:center;align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:20px;min-height:380px}.readonly-bead-board{box-shadow:0 10px 30px #1e242c1a}.preview-info-panel{width:260px;display:flex;flex-direction:column;gap:16px}.info-group{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid #f1f5f9}.info-label{font-size:13px;color:#64748b}.info-value{font-size:14px;font-weight:750;color:#1e293b}.preview-color-list-title{font-size:12px;font-weight:850;color:#475569;text-transform:uppercase;letter-spacing:.05em;margin-top:8px}.preview-color-list{max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px}.preview-color-list::-webkit-scrollbar{width:4px}.preview-color-list::-webkit-scrollbar-track{background:transparent}.preview-color-list::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.preview-color-item{display:flex;align-items:center;gap:10px;padding:6px 8px;background:#f8fafc;border:1px solid #f1f5f9;border-radius:8px}.preview-color-swatch{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.08);box-shadow:inset 0 1px 2px #fff3}.preview-color-details{flex:1;display:flex;flex-direction:column}.preview-color-no{font-size:12px;font-weight:750;color:#1e293b}.preview-color-name{font-size:10px;color:#64748b}.preview-color-count{font-size:11px;font-weight:750;color:#475569}@media (max-width: 640px){.template-preview-modal-card{max-width:100%;margin:8px}.preview-layout{flex-direction:column;gap:16px}.preview-canvas-container{min-height:250px;padding:12px}.preview-info-panel{width:100%}.preview-color-list{max-height:160px}}.auth-modal-card{max-width:420px;background:#fff;border-radius:16px;box-shadow:0 25px 50px -12px #1e293b40;border:1px solid #e2e8f0}.auth-brand{display:flex;align-items:center;gap:12px}.auth-brand-logo{width:36px;height:36px;border-radius:8px;object-fit:cover;box-shadow:0 4px 6px -1px #0000001a}.auth-brand-text h3{margin:0;font-size:15px;font-weight:850;color:#1e293b}.auth-brand-text span{font-size:10px;color:#64748b}.auth-title-row{margin-bottom:24px}.auth-title-row h2{margin:0 0 6px;font-size:20px;font-weight:850;color:#0f172a}.auth-title-row p{margin:0;font-size:12px;color:#64748b;line-height:1.4}.form-field-iconic{position:relative;display:flex;align-items:center}.form-field-iconic input{width:100%;padding:12px 12px 12px 42px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;font-size:14px;color:#1e293b;outline:none;transition:all .2s ease}.form-field-iconic input:focus{border-color:#2563eb;background:#fff;box-shadow:0 0 0 4px #2563eb1f}.field-icon{position:absolute;left:14px;color:#94a3b8;pointer-events:none;transition:color .2s}.form-field-iconic input:focus~.field-icon{color:#2563eb}.auth-submit-btn{width:100%;margin-top:24px;justify-content:center;height:44px;border-radius:10px;font-size:14px;font-weight:750;background:#2563eb;color:#fff;box-shadow:0 4px 10px #2563eb33;transition:all .2s}.auth-submit-btn:hover{background:#1d4ed8;box-shadow:0 6px 14px #2563eb4d}.logout-confirm-card{max-width:360px;border-radius:16px;box-shadow:0 25px 50px -12px #1e293b33}.logout-confirm-body{padding:24px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}.logout-icon-wrapper{width:72px;height:72px;border-radius:50%;background:#fef2f2;display:flex;align-items:center;justify-content:center;margin-bottom:4px}.logout-confirm-text{font-size:13px;color:#475569;line-height:1.6;margin:0}.custom-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:2000;display:flex;align-items:center;gap:8px;background:#1e293be6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);padding:12px 24px;border-radius:999px;color:#fff;font-size:13px;font-weight:750;box-shadow:0 10px 15px -3px #0000004d}.toast-icon{font-size:14px}.toast-enter-active,.toast-leave-active{transition:all .3s cubic-bezier(.16,1,.3,1)}.toast-enter-from{opacity:0;transform:translate(-50%,20px)}.toast-leave-to{opacity:0;transform:translate(-50%,-20px)}.admin-analytics-dashboard{max-width:1160px;margin:0 auto 32px;display:flex;flex-direction:column;gap:24px}.analytics-metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.metric-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:8px;box-shadow:0 4px 6px -1px #0000000d,0 2px 4px -1px #00000008;transition:all .2s}.metric-card:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000000d,0 4px 6px -2px #0000000d;border-color:#2563eb}.metric-title{font-size:13px;font-weight:750;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.metric-value{font-size:32px;font-weight:850;color:#1e293b;line-height:1}.metric-today{font-size:11px;color:#10b981;font-weight:750}.analytics-log-panel{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;box-shadow:0 4px 6px -1px #0000000d}.analytics-log-panel h3{font-size:15px;font-weight:850;color:#1e293b;margin-top:0;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #f1f5f9}.log-table-wrapper{overflow-x:auto;max-height:480px}.log-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.log-table th{padding:12px;background:#f8fafc;color:#475569;font-weight:750;border-bottom:2px solid #e2e8f0;white-space:nowrap}.log-table td{padding:12px;border-bottom:1px solid #f1f5f9;color:#334155}.log-table tr:hover td{background:#f8fafc}.log-type-tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:850}.log-type-tag.pv{background:#dbeafe;color:#1e40af}.log-type-tag.design{background:#dcfce7;color:#166534}.log-meta{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty-log-state{text-align:center;color:#94a3b8;padding:32px!important}