/* ShiftTilt home dashboard: a code-built copy of the product screen on a 2000 x 1300 stage, scaled to fit. Light and dark. */
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{font-family:var(--body);-webkit-font-smoothing:antialiased}
.stagewrap{width:100%;overflow:hidden}
.app{--ab:#ffffff;--at:#1c1c1c;--am:#6b6b6b;--al:#e9e9ec;--ac:#f6f6f6;--ah:#f9fbfc;--chip:#f3f5f7;--sel:#ffffff;--rowline:#eae9ee;
 --t-bg:#ccfbf1;--t-fg:#19635a;--y-bg:#fef3c7;--y-fg:#92400e;--b-bg:#dbeafe;--b-fg:#1f3fae;--pr-bg:#dbeafe;--pr-fg:#1950d8;--pc-bg:#dcfce7;--pc-fg:#27ad09;--on-bg:#1a1a1a;--on-fg:#fff;--brand:#d76a2d;
 position:relative;width:2000px;height:1300px;transform-origin:0 0;background:var(--ab);color:var(--at);overflow:hidden;font-size:20px}
.app[data-r=dark]{--ab:#141414;--at:#ececec;--am:#9a9a9a;--al:#2a2a2c;--ac:#1f1f20;--ah:#1a1a1b;--chip:#232325;--sel:#2e2e30;--rowline:#27272a;
 --t-bg:#0f3d38;--t-fg:#7ee8d6;--y-bg:#45330c;--y-fg:#fcd34d;--b-bg:#172554;--b-fg:#93c5fd;--pr-bg:#172a5a;--pr-fg:#8ab4ff;--pc-bg:#12351f;--pc-fg:#4ade80;--on-bg:#ececec;--on-fg:#141414;--brand:#ec682c}
.top{position:absolute;left:0;top:0;width:2000px;height:84px;border-bottom:1px solid var(--al)}
.brand{position:absolute;left:29px;top:19px;display:flex;align-items:center;gap:10px}
.brand b{font:600 29px/40px var(--head);letter-spacing:-.03em;color:var(--at)}
.brand .lg{color:inherit;margin:0 -2px 0 0}
.brand svg{color:var(--at);margin-top:3px}
.search{position:absolute;left:538px;top:17px;width:665px;height:49px;border-radius:25px;background:var(--ac);display:flex;align-items:center;gap:10px;padding-left:20px;color:var(--am);font-size:18px}
.topr{position:absolute;right:0;top:0;height:84px;width:500px}
.tsw{position:absolute;left:73px;top:18px;width:149px;height:46px;border-radius:9px;background:var(--ac);border:1px solid var(--al);display:flex;align-items:center;padding:3px;gap:2px}
.tsw button{flex:1;height:38px;border:0;border-radius:7px;background:none;color:var(--am);display:flex;align-items:center;justify-content:center;cursor:pointer}
.tsw button.on{background:var(--sel);color:var(--at);box-shadow:0 0 0 1px var(--al)}
.vr{position:absolute;left:245px;top:28px;width:1px;height:28px;background:var(--al)}
.bell{position:absolute;left:268px;top:27px;color:var(--am)}
.me{position:absolute;left:318px;top:20px;display:flex;align-items:center;gap:9px}
.me i{width:44px;height:44px;border-radius:50%;background:var(--ac);display:flex;align-items:center;justify-content:center;font:500 18px var(--body);font-style:normal;color:var(--at)}
.me b{font-weight:400;font-size:18px;color:var(--at)}
.side{position:absolute;left:0;top:85px;width:95px;height:1215px;border-right:1px solid var(--al)}
.ni{position:absolute;left:0;width:94px;text-align:center}
.ni .nic{display:flex;width:48px;height:34px;margin:0 auto;align-items:center;justify-content:center;border-radius:12px;color:var(--at)}
.ni.on .nic{height:48px;background:var(--ac)}
.ni.on .nl{margin-top:11px}
.ni .nl{display:block;margin-top:8px;font-size:15px;color:var(--at)}
.ni:nth-child(1){top:27px}.ni:nth-child(2){top:138px}.ni:nth-child(3){top:231px}.ni:nth-child(4){top:325px}.ni:nth-child(5){top:418px}.ni.set{top:1130px}
.main{position:absolute;left:95px;top:85px;width:1905px;height:1215px}
.cards{position:absolute;left:65px;top:55px;width:1777px;height:175px;display:grid;grid-template-columns:repeat(3,1fr);gap:21px}
.cd{position:relative;border-radius:16px;padding:18px 22px;height:175px}
.cd b{display:block;font:500 46px/56px var(--head);letter-spacing:-.02em}
.cd>span{position:absolute;left:22px;right:30px;bottom:29px;display:flex;align-items:center;justify-content:space-between;font-size:21.2px}
.cd.t{background:var(--t-bg);color:var(--t-fg)}.cd.y{background:var(--y-bg);color:var(--y-fg)}.cd.bl{background:var(--b-bg);color:var(--b-fg)}
.seg{position:absolute;right:23px;top:25px;height:41px;width:178px;border-radius:21px;background:var(--ab);display:flex;align-items:center;padding:3px;font-size:17px}
.seg i{flex:1;text-align:center;font-style:normal;line-height:35px;border-radius:18px;color:var(--am)}
.seg i.on{background:var(--b-fg);color:#fff}
.rule{position:absolute;left:65px;top:298px;width:1777px;border:0;border-top:1px solid var(--ac)}
.chips{position:absolute;left:65px;top:333px;display:flex;gap:11px}
.chips i{height:42px;padding:0 19px;border-radius:21px;background:var(--chip);font-style:normal;font-size:17px;line-height:42px;color:var(--at)}
.chips i.on{background:var(--on-bg);color:var(--on-fg)}
.tbl{position:absolute;left:62px;top:410px;width:1777px;height:730px;border:1px solid var(--al);border-radius:14px;overflow:hidden;background:var(--ab)}
.th,.tr{display:grid;grid-template-columns:311px 228px 195px 196px 197px 195px 197px 207px 51px;height:75px;align-items:center}
.th{height:55px;background:var(--ah);border-bottom:1px solid var(--al);font-size:17px;color:var(--am)}
.tr{border-bottom:1px solid var(--rowline);font-size:18.5px;color:var(--am)}
.tr:last-child{border-bottom:0}
.c{display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden}
.th .c:first-child,.tr .c:first-child{padding-left:30px}
.tr .c.n{color:var(--at);font-weight:500;display:block;text-overflow:ellipsis;line-height:75px;padding-right:12px}
.tr .c span{color:var(--am);text-overflow:ellipsis;overflow:hidden}
.c.k{color:var(--at);margin-left:-9px}
.av{display:inline-flex;align-items:center;justify-content:center;flex:none;width:25px;height:25px;border-radius:50%;font:600 9.5px var(--body);font-style:normal}
.av.plus{background:var(--orange);color:#fff;font-size:9.5px}
.stk{display:inline-flex;flex:none}
.stk .av{margin-left:-8px;box-shadow:0 0 0 1.5px var(--ab)}
.stk .av:first-child{margin-left:0}
.pill{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:19px;font-size:18.5px}
.pill i{width:14px;height:14px;border-radius:50%}
.pill.pr{background:var(--pr-bg);color:var(--pr-fg)}.pill.pr i{background:#1d4ed8}
.pill.pc{background:var(--pc-bg);color:var(--pc-fg)}.pill.pc i{background:#22c55e}

.a1{background:var(--a1-bg);color:var(--a1-fg)}.a2{background:var(--a2-bg);color:var(--a2-fg)}.a3{background:var(--a3-bg);color:var(--a3-fg)}.a4{background:var(--a4-bg);color:var(--a4-fg)}.a5{background:var(--a5-bg);color:var(--a5-fg)}.a6{background:var(--a6-bg);color:var(--a6-fg)}

.app.cam{transform-origin:0 0;transition:transform 1.1s cubic-bezier(.5,0,0,1)}
.cd,.tbl .tr{transition:box-shadow .5s ease}
.cd.hl{box-shadow:0 0 0 4px #ec682c}
.tbl .tr.hl{box-shadow:inset 0 0 0 3px #ec682c;border-radius:8px}
@media (prefers-reduced-motion:reduce){.app.cam{transition:none}}

/* the product screen keeps the product's own font (Inter), whatever the website body font is */
:root{--body:"Inter",system-ui,sans-serif}