/* Rocoto UI: the approved early-2010s 'stereo faceplate' design. Built from the design mock's own CSS. */

/* ===== 1. THEME VARIABLES (this is what "Make it yours" changes) ===== */
:root{
  --g-hi2:#c4f28e; --g-hi:#b7ee80; --g-mid:#8bd03f; --g-mid2:#7cc23c; --g-lo:#6fb52f; --g-lo2:#5fa326; --g-line:#4c9a1c;
  --ac:#9be15d; --ac2:#4c9a1c; --ac-text:#183504;
  --f-body:"Lato","Carlito","Calibri","Segoe UI",sans-serif;
  --f-logo:"Saira Extra Condensed","Roboto Condensed","DejaVu Sans Condensed","Arial Narrow",sans-serif;
  --f-mono:"Share Tech Mono","DejaVu Sans Mono",Consolas,monospace;
  --bg:#242424; --page-tile:url("page_tile.png"); --bar-tile:url("bar_tile.png");
  --card-a:#3b3b3b; --card-b:#2a2a2a; --line:#0d0d0d; --hi:rgba(255,255,255,.14);
  --text:#d8d8d8; --head:#f0f0f0; --muted:#a9a9a9; --inset-a:#141414; --inset-b:#262626;
  --shadow:rgba(0,0,0,.55); --glow:radial-gradient(ellipse at 50% 0,#4a4a4a,transparent 70%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--text);font-family:var(--f-body);font-weight:400;
  background-color:var(--bg);background-image:var(--page-tile);background-size:20px 20px}
/* wallpaper presets */
body:before{content:"";position:fixed;inset:0;background:var(--glow);pointer-events:none;opacity:.6}
.wrap{position:relative;max-width:1080px;margin:0 auto;padding:20px 16px 60px}

/* ===== 2. FACEPLATE HEADER ===== */
.face{position:relative;min-height:150px;border-radius:10px;border:1px solid #000;overflow:hidden;
  background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,0) 55%,rgba(0,0,0,.28)),#3a3a3a var(--bar-tile);background-size:auto,168px 168px;
  box-shadow:0 14px 28px var(--shadow),inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 6px rgba(0,0,0,.5);
  display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 30px}
.screw{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ddd,#555);box-shadow:0 1px 2px #000}
.screw:nth-child(1){left:10px;top:10px}.screw:nth-child(2){right:10px;top:10px}.screw:nth-child(3){left:10px;bottom:10px}.screw:nth-child(4){right:10px;bottom:10px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand svg{flex:none;filter:drop-shadow(0 4px 4px rgba(0,0,0,.5))}
.wm{font-family:var(--f-logo);font-weight:100;font-size:96px;line-height:.9;letter-spacing:-2px;color:#f2f2f2;text-shadow:0 2px 0 #000,0 -1px 0 #999}
.tag{margin-top:6px;font-size:14px;font-weight:300;letter-spacing:2px;text-transform:uppercase;color:#e2e2e2;text-shadow:0 1px 0 #000}
.screen{position:relative;width:100%;background:#0d1a10;border-radius:6px;border:3px solid #111;box-shadow:inset 0 0 20px #000,0 1px 0 rgba(255,255,255,.3);color:var(--ac);font-family:var(--f-mono);padding:10px 14px;font-size:14px;text-shadow:0 0 6px var(--ac)}
.screen:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 40%);pointer-events:none}
.eq{display:flex;gap:4px;align-items:flex-end;height:40px;margin-top:8px}
.eq i{width:12px;background:var(--ac);box-shadow:0 0 6px var(--ac);animation:eq 1.1s ease-in-out infinite alternate}
@keyframes eq{from{height:6px}to{height:38px}}
.me{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:12px;text-decoration:none;color:#f2f2f2;background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.2));border:1px solid #000;box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.25)}
.me:hover{filter:brightness(1.15)}
.me-t{display:flex;flex-direction:column;line-height:1.15}.me-t b{font-size:20px;font-weight:700}.me-t small{font-size:12px;color:#bbb;letter-spacing:1px}

/* ===== 3. BUTTONS / CHIPS / INPUTS ===== */
.slab{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-width:190px;height:44px;padding:0 18px;border-radius:5px;cursor:pointer;
  font:400 18px var(--f-body);color:#f2f2f2;text-decoration:none;border:1px solid #000;
  background:linear-gradient(#5e5e5e,#333 50%,#232323 51%,#343434);box-shadow:0 5px 10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.3)}
.slab:hover{filter:brightness(1.15)}.slab:active{transform:translateY(1px)}
.slab.ac{background:linear-gradient(var(--ac),var(--ac2) 50%,rgba(0,0,0,.08) 51%,var(--ac2));color:var(--ac-text);font-weight:700;text-shadow:none}
.pill{display:inline-block;padding:7px 24px;border:0;border-radius:20px;cursor:pointer;font:700 16px var(--f-body);color:var(--ac-text);
  background:linear-gradient(var(--ac),var(--ac2));box-shadow:0 2px 5px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.5)}
.pill:hover{filter:brightness(1.1)}
.chip{display:inline-block;padding:4px 12px;margin:0 4px 6px 0;border-radius:14px;cursor:pointer;font:400 14px var(--f-body);color:var(--text);
  background:linear-gradient(#4a4a4a,#2c2c2c);border:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);user-select:none;color:#ddd}
.chip.on{background:linear-gradient(var(--ac),var(--ac2));color:var(--ac-text);font-weight:700}
textarea,.search input{font:400 17px var(--f-body);color:var(--text)}
textarea{width:100%;height:70px;resize:vertical;background:linear-gradient(var(--inset-a),var(--inset-b));border:1px solid #000;border-radius:4px;box-shadow:inset 0 2px 6px rgba(0,0,0,.8);padding:10px;outline:0}
textarea:focus{box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 0 0 2px var(--ac)}

/* ===== 4. TABS ===== */
.tabs{display:flex;margin:22px 8px 18px;height:42px;transform:skewX(-14deg);border:1px solid #000;box-shadow:0 4px 10px var(--shadow);border-radius:4px;overflow:hidden}
.tab{flex:1;border:0;border-right:1px solid #000;cursor:pointer;font:400 17px var(--f-body);color:#bbb;background:linear-gradient(#444,#222);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);padding:0}
.tab span{display:inline-block;transform:skewX(14deg)}
.tab:hover{color:#fff}.tab.on{background:linear-gradient(var(--ac),var(--ac2));color:var(--ac-text);font-weight:700}
.tab:last-child{border-right:0}

/* ===== 5. CARDS ===== */
.cols{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
.card{position:relative;border-radius:6px;background:linear-gradient(var(--card-a),var(--card-b));border:1px solid var(--line);box-shadow:0 8px 18px var(--shadow),inset 0 1px 0 var(--hi);padding:16px;margin-bottom:22px}
.card h3{margin:0 0 12px;font:300 24px var(--f-body);color:var(--head);letter-spacing:.5px}
.card h3 small{float:right;margin-top:9px;font:700 11px var(--f-body);letter-spacing:2px;text-transform:uppercase;color:var(--ac)}
.muted{color:var(--muted);font-size:14px}
.panel{display:none}.panel.on{display:block}

/* ===== 6. POSTS ===== */
.post{border-top:1px solid rgba(0,0,0,.35);box-shadow:0 -1px 0 rgba(255,255,255,.06)}
.post:first-child{border-top:0;box-shadow:none}
.post .pn{font-size:18px;color:var(--head)}.post .pn span{color:var(--muted);font-weight:300}.post .pn b{color:var(--ac);font-weight:400}
.post .pt{font-size:18px;font-weight:300;margin:3px 0 8px}
.rx{display:inline-block;margin-right:6px;padding:2px 10px;border-radius:12px;cursor:pointer;background:linear-gradient(var(--inset-a),var(--inset-b));border:1px solid #000;box-shadow:inset 0 1px 3px rgba(0,0,0,.8);font-size:14px;color:#ccc;user-select:none}
.rx.on{color:var(--ac-text);background:linear-gradient(var(--ac),var(--ac2))}
.when{font-size:13px;color:var(--muted);margin-left:6px}
.av{display:inline-block;position:relative;overflow:hidden;flex:none;border-radius:22%;border:1px solid rgba(0,0,0,.6);box-shadow:0 2px 4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.35);background:linear-gradient(var(--a1,#6d8eb5),var(--a2,#c6d6e8))}
.av:before{content:"";position:absolute;left:50%;top:16%;width:36%;height:34%;background:#efefef;border-radius:50%;transform:translateX(-50%)}
.av:after{content:"";position:absolute;left:50%;top:54%;width:76%;height:70%;background:#efefef;border-radius:50%;transform:translateX(-50%)}
.v1{--a1:#f2a04a;--a2:#e0702a}.v2{--a1:#59c06a;--a2:#2f8f43}.v3{--a1:#b877cf;--a2:#7e3f97}.v4{--a1:#ee7f93;--a2:#c94a63}.v5{--a1:#4cc0c9;--a2:#1e8f9a}.v6{--a1:#8a8f9a;--a2:#c9ccd3}
.s56{width:56px;height:56px}.s36{width:36px;height:36px}.s44{width:44px;height:44px}.s30{width:30px;height:30px}
.pbar{flex:none;align-self:flex-start;width:6px;height:44px;border-radius:2px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--pw) 65%,#fff),var(--pw) 50%,color-mix(in srgb,var(--pw) 60%,#000));
  box-shadow:0 0 6px var(--pw),inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.4)}
.post .pn b{color:var(--pw,var(--ac))}

/* ===== 7. TRACKS / TOP 8 / MISC ===== */
.track{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:4px;margin-bottom:6px;font-size:16px;background:linear-gradient(var(--inset-b),var(--inset-a));border:1px solid rgba(0,0,0,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.track b{color:var(--ac);width:20px}.track span{margin-left:auto;color:var(--muted);font-size:13px}
.wall{padding:14px;border-radius:6px;background:repeating-linear-gradient(-45deg,rgba(0,0,0,.25) 0 10px,rgba(0,0,0,.15) 10px 20px);border:1px solid rgba(0,0,0,.6);box-shadow:inset 0 3px 10px rgba(0,0,0,.7)}
.top8{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center;font-size:13px;color:var(--text)}
.top8 .av{width:100%;height:auto;aspect-ratio:1;border:2px solid #aaa;display:block;margin-bottom:3px}
.lcd{background:linear-gradient(#b7c98a,#9fb56e);color:#26320f;font-family:var(--f-mono);border-radius:4px;border:2px solid #111;box-shadow:inset 0 3px 8px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.2);padding:8px 12px;font-size:15px}
.sw{display:inline-block;width:26px;height:26px;border-radius:50%;margin-right:8px;cursor:pointer;border:2px solid #111;box-shadow:0 2px 3px #000,inset 0 1px 0 rgba(255,255,255,.5);vertical-align:middle}
.sw.on{outline:2px solid #fff;outline-offset:2px}
.photo{position:relative;overflow:hidden;height:130px;background:linear-gradient(#8ecbf0 0%,#d6ecda 45%,#5aa14f 46%,#3d7f3a 100%)}
.photo i{position:absolute;bottom:0;width:7%;background:#2f6b2c;border-radius:50% 50% 0 0/20% 20% 0 0}
.photo b{position:absolute;width:8%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a7a,#c8271b)}
.snaps.two{grid-template-columns:1fr 1fr;gap:12px}.snaps.two .photo{height:70px}.snap p{margin:4px 0 0;text-align:center;font-size:13px;color:#444}
.snaps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.snap{background:#f5f5f0;padding:6px 6px 20px;box-shadow:0 5px 10px rgba(0,0,0,.6);transition:transform .2s}
.snap:nth-child(1){transform:rotate(-2deg)}.snap:nth-child(2){transform:rotate(1.5deg)}.snap:nth-child(3){transform:rotate(-1deg)}.snap:hover{transform:rotate(0) scale(1.04)}
.foot{text-align:center;color:var(--muted);font-size:14px;padding:26px 0 0}
.cssbox{font-family:var(--f-mono);font-size:13px;height:120px}
.tagline{display:flex;flex-wrap:wrap;gap:6px}
@media(max-width:860px){.cols{grid-template-columns:1fr}.face{flex-direction:column;text-align:center}.brand{justify-content:center}.wm{font-size:72px}.snaps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.tabs{margin-left:0;margin-right:0}.tab{font-size:13px}}
/* ===== FEED: segmented buttons, post types, photo frames, load-more ===== */
.seg{display:flex;margin:0 0 12px;border:1px solid #000;border-radius:5px;overflow:hidden;box-shadow:0 3px 8px rgba(0,0,0,.5)}
.seg button{flex:1;border:0;border-right:1px solid #000;padding:9px 6px;cursor:pointer;font:400 15px var(--f-body);color:#ccc;background:linear-gradient(#4c4c4c,#2c2c2c 50%,#222 51%,#2e2e2e);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.seg button:last-child{border-right:0}.seg button:hover{color:#fff}
.seg button.on{background:linear-gradient(#141414,#2a2a2a);color:var(--ac);box-shadow:inset 0 3px 8px #000}
.pwfilter{margin-bottom:6px}
.pwchip{display:inline-flex;align-items:center;gap:7px;padding:3px 11px 3px 8px;margin:0 5px 6px 0;border-radius:14px;cursor:pointer;font-size:14px;color:#ddd;background:linear-gradient(#4a4a4a,#2c2c2c);border:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);user-select:none}
.pwchip i{width:5px;height:14px;border-radius:2px;background:var(--pw);box-shadow:0 0 5px var(--pw)}
.pwchip.on{background:linear-gradient(#141414,#2a2a2a);box-shadow:inset 0 2px 6px #000;color:#fff}

.post{display:flex;gap:12px;padding:16px 0;animation:pin .35s ease-out}
@keyframes pin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pbody{flex:1;min-width:0}
.ptop{display:flex;align-items:baseline;gap:8px}.ptop .when{margin-left:auto}
.pt.clip{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.readmore{color:var(--ac);cursor:pointer;font-size:14px;font-weight:700}
.mood{display:inline-block;margin-left:6px;padding:1px 9px;border-radius:10px;font-size:12px;background:linear-gradient(var(--ac),var(--ac2));color:var(--ac-text);font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.acts{margin-top:8px}.acts .rx{margin-bottom:4px}

/* photo frames: snapshot print with glass glare */
.pic{position:relative;display:block;max-width:440px;margin:10px 0 4px;background:linear-gradient(#fbfbf7,#eeeee6);padding:8px 8px 8px;border:1px solid #bdbdb0;box-shadow:0 6px 14px rgba(0,0,0,.6),0 1px 0 #fff inset;cursor:zoom-in;transition:transform .2s}
.pic.tilt{transform:rotate(-1.2deg)}.pic:hover{transform:rotate(0) scale(1.015)}
.pic .ph{position:relative;overflow:hidden;background:#000;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.ph:after,.mt:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.08) 34%,transparent 35%),linear-gradient(rgba(255,255,255,.12),transparent 30%,transparent 70%,rgba(0,0,0,.22))}
.pic .cap{padding:8px 4px 2px;font:italic 15px Georgia,serif;color:#4a4a3a;text-align:center}
.scene{position:absolute;inset:0}
/* contact-sheet mosaic for several photos */
.mosaic{display:grid;gap:4px;max-width:480px;margin:10px 0 4px;padding:6px;background:linear-gradient(#fbfbf7,#eeeee6);border:1px solid #bdbdb0;box-shadow:0 6px 14px rgba(0,0,0,.6),inset 0 1px 0 #fff}
.mosaic.g2{grid-template-columns:1fr 1fr}.mosaic.g3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}.mosaic.g3 .mt:first-child{grid-row:1/3}.mosaic.g4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.mt{position:relative;overflow:hidden;min-height:96px;cursor:zoom-in;background:#000;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
.mosaic.g2 .mt{height:150px}.mosaic.g4 .mt{height:110px}.mosaic.g3{height:230px}
.mt .more-n{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 30px var(--f-body);color:#fff;background:rgba(0,0,0,.55);text-shadow:0 2px 3px #000;z-index:2}
.mt:hover .scene{filter:brightness(1.12)}

/* song / poll / quote cards: inset panels */
.inset{margin:10px 0 4px;padding:12px;border-radius:5px;background:linear-gradient(var(--inset-a),var(--inset-b));border:1px solid #000;box-shadow:inset 0 3px 8px rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.1)}
.songrow{display:flex;align-items:center;gap:12px}
.art{position:relative;width:64px;height:64px;flex:none;border-radius:4px;border:1px solid #000;box-shadow:0 3px 6px #000,inset 0 1px 0 rgba(255,255,255,.4)}
.art:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 45%)}
.playbtn{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid #000;cursor:pointer;color:var(--ac-text);font-size:14px;background:radial-gradient(circle at 50% 20%,var(--ac),var(--ac2));box-shadow:0 3px 5px #000,inset 0 1px 0 rgba(255,255,255,.6)}
.playbtn:active{transform:translateY(1px)}
.sname{font-size:17px;color:var(--head)}.sart{font-size:13px;color:var(--muted)}
.lcdbar{margin-top:6px;height:10px;border-radius:3px;background:#0d1a10;border:1px solid #000;box-shadow:inset 0 2px 4px #000;overflow:hidden}
.lcdbar i{display:block;height:100%;width:38%;background:linear-gradient(var(--ac),var(--ac2));box-shadow:0 0 6px var(--ac)}
.poll .opt{position:relative;margin-bottom:8px;height:28px;border-radius:4px;border:1px solid #000;background:linear-gradient(#0e0e0e,#222);box-shadow:inset 0 2px 4px #000;overflow:hidden;cursor:pointer}
.poll .opt i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(var(--ac),var(--ac2) 50%,rgba(0,0,0,.1) 51%,var(--ac2));box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.poll .opt span{position:relative;line-height:26px;padding:0 10px;font-size:14px;color:#fff;text-shadow:0 1px 2px #000;display:flex;justify-content:space-between}
.quote{border-left:5px solid var(--qc,var(--ac));padding-left:12px}
.quote .pn{font-size:15px}.quote .pt{font-size:16px;margin:2px 0 0}

/* comments */
.cms{margin-top:6px}
.cm{display:flex;gap:9px;margin-top:8px;padding:8px 10px;border-radius:5px;background:linear-gradient(var(--inset-a),var(--inset-b));border:1px solid #000;box-shadow:inset 0 2px 5px rgba(0,0,0,.7)}
.cm .av{width:28px;height:28px}.cm b{color:var(--head);font-weight:700;font-size:14px}.cm div{font-size:14px;line-height:1.35}
.morecm{margin-top:8px;font-size:13px;color:var(--ac);cursor:pointer;font-weight:700}
.extra{display:none}.extra.open{display:flex}

/* load more */
.more{text-align:center;padding:18px 0 4px;border-top:1px solid rgba(0,0,0,.35);box-shadow:0 -1px 0 rgba(255,255,255,.06)}
.more-btn{min-width:240px;justify-content:center;gap:12px;font-size:18px;height:46px}
.more-btn .spin{display:none;width:18px;height:18px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:sp .7s linear infinite}
.more-btn.loading .spin{display:inline-block}.more-btn.loading{filter:brightness(.85)}
@keyframes sp{to{transform:rotate(360deg)}}
.pager{display:none;justify-content:center;gap:6px;flex-wrap:wrap}
.pager button{min-width:38px;height:34px;padding:0 10px;border:1px solid #000;border-radius:4px;cursor:pointer;font:700 15px var(--f-body);color:#ddd;background:linear-gradient(#5e5e5e,#333 50%,#232323 51%,#343434);box-shadow:0 3px 6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.pager button.on{background:linear-gradient(var(--ac),var(--ac2));color:var(--ac-text)}
.pager button:disabled{opacity:.4;cursor:default}
.viewmode{margin-top:14px}
.viewmode .chip{margin-left:6px}
.mode-auto .more-btn,.mode-pages .more-btn{display:none}.mode-pages .pager{display:flex}
.toplink{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;border:1px solid #000;cursor:pointer;font-size:20px;color:#fff;background:radial-gradient(circle at 50% 15%,#7a7a7a,#2a2a2a);box-shadow:0 5px 10px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.5);display:none;z-index:20}
.toplink.show{display:block}

/* lightbox */
#lb{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,rgba(30,30,30,.9),rgba(0,0,0,.96))}
#lb.open{display:flex}
.lbframe{position:relative;width:min(760px,92vw);background:linear-gradient(#fbfbf7,#e6e6dc);padding:14px 14px 10px;border:1px solid #888;box-shadow:0 20px 50px #000}
.lbframe .ph{position:relative;aspect-ratio:3/2;overflow:hidden;background:#000;box-shadow:inset 0 0 0 1px #000}
.lbcap{padding:10px 4px 2px;font:italic 17px Georgia,serif;color:#4a4a3a;display:flex;justify-content:space-between;gap:12px}
.lbcap small{font:13px var(--f-body);font-style:normal;color:#888}
.lbbtn{position:absolute;width:44px;height:44px;border-radius:50%;border:1px solid #000;cursor:pointer;color:#fff;font-size:20px;background:radial-gradient(circle at 50% 15%,#7a7a7a,#242424);box-shadow:0 4px 8px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.lbbtn:hover{filter:brightness(1.2)}
#lbprev{left:-22px;top:42%}#lbnext{right:-22px;top:42%}#lbclose{right:-16px;top:-16px;background:radial-gradient(circle at 50% 15%,#ff7a6a,#b01a0a)}

/* ===== ONE BUTTON STYLE (no gloss): plain two-stop gradient, dark edge, soft drop shadow ===== */
.slab,.pill,.chip,.pager button,.tool,.playbtn,.lbbtn,.toplink{
  background:linear-gradient(#4a4a4a,#373737);border:1px solid #000;box-shadow:0 2px 4px rgba(0,0,0,.5);text-shadow:none;color:#eee}
.slab.ac,.pill,.chip.on,.pager button.on,.tool.on,.playbtn{
  background:linear-gradient(var(--ac),var(--ac2));color:var(--ac-text);text-shadow:none}
.chip{border-radius:14px}.pill{border-radius:20px}.playbtn,.lbbtn,.toplink{border-radius:50%}
.slab:hover,.pill:hover,.chip:hover,.tool:hover,.pager button:hover{filter:brightness(1.12)}
.slab:active,.pill:active,.tool:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(0,0,0,.5)}
.pager button:disabled{opacity:.4}
#lbclose{background:linear-gradient(#d0402e,#a02010);color:#fff}


.poll .opt i{background:linear-gradient(var(--ac),var(--ac2));box-shadow:none}
.lcdbar i{box-shadow:none}
/* feed header nav: HOT . NEW . FRIENDS */
.feednav a{cursor:pointer;color:#d0d0d0;text-decoration:none}.feednav a:hover{color:var(--head)}.feednav a.on{color:var(--ac)}

/* composer: textarea on the left, 4 tools side by side over one full-width Post button */
.compose{display:flex;gap:12px;align-items:stretch}
.compose textarea{flex:1;height:auto;min-height:116px;resize:none}
.cgrid{display:grid;grid-template-columns:repeat(4,64px);grid-template-rows:64px 44px;gap:8px;flex:none}
.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;border-radius:5px;cursor:pointer;font:400 12px var(--f-body)}
.tool svg{display:block}
.postbig{grid-column:1/-1;min-width:0;justify-content:center;height:44px;font-size:18px;font-weight:700}
@media(max-width:560px){.compose{flex-direction:column}.cgrid{grid-template-columns:repeat(4,1fr)}}

/* ===== SEARCH BAR (skeuomorphic: recessed field + accent button + result drop-down) ===== */
.search{position:relative;display:flex;align-items:center;height:42px;border-radius:21px;
  background:linear-gradient(var(--inset-a),var(--inset-b));border:1px solid #000;
  box-shadow:inset 0 3px 7px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.22)}
.search input{flex:1;min-width:0;height:100%;background:transparent;border:0;outline:0;padding:0 8px 0 18px;color:var(--text);font:400 17px var(--f-body)}
.search input::placeholder{color:var(--muted)}
.search input::-webkit-search-cancel-button{display:none}
.search:focus-within{border-color:var(--ac);box-shadow:inset 0 3px 7px rgba(0,0,0,.85),0 0 0 2px color-mix(in srgb,var(--ac) 45%,transparent),0 0 12px color-mix(in srgb,var(--ac) 50%,transparent)}
.search .go{flex:none;width:46px;height:32px;margin-right:5px;border-radius:16px;cursor:pointer;border:1px solid #000;
  background:linear-gradient(var(--ac),var(--ac2));box-shadow:0 2px 4px rgba(0,0,0,.5);color:var(--ac-text);display:flex;align-items:center;justify-content:center;padding:0}
.search .go:hover{filter:brightness(1.1)}.search .go:active{transform:translateY(1px)}
.search kbd{flex:none;margin-right:8px;padding:1px 7px;border-radius:4px;font:12px var(--f-mono);color:var(--muted);border:1px solid rgba(0,0,0,.6);background:rgba(255,255,255,.06)}
.search:focus-within kbd{display:none}
.sdrop{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);min-width:300px;z-index:40;border-radius:6px;overflow:hidden;
  background:linear-gradient(var(--card-a),var(--card-b));border:1px solid var(--line);box-shadow:0 12px 26px rgba(0,0,0,.7),inset 0 1px 0 var(--hi);text-align:left}
.sdrop.open{display:block}
.sdrop h6{margin:0;padding:8px 14px 5px;font:700 11px var(--f-body);letter-spacing:2px;text-transform:uppercase;color:var(--ac)}
.sdrop .it{display:flex;align-items:center;gap:10px;padding:7px 14px;cursor:pointer;font-size:15px;color:var(--text)}
.sdrop .it:hover,.sdrop .it.hl{background:linear-gradient(var(--ac),var(--ac2));color:var(--ac-text)}
.sdrop .it small{margin-left:auto;font-size:12px;opacity:.7}
.sdrop .it .av{width:26px;height:26px}
.sdrop .it i.pb{width:5px;height:20px;border-radius:2px;background:var(--pw);box-shadow:0 0 5px var(--pw)}
.sdrop .empty{padding:14px;color:var(--muted);font-size:14px}
.sdrop .foot2{padding:8px 14px;font-size:12px;color:var(--muted);border-top:1px solid rgba(0,0,0,.4);background:rgba(0,0,0,.12)}
.rail{display:flex;align-items:center;gap:20px;height:46px;padding:0 10px 0 18px;margin:0 0 12px;border-radius:6px;background:linear-gradient(#3b3b3b,#2a2a2a);border:1px solid var(--line);box-shadow:0 5px 12px var(--shadow),inset 0 1px 0 var(--hi);font-size:13px;color:var(--muted)}.rail b{color:var(--ac)}.rail .rl2{margin-left:auto}.rail .search{width:300px;height:32px;border-radius:16px;flex:none}.rail .search input{font-size:15px;padding-left:14px}.rail .search .go{height:24px;width:38px;border-radius:12px}.rail .search kbd{display:none}@media(max-width:700px){.rail .rl,.rail .rl2{display:none}.rail .search{width:100%}}
.post>.av{width:44px;height:44px;align-self:flex-start}
/* ===== EARLY-2010s ROUGHENING PASS (overrides only; markup unchanged) ===== */
:root{--f-body:"Lucida Grande","Lucida Sans Unicode",Tahoma,Verdana,Arial,sans-serif;--f-logo:"Trebuchet MS","DejaVu Sans Condensed",Arial,sans-serif;--f-mono:"Courier New","DejaVu Sans Mono",monospace;
  --shadow:rgba(0,0,0,.7);--card-a:#3a3a3a;--card-b:#333}
body{font-size:12px;line-height:1.4}
body:before{display:none}
.wrap{max-width:980px;padding:10px 10px 40px}
/* rail */
.rail{height:30px;gap:14px;padding:0 6px 0 10px;margin-bottom:8px;border-radius:2px;font-size:11px;background:linear-gradient(#484848,#2c2c2c 50%,#222 51%,#2a2a2a);border:1px solid #000;box-shadow:0 1px 3px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.22)}
.rail b{font-weight:700}.rail .rl2{color:#b8b8b8}
.search{height:24px;border-radius:2px;background:#fff;border:1px solid #000;box-shadow:inset 0 1px 2px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.25)}
.search input{font:12px var(--f-body);color:#222;padding:0 6px}
.search input::placeholder{color:#888}
.search:focus-within{border-color:#000;box-shadow:inset 0 1px 2px rgba(0,0,0,.45),0 0 0 2px #6aa9ea}
.rail .search{width:260px;height:22px;border-radius:2px}
.rail .search input{font-size:12px;padding-left:6px}
.rail .search .go,.search .go{width:50px;height:20px;margin:0 0 0 0;border-radius:0 1px 1px 0;border:0;border-left:1px solid #000;height:100%;
  background:linear-gradient(var(--g-hi),var(--g-mid2) 50%,var(--g-lo2) 51%,var(--g-lo));color:var(--ac-text);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.search .go svg{width:13px;height:13px}
.sdrop{border-radius:0;top:100%;box-shadow:0 3px 6px rgba(0,0,0,.6)}
.sdrop h6{font-size:10px;letter-spacing:1px;padding:5px 8px 3px}
.sdrop .it{font-size:12px;padding:4px 8px}
/* faceplate */
.face{min-height:0;padding:14px 22px;border-radius:3px;gap:14px;box-shadow:0 2px 5px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.6)}
.screw{width:9px;height:9px}
.screw:nth-child(1){left:6px;top:6px}.screw:nth-child(2){right:6px;top:6px}.screw:nth-child(3){left:6px;bottom:6px}.screw:nth-child(4){right:6px;bottom:6px}
.brand{gap:10px}.brand svg{width:62px;height:62px;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.6))}
.wm{font:700 58px/1 var(--f-logo);letter-spacing:-2px;color:#f4f4f4;text-shadow:0 1px 0 #999,0 2px 0 #000,0 3px 2px rgba(0,0,0,.6)}
.tag{margin-top:3px;font:700 10px var(--f-body);letter-spacing:1px}
.me{padding:5px 10px 5px 5px;border-radius:3px;gap:8px;box-shadow:inset 0 1px 3px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.3)}
.me-t b{font-size:14px}.me-t small{font-size:10px;letter-spacing:0}
.s56{width:42px;height:42px}.s44{width:36px;height:36px}.s36{width:32px;height:32px}
.av{border-radius:2px;border:1px solid #000;box-shadow:0 0 0 2px #777,1px 2px 3px 2px rgba(0,0,0,.5)}
/* buttons */
.slab,.pill,.chip,.pager button,.tool,.playbtn,.lbbtn,.toplink{background:linear-gradient(#5a5a5a,#3c3c3c);border:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.6);text-shadow:0 -1px 0 #000}
.slab.ac,.pill,.chip.on,.pager button.on,.tool.on,.playbtn{background:linear-gradient(var(--g-hi),var(--g-lo));color:var(--ac-text);text-shadow:0 1px 0 rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.6)}
.slab{height:30px;min-width:0;padding:0 14px;border-radius:3px;font:700 12px var(--f-body);gap:10px}
.chip{border-radius:3px;font-size:11px;padding:2px 8px}.pill{border-radius:3px;font:700 12px var(--f-body);padding:5px 14px}
.playbtn,.lbbtn,.toplink{border-radius:50%}
.slab:active,.pill:active,.tool:active{transform:none;box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
/* tabs (gloss kept) */
.tabs{height:34px;margin:12px 8px 12px;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.8)}
.tab{font:700 12px var(--f-body);color:#ccc;background:linear-gradient(#5c5c5c,#3e3e3e 50%,#2a2a2a 51%,#333);text-shadow:0 -1px 0 #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.3);border-right:1px solid #000}
.tab.on{background:linear-gradient(var(--g-hi2),var(--g-mid) 50%,var(--g-lo) 51%,var(--g-mid2));color:var(--ac-text);text-shadow:0 1px 0 rgba(255,255,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
/* cards with header bars */
.cols{grid-template-columns:1fr 300px;gap:12px}
.card{border-radius:3px;padding:10px;margin-bottom:12px;background:var(--card-b);box-shadow:0 1px 3px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.1)}
.card h3{margin:-10px -10px 10px;padding:6px 10px;font:700 12px/16px var(--f-body);letter-spacing:0;text-transform:uppercase;color:#f0f0f0;text-shadow:0 -1px 0 #000;
  background:linear-gradient(#5a5a5a,#404040 50%,#303030 51%,#383838);border-bottom:1px solid #000;border-radius:2px 2px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.card h3 small{margin-top:0;font-size:10px;letter-spacing:0}
.muted{font-size:11px}
/* composer */
textarea{font:13px var(--f-body);border-radius:2px;padding:6px 8px;box-shadow:inset 0 1px 3px rgba(0,0,0,.9);background:#1c1c1c}
textarea:focus{box-shadow:inset 0 1px 3px rgba(0,0,0,.9),0 0 0 2px #6aa9ea}
.compose{gap:8px}.compose textarea{min-height:82px}
.cgrid{grid-template-columns:repeat(4,52px);grid-template-rows:50px 30px;gap:4px}
.tool{border-radius:3px;font:700 10px var(--f-body);gap:3px}.tool svg{width:20px;height:20px}
.postbig{height:30px;font-size:13px}
/* posts */
.post{padding:10px 0;gap:9px;animation:none;border-top:1px dotted #666;box-shadow:none}
.post:first-child{border-top:0}
.post .pn{font-size:13px}.post .pn b{font-weight:700}.post .pn span{font-weight:400}
.post .pt{font-size:13px;font-weight:400;margin:2px 0 6px;line-height:1.45}
.when{font-size:11px}
.pbar{width:4px;height:36px;border-radius:0;box-shadow:inset 1px 0 0 rgba(255,255,255,.4),1px 1px 0 rgba(0,0,0,.6)}
.rx{padding:1px 7px;margin-right:4px;border-radius:3px;font:700 10px var(--f-body);color:#ddd;background:linear-gradient(#5a5a5a,#3e3e3e);border:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);text-shadow:0 -1px 0 #000}
.rx.on{background:linear-gradient(var(--g-hi),var(--g-lo));color:var(--ac-text);text-shadow:none}
.readmore,.morecm{font-size:11px}.mood{border-radius:2px;font-size:10px}
.pic{padding:5px 5px 4px;max-width:360px;box-shadow:1px 2px 4px rgba(0,0,0,.7);background:#f4f4ee;border:1px solid #999;transition:none}
.pic:hover{transform:none}.pic .cap{font:italic 12px Georgia,serif;padding:5px 2px 1px}
.mosaic{gap:2px;padding:4px;box-shadow:1px 2px 4px rgba(0,0,0,.7);background:#f4f4ee;border-color:#999}
.inset{border-radius:2px;padding:8px;box-shadow:inset 0 1px 4px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.12)}
.art{width:48px;height:48px;border-radius:2px;box-shadow:1px 1px 3px #000}
.sname{font-size:13px;font-weight:700}.sart{font-size:11px}.playbtn{width:28px;height:28px;font-size:11px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px #000}
.lcdbar{height:7px;border-radius:0}.poll .opt{height:22px;border-radius:2px;margin-bottom:5px}.poll .opt span{line-height:20px;font-size:11px;padding:0 6px}
.cm{padding:5px 7px;border-radius:2px}.cm div,.cm b{font-size:11px}
.more{padding:10px 0 2px;border-top:1px dotted #666;box-shadow:none}.more-btn{height:30px;font-size:12px;min-width:170px}
.pager button{height:26px;min-width:28px;font-size:11px;border-radius:2px}
.viewmode .chip{margin-left:4px}
/* sidebar */
.wall{padding:8px;border-radius:2px;box-shadow:inset 0 1px 4px rgba(0,0,0,.9)}
.top8{gap:6px;font-size:10px}.top8 .av{border-width:1px;border-color:#000}
.lcd{border-radius:2px;font-size:12px;padding:6px 8px;border-width:1px}
.screen{border-radius:2px;border-width:2px;font-size:12px;padding:8px;text-shadow:none}.eq i{box-shadow:none;width:8px}.eq{height:30px}
.snaps{gap:8px}.snap{padding:4px 4px 12px;box-shadow:1px 2px 3px rgba(0,0,0,.7)}.snap p{font-size:10px}
.track{padding:5px 7px;font-size:12px;border-radius:2px;margin-bottom:3px}.track span{font-size:10px}
.pwchip{border-radius:3px;font-size:11px;padding:2px 8px 2px 6px;background:linear-gradient(#5a5a5a,#3e3e3e);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}.pwchip i{box-shadow:none;width:4px;height:11px;border-radius:0}
.sdrop .it i.pb{box-shadow:none;border-radius:0}
.seg{border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.7)}.seg button{padding:5px 4px;font:700 11px var(--f-body);background:linear-gradient(#5c5c5c,#3e3e3e 50%,#2a2a2a 51%,#333)}
.foot{font-size:11px;padding-top:14px}
.post>.av{width:40px;height:40px;align-self:flex-start}