*{box-sizing:border-box}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html,body,#root{height:100%;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}button,input,textarea,select{font:inherit}.landing-shell{color:#e8e8e8;background:#0e1015;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;position:relative;overflow:hidden}.landing-ambient{filter:blur(160px);opacity:.15;pointer-events:none;z-index:0;border-radius:50%;width:800px;height:800px;position:fixed}.landing-ambient-one{background:radial-gradient(circle,#3185fc 0%,#0000 70%);top:-300px;left:-200px}.landing-ambient-two{background:radial-gradient(circle,#2dc653 0%,#0000 70%);bottom:-400px;right:-200px}.landing-topbar{z-index:1;align-items:center;max-width:720px;margin:0 auto;padding:20px 32px;display:flex;position:relative}.landing-brand{letter-spacing:-.02em;color:#fff;font-size:1.15rem;font-weight:700}.landing-main{z-index:1;max-width:720px;margin:0 auto;padding:0 32px 80px;position:relative}.landing-hero{padding:32px 0 24px}.landing-hero h1{letter-spacing:-.03em;color:#fff;margin:0 0 8px;font-size:2rem;font-weight:700}.landing-subtitle{color:#888;margin:0;font-size:1rem}.landing-create{margin-bottom:40px}.landing-create-row{gap:12px;display:flex}.landing-input{color:#e8e8e8;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:10px;outline:none;flex:1;padding:12px 16px;font-size:.95rem;transition:border-color .2s}.landing-input:focus{border-color:#3185fc80}.landing-input::placeholder{color:#555}.landing-btn{color:#fff;cursor:pointer;white-space:nowrap;background:#3185fc;border:none;border-radius:10px;padding:12px 24px;font-size:.95rem;font-weight:600;transition:background .2s,opacity .2s}.landing-btn:hover{background:#2070e0}.landing-btn:disabled{opacity:.5;cursor:not-allowed}.landing-error{color:#e85d75;margin:8px 0 0;font-size:.85rem}.landing-boards{flex-direction:column;gap:8px;display:flex}.landing-board-card{color:#e8e8e8;cursor:pointer;text-align:left;background:#ffffff0a;border:1px solid #ffffff14;border-radius:12px;justify-content:space-between;align-items:center;width:100%;padding:16px 20px;font-family:inherit;font-size:.95rem;transition:background .2s,border-color .2s;display:flex}.landing-board-card:hover{background:#ffffff12;border-color:#ffffff26}.landing-board-name{font-weight:600}.landing-board-expiry{color:#888;flex-shrink:0;font-size:.8rem}.landing-board-expiry.expiry-warn{color:#f4a236}.landing-board-expiry.expiry-critical{color:#e85d75}.landing-loading,.landing-empty{text-align:center;color:#555;padding:48px 0;font-size:.95rem}@media (width<=600px){.landing-topbar{padding:16px 20px}.landing-main{padding:0 20px 60px}.landing-hero h1{font-size:1.5rem}.landing-create-row{flex-direction:column}.landing-btn{width:100%}}.canvas-container{position:absolute;inset:0;overflow:hidden}.board-canvas{touch-action:none;width:100%;height:100%;display:block}.text-input-overlay{z-index:120;position:absolute;transform:translate(-4px,-4px)}.text-input-field{resize:none;min-width:120px;min-height:28px;color:inherit;caret-color:#3185fc;touch-action:manipulation;background:0 0;border:none;outline:none;padding:0;font-family:Inter,sans-serif;line-height:1.4}.text-input-field::placeholder{color:#64748b80}.toolbar{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#14161ceb;border:1px solid #ffffff14;border-radius:14px;flex-direction:column;gap:2px;padding:8px;display:flex;position:absolute;top:50%;left:12px;transform:translateY(-50%);box-shadow:0 4px 24px #0000004d}.toolbar-section{flex-direction:column;gap:2px;display:flex}.toolbar-divider{background:#ffffff14;height:1px;margin:4px 2px}.toolbar-btn{color:#aaa;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:8px;align-items:center;gap:8px;padding:8px 10px;font-size:.82rem;transition:background .15s,color .15s;display:flex}.toolbar-btn:hover{color:#ddd;background:#ffffff0f}.toolbar-btn.active{color:#5ba3fc;background:#3185fc2e}.toolbar-btn.small{justify-content:center;padding:6px 10px}.toolbar-btn.danger:hover{color:#e85d75;background:#e85d752e}.toolbar-icon{text-align:center;flex-shrink:0;width:18px;font-size:1rem}.toolbar-label{font-size:.75rem}.toolbar-colors{justify-content:center;gap:4px;padding:4px 2px;display:flex}.color-swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:18px;height:18px;padding:0;transition:border-color .15s,transform .15s}.color-swatch:hover{transform:scale(1.15)}.color-swatch.active{border-color:#fff}.line-preview{background:#aaa;width:24px;height:2px;display:block}.line-preview.dashed{background:repeating-linear-gradient(90deg,#aaa 0 5px,#0000 5px 9px)}.bg-preview{border:1px solid #fff3;border-radius:4px;width:16px;height:16px;display:block}@media (width<=768px){.toolbar{display:none}}.mobile-toolbar{right:max(16px, env(safe-area-inset-right));bottom:max(16px, calc(env(safe-area-inset-bottom) + 16px));z-index:300;display:none;position:fixed}@media (width<=768px){.mobile-toolbar{display:block}}@media (width<=768px) and (orientation:portrait){.mobile-toolbar{right:max(14px, env(safe-area-inset-right));bottom:max(18px, calc(env(safe-area-inset-bottom) + 18px))}}.mobile-quickbar{justify-content:flex-end;display:flex}.mobile-fab{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#ddd;cursor:pointer;background:#14161cf0;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;font-size:1.3rem;display:flex;box-shadow:0 4px 20px #00000059}.mobile-panel{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#14161cf2;border:1px solid #ffffff14;border-radius:16px;flex-direction:column;gap:10px;width:260px;padding:12px;display:flex;position:absolute;bottom:64px;right:0;box-shadow:0 8px 32px #0006}.mobile-section{flex-direction:column;gap:4px;display:flex}.mobile-tools-grid{grid-template-columns:repeat(4,1fr);gap:4px;display:grid}.mobile-tool-btn{color:#aaa;cursor:pointer;text-align:center;background:#ffffff0a;border:1px solid #0000;border-radius:10px;padding:10px;font-size:1.1rem;transition:background .15s,color .15s}.mobile-tool-btn:hover,.mobile-tool-btn.active{color:#5ba3fc;background:#3185fc2e;border-color:#3185fc33}.mobile-colors{justify-content:center;gap:6px;padding:4px 0;display:flex}.mobile-color{cursor:pointer;border:2.5px solid #0000;border-radius:50%;width:28px;height:28px;padding:0;transition:border-color .15s,transform .15s}.mobile-color:hover{transform:scale(1.1)}.mobile-color.active{border-color:#fff}.mobile-row{flex-flow:wrap;gap:4px}.mobile-opt-btn{color:#aaa;cursor:pointer;text-align:center;background:#ffffff0a;border:1px solid #0000;border-radius:8px;flex:1;min-width:48px;padding:8px 6px;font-size:.78rem;transition:background .15s,color .15s}.mobile-opt-btn:hover,.mobile-opt-btn.active{color:#5ba3fc;background:#3185fc26}.mobile-opt-btn.danger:hover{color:#e85d75;background:#e85d752e}.expiry-badge{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#888;background:#14161cd9;border:1px solid #ffffff14;border-radius:20px;align-items:center;gap:8px;padding:6px 12px;font-size:.75rem;font-weight:600;display:flex;position:absolute;top:12px;right:12px}.expiry-badge.ok{color:#888}.expiry-badge.warn{color:#f4a236;border-color:#f4a23633}.expiry-badge.critical{color:#e85d75;border-color:#e85d7533}.expiry-text{white-space:nowrap}.expiry-renew{color:#5ba3fc;cursor:pointer;background:#3185fc33;border:1px solid #3185fc4d;border-radius:10px;padding:2px 8px;font-size:.7rem;font-weight:600;transition:background .15s}.expiry-renew:hover{background:#3185fc59}.save-indicator{z-index:100;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#666;pointer-events:none;background:#14161ccc;border:1px solid #ffffff0f;border-radius:12px;min-height:24px;padding:4px 14px;font-size:.7rem;font-weight:600;transition:opacity .3s;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.save-indicator.saved{opacity:.5}.save-indicator.saving{opacity:.8;color:#5ba3fc}.save-indicator.unsaved{opacity:0}.save-indicator.error{opacity:1;color:#e85d75}.zoom-indicator{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#14161ce0;border:1px solid #ffffff14;border-radius:10px;align-items:center;gap:0;display:flex;position:absolute;bottom:12px;left:12px;overflow:hidden}.zoom-btn,.zoom-level{color:#aaa;cursor:pointer;background:0 0;border:none;padding:6px 10px;font-size:.75rem;transition:background .15s,color .15s}.zoom-btn:hover,.zoom-level:hover{color:#ddd;background:#ffffff0f}.zoom-level{text-align:center;border-left:1px solid #ffffff0f;border-right:1px solid #ffffff0f;min-width:44px;font-weight:600}@media (width<=768px){.zoom-indicator{bottom:80px;left:12px}}.board-view{background:#e8e8e8;width:100%;height:100vh;position:relative;overflow:hidden}.board-name-bar{z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#14161ce0;border:1px solid #ffffff14;border-radius:10px;align-items:center;gap:8px;padding:6px 14px;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%)}.board-home-btn{color:#888;cursor:pointer;background:0 0;border:none;padding:2px 6px;font-size:1rem;line-height:1;transition:color .15s}.board-home-btn:hover{color:#ddd}.board-name-text{color:#ccc;white-space:nowrap;text-overflow:ellipsis;max-width:200px;font-size:.8rem;font-weight:600;overflow:hidden}.board-status{color:#888;background:#0e1015;flex-direction:column;justify-content:center;align-items:center;gap:16px;height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex}.board-error{color:#e85d75}.board-back-link{color:#5ba3fc;font-size:.9rem;text-decoration:none}.board-back-link:hover{text-decoration:underline}.clear-confirm{z-index:200;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#ddd;background:#14161cf2;border:1px solid #e85d754d;border-radius:12px;align-items:center;gap:12px;padding:12px 20px;font-size:.85rem;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 8px 32px #0006}.clear-confirm button{color:#e85d75;cursor:pointer;background:#e85d7533;border:1px solid #e85d7566;border-radius:8px;padding:6px 14px;font-size:.8rem;font-weight:600;transition:background .15s}.clear-confirm button:hover{background:#e85d7559}@media (width<=768px){.board-name-bar{padding:4px 10px;top:8px}.board-name-text{max-width:140px;font-size:.72rem}}