@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&display=swap";*{box-sizing:border-box;scrollbar-color:#4ecdc4 #e8f7ff;scrollbar-width:thin}::-webkit-scrollbar{width:18px;height:18px}::-webkit-scrollbar-track{background:#e8f7ff}::-webkit-scrollbar-thumb{background:#4ecdc4;border:4px solid #e8f7ff;border-radius:999px}::-webkit-scrollbar-thumb:hover{background:#ffe66d}::-webkit-scrollbar-corner{background:#e8f7ff}body{color:#080808;margin:0;font-family:Fredoka,system-ui,sans-serif}button,input,select{font:inherit}button{cursor:pointer}.app{background-color:#e8f7ff;background-image:radial-gradient(#38bdf8 2px,#0000 2px),radial-gradient(#38bdf8 2px,#0000 2px);background-position:0 0,16px 16px;background-size:32px 32px;min-height:100vh;overflow-x:hidden}.shell{grid-template-columns:320px 1fr;gap:28px;max-width:1280px;margin:0 auto;padding:24px;display:grid}.sidebar{height:calc(100vh - 48px);position:sticky;top:24px}.toon-card,.toon-button,.icon-button{border:4px solid #050505;box-shadow:6px 6px #050505}.toon-card{border-radius:30px;padding:26px;transition:transform .18s,box-shadow .18s}.toon-card:hover{transform:translateY(-3px);box-shadow:9px 9px #050505}.toon-button,.icon-button{color:#080808;background:#fff;border-radius:16px;justify-content:center;align-items:center;gap:10px;min-height:52px;font-weight:800;text-decoration:none;transition:transform .12s,box-shadow .12s,background .12s;display:inline-flex}.toon-button{padding:0 18px}.toon-button:hover,.icon-button:hover{transform:translateY(-2px)}.toon-button:active,.icon-button:active{transform:translate(5px,5px);box-shadow:0 0 #050505}.toon-button:disabled{cursor:not-allowed;opacity:.55}.icon{flex:none;width:24px;height:24px}.orange{background:#ff9f1c}.yellow,.nav-button.active,.mobile-nav.active{background:#ffe66d}.teal{background:#4ecdc4}.red{background:#ff6b6b}.purple{background:#d9cdf9}.white{background:#fff}.ghost{color:#fff;background:#ffffff38;border-color:#fff}.nav-list{gap:14px;display:grid}.nav-button{justify-content:flex-start;width:100%;min-height:62px;font-size:19px}.nav-button:not(.active){color:#767680}.main{min-width:0;padding-top:4px}.view{animation:.26s pop}.grid-view{grid-template-columns:360px 1fr;align-items:start;gap:28px;min-width:0;display:grid}.form-panel,.list-panel{min-width:0;min-height:300px}.panel-title{align-items:center;gap:10px;margin:0 0 20px;font-size:28px;display:flex}label{gap:8px;margin-bottom:16px;font-weight:800;display:grid}input,select{background:#fff;border:3px solid #050505;border-radius:14px;outline:none;width:100%;min-height:50px;padding:0 14px;font-weight:700}input:focus,select:focus{box-shadow:4px 4px #050505}.custom-field{position:relative}.custom-control{width:100%;min-height:58px;box-shadow:none;text-align:left;background:#fff;border:3px solid #050505;border-radius:16px;justify-content:space-between;align-items:center;gap:14px;padding:0 14px;font-weight:800;display:flex}.custom-control.open,.custom-control:focus{box-shadow:4px 4px #050505}.custom-control span{overflow-wrap:anywhere;min-width:0}.custom-control .icon{width:22px;height:22px}.custom-popover{z-index:30;background:#fff;border:3px solid #050505;border-radius:18px;width:100%;animation:.16s pop;position:absolute;top:calc(100% + 8px);left:0;overflow:hidden;box-shadow:6px 6px #050505}.select-popover{scrollbar-color:#ffe66d #fff;max-height:260px;display:grid;overflow-y:auto}.select-popover::-webkit-scrollbar-track{background:#fff}.time-grid>div::-webkit-scrollbar-track{background:#fff}.select-popover::-webkit-scrollbar-thumb{background:#ffe66d;border-color:#fff}.time-grid>div::-webkit-scrollbar-thumb{background:#ffe66d;border-color:#fff}.select-popover button,.empty-option{color:#050505;text-align:left;overflow-wrap:anywhere;background:#fff;border:0;min-height:48px;padding:10px 16px;font-weight:800}.select-popover button:hover,.select-popover button.active{background:#ffe66d}.picker-popover{grid-template-columns:1fr 128px;width:min(560px,100vw - 40px);max-width:none;display:grid}.picker-popover.above{top:auto;bottom:calc(100% + 8px)}.picker-head{background:#fff;grid-column:1/-1;justify-content:space-between;align-items:center;padding:14px 16px 8px;display:flex}.picker-head strong{text-transform:capitalize}.picker-head div{gap:8px;display:flex}.picker-head button{background:#ffe66d;border:3px solid #050505;border-radius:12px;place-items:center;width:38px;height:38px;display:grid}.icon.left{transform:rotate(180deg)}.picker-grid{grid-template-columns:repeat(7,1fr);gap:6px;padding:10px 14px 16px;display:grid}.picker-grid b,.picker-grid button{border-radius:10px;place-items:center;min-height:36px;font-weight:800;display:grid}.picker-grid b{font-size:13px}.picker-grid button{background:0 0;border:0}.picker-grid button:hover,.picker-grid button.active,.time-grid button:hover,.time-grid button.active{color:#050505;background:#4ecdc4;outline:3px solid #050505}.picker-grid button.muted{color:#00000059}.time-grid{border-left:3px solid #050505;grid-template-columns:1fr 1fr;display:grid}.time-grid>div{scrollbar-color:#ffe66d #fff;align-content:start;max-height:328px;display:grid;overflow-y:auto}.time-grid>div+div{border-left:3px solid #050505}.time-grid span{z-index:1;text-align:center;background:#d9cdf9;border-bottom:3px solid #050505;padding:10px 4px;font-size:13px;font-weight:800;position:sticky;top:0}.time-grid button{background:#fff;border:0;min-height:40px;font-weight:800}.actions{justify-content:flex-end;gap:12px;margin-top:20px;display:flex}.small{min-height:46px}.hint{color:#00000094;margin:-10px 0 18px;font-weight:800}.items{gap:16px;display:grid}.item-row{border:3px solid #050505;border-radius:22px;justify-content:space-between;align-items:center;gap:16px;min-width:0;padding:18px;display:flex;box-shadow:4px 4px #050505}.item-row>div:first-child{min-width:0}.item-row strong,.item-row span,.item-row small{overflow-wrap:anywhere;word-break:break-word;max-width:100%;display:block}.item-row strong{font-size:21px}.item-row span,.item-row small{opacity:.68;margin-top:4px;font-weight:800}.row-actions{flex:none;gap:10px;display:flex}.mini{border-width:3px;border-radius:12px;width:44px;min-height:44px;box-shadow:3px 3px #050505}.danger{color:#fff;background:#ef4444}.empty{color:#00000073;text-align:center;border:3px dashed #00000040;border-radius:22px;margin:0;padding:28px;font-weight:800}.mobile-header,.mobile-menu{display:none}.cloud{z-index:0;pointer-events:none;background:#ffffffa3;border-radius:999px;width:116px;height:46px;animation:32s linear infinite drift;position:fixed;left:-120px}.cloud:before,.cloud:after{content:"";background:inherit;border-radius:50%;position:absolute;bottom:8px}.cloud:before{width:46px;height:46px;left:18px}.cloud:after{width:58px;height:58px;right:18px}.cloud.right{animation-duration:38s}@keyframes drift{to{transform:translate(calc(100vw + 260px))}}@keyframes pop{0%{opacity:0;transform:translateY(18px)scale(.98)}to{opacity:1;transform:none}}@media (width<=980px){.shell{grid-template-columns:1fr;padding:18px}.sidebar{display:none}.mobile-header{z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#e8f7ffe0;border-bottom:4px solid #0000001f;justify-content:space-between;align-items:center;padding:14px 18px;display:flex;position:sticky;top:0}.mobile-header strong{font-size:24px}.mobile-menu{z-index:40;background:#4ecdc4;align-content:start;gap:18px;padding:28px;animation:.2s slide;display:grid;position:fixed;inset:0}.close{background:#fff;justify-self:end;width:56px;height:56px}.mobile-nav{justify-content:flex-start;min-height:72px;font-size:26px}.grid-view{grid-template-columns:1fr}}@media (width<=620px){.shell{padding:14px}.toon-card{border-radius:24px;padding:20px}.item-row{flex-direction:column;align-items:flex-start}.picker-popover{grid-template-columns:1fr;width:min(100%,100vw - 28px);max-height:78vh;overflow-y:auto}.picker-popover.above{top:calc(100% + 8px);bottom:auto}.picker-grid{gap:4px;padding:8px 10px 12px}.picker-grid b,.picker-grid button{min-height:30px;font-size:14px}.time-grid{border-top:3px solid #050505;border-left:0;grid-template-columns:1fr 1fr}.time-grid>div{grid-template-columns:repeat(3,1fr);max-height:none;overflow:visible}.time-grid span{grid-column:1/-1}.time-grid button{min-height:36px}}@keyframes slide{0%{transform:translate(100%)}to{transform:translate(0)}}
