html.common-viewport{height:100%;overflow:hidden}
.common-viewport body.page-common{min-width:0!important;min-height:0!important;width:100%;height:100vh!important;height:100dvh!important;margin:0;overflow:hidden;display:flex;flex-direction:column}
.common-viewport #fontcolor{flex:1;min-height:0;height:auto!important;display:grid;grid-template-columns:minmax(220px,1fr) minmax(400px,2fr) minmax(130px,1fr);overflow:hidden}
.common-viewport #fontcolor>#left,.common-viewport #fontcolor>#middle,.common-viewport #fontcolor>#right{width:auto;min-width:0;min-height:0;max-height:100%;overflow-x:hidden;overflow-y:auto}
.common-viewport #fontcolor>#left{padding:12px}
.common-viewport #middle>.row{margin-right:0;margin-left:0}
.common-viewport #footer{flex:0 0 50px;min-width:0;overflow:hidden}
.common-viewport #footer .navbar{white-space:nowrap}
.common-viewport #footer .navbar-nav{flex-shrink:0}
.common-viewport #pomodoro_records{position:fixed;z-index:1040;left:25%;top:55%;bottom:62px;width:50%;max-height:none!important;overflow:auto;padding:12px;border-radius:12px;background:#202b32f2;box-shadow:0 8px 30px #0005}
.common-viewport #offcanvasRight{max-width:100vw}
.common-viewport #offcanvasRight .offcanvas-body{min-height:0;overflow:auto}
.common-viewport #qc-schedule[hidden],.common-viewport #ql-todo-panel[hidden]{display:none!important}
.common-viewport #qc-schedule{padding:12px 4px}
.common-viewport .qc-row{display:flex;align-items:center;gap:8px;margin:8px 0}
.common-viewport .qc-row>*{min-width:0}
.common-viewport .qc-row select{flex:1}
.common-viewport .qc-task{display:block;width:100%;text-align:left;margin:8px 0;padding:12px;border:1px solid #ffffff45;border-radius:10px;color:inherit;background:#ffffff12;overflow-wrap:anywhere}
.common-viewport .qc-task[aria-pressed=true]{border-color:#9fdcb8;background:#497b5d80}
.common-viewport .qc-task small{display:block;margin-top:4px;opacity:.8}
.common-viewport #qc-status{font-size:13px;line-height:1.6;overflow-wrap:anywhere;margin:8px 0}
.common-viewport #qc-editor{border:1px solid #d9dfd6;border-radius:16px;padding:20px;color:#243c34;background:#fcfaf5;width:min(600px,calc(100vw - 24px));max-height:88dvh;overflow:auto}
.common-viewport #qc-editor::backdrop{background:#10231c99}
.common-viewport #qc-editor label{display:block;margin:10px 0}
.common-viewport #qc-editor input,.common-viewport #qc-editor textarea{width:100%;padding:8px;border:1px solid #c2ccc4;border-radius:7px}
.common-viewport #qc-editor .qc-edit-row{border-top:1px solid #ddd;padding:10px 0}
@media(max-height:800px){.common-viewport #timenow{font-size:clamp(44px,10vh,100px)}.common-viewport #timeshow{height:80px!important}.common-viewport #timeshow+br,.common-viewport #timeshow+br+br{display:none}}
@media(max-width:850px){.common-viewport #fontcolor{grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);position:relative}.common-viewport #fontcolor>#right{position:absolute;right:8px;top:0;width:64px;max-height:100%;overflow:visible;z-index:20}.common-viewport #right #show_rtime,.common-viewport #right #ranking,.common-viewport #right #user_online{display:none}.common-viewport #middle{padding-top:52px}.common-viewport #pomodoro_records{left:10px;width:calc(100% - 20px)}.common-viewport #footer .nav.me-auto{display:none}.common-viewport #footer .navbar-nav{width:100%;overflow:auto;font-size:11px}.common-viewport #footer .navbar-brand{font-size:12px}}
@media(max-width:500px){.common-viewport #fontcolor{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(150px,.65fr)}.common-viewport #fontcolor>#middle{grid-row:1;padding:40px 12px 0}.common-viewport #fontcolor>#left{grid-row:2;padding:6px 12px}.common-viewport #timenow{font-size:48px}.common-viewport #timeshow{height:64px!important}.common-viewport #footer{flex-basis:42px}.common-viewport #footer nav{height:42px!important}}
.common-viewport #timeshow{height:auto!important;min-height:100px;margin-bottom:12px;font-size:clamp(40px,7vw,88px)!important;line-height:1.12}
.common-viewport #timeshow>span:first-child{font-size:inherit!important}
.common-viewport #timeshow>span:not(:first-child){font-size:14px}
.common-viewport #qc-schedule .btn{color:inherit;border-color:#ffffff66}
@media(max-width:500px){.common-viewport #timeshow{min-height:72px}}