*{margin:0;padding:0;box-sizing:border-box}:root{--content-width: clamp(320px, 62vw, 720px);--uboard-panel-width: min(74vw, 980px);--start-size: clamp(36px, 3.6vw, 58px);--uboard-trigger-size: clamp(20px, 1.7vw, 28px);--header-height: 72px;--footer-height: 72px;--shortcut-min-size: clamp(76px, 9vw, 100px);--shortcut-gap: clamp(10px, 1.3vw, 14px)}html,body{width:100%;height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:#fff;min-height:100vh;transition:background .3s ease;position:relative}body.custom-bg{background-attachment:fixed;background-repeat:no-repeat;background-size:cover;background-position:center}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:#fff0;pointer-events:none;transition:background .25s ease;z-index:0}body.custom-bg:before{background:#ffffff6b}.container{width:100%;min-height:100vh;position:relative;z-index:1}.top-panel{min-height:100vh;display:flex;flex-direction:column}.header{width:100%;display:flex;align-items:flex-start;justify-content:space-between;padding:16px 20px;gap:20px}.brand-stack{display:flex;flex-direction:column;align-items:flex-start;gap:6px}.logo{font-size:var(--start-size);font-weight:500;color:#4285f4;letter-spacing:1px;line-height:1}.uboard-trigger-wrap{position:relative;display:inline-block}.uboard-trigger-wrap:after{content:"";position:absolute;top:100%;left:0;width:100%;height:14px}.uboard-trigger{display:inline-flex;align-items:center;padding:3px 2px;border-radius:8px;border:none;background:transparent;text-decoration:none;font-size:var(--uboard-trigger-size);line-height:1;font-weight:600;letter-spacing:.3px;color:#3c4043}.uboard-trigger:hover{color:#2563eb}.uboard-sidebar{position:absolute;top:calc(100% + 6px);left:0;width:var(--uboard-panel-width);height:min(78vh,760px);background:#fff;border:1px solid #d1d5db;border-radius:14px;box-shadow:0 14px 30px #00000029;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease;z-index:40;display:flex;flex-direction:column;overflow:hidden}.uboard-trigger-wrap:hover .uboard-sidebar,.uboard-trigger-wrap:focus-within .uboard-sidebar,.uboard-sidebar:hover{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.uboard-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #e5e7eb;font-size:13px;color:#374151}.uboard-sidebar-header a{color:#2563eb;text-decoration:none}.uboard-sidebar-header a:hover{text-decoration:underline}#uboardSidebarFrame{width:100%;height:calc(100% - 42px);border:none}.google-launcher{position:relative}.google-launcher-button{width:40px;height:40px;border:1px solid #dadce0;border-radius:50%;background:#fff;color:#4285f4;cursor:pointer;font-size:18px}.google-launcher-button:hover{background:#f8f9fa}.header-tools{display:flex;align-items:center;gap:10px}.gmail-launcher{position:relative}.gmail-launcher-button{width:40px;height:40px;border:1px solid #dadce0;border-radius:50%;background:#fff;color:#4285f4;cursor:pointer;font-size:18px}.gmail-launcher-button:hover{background:#f8f9fa}.gmail-sidebar{position:fixed;top:0;right:0;width:50%;max-width:600px;height:100vh;background:#fff;border-left:1px solid #dadce0;box-shadow:-2px 0 8px #0000001a;transform:translate(100%);transition:transform .3s ease;z-index:25;display:flex;flex-direction:column;overflow:hidden}.gmail-sidebar.open{transform:translate(0)}.gmail-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #dadce0;background:#f8f9fa;min-height:48px}.gmail-close-btn{width:32px;height:32px;border:none;background:transparent;color:#5f6368;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;border-radius:4px}.gmail-close-btn:hover{background:#e8eaed}.gmail-sidebar-content{display:flex;align-items:center;justify-content:center;padding:16px;flex:1;overflow:auto;flex-direction:column}.gmail-login{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:300px}.gmail-login i{font-size:48px;color:#5f6368}.gmail-login h2{margin:0;font-size:20px;color:#202124;font-weight:500}.gmail-login p{margin:0;font-size:14px;color:#5f6368}#googleLoginButton{margin-top:8px}.gmail-email-list{width:100%;height:100%;display:flex;flex-direction:column}.gmail-email-item{padding:12px 16px;border-bottom:1px solid #e8eaed;cursor:pointer;transition:background .2s ease}.gmail-email-item:hover{background:#f8f9fa}.gmail-email-from{font-weight:500;font-size:14px;color:#202124;margin-bottom:4px}.gmail-email-subject{font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gmail-email-snippet{font-size:12px;color:#9aa0a6;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gmail-logout-btn{padding:8px 12px;background:#e8eaed;border:none;border-radius:4px;cursor:pointer;font-size:12px;color:#3c4043;transition:background .2s ease}.gmail-logout-btn:hover{background:#dadce0}body.gmail-sidebar-active{overflow:hidden}.google-services-panel{position:absolute;top:48px;right:0;width:320px;padding:14px;border-radius:20px;background:#eff3f9;border:1px solid #d8dde6;box-shadow:0 10px 25px #00000026;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .18s ease;z-index:20}.google-launcher:hover .google-services-panel,.google-services-panel:hover{opacity:1;visibility:visible;transform:translateY(0)}.google-panel-title{font-size:26px;font-weight:500;color:#25313f;margin:4px 0 12px}.google-services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.google-service-link{text-decoration:none;color:#25313f;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 6px;border-radius:14px}.google-service-link:hover{background:#e0e6ef}.google-service-icon{width:44px;height:44px;border-radius:12px;background:#f5f7fb;border:1px solid #dde3ec;object-fit:cover;padding:6px}.google-service-name{font-size:14px;text-align:center}.main-content{flex:1;display:flex;justify-content:center;align-items:center;padding:20px;width:100%;min-height:calc(100dvh - var(--header-height) - var(--footer-height))}.content-center{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:var(--content-width)}.search-bar-container{width:100%;max-width:100%}.search-popover{position:fixed;top:50%;left:50%;width:min(90vw,var(--content-width));z-index:60;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-46%) scale(.96);transition:opacity .2s ease,transform .22s ease,visibility .2s ease}body.search-pop-active .search-popover{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}body.search-pop-active:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:#11182714;z-index:50}body.search-pop-active .shortcuts-section{opacity:.55;transition:opacity .2s ease}.shortcuts-section{width:min(100%,clamp(260px,90%,640px));margin-inline:auto}.search-bar{width:100%;border-radius:24px;border:1px solid #dadce0;background:#fff;box-shadow:0 1px 4px #0000001f}.search-input{width:100%;border:none;padding:14px 18px;font-size:15px;outline:none;background:transparent}.search-input::placeholder{color:#80868b}.search-bar:hover,.search-bar:focus-within{box-shadow:0 2px 8px #0000002e}.shortcuts-container{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--shortcut-min-size),1fr));gap:var(--shortcut-gap)}.shortcut-card{text-decoration:none;color:#3c4043;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1vw,8px);padding:clamp(8px,1.1vw,10px);border-radius:10px;position:relative}.shortcut-card:hover{background:#3c404314}.shortcut-card.editable{cursor:pointer;border:1px dashed #d2e3fc;position:relative}.shortcut-card.editable .delete-btn{position:absolute;top:8px;right:8px;width:24px;height:24px;border:none;border-radius:50%;background:#ea4335e6;color:#fff;cursor:pointer;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0}.shortcut-card.editable .delete-btn:hover{background:#d93025}.shortcut-card.add-card{background:#4285f41a;border:1px dashed rgba(66,133,244,.35)}.shortcut-card.add-card:hover{background:#4285f426}.shortcut-card.add-card .shortcut-icon{background:#1a73e829;color:#1a73e8}.shortcut-card.add-card .shortcut-text{color:#1a73e8}.shortcut-icon{width:clamp(42px,5vw,52px);height:clamp(42px,5vw,52px);border-radius:12px;background:#f1f3f4;display:flex;align-items:center;justify-content:center}.shortcut-card i{font-size:clamp(18px,2.3vw,22px);color:#5f6368}.shortcut-text{font-size:clamp(10px,1.2vw,12px);text-align:center;max-width:clamp(64px,9.5vw,88px);word-break:break-word}.shortcut-card.custom .remove-btn{position:absolute;top:-6px;right:-4px;width:20px;height:20px;border:none;border-radius:50%;color:#fff;background:#ea4335;cursor:pointer;opacity:0}.shortcut-card.custom:hover .remove-btn{opacity:1}.footer-wrap{width:100%}.footer{width:100%;display:flex;justify-content:center;gap:12px;padding:20px}.bg-menu{position:relative}.bg-menu:before{content:"";position:absolute;left:0;bottom:100%;width:100%;height:10px}.bg-menu-list{position:absolute;bottom:calc(100% + 2px);right:0;min-width:190px;background:#fff;border:1px solid #dadce0;border-radius:10px;box-shadow:0 8px 20px #00000024;padding:6px;display:none;z-index:30}.bg-menu:hover .bg-menu-list,.bg-menu:focus-within .bg-menu-list,.bg-menu.open .bg-menu-list{display:block}.bg-menu-item{width:100%;border:none;background:transparent;color:#3c4043;text-align:left;font-size:13px;padding:8px 10px;border-radius:6px;cursor:pointer}.bg-menu-item:hover{background:#f1f3f4}.footer-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:13px;border-radius:8px;border:1px solid #dadce0;background:#f8f9fa;color:#3c4043;cursor:pointer}.footer-btn:hover{background:#f1f3f4}.modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:1000;justify-content:center;align-items:center}.modal.active{display:flex}.modal-content{width:min(380px,92vw);background:#fff;border-radius:10px;padding:22px;box-shadow:0 8px 18px #0000002e}.modal-content h3{margin-bottom:12px;font-size:16px}.form-group{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.form-group label{font-size:13px;color:#374151}.form-group input{border:1px solid #d1d5db;border-radius:6px;padding:8px 10px;font-size:13px}.form-group input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 2px #2563eb1f}.form-buttons{display:flex;gap:8px;margin-top:12px}.btn-primary,.btn-secondary{flex:1;padding:8px;border-radius:6px;font-size:13px;border:1px solid transparent;cursor:pointer}.btn-primary{background:#2563eb;color:#fff}.btn-secondary{background:#f3f4f6;color:#374151;border-color:#d1d5db}@media (max-width: 768px){:root{--content-width: min(92vw, 640px);--start-size: clamp(34px, 6.8vw, 48px);--uboard-trigger-size: clamp(19px, 4.6vw, 26px);--shortcut-min-size: clamp(70px, 18vw, 94px)}.header{flex-direction:column;align-items:flex-start}.main-content{padding:12px 16px 18px}.search-popover{width:min(94vw,620px)}.footer{width:100%;justify-content:center;padding:0 16px 16px}.bg-menu-list{right:auto;left:0}.uboard-sidebar{--uboard-panel-width: min(90vw, 760px);width:min(90vw,760px);height:min(76vh,680px)}.google-services-panel{width:300px;right:-8px}.google-panel-title{font-size:22px}.google-service-name{font-size:13px}.search-input{font-size:14px}}@media (max-width: 480px){.header{padding:12px 14px}:root{--start-size: clamp(32px, 8.4vw, 42px);--uboard-trigger-size: clamp(18px, 5.8vw, 23px)}.uboard-sidebar{--uboard-panel-width: min(94vw, 520px);width:min(94vw,520px);height:72vh}.google-services-panel{width:min(92vw,320px);right:-12px}.shortcuts-container{grid-template-columns:repeat(4,minmax(0,1fr))}.footer{padding:12px 12px 16px}}