body{margin:0;background:#e9e4f1;font:12px Verdana,Arial,sans-serif;color:#000}
a{color:#3a1d8f}
#page{width:900px;max-width:100%;margin:0 auto;background:#fff;border-left:1px solid #a58cc9;border-right:1px solid #a58cc9;min-height:100vh}
#bar{background:#4a2a82;color:#e5dcf5;font-size:11px;padding:3px 10px;text-align:right}
#bar a{color:#e5dcf5}
#head{padding:8px 12px 0;display:flex;align-items:flex-end;justify-content:space-between}
#logo{font:bold 34px Arial Black,Arial,sans-serif;color:#5b2fa8;letter-spacing:-1px;font-style:italic}
#logo span{font:11px Verdana;color:#777;font-style:normal;letter-spacing:0;margin-left:6px}
#nav{display:flex;gap:1px;margin:6px 12px 0;border-bottom:3px solid #7b4fb0}
#nav a{background:#cfc2e6;color:#000;text-decoration:none;padding:4px 14px;font-size:13px;font-weight:bold}
#nav a.on{background:#7b4fb0;color:#fff}
#nav a:hover{background:#b9a5dc}
#main{display:flex;gap:10px;padding:10px 12px;align-items:flex-start}
#left{width:290px;flex:none}
#right{flex:1;min-width:0}
.box{border:2px solid #7b4fb0;margin-bottom:10px}
.box h2{margin:0;background:#7b4fb0;color:#fff;font:normal 16px Verdana,Arial,sans-serif;text-align:center;padding:4px 0 5px}
.box h2 a{color:#d6c8ee}
.in{padding:8px 10px}
.av{display:flex;justify-content:center;align-items:flex-end}
.links{margin-top:6px}
.links div{margin:3px 0}
.ico{display:inline-block;width:13px;height:9px;margin-right:5px;border:1px solid #444}
.fr{display:flex;gap:10px;margin:10px 0;min-height:50px}
.fr .av{width:50px;flex:none}
.fr small{display:block;font-style:italic;margin-top:1px}
.lbl{font-size:16px;margin-bottom:1px}
#status{width:100%;box-sizing:border-box;border:1px solid #777;padding:1px 3px;font:12px Arial}
#upd{margin-top:6px;font:12px Arial;padding:2px 8px;border:2px outset #ddd;background:#e6e6e6;cursor:pointer}
#upd:active{border-style:inset}
.it{display:flex;gap:10px;padding:8px 10px;min-height:76px}
.it.g{background:#ececec}
.it .av{width:50px;flex:none;height:60px}
.it p{margin:0 0 4px;font-size:13px}
.it .ab{font-size:12px}
.grp{color:#b07a00;font-weight:bold;text-decoration:none}
.lg{width:44px;height:44px;border-radius:50%;background:#5b2fa8;border:3px solid #ccc;color:#fff;font:bold 8px Arial;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1}
/* blocky figure, same proportions as the old avatar render */
.fig{position:relative;width:38px;height:58px}
.fig i{position:absolute;display:block}
.fig .h{left:12px;top:0;width:14px;height:13px;background:#e8c547;border:1px solid #333;box-sizing:border-box}
.fig .h:after{content:"";position:absolute;left:3px;top:4px;width:2px;height:2px;background:#000;box-shadow:5px 0 #000}
.fig .t{left:7px;top:14px;width:24px;height:22px;background:var(--c);border:1px solid #222;box-sizing:border-box}
.fig .a1,.fig .a2{top:14px;width:7px;height:22px;background:#e8c547;border:1px solid #333;box-sizing:border-box}
.fig .a1{left:0}.fig .a2{left:31px}
.fig .l1,.fig .l2{top:37px;width:12px;height:21px;background:var(--l);border:1px solid #222;box-sizing:border-box}
.fig .l1{left:7px}.fig .l2{left:19px}
.big{transform:scale(2.7);transform-origin:bottom center;margin-bottom:2px}
#foot{text-align:center;font-size:11px;color:#555;padding:20px 0}
@media(max-width:720px){#main{flex-direction:column}#left{width:100%}#nav{flex-wrap:wrap}}

/* ---- catalog ---- */
#cat-side{width:190px;flex:none}
#cat-side ul{list-style:none;margin:0;padding:0}
#cat-side li a{display:block;padding:4px 10px;text-decoration:none;font-size:12px;border-bottom:1px solid #e3dbf0}
#cat-side li a:hover{background:#ece6f4}
#cat-side li a.sel{background:#d9ccef;font-weight:bold;color:#000}
#cat-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#ece6f4;border:1px solid #bfaedd;padding:6px 8px;margin-bottom:10px}
#cat-top input,#cat-top select{font:12px Arial;border:1px solid #777;padding:1px 3px}
#cat-top .sp{flex:1}
#grid{display:flex;flex-wrap:wrap;gap:10px}
.item-card{width:152px;text-align:center;padding:6px 4px;font-size:11px}
.item-card:hover{background:#f3eefa}
.thumb{width:110px;height:110px;margin:0 auto 4px;border:1px solid #ccc;background:#fff;display:flex;align-items:center;justify-content:center;position:relative}
.item-card a.nm{display:block;font-size:12px;margin-bottom:2px}
.price{color:#2d8a2d;font-weight:bold}
.crt{color:#555}
.new{color:#c00;font-weight:bold}
#pager{text-align:center;margin:12px 0;font-size:12px}
#pager a{margin:0 3px;text-decoration:none}
#pager a.cur{font-weight:bold;color:#000}
#empty{padding:30px;text-align:center;color:#555}
.ic{position:relative;width:64px;height:64px}
.ic i{position:absolute;display:block;border:1px solid #222;box-sizing:border-box}
.ic .shirt{left:14px;top:12px;width:36px;height:40px;background:var(--c)}
.ic .sl1,.ic .sl2{top:12px;width:12px;height:22px;background:var(--c)}
.ic .sl1{left:2px}.ic .sl2{left:50px}
.ic .hat1{left:8px;top:30px;width:48px;height:22px;background:var(--c)}
.ic .hat2{left:18px;top:10px;width:28px;height:22px;background:var(--c)}
.ic .face{left:10px;top:10px;width:44px;height:44px;background:#e8c547}
.ic .e1,.ic .e2{top:24px;width:5px;height:7px;background:#000;border:0}
.ic .e1{left:23px}.ic .e2{left:36px}
.ic .mo{left:22px;top:38px;width:20px;height:5px;background:#a33;border-radius:0 0 8px 8px}
.ic .gb{left:12px;top:30px;width:40px;height:16px;background:var(--c)}
.ic .gh{left:26px;top:14px;width:10px;height:18px;background:#6b4a2a}
.ic .hd{left:14px;top:14px;width:36px;height:36px;background:var(--c)}
@media(max-width:720px){#cat-side{width:100%}}

/* ---- profile ---- */
.fig .hat{left:9px;top:-6px;width:20px;height:9px;background:#5b2fa8;border:1px solid #222;box-sizing:border-box}
.purl{text-align:center;font-size:11px;margin-bottom:4px}
.purl a{display:block}
.stats{width:100%;border-collapse:collapse}
.stats td{padding:3px 4px;font-size:12px}
.stats td:first-child{text-align:right;font-weight:bold;width:60%}
.badges,.frs{display:flex;flex-wrap:wrap}
.bd{width:25%;text-align:center;padding:6px 2px;font-size:11px}
.bd .ring{width:52px;height:52px;border-radius:50%;margin:0 auto 4px;border:5px solid var(--b);background:radial-gradient(#fff,#cfc5e0);color:var(--b);font-size:24px;line-height:42px}
.bd a{display:block}
.frd{width:33.3%;text-align:center;padding:4px 0 8px;font-size:11px}
.frd .av{height:66px}
.inv{display:flex;gap:12px;padding:10px}
.inv-cats{width:150px;flex:none}
.inv-cats a{display:block;border:1px solid #666;padding:4px 0;margin-bottom:6px;text-align:center;font-size:13px;color:#555;text-decoration:none;background:#fafcff}
.inv-cats a.sel{background:#7b4fb0;color:#fff;border-color:#4a2a82}
.inv-grid{flex:1;display:flex;flex-wrap:wrap;gap:12px;align-content:flex-start;min-height:120px}
.inv-grid .item-card{width:130px;text-align:left;padding:0}
.inv-grid .thumb{width:120px;height:120px;margin:0 0 3px;border:1px solid #222}
.inv-grid .nm{font-weight:bold;font-size:12px}
@media(max-width:720px){.inv{flex-direction:column}.inv-cats{width:100%}}

/* ---- renderer canvases ---- */
canvas.rc{display:block}
.thumb canvas.rc{width:100%;height:100%}
canvas.rc[data-drag]{cursor:grab}
canvas.rc[data-drag]:active{cursor:grabbing}