:root{--bg:#f4f6fa;--paper:#fff;--ink:#111827;--muted:#667085;--line:#d9e0ea;--blue:#4f73ff;--violet:#8b5cf6;--cyan:#22d3ee;--amber:#f59e0b;--green:#0e9f6e;--red:#c2415a;--r:18px;--shadow:0 16px 40px rgba(17,24,39,.10)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}img{max-width:100%}
.app{min-height:100vh;display:grid;grid-template-columns:285px minmax(0,1fr);grid-template-rows:76px minmax(0,1fr)}
.sidebar{grid-row:1/3;background:linear-gradient(180deg,#111827,#111827 64%,#0c1220);color:#fff;padding:18px 14px;position:sticky;top:0;height:100vh;z-index:30}.brand{display:flex;gap:11px;align-items:center;padding:5px 5px 18px;border-bottom:1px solid rgba(255,255,255,.08)}.brand img{width:47px;height:47px}.brand b{display:block;font-size:13px;letter-spacing:.25px}.brand small{display:block;margin-top:3px;color:#98a2b3;font-size:11px}
.nav{display:grid;gap:5px;margin-top:16px}.nav button{border:0;background:transparent;color:#cbd5e1;padding:10px 12px;border-radius:11px;text-align:left;display:flex;gap:11px;align-items:center}.nav button:hover,.nav button.active{background:#1d2939;color:#fff}.nav button.active{box-shadow:inset 3px 0 0 var(--cyan)}
.scope{margin-top:18px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03)}.scope b{font-size:10px;letter-spacing:.8px}.scope p{font-size:10px;color:#98a2b3;line-height:1.5}
.top{grid-column:2;position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);height:76px;display:flex;align-items:center;gap:10px;padding:10px 20px}.menu{display:none}.mini-brand{display:flex;align-items:center;gap:8px}.mini-brand img{width:32px;height:32px}.mini-brand b{display:block;font-size:12px}.mini-brand small{display:block;font-size:10px;color:var(--muted)}.search{position:relative;flex:1;max-width:680px}.search input{width:100%;padding:11px 52px 11px 13px;border:1px solid var(--line);border-radius:12px;background:#f8fafc;outline:none}.search input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(79,115,255,.12);background:#fff}.search span{position:absolute;right:8px;top:9px;font-size:10px;color:var(--muted);padding:3px 6px;border:1px solid var(--line);border-radius:6px;background:#fff}
.btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 12px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:6px}.btn:hover{border-color:#aab5c5}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.light{background:#fff;border-color:#fff}.btn.glass{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}.btn.tiny{padding:5px 7px}.main{grid-column:2;min-width:0;padding:24px}.view{display:none}.view.active{display:block}.head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:18px}.head h1{margin:0 0 4px;font-size:27px}.head p{margin:0;color:var(--muted);font-size:12px}
.hero{display:grid;grid-template-columns:1.55fr .9fr;gap:20px;align-items:center;padding:28px;border-radius:24px;background:radial-gradient(circle at 88% 8%,rgba(34,211,238,.22),transparent 25%),radial-gradient(circle at 68% 100%,rgba(139,92,246,.3),transparent 35%),linear-gradient(125deg,#111827,#1c2945);color:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}.hero:before{content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;background:radial-gradient(circle,rgba(79,115,255,.18),transparent 62%)}.hero:after{content:"";position:absolute;right:24px;bottom:12px;width:170px;height:100px;background-image:radial-gradient(rgba(255,255,255,.22) 1.2px,transparent 1.2px);background-size:16px 16px;opacity:.45}.eyebrow{font-size:10px;letter-spacing:2px;color:#a5b4fc;font-weight:700}.hero h1{font-size:31px;line-height:1.12;margin:10px 0}.hero p{color:#d0d5dd;line-height:1.55;font-size:13px}.hero-actions{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}.identity-card{position:relative;background:rgba(255,255,255,.95);color:var(--ink);padding:18px;border-radius:18px;z-index:2}.identity-card p{color:var(--muted);font-size:12px}.palette{display:flex;gap:10px;margin-top:12px}.palette i{display:block;width:24px;height:24px;border-radius:50%}.palette i:nth-child(1){background:#111827}.palette i:nth-child(2){background:#4f73ff}.palette i:nth-child(3){background:#8b5cf6}.palette i:nth-child(4){background:#22d3ee}.palette i:nth-child(5){background:#f59e0b}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}.metrics div{background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px}.metrics b{display:block;font-size:25px}.metrics span{font-size:11px;color:var(--muted)}.section-title{font-size:16px;margin:25px 0 10px}.grid{display:grid;gap:14px}.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.mini-c2{grid-template-columns:1fr 1fr}.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:0 4px 14px rgba(17,24,39,.03)}.action-card{cursor:pointer;transition:.18s ease}.action-card:hover,.library-card:hover,.project-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(17,24,39,.08)}.hint{font-size:11px;color:var(--muted);line-height:1.5}.pill{display:inline-flex;padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:#f8fafc;font-size:10px;color:var(--muted)}
.filterbar{display:flex;gap:8px;margin-bottom:14px}.filterbar input,.filterbar select{border:1px solid var(--line);border-radius:11px;padding:10px;background:#fff}.filterbar input{flex:1}.library-card{display:flex;flex-direction:column;min-height:210px}.library-card h3{margin:10px 0 7px}.library-card p{font-size:12px;color:var(--muted);margin:0}.library-card .row{margin-top:auto;padding-top:14px}.project-card{min-height:190px;display:flex;flex-direction:column}.project-card h3{margin:10px 0 5px}.project-card p{font-size:12px;color:var(--muted)}.project-card .project-actions{margin-top:auto;padding-top:14px}.status-filter{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 10px;font-size:11px;color:#475467}.chip.active{background:#eef1ff;border-color:#a7b6ff;color:#3349c9}.status-dot{font-size:10px;color:#667085}
.toolbar,.studio-tools{display:flex;gap:6px;flex-wrap:wrap;padding:9px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.97);margin-bottom:10px}.tool{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 9px}.tool.active{border-color:#9eafff;background:#eef1ff;color:#3349c9}.right{margin-left:auto}.toolbar-sep{width:1px;height:26px;background:var(--line)}.zoom-label{font-size:10px;color:var(--muted);min-width:38px;text-align:center}.board-shell{overflow:auto;min-height:650px;border:1px solid #cfd7e2;border-radius:18px;background:#dfe5ec}.board-shell.hand-mode{cursor:grab}.board-shell.hand-mode.panning{cursor:grabbing}.board{width:1650px;height:950px;position:relative;transform-origin:top left;background-color:#f8fafc;background-image:radial-gradient(#cbd3df 1px,transparent 1px);background-size:22px 22px}.board>svg{position:absolute;inset:0;width:1650px;height:950px;pointer-events:none}.note{position:absolute;width:240px;min-height:130px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px;box-shadow:0 10px 25px rgba(17,24,39,.09);touch-action:none}.note.idea{border-top:4px solid var(--amber)}.note.visual{border-top:4px solid var(--violet)}.note.technical{border-top:4px solid var(--cyan)}.note.selected{outline:3px solid rgba(79,115,255,.16)}.note h4{margin:0 0 7px}.note p{font-size:12px;color:var(--muted)}.note small{font-size:9px;color:#98a2b3}
.toolbox-shell{position:sticky;top:88px;z-index:11;margin-bottom:10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.98);box-shadow:0 8px 24px rgba(17,24,39,.05);overflow:hidden}.toolbox-head{min-height:43px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 9px 7px 12px;background:linear-gradient(180deg,#fff,#f8fafc);border-bottom:1px solid var(--line)}.toolbox-title{display:flex;align-items:baseline;gap:9px;min-width:0}.toolbox-title b{font-size:12px}.toolbox-title span{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbox-toggle{flex:0 0 auto;border:1px solid var(--line);background:#fff;color:#344054;border-radius:8px;padding:6px 9px;font-size:11px}.toolbox-toggle[aria-expanded="true"]{background:#eef1ff;border-color:#b3c0ff;color:#3349c9}.toolbox-shell .studio-tools,.toolbox-shell .post-toolbar{position:static;margin:0;border:0;border-radius:0;box-shadow:none;background:#fff}.toolbox-shell .toolbar-advanced{padding:8px 9px 10px;border-top:1px dashed #dfe4ec;background:#fbfcfe}.tool-group-label{display:inline-flex;align-items:center;padding:0 4px;color:#98a2b3;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.studio-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:12px}.layers{align-self:start}.panel-head{display:flex;justify-content:space-between;align-items:center}.layer-row{display:grid;grid-template-columns:26px 26px 1fr;gap:5px;align-items:center;padding:6px;border-radius:8px;font-size:11px}.layer-row.active{background:#eef1ff}.layer-row button{border:0;background:transparent}.canvas-shell{overflow:auto;min-height:680px;border:1px solid #cfd7e2;border-radius:18px;background:#dfe5ec;padding:16px}.canvas-shell svg{width:1500px;height:900px;background:#fff;border:1px solid var(--line);border-radius:15px;background-image:linear-gradient(rgba(79,115,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(79,115,255,.04) 1px,transparent 1px);background-size:24px 24px;touch-action:none;user-select:none}.studio-workspace.hand-mode .canvas-shell{cursor:grab}.studio-workspace.hand-mode .canvas-shell.panning{cursor:grabbing}.svg-item.selected>*{filter:drop-shadow(0 0 4px rgba(79,115,255,.9))}.property-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end}.check-field{display:flex;gap:7px;align-items:center;font-size:10px;color:#667085;margin:2px 0 10px}.check-field input{width:15px;height:15px}.soft-rule{border:0;border-top:1px solid var(--line);margin:14px 0}.mini-heading{display:block;font-size:11px;letter-spacing:.6px;text-transform:uppercase;margin-bottom:8px;color:#475467}.pen-ui .handle-line,.node-editor .handle-line{stroke:#8b5cf6;stroke-width:1.4;stroke-dasharray:4 3;pointer-events:none}.pen-ui .anchor,.node-editor .anchor{fill:#fff;stroke:#4f73ff;stroke-width:2}.pen-ui .handle,.node-editor .handle{fill:#fff;stroke:#8b5cf6;stroke-width:2}.node-editor .anchor,.node-editor .handle{cursor:grab;pointer-events:all}.pen-preview{fill:none;stroke:#4f73ff;stroke-width:2;stroke-dasharray:6 5;pointer-events:none}
.notice{padding:12px 13px;border-left:4px solid var(--amber);background:#fff9e9;border-radius:11px;font-size:12px;line-height:1.5;margin-bottom:12px}.notice.info{border-color:var(--cyan);background:#edfbff;color:#075985}.drop{padding:28px;border:1.5px dashed #aeb8c6;border-radius:17px;background:#fbfcfd;text-align:center}.drop.drag{border-color:var(--blue);background:#f0f3ff}.drop p{font-size:12px;color:var(--muted)}.file-list,.list{display:grid;gap:8px;margin-top:12px}.file-row{display:grid;grid-template-columns:42px 1fr auto;gap:9px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px}.file-row .icon{width:42px;height:42px;border-radius:9px;background:#eef2f6;display:grid;place-items:center}.file-row small{display:block;color:var(--muted)}.preview-thumb{width:42px;height:42px;border-radius:9px;object-fit:cover}.upload-progress{display:flex;gap:9px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:11px;margin-top:10px;background:#fff;font-size:11px}.upload-progress span{width:10px;height:10px;border-radius:50%;border:2px solid #cbd5e1;border-top-color:#4f73ff;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.field{display:grid;gap:5px;margin-bottom:11px;font-size:11px;color:var(--muted);font-weight:600}.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff;color:var(--ink);outline:none}.editor{min-height:320px;border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff;color:var(--ink);font-weight:400;line-height:1.6}.editor:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(79,115,255,.12)}.row{display:flex;gap:7px;flex-wrap:wrap}.post-toolbar{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:8px}.post-toolbar button,.post-toolbar select,.color-tool{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 8px;font-size:12px;color:var(--ink)}.color-tool{display:inline-flex;align-items:center;gap:5px}.color-tool input{width:22px;height:22px;padding:0;border:0}.editor blockquote{margin:18px 8px;padding:12px 15px;border-left:4px solid var(--violet);background:#f7f5ff}.editor .irp-callout{margin:18px 0;padding:14px 15px;border:1px solid #b9c6ff;border-left:5px solid var(--blue);border-radius:12px;background:#f6f8ff}.editor img{max-width:100%;height:auto;border-radius:12px;display:block;margin:16px auto}.post-list-card>b{display:block;margin-top:9px}.statusbox{margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#f8fafc;font-size:11px}.danger-text{color:#b42318!important}.wordmark{width:100%}
.overlay{display:none;position:fixed;top:76px;left:285px;right:0;bottom:0;z-index:60;background:rgba(17,24,39,.28);padding:15px}.overlay.open{display:block}.search-panel{max-width:820px;background:#fff;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}.search-panel>div:first-child{padding:10px 13px;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}.search-result{padding:11px 13px;border-bottom:1px solid #eef2f6;cursor:pointer}.search-result:hover{background:#f8fafc}.search-result b{display:block}.search-result small{color:var(--muted)}.modal{display:none;position:fixed;inset:0;z-index:80;background:rgba(17,24,39,.5);place-items:center;padding:15px}.modal.open{display:grid}.dialog{width:min(760px,100%);max-height:88vh;overflow:auto;background:#fff;border-radius:20px;padding:20px;position:relative;box-shadow:var(--shadow)}.x{position:absolute;right:12px;top:10px;border:0;background:transparent;font-size:25px}.article{line-height:1.65}.toast{position:fixed;right:16px;bottom:16px;z-index:4000;background:#111827;color:#fff;padding:10px 12px;border-radius:10px;opacity:0;transform:translateY(7px);transition:.2s}.toast.show{opacity:1;transform:none}.mobile-nav{display:none}.hidden{display:none!important}
.loading-screen{position:fixed;inset:0;z-index:5000;background:#eef2f7;display:grid;place-items:center;align-content:center;gap:10px}.loading-screen .loader-mark{width:72px;height:72px;animation:pulse 1.2s ease-in-out infinite}.loading-screen b{font-size:18px}.loading-screen span{font-size:12px;color:var(--muted)}@keyframes pulse{50%{transform:scale(1.04)}}.login-screen{position:fixed;inset:0;z-index:4500;background:radial-gradient(circle at 15% 15%,rgba(79,115,255,.13),transparent 28%),radial-gradient(circle at 85% 80%,rgba(139,92,246,.12),transparent 30%),#eef2f7;display:grid;place-items:center;padding:22px}.login-shell{width:min(950px,100%);display:grid;grid-template-columns:1.05fr .95fr;background:#fff;border:1px solid #d8dee8;border-radius:26px;overflow:hidden;box-shadow:0 24px 70px rgba(17,24,39,.14)}.login-identity{padding:44px;background:linear-gradient(145deg,#111827,#1b2948);color:#fff;min-height:600px;display:flex;flex-direction:column;justify-content:space-between}.logo-row{display:flex;align-items:center;gap:14px}.logo-row img{width:66px;height:66px}.logo-row b{font-size:18px;display:block}.logo-row small{display:block;color:#a8b3c6;margin-top:4px}.identity-copy h1{font-size:36px;line-height:1.08;margin:12px 0}.identity-copy p{font-size:14px;line-height:1.65;color:#d0d5dd}.identity-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.identity-badges span{font-size:10px;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:6px 9px}.login-form{padding:44px;display:flex;align-items:center}.form-inner{width:100%;max-width:390px;margin:auto}.form-inner h2{font-size:28px;margin:0 0 8px}.sub{color:var(--muted);font-size:13px;line-height:1.55}.login-btn,.login-secondary{width:100%;border-radius:11px;padding:12px;font-weight:700;margin-top:8px}.login-btn{border:0;background:var(--blue);color:#fff}.login-secondary{border:1px solid var(--line);background:#fff}.login-screen .note,.login-screen .error{margin-top:14px;padding:11px 12px;border-radius:11px;font-size:11px;line-height:1.55}.login-screen .note{border:1px solid var(--line);background:#f8fafc;color:var(--muted)}.login-screen .error{border-left:4px solid var(--red);background:#fff1f3;color:#8b2635}.login-screen .back{display:block;text-align:center;margin-top:17px;color:#475467;text-decoration:none;font-size:12px}.access-denied{width:min(480px,100%);text-align:center}.access-denied img{width:76px}
.sync-chip,.user-chip{display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:10px;color:#475467}.sync-chip span,.user-dot,.ok-dot{width:8px;height:8px;border-radius:50%;background:var(--green)}.sync-chip.saving span{background:var(--amber)}.sync-chip.error span{background:var(--red)}.system-status{display:flex;align-items:center;gap:7px;font-size:12px}.board-workspace.fullscreen,.studio-workspace.fullscreen{position:fixed;inset:0;z-index:3000;background:#eef2f7;padding:10px;display:flex;flex-direction:column}.board-workspace.fullscreen .board-shell{height:auto;flex:1}.studio-workspace.fullscreen .studio-layout{flex:1;min-height:0}.studio-workspace.fullscreen .canvas-shell{height:calc(100vh - 145px);min-height:0}
.public-view{min-height:100vh;background:#f4f6fa}.public-head{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line);min-height:72px;display:flex;align-items:center;justify-content:space-between;padding:10px 18px}.public-brand{display:flex;align-items:center;gap:10px}.public-brand img{width:44px}.public-brand b{display:block}.public-brand small{display:block;color:var(--muted);font-size:10px}.public-main{max-width:980px;margin:auto;padding:26px 16px 70px}.public-posts{display:grid;gap:16px}.public-post{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}.public-post h1{margin:0 0 7px}.public-post .meta{font-size:10px;color:var(--muted);margin-bottom:16px}.public-post .body{line-height:1.65}.public-post .body img{max-width:100%;border-radius:12px}.public-empty{padding:40px;text-align:center;background:#fff;border:1px dashed #cfd7e2;border-radius:18px;color:var(--muted)}
@media(max-width:1100px){.c3{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}.studio-layout{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.mini-brand,.sync-chip{display:none}}
@media(max-width:760px){body{padding-bottom:64px}.app{display:block}.sidebar{position:fixed;left:-295px;width:285px;transition:.2s}.sidebar.open{left:0}.top{height:66px;padding:8px 10px}.menu{display:inline-flex}.top>.btn:not(.menu){display:none}.search span{display:none}.user-chip{display:none}.main{padding:13px 13px 84px}.head{align-items:flex-start;flex-direction:column}.head h1{font-size:23px}.c2,.c3,.mini-c2{grid-template-columns:1fr}.hero{padding:20px}.hero h1{font-size:25px}.metrics{grid-template-columns:repeat(2,1fr)}.overlay{top:66px;left:0}.file-row{grid-template-columns:40px 1fr}.file-row .row{grid-column:1/-1}.mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}.mobile-nav button{border:0;background:#fff;padding:7px 2px;color:#475467;display:grid;place-items:center;gap:2px;font-size:16px}.mobile-nav span{font-size:9px}.filterbar{flex-direction:column}.toolbox-shell{top:76px}.toolbox-title span{display:none}.toolbox-shell .toolbar-basic,.toolbox-shell .toolbar-advanced,.board-toolbar{overflow-x:auto;flex-wrap:nowrap}.login-screen{padding:0}.login-shell{min-height:100vh;border:0;border-radius:0;grid-template-columns:1fr}.login-identity{min-height:auto;padding:24px}.identity-copy h1{font-size:27px}.identity-copy p,.identity-badges{display:none}.login-form{padding:28px 22px}.logo-row img{width:48px;height:48px}.board-workspace.fullscreen,.studio-workspace.fullscreen{padding:6px}.studio-workspace.fullscreen .canvas-shell{height:calc(100vh - 150px)}}