:root{--green:#079755;--green-deep:#048649;--green-soft:#e8f7ee;--text:#121613;--muted:#717773;--line:#e8ece9;--card:#fff;--app-max:820px;--header-h:78px;--nav-h:74px;--sheet-h:304px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
#wrap.drj_app{position:relative;width:min(100%,var(--app-max));height:100vh;height:100dvh;margin:0 auto;background:#fff;overflow:hidden;box-shadow:0 0 42px rgba(17,27,21,.10)}
#header{position:relative;z-index:100;height:calc(var(--header-h) + var(--safe-top));padding-top:var(--safe-top);background:#fff;border-bottom:1px solid #eef1ef}
.app_header_inner{height:var(--header-h);display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:0 clamp(14px,3.1vw,26px)}
.brand{display:flex;align-items:center;min-width:0;gap:10px}.logo{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:linear-gradient(145deg,#02934f,#0aac64);color:#fff;font-size:20px;font-weight:800;box-shadow:0 8px 20px rgba(7,151,85,.18)}.brand_text{min-width:0}.brand_text h1{font-size:clamp(20px,3vw,26px);font-weight:800;letter-spacing:-.045em;line-height:1.05}.brand_text p{margin-top:5px;color:#7d837f;font-size:clamp(10px,1.55vw,14px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mode_pill{height:37px;display:flex;align-items:center;border-radius:12px;background:#f3f5f4;overflow:hidden;white-space:nowrap}.mode_pill span{height:100%;display:flex;align-items:center;padding:0 12px;font-size:clamp(11px,1.55vw,13px)}.mode_pill .mode_active{background:#e4f5eb;color:var(--green-deep);font-weight:800}.mode_pill .mode_desc{color:#7c827e}.header_actions{display:flex;align-items:center;gap:2px}.menu_toggle{margin-left:2px}.header_icon{position:relative;width:38px;height:38px;display:grid;place-items:center}.header_icon .i{width:25px;height:25px}.header_icon b,.nav_icon_badge b{position:absolute;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:10px;background:#f14f4c;color:#fff;border:2px solid #fff;font-size:9px;font-weight:800}.header_icon b{right:-1px;top:-2px}
#container{position:relative;height:calc(100vh - var(--header-h) - var(--safe-top));height:calc(100dvh - var(--header-h) - var(--safe-top));overflow:hidden;background:#f4f4f0}
#footer{position:absolute;z-index:140;left:0;right:0;bottom:0;height:calc(var(--nav-h) + var(--safe-bottom));padding-bottom:var(--safe-bottom);background:#fff;border-top:1px solid var(--line)}.bottom_nav{height:var(--nav-h);display:grid;grid-template-columns:repeat(4,1fr);padding:4px clamp(8px,2vw,18px) 6px}.nav_item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#666d69;border-radius:14px}.nav_item .i{width:27px;height:27px;stroke-width:1.75}.nav_item>span:last-child{font-size:12px;font-weight:650}.nav_item.active{color:var(--green)}.nav_icon_badge{position:relative;display:block}.nav_icon_badge b{right:-11px;top:-8px}
.side_wrap{position:fixed;z-index:260;top:0;bottom:0;right:max(0px,calc(50% - var(--app-max)/2));left:auto;width:min(84vw,370px);padding:calc(24px + var(--safe-top)) 22px 24px;background:#fff;transform:translateX(105%);transition:transform .24s ease;box-shadow:-14px 0 38px rgba(0,0,0,.15)}.side_wrap.on{transform:none}.side_backdrop{display:none;position:fixed;z-index:250;inset:0;background:rgba(8,13,10,.42)}.side_wrap.on+.side_backdrop{display:block}.side_head{display:flex;justify-content:space-between;align-items:center}.side_head .brand strong{font-size:20px}.side_close{width:40px;height:40px;display:grid;place-items:center}.side_profile{margin:28px 0 18px;padding:18px;border-radius:16px;background:#f1f8f4}.side_profile span{display:block;color:var(--green);font-size:12px;font-weight:800}.side_profile strong{display:block;margin-top:6px;font-size:15px}.side_menu{display:grid}.side_menu button{min-height:54px;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:12px;border-bottom:1px solid #eff2f0;text-align:left}.side_menu .i{width:22px}.side_menu span{font-size:15px;font-weight:650}.side_menu b{display:grid;place-items:center;min-width:22px;height:22px;border-radius:12px;background:#eef8f2;color:var(--green);font-size:11px}
@media(max-width:389px){:root{--header-h:70px;--nav-h:68px;--sheet-h:286px}.app_header_inner{gap:6px;padding:0 11px}.logo{width:37px;height:37px;font-size:18px}.brand_text h1{font-size:19px}.brand_text p{display:none}.mode_pill{height:34px}.mode_pill .mode_desc{display:none}.header_icon{width:34px;height:34px}.bottom_nav{padding-left:4px;padding-right:4px}}
@media(min-width:600px){:root{--header-h:90px;--nav-h:84px;--sheet-h:344px}.app_header_inner{padding:0 28px;gap:16px}.logo{width:50px;height:50px;font-size:23px}.brand_text h1{font-size:27px}.brand_text p{font-size:14px}.mode_pill{height:42px}.mode_pill span{padding:0 15px;font-size:14px}.header_icon{width:44px;height:44px}.header_icon .i{width:29px;height:29px}.bottom_nav{padding-left:28px;padding-right:28px}.nav_item .i{width:31px;height:31px}.nav_item>span:last-child{font-size:13px}}