/* Dangolpin admin visual shell — existing operations remain the source of truth. */ :root{--dp-blue:#1558e8;--dp-ink:#122445;--dp-border:#e3eaf6;--dp-soft:#f5f9ff} body:has(#dashboard:not(.hidden)){background:#f4f8ff!important;color:var(--dp-ink)} body:has(#dashboard:not(.hidden))>.wrap{max-width:1536px;padding:0 24px 48px} #dashboard{position:relative;padding-top:88px;padding-left:222px;min-height:90vh} #dashboard>.top{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:36px 8px 20px;border:0;background:transparent;margin-bottom:12px} #adminStoreTitle{font-size:clamp(30px,3.35vw,46px)!important;color:#11264b!important;font-weight:850!important;letter-spacing:-.055em!important} #dashboard>.card,#dashboard>[class*="card"]{border:1px solid var(--dp-border);box-shadow:0 5px 24px rgba(31,86,158,.055);border-radius:17px} .dp-topbar{height:76px;position:absolute;left:0;right:0;top:0;background:#fff;border:1px solid var(--dp-border);border-radius:17px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 23px;z-index:105} .dp-logo{font-size:22px;font-weight:900;letter-spacing:-1px;color:#1558e8;text-decoration:none;display:flex;flex-direction:column;line-height:1.05} .dp-logo small{font-size:10px;letter-spacing:-.25px;color:#506079;font-weight:600;margin-top:5px} .dp-topactions{display:flex;align-items:center;gap:10px} .dp-profile,.dp-announce{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #d7e4fb;border-radius:14px;background:#fff;color:#254c98;min-height:40px;padding:8px 13px;font-weight:750;cursor:pointer} .dp-profile:hover,.dp-announce:hover{background:#edf5ff} .dp-profile svg,.dp-announce svg{width:20px;height:20px} .dp-announce svg,.dp-profile svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .dp-profile-menu{position:absolute;top:67px;right:20px;min-width:242px;max-width:min(90vw,330px);padding:12px;background:#fff;border:1px solid var(--dp-border);box-shadow:0 14px 36px #183e702a;border-radius:16px;z-index:120} .dp-profile-menu[hidden]{display:none} .dp-profile-menu strong{display:block;font-size:14px} .dp-profile-menu small{display:block;color:#687b99;overflow-wrap:anywhere;font-size:12px;margin-top:6px} .dp-profile-menu>button{display:flex;width:100%;gap:8px;align-items:center;text-align:left;color:#243955;background:transparent;border:0;border-radius:10px;margin-top:7px;padding:11px;cursor:pointer;font-weight:700} .dp-profile-menu>button:hover{background:#f0f5ff} .dp-profile-menu hr{border:0;border-top:1px solid #edf0f6;margin:12px 0 5px} .dp-sidebar{position:absolute;top:88px;left:0;width:202px;background:#fff;border:1px solid var(--dp-border);border-radius:17px;padding:16px 11px;display:flex;flex-direction:column;gap:7px;box-shadow:0 5px 24px rgba(31,86,158,.04)} .dp-side-link{width:100%;display:flex;align-items:center;gap:12px;padding:13px 12px;background:transparent;border:0;color:#63728c;border-radius:12px;text-align:left;font-size:14px;font-weight:750;cursor:pointer} .dp-side-link svg{width:20px;height:20px;flex-shrink:0;stroke:currentColor;stroke-width:1.9;fill:none} .dp-side-link:hover,.dp-side-link[aria-current="page"]{background:#eaf3ff;color:#1558e8} .dp-sidebar hr{width:100%;border:0;border-top:1px solid #edf0f6;margin:10px 0} #dashboard .adminQuickNav{display:none!important} #dashboard #who{display:none!important} #dashboard #dangolAccountManage{display:none!important} #dashboard .supportHeaderActions{display:none!important} .dp-subtitle{font-size:16px;color:#7284a2;font-weight:550;margin:-2px 0 18px} @media(max-width:950px){ body:has(#dashboard:not(.hidden))>.wrap{padding:0 12px 34px} #dashboard{padding-left:0;padding-top:78px} .dp-topbar{height:70px;padding:0 12px} .dp-sidebar{position:relative;top:auto;left:auto;width:100%;display:flex;flex-direction:row;overflow:auto;gap:4px;padding:9px;margin-bottom:14px;scrollbar-width:thin} .dp-side-link{min-width:max-content;width:auto;padding:9px 12px;font-size:12px} .dp-side-link svg{width:17px;height:17px} .dp-sidebar hr{display:none} #dashboard>.top{padding:18px 4px 6px} } @media(max-width:520px){.dp-logo{font-size:19px}.dp-logo small{font-size:9px}.dp-profile,.dp-announce{padding:8px 9px;font-size:12px;min-height:37px}.dp-topactions{gap:5px}#adminStoreTitle{font-size:30px!important}.dp-profile-menu{right:7px}} /* Reuse the live summary metrics instead of mockup sample numbers. */ #dashboard .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:8px 0 18px} #dashboard .stats>.stat{display:flex;align-items:center;gap:16px;min-height:132px;padding:22px;border-radius:17px;border:1px solid #e4ebf6;background:#fff;color:#122445;text-align:left;box-shadow:0 5px 20px #174c900a;transition:transform .18s,box-shadow .18s} #dashboard .stats>.stat:hover{transform:translateY(-2px);box-shadow:0 12px 30px #174c9017} #dashboard .stats .statIcon{border-radius:16px;display:grid;place-items:center;width:56px;height:56px;flex-shrink:0} #dashboard .stats .statIcon svg{width:29px;height:29px} #dashboard .stats .statText{display:flex;flex-direction:column;gap:6px;color:#596c89;font-size:14px;font-weight:700} #dashboard .stats .statText b{font-size:clamp(27px,2.4vw,36px);font-weight:850;color:#122445;line-height:1.12;letter-spacing:-.04em} #dashboard .adminCategoryTitle{color:#192e52;font-size:19px;margin:28px 3px 15px} #dashboard .adminCategoryTitle svg{color:#1558e8} #dashboard .card h2{letter-spacing:-.04em;color:#1b3052} #dashboard .card{border-color:var(--dp-border);box-shadow:0 5px 20px #174c9009} @media(max-width:1200px){#dashboard .stats{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:570px){#dashboard .stats{grid-template-columns:1fr 1fr;gap:8px}#dashboard .stats>.stat{min-height:112px;padding:13px;gap:10px}#dashboard .stats .statIcon{width:38px;height:38px}#dashboard .stats .statIcon svg{width:21px;height:21px}#dashboard .stats .statText b{font-size:25px}} #dashboard>.top .accountActions{display:none!important} #dashboard .dp-topbar .dp-profile-menu{line-height:1.5} .dp-insights{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr);gap:14px;margin:14px 0 28px} .dp-insight-card{background:#fff;border:1px solid #e3eaf6;border-radius:18px;padding:22px;min-width:0;box-shadow:0 5px 24px #174c900a} .dp-insight-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:18px} .dp-insight-heading h2{font-size:18px;color:#172d51;margin:0;letter-spacing:-.04em} .dp-insight-heading small{font-size:12px;color:#7484a0} .dp-graph{height:220px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;gap:12px;border-bottom:1px solid #e8eff8;padding:10px 8px 0} .dp-graph-col{display:flex;flex-direction:column;align-items:center;justify-content:end;height:100%;min-width:0;gap:6px} .dp-graph-col strong{font-size:12px;color:#365c91;font-weight:700} .dp-graph-bar{width:min(100%,44px);min-height:2px;border-radius:7px 7px 0 0;background:linear-gradient(#4986ff,#175be2)} .dp-graph-col span{height:25px;font-size:11px;white-space:nowrap;color:#7686a2} .dp-insight-note{font-size:11px;color:#7989a2;margin:15px 0 0;line-height:1.5} .dp-recent-row{display:flex;align-items:center;gap:12px;padding:14px 2px;border-bottom:1px solid #edf2f9;min-width:0} .dp-recent-row:last-child{border:0} .dp-recent-icon{width:32px;height:32px;flex:0 0 32px;background:#edf5ff;color:#2c67dd;border-radius:50%;display:grid;place-items:center;font-size:10px} .dp-recent-desc{font-weight:650;color:#243b61;flex:1} .dp-recent-row time{font-size:12px;color:#7787a2;white-space:nowrap} @media(max-width:780px){.dp-insights{grid-template-columns:1fr}.dp-graph{gap:6px;height:180px}.dp-insight-card{padding:16px}} .dp-announce{position:relative}.dp-unread{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#ed3b53;color:#fff;font-weight:850;font-size:11px}.dp-unread[hidden]{display:none!important} #dashboard .dp-sidebar .dp-side-link:focus-visible,#dashboard .dp-profile:focus-visible,#dashboard .dp-announce:focus-visible{outline:3px solid #8fb9ff;outline-offset:2px} /* Sidebar and cards share a stable scroll target below the sticky visual header. */ #dashboard [id^="admin-category-"],#dashboard #stampSettingsCard,#dashboard #customerAnalysisCard,#dashboard #quickStartCard{scroll-margin-top:22px} #dashboard .dp-sidebar{align-self:start} #dashboard .card input:focus-visible,#dashboard .card select:focus-visible,#dashboard .card textarea:focus-visible{outline:2px solid #8db9ff;outline-offset:1px} #dashboard button{transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease} @media(prefers-reduced-motion:reduce){#dashboard button,.dp-side-link{transition:none!important;scroll-behavior:auto!important}} @media(max-width:520px){#dashboard>.top{flex-direction:column;align-items:stretch}#dashboard .adminStoreControls{flex-wrap:wrap}#dashboard .dp-topbar{border-radius:0 0 14px 14px}} /* Consistent treatment of actual admin tools without replacing their data or click handlers. */ #dashboard .card{background:#fff!important;border:1px solid #e3eaf6!important;border-radius:18px!important;box-shadow:0 5px 23px rgba(21,72,146,.055)!important} #dashboard .card h2{font-size:19px;line-height:1.35;font-weight:800} #dashboard .card h3{color:#203b63;letter-spacing:-.03em} #dashboard .card .muted{color:#74839b} #dashboard .card input:not([type="checkbox"]):not([type="radio"]),#dashboard .card textarea,#dashboard .card select{border-color:#dbe5f4;border-radius:11px;background:#fff} #dashboard .card table{border-collapse:separate;border-spacing:0;width:100%} #dashboard .card th{background:#f5f8fe;color:#425b80;font-size:12px;font-weight:800} #dashboard .card td{color:#2d415f} #dashboard .card th,#dashboard .card td{border-bottom:1px solid #edf1f8;padding:12px 10px} #dashboard .card button.themePrimary,#dashboard .card .themePrimary{background:#1558e8!important;border-color:#1558e8!important;color:#fff!important} #dashboard .card button.themeSecondary,#dashboard .card .themeSecondary{background:#edf4ff!important;border-color:#d4e3fa!important;color:#2450a0!important} #dashboard #adminCurrentCustomer{border-color:#e2eaf8;border-radius:12px} #dashboard .adminCategoryTitle{scroll-margin-top:24px} #dashboard .card[hidden],#dashboard .hidden{display:none!important} @media(max-width:650px){#dashboard .card{padding:16px!important}#dashboard .card table{min-width:540px}#dashboard .card>div:has(>table){overflow-x:auto}#dashboard .card h2{font-size:17px}} /* Approved compact topbar & four-card dashboard composition */ body:has(#dashboard:not(.hidden))>.wrap{max-width:1600px!important;padding:0 12px 40px!important} #dashboard{padding-top:110px!important;padding-left:232px!important} #dashboard>.top{padding:12px 10px 10px!important;margin:0 0 6px!important;min-height:154px;align-items:flex-start} #dashboard>.top>div:first-child{width:100%} #adminStoreTitle{margin:0 0 8px!important;font-size:clamp(29px,3.35vw,48px)!important} .dp-subtitle{margin:5px 0 17px!important;font-size:19px!important} .dp-topbar{height:107px!important;border-radius:16px 16px 0 0!important;padding:12px 20px!important;justify-content:space-between!important;gap:18px!important} .dp-logo{width:170px;flex:0 0 170px}.dp-logo img{height:84px!important;width:166px!important;object-fit:contain} .dp-topactions{flex-shrink:0!important}.dp-announce,.dp-profile{height:51px;border-radius:13px!important;font-size:15px!important;padding:12px 16px!important} .dp-store-header{display:flex;align-items:center;gap:12px;min-width:0;flex:0 1 450px} .dp-store-header #adminStoreSwitcher{display:flex!important;align-items:center;gap:5px;font-size:0!important;min-width:0;flex:1} .dp-store-header #adminStoreSwitcher[hidden]{display:none!important} .dp-store-header select{font-size:15px!important;border:1px solid #cfddf5!important;border-radius:11px!important;height:52px!important;max-width:100%!important;min-width:0!important;width:100%!important;font-weight:700!important;background:#fff!important;color:#172b4d!important} .dp-store-header #adminAddStoreButton{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto!important;height:51px!important;border:1px solid #cfddf5!important;border-radius:11px!important;color:#1761ec!important;background:#fff!important;padding:0 14px!important;font-weight:800!important} .dp-store-header #adminAddStoreButton[hidden]{display:none!important} .dp-credit-header{display:flex;gap:9px;align-items:center;background:#f4f0ff;border:1px solid #e6dcff;border-radius:13px;padding:7px 11px;min-height:52px;white-space:nowrap;margin-left:auto} .dp-credit-icon{display:grid;place-items:center;width:32px;height:32px;background:#ece4ff;color:#773de0;border-radius:12px;font-size:24px} .dp-credit-header>span:nth-child(2){font-size:13px;font-weight:700}.dp-credit-header strong{font-size:16px;color:#101d3d} .dp-credit-topup{background:#2265ed;border:0;color:#fff;font-weight:800;padding:9px 13px;border-radius:9px;cursor:pointer} .dp-sidebar{top:111px!important;width:219px!important;border-radius:0 0 17px 17px!important;min-height:calc(100vh - 125px);gap:7px!important;padding:20px 12px!important} .dp-side-link{min-height:49px;font-size:15px!important}.dp-side-link svg{width:22px;height:22px} #dashboard .stats{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important} #dashboard .stats>.stat{min-height:150px!important;padding:18px 15px!important;align-items:flex-start!important;flex-wrap:wrap} #dashboard .stats .statText b{font-size:35px!important} .dp-insights{grid-template-columns:minmax(0,1.35fr) minmax(310px,.98fr)!important} .dp-insight-card{min-height:320px!important} @media(max-width:1250px){.dp-credit-header>span:nth-child(2){display:none}.dp-store-header{flex-basis:360px}.dp-topbar{gap:10px!important}.dp-logo{width:135px;flex-basis:135px}.dp-logo img{width:132px!important}} @media(max-width:1020px){#dashboard{padding-left:0!important;padding-top:88px!important}.dp-topbar{height:auto!important;min-height:78px;padding:12px!important;flex-wrap:wrap!important}.dp-sidebar{position:relative!important;top:auto!important;width:100%!important;min-height:0;display:flex;flex-direction:row;overflow-x:auto;padding:8px!important;margin-top:22px}.dp-store-header{flex:1 1 240px}.dp-credit-header{margin-left:0}#dashboard>.top{min-height:0!important}} @media(max-width:760px){#dashboard .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}.dp-insights{grid-template-columns:1fr!important}.dp-store-header{order:3;flex-basis:100%}.dp-credit-header{order:4}.dp-topbar{position:relative!important}.dp-sidebar{margin-top:8px}#dashboard{padding-top:0!important}.dp-logo{flex-basis:115px}.dp-logo img{width:115px!important;height:64px!important}} @media(max-width:450px){#dashboard .stats{grid-template-columns:1fr 1fr!important}.dp-credit-header{max-width:100%}.dp-announce,.dp-profile{font-size:12px!important;padding:8px!important}.dp-store-header select{font-size:12px!important}} #dashboard .dp-extra-stats{margin:26px 0 16px;padding:18px;background:#fff;border:1px solid #e3eaf6;border-radius:17px} #dashboard .dp-extra-title{margin:0 0 12px;font-size:17px;color:#233b64} #dashboard .dp-extra-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #dashboard .dp-extra-grid>.stat{display:flex;align-items:center;text-align:left;gap:12px;padding:16px;min-width:0;border:1px solid #e3eaf6;background:#f9fbff;border-radius:12px} #dashboard .dp-extra-grid .statIcon{width:42px;height:42px;padding:8px;border-radius:12px} #dashboard .dp-extra-grid .statIcon svg{width:24px;height:24px} #dashboard .dp-extra-grid .statText{display:flex;flex-direction:column;gap:4px} #dashboard .dp-extra-grid .statText b{font-size:26px;color:#173052} @media(max-width:650px){#dashboard .dp-extra-grid{grid-template-columns:1fr}} /* Approved reference: compact blue-white control strip and line-chart dashboard */ #dashboard>.top{background:linear-gradient(106deg,#f9fcff 0%,#f2f8ff 53%,#deecff 100%)!important;border-radius:0 0 14px 14px!important;padding:28px 32px 18px!important;margin:0 0 12px!important} #dashboard .dp-line-chart{display:block;height:245px;padding:2px 0!important;border:0!important} #dashboard .dp-line-chart svg{width:100%;height:100%;display:block;overflow:visible} #dashboard>.top .adminStoreCustomerRow{margin-top:8px} #dashboard .dp-insights{margin-top:14px!important} #dashboard .dp-insight-card{border:1px solid #e0eafa!important;background:#fff;border-radius:17px;box-shadow:0 4px 18px #204c7b0d} #dashboard .dp-insight-heading h2{font-size:19px!important} #dashboard .dp-recent-row{min-height:59px;padding:14px 2px!important} #dashboard .dp-recent-icon{background:#dfedff;color:#1863ed} #dashboard .dp-topbar{border-bottom:1px solid #e2ebfc} #dashboard .dp-profile,#dashboard .dp-announce{box-shadow:0 1px 3px #143b7610} #dashboard .dp-sidebar{box-shadow:none!important} #dashboard .stats>.stat{border:1px solid #e0eafa!important;box-shadow:0 5px 19px #174c900d!important} @media(max-width:900px){#dashboard>.top{padding:16px 15px!important}} /* Never expose placeholder credit totals; hidden must override flex display. */ .dp-credit-header[hidden]{display:none!important} .dp-store-header #adminAddStoreButton[hidden],.dp-store-header #adminStoreSwitcher[hidden]{display:none!important} /* Avoid an oversized gap beneath top controls on dashboard home. */ #dashboard>.top{min-height:0!important} #dashboard .dp-subtitle{margin-bottom:10px!important} #dashboard .stats{margin-top:6px!important} @media(max-width:1020px){#dashboard>.top{padding:14px 12px!important}} /* Home visually follows the approved reference without duplicating a giant section heading. */ #dashboard>.top{padding-top:12px!important;padding-bottom:8px!important} #dashboard .stats{margin-top:2px!important;margin-bottom:12px!important} #dashboard .dp-insights{margin-top:12px!important} #dashboard .dp-topbar .dp-credit-header[hidden]{display:none!important} #dashboard .dp-store-header:empty{display:none!important} #dashboard .adminStoreControls:empty{display:none!important} /* Final reference proportions: make the upper control strip dense without altering store data. */ #dashboard .dp-topbar{column-gap:12px!important} #dashboard .dp-store-header{flex:1 1 310px!important;max-width:430px} #dashboard .dp-topactions{gap:10px!important} #dashboard>.top{margin-bottom:5px!important} #dashboard .dp-insights{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr)!important} #dashboard .dp-insight-card{padding:20px!important} #dashboard .dp-recent-row{gap:12px!important} #dashboard .dp-recent-desc{font-size:13px!important} @media(max-width:1050px){#dashboard .dp-topbar{row-gap:8px!important}#dashboard .dp-store-header{max-width:none}} @media(max-width:780px){#dashboard .dp-insights{grid-template-columns:1fr!important}#dashboard .dp-topbar{justify-content:space-between!important}} /* Align every primary topbar control to a single, consistent 52px row. */ @media(min-width:1021px){ .dp-topbar .dp-store-header select, .dp-topbar .dp-store-header #adminAddStoreButton, .dp-topbar .dp-credit-header, .dp-topbar .dp-topactions .dp-announce, .dp-topbar .dp-topactions .dp-profile{box-sizing:border-box!important;height:52px!important;min-height:52px!important;max-height:52px!important;margin-top:0!important;margin-bottom:0!important;align-self:center!important} .dp-topbar .dp-store-header,.dp-topbar .dp-topactions{align-items:center!important} .dp-topbar .dp-credit-header{display:flex!important;align-items:center!important;white-space:nowrap} } /* Purpose-based toolbar groups: brand/store left, credits/support/account right. */ #dashboard .dp-topbar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:22px!important} #dashboard .dp-top-left,#dashboard .dp-top-right{display:flex;align-items:center;min-width:0;gap:16px} #dashboard .dp-top-left{flex:1 1 auto} #dashboard .dp-top-right{flex:0 0 auto;margin-left:auto;gap:22px} #dashboard .dp-top-left .dp-logo{flex:0 0 132px!important;width:132px!important} #dashboard .dp-top-left .dp-store-header{flex:1 1 260px!important;max-width:480px!important;gap:10px} #dashboard .dp-top-right .dp-credit-header{display:flex!important;gap:9px;align-items:center;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;min-height:52px} #dashboard .dp-top-right .dp-credit-icon{width:23px;height:23px;font-size:18px;background:transparent;color:#2563eb} #dashboard .dp-top-right .dp-credit-topup{background:transparent!important;color:#1558e8!important;padding:8px 7px!important;font-weight:800;border:0!important;box-shadow:none!important} #dashboard .dp-top-right .dp-topactions{gap:12px!important} @media(max-width:1240px){#dashboard .dp-topbar{gap:12px!important}#dashboard .dp-top-left,#dashboard .dp-top-right{gap:10px}#dashboard .dp-top-left .dp-store-header{max-width:380px!important}} @media(max-width:1020px){#dashboard .dp-topbar{flex-wrap:wrap!important;height:auto!important}#dashboard .dp-top-left{flex:1 1 100%;width:100%;justify-content:flex-start}#dashboard .dp-top-right{flex:1 1 100%;width:100%;justify-content:flex-end;margin-left:0}} @media(max-width:600px){#dashboard .dp-top-left{flex-wrap:wrap}#dashboard .dp-top-left .dp-store-header{flex:1 1 100%!important;max-width:none!important}#dashboard .dp-top-right{flex-wrap:wrap;justify-content:space-between}#dashboard .dp-top-right .dp-credit-header{min-width:0}} /* Text-only add-store action; retain original click behavior and accessibility. */ #dashboard .dp-topbar .dp-store-header #adminAddStoreButton{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:8px 4px!important;min-height:44px!important;height:auto!important;white-space:nowrap!important;color:#1761ec!important;font-weight:750!important} #dashboard .dp-topbar .dp-store-header #adminAddStoreButton:hover{background:transparent!important;text-decoration:underline!important} #dashboard .dp-topbar .dp-store-header #adminAddStoreButton:focus-visible{outline:2px solid #1761ec!important;outline-offset:3px!important;border-radius:4px!important} /* Subtle vertical divider between credit balance and top-up action. */ #dashboard .dp-topbar .dp-credit-header .dp-credit-topup{border-left:1px solid #cbd8eb!important;border-radius:0!important;padding-left:17px!important;margin-left:7px!important;min-height:28px!important;display:inline-flex!important;align-items:center!important} /* Compact centered credit separator; overrides the old stretched border. */ #dashboard .dp-topbar .dp-credit-header .dp-credit-topup{border-left:0!important;margin-left:6px!important;padding-left:15px!important;position:relative!important} #dashboard .dp-topbar .dp-credit-header .dp-credit-topup::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:2px;height:24px;background:#b8c8df;border-radius:2px;pointer-events:none} /* Keep store picker and add-store action together, without stretching the picker across the topbar. */ #dashboard .dp-topbar .dp-top-left .dp-store-header{flex:0 1 auto!important;width:max-content!important;max-width:min(100%,620px)!important;gap:12px!important;justify-content:flex-start!important} #dashboard .dp-topbar .dp-top-left .dp-store-header #adminStoreSwitcher{flex:0 1 340px!important;width:340px!important;max-width:calc(100% - 130px)!important} #dashboard .dp-topbar .dp-top-left .dp-store-header #adminAddStoreButton{flex:0 0 auto!important;margin:0!important} @media(max-width:600px){#dashboard .dp-topbar .dp-top-left .dp-store-header{width:100%!important;max-width:100%!important}#dashboard .dp-topbar .dp-top-left .dp-store-header #adminStoreSwitcher{width:auto!important;flex:1 1 auto!important;max-width:none!important}} /* Unified compact store selector and add action. */ #dashboard .dp-topbar .dp-top-left .dp-store-header{display:flex!important;align-items:stretch!important;gap:0!important;width:fit-content!important;max-width:100%!important;border:1px solid #cfddf5!important;border-radius:11px!important;background:#fff!important;overflow:hidden!important} #dashboard .dp-topbar .dp-top-left .dp-store-header #adminStoreSwitcher{flex:0 1 280px!important;width:280px!important;max-width:none!important;min-width:0!important} #dashboard .dp-topbar .dp-top-left .dp-store-header select{height:48px!important;border:0!important;border-radius:0!important;background:transparent!important;padding-left:12px!important} #dashboard .dp-topbar .dp-top-left .dp-store-header #adminAddStoreButton{height:48px!important;min-height:48px!important;padding:0 14px!important;margin:0!important;border:0!important;border-left:1px solid #dbe5f3!important;border-radius:0!important;background:transparent!important;white-space:nowrap!important} @media(max-width:600px){#dashboard .dp-topbar .dp-top-left .dp-store-header{width:100%!important}#dashboard .dp-topbar .dp-top-left .dp-store-header #adminStoreSwitcher{flex:1 1 auto!important;width:auto!important}} /* Tight balance/top-up spacing around compact divider. */ #dashboard .dp-topbar .dp-top-right .dp-credit-header{gap:5px!important} #dashboard .dp-topbar .dp-top-right .dp-credit-header .dp-credit-topup{margin-left:0!important;padding-left:11px!important;padding-right:2px!important} /* Recent customers: consent status replaces decorative blue dot. */ #dashboard .dp-recent-icon.dp-consent-yes{background:#dcfce7;color:#15803d} #dashboard .dp-recent-icon.dp-consent-no{background:#f1f5f9;color:#94a3b8} /* Keep the left menu visible while scrolling (desktop only). */ @media(min-width:1021px){#dashboard .dp-sidebar{position:fixed!important;top:111px!important;left:12px!important;min-height:0!important;max-height:calc(100vh - 125px);overflow-y:auto;z-index:30}} /* Single-screen navigation: the left menu is the only menu; each item shows one screen. */ .adminQuickNav{display:none!important} #dashboard > [data-view-off]{display:none!important} #dashboard #admin-category-0{margin-top:4px} .dp-side-sub{padding-left:38px!important;font-size:13px!important;min-height:38px!important;color:#5b6b85!important} .dp-side-sub[aria-current="page"]{color:#1558e8!important} /* Phone: show every menu item in a grid instead of a sideways scroll, so nothing is hidden off-screen. */ @media(max-width:1020px){ #dashboard .dp-sidebar{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;overflow:visible!important;gap:6px!important;padding:8px!important} #dashboard .dp-sidebar .dp-side-link{min-width:0!important;width:100%!important;box-sizing:border-box;flex-direction:column!important;justify-content:center!important;text-align:center!important;gap:4px!important;padding:10px 4px!important;font-size:12px!important;line-height:1.25!important;word-break:keep-all} #dashboard .dp-sidebar .dp-side-sub{font-size:11px!important;color:#5b6b85!important;background:#f7f9fc!important} #dashboard .dp-sidebar .dp-side-link{display:block!important;text-align:center} #dashboard .dp-sidebar .dp-side-link>svg{display:block!important;margin:0 auto 4px!important} #dashboard .dp-sidebar .dp-marketing-count{display:inline!important;margin-left:4px;position:static!important;vertical-align:baseline} } /* Phone top bar: 자동 문자 버튼, 알림·공지·계정, 포인트 줄을 같은 가로 폭에 맞춰 정렬. */ @media(max-width:760px){ #dashboard .dp-top-right{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;align-items:center!important;justify-content:stretch!important} #dashboard .dp-top-right>*{min-width:0} #dashboard #autoCampaignChip{grid-column:1/-1;display:block!important;width:100%} #dashboard #autoCampaignChip .ac-chip-top{width:100%!important;height:46px!important;font-size:15px!important;justify-content:center} #dashboard .dp-topactions{grid-column:1/-1;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;width:100%} #dashboard .dp-topactions>button{width:100%!important;min-width:0!important;justify-content:center!important;box-sizing:border-box} #dashboard .dp-credit-header{grid-column:1/-1;justify-content:space-between!important;max-width:none!important;width:100%;box-sizing:border-box} } /* Phone top bar in 3 rows: [로고 | 매장] / [알림·공지·계정] / [자동 문자 | 포인트·충전] */ @media(max-width:760px){ #dashboard .dp-topbar{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:10px!important;align-items:center!important;height:auto!important} #dashboard .dp-top-left,#dashboard .dp-top-right{display:contents!important} #dashboard .dp-topbar .dp-logo{grid-column:span 2;order:1;justify-self:start} #dashboard .dp-topbar .dp-store-header{grid-column:span 4;order:2;min-width:0} #dashboard .dp-topbar .dp-topactions{grid-column:1/-1;order:3} #dashboard .dp-topbar #autoCampaignChip{grid-column:span 3;order:4;min-width:0} #dashboard .dp-topbar .dp-credit-header{grid-column:span 3;order:5;justify-self:end;max-width:none!important;width:auto} #dashboard .dp-topbar .dp-profile-menu{position:absolute!important} } /* Store name and add action as plain text: "매장명 | + 매장 추가" with no box, same weight as the credit figure. */ #dashboard .dp-topbar .dp-top-left .dp-store-header{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;gap:10px!important;align-items:center!important;width:auto!important;max-width:100%!important} #dashboard .dp-topbar .dp-top-left .dp-store-header #adminStoreSwitcher{flex:0 1 auto!important;width:auto!important;max-width:240px!important} #dashboard .dp-topbar .dp-top-left .dp-store-header select{height:auto!important;min-height:0!important;padding:4px 22px 4px 0!important;border:0!important;background-color:transparent!important;font-size:16px!important;font-weight:700!important;color:#101d3d!important;border-radius:0!important;width:auto!important;max-width:100%!important} #dashboard .dp-topbar .dp-top-left .dp-store-header #adminAddStoreButton{height:auto!important;min-height:0!important;padding:4px 0 4px 12px!important;margin:0!important;border:0!important;border-left:1px solid #cfd7e3!important;border-radius:0!important;background:transparent!important;color:#1761ec!important;font-size:15px!important;font-weight:700!important;line-height:1.2!important} @media(max-width:600px){#dashboard .dp-topbar .dp-top-left .dp-store-header{width:auto!important}#dashboard .dp-topbar .dp-top-left .dp-store-header #adminStoreSwitcher{flex:0 1 auto!important;width:auto!important}} #dashboard .dp-topbar .dp-top-left .dp-store-header #adminAddStoreButton{border-left:0!important;padding-left:0!important} /* Phone: the logo PNG has transparent padding on its left, so pull it back so the visible mark lines up with the content edge. */ @media(max-width:760px){#dashboard .dp-topbar .dp-logo img{margin-left:-24px!important}} /* Step ⑥ 앱 설치 button: same full-width outline button as the steps above, no extra box. */ #ownerInstallSlot{width:100%} #ownerInstallSlot .ai-card{display:block!important;width:100%!important;padding:0!important;margin:0!important;border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important} #ownerInstallSlot .ai-icon,#ownerInstallSlot .ai-body,#ownerInstallSlot .ai-later{display:none!important} #ownerInstallSlot .ai-btn{display:flex!important;width:100%!important;height:46px!important;box-sizing:border-box;align-items:center;justify-content:center;border:1.5px solid #bcd0fb!important;border-radius:14px!important;background:#fff!important;color:#2457dc!important;font-size:15px!important;font-weight:800!important;box-shadow:none!important} #ownerInstallSlot .ai-btn:hover{filter:none;background:#f5f8ff!important} /* Top bar: icon-only actions (labels move to aria-label and tooltips). */ .dp-topbar .dp-topactions .dp-announce,.dp-topbar .dp-topactions .dp-profile{width:52px;padding:0!important;gap:0!important;justify-content:center} .dp-topbar .dp-topactions .dp-announce>span:not(.dp-unread):not(.oi-ico):not(.oi-dot),.dp-topbar .dp-topactions .dp-profile>span{display:none!important} .dp-topbar .dp-topactions .oi-bar .oi-lab{display:none!important} .dp-topbar .dp-topactions .oi-bar .oi-ico{display:inline-flex} .dp-topbar .dp-topactions .dp-announce svg,.dp-topbar .dp-topactions .dp-profile svg{width:22px;height:22px} .dp-topbar .dp-topactions .dp-profile{position:relative} /* Icon-only top bar: no outlined boxes around the icons. */ .dp-topbar .dp-topactions .dp-announce,.dp-topbar .dp-topactions .dp-profile{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:14px!important} .dp-topbar .dp-topactions .dp-announce:hover,.dp-topbar .dp-topactions .dp-profile:hover{background:#eef4ff!important} /* Top bar: bell shows notification state as a dot (green on, red off), icons align to the right. */ .dp-topbar .dp-topactions{justify-content:flex-end!important;gap:8px!important} .dp-topbar .dp-topactions .oi-bar::after{content:"";position:absolute;top:9px;right:9px;width:9px;height:9px;border-radius:50%;background:#16a34a;border:2px solid #fff;box-sizing:content-box} .dp-topbar .dp-topactions .oi-bar.oi-off::after{background:#e11d48} .dp-topbar .dp-topactions .dp-announce:not(.oi-bar) svg{width:27px;height:27px} /* Top bar icons: fixed 52px square buttons packed to the right (previously stretched across the grid cell). */ .dp-topbar .dp-topactions{display:flex!important;justify-content:flex-end!important;align-items:center!important} .dp-topbar .dp-topactions>.dp-announce,.dp-topbar .dp-topactions>.dp-profile{flex:0 0 52px!important;width:52px!important;min-width:52px!important;max-width:52px!important} .dp-topbar .dp-topactions .oi-bar{position:relative!important} /* Top bar icons: keep the three icons as one tight group pushed to the right edge. */ .dp-topbar .dp-top-right{justify-content:flex-end!important;flex-wrap:wrap!important} .dp-topbar .dp-topactions{width:max-content!important;margin-left:auto!important;flex:0 0 auto!important;justify-content:flex-end!important;gap:8px!important} .dp-topbar .dp-topactions>*{margin:0!important;flex:0 0 auto!important} /* Actual cause: the phone grid (repeat(3,1fr)) stretched each icon to a third of the row. Pack the three icons into one right-aligned group. */ #dashboard .dp-topbar .dp-topactions{display:flex!important;grid-template-columns:none!important;width:auto!important;justify-self:end!important;justify-content:flex-end!important;gap:8px!important;grid-column:1/-1!important} #dashboard .dp-topbar .dp-topactions>button{width:52px!important;min-width:52px!important;flex:0 0 52px!important;max-width:52px!important;height:52px!important} /* Phone: thin divider under the icon row, separating it from the 자동 문자 / 포인트 row. */ @media(max-width:760px){#dashboard .dp-topbar .dp-topactions{border-bottom:1px solid #e3eaf6!important;padding-bottom:12px!important;margin-bottom:12px!important}} /* Auto-campaign button: match the mockup size (38px tall, 14px text, width fits the label). */ #dashboard .dp-topbar #autoCampaignChip{justify-self:start!important;width:auto!important} #dashboard .dp-topbar #autoCampaignChip .ac-chip-top{height:38px!important;min-height:38px!important;font-size:14px!important;width:auto!important;padding:0 18px!important;border-radius:999px!important} /* Phone: icon row spans the full card width so the divider runs edge to edge; icons stay packed to the right. */ #dashboard .dp-topbar .dp-topactions{width:100%!important;justify-content:flex-end!important} /* Single-store account: the store name replaces the switcher in the top-left. */ .dp-store-name{font-size:17px;font-weight:700;color:#1d3e78;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .dp-store-name[hidden]{display:none!important} /* Phone: 매장 현황 four cards in one row. Icon on top, label and number centred, a soft tint and wave per card. */ @media(max-width:760px){ #dashboard .stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;margin:10px 0 14px!important;border:0!important;background:none!important;overflow:visible} #dashboard .stats>.stat{position:relative;overflow:hidden;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:center!important;min-width:0!important;min-height:0!important;height:auto!important;padding:14px 4px 12px!important;border:1px solid #e3eaf6!important;border-radius:16px!important;box-shadow:0 4px 14px #174c900d!important;background:#fff!important;text-align:center!important;transform:none!important;gap:0} #dashboard .stats>.stat:nth-child(1){background:linear-gradient(#f3f7ff,#eef4ff)!important} #dashboard .stats>.stat:nth-child(2){background:linear-gradient(#f2fbf5,#eaf8ef)!important} #dashboard .stats>.stat:nth-child(3){background:linear-gradient(#f6f4ff,#efeeff)!important} #dashboard .stats>.stat:nth-child(4){background:linear-gradient(#fff9f1,#fff3e3)!important;border-color:#fbe1bd!important} #dashboard .stats>.stat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;background:radial-gradient(120% 100% at 50% 130%,rgba(120,150,220,.16),rgba(120,150,220,0) 70%);border-radius:0 0 16px 16px;pointer-events:none} #dashboard .stats .statIcon{display:grid!important;place-items:center;width:34px!important;height:34px!important;border-radius:12px!important;margin:0 auto 8px!important;flex-shrink:0} #dashboard .stats .statIcon svg{width:18px!important;height:18px!important} #dashboard .stats .statText{display:flex!important;flex-direction:column!important;align-items:center!important;gap:0!important;width:100%;font-size:11px!important;color:#5b6b85!important;text-align:center!important;white-space:normal!important;word-break:keep-all;line-height:1.3;position:relative;z-index:1} #dashboard .stats .statText>b,#dashboard .stats .statNum>b{font-size:17px!important;color:#14213d!important;letter-spacing:-.02em;margin-top:4px} #dashboard .stats .statNum{display:block;white-space:nowrap;position:relative;z-index:1} #dashboard .stats .statNum>b{display:inline!important} #dashboard .stats .statNum #returnRate{display:inline!important;font-size:11px!important;margin-left:3px;color:#c2570c!important;font-weight:700} } /* Phone: 고객 분석 four cards match the 매장 현황 cards (icon on top, tint and wave). */ @media(max-width:760px){ #customerAnalysisCard .analysisGrid{display:flex!important;gap:8px!important;border:0!important;background:none!important;overflow-x:auto!important;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:10px -4px 0!important;padding:0 4px 4px!important} #customerAnalysisCard .analysisGrid::-webkit-scrollbar{display:none} #customerAnalysisCard .analysisGrid>*{flex:0 0 calc(25% - 6px)!important;scroll-snap-align:start;min-width:0} #customerAnalysisCard .analysisGrid>.stat{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;padding:14px 4px 12px!important;border:1px solid #e3eaf6!important;border-radius:16px!important;box-shadow:0 4px 14px #174c900d!important;background:#fff!important;text-align:center!important;min-height:0!important;height:auto!important;transform:none!important;position:relative;overflow:hidden} #customerAnalysisCard .analysisGrid>.stat .statIcon{display:grid!important;place-items:center;width:34px!important;height:34px!important;border-radius:12px!important;margin:0 auto 8px!important;flex-shrink:0} #customerAnalysisCard .analysisGrid>.stat .statIcon svg{width:18px!important;height:18px!important} #customerAnalysisCard .analysisGrid>.stat .statText{display:flex!important;flex-direction:column!important;align-items:center!important;gap:0!important;width:100%;font-size:11px!important;color:#5b6b85!important;text-align:center!important;white-space:normal!important;word-break:keep-all;line-height:1.3} #customerAnalysisCard .analysisGrid>.stat .statText b{font-size:17px!important;color:#14213d!important;margin-top:4px!important;display:block!important} #customerAnalysisCard .analysisGrid{align-items:flex-start!important} #customerAnalysisCard .analysisGrid>.stat{gap:0!important;justify-content:flex-start!important} #customerAnalysisCard .analysisGrid>.stat .statNum{display:block;white-space:nowrap} #customerAnalysisCard .analysisGrid>.stat .statNum>b{display:inline!important;margin-top:4px!important} #customerAnalysisCard .analysisGrid>.stat #marketingRate{display:inline!important;font-size:11px!important;margin-left:3px;color:#c2570c!important;font-weight:700} #customerAnalysisCard .analysisGrid>.stat{height:111px!important;min-height:0!important;box-sizing:border-box!important;padding:12px 0 10px!important;overflow:hidden} #customerAnalysisCard .analysisGrid>.stat .statText{white-space:nowrap!important;font-size:10.5px!important;letter-spacing:-.02em} #customerAnalysisCard .analysisGrid>.stat .statText>*{white-space:nowrap!important} #customerAnalysisCard .analysisGrid>.stat .statIcon{width:30px!important;height:30px!important} #customerAnalysisCard .analysisGrid>.stat .statText{justify-content:flex-start!important;margin:8px 0 0!important;padding:0!important;font-weight:400!important;color:#6b7a90!important;align-self:stretch} #customerAnalysisCard .analysisGrid>.stat .statText b{font-size:16px!important;margin-top:2px!important} #customerAnalysisCard .analysisGrid .analysisItem{position:relative;overflow:hidden;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;min-width:0!important;padding:14px 4px 12px!important;border:1px solid #e3eaf6!important;border-radius:16px!important;box-shadow:0 4px 14px #174c900d!important;background:#fff!important;text-align:center!important;transform:none!important;cursor:pointer} #customerAnalysisCard .analysisGrid .analysisItem:nth-child(1){background:linear-gradient(#f3f7ff,#eef4ff)!important} #customerAnalysisCard .analysisGrid .analysisItem:nth-child(2){background:linear-gradient(#f2fbf5,#eaf8ef)!important} #customerAnalysisCard .analysisGrid .analysisItem:nth-child(3){background:linear-gradient(#f6f4ff,#efeeff)!important} #customerAnalysisCard .analysisGrid .analysisItem:nth-child(4){background:linear-gradient(#fff9f1,#fff3e3)!important;border-color:#fbe1bd!important} #customerAnalysisCard .analysisGrid .analysisItem::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;background:radial-gradient(120% 100% at 50% 130%,rgba(120,150,220,.16),rgba(120,150,220,0) 70%);border-radius:0 0 16px 16px;pointer-events:none} #customerAnalysisCard .analysisGrid .aiIco{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;margin:0 auto 8px;flex-shrink:0} #customerAnalysisCard .analysisGrid .aiIco svg{width:18px;height:18px} #customerAnalysisCard .analysisGrid .analysisItem:nth-child(1) .analysisItem .aiIco,#customerAnalysisCard .analysisGrid .analysisItem:nth-child(1) .aiIco{color:#2563eb!important;background:#edf5ff!important} #customerAnalysisCard .analysisGrid .analysisItem:nth-child(2) .analysisItem .aiIco,#customerAnalysisCard .analysisGrid .analysisItem:nth-child(2) .aiIco{color:#16a34a!important;background:#effaf1!important} #customerAnalysisCard .analysisGrid .analysisItem:nth-child(3) .analysisItem .aiIco,#customerAnalysisCard .analysisGrid .analysisItem:nth-child(3) .aiIco{color:#6366f1!important;background:#f2f2ff!important} #customerAnalysisCard .analysisGrid .analysisItem:nth-child(4) .analysisItem .aiIco,#customerAnalysisCard .analysisGrid .analysisItem:nth-child(4) .aiIco{color:#d97706!important;background:#fff8eb!important} #customerAnalysisCard .analysisGrid .analysisItem>div{width:100%;display:flex!important;flex-direction:column!important;align-items:center!important;position:relative;z-index:1} #customerAnalysisCard .analysisGrid .analysisItem>div>span:not(.aiIco){font-size:11px!important;color:#5b6b85!important;white-space:normal!important;word-break:keep-all;line-height:1.3} #customerAnalysisCard .analysisGrid .analysisItem b{font-size:17px!important;color:#14213d!important;margin-top:4px!important;letter-spacing:-.02em} #customerAnalysisCard .analysisGrid .analysisItem.hl b{color:#1658dd!important} } /* PC: the same 고객 분석 icons stay icon-sized (without this the SVGs fill the whole tile). */ #customerAnalysisCard .analysisGrid .aiIco{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;margin:0 auto 6px;flex-shrink:0} #customerAnalysisCard .analysisGrid .aiIco svg{width:18px;height:18px} @media(min-width:761px){ #customerAnalysisCard .analysisGrid .analysisItem{padding:16px 6px!important} #customerAnalysisCard .analysisGrid .analysisItem>div>span:not(.aiIco){font-size:13px;color:#5b6b85} #customerAnalysisCard .analysisGrid .analysisItem b{font-size:24px!important;margin-top:4px;display:block;letter-spacing:-.02em} #customerAnalysisCard .analysisGrid .analysisItem:nth-child(1) .aiIco{color:#2563eb;background:#fff} #customerAnalysisCard .analysisGrid .analysisItem:nth-child(2) .aiIco{color:#16a34a;background:#fff} #customerAnalysisCard .analysisGrid .analysisItem:nth-child(3) .aiIco{color:#6366f1;background:#fff} #customerAnalysisCard .analysisGrid .analysisItem:nth-child(4) .aiIco{color:#d97706;background:#fff} } /* 매장 현황 cards belong to the 매장 현황 screen only. The phone grid rule above must not bring them back on other screens. */ #dashboard > .stats[data-view-off]{display:none!important} /* Top bar 자동 문자: quiet label + switch (instead of a loud blue pill). */ #dashboard .dp-topbar #autoCampaignChip .ac-chip-top{height:36px!important;min-height:36px!important;padding:0 12px 0 14px!important;border:1px solid #e3eaf6!important;border-radius:999px!important;background:#fff!important;color:#4b5b76!important;box-shadow:none!important;font-size:13px!important;font-weight:700!important;display:inline-flex!important;align-items:center;gap:10px;white-space:nowrap} #dashboard .dp-topbar #autoCampaignChip .ac-sw{position:relative;display:inline-block;width:38px;height:22px;border-radius:999px;background:#cfd8e8;flex:none} #dashboard .dp-topbar #autoCampaignChip .ac-sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0002} #dashboard .dp-topbar #autoCampaignChip .ac-sw.on{background:#2d5be3} #dashboard .dp-topbar #autoCampaignChip .ac-sw.on::after{left:19px} .dp-tabbar,.dp-tabsheet{display:none} .dp-tabbar[hidden],.dp-tabsheet[hidden]{display:none!important} @media(max-width:760px){ #dashboard .dp-sidebar{display:none!important} #dashboard{padding-bottom:110px!important} .dp-tabbar{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);height:66px;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(255,255,255,.9);border-radius:999px;box-shadow:0 8px 28px rgba(20,33,61,.12),inset 0 1px 0 #fff;z-index:120;padding:6px;isolation:isolate} .dp-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:54px;border:0;background:transparent;border-radius:999px;font:inherit;font-size:11px;color:#7b8798;cursor:pointer;padding:0} .dp-tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .dp-tabbar{touch-action:none;-webkit-user-select:none;user-select:none} .dp-tabpill{position:absolute;top:6px;bottom:6px;left:0;border-radius:999px;background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(218,233,255,.46) 48%,rgba(237,246,255,.65));border:1px solid rgba(255,255,255,.95);box-sizing:border-box;box-shadow:inset 0 1px 2px #fff,inset 0 -2px 5px rgba(77,119,191,.12),0 3px 10px rgba(51,94,159,.1);transform:translate3d(var(--pill-x,6px),0,0) scale(var(--pill-scale,1));transition:transform .36s cubic-bezier(.22,1,.36,1),width .36s cubic-bezier(.22,1,.36,1);pointer-events:none;z-index:0;will-change:transform} .dp-tabpill::before{content:"";position:absolute;inset:2px;border-radius:inherit;border-top:1px solid #fff;border-bottom:1px solid rgba(255,255,255,.65);pointer-events:none} .dp-tabbar-pressed{--pill-scale:1.08} .dp-tabpill.dragging{transition:width .2s ease-out} .dp-tab{position:relative;z-index:1;transition:color .18s ease-out} .dp-tab>svg,.dp-tab>span{transition:transform .28s cubic-bezier(.22,1,.36,1);transform-origin:center} .dp-tabbar-pressed .dp-tab-preview>svg,.dp-tabbar-pressed .dp-tab-preview>span{transform:translateY(-1px) scale(1.12)} .dp-tab-preview{color:#1658dd} .dp-tab:focus-visible{outline:2px solid #2563eb;outline-offset:-3px} .dp-tab[aria-current="page"],.dp-tab[aria-expanded="true"]{color:#1658dd;font-weight:700} .dp-tabsheet{display:block!important;position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 86px);max-height:60vh;overflow:auto;background:#fff;border-radius:18px;box-shadow:0 12px 36px rgba(20,33,61,.18);padding:8px;z-index:119} .dp-tabsheet[hidden]{display:none!important} .dp-tabsheet button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:14px 12px;font:inherit;font-size:15px;color:#14213d;border-radius:12px;text-align:left;cursor:pointer} .dp-tabsheet button:active{background:#f3f6fb} .dp-tabsheet svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} } @media(prefers-reduced-motion:reduce){.dp-tabpill,.dp-tab>svg,.dp-tab>span{transition:none!important}.dp-tabbar-pressed{--pill-scale:1}.dp-tabbar-pressed .dp-tab-preview>svg,.dp-tabbar-pressed .dp-tab-preview>span{transform:none}} /* The service directory is a full phone page, separate from the account panel. */ .dp-services{display:none} .dp-services[hidden]{display:none!important} @media(max-width:760px){ html.dp-services-open,html.dp-services-open body{overflow:hidden} .dp-services{display:block;position:fixed;inset:0;z-index:119;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#fff;color:#14213d;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 112px);font-family:inherit;box-sizing:border-box;animation:dp-services-enter .22s ease-out} .dp-services-bar{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;min-height:60px;padding:env(safe-area-inset-top,0px) 12px 0;background:rgba(255,255,255,.96)} .dp-services-bar h1{margin:0;text-align:center;font-size:21px;font-weight:800;letter-spacing:-.04em} .dp-services button.dp-services-back{display:grid;place-items:center;width:44px;height:44px;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;border-radius:12px;color:#14213d;cursor:pointer} .dp-services svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .dp-services-body{max-width:580px;margin:0 auto;padding:0 20px} .dp-services-store{display:flex;align-items:center;gap:9px;margin:0;padding:18px 0 20px;border-bottom:1px solid #edf1f7;font-size:15px;font-weight:750;letter-spacing:-.025em} .dp-services-store svg{color:#2563eb;width:22px;height:22px;flex:none} .dp-services-store span{overflow-wrap:anywhere} .dp-services h2{margin:0 0 15px;font-size:18px;font-weight:800;letter-spacing:-.035em;line-height:1.4} .dp-services-recent{margin:23px 0 30px} .dp-services-recent-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .dp-services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:4px} .dp-services-group{margin:0 0 27px} .dp-services button.dp-service-item[hidden]{display:none} .dp-services button.dp-service-item{display:flex;align-items:center;gap:10px;min-width:0;width:100%;height:auto;min-height:53px;margin:0;padding:8px 0;border:0;border-radius:9px;background:transparent;box-shadow:none;text-align:left;color:#243955;font:inherit;font-size:14px;font-weight:550;letter-spacing:-.035em;cursor:pointer;-webkit-tap-highlight-color:transparent} .dp-service-icon{flex:none;display:grid;place-items:center;width:27px;height:30px} .dp-service-icon svg{width:25px;height:25px;filter:drop-shadow(0 2px 1px rgba(30,70,130,.06))} .dp-service-blue{color:#3484ff}.dp-service-green{color:#45c781}.dp-service-orange{color:#ff9a32}.dp-service-purple{color:#9380ee}.dp-service-coral{color:#f47d7d} .dp-service-label{min-width:0;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere} .dp-service-arrow{flex:none;margin-left:auto;color:#9ba7b9;font-size:22px;font-weight:400} .dp-services button.dp-service-recent{min-height:104px;flex-direction:column;justify-content:center;gap:10px;padding:15px 4px;border-radius:17px;text-align:center;background:linear-gradient(145deg,#f2f8ff,#eef6ff);font-size:13px;font-weight:700} .dp-service-recent:has(.dp-service-purple){background:linear-gradient(145deg,#f7f4ff,#f1efff)!important} .dp-service-recent:has(.dp-service-orange){background:linear-gradient(145deg,#fff9f0,#fff5e9)!important} .dp-service-recent .dp-service-icon{width:34px;height:34px}.dp-service-recent svg{width:32px;height:32px} .dp-services button.dp-service-item:active{opacity:.65} .dp-services button:focus-visible{outline:2px solid #2563eb;outline-offset:2px} } @keyframes dp-services-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.dp-services{animation:none}} /* Store header: logo removed; store name large at top-left with the store ID under it; the big title row below is hidden. */ #dashboard .adminStoreTitleRow{display:none!important} #dashboard .dp-store-name{display:none!important} #dashboard .dp-topbar .dp-id{display:flex!important;flex-direction:column;justify-content:center;flex:0 0 auto!important;width:max-content!important;max-width:100%!important;padding-left:2px;grid-column:auto!important} #dashboard .dp-topbar .dp-id-name{font-size:26px;font-weight:800;color:#1d3e78;letter-spacing:-.04em;line-height:1.2;white-space:nowrap} #dashboard .dp-topbar .dp-id-code{display:block;width:0;min-width:100%;box-sizing:border-box;overflow:hidden;font-size:13px;font-weight:700;color:#5b6b85;letter-spacing:.02em;margin-top:4px;white-space:nowrap} @media(max-width:760px){#dashboard .dp-topbar .dp-id-name{font-size:24px}} /* Header icons (알림·공지·계정): tighter spacing between them. */ #dashboard .dp-top-right .dp-topactions,#dashboard .dp-top-right{gap:2px!important} #dashboard .dp-top-right .dp-topactions{gap:2px!important} #dashboard .dp-top-right .dp-topactions>button{width:36px!important;min-width:36px!important;max-width:36px!important;padding:0!important;overflow:hidden;justify-content:center} /* Store ID stays within the store name's width: the name sets the box width; a long code shrinks to fit (JS). */ #dashboard .dp-topbar .dp-id-name{width:max-content!important;max-width:none!important;min-width:0!important;flex:0 0 auto!important;display:block!important} #dashboard .dp-topbar .dp-id{min-width:0!important} #dashboard .dp-topbar .dp-top-left:has(.dp-id){min-width:max-content!important;flex:0 1 auto!important} #dashboard .dp-topbar .dp-id{flex:0 0 auto!important;width:max-content!important;max-width:none!important} #dashboard .dp-topbar .dp-id-code{text-align:center} /* Phone header: store name + ID on the first row, store switcher / add-store on the second row (no overlap). */ @media(max-width:1020px){ #dashboard .dp-topbar .dp-id{grid-column:1 / span 4!important;grid-row:1!important;justify-self:start!important;order:0!important} #dashboard .dp-topbar .dp-store-header{grid-column:1 / -1!important;grid-row:2!important;order:0!important} } /* Phone: store dropdown on the left, "+ 매장 추가" flush to the right edge of the same row. */ @media(max-width:1020px){ #dashboard .dp-topbar .dp-store-header{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;max-width:none!important;flex:0 0 100%!important;flex-basis:100%!important;gap:8px} #dashboard .dp-topbar #adminAddStoreButton{margin-left:auto!important;margin-right:0!important;padding-right:0!important;white-space:nowrap} } /* Phone store row: full width, dropdown left, "+ 매장 추가" flush right (overrides the desktop width rules). */ @media(max-width:1020px){ #dashboard .dp-topbar .dp-top-left .dp-store-header{display:flex!important;width:100%!important;max-width:100%!important;flex:0 0 100%!important;justify-content:space-between!important;gap:8px!important;align-items:center!important} #dashboard .dp-topbar .dp-top-left .dp-store-header #adminStoreSwitcher{flex:1 1 auto!important;width:auto!important;max-width:calc(100% - 100px)!important} #dashboard .dp-topbar .dp-top-left .dp-store-header #adminAddStoreButton{margin-left:auto!important;flex:0 0 auto!important} } /* Phone: the store name itself is the dropdown. A small chevron sits beside the name; the whole name row opens the picker. */ #dashboard .dp-topbar .dp-id-row{position:relative!important;display:inline-flex!important;align-items:center!important;gap:6px!important;max-width:100%} #dashboard .dp-topbar .dp-id-row #adminStoreSwitcher{position:static!important;display:inline-flex!important;align-items:center!important;font-size:0!important;width:auto!important;flex:0 0 auto!important;max-width:none!important;min-width:0!important;margin:0!important} #dashboard .dp-topbar .dp-id-row #adminStoreSwitcher[hidden]{display:none!important} #dashboard .dp-topbar .dp-id-row #adminStoreSwitcher::before{content:none!important} #dashboard .dp-topbar .dp-id-row #adminStoreSwitcher::after{content:"";width:8px;height:8px;border-right:2px solid #1d3e78;border-bottom:2px solid #1d3e78;transform:rotate(45deg) translateY(-3px);margin-left:4px} #dashboard .dp-topbar .dp-id-row select{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;min-width:0!important;opacity:0!important;margin:0!important;padding:0!important;border:0!important;font-size:16px!important;cursor:pointer} /* Phone header: name row = store name (+ chevron) on the left and "+ 매장 추가" on the right; the ID sits under the name, left-aligned to its edge. */ @media(max-width:1020px){ #dashboard .dp-topbar .dp-store-header{display:none!important} #dashboard .dp-topbar .dp-id{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;width:100%!important;max-width:100%!important;gap:8px!important;grid-column:1 / -1!important} #dashboard .dp-topbar .dp-id-col{display:flex!important;flex-direction:column!important;align-items:flex-start!important;min-width:0;width:max-content;max-width:calc(100% - 110px)} #dashboard .dp-topbar .dp-id-code{text-align:left!important} #dashboard .dp-topbar .dp-id #adminAddStoreButton{display:inline-flex!important;margin:0 0 0 auto!important;flex:0 0 auto!important;white-space:nowrap} } /* Header tune (phone): lower the header, indent the store ID, align "+ 매장 추가" with the account icon, blue dropdown chevron. */ @media(max-width:1020px){ #dashboard .dp-topbar{margin-top:46px!important} #dashboard .dp-topbar .dp-id-name{font-weight:900!important} #dashboard .dp-topbar .dp-id-code{padding-left:8px!important;box-sizing:border-box!important} #dashboard .dp-topbar .dp-id #adminAddStoreButton{margin-right:9px!important} #dashboard .dp-topbar .dp-id-row #adminStoreSwitcher::after{border-right-color:#1761ec!important;border-bottom-color:#1761ec!important} } /* Phone: store name row (name + "+ 매장 추가") one row lower inside the card, leaving space above it. */ @media(max-width:1020px){ #dashboard .dp-topbar .dp-id{margin-top:56px!important} } /* Header icons: 알림 + 계정 only. 공지 lives in the 알림 panel's '공지' tab (owner-push.js); the megaphone stays only if the 알림 button could not be built. */ #dashboard .dp-topactions:has(#ownerInboxButton) .dp-announce:not(.oi-btn){display:none!important} #dashboard .dp-top-right .dp-topactions>#ownerInboxButton{overflow:visible!important} /* Phone header: no card. Store name, icons, 자동 문자 and credit sit straight on the page background. */ @media(max-width:1020px){ #dashboard .dp-topbar{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;outline:0!important} #dashboard .dp-topbar::before,#dashboard .dp-topbar::after{display:none!important} #dashboard > .top{background:transparent!important;border:0!important;box-shadow:none!important} } /* Phone sticky header (admin-redesign.js .dp-stickyhead): row 1 = 시작 가이드 link (left) + 알림·계정 (right), row 2 = store name / ID / "+ 매장 추가", then the divider. Stays at the top while scrolling. The 자동 문자 / credit row below lives in the original bar and scrolls normally. */ @media(max-width:760px){ #dashboard .dp-topbar.dp-stickyhead{position:sticky!important;top:0!important;z-index:115!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;align-items:center!important;column-gap:8px!important;row-gap:0!important;height:auto!important;margin:30px -12px 0!important;padding:12px 25px 0!important;background:#f4f8ff!important;border:0!important;box-shadow:none!important;border-radius:0!important} #dashboard .dp-stickyhead .dp-guide-link{grid-column:1!important;grid-row:1!important;justify-self:start;border:0!important;background:none!important;box-shadow:none!important;padding:6px 0!important;margin:0!important;height:auto!important;min-height:0!important;font:inherit;font-size:13px!important;font-weight:700!important;color:#1761ec!important;cursor:pointer} #dashboard .dp-stickyhead .dp-topactions{grid-column:2!important;grid-row:1!important;order:0!important;justify-self:end!important;display:flex!important;width:auto!important;gap:2px!important;border:0!important;padding:0!important;margin:0 -9px 0 0!important} #dashboard .dp-stickyhead .dp-id{grid-column:1 / -1!important;grid-row:2!important;order:0!important;width:100%!important;max-width:100%!important;margin:22px 0 0!important;padding:0 0 14px 2px!important;border-bottom:1px solid #e3eaf6!important} #dashboard .dp-stickyhead .dp-profile-menu{position:absolute!important;top:52px!important;right:16px!important} #dashboard .dp-topbar:not(.dp-stickyhead){margin-top:0!important;padding-top:14px!important;border:0!important} #dashboard .dp-topbar:not(.dp-stickyhead) .dp-topactions{display:none!important} } /* 마이페이지 (계정 icon): full screen on phone, right side panel on PC. */ .dp-mypage{position:fixed;inset:0;z-index:2000;background:rgba(15,23,42,.35);display:flex;justify-content:flex-end} .dp-mypage[hidden]{display:none!important} html.dp-mp-open,html.dp-mp-open body{overflow:hidden} .dp-mp-panel{width:min(440px,100%);height:100%;overflow-y:auto;background:#fff;padding:0 0 calc(env(safe-area-inset-bottom,0px) + 24px);box-shadow:-12px 0 40px rgba(20,40,80,.15);font-family:inherit;color:#14213d;-webkit-overflow-scrolling:touch} @media(max-width:760px){.dp-mypage{background:#fff}.dp-mp-panel{width:100%;box-shadow:none}} .dp-mp-bar{position:sticky;top:0;z-index:1;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;height:56px;padding:env(safe-area-inset-top,0px) 6px 0;background:#fff;border-bottom:1px solid #f0f2f6} .dp-mp-bar h2{margin:0;text-align:center;font-size:17px;font-weight:700} .dp-mypage button.dp-mp-back{width:44px!important;height:44px!important;min-height:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;color:#14213d!important;display:inline-flex;align-items:center;justify-content:center;cursor:pointer} .dp-mypage svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .dp-mp-profile{display:flex;align-items:center;gap:14px;padding:24px 20px 18px} .dp-mp-avatar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#e9f0ff;color:#1761ec} .dp-mp-avatar svg{width:28px;height:28px} .dp-mp-who{flex:1;min-width:0} .dp-mp-who strong{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dp-mp-who small{display:block;margin-top:3px;font-size:13.5px;color:#7a8799;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dp-mypage button.dp-mp-account{flex:none;height:34px!important;min-height:0!important;padding:0 14px!important;border:0!important;border-radius:999px!important;background:#f0f3f8!important;color:#4a5a73!important;font-size:13px!important;font-weight:700!important;box-shadow:none!important;cursor:pointer} .dp-mp-credit{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 20px 8px;padding:16px 18px;border-radius:16px;background:#f5f8ff;border:1px solid #e3ebfb} .dp-mp-credit small{display:block;font-size:13px;color:#5b6b85} .dp-mp-credit b{display:block;margin-top:2px;font-size:20px;font-weight:800;color:#11264b} .dp-mypage .dp-mp-credit button{height:38px!important;min-height:0!important;padding:0 16px!important;border:0!important;border-radius:10px!important;background:#1761ec!important;color:#fff!important;font-size:14px!important;font-weight:700!important;box-shadow:none!important;cursor:pointer} .dp-mp-body section{padding:14px 0 6px;margin:0 20px;border-top:1px solid #eef1f6} .dp-mp-body section:first-child{border-top:0} .dp-mp-body h3{margin:6px 0 4px;font-size:15px;font-weight:800;color:#14213d} .dp-mypage .dp-mp-row{display:flex!important;align-items:center;justify-content:space-between;width:100%;min-height:52px!important;height:auto!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;font:inherit;font-size:15.5px!important;font-weight:500!important;color:#243955!important;text-align:left;text-decoration:none;cursor:pointer} .dp-mypage .dp-mp-row svg{width:18px;height:18px;color:#b3bdcc} .dp-mypage .dp-mp-row:active span{opacity:.6} .dp-mypage button.dp-mp-logout{display:block;width:calc(100% - 40px)!important;margin:18px 20px 0!important;height:48px!important;min-height:0!important;border:1px solid #e6ebf3!important;border-radius:12px!important;background:#fff!important;color:#c2412d!important;font-size:15px!important;font-weight:700!important;box-shadow:none!important;cursor:pointer} .dp-mp-foot{margin:18px 20px 0;font-size:12px;color:#9aa6b8;text-align:center} /* 마이페이지 → 약관·정책: in-app page with its own ← bar. */ .dp-mp-doc{position:fixed;inset:0;z-index:2001;display:flex;flex-direction:column;background:#fff} .dp-mp-doc[hidden]{display:none!important} @media(min-width:761px){.dp-mp-doc{left:auto;width:min(720px,100%);box-shadow:-12px 0 40px rgba(20,40,80,.18)}} .dp-mp-doc .dp-mp-bar{position:static;flex:none} .dp-mp-doc h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dp-mp-doc button.dp-mp-back{width:44px!important;height:44px!important;min-height:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;color:#14213d!important;display:inline-flex;align-items:center;justify-content:center;cursor:pointer} .dp-mp-doc svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .dp-mp-frame{flex:1;width:100%;border:0;display:block;background:#fff} /* Mobile header keeps automatic messaging and credits in the same sticky surface. */ @media(max-width:760px){ #dashboard .dp-topbar.dp-secondarybar{display:none!important} #dashboard .dp-topbar.dp-stickyhead{grid-template-rows:auto auto auto!important;margin-top:8px!important;padding-top:8px!important;padding-bottom:12px!important;border-bottom:1px solid var(--dp-border)!important} #dashboard .dp-topbar.dp-stickyhead .dp-id{margin-top:12px!important;padding-bottom:12px!important;border-bottom:0!important} #dashboard .dp-topbar.dp-stickyhead .dp-top-right{grid-column:1 / -1!important;grid-row:3!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;width:100%!important;min-width:0!important;margin:0!important;padding:0!important} #dashboard .dp-topbar.dp-stickyhead .dp-credit-header{margin:0 0 0 auto!important;flex:0 1 auto!important;min-width:0!important} #dashboard .dp-topbar.dp-stickyhead #autoCampaignChip{flex:none} } /* Recent customers: all six fields fit the viewport, with no horizontal table scroll. */ #recentCustomersCard{min-width:0;overflow:hidden} #recentCustomersCard .recentCustomersHead{display:flex;align-items:baseline;justify-content:space-between;gap:12px} #recentCustomerCount{font-size:12px;font-weight:600;color:var(--dp-muted);white-space:nowrap} #recentCustomersCard .recentCustomersHint{margin:8px 0 14px;font-size:12px;line-height:1.5;color:var(--dp-muted)} #recentCustomersCard .recentCustomersList{display:grid;grid-template-columns:minmax(0,1fr);min-width:0} #recentCustomersCard button.recentCustomerItem{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0;height:auto;min-height:100px;margin:0;padding:16px 0;border:0;border-bottom:1px solid var(--dp-border);border-radius:0;box-shadow:none;background:transparent;color:var(--dp-ink);text-align:left;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent} #recentCustomersCard button.recentCustomerItem:last-child{border-bottom:0;padding-bottom:4px} #recentCustomersCard button.recentCustomerItem:hover{background:rgba(216,228,244,.2)} #recentCustomersCard button.recentCustomerItem:focus-visible{outline:2px solid var(--dp-blue);outline-offset:-2px;border-radius:8px} #recentCustomersCard .recentCustomerTop{display:flex;align-items:center;gap:8px;width:100%;min-width:0} #recentCustomersCard .recentCustomerNumber{font-size:21px;line-height:1.2;letter-spacing:.035em;font-weight:800;font-variant-numeric:tabular-nums} #recentCustomersCard .recentConsent{display:inline-flex;align-items:center;gap:5px;margin-left:auto;padding:4px 8px;border-radius:999px;font-size:11px;line-height:1.35;font-weight:650;white-space:nowrap} #recentCustomersCard .recentConsent i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none} #recentCustomersCard .recentConsent.is-yes{color:#247249;background:#e4f1e9} #recentCustomersCard .recentConsent.is-no{color:#596b83;background:#e7edf4} #recentCustomersCard .recentCustomerArrow{font-size:22px;line-height:1;color:#8a9ab0;font-weight:400} #recentCustomersCard .recentCustomerBalances{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:18px;row-gap:4px;font-size:13px;color:#596b83;line-height:1.5} #recentCustomersCard .recentCustomerBalances b{font-weight:750;color:var(--dp-ink);margin-left:3px;font-variant-numeric:tabular-nums} #recentCustomersCard .recentCustomerBalances .has-benefits,#recentCustomersCard .recentCustomerBalances .has-benefits b{color:var(--dp-blue)} #recentCustomersCard .recentCustomerDates{display:flex;align-items:center;flex-wrap:wrap;column-gap:12px;row-gap:3px;font-size:11px;line-height:1.5;color:var(--dp-muted);font-weight:400;font-variant-numeric:tabular-nums} #recentCustomersCard .recentCustomersEmpty{margin:12px 0;color:var(--dp-muted);font-size:14px} #recentCustomersCard #dataMsg:empty{display:none} @media(min-width:900px){ #recentCustomersCard button.recentCustomerItem{display:grid;grid-template-columns:minmax(200px,1fr) minmax(160px,1fr) minmax(190px,1fr);align-items:center;min-height:78px;gap:20px} #recentCustomersCard .recentCustomerDates{flex-direction:column;align-items:flex-end} } /* Calm merchant theme: surfaces and accents only; operational state colors stay distinct. */ :root{--dp-blue:#3564b8;--dp-ink:#25344a;--dp-border:#d5dfea;--dp-soft:#e9eef4;--dp-surface:#f7f9fc;--dp-muted:#596b83;--dp-selected:#d8e4f4} body:has(#dashboard:not(.hidden)){background:var(--dp-soft)!important;color:var(--dp-ink)} #dashboard{color:var(--dp-ink)} #dashboard .card,#dashboard .stats>.stat,#dashboard .dp-insight-card,#dashboard .customerValueStat, #dashboard .cb .panel,#dashboard .cb .aside,#dashboard .ac-kind,#dashboard .ac-tile, #dashboard .dp-sidebar,#dashboard .dp-topbar:not(.dp-stickyhead){background:var(--dp-surface)!important;border-color:var(--dp-border)!important;box-shadow:0 5px 20px rgba(40,61,90,.045)} #dashboard .dp-topbar .dp-id-name,#dashboard #adminStoreTitle,#dashboard .adminCategoryTitle, #dashboard .card h2,#dashboard .statText b,#dashboard .dp-insight-heading h2{color:var(--dp-ink)!important} #dashboard .muted,#dashboard .settingsHelp,#dashboard .statText,#dashboard .dp-subtitle{color:var(--dp-muted)} #dashboard .dp-topbar .dp-id-code{color:var(--dp-muted)!important} #dashboard input:not([type=checkbox]):not([type=radio]):not([type=range]),#dashboard textarea,#dashboard select{background-color:#f0f4f9;color:var(--dp-ink);border-color:#ccd7e4} #dashboard input::placeholder,#dashboard textarea::placeholder{color:#6f7e91;opacity:1} #dashboard input,#dashboard textarea,#dashboard select{accent-color:var(--dp-blue)} #dashboard .card button.themePrimary,#dashboard .card .themePrimary, #dashboard :is(.themePrimary,.primary,.couponBtn,.settingsSave,.smsBtn,.smsSend,.pointEarnBtn,.pointSpendBtn,.customerMessageCta), #dashboard .search button,#dashboard .cb .blue,#dashboard .ac-primary{background:var(--dp-blue)!important;color:#fff!important;border-color:var(--dp-blue)!important} #dashboard .themeSecondary,#dashboard .cb .secondary-action{background:#e2eaf5!important;color:#315d9f!important;border-color:#c6d4e6!important} #dashboard .dp-top-right .dp-credit-topup,#dashboard .dp-credit-topup,#dashboard .dp-credit-header,#dashboard .dp-credit-icon,#dashboard #dpHeaderCredits, #dashboard .dp-topbar .dp-guide-link,#dashboard .dp-topbar .dp-id #adminAddStoreButton, #dashboard .dp-side-link[aria-current=page],#dashboard .adminCategoryTitle svg{color:var(--dp-blue)!important} #dashboard .dp-topbar .dp-id-row #adminStoreSwitcher::after{border-color:var(--dp-blue)!important} #dashboard .dp-topbar #autoCampaignChip .ac-chip-top{background:var(--dp-surface)!important;border-color:var(--dp-border)!important;color:#4b5f78!important} #dashboard .dp-topbar #autoCampaignChip .ac-sw.on{background:var(--dp-blue)} #dashboard .dp-side-link[aria-current=page],#dashboard .dp-side-link:hover{background:var(--dp-selected)} #dashboard .dp-topactions>button{color:#365375!important} #dashboard .stats .statIcon{filter:saturate(.72)} #dashboard th{background:#e8eef6;color:#425a7a;border-color:var(--dp-border)} #dashboard td{border-color:#dce4ee} #dashboard .cb .step,#dashboard .cb .result,#dashboard .ac-cap,#dashboard .ac-quick{background:#e7eef8;border-color:#cddbec} #dashboard .cb :is(.amount,.link,.result strong),#dashboard .ac-link{color:var(--dp-blue)!important} #dashboard .cb .chips .active{background:var(--dp-selected);border-color:var(--dp-blue);color:var(--dp-blue)} #dashboard #customerAnalysisCard .analysisGrid .analysisItem:nth-child(1){background:linear-gradient(#eaf0f8,#e4edf8)!important;border-color:#d0ddec!important} #dashboard #customerAnalysisCard .analysisGrid .analysisItem:nth-child(2){background:linear-gradient(#eaf3ef,#e2eee8)!important;border-color:#cfe2d8!important} #dashboard #customerAnalysisCard .analysisGrid .analysisItem:nth-child(3){background:linear-gradient(#efedf7,#e8e6f2)!important;border-color:#dad5ea!important} #dashboard #customerAnalysisCard .analysisGrid .analysisItem:nth-child(4){background:linear-gradient(#f7f0e6,#f1e8d9)!important;border-color:#e6d9c4!important} .dp-services,.dp-mp-panel,.dp-mp-doc{background:var(--dp-surface);color:var(--dp-ink)} .dp-services-bar,.dp-mp-bar{background:#edf2f7;border-color:var(--dp-border)} .dp-services-store{border-color:var(--dp-border)} .dp-services-store svg,.dp-services button.dp-services-back,.dp-mypage button.dp-mp-back{color:#365375!important} .dp-services button.dp-service-item,.dp-mypage .dp-mp-row,.dp-mp-body h3{color:var(--dp-ink)!important} .dp-services button.dp-service-recent{background:linear-gradient(145deg,#e4edf8,#dfe9f6)} .dp-service-recent:has(.dp-service-purple){background:linear-gradient(145deg,#ece8f5,#e5e1f0)!important} .dp-service-recent:has(.dp-service-orange){background:linear-gradient(145deg,#f5eddf,#efe4d3)!important} .dp-mp-credit{background:#e4ecf7;border-color:#cddbed}.dp-mp-credit b{color:var(--dp-ink)} .dp-mypage .dp-mp-credit button{background:var(--dp-blue)!important} .dp-mypage .dp-mp-avatar{background:var(--dp-selected);color:var(--dp-blue)} body:has(#dashboard:not(.hidden)) :is(#supportPanel,.storeQrModal,.smsModal,#adminCustomerDialog){background:var(--dp-surface)!important;color:var(--dp-ink)} @media(max-width:760px){ #dashboard .dp-topbar.dp-stickyhead{background:var(--dp-soft)!important} .dp-tabbar{background:rgba(220,229,239,.94);border-color:#edf3fa;box-shadow:0 6px 22px rgba(36,56,84,.12),inset 0 1px 0 rgba(247,249,252,.85)} .dp-tabpill{background:linear-gradient(145deg,rgba(239,245,252,.95),rgba(187,207,234,.72));border-color:#edf3fa;box-shadow:inset 0 1px 2px #f7f9fc,inset 0 -2px 5px rgba(65,99,146,.1),0 3px 10px rgba(51,76,112,.08)} .dp-tab{color:#50657e}.dp-tab[aria-current=page],.dp-tab[aria-expanded=true],.dp-tab-preview{color:#2d569d} .dp-mypage{background:var(--dp-surface)} #dashboard .dp-topbar:not(.dp-stickyhead){background:transparent!important;box-shadow:none} } /* The paired-device notice is omitted from the dashboard. Device authorization is unchanged. */ #dashboard .earnDeviceNotice{display:none!important} /* Dashboard palette: clearer hierarchy and stronger, restrained accents. */ :root{--dp-blue:#2459cf;--dp-ink:#1c2b45;--dp-border:#dce3eb;--dp-soft:#eef1f2;--dp-surface:#fffefa;--dp-muted:#627189;--dp-selected:#dae7ff} body:has(#dashboard:not(.hidden)){background:#eef1f2!important} #dashboard .dp-topbar.dp-stickyhead{background:#fff!important;border-bottom-color:#eef1f5!important} #dashboard .card,#dashboard .dp-insight-card{background:#fffefa!important;border-color:#dce3eb!important;box-shadow:0 8px 26px rgba(29,51,80,.055)!important} #dashboard .stats>.stat:nth-child(1),#dashboard #customerAnalysisCard .analysisGrid .analysisItem:nth-child(1){background:linear-gradient(150deg,#ecf3ff,#dce9ff)!important;border-color:#bed4f9!important} #dashboard .stats>.stat:nth-child(2),#dashboard #customerAnalysisCard .analysisGrid .analysisItem:nth-child(2){background:linear-gradient(150deg,#eef9f1,#dcefe5)!important;border-color:#b9dec9!important} #dashboard .stats>.stat:nth-child(3),#dashboard #customerAnalysisCard .analysisGrid .analysisItem:nth-child(3){background:linear-gradient(150deg,#f4f0ff,#e8e0fa)!important;border-color:#d8c9ef!important} #dashboard .stats>.stat:nth-child(4),#dashboard #customerAnalysisCard .analysisGrid .analysisItem:nth-child(4){background:linear-gradient(150deg,#fff5e8,#ffe8ce)!important;border-color:#f1d3ac!important} #dashboard .stats .statIcon{filter:none!important} #dashboard .stats>.stat:nth-child(1) .statIcon{background:#d5e4ff!important;color:#2459cf!important} #dashboard .stats>.stat:nth-child(2) .statIcon{background:#d4eddb!important;color:#238557!important} #dashboard .stats>.stat:nth-child(3) .statIcon{background:#e5dcfa!important;color:#7656c1!important} #dashboard .stats>.stat:nth-child(4) .statIcon{background:#ffe3be!important;color:#b9661d!important} #dashboard .stats>.stat::after{opacity:.35} @media(max-width:760px){ .dp-tabbar{background:rgba(31,50,77,.94)!important;border-color:rgba(255,255,255,.15)!important;box-shadow:0 10px 30px rgba(19,39,70,.22),inset 0 1px 0 rgba(255,255,255,.15)!important} .dp-tab{color:#c4d0e0!important} .dp-tab[aria-current=page],.dp-tab[aria-expanded=true],.dp-tab-preview{color:#164bb3!important} .dp-tabpill{background:linear-gradient(145deg,#f8fbff,#cddfff)!important;border-color:#fff!important} } /* Phone: bring the store identity, credits, and first metrics closer together. */ @media(max-width:760px){ #dashboard .dp-topbar.dp-stickyhead{margin-top:0!important;padding-top:4px!important;padding-bottom:6px!important;row-gap:0!important} #dashboard .dp-topbar.dp-stickyhead .dp-id{margin-top:5px!important;padding-bottom:0!important} #dashboard .dp-topbar.dp-stickyhead .dp-top-right{min-height:38px!important;margin-top:0!important} #dashboard .dp-topbar.dp-stickyhead .dp-credit-header{min-height:38px!important} #dashboard .dp-topbar.dp-stickyhead .dp-credit-header .dp-credit-topup{min-height:28px!important} } /* Keep the visit status in one column regardless of masked-number glyph widths. */ #dashboard .dp-recent-desc{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:8px;align-items:center;min-width:0} #dashboard .dp-recent-desc strong{font-variant-numeric:tabular-nums;white-space:nowrap} #dashboard .dp-recent-badge{font-size:11px;white-space:nowrap} #dashboard .dp-recent-desc small{grid-column:1 / -1} /* Compact owner announcement in the phone header's upper whitespace. It scrolls away independently of the sticky controls. */ #dashboard .dp-promo{display:none} #dashboard .dp-side-link[hidden]{display:none!important} @media(max-width:760px){ #dashboard .dp-promo{display:flex!important;align-items:center;justify-content:space-between;gap:12px;position:relative;box-sizing:border-box!important;width:100%!important;min-height:76px!important;height:auto!important;margin:12px 0 8px!important;padding:12px 18px!important;border:0!important;border-radius:14px!important;background:linear-gradient(115deg,#1b3159 0%,#153e86 66%,#0f4cae 100%)!important;color:#fff!important;box-shadow:0 7px 18px rgba(24,55,113,.15)!important;text-align:left;cursor:pointer;overflow:hidden} #dashboard .dp-promo::before{content:"";position:absolute;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20900%20170%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M340%20170%20C490%20125%20540%2034%20705%2034%20C782%2034%20850%2019%20900%200%20L900%20170Z%22%20fill%3D%22%2374a9ff%22%20fill-opacity%3D%22.24%22%2F%3E%3Cpath%20d%3D%22M550%20170%20C660%20112%20736%2085%20900%2076%20L900%20170Z%22%20fill%3D%22%23b4d5ff%22%20fill-opacity%3D%22.16%22%2F%3E%3Cpath%20d%3D%22M515%20167%20C635%20104%20742%2052%20900%2058%22%20fill%3D%22none%22%20stroke%3D%22%23bbd9ff%22%20stroke-opacity%3D%22.42%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;opacity:1} #dashboard .dp-promo-copy,#dashboard .dp-promo-tail{position:relative;z-index:1} #dashboard .dp-promo-copy{display:flex;flex-direction:column;gap:2px;min-width:0} #dashboard .dp-promo-label{color:#bbdbff;font-size:11px;font-weight:700;line-height:1.25} #dashboard .dp-promo-title{font-size:14px;font-weight:800;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;letter-spacing:-.03em} #dashboard .dp-promo-tail{display:flex;align-items:center;gap:8px;flex:none} #dashboard .dp-promo-page{padding:4px 7px;border-radius:999px;background:rgba(0,20,60,.26);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap} #dashboard .dp-promo-arrow{font-size:27px;font-weight:300;line-height:1;opacity:.9} #dashboard .dp-promo:focus-visible{outline:3px solid #78abff!important;outline-offset:3px} } /* Desktop: the store strip occupies its own row; the legacy empty top row must not reserve space. */ @media(min-width:1021px){ #dashboard{padding-top:0!important} #dashboard>.dp-topbar.dp-secondarybar{position:sticky!important;top:0!important;left:auto!important;right:auto!important;width:calc(100% + 232px)!important;height:auto!important;min-height:107px!important;margin-left:-232px!important;box-sizing:border-box!important;z-index:105!important;background:#eef1f2!important;border:0!important;border-bottom:1px solid #d5dfe9!important;border-radius:0!important;box-shadow:none!important} #dashboard>.top:not(:has(#adminAddStoreForm:not([hidden]),#adminCurrentCustomer:not([hidden]))){display:none!important} #dashboard>.dp-sidebar{top:127px!important;max-height:calc(100vh - 143px)!important} #dashboard #admin-category-0{position:relative!important;display:block!important;height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;font-size:0!important} #dashboard>.stats{margin-top:20px!important} } /* PC: the news banner sits in the header where the logo used to be (the logo is no longer shown). */ @media(min-width:761px){ #dashboard .dp-topbar .dp-promo{display:flex!important;align-items:center;justify-content:space-between;gap:14px;position:relative;box-sizing:border-box;flex:1 1 auto;min-width:260px;max-width:860px;min-height:76px;margin:0 24px 0 32px;padding:12px 20px 12px 24px;border:0;border-radius:14px;background:linear-gradient(115deg,#1b3159 0%,#153e86 66%,#0f4cae 100%);color:#fff;box-shadow:0 6px 16px rgba(24,55,113,.14);text-align:left;cursor:pointer;overflow:hidden;font:inherit} #dashboard .dp-topbar .dp-promo:hover{filter:brightness(1.06)} #dashboard .dp-topbar .dp-top-left:has(>.dp-promo){flex:1 1 auto!important;min-width:0!important;display:flex;align-items:center} #dashboard .dp-topbar .dp-promo-copy{display:flex;flex-direction:column;gap:2px;min-width:0} #dashboard .dp-topbar .dp-promo-label{color:#bbdbff;font-size:13px;font-weight:700;line-height:1.25} #dashboard .dp-topbar .dp-promo-title{font-size:18px;font-weight:800;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;letter-spacing:-.03em} #dashboard .dp-topbar .dp-promo-tail{display:flex;align-items:center;gap:8px;flex:none} #dashboard .dp-topbar .dp-promo-page{padding:4px 8px;border-radius:999px;background:rgba(0,20,60,.26);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap} #dashboard .dp-topbar .dp-promo-arrow{font-size:26px;font-weight:300;line-height:1;opacity:.9} #dashboard .dp-topbar .dp-promo:focus-visible{outline:3px solid #78abff;outline-offset:3px} } @media(min-width:761px) and (max-width:1100px){#dashboard .dp-topbar .dp-promo{margin:0 12px 0 16px;min-height:66px}#dashboard .dp-topbar .dp-promo-title{font-size:15px}} /* Phone home (A안): a larger banner under the sticky header, then the icon grid of the most used services. */ .dp-quick{display:none} @media(max-width:760px){ #dashboard .dp-promo{min-height:118px!important;margin:14px 0 4px!important;padding:18px 18px 16px!important;border-radius:20px!important;align-items:flex-end!important} #dashboard .dp-promo-copy{gap:6px} #dashboard .dp-promo-label{font-size:12px} #dashboard .dp-promo-title{font-size:18px;line-height:1.32} .dp-quick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));row-gap:16px;column-gap:4px;margin:18px -4px 18px;padding:0} .dp-quick[data-view-off]{display:none} #dashboard .dp-quick-item{height:auto!important;min-height:0!important;width:auto!important;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important} .dp-quick-item{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;padding:0;border:0;background:none;color:#122445;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent} .dp-quick-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;transition:transform .12s} .dp-quick-item:active .dp-quick-icon{transform:scale(.94)} .dp-quick-item:focus-visible{outline:none}.dp-quick-item:focus-visible .dp-quick-icon{box-shadow:0 0 0 3px #9cc0ff} .dp-quick-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .dp-quick-label{font-size:12px;font-weight:600;line-height:1.3;letter-spacing:-.03em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} .dp-quick-blue{background:#e8f0ff;color:#2459cf}.dp-quick-green{background:#e7f6ec;color:#15803d}.dp-quick-orange{background:#fff1df;color:#c2620a} .dp-quick-purple{background:#efedff;color:#5b4fd6}.dp-quick-coral{background:#ffeaea;color:#d14343}.dp-quick-gray{background:#eef1f5;color:#475569} } /* Phone header, compact: store name ⌄ (+) with 알림·계정 on the same line, 자동 문자 · credit under it. 시작 가이드 stays reachable from the banner and 전체 메뉴. */ @media(max-width:760px){ #dashboard .dp-topbar.dp-stickyhead{grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;row-gap:10px!important;margin-top:0!important;padding-top:calc(env(safe-area-inset-top,0px) + 10px)!important;padding-bottom:12px!important} #dashboard .dp-stickyhead .dp-guide-link{display:none!important} #dashboard .dp-topbar.dp-stickyhead .dp-id{grid-column:1!important;grid-row:1!important;align-self:center!important;margin:0!important;padding:0 0 0 2px!important;border:0!important;min-width:0!important} #dashboard .dp-stickyhead .dp-topactions{grid-column:2!important;grid-row:1!important;align-self:start!important;align-items:center!important;height:var(--dp-namerow,30px)!important;margin-top:0!important;overflow:visible!important} #dashboard .dp-stickyhead .dp-topactions>button{height:44px!important;min-height:44px!important;margin:-7px 0!important} #dashboard .dp-stickyhead .dp-id-row{min-height:30px!important} #dashboard .dp-topbar.dp-stickyhead .dp-top-right{grid-row:2!important} #dashboard .dp-stickyhead .dp-id-row{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important;flex-wrap:nowrap!important} #dashboard .dp-stickyhead .dp-id-row .dp-id-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #dashboard .dp-topbar.dp-stickyhead .dp-id-row #adminAddStoreButton{display:inline-grid!important;place-items:center!important;flex:0 0 auto!important;width:36px!important;height:36px!important;min-height:0!important;margin:-3px -6px -3px -4px!important;padding:0!important;border:0!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important;color:var(--dp-id-arrow,#2459cf)!important;font-size:0!important;line-height:0!important;position:relative} #dashboard .dp-topbar.dp-stickyhead .dp-id-row #adminAddStoreButton::before{content:"";position:absolute;left:50%;top:50%;width:15px;height:2.2px;margin:-1.1px 0 0 -7.5px;border-radius:2px;background:currentColor} #dashboard .dp-topbar.dp-stickyhead .dp-id-row #adminAddStoreButton::after{content:"";position:absolute;left:50%;top:50%;width:2.2px;height:15px;margin:-7.5px 0 0 -1.1px;border-radius:2px;background:currentColor} #dashboard .dp-topbar.dp-stickyhead .dp-id-row #adminAddStoreButton[hidden]{display:none!important} #dashboard .dp-topbar.dp-stickyhead .dp-id-row #adminAddStoreButton::after,#dashboard .dp-topbar.dp-stickyhead .dp-id-row #adminAddStoreButton::before{pointer-events:none} } /* Phone header, one line (1안): 매장명 ⌄ · · · [980P ＋] 🔔 👤. 매장 전환·추가·코드 live in the store sheet, 충전 behind the credit chip, 자동 문자 in its home shortcut. */ .dp-id-caret{display:none} .dp-store-sheet[hidden]{display:none!important} @media(max-width:760px){ #dashboard .dp-topbar.dp-stickyhead{grid-template-columns:minmax(0,1fr) auto auto!important;grid-template-rows:auto!important;column-gap:6px!important;row-gap:0!important;padding-bottom:10px!important} #dashboard .dp-topbar.dp-stickyhead .dp-id{grid-column:1!important;grid-row:1!important} #dashboard .dp-topbar.dp-stickyhead>.dp-credit-header{grid-column:2!important;grid-row:1!important} #dashboard .dp-stickyhead .dp-topactions{grid-column:3!important;grid-row:1!important;align-self:center!important;height:auto!important} #dashboard .dp-topbar.dp-stickyhead .dp-topactions>button{margin:0!important;width:42px!important;min-width:42px!important;max-width:42px!important;padding:0!important} #dashboard .dp-stickyhead .dp-topactions{gap:0!important;margin-right:-8px!important} #dashboard .dp-topbar.dp-stickyhead>.dp-credit-header{min-height:0!important} #dashboard .dp-topbar.dp-stickyhead .dp-top-right{display:none!important} #dashboard .dp-topbar.dp-stickyhead .dp-id .dp-id-code,#dashboard .dp-topbar.dp-stickyhead .dp-id #adminAddStoreButton,#dashboard .dp-topbar.dp-stickyhead .dp-id #adminStoreSwitcher{display:none!important} #dashboard .dp-topbar.dp-stickyhead .dp-id-col{width:100%!important;min-width:0!important;max-width:100%!important} #dashboard .dp-topbar.dp-stickyhead .dp-id-row{width:max-content!important;max-width:100%!important} #dashboard .dp-stickyhead .dp-id-row{cursor:pointer;gap:2px!important;padding:6px 4px 6px 0;margin:-6px 0;border-radius:10px;-webkit-tap-highlight-color:transparent} #dashboard .dp-stickyhead .dp-id-row:focus-visible{outline:2px solid #2459cf;outline-offset:2px} #dashboard .dp-stickyhead .dp-id-row .dp-id-name{font-size:20px!important} /* 긴 매장명: 화살표·크레딧·아이콘을 덮지 않고 말줄임(…)으로 줄인다. */ #dashboard .dp-topbar.dp-stickyhead .dp-id-row .dp-id-name{width:auto!important;max-width:100%!important;flex:0 1 auto!important;overflow:hidden!important;text-overflow:ellipsis!important} .dp-id-caret{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;color:#596b83} .dp-id-caret svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} #dashboard .dp-topbar.dp-stickyhead>.dp-credit-header{display:inline-flex!important;align-items:center!important;gap:2px!important;height:34px!important;margin:0!important;padding:0 4px 0 12px!important;border:0!important;border-radius:17px!important;background:#e8f0ff!important;box-shadow:none!important;color:#2459cf!important;cursor:pointer;flex:none!important;width:auto!important;min-width:0!important} #dashboard .dp-topbar.dp-stickyhead>.dp-credit-header>.dp-credit-icon,#dashboard .dp-topbar.dp-stickyhead>.dp-credit-header>span:not([class]){display:none!important} #dashboard .dp-topbar.dp-stickyhead>.dp-credit-header #dpHeaderCredits{font-size:15px!important;font-weight:800!important;color:inherit!important;letter-spacing:-.02em} #dashboard .dp-topbar.dp-stickyhead>.dp-credit-header .dp-credit-topup{display:inline-grid!important;place-items:center!important;width:28px!important;height:28px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:14px!important;background:transparent!important;box-shadow:none!important;color:inherit!important;font-size:0!important;position:relative} #dashboard .dp-topbar.dp-stickyhead>.dp-credit-header .dp-credit-topup::before{content:"+";position:static!important;transform:none!important;width:auto!important;height:auto!important;background:none!important;font-size:19px;font-weight:600;line-height:1} #dashboard .dp-topbar.dp-stickyhead>.dp-credit-header.dp-credit-low{background:#fff1df!important;color:#b45309!important} #dashboard .dp-topbar.dp-stickyhead>.dp-credit-header.dp-credit-low .dp-credit-topup{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;margin-left:4px!important;padding:0 7px!important;height:24px!important;border-radius:12px!important;background:#d97706!important;color:#fff!important} #dashboard .dp-topbar.dp-stickyhead>.dp-credit-header.dp-credit-low /* "충전" 글자는 글꼴마다 세로 위치가 달라(안드로이드에서 위로 쏠림) 글자 칸 한가운데에 맞춘 SVG로 그린다. */ .dp-credit-topup::before{content:"";display:block;width:28px!important;height:24px!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='24' viewBox='0 0 28 24'%3E%3Ctext x='14' y='12' text-anchor='middle' dominant-baseline='central' font-family='-apple-system,BlinkMacSystemFont,Apple SD Gothic Neo,Noto Sans KR,Noto Sans CJK KR,sans-serif' font-size='13' font-weight='800' fill='white'%3E%EC%B6%A9%EC%A0%84%3C/text%3E%3C/svg%3E") center/28px 24px no-repeat!important} .dp-quick-item{position:relative} .dp-quick-item[data-auto="on"] .dp-quick-icon::after,.dp-quick-item[data-auto="stopped"] .dp-quick-icon::after{content:"";position:absolute;top:-1px;right:calc(50% - 30px);width:11px;height:11px;border-radius:50%;background:#16a34a;border:2px solid #fff} .dp-quick-item[data-auto="stopped"] .dp-quick-icon::after{background:#d97706} .dp-store-sheet{position:fixed;inset:0;z-index:400;display:flex;align-items:flex-end;background:rgba(15,25,45,.42)} .dp-store-panel{width:100%;max-height:80vh;overflow:auto;box-sizing:border-box;padding:22px 20px calc(18px + env(safe-area-inset-bottom,0px));border-radius:24px 24px 0 0;background:#fff;color:#122445;outline:none} .dp-store-panel h2{margin:0 0 10px;font-size:18px;font-weight:800} .dp-store-list{display:flex;flex-direction:column} .dp-store-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:10px 4px;border:0;border-bottom:1px solid #eef1f5;background:none;color:#122445;font:inherit;text-align:left;cursor:pointer} .dp-store-row-name{display:flex;flex-direction:column;gap:2px;font-size:16px;font-weight:600;min-width:0} .dp-store-row-code{font-size:12px;font-weight:600;color:#66758b} .dp-store-row.is-current .dp-store-row-name{font-weight:800} .dp-store-row-mark{flex:none;font-size:12px;font-weight:800;color:#2459cf;background:#e8f0ff;border-radius:10px;padding:3px 9px} .dp-store-add{display:block;width:100%;min-height:52px;margin:6px 0 0;padding:0 4px;border:0;background:none;color:#2459cf;font:inherit;font-size:16px;font-weight:800;text-align:left;cursor:pointer} .dp-store-close{display:block;width:100%;height:50px;margin-top:10px;border:0;border-radius:14px;background:#f1f4f8;color:#122445;font:inherit;font-size:15px;font-weight:700;cursor:pointer} } /* Phone: sections run edge to edge without card frames; a thin grey band separates them. Choices, inputs and buttons keep their outlines. PC keeps cards. */ @media(max-width:760px){ #dashboard>.card{margin:0 -12px 10px!important;padding:22px 20px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important} #dashboard>.card[data-view-off],#dashboard>.card[hidden]{display:none!important} #dashboard .stats>.stat,#customerAnalysisCard .analysisGrid .analysisItem{border:0!important;box-shadow:none!important} #dashboard .dp-promo[data-view-off]{display:none!important} #dashboard .dp-insights{gap:10px!important;margin-left:-12px!important;margin-right:-12px!important} #dashboard .dp-insights>.dp-insight-card{margin:0!important;padding:22px 20px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important} } /* 자동 문자 screen: the screen title replaces the card's own heading. */ #autoScreenBody>#autoCampaignCard>.ac-head{display:none} #autoScreenBody>#autoCampaignCard{margin-top:0} @media(max-width:760px){ #autoScreenBody>#autoCampaignCard{margin:0 -12px 10px!important;padding:6px 20px 22px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important} } /* 자동 문자 screen: no boxes inside the page either. Sections are separated by thin lines; the 한 번에 켜기 banner, buttons, switches and the message preview keep their shape. */ #autoScreenBody .ac-results{border:0!important;border-radius:0!important;background:transparent!important;padding:4px 0 18px!important;border-bottom:1px solid #eef1f5!important} #autoScreenBody .ac-opportunity-featured{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:18px 0!important;border-bottom:1px solid #eef1f5!important} #autoScreenBody .ac-opportunity-row{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:14px 0!important;border-bottom:1px solid #eef1f5!important} #autoScreenBody .ac-cap{border:0!important;border-radius:0!important;background:transparent!important;padding:16px 0!important} #autoScreenBody .ac-kind,#autoScreenBody .ac-tile{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding-left:0!important;border-bottom:1px solid #eef1f5!important} /* 자동 문자 status beside the screen title; the card no longer repeats "자동 발송 중". */ #autoScreen>h2{display:flex;align-items:center} #autoScreen .auto-status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:-.02em;background:#eef1f5;color:#55657c} #autoScreen .auto-status[hidden]{display:none} #autoScreen .auto-status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor} #autoScreen .auto-status[data-state="on"]{background:#e7f6ec;color:#15803d} #autoScreen .auto-status[data-state="stopped"]{background:#fff1df;color:#b45309} #autoScreenBody .ac-feature-tag-on{display:none!important} /* Home shortcut: off = red dot. */ @media(max-width:760px){ .dp-quick-item[data-auto="off"] .dp-quick-icon::after{content:"";position:absolute;top:-1px;right:calc(50% - 30px);width:11px;height:11px;border-radius:50%;border:2px solid #fff;background:#dc2626} } /* 슈퍼관리자가 편집하는 홈 배너: 색 테마와 이미지 */ #dashboard .dp-promo.dp-promo-theme-navy{background:linear-gradient(115deg,#0d1730 0%,#1c2b45 70%,#26395c 100%)!important} #dashboard .dp-promo.dp-promo-theme-green{background:linear-gradient(115deg,#0d3b2a 0%,#126b45 66%,#18915b 100%)!important} #dashboard .dp-promo.dp-promo-theme-orange{background:linear-gradient(115deg,#7c2d12 0%,#c2410c 66%,#ea580c 100%)!important} @media(max-width:760px){ /* 휴대폰: 이미지가 배너 전체를 채운다(권장 1080×390). 글자가 있으면 왼쪽을 어둡게 깔아 읽히게 한다. */ /* 모든 배너를 같은 비율로 맞춰 넘길 때 높이가 바뀌지 않게 한다. */ #dashboard .dp-promo{aspect-ratio:1080/390;min-height:0!important} #dashboard .dp-promo.dp-promo-has-img{background:var(--dp-promo-img) center/cover no-repeat,#1b3159!important} #dashboard .dp-promo.dp-promo-has-img::before{background:linear-gradient(90deg,rgba(8,18,40,.62) 0%,rgba(8,18,40,.25) 55%,rgba(8,18,40,0) 100%)!important} #dashboard .dp-promo.dp-promo-img-only::before{background:none!important} #dashboard .dp-promo.dp-promo-img-only .dp-promo-copy{visibility:hidden} #dashboard .dp-promo.dp-promo-has-img{align-items:flex-end!important} } @media(min-width:761px){ /* PC: 상단 띠가 낮고 넓어 사진이 잘리므로, 글자는 그대로 두고 이미지를 오른쪽에 작게 보여 준다. */ #dashboard .dp-promo.dp-promo-has-img{padding-right:12px} #dashboard .dp-promo.dp-promo-has-img .dp-promo-tail::before{content:"";display:block;width:132px;height:48px;border-radius:9px;background:var(--dp-promo-img) center/cover no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.18)} #dashboard .dp-promo.dp-promo-img-only .dp-promo-title:empty::before{content:"이벤트 보기"} } /* Dimensional home shortcuts: preserve the existing navigation and five-column grid. */ @media(max-width:760px){ #dashboard .dp-quick{row-gap:17px;column-gap:5px} #dashboard .dp-quick-icon{ width:58px;height:58px;border-radius:19px; font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif; font-size:33px;line-height:1; background:linear-gradient(145deg,#f7faff 0%,#e9f0ff 100%); border:1px solid #dce8fa; box-shadow:inset 0 1px 2px #ffffffcc,0 3px 8px #1b417012; text-shadow:0 2px 3px #263b5820; } #dashboard .dp-quick-item[data-service="benefits"] .dp-quick-icon{background:linear-gradient(145deg,#fff8f1,#fff0e3);border-color:#ffe9d3} #dashboard .dp-quick-item[data-service="analysis"] .dp-quick-icon, #dashboard .dp-quick-item[data-service="feedback"] .dp-quick-icon{background:linear-gradient(145deg,#f0fff8,#e5f7ed);border-color:#d9f1e5} #dashboard .dp-quick-item[data-service="roulette"] .dp-quick-icon{background:linear-gradient(145deg,#fff3f9,#ffe8f1);border-color:#f9e2ed} #dashboard .dp-quick-item[data-service="settings"] .dp-quick-icon{background:linear-gradient(145deg,#fcf2ff,#f2eaff);border-color:#eee1fa} #dashboard .dp-quick-item[data-service="waiting"] .dp-quick-icon{background:linear-gradient(145deg,#f7f2ff,#eeeaff);border-color:#e8e0ff} #dashboard .dp-quick-label{font-size:12px;font-weight:700;color:#172b4b} } /* High-resolution vector home shortcuts: no raster sprite, no platform-dependent emoji. */ @media(max-width:760px){ #dashboard .dp-quick-icon{ display:grid!important;place-items:center!important; width:60px!important;height:60px!important; border-radius:19px!important; background:linear-gradient(145deg,#f9fbff,#e4edff)!important; border:1px solid #dce8fa!important; box-shadow:inset 0 1px 2px #fff,0 4px 9px #243b6815!important; color:inherit!important;text-shadow:none!important; } #dashboard .dp-quick-icon svg{ display:block!important;width:47px!important;height:47px!important; stroke:none!important;fill:none!important; filter:drop-shadow(0 2px 1.5px #18294c35); } #dashboard .dp-quick-item[data-service="benefits"] .dp-quick-icon{background:linear-gradient(145deg,#fff9f3,#ffebd9)!important;border-color:#ffead4!important} #dashboard .dp-quick-item[data-service="analysis"] .dp-quick-icon, #dashboard .dp-quick-item[data-service="feedback"] .dp-quick-icon{background:linear-gradient(145deg,#f3fff8,#dff8e9)!important;border-color:#dcf2e5!important} #dashboard .dp-quick-item[data-service="roulette"] .dp-quick-icon{background:linear-gradient(145deg,#fff5fa,#ffe5f0)!important;border-color:#f9e2ed!important} #dashboard .dp-quick-item[data-service="waiting"] .dp-quick-icon{background:linear-gradient(145deg,#fbf5ff,#eee3ff)!important;border-color:#eadcff!important} #dashboard .dp-quick-item[data-service="settings"] .dp-quick-icon{background:linear-gradient(145deg,#fff6fc,#f7e6fa)!important;border-color:#f3e0f4!important} #dashboard .dp-quick-item[data-service="more"] .dp-quick-icon{background:linear-gradient(145deg,#f8fbff,#e6efff)!important} } /* Returning customers: keep original outline arrow and add a small live percentage at its upper right. */ #dashboard .stats .stat[onclick*="returning"] .statIcon{position:relative!important} #dashboard .stats .stat[onclick*="returning"] .statIcon svg{display:block!important} #dashboard .stats .stat[onclick*="returning"] #returnRate{ position:absolute!important;top:-5px!important;right:-13px!important; display:block!important;margin:0!important;padding:2px 4px!important; border-radius:7px!important;background:#df7d2d!important;color:#fff!important; font-size:9px!important;font-weight:800!important;letter-spacing:-.04em!important; line-height:1.15!important;white-space:nowrap!important; } @media(max-width:760px){ #dashboard .stats .stat[onclick*="returning"] .statIcon{ width:34px!important;height:34px!important;min-width:34px!important; margin:0 auto 8px!important;background:#ffe6c6!important; } #dashboard .stats .stat[onclick*="returning"] .statIcon svg{width:18px!important;height:18px!important} #dashboard .stats .stat[onclick*="returning"] #returnRate{ top:-4px!important;right:-13px!important;font-size:8px!important;padding:2px 3px!important; } #dashboard .stats .stat[onclick*="returning"] .statNum{white-space:nowrap!important} } /* Glossy dimensional shortcuts — retain the 2×5 layout and all original handlers. */ @media(max-width:760px){ #dashboard .dp-quick-icon{ position:relative!important;overflow:visible!important; background:linear-gradient(150deg,#ffffff 0%,#e8f0ff 66%,#dbe8ff 100%)!important; border:1px solid #d8e6ff!important;border-radius:20px!important; box-shadow:inset 1px 2px 3px #ffffff,inset -2px -3px 6px #9dbce226,0 6px 12px #15386e1b!important; } #dashboard .dp-quick-icon:before{ content:"";position:absolute;pointer-events:none; left:9%;top:5%;width:82%;height:38%;border-radius:55% 55% 40% 40%; background:linear-gradient(180deg,#ffffffa8,#ffffff00);opacity:.9; } #dashboard .dp-quick-icon svg{ position:relative;z-index:1;width:49px!important;height:49px!important; filter:drop-shadow(0 2px 2px #1b2d5b36) saturate(1.2) contrast(1.07)!important; } #dashboard .dp-quick-item[data-service="benefits"] .dp-quick-icon{background:linear-gradient(145deg,#fffefa,#fff1dd 75%,#ffe7cb)!important} #dashboard .dp-quick-item[data-service="analysis"] .dp-quick-icon, #dashboard .dp-quick-item[data-service="feedback"] .dp-quick-icon{background:linear-gradient(145deg,#fafffc,#e5f9eb 75%,#d8f4e0)!important} #dashboard .dp-quick-item[data-service="roulette"] .dp-quick-icon{background:linear-gradient(145deg,#fffafd,#ffe8f2 75%,#ffdaec)!important} #dashboard .dp-quick-item[data-service="waiting"] .dp-quick-icon{background:linear-gradient(145deg,#fffaff,#f0e7ff 75%,#e5d9ff)!important} #dashboard .dp-quick-item[data-service="settings"] .dp-quick-icon{background:linear-gradient(145deg,#fffaff,#f8e9ff 75%,#eedcff)!important} } /* Individually cropped glossy icons. No shared sprite positioning or transforms. */ @media(max-width:760px){ #dashboard .dp-quick-item .dp-quick-icon{position:relative!important;isolation:isolate!important;width:52px!important;height:52px!important;min-width:52px!important;border:0!important;border-radius:17px!important;box-shadow:none!important;overflow:visible!important;background:transparent!important} #dashboard .dp-quick-item .dp-quick-icon::before,#dashboard .dp-quick-item .dp-quick-icon svg{display:none!important} #dashboard .dp-quick-item .dp-quick-icon::after{content:""!important;display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:1!important;pointer-events:none!important;border:0!important;border-radius:17px!important;box-shadow:none!important;background-color:transparent!important;background-repeat:no-repeat!important;background-size:100% 100%!important;background-position:center center!important;transform:none!important} #dashboard .dp-quick-item[data-service="customers"] .dp-quick-icon::after{background-image:url('/assets/glossy-customers.svg?v=20261111-centered-art-v2')!important} #dashboard .dp-quick-item[data-service="benefits"] .dp-quick-icon::after{background-image:url('/assets/glossy-benefits.svg?v=20261111-centered-art-v2')!important} #dashboard .dp-quick-item[data-service="campaign"] .dp-quick-icon::after{background-image:url('/assets/glossy-campaign.svg?v=20261111-centered-art-v2')!important} #dashboard .dp-quick-item[data-service="automatic"] .dp-quick-icon::after{background-image:url('/assets/glossy-automatic.svg?v=20261111-centered-art-v2')!important} #dashboard .dp-quick-item[data-service="analysis"] .dp-quick-icon::after{background-image:url('/assets/glossy-analysis.svg?v=20261111-centered-art-v2')!important} #dashboard .dp-quick-item[data-service="waiting"] .dp-quick-icon::after{background-image:url('/assets/glossy-waiting.svg?v=20261111-centered-art-v2')!important} #dashboard .dp-quick-item[data-service="roulette"] .dp-quick-icon::after{background-image:url('/assets/glossy-roulette.svg?v=20261111-centered-art-v2')!important} #dashboard .dp-quick-item[data-service="feedback"] .dp-quick-icon::after{background-image:url('/assets/glossy-feedback.svg?v=20261111-centered-art-v2')!important} #dashboard .dp-quick-item[data-service="settings"] .dp-quick-icon::after{background-image:url('/assets/glossy-settings.svg?v=20261111-centered-art-v2')!important} #dashboard .dp-quick-item[data-service="more"] .dp-quick-icon::after{background-image:url('/assets/glossy-more.svg?v=20261111-centered-art-v2')!important} #dashboard .dp-quick-item[data-service="automatic"][data-auto]::before{content:"";position:absolute;z-index:5;top:-2px;left:calc(50% + 17px);width:11px;height:11px;border-radius:50%;border:2px solid white;background:#16a34a;pointer-events:none} #dashboard .dp-quick-item[data-service="automatic"][data-auto="off"]::before{background:#dc2626} #dashboard .dp-quick-item[data-service="automatic"][data-auto="stopped"]::before{background:#d97706} } /* Center each shortcut's artwork and label on the same five-column grid axis. */ @media(max-width:760px){ #dashboard .dp-quick{grid-template-columns:repeat(5,minmax(0,1fr));align-items:start} #dashboard .dp-quick-item{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:7px!important;min-width:0!important;text-align:center!important} #dashboard .dp-quick-item .dp-quick-icon{flex:0 0 52px!important;align-self:center!important;margin:0!important} #dashboard .dp-quick-item[data-service] .dp-quick-icon::after{transform:none!important;background-position:center center!important} #dashboard .dp-quick-item .dp-quick-label{display:block;width:100%;margin:0!important;text-align:center!important;line-height:1.3!important} } /* Phone account navigation: profile lives in the fifth tab; credit and bell align right. */ @media(max-width:760px){ #dashboard .dp-topbar.dp-stickyhead .dp-topactions .dp-profile{display:none!important} #dashboard .dp-topbar.dp-stickyhead>.dp-credit-header{justify-self:end!important} #dashboard .dp-topbar.dp-stickyhead .dp-topactions{justify-self:end!important;margin-right:0!important;justify-content:flex-end!important} html.dp-mp-open .dp-tabbar{z-index:2001} .dp-mypage .dp-mp-panel{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))!important} } /* Independently framed artwork for each phone banner. */ @media(max-width:760px){ #dashboard .dp-promo[data-art]:not([data-art=""]){ aspect-ratio:3/1!important; min-height:0!important; padding:0!important; overflow:hidden!important; background:#173c89!important; } #dashboard .dp-promo[data-art]:not([data-art=""])::before{display:none!important} #dashboard .dp-promo[data-art]:not([data-art=""]) .dp-promo-copy{visibility:hidden!important} #dashboard .dp-promo[data-art]:not([data-art=""]) .dp-promo-art{ display:block!important; position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:contain!important; background:#f7faff!important; z-index:0!important; } #dashboard .dp-promo[data-art]:not([data-art=""]) .dp-promo-tail{z-index:2!important;margin:0 12px 10px 0!important} } @media(min-width:761px){ #dashboard .dp-promo-art{display:none!important} #dashboard .dp-promo[data-art]:not([data-art=""]) .dp-promo-tail::before{display:none!important} } /* Keep the onboarding banner readable in the phone carousel and in the compact desktop header. */ @media(max-width:760px){ #dashboard .dp-promo[data-art="setup"]{aspect-ratio:2.1/1!important} #dashboard .dp-promo[data-art="setup"] .dp-promo-art{object-fit:cover!important} } @media(min-width:761px){ #dashboard .dp-promo[data-art="setup"]{background:#1459de!important} #dashboard .dp-promo[data-art="setup"] .dp-promo-copy{visibility:visible!important} }