/* Colours sampled from 2008-era orkut screenshots. */
:root {
  --bg: #d8e5f6;
  --box: #fff;
  --shadow1: #bcc4d2;
  --shadow2: #cdd8ea;
  --menu: #eef9fd;
  --menu-line: #e3eaf2;
  --tip: #fcfdde;
  --tile: #f0f0f0;
  --row: #e5ecf4;
  --row2: #f2f6fa;
  --line: #d7e0ec;
  --link: #25528a;
  --hover: #C40098;
  --magenta: #B11E89;
  --text: #000;
  --muted: #777;
  --pink: #c0148a;
  --green: #2fb52f;
  --busy: #d8302f;
  --away: #f0a020;
  --radius: 10px;
}
* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
html { background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); font: 12px/1.45 Verdana, Arial, sans-serif; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--hover); text-decoration: underline; }
h1 { font: normal 26px Arial, Helvetica, sans-serif; margin: 0 0 10px; color: #000; }
h2 { font: bold 18px Arial, Helvetica, sans-serif; margin: 0 0 8px; color: #000; }
h3 { font: bold 18px Arial, Helvetica, sans-serif; margin: 0 0 6px; color: #000; }
img { display: block; }
.muted { color: var(--muted); }
.pad { padding: 8px; }
.pink { color: var(--magenta); }
.inline { display: inline; }
.ok { background: var(--tip); padding: 6px 8px; margin: 6px 0; }
.error { background: var(--tip); color: #c00; padding: 6px 8px; margin: 6px 0; }

/* icons */
.ic { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; flex: none; }
.ic-close { color: #2b57a0; }
.text .ic { width: 15px; height: 15px; }

/* logo */
.logo { font-family: Comfortaa, "Trebuchet MS", sans-serif; font-weight: 700; color: var(--pink); letter-spacing: -1px; text-decoration: none !important; }
.logo.small { font-size: 15px; }

/* top bar: 26px, darker at top and bottom, lighter in the middle */
.topbar {
  display: flex; align-items: stretch; height: 32px; position: sticky; top: 0; z-index: 50;
  background: linear-gradient(#5a8bc5 0, #6f97ca 30%, #779cd0 50%, #6c9ace 75%, #5a88c4 100%);
  border-top: 1px solid #59759a; border-bottom: 1px solid #6088b9; padding-right: 10px;
}
.topbar .logo {
  background: linear-gradient(90deg, #fff 0, #f9f9f9 70%, #e2e7eb 100%); border-right: 1px solid #acc1dc;
  padding: 0 16px 0 10px; font-size: 22px; display: flex; align-items: center; position: relative; color: var(--pink);
}
.topbar .logo::after {
  content: "beta"; position: absolute; right: 1px; top: 50%; transform: translateY(-50%) rotate(-90deg);
  font: 7px Arial, sans-serif; color: #aab; letter-spacing: .5px;
}
.mainnav { display: flex; align-items: center; margin-left: 4px; }
.mainnav a { color: #fff; font-size: 13px; padding: 0 9px; }
.mainnav a:hover { color: #fff; }
.mainnav a.on { font-weight: bold; }
.topright { margin-left: auto; display: flex; align-items: center; gap: 12px; color: #fff; }
.me-email { font-weight: bold; font-size: 12px; display: flex; align-items: center; gap: 3px; }
.me-email .caret { font-size: 8px; }
.linkbtn { background: none; border: 0; color: #fff; font: 12px Verdana, Arial, sans-serif; cursor: pointer; padding: 0; }
.linkbtn:hover { text-decoration: underline; }
.search { position: relative; display: flex; align-items: center; }
.search input { border: 1px solid #4f74ad; border-right: 0; padding: 1px 4px; width: 130px; height: 20px; font: 11px Verdana, Arial, sans-serif; color: #333; }
.search button { border: 1px solid #4f74ad; background: #fff; height: 20px; width: 22px; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.search button .ic { width: 12px; height: 12px; vertical-align: 0; }
.suggest { position: absolute; top: 22px; right: 0; width: 260px; z-index: 60; }
.suggest-box, .dropdown { background: #fff; border: 1px solid #9fb2d2; box-shadow: 2px 2px 0 var(--shadow1); color: var(--text); }
.sg { display: flex; gap: 6px; align-items: center; padding: 4px 8px; }
.sg:hover { background: var(--menu); text-decoration: none; }
.sg small { display: block; color: var(--muted); font-size: 11px; }
.notif { position: relative; display: flex; align-items: center; }
.bell { background: none; border: 0; cursor: pointer; position: relative; padding: 0 2px; display: flex; }
.bell .badge { position: absolute; top: -5px; right: -8px; }
.dropdown { position: absolute; right: 0; top: 22px; width: 310px; z-index: 60; }
.dd-head { font-weight: bold; padding: 5px 8px; background: var(--menu); border-bottom: 1px solid var(--menu-line); }
.dd-foot { display: block; text-align: center; padding: 5px; border-top: 1px solid var(--menu-line); background: var(--menu); }
.badge { display: inline-block; min-width: 14px; padding: 0 3px; border-radius: 7px; background: #d8302f; color: #fff; font: bold 9px/14px Verdana, Arial; text-align: center; }
.nitem { display: flex; gap: 8px; padding: 6px 8px; color: var(--text); border-bottom: 1px solid #edf1f6; }
.nitem:hover { background: var(--menu); text-decoration: none; }
.nitem.unread { background: var(--tip); }
.nitem .time, .ntext { display: block; }

/* presence dots */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #bbb; flex: none; margin-right: 3px; box-shadow: inset 0 -1px 1px rgba(0,0,0,.25); }
.dot.available { background: var(--green); }
.dot.busy { background: var(--busy); }
.dot.away { background: var(--away); }
.dot.invisible, .dot.offline { background: #c4c4c4; }

/* layout: narrow left, wide middle, right column */
.page { display: flex; gap: 12px; max-width: 1100px; margin: 14px auto; padding: 0 12px; align-items: flex-start; }
.leftcol { width: 164px; flex: none; }
.maincol { flex: 1; min-width: 0; }
.rightcol { width: 300px; flex: none; }
.box {
  background: var(--box); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px;
  box-shadow: 1px 1px 0 var(--shadow1), 2px 2px 0 var(--shadow2);
}
.box.welcome { border-top-right-radius: 48px; padding: 14px 16px; }
.box.side { padding: 10px; }

/* left card */
.leftcard { padding: 10px 8px; }
.bigphoto { width: 100%; aspect-ratio: 1; object-fit: cover; }
.lname { display: flex; align-items: center; margin-top: 8px; font-size: 13px; }
.lname a { color: var(--link); }
.chatstatus {
  margin: 0; width: 100%; font: 12px Verdana, Arial, sans-serif; color: #000; border: 0; padding: 1px 12px 1px 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 2px center;
}
.lmeta { color: #929292; margin: 2px 0 6px; line-height: 1.3; }
.editprofile { display: flex; align-items: center; gap: 4px; padding: 5px 2px; border-top: 1px solid #e6ebf1; margin-bottom: 4px; }
.lmenu { list-style: none; margin: 0 0 6px; padding: 0; background: var(--menu); border: 1px solid var(--menu-line); }
.lmenu li { border-top: 1px solid #e4eff3; }
.lmenu li:first-child { border-top: 0; }
.lmenu a { display: flex; align-items: center; gap: 6px; padding: 3px 5px; line-height: 17px; }

/* buttons: rounded, white fading to light grey */
.btn {
  display: inline-flex; align-items: center; gap: 4px; font: bold 12px Verdana, Arial, sans-serif; color: var(--link); cursor: pointer;
  padding: 2px 11px; line-height: 16px; border: 1px solid #c4c4c6; border-radius: 7px; white-space: nowrap;
  background: linear-gradient(#fff 0, #fff 45%, #f4f5f6 70%, #efe9ea 100%);
}
.btn:hover { color: var(--link); text-decoration: none; border-color: #a9afba; }
.btn.small { padding: 0 7px; font-size: 11px; }
.btn.primary { color: var(--link); }
.btn .ic { width: 12px; height: 12px; vertical-align: 0; }
.pill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; background: var(--tip); color: #555; }
.pill.ok { background: #eaf7e4; color: #2a6b1c; }
.small-link { font: normal 11px Verdana; margin-left: 6px; }
.viewall { font-weight: bold; text-decoration: underline; }

/* home */
.statusbox { margin-bottom: 8px; border: 1px solid #e3e3e3; padding: 4px; }
.status-show { display: flex; justify-content: space-between; align-items: center; cursor: text; gap: 6px; }
.status-form .status-row { display: flex; align-items: center; gap: 4px; }
.status-form input { flex: 1; border: 1px solid #e8b54d; outline: 1px solid #f3d38c; padding: 2px 4px; font: 12px Verdana, Arial, sans-serif; }
.status-form .smiley { display: flex; align-items: center; white-space: nowrap; }
.status-form .smiley::before { content: "▾"; font-size: 9px; margin-right: 1px; }
.status-form .smiley .ic { width: 16px; height: 16px; }
.status-form .btns { display: flex; gap: 4px; margin-top: 4px; }
.counters, .prof-counts { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; margin: 4px 0 10px; }
.counters a, .counters > span, .prof-counts > a, .prof-counts > span { display: flex; flex-direction: column; color: var(--text); }
.counters a:hover, .prof-counts > a:hover { text-decoration: none; }
.counters small, .prof-counts small, .rating small { color: #555; font-size: 11px; letter-spacing: .3px; }
.counters a > span, .counters > span > span, .prof-counts > a > span, .prof-counts > span > span { display: flex; align-items: center; gap: 2px; font-size: 13px; }
.welcome h1 { font-size: 30px; margin-bottom: 14px; }
.welcome p { margin: 0 0 12px; font-size: 13px; }
.req { display: flex; gap: 8px; padding: 8px 0; border-top: 1px solid #edf1f6; }
.req p { margin: 3px 0; }
.thumb { width: 70px; height: 70px; object-fit: cover; background: var(--tile); }
.thumb.big { width: 80px; height: 80px; }
.mini { width: 30px; height: 30px; object-fit: cover; flex: none; }
.sugg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 5px; }
.sugg { background: var(--tile); padding: 16px 4px 6px; text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sugg img { width: 76px; height: 76px; object-fit: cover; }
.sugg .x { position: absolute; top: 2px; right: 2px; border: 0; background: none; cursor: pointer; padding: 0; display: flex; }
.sugg .x .ic { width: 11px; height: 11px; }
.uname { font-weight: normal; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid #a9bbd8; margin: 4px 0 8px; }
.tabs button { border: 1px solid #a9bbd8; border-bottom: 0; background: var(--menu); color: var(--link); font: bold 12px Verdana, Arial; padding: 3px 9px; border-radius: 5px 5px 0 0; cursor: pointer; margin-bottom: -1px; }
.tabs button.on { background: #fff; color: #000; }
.updates { list-style: none; margin: 0; padding: 0; }
.upd { display: flex; gap: 6px; padding: 4px 0; border-bottom: 1px solid #edf1f6; align-items: center; }
a.plain { color: var(--text); }
.time { color: var(--muted); font-size: 11px; }

.tipbox { background: var(--tip); padding: 7px 28px 7px 9px; margin: 8px 0 0; position: relative; font-size: 13px; }
.tiplabel { color: #c41e1e; }
.tipx { position: absolute; top: 5px; right: 5px; border: 0; background: none; padding: 0; cursor: pointer; display: flex; }
.tipx .ic { width: 10px; height: 10px; }
.bday-grid { display: grid; grid-template-columns: repeat(auto-fill, 100px); gap: 5px; }
.bday small { color: #000; }

/* side boxes */
.side h3 a { color: #000; }
.cnt { color: var(--link); }
.side-search { width: 100%; border: 1px solid #b9c6dc; padding: 1px 4px; margin-bottom: 4px; font: 12px Verdana, Arial, sans-serif; }
.sb-head .side-search { width: 180px; margin: 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.cell { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; overflow: hidden; background: var(--tile); padding: 7px 3px 5px; min-height: 118px; }
.cell:hover { text-decoration: none; }
.cell:hover > span { text-decoration: underline; }
.cell img, .cell .cicon { width: 72px; height: 72px; object-fit: cover; }
.cell > span { display: flex; align-items: center; justify-content: center; word-break: break-word; line-height: 1.2; }
.boxfoot { display: flex; gap: 8px; align-items: center; margin-top: 6px; padding-top: 5px; border-top: 1px solid #e6ebf1; }
.cicon { display: inline-block; width: 30px; height: 30px; flex: none; object-fit: cover; }
.cicon.big { width: 110px; height: 110px; }

/* profile */
.pstatus { font-style: italic; color: #555; margin: -4px 0 6px; }
.ratings { display: flex; gap: 12px; }
.rating { display: flex; flex-direction: column; }
.rating > span { display: flex; }
.ricon { filter: grayscale(1); opacity: .3; border: 0; background: none; padding: 0; display: flex; }
.ricon.on { filter: none; opacity: 1; }
button.ricon { cursor: pointer; }
button.ricon:hover { opacity: .8; filter: none; }
.ricon.mine { outline: 1px dotted var(--link); }
.actions { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; align-items: center; }
.ptable { width: 100%; border-collapse: collapse; }
.ptable th { text-align: right; color: #666; font-weight: normal; width: 34%; padding: 2px 6px; vertical-align: top; }
.ptable td { padding: 2px 6px; }
.ptable tr:nth-child(odd) { background: var(--row); }
.ptable tr:nth-child(even) { background: var(--row2); }
.ptable.small th { width: 96px; white-space: nowrap; }
.testi { display: flex; gap: 8px; padding: 8px 0; border-top: 1px solid #edf1f6; }

/* scrapbook */
.scrapform textarea, .replybox textarea, .replyform textarea, #write textarea, .newtopic textarea, .newtopic input {
  width: 100%; border: 1px solid #a5b6d3; padding: 4px; font: 12px Verdana, Arial, sans-serif; min-height: 60px; resize: vertical;
}
.newtopic input { min-height: 0; }
.formbar { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.preview-box { margin-top: 6px; padding: 6px; background: var(--tip); }
.sb-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.crumb { margin-bottom: 8px; color: var(--muted); }
.sb-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; flex-wrap: wrap; }
.pager { color: var(--muted); }
.scrap { display: flex; gap: 8px; padding: 8px 6px; background: var(--row2); border-top: 1px solid #dfe6f0; align-items: flex-start; transition: opacity .2s; }
.scrap:nth-child(even) { background: #fff; }
.scrap.htmx-swapping { opacity: 0; }
.scrap-body { flex: 1; min-width: 0; }
.scrap-top { display: flex; gap: 5px; align-items: baseline; }
.scrap-top .btn { margin-left: auto; }
.scrap .text { margin: 4px 0; word-wrap: break-word; font-size: 13px; }
.scrap-actions { display: flex; gap: 14px; }
.scrap-actions a { display: inline-flex; align-items: center; gap: 3px; }
.replybox { margin-top: 4px; }
#scraps:not(:empty) + .empty { display: none; }
.htmx-added { animation: pop .4s ease-out; }
@keyframes pop { from { background: var(--tip); } }

/* friends & search */
.ugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 5px; }
.ucard { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px; background: var(--tile); gap: 2px; }
.ucard img { width: 84px; height: 84px; object-fit: cover; margin-bottom: 2px; }
.ucard .uname { display: flex; align-items: center; }
.inline-search { display: flex; gap: 4px; }
.inline-search input { flex: 1; border: 1px solid #a5b6d3; padding: 2px 4px; font: 12px Verdana, Arial, sans-serif; }

/* photos & videos */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; margin-top: 8px; }
.pcell { background: var(--tile); padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.pcell img { width: 118px; height: 118px; object-fit: cover; }
.pcell span { color: #333; font-size: 11px; word-break: break-word; }
.albums .ccard img { width: 96px; height: 96px; object-fit: cover; }
.bigpic { background: #f4f4f4; text-align: center; padding: 10px; }
.bigpic img { display: inline-block; max-width: 100%; max-height: 70vh; }
.caption { margin: 8px 0; display: flex; gap: 8px; align-items: center; font-size: 13px; }
.caption input { border: 1px solid #a5b6d3; padding: 2px 4px; width: 300px; max-width: 100%; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag { background: var(--menu); border: 1px solid var(--menu-line); padding: 1px 6px; display: inline-flex; align-items: center; gap: 3px; }
.tagx { border: 0; background: none; padding: 0; cursor: pointer; display: flex; }
.tagx .ic { width: 9px; height: 9px; }
.tagform { margin-top: 8px; display: flex; gap: 6px; }
.videoform { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.videoform input { border: 1px solid #a5b6d3; padding: 3px 5px; font: 12px Verdana, Arial, sans-serif; }
.videoform input[name=url] { flex: 2; min-width: 220px; }
.videoform input[name=title] { flex: 1; min-width: 140px; }
.vlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.vframe { position: relative; aspect-ratio: 16 / 9; background: #000; }
.vframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vmeta { display: flex; gap: 6px; align-items: baseline; padding: 4px 0; }
.vmeta .btn { margin-left: auto; }

/* communities */
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 5px; }
.ccard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 6px; background: var(--tile); }
.ccard .cicon { width: 66px; height: 66px; }
.ccard small { color: var(--muted); }
.list { width: 100%; border-collapse: collapse; }
.list th { text-align: left; color: var(--muted); font-weight: normal; padding: 3px 6px; border-bottom: 1px solid var(--line); }
.list td { padding: 5px 6px; border-bottom: 1px solid #edf1f6; vertical-align: top; }
.list tr:nth-child(even) td { background: var(--row2); }
.chead { display: flex; gap: 14px; align-items: flex-start; }
.chead > div { flex: 1; min-width: 0; }
.chead h1 { overflow-wrap: anywhere; }
.chead p { margin: 0 0 6px; }
.newtopic { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.post { display: flex; gap: 10px; border-top: 1px solid #edf1f6; padding: 8px 0; }
.post-author { width: 80px; flex: none; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; }
.post-body { flex: 1; font-size: 13px; }
.replyform { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

/* forms */
.formtable { width: 100%; border-collapse: collapse; }
.formtable th { text-align: right; color: #666; font-weight: normal; padding: 4px 8px; width: 30%; vertical-align: top; }
.formtable td { padding: 4px 8px; }
.formtable tr:nth-child(odd) { background: var(--row); }
.formtable tr:nth-child(even) { background: var(--row2); }
.formtable input:not([type=radio]):not([type=checkbox]), .formtable select, .formtable textarea { border: 1px solid #a5b6d3; padding: 1px 3px; font: 12px Verdana, Arial, sans-serif; max-width: 100%; }
.formtable input:not([type=radio]):not([type=checkbox]) { width: 220px; }
.formtable textarea { width: 100%; }
.formtable label { margin-right: 8px; white-space: nowrap; }
.checks label { display: block; }
.photoform { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }

/* public pages — values from the 2010 orkut login page */
body.public { margin: 10px; font: 12px Verdana, Arial, sans-serif; color: #000; background: #D4DDED; }
body.public a:link, body.public a:visited { color: #0047BE; text-decoration: underline; }
body.public a:hover { color: #C40098; }
.magenta { color: #B11E89; }
table.login td { vertical-align: top; }
.newMain { background: #FFF; padding: 15px; vertical-align: middle !important; }
.login .gap { width: 10px; }
.newGaia { background: #FFF; padding: 3px; width: 264px; }
.login-logo {
  text-align: center; font: 700 96px/1.1 Comfortaa, "Trebuchet MS", sans-serif; letter-spacing: -3px; padding-top: 10px;
  background: linear-gradient(#e86ab8, #c0148a 60%, #a3127a); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-logo sup { font: 11px Arial, sans-serif; letter-spacing: 0; color: #999; -webkit-text-fill-color: #999; vertical-align: top; position: relative; top: 14px; }
.newText { padding: 10px 20px; line-height: 1.5em; font-size: 12px; text-align: center; }
.gaia-box { background: #E8EEFA; padding: 5px; text-align: center; }
.gaia-table { margin: 0 auto; font-family: Arial, Helvetica, sans-serif; }
.gaia-table td { padding: 1px 2px; vertical-align: middle; }
.gaia-small { font-size: 13px; }
.gaia-account { margin: 3px 0 6px; font-size: 16px; }
.gaia-brand { font: 700 20px Comfortaa, sans-serif; color: #c0148a; letter-spacing: -1px; }
.gaia-lbl { font-size: 13px; }
.gaia-val { font: 13px Arial, Helvetica, sans-serif; width: 140px; }
.gaia-hint { font-size: 12px; color: #667788; text-align: left; }
.gaia-note { color: #667788; margin-top: 3px; font-size: 12px; text-align: left; }
.gaia-btn { font: 13px Arial, Helvetica, sans-serif; margin-top: 2px; }
.gaia-fpwd { height: 40px; padding-top: 10px !important; font-size: 13px; line-height: 1.6; color: #667788; vertical-align: bottom !important; }
.errormsg { color: red; font-size: smaller; font-family: arial, sans-serif; padding: 4px 0; }
.spacer { height: 7px; background-color: #D4DDED; margin: 3px -3px; }
.joinNow { font-size: 12px; background: #E8EEFA; padding: 8px 3px; text-align: center; line-height: 1.7em; }
.signup-wrap { max-width: 760px; margin: 0 auto; }
.signup-wrap .newMain { display: block; }
.signup-wrap .login-logo { font-size: 64px; padding: 0 0 10px; }
.signup-wrap .login-logo a { color: transparent !important; text-decoration: none !important; }
.signup h1 { font: bold 16px Arial, sans-serif; }
.signup .formtable th { color: #333; }

/* footer */
.footer {
  max-width: 1076px; margin: 4px auto 60px; background: #fff; border-radius: var(--radius); padding: 6px 10px; display: flex; align-items: center; gap: 0;
  box-shadow: 1px 1px 0 var(--shadow1), 2px 2px 0 var(--shadow2); color: #555; font-size: 11px;
}
.footer a { color: var(--link); padding: 0 9px; border-left: 1px solid #a2b6c1; }
.footer .logo { margin-right: 4px; }
.footer .disclaimer { margin-left: auto; color: var(--muted); }
.footer .copy { display: none; }
body.public .footer { margin: 10px 0 0; background: #BCCDE9; border-radius: 0; box-shadow: none; padding: 5px; font-size: 12px; color: #000; justify-content: center; }
body.public .footer .logo, body.public .footer .disclaimer { display: none; }
body.public .footer .copy { display: inline; }
body.public .footer a { border: 0; padding: 0; margin-left: 5px; }
body.public .footer a::before { content: "-"; display: inline-block; margin-right: 5px; color: #000; }

@media (max-width: 640px) {
  table.login, table.login tbody, table.login tr, table.login td { display: block; width: 100% !important; }
  .login .gap { height: 10px; }
  .login-logo { font-size: 64px; }
}

/* gtalk — colours sampled from the 2008 chat screenshot */
.gtalk { position: fixed; right: 10px; bottom: 0; display: flex; align-items: flex-end; gap: 6px; z-index: 70; font: 13px Arial, Helvetica, sans-serif; color: #000; }
.gtalk a { color: #0000cc; }
.gt-windows { display: flex; gap: 6px; align-items: flex-end; }
.st { width: 12px; height: 12px; flex: none; display: inline-block; }

.gt-panel { width: 236px; background: #fff; border: 4px solid #e8e8e8; border-bottom: 0; }
.gt-panel > * { border-left: 1px solid #73a6ff; border-right: 1px solid #73a6ff; }
.gt-title { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 5px 0 8px; background: #73a6ff; color: #fff; font-weight: bold; cursor: pointer; }
.gt-bubble { width: 14px; height: 14px; flex: none; }
.gt-label { flex: 1; white-space: nowrap; }
.gt-count { font-weight: normal; }
.gt-minbtn { width: 18px; height: 18px; background: #3072fe; border: 0; padding: 2px; cursor: pointer; display: flex; }
.gt-minbtn svg { width: 12px; height: 12px; }
.gt-list { padding: 8px 8px 0; }
.gt-search, .gt-setstatus input { width: 100%; border: 1px solid #c7d7f2; padding: 5px 7px; border-radius: 2px; font: 13px Arial, Helvetica, sans-serif; color: #000; }
.gt-search::placeholder, .gt-setstatus input::placeholder { color: #777; }
.gt-self { display: flex; align-items: center; gap: 8px; padding: 10px 2px 6px; }
.gt-me { width: 34px; height: 34px; object-fit: cover; border: 1px solid #d3d9e3; flex: none; }
.gt-mename { display: flex; align-items: center; gap: 6px; font-weight: bold; min-width: 0; }
.gt-setstatus { position: relative; display: flex; margin: 0 0 10px; }
.gt-setstatus input { border-right: 0; min-width: 0; }
.gt-dd { width: 22px; background: #c7d7f2; border: 1px solid #c7d7f2; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gt-dd svg { width: 10px; height: 10px; }
.gt-menu { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #73a6ff; z-index: 5; padding: 2px 0; }
.gt-menu.up { top: auto; bottom: 100%; right: auto; white-space: nowrap; }
.gt-menu a, .gt-menu label { display: flex; align-items: center; gap: 6px; padding: 2px 6px; color: #000; cursor: pointer; }
.gt-menu a:hover, .gt-menu label:hover { background: #e6efff; text-decoration: none; }
.gt-friends { max-height: 300px; overflow-y: auto; border-top: 1px solid #c7d7f2; margin: 0 -8px; padding: 4px 0; }
.gt-friend { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 3px 10px; cursor: pointer; }
.gt-fav { width: 26px; height: 26px; object-fit: cover; flex: none; }
.gt-fname small { display: block; color: #777; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-fname > span { display: block; overflow: hidden; text-overflow: ellipsis; }
.gt-friend:hover { background: #e6efff; }
.gt-fname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-none { color: #777; padding: 10px; margin: 0; line-height: 1.4; }
.gt-options { position: relative; border-top: 1px solid #c7d7f2; margin: 0 -8px; padding: 7px 10px 8px; }
.gt-options a { text-decoration: underline; font-size: 12px; }
.tri { font-size: 10px; text-decoration: none; display: inline-block; }

.gt-win { width: 270px; background: #fff; border: 1px solid #73a6ff; border-bottom: 0; display: flex; flex-direction: column; }
.gt-head { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 5px 0 8px; background: #73a6ff; color: #fff; font-weight: bold; cursor: pointer; }
.gt-win.flash .gt-head { animation: gtflash 1s steps(1) 4; }
@keyframes gtflash { 50% { background: #ff9a2e; } }
.gt-name { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gt-hbtn { width: 14px; height: 14px; background: none; border: 0; padding: 0; cursor: pointer; display: flex; }
.gt-hbtn svg { width: 12px; height: 12px; margin: 1px; }
.gt-body { height: 220px; overflow-y: auto; padding: 6px 8px; }
.gt-msg { display: flex; gap: 6px; align-items: flex-start; margin-top: 5px; word-wrap: break-word; }
.gt-msg > div { min-width: 0; padding-top: 2px; }
.gt-msg.cont { margin-top: 1px; }
.gt-msg.cont .gt-av { visibility: hidden; height: 0; }
.gt-av { width: 26px; height: 26px; object-fit: cover; flex: none; }
.gt-empty { color: #777; text-align: center; margin-top: 70px; }
.gt-input { padding: 0 6px 6px; }
.gt-input textarea { width: 100%; height: 44px; resize: none; border: 2px solid #73a6ff; padding: 2px 4px; font: 13px Arial, Helvetica, sans-serif; outline: 0; }
.gt-foot { display: flex; align-items: center; justify-content: space-between; border-top: 2px solid #73a6ff; padding: 5px 8px; font-size: 12px; }
.gt-foot a { color: #000; text-decoration: none; }
.gt-foot a:hover { text-decoration: underline; }
.gt-foot .tri { color: #73a6ff; }
.gt-smiley { background: none; border: 0; padding: 0; cursor: pointer; display: flex; }
.gt-smiley .ic { width: 17px; height: 17px; }

/* toasts */
.toasts { position: fixed; top: 52px; right: 14px; z-index: 80; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #fffbe6; border: 1px solid #f0d070; border-radius: 6px; padding: 8px 12px; box-shadow: 0 4px 14px rgba(0,0,0,.15); max-width: 300px; color: var(--text); animation: slide .25s ease-out; }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }

@media (max-width: 760px) {
  .rightcol { display: none; }
}
@media (max-width: 680px) {
  .page { flex-direction: column; padding: 0 8px; }
  .leftcol { width: 100%; }
  .leftcard { display: grid; grid-template-columns: 64px 1fr; gap: 2px 10px; align-items: start; }
  .leftcard > a:first-child { grid-row: 1 / 4; }
  .leftcard .lname { margin: 0; }
  .leftcard .chatstatus { width: auto; justify-self: start; }
  .leftcard .lmeta { margin: 0; padding: 0; border: 0; }
  .leftcard .editprofile, .lmenu { grid-column: 1 / -1; }
  .lmenu { display: flex; flex-wrap: wrap; margin: 4px 0 0; }
  .lmenu li { border: 0; }
  .lmenu a { padding: 3px 6px; }
  .scrap-top { flex-wrap: wrap; }
  .counters, .prof-counts { gap: 12px; }
  .mainnav a { padding: 0 6px; font-size: 12px; }
  .topbar { flex-wrap: wrap; height: auto; padding: 0 8px 6px 0; }
  .topright { margin-left: 8px; flex-wrap: wrap; }
  .me-email { display: none; }
  .mainnav { overflow-x: auto; }
  .login-main { flex-direction: column; }
  .login-side { width: 100%; }
  .logo.huge { font-size: 64px; }
  .gt-win { width: 210px; }
  .gt-windows .gt-win:not(:last-child) { display: none; }
  .formtable th { width: auto; }
  .formtable input:not([type=radio]):not([type=checkbox]) { width: 100%; }
}
.gaia-table label { display: block; text-align: left; }
.sugg .btn { white-space: nowrap; padding: 2px 9px; font-size: 11px; max-width: 100%; }
.sugg .friendbtn { max-width: 100%; }
.tabs a.tab { border: 1px solid #a9bbd8; border-bottom: 0; background: var(--menu); font: bold 12px Verdana, Arial; padding: 3px 9px; border-radius: 5px 5px 0 0; margin-bottom: -1px; }
.tabs a.tab.on { background: #fff; color: #000; }
.tabs a.tab:hover { text-decoration: none; }
.list.mail tr.unread td { font-weight: bold; background: var(--tip); }
.list.mail .chk { width: 20px; }
.list.mail .who { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.list.mail .time { white-space: nowrap; text-align: right; }
.mailhead { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #edf1f6; }
.mailbody { padding: 12px 2px; font-size: 13px; line-height: 1.5; }

/* polls & events */
.poll { border-top: 1px solid #edf1f6; padding: 8px 0; }
.poll-q { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; font-size: 13px; }
.poll-q .btn { margin-left: auto; }
.poll-opt { display: grid; grid-template-columns: 20px minmax(90px, 1fr) 2fr 40px; gap: 8px; align-items: center; padding: 2px 0; }
.poll-opt.mine .poll-text { font-weight: bold; }
.poll-pick { width: 16px; height: 16px; border: 1px solid #a5b6d3; background: #fff; border-radius: 50%; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.poll-pick .ic { width: 11px; height: 11px; vertical-align: 0; }
.poll-bar { height: 10px; background: #eef1f6; }
.poll-bar span { display: block; height: 100%; background: linear-gradient(#8fb3ea, #5a88c4); }
.poll-pct { color: var(--muted); text-align: right; }
.eventrow { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid #edf1f6; color: #000; }
.eventrow:hover { background: var(--row2); text-decoration: none; }
/* tear-off calendar tile */
.edate {
  width: 44px; flex: none; align-self: flex-start; text-align: center; color: #222;
  font: bold 18px/1.15 Arial, sans-serif; padding-bottom: 3px; overflow: hidden;
  background: linear-gradient(#fff, #f1f3f7); border: 1px solid #c3cad6; border-radius: 5px;
  box-shadow: 1px 1px 0 var(--shadow1);
}
.edate b {
  display: block; margin-bottom: 1px; padding: 1px 0; font-size: 10px; letter-spacing: .5px; text-transform: uppercase;
  color: #fff; background: linear-gradient(#e2574a, #c43425); border-bottom: 1px solid #a82a1d;
}
.edate small { display: block; font: 10px Verdana, Arial, sans-serif; color: #777; }
.edate.big { width: 76px; font-size: 32px; line-height: 1.05; padding-bottom: 5px; border-radius: 7px; }
.edate.big b { font-size: 13px; padding: 3px 0; margin-bottom: 3px; }
.edate.big small { font-size: 11px; margin-top: 2px; }
.rsvp .btn.on { background: #e6efff; border-color: #73a6ff; }
.small-h { font-size: 13px; margin: 8px 0 4px; }
.ugrid.small { grid-template-columns: repeat(auto-fill, 84px); }
.ugrid.small .cell { min-height: 0; }
.invite { max-height: 160px; overflow-y: auto; }

/* settings & themes */
.themes { display: flex; flex-wrap: wrap; gap: 8px; }
.themecard { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #d3d9e3; cursor: pointer; background: #fff; }
.themecard.on { border-color: #73a6ff; background: #e6efff; font-weight: bold; }
.themecard input { display: none; }
.swatch { width: 22px; height: 14px; background: var(--sw); border: 1px solid rgba(0,0,0,.2); }
.btn.danger { color: #b8261b; }
.btn:disabled { opacity: .5; cursor: default; }
.more { position: relative; display: inline-block; }
.moremenu { position: absolute; top: 100%; left: 0; z-index: 20; background: #fff; border: 1px solid #a9bbd8; box-shadow: 2px 2px 0 var(--shadow1); min-width: 170px; padding: 2px 0; }
.moremenu button { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; padding: 4px 8px; font: 12px Verdana, Arial, sans-serif; color: var(--link); cursor: pointer; text-align: left; }
.moremenu button:hover { background: var(--menu); }

/* themes recolour the header, page background and box shadows */
.theme-pink { --bg: #f6dcea; --shadow1: #d8b4c8; --shadow2: #e9c9da; --menu: #fdeef6; --menu-line: #f0d6e4; }
.theme-pink .topbar { background: linear-gradient(#c94f96 0, #df71b1 50%, #c94f96 100%); border-color: #a83d7b; }
.theme-green { --bg: #dcefd6; --shadow1: #b6d0ad; --shadow2: #c8e0c0; --menu: #eef9ea; --menu-line: #d7ebd0; }
.theme-green .topbar { background: linear-gradient(#4f9a40 0, #6cb85a 50%, #4f9a40 100%); border-color: #3c7d30; }
.theme-sunset { --bg: #f8e4d2; --shadow1: #dcc0a6; --shadow2: #ead3bd; --menu: #fdf2e7; --menu-line: #f0dcc6; }
.theme-sunset .topbar { background: linear-gradient(#d9742a 0, #f0954a 50%, #d9742a 100%); border-color: #b85d1c; }
.theme-purple { --bg: #e5dcf4; --shadow1: #c2b5da; --shadow2: #d4c9e8; --menu: #f3eefb; --menu-line: #ddd3ef; }
.theme-purple .topbar { background: linear-gradient(#7c5cb8 0, #9a7bd0 50%, #7c5cb8 100%); border-color: #634698; }
.theme-graphite { --bg: #dfe2e6; --shadow1: #b9bec6; --shadow2: #cbd0d6; --menu: #f1f3f5; --menu-line: #dde1e5; }
.theme-graphite .topbar { background: linear-gradient(#5f6874 0, #7d8794 50%, #5f6874 100%); border-color: #4b535d; }
.list td.right { text-align: right; white-space: nowrap; }
.danger-h { margin-top: 16px; color: #b8261b; }
body.public .newMain h1 { font: bold 18px Arial, sans-serif; }
body.public .ok, body.public .error { font-size: 12px; }
.notfound { display: flex; gap: 18px; align-items: flex-start; }
.nf-art { flex: none; width: 76px; height: 76px; border-radius: 50%; background: var(--menu); border: 1px solid var(--menu-line); display: flex; align-items: center; justify-content: center; }
.nf-art .ic { width: 40px; height: 40px; }
.notfound p { font-size: 13px; }
.nf-reasons { margin: 0 0 10px; padding-left: 18px; color: #555; font-size: 12px; line-height: 1.7; }

/* rich updates feed */
.updates .upd { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; }
.upd-av { width: 40px; height: 40px; object-fit: cover; flex: none; }
.upd-main { flex: 1; min-width: 0; }
.upd-line { font-size: 13px; line-height: 1.45; }
.upd-line .time { margin-left: 4px; }
.upd-status { position: relative; display: inline-block; margin-top: 7px; padding: 6px 11px; background: var(--tip); border: 1px solid #ece6a6; border-radius: 10px; font-size: 13px; }
.upd-status::before { content: ""; position: absolute; left: 14px; top: -6px; width: 10px; height: 10px; background: var(--tip); border-left: 1px solid #ece6a6; border-top: 1px solid #ece6a6; transform: rotate(45deg); }
.upd-quote { display: flex; gap: 8px; align-items: flex-start; margin-top: 7px; padding: 7px 9px; background: var(--row2); border-left: 3px solid #a9bbd8; color: #000; font-size: 13px; }
.upd-quote:hover { background: var(--row); text-decoration: none; }
.upd-quote .mini { width: 26px; height: 26px; }
.testi-q { border-left-color: #e9a412; background: #fffaeb; }
.upd-friends { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.upd-friends img { width: 44px; height: 44px; object-fit: cover; }
.upd-friends .plus .ic { width: 14px; height: 14px; }
.upd-friends > span:last-child { margin-left: 6px; }
.upd-photos { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
.upd-photos img { width: 96px; height: 96px; object-fit: cover; display: block; }
.upd-photos img.newpic { width: 110px; height: 110px; }
.more-pics { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; background: var(--tile); font: bold 20px Arial; color: var(--link); }
.upd-video { margin-top: 7px; max-width: 360px; }
.vthumb { position: relative; display: block; padding: 0; border: 0; background: #000; cursor: pointer; width: 100%; aspect-ratio: 16 / 9; }
.vthumb img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.vthumb:hover img { opacity: 1; }
.vplay { position: absolute; left: 50%; top: 50%; width: 54px; height: 38px; margin: -19px 0 0 -27px; background: rgba(20,20,20,.8); border-radius: 9px; }
.vplay::after { content: ""; position: absolute; left: 22px; top: 11px; border-left: 15px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.vthumb:hover .vplay { background: #e62117; }
.upd-card { display: block; margin-top: 7px; padding: 2px 10px; border: 1px solid #e3e9f2; background: #fff; color: #000; }
.upd-card .eventrow { border-top: 0; }
.upd-card .poll { border-top: 0; }
a.upd-card:hover { background: var(--row2); text-decoration: none; }
.upd-comm { display: flex; gap: 10px; align-items: center; padding: 8px 10px; }
.upd-comm .cicon { width: 52px; height: 52px; }
.upd-comm .desc { color: #555; }
.upd-topic { padding: 8px 10px; }
.upd-topic .text { display: block; margin-top: 3px; color: #444; }
.mailstate { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; font-size: 13px; }
.verifybox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }