/* VDruzya classic chrome — Facebook Blue #3B5998 / Light #D8DFEA (Nov 2005) */
:root {
  --fb: #3B5998;
  --line: #D8DFEA;
  --font: "lucida grande", tahoma, verdana, arial, sans-serif;
}
body { background: #fff; margin: 0; padding: 0; }
body, p { font: 11px/14px var(--font); text-align: left; color: #000; }
a { color: var(--fb); text-decoration: none; }
a:hover { text-decoration: underline; }
img { border: 0; }
form { margin: 0; padding: 0; }
label { font-weight: bold; color: gray; }

#book { width: 760px; margin: 0 auto; padding: 8px 0 0; text-align: left; }
#pageheader {
  position: relative; width: 760px; height: 33px; overflow: hidden;
  background: var(--fb) url("../img/pageheaderbg.919c40cd9214.png") no-repeat left top;
}
/* Brand lives in pageheaderbg.png once — clickable hit area only */
#homelink {
  position: absolute; left: 0; top: 0; margin: 0; padding: 0;
  width: 100px; height: 33px; font-size: 0; line-height: 0;
}
#homelink a { display: block; width: 100%; height: 100%; }
.hide { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
#gnav form.gnav-logout { display: inline; margin: 0; padding: 0; }
#gnav {
  position: absolute; top: 1px; left: 120px; width: 630px;
  margin: 0; padding: 3px 0; list-style: none; text-align: right; line-height: 25px;
  white-space: nowrap;
}
#gnav li { display: inline; white-space: nowrap; }
#gnav a, #gnav button.linkish {
  margin: 0; padding: 2px 4px; color: #D8DFEA; text-decoration: none;
  background: 0; border: 0; font: 11px var(--font); cursor: pointer;
}
#gnav a:hover, #gnav button.linkish:hover {
  color: #fff; background: #526DA4; text-decoration: none;
}

/* The authenticated sidebar/nav is owned by unified.css. */
#qsearch { width: 120px; margin: 0 0 8px; }
#qsearch label { display:block; margin:0 0 2px; font-weight:bold; color:gray; font-size:11px; }
#qsearch .inputtext { width: 115px; }
#squicklogin { width: 120px; margin: 0 0 10px; padding: 0; }
#squicklogin label {
  display: block; margin: 0; padding: 0 0 2px; color: gray; font-weight: bold;
}
#squicklogin .inputtext { width: 115px; box-sizing: border-box; }
#squicklogin .buttons { text-align: right; padding: 3px 0 0; white-space: nowrap; }
#squicklogin .buttons .inputsubmit { margin: 0 0 0 2px; }

#nav { list-style: none; margin: 1em 0; padding: 0; }
#nav li { border-bottom: 1px solid var(--line); font-size: 1em; }
#nav li a {
  display: block; padding: 2px 3px; background: #fff; border: 0; color: var(--fb);
}
#nav li a:hover { background: var(--fb); color: #fff; text-decoration: none; }

#pagebody {
  float: left; width: 628px; margin-left: 12px; font-size: 11px; text-align: left;
}
#pagebody a:hover { text-decoration: underline; }
#header {
  margin: 0; padding: 0 10px; background: #6d84b4; color: #fff;
  font: bold 14px/23px var(--font); border-bottom: solid 1px var(--fb);
}
#header h1 { margin: 0; padding: 0; font-size: 14px; color: #fff; }
#header.withsubtitle { text-align: right; overflow: hidden; }
#header.withsubtitle h1 { float: left; }
#header.withsubtitle .subtitle {
  float: right; font-weight: normal; font-size: 11px; line-height: 23px; white-space: nowrap;
}
#header.withsubtitle .subtitle a { color: #fff; }
#header.withsubtitle .subtitle a:hover { text-decoration: underline; }
#content {
  padding: 10px; overflow: hidden;
  border-left: solid 1px var(--line);
  border-right: solid 1px var(--line);
  border-bottom: solid 1px var(--fb);
}
.infocontent { margin: 10px 20px; }
.infocontent h2 {
  font-size: 11px; margin: 0 0 10px; padding: 0; font-weight: bold; line-height: 16px;
}
.infocontent p { margin: 0 0 10px; line-height: 16px; }
ul.bulletpoints { padding-left: 20px; color: var(--fb); margin: 0 0 14px; }
ul.bulletpoints li { padding: 1px 0; }
ul.bulletpoints li span { color: #000; }
.center { margin-left: auto; margin-right: auto; }
.welcome-actions { width: 170px; margin: 8px auto 4px; text-align: center; }

/* Auth / reset forms — FB login.css */
#loginform { text-align: center; margin: 20px; }
#loginform table { margin: 0 auto; }
#loginform p { text-align: center; margin: 0 20px 10px; }
.formtable { margin: 0; }
.formtable td { border: none; margin: 0; padding: 3px 1px; text-align: left; }
.formtable td.label { padding-right: 10px; font-weight: bold; color: gray; white-space: nowrap; }
.formbuttons { text-align: center; margin: 10px; }
.formbuttons .inputsubmit, .formbuttons .inputbutton { margin: 2px 4px; }
#passwordnote { width: 300px; margin: 10px auto; text-align: left; }
#confirmterm { width: 320px; margin: 10px auto; text-align: left; }
#confirmterm .inputcheckbox { float: left; display: block; margin: 2px 5px 8px 0; border: 0; }
.inputcheckbox { border: 0; }

/* About page — info.css */
.about #content { margin: 0; padding: 0 20px 20px; }
.about #tabs { margin: 0 0 20px; padding-top: 20px; }
.about .leftcolumn { float: left; padding-right: 20px; width: 283px; }
.about .rightcolumn { float: left; width: 283px; }
.about .halfwidth { margin: 0; float: none; width: auto; }
.halfwidth h4, .about h4, .legal-content h4 {
  border-bottom: solid 1px var(--line); margin: 0 0 6px; padding: 0 0 2px; font-size: 13px; color: #000;
}
.halfwidth table .title, .about td.title { color: #666; padding-left: 10px; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: block; }
#tabs { text-align: center; padding: 4px 0; margin: 10px 20px; border-bottom: solid 1px var(--fb); }
#tabs div { display: inline; padding: 0; margin: 0; }
#tabs a { margin: 0; padding: 4px; }
#tabs .activetab a { color: #fff; background: var(--fb); }
#tabs .activetab a:hover { text-decoration: none; }
#tabs .inactivetab a:hover { background: var(--line); text-decoration: none; }
.legal-content #tabs { margin: 10px 0 16px; }
.legal-content .infocontent { margin: 0 0 10px; }
#loginform input[type="password"],
#loginform input[type="text"],
#loginform #loginform .inputtext,
#loginform .inputpassword {
  border: 1px solid #bdc7d8; padding: 3px; font: 11px var(--font);
}

.inputtext, .inputpassword, select, textarea,
input[type="text"], input[type="password"] {
  border: 1px solid #bdc7d8; padding: 3px; font: 11px var(--font);
}
textarea { font-family: var(--font); }
.inputsubmit, .inputbutton, button.inputbutton,
input[type="submit"], input[type="button"] {
  background: #3b5998; color: #fff; font: 11px var(--font); cursor: pointer;
  border-style: solid; border-width: 1px;
  border-color: #D9DFEA #0e1f5b #0e1f5b #D9DFEA; padding: 1px 6px;
}

#pagefooter {
  clear: both; font-size: 10px; line-height: 15px; padding: 10px 0;
  border: 0; text-align: center; color: #777;
}
#pagebody > #pagefooter { clear: none; }
#pagefooter p { margin: 0; padding: 0; text-align: center; }
#fnav { list-style: none; margin: 0; padding: 0; text-align: center; font-size: 11px; }
#fnav li { display: inline; }
#fnav a { padding: 2px 5px; }
#fnav a:hover { color: #fff; background: var(--fb); text-decoration: none; }

/* Align with #content width — no extra side inset (content already pads). */
.flash, .status { margin: 0 0 10px; padding: 10px; border: 1px solid #ffe222; background: #fffbe2; box-sizing: border-box; }
.error, #error { margin: 0 0 10px; padding: 10px; border: 1px solid #dd3c10; background: #ffebe8; color: #dd3c10; box-sizing: border-box; }
/* editprofile #content has no horizontal padding — keep a classic side gutter there only */
.editprofile .flash, .editprofile .status,
.editprofile .error, .editprofile #error { margin-left: 10px; margin-right: 10px; }
#error p { margin: 4px 0 0; }
#error a { text-decoration: none; color: #dd3c10; }
.auth-box { padding: 12px 20px; }

/* Shared boxes / profile chrome (page layouts refine below) */
img.avatar { border: 1px solid #B3B3B3; vertical-align: middle; }
.profile-box {
  margin: 0 0 10px; border: 0; background: transparent;
}
.profile-box > h4 {
  background: #D8DFEA; color: #3B5998; font: bold 11px/16px var(--font);
  margin: 0; padding: 2px 8px; border-top: solid 1px #3B5998;
}
.profile-box > h4 .edit {
  float: right; color: #777; font-weight: normal; text-decoration: none;
}
.profile-box > h4 .edit:hover { color: var(--fb); }
.profile-box > h4 span.edit a { color: #777; font-weight: normal; text-decoration: none; }
.profile-box > h4 span.edit a:hover { color: var(--fb); }
.profile-box-body { padding: 8px; }
.profile-box-body p { margin: 0 0 6px; }
/* FB 2005–06 status under picture (not in blue #header) */
.profile #status.profile-status {
  margin: 8px 0 0; padding: 0 2px; font: 11px/14px var(--font); color: #333;
}
.profile #status .profile-status-form { margin: 0; }
.profile #status .profile-status-form .inputtext {
  width: 170px; max-width: 100%; box-sizing: border-box;
  border: 1px solid #bdc7d8; padding: 1px 3px; font: 11px var(--font); margin: 2px 0;
}
.profile #status .profile-status-form .inputbutton {
  margin: 2px 0 0; font: 11px var(--font);
}
.profile #status .status-place {
  margin: 2px 0; color: #555;
}
.profile #status .status-place select {
  max-width: 170px; font: 11px var(--font); border: 1px solid #bdc7d8;
}
/* Edit My Profile — archive editprofile.css (Dec 2005): #tabs + wide .editor */
.editprofile #content { padding: 12px 0 10px !important; overflow: hidden; }
.editprofile #tabs {
  text-align: left; margin: 0 10px 12px; padding: 0 0 1px;
  border-bottom: solid 1px var(--fb); white-space: nowrap;
}
.editprofile #tabs .activetab,
.editprofile #tabs .inactivetab {
  display: inline-block; padding: 0; margin: 0 2px 0 0; vertical-align: bottom;
}
.editprofile #tabs a {
  display: inline-block; margin: 0; padding: 3px 5px; font: 11px var(--font);
}
.editprofile #tabs .activetab a {
  color: #fff; background: var(--fb); text-decoration: none;
}
.editprofile #tabs .inactivetab a:hover {
  background: var(--line); text-decoration: none;
}
/* #pagebody 628 − borders ≈ 606; editor fills it */
.editprofile .editor {
  width: 600px; margin: 0; padding: 0 0 0 10px; float: none;
}
.editprofile .formtable.editor td.label,
.editprofile table.editor td.label {
  text-align: right; padding-right: 15px; width: 150px;
  color: gray; font-weight: bold; white-space: nowrap; vertical-align: top;
}
.editprofile .formtable.editor td,
.editprofile table.editor td { padding: 3px 0; vertical-align: top; }
.editprofile .editor-buttons,
.editprofile td.buttons {
  text-align: left; margin: 10px 0 4px 165px; padding: 0;
}
.editprofile .profile_note {
  background: #fff; padding: 10px; margin: 0 0 10px;
  border: 1px solid #bdc7d8; color: #444; font-size: 11px; line-height: 14px;
}
.editprofile #infoarea { margin: 0 10px 12px 0; }
.editprofile #infoarea > h4 {
  border-bottom: solid 1px #D8DFEA;
  margin: 0 0 10px; padding: 0 0 2px;
  font: bold 13px var(--font); color: #000;
  background: transparent; border-top: 0;
}
.editprofile .checkgrid ul {
  list-style: none; margin: 0; padding: 0;
}
.editprofile .checkgrid li {
  margin: 0 0 2px; padding: 0; font-weight: normal;
}
.editprofile .checkgrid label { font-weight: normal; color: #000; }
.editprofile .bday select.inputtext { width: auto; margin-right: 2px; }
/* Picture — side-by-side: 200 + gutter + ~360 ≤ 600 */
.editprofile #picture { overflow: hidden; margin: 0 10px 0 0; }
.editprofile #currentpicture {
  float: left; width: 200px; margin: 0 20px 16px 0;
}
.editprofile #currentpicture h4 {
  margin: 0; padding: 1px 0 4px; font-size: 11px; font-weight: bold;
  border-bottom: none; color: #333;
}
.editprofile #uploadpicture h4 {
  border-bottom: solid 1px #D8DFEA;
  margin: 0; padding: 0 0 2px; font-size: 13px; font-weight: bold; color: #333;
}
.editprofile #currentpicture img {
  width: 200px; height: 200px; border: 1px solid #B3B3B3; display: block; margin: 6px 0;
}
.editprofile #nopicture {
  width: 200px; font-size: 12px; padding: 75px 0; text-align: center;
  background: #f7f7f7; border: solid 1px #ddd; color: gray; margin: 6px 0;
}
.editprofile #uploadpicture {
  float: left; width: 360px; margin: 0 0 16px 0;
}
.editprofile #uploadpicture small {
  display: block; margin: 5px 0; color: gray; font-size: 10px;
}
.editprofile .avatar-clear { margin: 4px 0 0; }
.editprofile .profile-box { margin: 0 10px 12px 0; }
.editprofile .profile-box > h4 {
  background: #D8DFEA; color: #3B5998;
  font: bold 11px/16px var(--font);
  margin: 0; padding: 2px 8px; border-top: solid 1px #3B5998;
}
.editprofile .profile-box-body { padding: 10px 8px 12px; line-height: 13px; }
.editprofile .formtable textarea { width: 100%; max-width: 280px; }
.editprofile .formtable .inputtext { max-width: 250px; }
.editprofile .hometown .inputtext { width: 250px; max-width: 250px; }
.profile-subsection { margin: 0 0 10px; }
.profile-subsection h5 {
  color: #3B5998; font: bold 12px var(--font); margin: 0 0 6px; padding: 2px 8px;
  background: #eee; border-top: solid 1px #ccc; border-bottom: 0;
}
.infotable { width: 100%; border-collapse: collapse; }
.infotable td { padding: 0 0 3px; vertical-align: top; font-size: 11px; }
.infotable td.label {
  color: gray; font-weight: bold; text-align: right; white-space: nowrap;
  padding-right: 12px; width: 1%;
}
.infotable td a { color: var(--fb); }
.album-title { display: block; color: var(--fb); font-weight: bold; }
ul.plain { margin: 0; padding-left: 16px; }
ul.plain li { margin: 0 0 2px; }
.muted { color: #777; }
.inline { display: inline; }
button.linkish, .profile-box-body button.linkish {
  background: 0; border: 0; color: var(--fb); font: 11px var(--font); cursor: pointer; padding: 0;
}
.wall-actions { margin: 4px 0; }
/* Classic FB icons (comment bubble / thumb / feed glyphs) */
.ico {
  display: inline-block; width: 14px; height: 12px; vertical-align: -1px;
  margin-right: 3px; background-color: transparent;
  background-repeat: no-repeat; background-position: center; background-size: auto;
}
.ico-comment {
  width: 13px; height: 11px;
  background-image: url("../img/ico-comment.11f63c8f7705.gif");
}
.ico-group {
  width: 14px; height: 12px;
  background-image: url("../img/ico-group.7a0b97962687.gif");
}
.ico-note {
  width: 12px; height: 13px;
  background-image: url("../img/ico-note.7b8bf7020df4.gif");
}
.ico-photo {
  width: 13px; height: 11px;
  background-image: url("../img/ico-photo.d287c7908466.gif");
}
.ico-wall {
  width: 12px; height: 12px;
  background-image: url("../img/ico-wall.f31276ea58c9.gif");
}
.wall-act .ico { margin-right: 2px; }
button.linkish .ico { margin-right: 2px; }

/* Classic FB flat comments (wall / group / photo) */
.wall-comment {
  overflow: hidden; margin: 0; padding: 4px 5px; font-size: 11px; line-height: 14px;
  background: #eceff5; border-top: solid 1px #d8dfea;
}
.wall-comment .wc-ava { float: left; width: 32px; margin-right: 6px; }
.wall-comment .wc-ava img,
.wall-comment .wc-body { overflow: hidden; }
.wall-comment .wc-time { margin-top: 2px; }
.wall-comment .wc-del { float: right; margin-left: 6px; }
.wall-comment-compose {
  display: none; margin: 0; padding: 4px 5px; font-size: 11px;
  background: #eceff5; border-top: solid 1px #d8dfea;
}
.wall-comment-compose:target,
.wall-comment-compose.is-open { display: block; }
.wall-comment-compose input[type="text"],
.wall-comment-compose .inputtext { width: 80%; }
.photo-comments .wall-comment:first-child,
.photo-comments .wall-comment-compose:first-child { border-top: 0; }
.wall-comments-more {
  margin: 0; padding: 4px 5px; background: #eceff5; border-top: solid 1px #d8dfea; font-size: 11px;
}
.wall-comments-older { display: none; }
.wall-comments-older:target { display: block; outline: 0; background: transparent; }
.pager { padding-left: 4px; text-align: right; }
.pager a:hover { color: #fff; background: var(--fb); text-decoration: none; padding: 3px; }

/* Group page — FB 2005: main + right rail, white-on-blue section heads */
.group-content, .feed-content {
  overflow: hidden; padding: 10px !important;
}
.group-rail { float: left; width: 180px; margin: 0 10px 0 0; }
.group-main { float: left; width: 400px; }
/* #content ≈ 606px inner — keep main+rail ≤ that */
.feed-main { float: left; width: 410px; }
.feed-rail { float: right; width: 180px; }
.feed-content::after, .group-content::after, .friends-content::after, .inbox-content::after {
  content: ""; display: block; clear: both; height: 0; overflow: hidden;
}
.group-page .profile-box > h4,
.feed-page .profile-box > h4 {
  background: #D8DFEA; color: #3B5998;
  font: bold 11px/16px "lucida grande", tahoma, verdana, arial, sans-serif;
  margin: 0; padding: 2px 8px; border-top: solid 1px #3B5998;
}
.group-page .profile-box > h4 .edit,
.feed-page .profile-box > h4 .edit { color: gray; float: right; font-weight: normal; text-decoration: none; }
.group-page .profile-box > h4 .edit:hover,
.feed-page .profile-box > h4 .edit:hover { color: #3B5998; }
.group-picture { width: 180px; margin: 0 0 8px; }
.group-picture img {
  width: 180px; height: 180px; border: 1px solid #B3B3B3; display: block;
}
.group-cover-fallback { display:block; width:100%; height:auto; border:0; }
.group-photo-grid,
.wall-media { overflow: hidden; margin: 6px 0; }
.group-photo-grid a,
.wall-media a { float: left; margin: 0 6px 6px 0; }
.group-photo-grid img {
  width: 130px; height: 97px; border: 1px solid #B3B3B3; display: block;
}
.wall-media img {
  width: 100px; height: 75px; border: 1px solid #B3B3B3; display: block;
}
.wall-media-single img, .wall-media-single .news-photo {
  float: none; width: auto; height: auto; max-width: 100%; max-height: none;
  border: 1px solid #B3B3B3; display: inline-block;
}
.wall-media-video { margin: 6px 0; }
.wall-media-video video {
  display: block; max-width: 100%; width: 400px; height: auto;
  background: #000; border: 1px solid #B3B3B3;
}
.feed-main .wall-media-video video { width: 360px; }
.discuss-table { width: 100%; border-collapse: collapse; margin: 8px 0 10px; }
.discuss-table th {
  text-align: left; color: #777; font: bold 11px "lucida grande", tahoma, verdana, arial, sans-serif;
  border-bottom: solid 1px #D8DFEA; padding: 2px 6px 4px 0; background: transparent;
}
.discuss-table td {
  padding: 5px 6px 5px 0; border-bottom: solid 1px #D8DFEA;
  vertical-align: top; font-size: 11px; line-height: 14px;
}
.discuss-table .col-topic { width: auto; }
.discuss-table .col-n { width: 52px; text-align: center; white-space: nowrap; color: #777; }
.discuss-table .col-author { width: 110px; }
.discuss-table .col-when { width: 100px; white-space: nowrap; }
.discuss-table tr.is-open td { background: #f7f7f7; }
.discuss-table a { color: #3B5998; font-weight: bold; }
.discuss-open {
  margin: 10px 0 0; padding: 10px; background: #f7f7f7; border-top: solid 1px #3B5998;
}
.discuss-compose { margin: 0 0 12px; }
.discuss-compose .formtable .inputtext,
.discuss-compose .formtable textarea { width: 100%; max-width: 480px; box-sizing: border-box; }
.discuss-subject {
  margin: 0 0 8px; font: bold 13px "lucida grande", tahoma, verdana, arial, sans-serif; color: #333;
}
.discuss-op { margin: 0 0 12px; padding: 0 0 10px; border-bottom: solid 1px #D8DFEA; }
.discuss-replies > h5 {
  margin: 0 0 8px; font: bold 11px "lucida grande", tahoma, verdana, arial, sans-serif; color: #333;
}
.profile-action-links button.linkish {
  display: block; width: 100%; text-align: left; padding: 1px 0;
  color: var(--fb); background: 0; border: 0; font: 11px var(--font); cursor: pointer;
}

/* News Feed / Wall — FB 2006 */
.news-item {
  overflow: hidden; margin: 0 0 12px; padding: 0 0 10px; border-bottom: 1px solid #EEEFF3;
}
.news-item .news-ico { float: left; margin: 2px 6px 0 0; }
.news-photo-row { margin: 4px 0; }
.news-ico { margin-top: 2px; margin-right: 0; }
.news-body { min-width: 0; position: relative; padding-right: 110px; }
.news-time { position: absolute; right: 0; top: 0; white-space: nowrap; font-size: 10px; }
.news-snippet { margin: 4px 0 0; }
.news-photo { max-width: 100%; border: 1px solid #B3B3B3; }
.req-row, .rail-row { margin: 0 0 6px; }


.group-locked .profile-box-body{padding:12px}

/* Group/page directories are owned by unified.css. */

/* Classic FB-2005 media upload (no drag-drop) + wallposter */
.compose-table,.formtable{width:100%;max-width:520px}
.formtable .label{width:100px;color:#555;vertical-align:top;padding:4px 8px 4px 0;white-space:nowrap}
.formtable td{padding:4px 0;vertical-align:top}
.inputfile{font:11px var(--font);max-width:100%}
.file-hint{margin:2px 0 0;font-size:10px}
.wallposter{
  margin:0 0 12px;padding:0 0 10px;background:transparent;border:0;border-bottom:1px solid #D8DFEA;
}
.wallposter textarea{
  width:100%;min-height:48px;box-sizing:border-box;font:11px var(--font);
  border:1px solid #bdc7d8;padding:4px;resize:none;
}
.wallposter-tools{
  overflow:hidden;margin:6px 0 0;
}
.wallposter-vis,.wallposter-file{float:left;font-size:11px;color:#555;margin-right:10px;line-height:20px}
.wallposter-go{float:right}
.avatar-edit-preview,.cover-edit-preview{width:80px;height:80px;border:1px solid #B3B3B3}
.cover-edit-preview{width:120px;height:120px}
.classic-page-lead { margin: 0 0 10px; font-size: 11px; color: #555; }
.photo-nav {
  overflow: hidden; margin: 0 0 10px; padding: 6px 8px;
  background: #f7f7f7; border: 1px solid #ccc; font: 11px var(--font);
}
.photo-nav a { color: var(--fb); font-weight: bold; }
.photo-nav-back { float: left; }
.photo-nav-owner { float: right; }
.photo-nav-mid { text-align: center; }
.photo-nav-pos { margin: 0 10px; color: #555; font-weight: normal; }
.photo-view { text-align: center; }
.photo-view-stage {
  margin: 0 auto 8px; padding: 8px; background: #fff;
  border: solid 1px #ccc;
}
.photo-view-img {
  max-width: 100%; width: auto; height: auto;
  border: 1px solid #B3B3B3; display: inline-block; vertical-align: middle;
  background: #eee;
}
.photo-view-full {
  margin: 6px 0 0; font-size: 11px;
}
.photo-view-fallback { display:block; margin:0 auto; border:1px solid #B3B3B3; }
.photo-caption {
  margin: 8px auto 0; max-width: 480px; padding: 6px 8px;
  background: #f7f7f7; border: 1px solid #ddd; font-size: 12px; color: #333; text-align: left;
}
.photo-caption-form { margin: 12px 0 0; text-align: left; }
.photo-page .classic-page-lead a { color: var(--fb); }
.photo-upload-form{margin:0 0 10px;padding:0 0 8px;border-bottom:1px solid #EEEFF3}
.group-page #content.group-content { padding: 10px; }
.group-page #content:not(.group-content) { padding: 10px 12px 14px; }
.group-join-panel{margin:6px 0 10px;padding:0 0 8px;border-bottom:1px solid var(--line)}
.group-join-status{
  margin:0 0 8px;padding:0 0 6px;border-bottom:1px solid var(--line);
  font:11px var(--font);color:#333;
}
.group-join-status b{display:block;color:#333;font-size:11px;font-weight:bold}
.group-join-status .label{display:block;margin:2px 0 0;color:#777;font-weight:normal;font-size:10px}
.profile-action-links .group-join-status{width:100%;border-bottom:1px solid var(--line)}
.member-row{display:block;overflow:hidden}
.members-full .col-name{width:auto}
.group-page .profile-box > h4,
.feed-page .profile-box > h4{
  background:#D8DFEA;color:#3B5998;
  font:bold 11px/16px "lucida grande", tahoma, verdana, arial, sans-serif;
  margin:0;padding:2px 8px;border-top:solid 1px #3B5998;
}
.group-page .profile-box > h4 .edit,
.feed-page .profile-box > h4 .edit{color:gray;float:right;font-weight:normal;text-decoration:none}
.group-page .profile-box > h4 .edit:hover,
.feed-page .profile-box > h4 .edit:hover{color:#3B5998}

/* Shared directory primitives for sections not migrated yet. */
.people-lead{margin:0 0 8px;font:11px/16px var(--font);color:#333}
.people-top-links{margin:0 0 10px;font:11px var(--font)}
.people-top-links a{color:var(--fb)}
.people-top-links span{margin:0 4px;color:#aaa}
/* directory tabs — classic left #tabs (not centered about-page chrome) */
:is(
  .events-page, .group-page, .groups-index, .search-page,
  .questions-page, .polls-page, .notes-page, .market-page, .links-page, .gifts-page
) #tabs {
  text-align: left; padding: 4px 0; margin: 0 0 12px; border-bottom: solid 1px var(--fb);
}
:is(
  .events-page, .group-page, .groups-index, .search-page,
  .questions-page, .polls-page, .notes-page, .market-page, .links-page, .gifts-page
) #tabs .activetab,
:is(
  .events-page, .group-page, .groups-index, .search-page,
  .questions-page, .polls-page, .notes-page, .market-page, .links-page, .gifts-page
) #tabs .inactivetab { display: inline; padding: 0; margin: 0; }
:is(
  .events-page, .group-page, .groups-index, .search-page,
  .questions-page, .polls-page, .notes-page, .market-page, .links-page, .gifts-page
) #tabs a { margin: 0; padding: 4px; }
:is(
  .events-page, .group-page, .groups-index, .search-page,
  .questions-page, .polls-page, .notes-page, .market-page, .links-page, .gifts-page
) #tabs .activetab a {
  color: #fff; background: var(--fb); text-decoration: none;
}
:is(
  .events-page, .group-page, .groups-index, .search-page,
  .questions-page, .polls-page, .notes-page, .market-page, .links-page, .gifts-page
) #tabs .inactivetab a:hover {
  background: var(--line); text-decoration: none;
}
.classic-person-row{
  margin:0 0 8px;padding:0 0 8px;border-bottom:1px solid #eee;
  font:11px/14px var(--font);overflow:hidden;
}
.classic-person-row:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.classic-person-name{
  display:block;overflow:hidden;max-width:70%;
  color:var(--fb);text-decoration:none;vertical-align:top;
}
.classic-person-name:hover b{text-decoration:underline}
.classic-person-name b{display:block;font-size:11px;color:var(--fb)}
.classic-person-name img{
  float:left;width:50px;height:50px;margin-right:8px;border:1px solid #B3B3B3;
}
.classic-person-name > span{display:block;overflow:hidden}
.classic-person-sub{display:block;color:#777;font-size:10px;font-weight:normal;margin-top:1px}
.classic-inline-actions{
  float:right;margin:0;padding:2px 0 0;font:11px/16px var(--font);color:#777;text-align:right;
}
.classic-inline-actions form{display:inline;margin:0}
.classic-inline-actions .inputsubmit{margin:0;padding:1px 6px;font-size:11px}
.classic-person-row-side{
  display:block;
  overflow:hidden;
}
/* actions float first (via right), name fills leftover — keep max-width room */
.classic-person-row-friend{overflow:hidden}
.classic-person-row-friend .classic-inline-actions-friend{
  float:right;white-space:nowrap;padding-top:2px;text-align:right;margin-left:8px;
}
.classic-person-row-friend .classic-person-name{
  display:block;overflow:hidden;max-width:none;
}
.classic-person-row-side .classic-person-name{max-width:100%}
.classic-person-row-side .classic-person-name img{width:32px;height:32px}
.classic-person-row-side .classic-inline-actions{float:none;display:block;margin:3px 0 0 40px;text-align:left}
.classic-inline-actions-stack{float:none;display:block;margin:4px 0 0 40px;text-align:left}
.classic-inline-actions-stack form{display:inline;margin:0 6px 0 0}
.friends-side-foot{margin:6px 0 0;font:11px var(--font)}

/* Directory lists — flat FB Find Friends (no nested console chrome) */
.dir-heading{
  margin:0 0 8px;padding:0 0 2px;font:bold 11px/16px var(--font);color:#333;
  border-bottom:solid 1px var(--line);
}
.dir-list{margin:0 0 12px}
.search-page .people-search-form .formtable .label{
  font-weight:bold;color:gray;text-align:right;padding-right:8px;
}
.note-compose{margin:0 0 14px;padding:0 0 12px;border-bottom:solid 1px var(--line)}
.note-compose .formtable{max-width:100%}
.note-item{
  margin:0 0 12px;padding:0 0 10px;border-bottom:solid 1px #EEEFF3;
  font:11px/14px var(--font);
}
.note-item:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.note-head{margin:0 0 4px}
.note-body{margin:0 0 4px;color:#333}


/* ===== Profile FB Dec 2005 (profile.css) =====
   #content only pads; #userprofile carries narrowleftbg so the rule
   aligns with the 200px left column (not shifted by padding). */
.profile #content {
  padding: 10px 0 10px 10px !important;
  overflow: hidden;
  background: #fff;
}
/* Timeline cover sits full-bleed above the two columns. */
.profile-tl #content { padding: 0 0 12px !important; }
.profile-tl .flash { margin: 8px 10px 0; }
.profile-tl #userprofile { margin: 0 0 0 10px; padding-top: 8px; }
.profile-tl .tl-cover {
  position: relative;
  margin: 0 0 44px;
  background: #3B5998;
}
.profile-tl .tl-cover-photo {
  height: 248px;
  background-color: #3B5998;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.profile-tl .tl-cover.is-empty .tl-cover-photo {
  background-image: linear-gradient(180deg, #5b7ec2 0%, #3B5998 52%, #2a4275 100%);
}
.profile-tl .tl-cover-shade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}
.profile-tl .tl-cover-btn {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  padding: 5px 9px;
  border: 1px solid #8a8a8a;
  background: #f5f5f5;
  color: #333;
  font: bold 11px "lucida grande", tahoma, verdana, arial, sans-serif;
  text-decoration: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}
.profile-tl .tl-cover-btn:hover {
  background: #fff;
  text-decoration: none;
  border-color: #3B5998;
  color: #3B5998;
}
.profile-tl .tl-cover-foot {
  position: absolute; left: 12px; right: 12px; bottom: -40px;
  z-index: 2; overflow: hidden;
}
.profile-tl .tl-avatar {
  float: left; margin: 0 12px 0 0;
  border: 4px solid #fff;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.profile-tl .tl-avatar img {
  display: block; width: 128px; height: 128px; border: 0; vertical-align: top;
}
.profile-tl .tl-who {
  overflow: hidden;
  padding: 0 0 48px;
}
.profile-tl .tl-who h1 {
  margin: 0; padding: 72px 0 0;
  color: #fff;
  font: bold 22px/26px "lucida grande", tahoma, verdana, arial, sans-serif;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.profile-tl .tl-sub {
  margin: 3px 0 0;
  color: #f2f2f2;
  font: 11px/14px "lucida grande", tahoma, verdana, arial, sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.profile-tl .tl-label {
  display: inline; margin: 0; color: #333;
  font: 11px/14px "lucida grande", tahoma, verdana, arial, sans-serif;
}
.profile-tl .tl-count {
  color: #808080;
  font-weight: normal;
}
.profile-tl .tl-actions { margin: 6px 0 0; }
.profile-tl #profilenarrowcolumn { padding-top: 8px; }
.profile-tl #profilewidecolumn { padding-top: 0; }
.profile-tl #tabs {
  margin: 0 0 10px;
  padding: 0 0 0;
  border-bottom: solid 1px #3B5998;
  background: #fff;
}
.profile-tl #tabs .activetab a,
.profile-tl #tabs .inactivetab a {
  display: inline-block;
  margin: 0 1px 0 0;
  padding: 6px 9px 5px;
  font: bold 11px/14px "lucida grande", tahoma, verdana, arial, sans-serif;
}
.profile-tl #tabs .activetab a {
  color: #fff;
  background: #3B5998;
}
.profile-tl #tabs .inactivetab a { color: #3B5998; }
.profile-tl #tabs .inactivetab a:hover {
  background: #D8DFEA;
  text-decoration: none;
}
.profile-tl .profile-action-links {
  padding: 0;
  border: 0;
}
.profile-tl .profile-box-body.profile-action-links {
  padding: 0;
}
.profile-tl .profile-action-links a,
.profile-tl .profile-action-links button,
.profile-tl .profile-action-links .muted {
  padding: 6px 8px;
  border-bottom: solid 1px #E5E5E5;
  line-height: 14px;
}
.profile-tl .profile-action-links a:last-child,
.profile-tl .profile-action-links form:last-child button,
.profile-tl .profile-action-links > .muted:last-child {
  border-bottom: 0;
}
.profile-tl .profile-box > h4 {
  padding: 4px 8px;
  letter-spacing: 0;
}
.profile-tl .profile-box > h4 .edit {
  padding-top: 0;
  font-size: 11px;
}
.profile-tl .profile-box-body {
  padding: 8px;
}
.profile-tl #status.profile-status {
  margin: 0;
  padding: 0;
}
.profile-tl #status .profile-status-form .inputtext {
  width: 100%;
  margin: 3px 0 0;
  padding: 3px 4px;
  border: 1px solid #BDC7D8;
}
.profile-tl .status-place { margin-top: 4px; }
.profile-tl .profile-photo-thumbs a {
  margin: 0 4px 4px 0;
}
.profile-tl .profile-photo-thumbs img {
  width: 50px; height: 50px;
  border: 1px solid #B3B3B3;
  display: block;
}
.profile-tl .profilelinks { margin: 0; padding: 0; list-style: none; }
.profile-tl .profilelinks li { margin: 0 0 3px; line-height: 14px; }
.profile-tl .infotable td.label {
  color: #777;
  font-weight: bold;
}
.profile-tl .subtabs {
  margin: 0 0 8px;
  padding: 0 0 6px;
  border-bottom: solid 1px #D8DFEA;
}
.profile-tl .subtabs a {
  padding: 3px 7px;
  font-weight: bold;
}
.profile-tl .minifeed-item {
  margin: 0 0 6px;
  padding: 0 0 6px;
  border-bottom: 1px solid #EEE;
  line-height: 14px;
}
.profile-tl .minifeed-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.profile #userprofile {
  background: #fff url("../img/narrowleftbg.0cdc41f465d9.gif") repeat-y left top;
  overflow: hidden;
}
.profile #profilenarrowcolumn {
  float: left;
  width: 200px;
  margin: 0 10px 0 0;
  padding: 0;
}
.profile #profilewidecolumn {
  float: left;
  width: 394px;
  margin: 0;
  padding: 0;
  min-width: 0;
}
/* legacy class aliases (partials / smoke) */
.profile-left { float: left; width: 200px; margin: 0 10px 0 0; }
.profile-right { float: left; width: 394px; margin: 0; min-width: 0; }
.profile #tabs {
  text-align: left;
  margin: 0 0 12px;
  padding: 4px 0;
  border-bottom: solid 1px var(--fb);
}
/* Classic subtabs — feed / apps / friends / timeline / profile */
.subtabs {
  text-align: left;
  margin: 0 0 10px;
  padding: 2px 0 6px;
  border-bottom: solid 1px #D8DFEA;
}
.subtabs > div { display: inline; padding: 0; margin: 0; }
.subtabs a { margin: 0; padding: 3px 5px; }
.subtabs .activetab a { color: #fff; background: var(--fb); }
.subtabs .activetab a:hover { text-decoration: none; }
.subtabs .inactivetab a:hover { background: var(--line); text-decoration: none; }
.profile .subtabs { margin: 0 0 10px; }
.profile-tagged a { margin: 0 4px 4px 0; display: inline-block; vertical-align: top; }
.profile-tagged img { width: 75px; height: 75px; border: 1px solid #B7B7B7; }
.photo-tags { margin-top: 8px; }
.photo-tag-form { margin-top: 6px; }
.profile-picture {
  width: 200px;
  text-align: center;
}
.profile-picture img {
  width: 200px;
  height: 200px;
  border: 1px solid #B3B3B3;
  display: block;
  margin: 0 auto;
}
.profile-action-links {
  margin: 0;
  padding: 10px 0;
  background: #fff;
  border-bottom: 0;
}
.profile-action-links a,
.profile-action-links button,
.profile-action-links .muted {
  display: block;
  width: auto;
  margin: 0;
  padding: 2px 3px;
  border: 0;
  border-bottom: solid 1px #D8DFEA;
  background: #fff;
  color: #3B5998;
  font: 11px "lucida grande", tahoma, verdana, arial, sans-serif;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.profile-action-links form { margin: 0; }
.profile-action-links a:hover,
.profile-action-links button:hover {
  color: #fff !important;
  background: #3B5998 !important;
  text-decoration: none !important;
}
.profile-action-links .muted,
.profile-action-links button.muted { color: #777; cursor: default; }
.profile-action-links button.muted:hover { color: #fff !important; background: #3B5998 !important; cursor: pointer; }

.profile .profile-box {
  margin: 0 0 10px;
  border: 0;
  background: transparent;
}
.profile .profile-box > h4 {
  margin: 0;
  padding: 2px 8px;
  font: bold 11px/16px "lucida grande", tahoma, verdana, arial, sans-serif;
  color: #3B5998 !important;
  background: #D8DFEA !important;
  border-top: solid 1px #3B5998;
  overflow: hidden;
}
.profile .profile-box > h4 .edit {
  float: right;
  color: gray !important;
  font-weight: normal;
  text-decoration: none;
}
.profile .profile-box > h4 .edit:hover { color: #3B5998 !important; }
.profile .profile-box-body {
  padding: 10px 8px 15px;
  line-height: 13px;
}
.profile .profile-subsection h5 {
  color: #3B5998;
  font: bold 12px "lucida grande", tahoma, verdana, arial, sans-serif;
  margin: 0 0 6px;
  padding: 2px 8px;
  background: #eee;
  border-top: solid 1px #ccc;
  border-bottom: 0;
}
.profile .infotable { margin: 0 0 8px; width: 100%; border-collapse: collapse; }
.profile .infotable td {
  vertical-align: top;
  font-size: 11px;
  line-height: 13px;
  padding: 1px 0;
}
.profile .infotable td.label {
  width: 120px;
  color: gray;
  font-weight: bold;
  text-align: right;
  padding-right: 8px;
  white-space: nowrap;
}
/* Archive profile.css friendTable */
.profile .friendTable {
  margin: 0;
  padding: 0;
  width: 100%;
  border-collapse: collapse;
}
.profile .friendTable td {
  margin: 0;
  padding: 3px 0;
  vertical-align: bottom;
  text-align: center;
  width: 62px;
  font-size: 11px;
  line-height: 13px;
}
.profile .friendTable td a { color: #3B5998; text-decoration: none; }
.profile .friendTable td a:hover { text-decoration: underline; }
.profile .friendTable img,
.profile .friendTable .avatar {
  width: 50px;
  height: 50px;
  margin: 0 auto 4px;
  border: 1px solid #B3B3B3;
  display: block;
}
.profile .morefriends { margin: 5px 0 0; }

/* Info / legal pages — about + FAQ */
.about #content { margin: 0; padding: 0 20px 20px; }
.about #tabs { margin: 0 0 20px; padding-top: 20px; }
.about .fullwidth { margin: 0 0 10px; }
.about .fullwidth h4,
.about #faqanswers h4,
.about #faqindex h4 {
  border-bottom: solid 1px #D8DFEA;
  margin: 12px 0 8px;
  padding: 0 0 2px;
  font-size: 13px;
  color: #000;
}
.about #faqindex { line-height: 16px; padding: 0 0 10px; overflow: hidden; }
.about #faqindex .faq-col { width: 48%; float: left; }
.about #faqindex .faq-link { margin: 4px 0; }
.about #faqanswers { line-height: 16px; padding: 0 0 10px; }
.about #faqanswers p { margin: 0 0 12px; padding-right: 40px; }
.about .halfwidth p { line-height: 16px; margin: 10px 0; }
.legal-content, .profile-box { /* noop legacy */ }


/* ===== Profile polish FB2005 wall ===== */
.profile .profile-subsection h5 {
  color: #3B5998 !important;
  font: bold 12px "lucida grande", tahoma, verdana, arial, sans-serif !important;
  margin: 8px 0 6px !important;
  padding: 2px 8px !important;
  background: #eee !important;
  border-top: solid 1px #ccc !important;
  border-bottom: 0 !important;
}
.profile .profile-subsection:first-child h5 { margin-top: 0 !important; }

/* Photos on profile — shared .album-index */
.profile #photos,
.profile .profile-albums { overflow: hidden; }
.profile .profile-photo-thumbs a { float: left; margin: 0 6px 6px 0; }
.profile .profile-photo-thumbs img {
  width: 75px; height: 75px; border: 1px solid #B3B3B3; display: block;
}

.profile .profilelinks { margin: 0; padding: 0 0 0 10px; list-style: disc; color: #3B5998; }
.profile .profilelinks li { padding: 0 0 5px; }

/* Wall — archive wall.css */
.profile .profile-box.wall-box > .profile-box-body {
  padding: 10px;
  background: #f7f7f7;
}
.wallpost {
  float: none; clear: both; width: 100%; margin: 0 0 15px; padding: 0;
  box-sizing: border-box;
  display: block;
}
.wallpost:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.wallpost .wp-table { width: 100%; border-collapse: collapse; }
.wallpost .wp-table td { padding: 0; vertical-align: top; }
.wallpost td.image { width: 55px; text-align: left; }
.wallpost td.image img {
  width: 50px; height: 50px; border: 1px solid #B3B3B3; display: block;
}
.wallpost .info {
  width: 100%;
  border-top: solid 1px #3B5998;
}
.wallpost .info .header {
  padding: 3px 5px;
  background: #f7f7f7;
  border-bottom: solid 1px #D8DFEA;
  font-size: 11px;
}
.wallpost .info .header a.muted { color: #777; font-weight: normal; }
.wallpost .info .header a.muted:hover { text-decoration: underline; }
.wallpost .info .text { padding: 5px; background: #fff; font-size: 11px; line-height: 14px; }
.wallpost .shared-note {
  margin-top: 6px; padding: 8px; border: 1px solid #d8dfea; background: #f7f7f7;
}
.wallpost .shared-note .shared-head { margin-bottom: 4px; }
.wallpost .share-blurb { margin-bottom: 4px; }
.wallpost .info .actions {
  padding: 3px 5px;
  border-bottom: solid 1px #D8DFEA;
  background: #fff;
  clear: right;
  font-size: 11px;
  color: #777;
}
.wallpost .info .actions a:hover { text-decoration: underline; }
.profile .minifeed-item {
  margin: 0 0 8px; padding: 0 0 6px; border-bottom: solid 1px #D8DFEA;
  font-size: 11px; line-height: 14px; overflow: hidden;
}
.profile .minifeed-item .news-ico { float: left; margin: 2px 6px 0 0; }
.profile .minifeed-item:last-child { border-bottom: 0; }

/* wallposter on profile wall */
.profile .wall-box .wallposter {
  margin: 0 0 12px;
  padding: 0 0 10px;
  border-bottom: solid 1px #D8DFEA;
  background: transparent;
}
.profile .wall-box .wallposter textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #BDC7D8;
  padding: 3px;
  font: 11px "lucida grande", tahoma, verdana, arial, sans-serif;
  resize: none;
}
.profile .wall-box .wallpost .info .header a { color: #3B5998; }
.profile .wall-box .wallpost .info .actions .linkish,
.profile .wall-box .wallpost .info .actions a { color: #3B5998; }
.profile .wall-box .clearfix { height: 0; clear: both; overflow: hidden; }

/* ===== Wall chrome global FB2005 ===== */
.wall-box > .profile-box-body,
.group-wall-box > .profile-box-body {
  padding: 10px;
  background: #f7f7f7;
  overflow: hidden;
}
.wallposter textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #BDC7D8;
  padding: 3px;
  font: 11px "lucida grande", tahoma, verdana, arial, sans-serif;
  min-height: 48px;
  resize: none;
}
.wallpost-edit { float: right; font-weight: normal; }
.wallpost-edit a { color: #3B5998; }
.wallpost .info .actions .linkish,
.wallpost .info .actions a { color: #3B5998; }
.news-item {
  margin: 0 0 12px;
  padding: 0 0 8px;
  border-bottom: solid 1px #D8DFEA;
  background: #fff;
}

/* ===== Feed/group polish FB2005 ===== */
.feed-page .profile-box,
.group-page .profile-box {
  margin: 0 0 10px;
  border: 0;
  background: transparent;
}
.feed-page .profile-box-body,
.group-page .profile-box-body {
  padding: 10px 8px 12px;
  line-height: 13px;
  background: #fff;
}
.feed-page .wall-box > .profile-box-body,
.group-page .wall-box > .profile-box-body {
  background: #f7f7f7;
}
.feed-page .news-item {
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: solid 1px #D8DFEA;
  background: #fff;
}
.feed-filters.subtabs { margin: 0 0 8px; }
.apps-index .subtabs { margin: 0 0 12px; }
.feed-list-links { margin: 0 0 10px; }
.feed-list-links a.is-on { font-weight: bold; }
.feed-page .news-item .news-body { overflow: hidden; padding-right: 0; }
.feed-page .news-item .news-time {
  position: static; display: inline; margin-left: 4px; font-size: 11px;
}
.news-hide { margin: 2px 0 0 22px; font-size: 10px; }
.news-hide form { display: inline; }
.feed-main .wallpost, .feed-main .news-item { background: #fff; }
.feed-page .news-snippet { margin: 4px 0 0; }
.feed-page .news-ico { margin-top: 3px; }
.feed-rail .profile-box-body,
.group-rail .profile-box-body {
  font-size: 11px;
}
.feed-rail .req-row,
.feed-rail .rail-row {
  margin: 0 0 8px; padding: 0 0 6px; border-bottom: solid 1px #D8DFEA;
}
.feed-rail .req-row:last-child,
.feed-rail .rail-row:last-child { border-bottom: 0; }


/* ===== Utility pages FB2005 ===== */
.clear { clear: both; height: 0; overflow: hidden; margin: 0; padding: 0; border: 0; }
.profile .profile-albums .clear { clear: both; }

.search-page .profile-box > h4,
.events-page .profile-box > h4,
.pokes-page .profile-box > h4,
.inbox-page .profile-box > h4,
.account-page .profile-box > h4 {
  background: #D8DFEA; color: #3B5998;
  font: bold 11px/16px "lucida grande", tahoma, verdana, arial, sans-serif;
  margin: 0; padding: 2px 8px; border-top: solid 1px #3B5998;
}
.search-page .profile-box-body,
.events-page .profile-box-body,
.pokes-page .profile-box-body,
.inbox-page .profile-box-body,
.account-page .profile-box-body {
  padding: 10px 8px 12px; line-height: 13px;
}
.search-page #content,
.events-page #content,
.pokes-page #content,
.account-page #content { padding: 10px; }
.search-page .profilelinks { margin: 0; padding: 0 0 0 16px; list-style: disc; color: #3B5998; }
.search-page .profilelinks li { padding: 0 0 4px; }
.search-page .minifeed-item {
  margin: 0 0 8px; padding: 0 0 6px; border-bottom: solid 1px #D8DFEA; font-size: 11px;
}
.events-page .event-list-row {
  margin: 0 0 10px; padding: 0 0 8px; border-bottom: solid 1px #D8DFEA; font-size: 11px; overflow: hidden;
}
.events-page .event-list-row:last-child { border-bottom: 0; }
.events-page .event-list-row .classic-inline-actions { float: right; }
.list-thumb { float: left; margin: 0 8px 0 0; }
.list-thumb img { display: block; border: 1px solid #B3B3B3; width: 50px; height: 50px; }
.list-row-body { overflow: hidden; }
.events-page .event-cover { margin: 0 0 8px; }
.events-page .event-cover img { max-width: 100%; border: 1px solid #B3B3B3; }
.events-page #content.events-content { padding: 10px; overflow: hidden; box-sizing: border-box; }
.events-page .event-main { float: left; width: 400px; }
.events-page .event-side { float: right; width: 180px; }
.events-page .event-rsvp { margin-top: 10px; }
.events-page .event-rsvp form.inline { margin-right: 4px; }
.page-page .event-list-row {
  margin: 0 0 8px; padding: 0 0 6px; border-bottom: solid 1px #D8DFEA; font-size: 11px;
}
.page-page .event-list-row:last-child { border-bottom: 0; }
.gifts-page #content { padding: 10px; }
.gift-grid { overflow: hidden; margin: 8px 0 0; }
.gift-tile {
  display: block; float: left; width: 90px; height: 90px; margin: 0 8px 8px 0;
  border: solid 1px #B3B3B3; text-align: center; text-decoration: none;
  box-sizing: border-box; position: relative; overflow: hidden;
  background: var(--gift-bg, #eee); color: var(--gift-fg, #333);
}
.gift-tile img { display: block; width: 100%; height: 100%; border: 0; }
.places-page .place-row { overflow: hidden; }
.places-page .place-photo { margin: 0 0 8px; }
.places-page .place-photo img { max-width: 100%; border: 1px solid #B3B3B3; }
.gift-tile:hover, .gift-tile.is-on { border-color: #3B5998; outline: 1px solid #3B5998; }
.gift-tile-sm { width: 50px; height: 50px; float: left; margin: 0 8px 0 0; }
.gift-tile-title {
  display: block; padding: 18px 4px 0; font-size: 11px; font-weight: bold; line-height: 1.2;
}
.gift-tile-sm .gift-tile-title { padding-top: 14px; font-size: 9px; }
.gift-tile-cap {
  display: block; position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.35); color: #fff; font-size: 9px; padding: 2px 3px;
}
.gift-recv-row { overflow: hidden; margin: 0 0 8px; padding: 0 0 6px; border-bottom: solid 1px #D8DFEA; font-size: 11px; }
.gift-recv-row:last-child { border-bottom: 0; }
.gift-recv-meta { overflow: hidden; }
.gift-grid-profile .gift-recv-row { border-bottom: 0; padding: 0; margin: 0 0 6px; }
.pokes-page .notify-row {
  overflow: hidden; margin: 0 0 8px; padding: 0 0 8px; border-bottom: solid 1px #D8DFEA; font-size: 11px;
}
.pokes-page .notify-row form.inline { float: right; }
.pokes-page .notify-row.is-unread .notify-body { font-weight: bold; }
.pokes-page .profile-box > h4 .edit { float: right; font-weight: normal; }
.inbox-content {
  overflow: hidden; padding: 10px;
}
.inbox-pane { margin: 0; }
.inbox-pane .msg-filter { margin: 0 0 8px; }
.inbox-pane .msg-filter .inputtext { width: 70%; }
.inbox-pane .msg-tabs { margin: 0 0 8px; font-size: 11px; }
.inbox-pane .msg-tabs a.is-on { font-weight: bold; color: #333; text-decoration: none; }
.inbox-pane .msg-tabs .msg-read-all { display: inline; }
.inbox-pane .msg-bulk { margin: 0 0 6px; font-size: 11px; }
.inbox-pane .msg-title-edit { margin: 0 0 10px; font-size: 11px; }
.inbox-pane .msg-title-edit .inputtext { width: 55%; max-width: 280px; margin: 0 4px; }
.inbox-pane .msg-thread-filter { margin: 0 0 8px; font-size: 11px; }
.inbox-pane .msg-thread-filter .inputtext { width: 45%; max-width: 220px; margin: 0 4px; }
.inbox-pane .msg-reply-chip { margin: 0 0 8px; padding: 4px 0; border-top: 1px solid #D8DFEA; }
.inbox-pane .msg-receipt { font-size: 11px; }
.inbox-pane .msg-line.is-mine.is-read .msg-receipt { color: #3B5998; }
.inbox-pane .msg-fwd { display: inline; margin-left: 4px; }
.inbox-pane .msg-fwd > summary { list-style: none; cursor: pointer; display: inline; }
.inbox-pane .msg-fwd > summary::-webkit-details-marker { display: none; }
.inbox-pane .msg-fwd-form { display: inline; margin-left: 4px; }
.inbox-pane .msg-pager { margin: 8px 0 0; font-size: 11px; }
.inbox-table { width: 100%; border-collapse: collapse; margin: 4px 0 0; }
.inbox-table th {
  text-align: left; color: gray; font: bold 11px var(--font);
  border-bottom: 1px solid var(--line); padding: 2px 8px 4px 0;
}
.inbox-table td {
  padding: 8px 8px 8px 0; border-bottom: 1px solid #EEEFF3;
  vertical-align: top; font-size: 11px;
}
.inbox-table .col-check { width: 22px; text-align: center; }
.inbox-table .col-from { width: 180px; }
.inbox-table .col-from a { display: block; overflow: hidden; color: var(--fb); text-decoration: none; }
.inbox-table .col-from img.avatar { float: left; margin-right: 6px; }
.inbox-table .col-from b { display: block; overflow: hidden; padding-top: 8px; }
.inbox-table .col-subj { width: auto; }
.inbox-table .col-when { width: 110px; white-space: nowrap; text-align: right; color: gray; }
.inbox-table tr.is-unread .col-from b,
.inbox-table tr.is-unread .col-subj a { font-weight: bold; }
.inbox-pane .msg-subj-h { font-weight: bold; }
.inbox-pane .msg-log { margin: 0 0 10px; padding: 0 0 8px; }
.inbox-pane .msg-day {
  text-align: center; margin: 12px 0 10px; clear: both; font-size: 11px;
}
.inbox-pane .msg-day span {
  display: inline-block; padding: 2px 10px;
  background: #ECEFF5; border: 1px solid #D8DFEA; color: #555;
}
.inbox-pane .msg-line {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 8px; align-items: start;
  margin: 0 0 10px; padding: 0 0 8px; border-bottom: solid 1px #D8DFEA;
  font-size: 11px; line-height: 14px;
}
.inbox-pane .msg-line:last-child { border-bottom: 0; }
.inbox-pane .msg-av { grid-column: 1; grid-row: 1; float: none; margin: 0; }
.inbox-pane .msg-av img,
.inbox-pane .msg-av .avatar { display: block; }
.inbox-pane .msg-main { grid-column: 2; min-width: 0; }
.inbox-pane .msg-head { overflow: hidden; margin: 0 0 3px; line-height: 16px; }
.inbox-pane .msg-line .msg-del { float: right; margin-left: 6px; }
.inbox-pane .msg-line .msg-body {
  margin: 0; clear: both; white-space: normal; word-wrap: break-word;
  overflow-wrap: anywhere; line-height: 1.35;
}
.inbox-pane .msg-line .msg-text { margin: 0; }
.msg-md p { margin: 0 0 6px; }
.msg-md p:last-child { margin-bottom: 0; }
.msg-md h3,
.msg-md h4 { margin: 0 0 6px; font-size: 12px; color: #333; }
.msg-md ul,
.msg-md ol { margin: 0 0 6px 18px; padding: 0; }
.msg-md blockquote {
  margin: 4px 0 6px; padding: 2px 0 2px 8px;
  border-left: 3px solid #B3B3B3; color: #555;
}
.msg-md hr { border: 0; border-top: 1px solid #D8DFEA; margin: 8px 0; }
.msg-md code {
  font: 11px/1.3 consolas, "courier new", monospace;
  background: #ECEFF5; border: 1px solid #D8DFEA; padding: 0 3px;
}
.msg-md pre {
  margin: 4px 0 6px; padding: 6px 8px;
  background: #F7F7F7; border: 1px solid #D8DFEA; overflow: auto;
}
.msg-md pre code { background: transparent; border: 0; padding: 0; }
.msg-md a { color: #3B5998; }
.msg-md del { color: #777; }
.inbox-pane .msg-body .gift-tile,
.inbox-pane .msg-body .gift-tile-sm {
  float: none; display: inline-block; vertical-align: middle; margin: 0 6px 4px 0;
}
.inbox-pane .msg-older { margin: 0 0 8px; font-size: 11px; }
.inbox-pane .msg-typing { min-height: 1.2em; margin: 0 0 6px; font-style: italic; }
.inbox-pane .msg-voice-compose { margin: 0 0 8px; max-width: 360px; }
.inbox-pane .msg-voice-row { margin: 4px 0 6px; }
.inbox-pane .msg-voice-row #id_voice_file { display: none; }
.inbox-pane .msg-voice {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 0 8px; max-width: 340px;
  padding: 7px 10px; background: #ECEFF5; border: 1px solid #D8DFEA;
}
.inbox-pane .msg-line.is-mine .msg-voice { background: #E7EBF2; border-color: #C4CDDA; }
.inbox-pane .msg-voice.is-draft { margin: 0 0 6px; border-style: dashed; background: #F7F7F7; }
.inbox-pane .msg-voice.is-playing { border-color: #3B5998; }
.inbox-pane .msg-voice-play {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0;
  border: 1px solid #3B5998; background: #3B5998; color: #fff;
  font-size: 11px; line-height: 28px; cursor: pointer;
}
.inbox-pane .msg-voice-play:hover { background: #2E4A84; border-color: #2E4A84; }
.inbox-pane .msg-voice-play.is-on { background: #fff; color: #3B5998; }
.inbox-pane .msg-wave {
  flex: 1 1 auto; display: flex; align-items: center; gap: 1px;
  height: 32px; cursor: pointer; min-width: 140px;
  touch-action: none;
}
.inbox-pane .msg-wave i {
  flex: 1 1 0; display: block; align-self: center;
  min-width: 2px; max-width: 4px; height: 30%;
  background: #8B9DC3; border-radius: 1px;
}
.inbox-pane .msg-wave i.is-played { background: #3B5998; }
.inbox-pane .msg-wave.is-live i { background: #B94A48; }
.inbox-pane .msg-voice-dur,
.inbox-pane .msg-voice-max {
  flex: 0 0 auto; font-size: 11px; color: #777; min-width: 2.4em; text-align: right;
  font-variant-numeric: tabular-nums;
}
.inbox-pane .msg-voice-max { min-width: 0; margin-left: 2px; }
.inbox-pane .msg-voice .msg-audio-el { display: none; }
.inbox-pane .msg-voice-live {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 8px; max-width: 360px;
  padding: 7px 10px; border: 1px solid #E2B6B5; background: #FDF2F2;
}
.inbox-pane .msg-voice-live[hidden],
.inbox-pane .msg-voice-draft[hidden] { display: none; }
.inbox-pane .msg-voice-live-dot {
  width: 8px; height: 8px; background: #B94A48; flex: 0 0 auto;
  animation: msg-voice-pulse 1.1s ease-in-out infinite;
}
@keyframes msg-voice-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.inbox-pane .msg-voice-live-lab { font-size: 11px; }
.inbox-pane .msg-voice-draft-actions { margin: 0; font-size: 11px; }
.inbox-pane .msg-compose { margin: 0 0 8px; clear: both; }
.inbox-pane .msg-compose textarea,
.inbox-pane .msg-compose .inputtext {
  width: 70%; box-sizing: border-box; border: 1px solid #BDC7D8; font: 11px "lucida grande", tahoma, verdana, arial, sans-serif;
}
.msg-md-shell { margin: 0 0 8px; max-width: 720px; position: relative; }
.msg-editor { margin: 0; }
.msg-md-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px; margin: 0; padding: 5px 7px;
  background: #ECEFF5; border: 1px solid #D8DFEA; border-bottom: 0;
}
.msg-md-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.msg-md-sep { width: 1px; height: 14px; background: #C4CDDA; margin: 0 2px; }
.msg-md-btn {
  border: 1px solid #B3B3B3; background: #fff; color: #333;
  font: bold 11px "lucida grande", tahoma, verdana, arial, sans-serif;
  padding: 2px 6px; cursor: pointer; min-width: 22px;
}
.msg-md-btn:hover,
.msg-md-btn:focus,
.msg-md-btn.is-on { border-color: #3B5998; color: #3B5998; outline: 0; }
.msg-md-btn:active { background: #D8DFEA; }
.msg-md-mode { font-size: 11px; white-space: nowrap; }
.msg-md-mode-btn.is-on { font-weight: bold; color: #333; text-decoration: none; }
.msg-compose-fields {
  display: grid; grid-template-columns: 1fr; gap: 0;
  border: 1px solid #BDC7D8; background: #fff;
}
.msg-compose-fields.is-split { grid-template-columns: 1fr 1fr; }
.msg-compose-fields .msg-body-input,
.msg-compose-fields textarea {
  width: 100% !important; min-height: 96px; max-height: 280px;
  margin: 0; padding: 8px; border: 0; resize: vertical;
  font: 12px/1.45 "lucida grande", tahoma, verdana, arial, sans-serif;
  box-sizing: border-box; overflow-y: auto;
}
.msg-compose-fields.is-split .msg-body-input,
.msg-compose-fields.is-split textarea {
  border-right: 1px solid #D8DFEA; resize: none; min-height: 140px;
}
.msg-md-preview {
  min-height: 96px; margin: 0; padding: 8px;
  box-sizing: border-box; width: 100%; background: #FAFBFD; overflow: auto;
}
.msg-compose-fields.is-split .msg-md-preview { min-height: 140px; }
.msg-compose-fields.is-preview .msg-md-preview { min-height: 120px; background: #fff; }
.msg-md-preview[hidden],
.msg-compose-fields textarea[hidden] { display: none !important; }
.msg-md-status {
  margin: 3px 0 0; font-size: 10px; display: flex; flex-wrap: wrap; gap: 4px; color: #777;
}
.msg-md-status.is-warn { color: #B94A48; }
.msg-md-status-hint { color: #999; }
.msg-md-help { margin: 0; font-size: 11px; line-height: 1.45; }
.msg-md-help code {
  font: 11px consolas, "courier new", monospace;
  background: #fff; border: 1px solid #D8DFEA; padding: 0 3px;
}
.msg-pop-wrap { position: relative; display: inline-block; }
.msg-pop {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 40;
  min-width: 220px; max-width: 320px;
  padding: 6px; border: 1px solid #3B5998; background: #fff;
  box-shadow: 2px 2px 0 rgba(59, 89, 152, 0.12);
}
/* Hit-bridge across the 4px gap so hover can reach the panel. */
.msg-pop::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 8px;
}
.msg-pop[hidden] { display: none !important; }
.msg-pop-stickers { min-width: 260px; max-width: 360px; }
.msg-pop-help { min-width: 260px; max-width: 340px; background: #F7F7F7; }
.msg-emoji-grid {
  display: flex; flex-wrap: wrap; gap: 2px;
  max-height: 140px; overflow: auto; padding: 2px;
}
.msg-emoji-btn {
  border: 0; background: transparent; cursor: pointer;
  font-size: 18px; line-height: 1.2; padding: 3px 4px;
}
.msg-emoji-btn:hover { background: #D8DFEA; }
.msg-emoji-text { margin: 6px 0 0; font-size: 11px; }
.msg-sticker-grid {
  display: flex; flex-wrap: wrap; gap: 4px;
  max-height: 160px; overflow: auto; padding: 2px;
}
.msg-sticker-btn {
  cursor: pointer; padding: 0; float: none !important; margin: 0 !important;
}
.msg-sticker-btn.is-on { outline: 2px solid #3B5998; border-color: #3B5998; }
.msg-body-input { display: block; }
.compose-from-album {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px;
}
.compose-from-album[hidden] { display: none !important; }
.compose-from-thumb {
  position: relative; width: 56px; height: 56px; border: 1px solid #B3B3B3; overflow: hidden;
}
.compose-from-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.compose-from-thumb .compose-from-x {
  position: absolute; top: 0; right: 0; border: 0; background: #fff; color: #333;
  font: 11px tahoma, sans-serif; cursor: pointer; padding: 0 3px; line-height: 14px;
}
.compose-from-grid {
  display: flex; flex-wrap: wrap; gap: 6px; max-height: 280px; overflow: auto;
}
.compose-from-photo {
  width: 72px; height: 72px; padding: 0; border: 1px solid #B3B3B3; background: #fff; cursor: pointer;
}
.compose-from-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.compose-from-photo:hover { border-color: #3B5998; }
.compose-from-list { max-height: 260px; overflow: auto; }
@media (max-width: 720px) {
  .msg-compose-fields.is-split { grid-template-columns: 1fr; }
  .msg-compose-fields.is-split .msg-body-input,
  .msg-compose-fields.is-split textarea { border-right: 0; border-bottom: 1px solid #D8DFEA; }
}
.inbox-pane .compose-new .msg-md-shell { max-width: 520px; }
.wallposter .msg-md-shell,
.discuss-compose .msg-md-shell { max-width: 100%; }
.inbox-pane .compose-new .inputtext,
.inbox-pane .compose-new textarea { width: 100%; max-width: 420px; }
.inbox-pane > h4 .edit { float: right; font-weight: normal; }
.inbox-pane .msg-actions form { display: inline; }
.inbox-pane .msg-compose .file-hint { display: block; margin-top: 4px; }
.market-page .market-row,
.notes-page .note-row,
.questions-page .question-row,
.questions-page .answer-row,
.polls-page .poll-row,
.links-page .link-row,
.lists-page .list-row,
.places-page .review-row,
.group-page .doc-row { overflow: hidden; margin: 0 0 8px; padding: 0 0 8px; border-bottom: 1px solid #D8DFEA; }
.market-page .market-row:last-child,
.notes-page .note-row:last-child,
.questions-page .question-row:last-child,
.questions-page .answer-row:last-child,
.polls-page .poll-row:last-child,
.links-page .link-row:last-child,
.lists-page .list-row:last-child,
.places-page .review-row:last-child,
.group-page .doc-row:last-child { border-bottom: 0; }
.market-page .market-photo { margin: 0 0 8px; }
.market-page .market-photo img { max-width: 100%; border: 1px solid #B3B3B3; }
.note-photo { margin: 4px 0; }
.note-photo img { border: 1px solid #B3B3B3; }
.polls-page .poll-options { width: 100%; }
.polls-page .poll-options .poll-opt { width: 55%; }
.polls-page .poll-options .poll-votes { white-space: nowrap; }
/* classic spacing / form width helpers (replace inline styles) */
.stack-xs { margin-top: 4px; }
.stack-sm { margin-top: 8px; }
.stack-md { margin-top: 10px; }
.stack-lg { margin-top: 16px; }
.stack-v { margin: 8px 0; }
.stack-below { margin-bottom: 12px; }
.inline-gap { margin-left: 8px; }
.input-city { width: 100px; }
.friends-find .input-city { width: 120px; }
.input-sort { width: auto; }
.input-wide { width: 100%; }
.input-search { width: 220px; }
.input-search-wide { width: 280px; }
.input-comment { width: 80%; }
.checkin-form { margin-top: 10px; }
.cover-pick { cursor: pointer; }
.page-cover-fallback {
  width: 180px; height: 180px; border: 1px solid #B3B3B3;
  background: var(--page-cover, #3B5998);
}
.app-open-btn { padding: 4px 10px; text-decoration: none; }
.wall-comment-compose .input-comment,
.wall-comment-compose input.input-comment { width: 80%; }
.action-row { overflow: hidden; }
.action-row form.inline { display: inline; }
.photo-tags-list { margin: 0 0 6px; line-height: 16px; }
.photo-tags-list form.inline { display: inline; }
/* orphan browse modules — same content padding as gifts/account */
.notifications-page #content,
.birthdays-page #content,
.lists-page #content,
.blocked-page #content,
.networks-page #content,
.places-page #content,
.og-page #content,
.saves-page #content,
.safety-page #content,
.trending-page #content,
.hashtag-page #content,
.mobile-page #content,
.collections-page #content,
.apps-index #content,
.page-edit-page #content { padding: 10px 12px 14px; }
.collections-page .formtable,
.apps-index .formtable,
.page-edit-page .formtable { width: 100%; max-width: 480px; }
.collections-page .formtable .label,
.apps-index .formtable .label,
.page-edit-page .formtable .label {
  width: 120px; color: #666; vertical-align: top; padding-right: 8px;
}
.collections-page .formtable td,
.apps-index .formtable td,
.page-edit-page .formtable td { padding: 3px 0; vertical-align: top; }
.inbox-pane .msg-photo { max-width: 100%; border: 1px solid #B3B3B3; margin-top: 4px; }
.inbox-pane .msg-video { margin-top: 4px; }
.inbox-pane .msg-video video.msg-photo { display: block; max-height: 280px; background: #000; }
.inbox-pane .msg-members { margin: 0 0 8px; font-size: 11px; }
.account-page .formtable .inputtext,
.account-page .formtable input[type="password"],
.account-page .infotable .inputtext {
  width: 220px; border: 1px solid #BDC7D8; padding: 2px; font: 11px "lucida grande", tahoma, verdana, arial, sans-serif;
}
.account-page .infotable .inputtext { width: 100%; max-width: 360px; }

.group-page #content:not(.group-content) {
  padding: 10px;
}
.group-page .event-row {
  margin: 8px 0 0; padding: 0 0 8px; border-bottom: solid 1px #D8DFEA; font-size: 11px;
}
.group-page .event-row:last-child { border-bottom: 0; }
.group-page .profile-subsection h5 {
  color: #3B5998; font: bold 12px "lucida grande", tahoma, verdana, arial, sans-serif;
  margin: 0 0 6px; padding: 2px 8px; background: #eee; border-top: solid 1px #ccc; border-bottom: 0;
}
select.inputtext {
  font: 11px "lucida grande", tahoma, verdana, arial, sans-serif;
  border: 1px solid #BDC7D8; padding: 2px; background: #fff;
}
#loginform select.inputtext { width: auto; }

.welcome .welcome-cta { margin: 16px 0 0; font-size: 11px; }
.welcome .welcome-cta a { font-weight: bold; }

.reg-wrap { margin: 10px 20px; max-width: 480px; }
.reg-wrap .formtable { margin: 10px auto; }
#squicklogin .file-hint { margin: 6px 0 0; }


/* FB 2011 Timeline cover — see .profile-tl .tl-cover* above */
.profile-cover-img { display: block; max-width: 100%; height: auto; margin: 4px 0; }
#currentcover { margin-top: 16px; clear: both; }
#currentcover .tl-edit-preview {
  width: 100%; max-width: 520px; height: 160px; margin: 0 0 8px;
  border: 1px solid #B3B3B3;
  background: #3B5998 center center no-repeat;
  background-size: cover;
}
.ticker-row {
  padding: 4px 0;
  border-bottom: 1px solid #d8dfea;
  font-size: 11px;
  line-height: 1.35;
}
.ticker-row:last-child { border-bottom: 0; }
.msg-reply {
  margin: 0 0 4px;
  padding: 2px 6px;
  border-left: 3px solid #d8dfea;
  background: #f7f7f7;
}

/* Facebook-2006 dialog (modal) — blue title, classic buttons, no flex chrome */
#classic-dialog-root {
  display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000;
}
#classic-dialog-root.is-open { display: block; }
.fb-dialog-mask {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  background: #000; opacity: 0.35; filter: alpha(opacity=35);
}
.fb-dialog {
  position: absolute; left: 50%; top: 18%;
  width: 420px; margin-left: -210px;
  background: #fff; border: 1px solid #3B5998;
  font: 11px/14px var(--font); color: #333;
}
.fb-dialog-title {
  background: #6D84B4; color: #fff; font-weight: bold;
  padding: 5px 8px; overflow: hidden;
}
.fb-dialog-title-text { float: left; }
.fb-dialog-x {
  float: right; color: #fff; text-decoration: none; font-weight: bold; padding: 0 4px;
}
.fb-dialog-x:hover { background: #3B5998; color: #fff; }
.fb-dialog-body { padding: 10px 12px; min-height: 40px; }
.fb-dialog-footer {
  padding: 8px 12px; background: #F2F2F2; border-top: 1px solid #ccc; text-align: right;
}
.fb-dialog-footer .fb-dialog-btn { margin-left: 6px; }
body.fb-dialog-open { overflow: hidden; }
.fb-dialog-wide { width: 520px; margin-left: -260px; }
.fb-dialog-photo {
  width: 720px; margin-left: -360px; top: 8%;
}
.fb-dialog-photo .fb-dialog-body { padding: 0; }
.fb-dialog-perms { margin: 6px 0 8px 18px; padding: 0; }
.fb-dialog-perms li { margin: 2px 0; }
.app-perms-list { margin: 0 0 0 16px; padding: 0; }
.app-perms-list li { margin: 1px 0; }
.code-sample {
  background: #f7f7f7; border: 1px solid #ccc; padding: 8px 10px;
  font: 11px/14px monospace; overflow: auto; margin: 6px 0;
}
.app-canvas-page code, .apps-index code { font: 11px/14px monospace; }
.photo-modal { display: table; width: 100%; table-layout: fixed; }
.photo-modal-left {
  display: table-cell; width: 58%; vertical-align: middle;
  background: #111; color: #ccc; text-align: center; padding: 10px 8px;
}
.photo-modal-right {
  display: table-cell; width: 42%; vertical-align: top;
  padding: 8px 10px; background: #fff;
}
.photo-modal-img { max-width: 100%; max-height: 420px; vertical-align: middle; }
.photo-modal-nav { margin-top: 8px; font-size: 11px; }
.photo-modal-nav a { color: #fff; }
.photo-modal-head { margin-bottom: 6px; }
.photo-modal-comments { margin-top: 8px; max-height: 280px; overflow: auto; }
.photo-modal-full { margin-top: 8px; }
.photo-modal-like { margin-bottom: 4px; }
.poker-card {
  display: inline-block; border: 1px solid #3B5998; background: #fff;
  padding: 4px 6px; margin-right: 4px; font-weight: bold;
}
#snav .snav-apps-label,
#snav a.snav-apps-label {
  display: block; margin-top: 8px; padding: 2px 0 1px;
  color: #333; font-weight: bold; font-size: 11px;
  text-decoration: none;
}
#snav a.snav-apps-label:hover { text-decoration: underline; color: #3b5998; }
#snav a.snav-app { padding-left: 8px; }
.apps-bookmark-hint { margin: 0 0 10px; }
.apps-index .col-act .inline { display: inline; }
/* Compact secondary nav — classic blue chrome (no HTML5 details) */
#snav .snav-more {
  display: block; float: left; width: 114px; clear: both; margin: 0; padding: 0;
}
#snav .snav-more-cb {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; clip: rect(0 0 0 0); overflow: hidden;
}
#snav .snav-more-toggle {
  display: block; width: 114px; margin: 0; padding: 2px 3px;
  border-bottom: solid 1px var(--line); color: var(--fb);
  box-sizing: border-box; font: 11px/14px var(--font); cursor: pointer;
}
#snav .snav-more-toggle::after { content: " ▾"; color: gray; font-size: 10px; }
#snav .snav-more-cb:checked + .snav-more-toggle::after { content: " ▴"; }
#snav .snav-more-toggle:hover { color: #fff; background: var(--fb); }
#snav .snav-more-cb:checked + .snav-more-toggle:hover::after { color: #fff; }
#snav .snav-more-panel { display: none; float: left; width: 114px; }
#snav .snav-more-cb:checked ~ .snav-more-panel { display: block; }
#snav .snav-more-panel a { width: 114px; }
.app-canvas-page .classic-page-lead { margin-bottom: 10px; }
/* App Center / calculator classic 16px icons */
.app-ico {
  display: inline-block; width: 16px; height: 16px; vertical-align: -3px;
  margin-right: 4px; border: 0;
}
.app-ico-lg { vertical-align: -2px; margin-right: 6px; }
.calc-ico {
  display: inline-block; width: 16px; height: 16px; vertical-align: -3px;
  margin-right: 4px; border: 0;
}
.calc-suite h4 .calc-ico { margin-right: 5px; }
.calc-suite .calc-tool-list .calc-ico { margin-right: 5px; }
.calc-suite .calc-popular-links .calc-ico { margin-right: 2px; }
.calc-suite .calc-related-list .calc-ico { margin-right: 3px; }
/* Calculators suite — classic profile-box chrome, clear hierarchy */
.calc-suite .calc-lead { margin: 0 0 10px; }
.calc-suite .calc-blurb { margin: 0 0 8px; color: #333; }
.calc-suite .calc-law {
  margin: 0 0 10px; padding: 6px 8px;
  background: #edf2f8; border: 1px solid #c6d2e3; color: #333;
  font: 11px/15px var(--font);
}
.calc-suite .calc-search { margin: 0 0 12px; }
.calc-suite .calc-search .inputtext { margin: 0 4px; }
.calc-suite .calc-popular { margin: 0 0 12px; }
.calc-suite .calc-popular h5,
.calc-suite .calc-related h5,
.calc-suite .calc-topic h5 {
  margin: 0 0 6px; padding: 0; font: bold 11px/14px var(--font); color: #333;
}
.calc-suite .calc-popular-links { margin: 0; line-height: 1.6; }
.calc-suite .calc-topic-nav { margin: 0 0 12px; line-height: 1.5; }
.calc-suite .calc-topics { margin: 0 0 12px; }
.calc-suite .calc-topic { margin: 0 0 14px; }
.calc-suite .calc-tool-list { list-style: none; margin: 0; padding: 0; }
.calc-suite .calc-tool-list li {
  margin: 0; padding: 4px 0; border-bottom: 1px solid #eee;
}
.calc-suite .calc-tool-list a { font-weight: bold; }
.calc-suite .calc-form .calc-hint { margin-top: 2px; max-width: 320px; }
.calc-suite .calc-reset { margin-left: 8px; }
.calc-suite .calc-result {
  margin-top: 12px; padding: 8px 10px; background: #f7f7f7;
  border: 1px solid var(--line);
}
.calc-suite .calc-result-err { background: #fff5f5; border-color: #e0b4b4; }
.calc-suite .calc-primary {
  margin: 0 0 6px; font: bold 14px/18px var(--font); color: #111;
}
.calc-suite .calc-result-title { font-size: 12px; color: #333; }
.calc-suite .calc-lines { margin: 6px 0 0; padding-left: 18px; }
.calc-suite .calc-lines li { margin: 2px 0; }
.calc-suite .calc-notes { margin: 8px 0 0; padding-left: 18px; color: #666; }
.calc-suite .calc-notes li { margin: 3px 0; }
.calc-suite .calc-error { margin: 6px 0 0; color: #a00; }
.calc-suite .calc-back { margin: 0 0 10px; }
.calc-suite .calc-related { margin-top: 14px; padding-top: 8px; border-top: 1px solid #eee; }
.calc-suite .calc-related-list { list-style: none; margin: 0; padding: 0; }
.calc-suite .calc-related-list li { display: inline; margin: 0; }
.calc-suite .calc-related-list li:not(:last-child)::after { content: " · "; color: #999; }
.calc-suite .calc-foot { margin-top: 14px; }

/* Chess app — classic canvas board (pro UX) */
.chess-app .chess-lead { margin: 0 0 6px; }
.chess-app .chess-strip {
  margin: 0 0 10px; padding: 5px 8px; background: #edf2f8; border: 1px solid #c3cde0;
  font: 11px/15px var(--font);
}
.chess-app .chess-tabs { margin: 0 0 12px; }
.chess-app .chess-badge {
  display: inline-block; min-width: 14px; padding: 0 4px; margin-left: 3px;
  background: #c00; color: #fff; font: bold 10px/14px var(--font); text-align: center;
}
.chess-app .chess-badge.soft { background: #390; }
.chess-app h5 {
  margin: 12px 0 6px; padding: 0; font: bold 11px/14px var(--font); color: #333;
}
.chess-app .chess-turn-banner {
  margin: 0 0 10px; padding: 7px 9px; border: 1px solid #c3cde0; background: #f5f7fb;
  font: bold 11px/15px var(--font);
}
.chess-app .chess-turn-banner.yours {
  background: #e8f5e9; border-color: #8cbc8c;
  animation: chessPulse 1.4s ease-in-out infinite;
}
.chess-app .chess-turn-banner.pending { background: #fff8e1; border-color: #e6d9a8; }
.chess-app .chess-turn-banner.done { background: #edf2f8; }
@keyframes chessPulse {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(60,120,60,0); }
  50% { box-shadow: inset 0 0 0 1px rgba(60,120,60,0.35); }
}
.chess-app.chess-flash .chess-board { outline: 2px solid var(--fb); }
.chess-app .chess-game-layout {
  display: table; width: 100%; table-layout: fixed;
}
.chess-app .chess-game-main,
.chess-app .chess-game-side {
  display: table-cell; vertical-align: top;
}
.chess-app .chess-game-main { width: 68%; padding-right: 12px; }
.chess-app .chess-game-side { width: 32%; }
.chess-app .chess-player { margin: 0 0 6px; font: 11px/16px var(--font); }
.chess-app .chess-caps { margin-left: 6px; letter-spacing: 1px; }
.chess-app .chess-adv { margin-left: 4px; }
.chess-app .chess-movetable {
  width: 100%; border-collapse: collapse; font: 11px/16px var(--font);
}
.chess-app .chess-movetable td {
  padding: 2px 4px; border-bottom: 1px solid #eee; vertical-align: top;
}
.chess-app .chess-movetable td.n { width: 22px; color: #777; }
.chess-app .chess-movetable tr.is-last td { background: #edf2f8; font-weight: bold; }
.chess-app .chess-row-hot td { background: #fff8e1; }
.chess-app a.chess-cta {
  display: inline-block; padding: 1px 8px; text-decoration: none;
}
.chess-board-wrap { margin: 8px 0 12px; }
.chess-board-wrap.can-move { box-shadow: 0 0 0 1px #8cbc8c; }
.chess-board {
  border-collapse: collapse; border: 1px solid #333;
}
.chess-board td {
  width: 28px; height: 28px; text-align: center; vertical-align: middle;
  padding: 0; font-size: 20px; line-height: 28px;
}
.chess-board.chess-board-lg td {
  width: 34px; height: 34px; font-size: 24px; line-height: 34px;
}
.chess-board td.light { background: #f0d9b5; }
.chess-board td.dark { background: #b58863; }
.chess-board td.selected { outline: 2px solid var(--fb); outline-offset: -2px; }
.chess-board td.hint { box-shadow: inset 0 0 0 2px #6a9; }
.chess-board td.last-from,
.chess-board td.last-to { box-shadow: inset 0 0 0 34px rgba(255, 255, 100, 0.35); }
.chess-board td.in-check { box-shadow: inset 0 0 0 34px rgba(220, 40, 40, 0.38); }
.chess-board a.chess-sq {
  display: block; width: 28px; height: 28px; text-decoration: none; color: #111;
}
.chess-move-form { margin: 8px 0; }
.chess-moves { margin: 0 0 8px; line-height: 1.5; }
.chess-simple-list, .chess-lesson-list {
  list-style: none; margin: 0; padding: 0;
}
.chess-simple-list li, .chess-lesson-list li {
  margin: 0; padding: 4px 0; border-bottom: 1px solid #eee;
}
.chess-app tr.is-me td { background: #edf2f8; }
.chess-app .chess-draw-banner {
  margin: 8px 0; padding: 6px 8px; background: #fff8e1; border: 1px solid #e6d9a8;
}
.chess-app .chess-actions { margin: 6px 0 10px; }
.chess-app .chess-actions form.inline,
.chess-app .chess-draw-banner form.inline,
.chess-app .chess-turn-banner form.inline { display: inline; }
.chess-app .chess-pager { margin: 8px 0; }
.chess-app .chess-learn-progress { margin: 0 0 8px; font: 11px/15px var(--font); }
.chess-app .chess-chapter { margin: 0 0 14px; }
.chess-app .chess-path-card {
  margin: 0 0 12px; padding: 7px 9px; background: #edf2f8; border: 1px solid #c3cde0;
  font: 11px/15px var(--font);
}
.chess-app .chess-xp-bar {
  height: 8px; margin: 0 0 12px; background: #e0e0e0; border: 1px solid #ccc; overflow: hidden;
}
.chess-app .chess-xp-bar.thin { height: 5px; margin: 0 0 6px; }
.chess-app .chess-xp-bar span {
  display: block; height: 100%; background: var(--fb); min-width: 0;
}
.chess-app .chess-quiz-list {
  list-style: none; margin: 0 0 8px; padding: 0;
}
.chess-app .chess-quiz-list li { margin: 0; padding: 3px 0; }
.chess-app .chess-diagram { opacity: 0.98; }
.chess-app .chess-theme-tabs { margin: 0 0 10px; font: 11px/16px var(--font); }
.chess-app .chess-theme-tabs a.on { font-weight: bold; color: #333; text-decoration: none; }
.chess-app .chess-tip-list {
  margin: 0 0 10px 18px; padding: 0;
}
.chess-app .chess-tip-list li { margin: 0 0 4px; }
.chess-app .chess-lesson-nav { margin: 12px 0 8px; }
.chess-app .chess-done { color: #390; font-weight: bold; margin-left: 4px; }
.chess-app .chess-daily-goals {
  margin: 0 0 8px; font: 11px/15px var(--font);
}
.chess-app .chess-goal.on { color: #390; font-weight: bold; }
.chess-app .chess-badges { margin: 0 0 10px; }
.chess-app .chess-mute {
  float: right; margin-left: 8px; font-size: 10px;
}
.chess-app .chess-mute.is-off { color: #999; text-decoration: line-through; }
.chess-app .chess-hint-box { margin: 6px 0 10px; font: 11px/15px var(--font); }
.chess-app .chess-hint-text {
  display: none; margin-left: 8px; color: #555;
}
.chess-app .chess-hint-text.is-open { display: inline; }
.chess-board.chess-board-coords th.chess-coord {
  width: 14px; height: auto; padding: 0 2px;
  font: 10px/14px var(--font); color: #666; font-weight: normal;
  background: transparent; border: 0; text-align: center; vertical-align: middle;
}
.chess-board.chess-board-coords th.chess-coord.file { height: 14px; }
@media (max-width: 700px) {
  .chess-app .chess-game-layout,
  .chess-app .chess-game-main,
  .chess-app .chess-game-side {
    display: block; width: auto; padding: 0;
  }
  .chess-app .chess-game-side { margin-top: 12px; }
}
.chess-app span.chess-sq {
  display: block; width: 100%; height: 100%; color: #111;
  cursor: pointer; user-select: none;
}
.chess-app .chess-board td.dragging { opacity: 0.7; }
.chess-app .chess-board td.drag-over { outline: 2px dashed var(--fb); outline-offset: -2px; }
.chess-app .chess-clocks {
  margin: 8px 0 10px; max-width: 280px;
}
.chess-app .chess-clock-side {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 4px 8px; border: 1px solid #ccc; background: #f7f7f7;
  font: 11px/16px var(--font);
}
.chess-app .chess-clock-side + .chess-clock-meta + .chess-clock-side,
.chess-app .chess-clock-meta + .chess-clock-side { margin-top: 4px; }
.chess-app .chess-clock-meta { margin: 3px 0; font-size: 10px; }
.chess-app .chess-clock-time {
  font-weight: bold; font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right;
}
.chess-app .chess-clock-side.is-running {
  background: #edf2f8; border-color: var(--fb);
}
.chess-app .chess-clock-side.is-low .chess-clock-time { color: #a40; }
.chess-app .chess-clock-side.is-flag {
  background: #fde8e8; border-color: #c66;
}
.chess-app .chess-manual { margin: 6px 0 8px; }
.chess-app .chess-manual-check { margin-right: 4px; vertical-align: middle; }
.chess-app .chess-manual-toggle { cursor: pointer; vertical-align: middle; }
.chess-app .chess-manual-fields { display: none; margin-top: 6px; }
.chess-app .chess-manual-check:checked ~ .chess-manual-fields { display: block; }

/* OSM maps — classic profile-box, Leaflet owns its own layout */
.osm-box .osm-map {
  width: 100%; height: 220px; border: 1px solid #B3B3B3; background: #e8eef7;
}
.osm-suggest-wrap { position: relative; display: inline-block; width: 100%; max-width: 360px; }
.osm-suggest-wrap .inputtext { width: 100%; box-sizing: border-box; }
.osm-suggest-box {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  background: #fff; border: 1px solid #B3B3B3; max-height: 160px; overflow: auto;
  font: 11px/14px var(--font);
}
.osm-suggest-item {
  display: block; padding: 4px 6px; color: var(--fb); text-decoration: none;
  border-bottom: 1px solid #eee;
}
.osm-suggest-item:hover { background: #D8DFEA; }

/* —— Ферма —— */
.farm-app {
  --fm-soil: #6b4a2e;
  --fm-leaf: #2f7a45;
  --fm-sun: #e6b422;
  --fm-sky: #e7f0e8;
}
.farm-app .farm-mark { color: var(--fm-leaf); margin-left: 4px; }
.farm-app .farm-lead { margin: 0 0 8px; color: #445; }
.farm-app .farm-strip {
  margin: 0 0 10px; padding: 7px 9px;
  background: linear-gradient(180deg, #f4faf4, var(--fm-sky));
  border: 1px solid #b7cbb8; font: 11px/15px var(--font);
}
.farm-app .farm-badge {
  display: inline-block; min-width: 14px; padding: 0 4px; margin-left: 3px;
  background: var(--fm-leaf); color: #fff; font: bold 10px/14px var(--font); text-align: center;
}
.farm-app .farm-bankrupt { color: #a40; font-weight: bold; }
.farm-app .farm-bankrupt-banner {
  margin: 0 0 10px; padding: 8px 10px; border: 1px solid #e0c48a; background: #fff8e1;
  font: 11px/15px var(--font);
}
.farm-app .farm-path {
  margin: 0 0 12px; padding: 7px 9px; background: #f5f7fb; border: 1px solid #c3cde0;
  font: 11px/15px var(--font);
}
.farm-app .farm-meter {
  height: 8px; margin: 5px 0 6px; background: #dce6dd; border: 1px solid #b7cbb8; overflow: hidden;
}
.farm-app .farm-meter.thin { height: 6px; }
.farm-app .farm-meter span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #6aa86a, var(--fm-leaf));
}
.farm-app .farm-list { margin: 0; padding-left: 16px; }
.farm-app .farm-done { color: var(--fm-leaf); font-weight: bold; }

.farm-app .farm-field-layout { display: table; width: 100%; }
.farm-app .farm-field,
.farm-app .farm-side { display: table-cell; vertical-align: top; }
.farm-app .farm-field { width: 68%; padding-right: 12px; }
.farm-app .farm-field {
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.farm-app .farm-field.is-in { opacity: 1; transform: none; }
.farm-app .farm-plot {
  display: inline-block; width: 31%; min-width: 140px; margin: 0 1% 10px 0;
  vertical-align: top; border: 1px solid #8a6a45;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 40%),
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.08), transparent 50%),
    #5a3d24;
  color: #f4ffe8; font: 11px/14px var(--font);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.12);
}
.farm-app .farm-plot.state-growing { background-color: #4a6b35; border-color: #3d5c2c; }
.farm-app .farm-plot.state-ready {
  background: linear-gradient(180deg, #7aa84a, #4f7a32);
  border-color: var(--fm-sun);
  animation: farm-ready 1.5s ease-in-out infinite;
}
.farm-app .farm-plot.state-withered { background: #5a5348; opacity: .85; }
.farm-app .farm-plot.is-watered .farm-plot-inner { box-shadow: inset 0 -3px 0 rgba(90,160,220,.35); }
.farm-app .farm-plot.is-due { outline: 2px solid var(--fm-sun); }
@keyframes farm-ready {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(0,0,0,.12); }
  50% { box-shadow: inset 0 0 0 2px rgba(230,180,34,.45), 0 0 0 2px rgba(230,180,34,.25); }
}
.farm-app .farm-plot-inner { padding: 8px 8px 4px; min-height: 58px; position: relative; }
.farm-app .farm-plot-inner::before {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 6px;
  border-radius: 2px; background: var(--crop, transparent); opacity: .85;
}
.farm-app .farm-plot-idx { float: right; opacity: .7; font-size: 10px; }
.farm-app .farm-plot-title { display: block; margin: 0 0 2px; }
.farm-app .farm-plot-timer { display: block; color: #ffe9a8; font-weight: bold; }
.farm-app .farm-plot-hint { display: block; font-size: 10px; color: #dcefdc; }
.farm-app .farm-plot-acts { padding: 0 8px 8px; background: rgba(0,0,0,.15); }
.farm-app .farm-plot-acts .inputsubmit,
.farm-app .farm-plot-acts .inputbutton { margin: 2px 2px 0 0; }
.farm-app .farm-plant-form select { width: 100%; margin: 0 0 4px; font-size: 11px; }
.farm-app .farm-btn-harvest {
  background: linear-gradient(180deg, #ffe08a, #e6b422) !important;
  border-color: #a88410 !important; color: #3a2e08 !important;
}

.farm-app .farm-side { font: 11px/15px var(--font); }
.farm-app .farm-crop-list { list-style: none; margin: 0 0 10px; padding: 0; }
.farm-app .farm-crop-list li { margin: 0 0 5px; }
.farm-app .farm-crop-list li.is-locked { opacity: .55; }
.farm-app .farm-crop-list i {
  display: inline-block; width: 10px; height: 10px; margin-right: 4px;
  border: 1px solid #333; vertical-align: middle;
}
.farm-app .farm-tag {
  display: inline-block; margin-left: 4px; padding: 0 4px;
  border: 1px solid #c3cde0; background: #edf2f8; color: #567; font-size: 10px;
}
.farm-app .farm-xp { margin-top: 10px; padding-top: 8px; border-top: 1px solid #c3cde0; }

.farm-app .farm-barn .farm-animal {
  display: inline-block; width: 46%; margin: 0 2% 10px 0; padding: 8px;
  border: 1px solid #c3cde0; background: #fffaf3; vertical-align: top;
}
.farm-app .farm-shop { list-style: none; margin: 0; padding: 0; }
.farm-app .farm-shop li {
  margin: 0 0 10px; padding: 8px; border: 1px solid #c3cde0; background: #f7faf7;
}
.farm-app .farm-people { list-style: none; margin: 0; padding: 0; }
.farm-app .farm-people li {
  margin: 0 0 8px; padding: 7px; border: 1px solid #d7dee8; background: #fff;
}
.farm-app .farm-people .inputsubmit { margin-left: 6px; }

.farm-app .farm-learn { display: table; width: 100%; }
.farm-app .farm-learn-nav,
.farm-app .farm-lesson { display: table-cell; vertical-align: top; }
.farm-app .farm-learn-nav { width: 34%; padding-right: 12px; }
.farm-app .farm-lesson {
  padding: 8px 10px; border: 1px solid #c3cde0; background: #f8faf8;
}
.farm-app .farm-quiz { list-style: none; margin: 0 0 8px; padding: 0; }
.farm-app .farm-badges { margin: 8px 0; }
.farm-app .farm-badge-pill {
  display: inline-block; margin: 0 4px 4px 0; padding: 2px 7px;
  border: 1px solid #c3cde0; background: #edf2f8; color: #789; font: 10px/14px var(--font);
}
.farm-app .farm-badge-pill.on {
  border-color: #2f7a45; background: #e7f5ea; color: #1e4d2b; font-weight: bold;
}
.farm-app .farm-reset { margin: 10px 0; padding: 8px; border: 1px solid #e0c48a; background: #fff8e1; }
.farm-app .farm-foot { margin-top: 14px; }

@media (max-width: 720px) {
  .farm-app .farm-field-layout,
  .farm-app .farm-field,
  .farm-app .farm-side,
  .farm-app .farm-learn,
  .farm-app .farm-learn-nav,
  .farm-app .farm-lesson { display: block; width: auto; }
  .farm-app .farm-plot { width: 48%; }
}

/* —— Знакомства (dating) —— */
.dating-app {
  --dt-ink: #2a3340;
  --dt-rose: #b23c5a;
  --dt-rose-soft: #f7e6eb;
  --dt-leaf: #2f6b4f;
  --dt-sky: #e8eef6;
}
.dating-app .dating-spark-mark {
  color: var(--dt-rose); font-size: 12px; margin-left: 4px;
}
.dating-app .dating-lead { margin: 0 0 8px; color: #445; }
.dating-app .dating-strip {
  margin: 0 0 10px; padding: 7px 9px;
  background: linear-gradient(180deg, #fff7f9, var(--dt-sky));
  border: 1px solid #d5c2c8; font: 11px/15px var(--font); color: var(--dt-ink);
}
.dating-app .dating-badge {
  display: inline-block; min-width: 14px; padding: 0 4px; margin-left: 3px;
  background: var(--dt-rose); color: #fff; font: bold 10px/14px var(--font); text-align: center;
}
.dating-app .dating-path {
  margin: 0 0 12px; padding: 7px 9px; background: #f5f7fb; border: 1px solid #c3cde0;
  font: 11px/15px var(--font);
}
.dating-app .dating-meter {
  height: 8px; margin: 5px 0 6px; background: #dde3ee; border: 1px solid #c3cde0; overflow: hidden;
}
.dating-app .dating-meter.thin { height: 6px; }
.dating-app .dating-meter span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #d97890, var(--dt-rose));
}
.dating-app .dating-list { margin: 0; padding-left: 16px; }
.dating-app .dating-done { color: var(--dt-leaf); font-weight: bold; }

.dating-app .dating-stage {
  margin: 0 0 14px; padding: 12px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(178,60,90,.08), transparent 55%),
    linear-gradient(180deg, #fff, #f3f6fb);
  border: 1px solid #c9b4bb;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.dating-app .dating-stage.is-in { opacity: 1; transform: none; }
.dating-app .dating-hero {
  display: table; width: 100%; table-layout: fixed;
}
.dating-app .dating-hero-photo,
.dating-app .dating-hero-copy {
  display: table-cell; vertical-align: top;
}
.dating-app .dating-hero-photo {
  width: 200px; padding-right: 14px; text-align: center;
}
.dating-app .dating-hero-photo .avatar {
  width: 180px; height: 180px; object-fit: cover;
  border: 1px solid #b9a4aa; background: #eee;
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
}
.dating-app .dating-compat {
  margin: 8px auto 0; display: inline-block; min-width: 88px;
  padding: 5px 8px; border: 1px solid #d4a3b0;
  background: var(--dt-rose-soft); color: var(--dt-rose);
  font: 10px/13px var(--font);
}
.dating-app .dating-compat b {
  display: block; font: bold 18px/20px Georgia, "Times New Roman", serif; color: var(--dt-ink);
}
.dating-app .dating-name { margin: 0 0 4px; font: bold 16px/20px var(--font); }
.dating-app .dating-meta { margin: 0 0 8px; color: #567; font: 11px/15px var(--font); }
.dating-app .dating-headline {
  margin: 0 0 6px; font: bold 12px/16px Georgia, "Times New Roman", serif; color: var(--dt-ink);
}
.dating-app .dating-about { margin: 0 0 8px; font: 11px/16px var(--font); color: #333; }
.dating-app .dating-prompts { margin: 0; padding-left: 16px; font: 11px/15px var(--font); }
.dating-app .dating-prompts li { margin: 0 0 6px; }
.dating-app .dating-tag {
  display: inline-block; margin-left: 4px; padding: 0 5px;
  border: 1px solid #c3cde0; background: #edf2f8; font: 10px/14px var(--font); color: #456;
}
.dating-app .dating-tag.hot {
  border-color: #d4a3b0; background: var(--dt-rose-soft); color: var(--dt-rose);
}
.dating-app .dating-actions {
  margin: 12px 0 4px; padding-top: 10px; border-top: 1px solid #e0d0d5;
}
.dating-app .dating-actions form,
.dating-app .dating-actions a.inputsubmit { margin-right: 6px; }
.dating-app .dating-btn-like {
  background: linear-gradient(180deg, #f7d6de, #e8b0bf) !important;
  border-color: #b23c5a !important; color: #5a1528 !important;
}
.dating-app .dating-btn-super {
  background: linear-gradient(180deg, #fff3c9, #f0d78c) !important;
  border-color: #b8963a !important; color: #4a3a10 !important;
}
.dating-app .dating-queue { margin: 6px 0 0; }
.dating-app .dating-empty {
  padding: 14px; border: 1px dashed #c3cde0; background: #f7f9fc;
}

.dating-app .dating-people { list-style: none; margin: 0; padding: 0; }
.dating-app .dating-people-item {
  display: table; width: 100%; margin: 0 0 10px; padding: 8px;
  border: 1px solid #d7dee8; background: #fff;
}
.dating-app .dating-people-item.is-super { border-color: #d4a3b0; background: #fffafb; }
.dating-app .dating-people-item.is-new { border-color: #9db89d; background: #f4faf4; }
.dating-app .dating-people-ava,
.dating-app .dating-people-body { display: table-cell; vertical-align: top; }
.dating-app .dating-people-ava { width: 58px; padding-right: 10px; }
.dating-app .dating-people-body .inputsubmit { margin: 4px 6px 0 0; }
.dating-app .dating-opener-line { margin: 3px 0 5px; font: 11px/15px var(--font); color: #456; }

.dating-app .dating-match-banner {
  margin: 0 0 12px; padding: 12px 14px;
  border: 1px solid #c9a24a;
  background: linear-gradient(180deg, #fff8e1, #f7e7b0);
  font: 12px/16px var(--font);
  transform: scale(.98); opacity: .01;
  transition: transform .4s ease, opacity .4s ease;
}
.dating-app .dating-match-banner.is-pop { transform: none; opacity: 1; }
.dating-app .dating-opener { margin: 6px 0; }

.dating-app .dating-form .formtable th { width: 120px; vertical-align: top; padding-top: 6px; }
.dating-app .dating-form input[type="text"],
.dating-app .dating-form input[type="number"],
.dating-app .dating-form textarea,
.dating-app .dating-form select {
  width: 92%; max-width: 420px;
}
.dating-app .dating-badges { margin: 0 0 10px; }
.dating-app .dating-badge-pill {
  display: inline-block; margin: 0 4px 4px 0; padding: 2px 7px;
  border: 1px solid #c3cde0; background: #edf2f8; color: #789;
  font: 10px/14px var(--font);
}
.dating-app .dating-badge-pill.on {
  border-color: #b23c5a; background: var(--dt-rose-soft); color: #5a1528; font-weight: bold;
}
.dating-app .dating-tip-layout { display: table; width: 100%; }
.dating-app .dating-tip-nav,
.dating-app .dating-tip-card { display: table-cell; vertical-align: top; }
.dating-app .dating-tip-nav { width: 34%; padding-right: 12px; }
.dating-app .dating-tip-card {
  padding: 8px 10px; border: 1px solid #c3cde0; background: #f8fafc;
}
.dating-app .dating-quiz { list-style: none; margin: 0 0 8px; padding: 0; }
.dating-app .dating-quiz li { margin: 0 0 4px; }
.dating-app .dating-foot { margin-top: 14px; }

@media (max-width: 720px) {
  .dating-app .dating-hero,
  .dating-app .dating-hero-photo,
  .dating-app .dating-hero-copy,
  .dating-app .dating-tip-layout,
  .dating-app .dating-tip-nav,
  .dating-app .dating-tip-card { display: block; width: auto; }
  .dating-app .dating-hero-photo { margin-bottom: 10px; padding-right: 0; }
  .dating-app .dating-hero-photo .avatar { width: 140px; height: 140px; }
}

/* —— Poker pro UI (felt, cards, chips) —— */
.poker-app {
  --pk-felt: #1f6b3a;
  --pk-felt-deep: #145028;
  --pk-rail: #6b3e22;
  --pk-rail-hi: #8a5430;
  --pk-gold: #f0d78c;
}
.poker-app .poker-lead { margin: 0 0 6px; }
.poker-app .poker-strip {
  margin: 0 0 10px; padding: 6px 9px;
  background: linear-gradient(180deg, #f4f7fc, #e8eef8);
  border: 1px solid #c3cde0; font: 11px/15px var(--font);
}
.poker-app .poker-badge {
  display: inline-block; min-width: 14px; padding: 0 4px; margin-left: 3px;
  background: #c00; color: #fff; font: bold 10px/14px var(--font); text-align: center;
}
.poker-app .poker-badge.soft { background: #390; }
.poker-app .poker-bankrupt { color: #a40; font-weight: bold; }
.poker-app .poker-path-card {
  margin: 0 0 12px; padding: 7px 9px; background: #edf2f8; border: 1px solid #c3cde0;
  font: 11px/15px var(--font);
}
.poker-app .poker-turn-banner {
  margin: 0 0 10px; padding: 8px 10px; border: 1px solid #c3cde0; background: #f5f7fb;
  font: bold 11px/15px var(--font);
}
.poker-app .poker-turn-banner.yours {
  background: linear-gradient(180deg, #eef9ef, #dcefdc); border-color: #7aad7a;
  animation: pk-pulse 1.6s ease-in-out infinite;
}
.poker-app .poker-turn-banner.pending { background: #fff8e1; border-color: #e6d9a8; }
.poker-app .poker-turn-banner.done { background: #edf2f8; }
@keyframes pk-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(80,160,90,.0); }
  50% { box-shadow: 0 0 0 3px rgba(80,160,90,.22); }
}
.poker-app .poker-mute {
  float: right; font: 10px/14px var(--font); color: #567; cursor: pointer; text-decoration: none;
}
.poker-app .poker-mute.is-off { color: #999; }
.poker-app .poker-live,
.app-live {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  border: 1px solid #8a3; background: #f4ffe8; color: #360;
  font: bold 10px/14px var(--font); letter-spacing: .04em; vertical-align: middle;
}
.poker-app .poker-live.is-on,
.app-live.is-on,
.app-live.is-live {
  border-color: #2a7; background: #e7ffe8; color: #164;
  animation: pk-live 1.4s ease-in-out infinite;
}
@keyframes pk-live {
  0%, 100% { opacity: 1; }
  50% { opacity: .72; }
}
.farm-toast, .dating-toast, .chess-toast {
  margin: 0 0 8px; padding: 6px 9px; border: 1px solid #e6c48a; background: #fff8e8;
  font: 11px/15px var(--font); color: #643;
}
.farm-toast.is-err, .dating-toast.is-err {
  border-color: #d8a0a0; background: #fff0f0; color: #722;
}
.farm-app.is-live-tick .farm-field { outline: 1px solid rgba(80,160,90,.25); }
.poker-app .poker-toast {
  margin: 0 0 8px; padding: 6px 9px; border: 1px solid #e6c48a; background: #fff8e8;
  font: 11px/15px var(--font); color: #643;
}
.poker-app .poker-coach {
  margin: 0 0 8px; padding: 6px 9px; border: 1px solid #c3cde0; background: #f3f7fc;
  font: 11px/15px var(--font); color: #345;
}
.poker-app #poker-rt-actions .inputsubmit { margin: 0 4px 6px 0; }
.poker-app #poker-rt-actions .poker-raise-form { margin-top: 8px; }

/* Oval casino table */
.poker-app .poker-arena {
  margin: 0 0 14px; padding: 14px 12px 16px;
  background:
    radial-gradient(ellipse at 50% 30%, #3a2a1c 0%, #1a120c 70%),
    #1a120c;
  border: 1px solid #2a1c12;
}
.poker-app .poker-oval {
  position: relative; margin: 0 auto; max-width: 640px; min-height: 320px;
  padding: 18px 22px 22px;
  border-radius: 50% / 42%;
  background:
    radial-gradient(ellipse at 50% 40%, #2f8f4d 0%, var(--pk-felt) 42%, var(--pk-felt-deep) 78%),
    var(--pk-felt-deep);
  box-shadow:
    inset 0 0 0 10px var(--pk-rail),
    inset 0 0 0 13px var(--pk-rail-hi),
    inset 0 0 0 16px #4a2a14,
    inset 0 0 40px rgba(0,0,0,.35),
    0 8px 18px rgba(0,0,0,.35);
  color: #f4fff6;
}
.poker-app .poker-oval::before {
  content: ""; position: absolute; inset: 22px;
  border-radius: 50% / 42%;
  border: 1px dashed rgba(255,255,255,.12);
  pointer-events: none;
}
.poker-app .poker-felt-rail {
  position: relative; z-index: 2; text-align: center;
  margin: 0 0 8px; font: 10px/14px var(--font); color: #d7f0dd;
}
.poker-app .poker-felt-rail span {
  display: inline-block; margin: 0 3px; padding: 1px 7px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.18);
  border-radius: 2px;
}
.poker-app .poker-streets {
  position: relative; z-index: 2; text-align: center; margin: 0 0 10px;
  font: 10px/14px var(--font); color: #c5e0cc;
}
.poker-app .poker-streets i {
  display: inline-block; margin: 0 2px; padding: 1px 6px;
  border: 1px solid rgba(255,255,255,.15); opacity: .45; font-style: normal;
}
.poker-app .poker-streets i.on {
  opacity: 1; background: rgba(255,255,255,.12); color: var(--pk-gold); border-color: rgba(240,215,140,.45);
}

.poker-app .poker-seat {
  position: relative; z-index: 2; text-align: center; margin: 0 auto 6px;
  font: 11px/16px var(--font); max-width: 280px;
}
.poker-app .poker-seat.top { margin-top: 2px; }
.poker-app .poker-seat.bot { margin-top: 8px; }
.poker-app .poker-seat .poker-nameplate {
  display: inline-block; padding: 3px 10px 4px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.18);
  border-radius: 3px; color: #fff; min-width: 120px;
}
.poker-app .poker-seat.to-act .poker-nameplate {
  border-color: var(--pk-gold);
  box-shadow: 0 0 0 1px rgba(240,215,140,.35);
}
.poker-app .poker-seat .poker-stack-line { color: #d2e8d7; font-size: 10px; }
.poker-app .poker-dealer {
  display: inline-block; width: 18px; height: 18px; margin-left: 4px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ddd 55%, #aaa);
  color: #222; font: bold 10px/18px var(--font); text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.4); vertical-align: middle;
}
.poker-app .poker-bet-line {
  margin: 4px 0 2px; min-height: 22px; color: var(--pk-gold); font: bold 10px/14px var(--font);
}
.poker-app .poker-hole { margin-top: 5px; white-space: nowrap; }
.poker-app .poker-board-wrap { position: relative; z-index: 2; text-align: center; margin: 8px 0 4px; }
.poker-app .poker-pot {
  margin: 0 0 6px; font: bold 12px/16px Georgia, "Times New Roman", serif; color: var(--pk-gold);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.poker-app .poker-pot .pk-chip-stack { margin-right: 6px; vertical-align: middle; }
.poker-app .poker-board { min-height: 72px; }
.poker-app .poker-board .pk-card,
.poker-app .poker-hole .pk-card { margin: 0 3px; }
.poker-app .pk-slot {
  display: inline-block; width: 44px; height: 62px; margin: 0 3px;
  border: 1px dashed rgba(255,255,255,.18); border-radius: 5px;
  background: rgba(0,0,0,.12); vertical-align: top;
}
.poker-app .poker-hand-hint {
  margin: 4px 0 0; font: 10px/14px var(--font); color: #cfe8d4;
}

/* Playing cards */
.poker-app .pk-card,
.pk-card {
  --deal: 0;
  position: relative; display: inline-block; width: 44px; height: 62px;
  vertical-align: top; border-radius: 5px;
  background: linear-gradient(165deg, #fff 0%, #f7f7f4 55%, #eee 100%);
  border: 1px solid #2a2a2a;
  box-shadow: 0 2px 3px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.65);
  color: #151515;
  font: 700 11px/1.05 Georgia, "Times New Roman", serif;
  animation: pk-deal .38s ease both;
  animation-delay: calc(var(--deal) * 60ms);
  transform-origin: 50% 120%;
}
@keyframes pk-deal {
  from { opacity: 0; transform: translateY(-14px) rotate(-8deg) scale(.92); }
  to { opacity: 1; transform: none; }
}
.poker-app .pk-card.red { color: #c11818; }
.poker-app .pk-card .pk-corner {
  position: absolute; display: block; text-align: center; line-height: 1.05;
}
.poker-app .pk-card .pk-corner.tl { top: 3px; left: 4px; }
.poker-app .pk-card .pk-corner.br {
  right: 4px; bottom: 3px; transform: rotate(180deg);
}
.poker-app .pk-card .pk-corner i { display: block; font-style: normal; font-size: 12px; }
.poker-app .pk-card .pk-corner u { display: block; text-decoration: none; font-size: 11px; }
.poker-app .pk-card .pk-pip {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  text-align: center; font-size: 22px; line-height: 1;
}
.poker-app .pk-card.mine {
  box-shadow: 0 2px 4px rgba(0,0,0,.32), 0 0 0 1px #d4b44a, inset 0 0 0 1px #fff;
}
.poker-app .pk-card.back {
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 40%),
    repeating-linear-gradient(45deg, #1e3a6e 0 3px, #274a86 3px 6px);
  border-color: #14284a; color: #fff;
}
.poker-app .pk-card.back .pk-back-pattern {
  position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.28);
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,220,140,.35), transparent 55%),
    repeating-linear-gradient(-45deg, transparent 0 4px, rgba(255,255,255,.08) 4px 5px);
}
.poker-app .pk-card.lg { width: 52px; height: 74px; }
.poker-app .pk-card.lg .pk-pip { font-size: 26px; }
.poker-app .pk-card.lg .pk-corner i { font-size: 13px; }

/* Chips */
.poker-app .pk-chip-stack {
  position: relative; display: inline-block; width: 28px; height: 22px; vertical-align: middle;
}
.poker-app .pk-chip {
  position: absolute; left: 4px; width: 20px; height: 20px; border-radius: 50%;
  bottom: calc(var(--n) * 2px); border: 2px dashed rgba(255,255,255,.55);
  box-shadow: 0 1px 1px rgba(0,0,0,.45), inset 0 0 0 2px rgba(0,0,0,.15);
}
.poker-app .pk-chip.red { background: radial-gradient(circle at 35% 30%, #ff6b6b, #c62828); }
.poker-app .pk-chip.blue { background: radial-gradient(circle at 35% 30%, #64b5f6, #1565c0); }
.poker-app .pk-chip.green { background: radial-gradient(circle at 35% 30%, #81c784, #2e7d32); }
.poker-app .pk-chip.black { background: radial-gradient(circle at 35% 30%, #777, #222); }
.poker-app .pk-chip.purple { background: radial-gradient(circle at 35% 30%, #ba68c8, #6a1b9a); }
.poker-app .pk-chip.yellow { background: radial-gradient(circle at 35% 30%, #ffe082, #f9a825); }
.poker-app .pk-chip.orange { background: radial-gradient(circle at 35% 30%, #ffb74d, #ef6c00); }
.poker-app .pk-chip.pink { background: radial-gradient(circle at 35% 30%, #f48fb1, #ad1457); }
.poker-app .pk-chip.gray { background: radial-gradient(circle at 35% 30%, #eee, #9e9e9e); }

.poker-app .poker-actions {
  margin: 8px 0; padding: 8px; background: #f4f7fc; border: 1px solid #c3cde0;
}
.poker-app .poker-actions form.inline { display: inline; margin-right: 6px; }
.poker-app .poker-actions .inputsubmit { min-width: 72px; }
.poker-app .poker-raise-form { margin: 6px 0 10px; }
.poker-app .poker-raise-presets { margin: 0 0 6px; }
.poker-app .poker-raise-presets button {
  margin-right: 4px; margin-bottom: 3px;
}
.poker-app .poker-simple-list { list-style: none; margin: 0; padding: 0; }
.poker-app .poker-simple-list li {
  margin: 0; padding: 4px 0; border-bottom: 1px solid #eee;
}
.poker-app .poker-row-hot td { background: #fff8e1; }
.poker-app a.poker-cta { display: inline-block; padding: 1px 8px; text-decoration: none; }
.poker-app .poker-xp-bar {
  height: 8px; margin: 0 0 12px; background: #e0e0e0; border: 1px solid #ccc; overflow: hidden;
}
.poker-app .poker-xp-bar.thin { height: 5px; margin: 0 0 6px; }
.poker-app .poker-xp-bar span { display: block; height: 100%; background: var(--fb); }
.poker-app .poker-quiz-list { list-style: none; margin: 0 0 8px; padding: 0; }
.poker-app .poker-quiz-list li { margin: 0; padding: 3px 0; }
.poker-app .poker-done { color: #390; font-weight: bold; margin-left: 4px; }
.poker-app .poker-learn-progress { margin: 0 0 8px; font: 11px/15px var(--font); }
.poker-app .poker-chapter { margin: 0 0 14px; }
.poker-app .poker-theme-tabs { margin: 0 0 10px; font: 11px/16px var(--font); }
.poker-app .poker-theme-tabs a.on { font-weight: bold; color: #333; text-decoration: none; }
.poker-app .poker-hint-box { margin: 6px 0 10px; font: 11px/15px var(--font); }
.poker-app .poker-hint-text { display: none; margin-left: 8px; color: #555; }
.poker-app .poker-hint-check:checked ~ .poker-hint-text { display: inline; }
.poker-app tr.is-me td { background: #edf2f8; }
.poker-app h5 {
  margin: 12px 0 6px; padding: 0; font: bold 11px/14px var(--font); color: #333;
}
.poker-app .poker-lobby-grid {
  display: table; width: 100%; margin: 0 0 12px; border-collapse: separate; border-spacing: 10px 0;
}
.poker-app .poker-lobby-col {
  display: table-cell; width: 50%; vertical-align: top;
  padding: 8px 10px; border: 1px solid #c3cde0;
  background: linear-gradient(180deg, #fbfcfe, #f0f4fa);
}
.poker-app .poker-room-panel {
  margin: 0 0 12px; padding: 10px 12px; border: 1px solid #c3cde0;
  background: linear-gradient(180deg, #fbfcfe, #f0f4fa);
}
.poker-app .poker-code-box {
  margin: 6px 0 10px; padding: 6px 8px; background: #fff8e1; border: 1px dashed #c9b66b;
  font: 12px/16px var(--font);
}
.poker-app .poker-lock {
  display: inline-block; margin-left: 4px; padding: 0 5px;
  background: #555; color: #fff; font: bold 10px/14px var(--font);
}
.poker-app .poker-seats-row { margin: 8px 0 10px; }
.poker-app .poker-seat-slot {
  display: inline-block; width: 46%; margin-right: 2%; padding: 8px;
  border: 1px solid #c3cde0; background: #fff; vertical-align: top;
  font: 11px/15px var(--font);
}
.poker-app .poker-seat-slot.me { border-color: #3B5998; background: #edf2f8; }
.poker-app .poker-seat-slot.empty { opacity: .7; }
.poker-app .poker-seats-row.multi .poker-seat-slot {
  width: 30%; margin: 0 1% 6px; min-width: 90px;
}
.poker-app .poker-mini-felt {
  margin: 0 0 12px; padding: 10px; border-radius: 8px;
  background: radial-gradient(ellipse at center, #2f8f4d, #145028);
  color: #e8ffe8; text-align: center; font: 11px/15px var(--font);
}
.poker-app .poker-goals .poker-simple-list li { border: 0; padding: 2px 0; }
.poker-app .poker-badges { margin: 8px 0 12px; }
.poker-app .poker-badge-pill {
  display: inline-block; margin: 0 4px 4px 0; padding: 2px 7px;
  border: 1px solid #c3cde0; background: #f5f7fb; font: 10px/14px var(--font); color: #789;
}
.poker-app .poker-badge-pill.on {
  background: #fff8e1; border-color: #c9b66b; color: #333; font-weight: bold;
}

/* Multi-seat ring on oval */
.poker-app .poker-oval.is-multi { min-height: 380px; position: relative; }
.poker-app .poker-multi-ring { position: absolute; inset: 28px 24px 70px; z-index: 2; pointer-events: none; }
.poker-app .poker-mseat {
  position: absolute; width: 130px; margin-left: -65px; text-align: center;
  font: 11px/15px var(--font); pointer-events: auto;
}
.poker-app .poker-mseat .poker-nameplate { min-width: 0; max-width: 130px; }
.poker-app .poker-mseat.folded { opacity: .45; }
.poker-app .poker-mseat.folded .poker-hole { filter: grayscale(.8); }
.poker-app .poker-mseat.to-act .poker-nameplate {
  border-color: var(--pk-gold); box-shadow: 0 0 0 1px rgba(240,215,140,.4);
}
.poker-app .poker-mseat.me .poker-nameplate { background: rgba(30,60,120,.45); }
.poker-app .poker-board-wrap.center-board {
  position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%);
  z-index: 3; width: 90%;
}
/* angle classes: 0=top, 90=right, 180=bottom, 270=left */
.poker-app .poker-mseat.a0 { left: 50%; top: 0; }
.poker-app .poker-mseat.a60 { left: 82%; top: 12%; }
.poker-app .poker-mseat.a72 { left: 86%; top: 18%; }
.poker-app .poker-mseat.a90 { left: 92%; top: 38%; }
.poker-app .poker-mseat.a120 { left: 82%; top: 62%; }
.poker-app .poker-mseat.a144 { left: 78%; top: 68%; }
.poker-app .poker-mseat.a180 { left: 50%; top: auto; bottom: 0; }
.poker-app .poker-mseat.a216 { left: 22%; top: 68%; }
.poker-app .poker-mseat.a240 { left: 18%; top: 62%; }
.poker-app .poker-mseat.a270 { left: 8%; top: 38%; }
.poker-app .poker-mseat.a288 { left: 14%; top: 18%; }
.poker-app .poker-mseat.a300 { left: 18%; top: 12%; }
@media (max-width: 640px) {
  .poker-app .poker-lobby-grid,
  .poker-app .poker-lobby-col { display: block; width: auto; }
  .poker-app .poker-lobby-col { margin-bottom: 8px; }
  .poker-app .poker-seat-slot { display: block; width: auto; margin: 0 0 6px; }
  .poker-app .poker-oval {
    border-radius: 28px; min-height: 360px; padding: 14px 10px;
    box-shadow:
      inset 0 0 0 8px var(--pk-rail),
      inset 0 0 0 11px var(--pk-rail-hi),
      inset 0 0 0 14px #4a2a14,
      0 6px 14px rgba(0,0,0,.3);
  }
  .poker-app .poker-oval::before { inset: 16px; border-radius: 20px; }
  .poker-app .pk-card { width: 40px; height: 56px; }
  .poker-app .pk-slot { width: 40px; height: 56px; }
}

/* ===== Micro-interactions ===== */
.inputtext, .inputpassword, select, textarea,
input[type="text"], input[type="password"] {
  transition: border-color .15s ease, box-shadow .15s ease;
}
.inputtext:focus, .inputpassword:focus, select:focus, textarea:focus,
input[type="text"]:focus, input[type="password"]:focus {
  border-color: #3B5998;
  box-shadow: 0 0 0 2px rgba(59, 89, 152, 0.15);
  outline: none;
}
.inputsubmit, .inputbutton, button.inputbutton,
input[type="submit"], input[type="button"] {
  transition: background .12s ease, box-shadow .12s ease, transform .06s ease;
}
.inputsubmit:hover, .inputbutton:hover, input[type="submit"]:hover, input[type="button"]:hover {
  background: #4a6abf;
}
.inputsubmit:active, .inputbutton:active, input[type="submit"]:active, input[type="button"]:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
.inputsubmit:focus-visible, input[type="submit"]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}
a { transition: color .1s ease; }
.profile-box { transition: box-shadow .2s ease; }
.news-item, .wallpost { transition: background .15s ease; }
.classic-person-row { transition: background .12s ease; }
.classic-person-row:hover { background: #f7f8fa; }
.gift-tile { transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.gift-tile:hover { transform: translateY(-2px); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); }
.compose-from-photo { transition: border-color .12s ease, transform .12s ease; }
.compose-from-photo:hover { transform: scale(1.06); }
.pager a { transition: background .12s ease, color .12s ease; padding: 3px 6px; border-radius: 2px; }

/* ===== Welcome / home page polish ===== */
.welcome #content {
  padding: 0 !important;
  overflow: hidden;
}
.welcome .welcome-hero {
  background: linear-gradient(135deg, #3B5998 0%, #4a6abf 50%, #2a4275 100%);
  padding: 40px 24px 32px; color: #fff; text-align: center;
}
.welcome .welcome-hero h2 {
  font: bold 24px/30px "lucida grande", tahoma, verdana, arial, sans-serif;
  margin: 0 0 12px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.welcome .welcome-hero p {
  font: 13px/18px "lucida grande", tahoma, verdana, arial, sans-serif;
  color: #d8dfea; margin: 0 auto 16px; max-width: 560px;
}
.welcome .welcome-hero .welcome-cta-btn {
  display: inline-block; padding: 8px 24px;
  background: #fff; color: #3B5998;
  font: bold 13px/18px "lucida grande", tahoma, verdana, arial, sans-serif;
  text-decoration: none; border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform .12s ease, box-shadow .12s ease;
}
.welcome .welcome-hero .welcome-cta-btn:hover {
  transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); text-decoration: none;
}
.welcome .welcome-features {
  overflow: hidden; padding: 20px 24px;
}
.welcome .welcome-feature {
  float: left; width: 50%; box-sizing: border-box; padding: 8px 16px;
}
.welcome .welcome-feature h3 {
  font: bold 13px/18px "lucida grande", tahoma, verdana, arial, sans-serif;
  color: #3B5998; margin: 0 0 4px;
}
.welcome .welcome-feature p {
  font: 11px/16px "lucida grande", tahoma, verdana, arial, sans-serif;
  color: #555; margin: 0;
}
.welcome .welcome-foot {
  padding: 12px 24px 20px; text-align: center;
  border-top: 1px solid #D8DFEA; margin: 0 24px;
}
.welcome .welcome-foot p { font-size: 11px; color: #777; margin: 4px 0; }

/* ===== Login / register polish ===== */
#loginform .inputtext, #loginform .inputpassword,
#loginform input[type="text"], #loginform input[type="password"] {
  border-radius: 2px; transition: border-color .15s ease, box-shadow .15s ease;
}
#loginform .inputtext:focus, #loginform .inputpassword:focus,
#loginform input[type="text"]:focus, #loginform input[type="password"]:focus {
  border-color: #3B5998; box-shadow: 0 0 0 2px rgba(59, 89, 152, 0.15); outline: none;
}
.reg-wrap .inputtext, .reg-wrap .inputpassword,
.reg-wrap input[type="text"], .reg-wrap input[type="password"] {
  border-radius: 2px; transition: border-color .15s ease, box-shadow .15s ease;
}
.reg-wrap .inputtext:focus, .reg-wrap .inputpassword:focus,
.reg-wrap input[type="text"]:focus, .reg-wrap input[type="password"]:focus {
  border-color: #3B5998; box-shadow: 0 0 0 2px rgba(59, 89, 152, 0.15); outline: none;
}
#loginform .inputsubmit:hover, .reg-wrap .inputsubmit:hover { background: #4a6abf; }

/* ===== Responsive breakpoints ===== */
@media (max-width: 780px) {
  #book { width: 100%; padding: 0; }
  #pageheader { width: 100%; height: auto; overflow: visible; background: var(--fb); padding: 6px 10px; box-sizing: border-box; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
  #homelink { position: static; width: auto; height: auto; font-size: 14px; font-weight: bold; }
  #homelink a { color: #fff; text-decoration: none; padding: 2px 6px; }
  #gnav { position: static; width: auto; flex: 1; text-align: right; line-height: 20px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
  #gnav li { display: inline; }
  #gnav a, #gnav button.linkish { padding: 3px 6px; font-size: 12px; }
  #sidebar { float: none; width: 100%; margin: 0; padding: 8px 10px; box-sizing: border-box; }
  #qsearch { width: 100%; margin: 0 0 8px; }
  #qsearch .inputtext { width: 100%; box-sizing: border-box; }
  #snav { width: 100%; margin: 0; }
  #snav .snav-more, #snav .snav-more-toggle, #snav .snav-more-panel a { width: 100%; box-sizing: border-box; }
  #squicklogin { width: 100%; box-sizing: border-box; }
  #squicklogin .inputtext { width: 100%; box-sizing: border-box; }
  #pagebody { float: none; width: 100%; margin: 0; }
  #header { padding: 0 10px; }
  #content { padding: 10px; }
  .profile #content { padding: 10px !important; }
  .profile #profilenarrowcolumn { float: none; width: 100%; margin: 0 0 12px; }
  .profile #profilewidecolumn { float: none; width: 100%; }
  .profile #userprofile { background: #fff; }
  .profile-picture, .profile-picture img { width: 160px; height: 160px; margin: 0 auto; }
  .feed-main, .feed-rail { float: none; width: 100%; }
  .feed-rail { margin-top: 14px; }
  .group-rail, .group-main { float: none; width: 100%; }
  .group-rail { margin-bottom: 12px; }
  .events-page .event-main, .events-page .event-side { float: none; width: 100%; }
  .events-page .event-side { margin-top: 12px; }
  .profile-tl .tl-cover-photo { height: 160px; }
  .profile-tl .tl-avatar img { width: 96px; height: 96px; }
  .profile-tl .tl-who h1 { padding-top: 52px; font-size: 18px; }
  .profile-tl .tl-cover-foot { bottom: -28px; }
  .profile-tl .tl-avatar { margin: 0 10px 0 0; border-width: 3px; }
  .wallpost td.image { width: 40px; }
  .wallpost td.image img { width: 40px; height: 40px; }
  .wall-comment .wc-ava { width: 28px; }
  .wall-comment .wc-ava img { width: 28px; height: 28px; }
  .classic-person-name img { width: 40px; height: 40px; }
  .gift-tile { width: 72px; height: 72px; }
  .welcome .welcome-feature { width: 100%; float: none; padding: 6px 0; }
  .welcome .welcome-hero { padding: 28px 16px 24px; }
  .welcome .welcome-hero h2 { font-size: 20px; }
  .welcome .welcome-hero p { font-size: 12px; }
  .fb-dialog { width: 92%; left: 4%; margin-left: 0; }
  .fb-dialog-wide { width: 94%; left: 3%; margin-left: 0; }
  .fb-dialog-photo { width: 94%; left: 3%; margin-left: 0; }
  .inbox-table .col-from { width: 120px; }
  .inbox-pane .msg-compose textarea,
  .inbox-pane .msg-compose .inputtext { width: 100%; }
  .mygroups-table .col-type { display: none; }
  .discuss-table .col-author { width: 80px; }
  .discuss-table .col-when { width: 70px; }
}
@media (max-width: 480px) {
  #pageheader { flex-direction: column; align-items: stretch; }
  #gnav { text-align: center; justify-content: center; }
  #gnav a, #gnav button.linkish { font-size: 11px; padding: 3px 4px; }
  .profile-tl .tl-cover-photo { height: 120px; }
  .profile-tl .tl-avatar img { width: 72px; height: 72px; }
  .profile-tl .tl-avatar { border-width: 2px; }
  .profile-tl .tl-who h1 { padding-top: 36px; font-size: 16px; }
  .profile-tl .tl-cover-foot { bottom: -20px; }
  .profile-picture, .profile-picture img { width: 120px; height: 120px; }
  .gift-tile { width: 64px; height: 64px; }
  .welcome .welcome-hero h2 { font-size: 18px; line-height: 24px; }
  .welcome .welcome-hero { padding: 22px 12px 18px; }
  .wallpost td.image { display: none; }
  .inbox-table .col-from { width: auto; }
  .inbox-table .col-when { display: none; }
  .mygroups-table .col-n { display: none; }
  .discuss-table .col-author, .discuss-table .col-when { display: none; }
}