/* ===== Symbian S60v5 Facebook Style ===== */

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:#dfe3e8;
  font-size:12px;
  color:#111;
}

a{
  text-decoration:none;
  color:#1b4e9b;
}

/* ===== HEADER ===== */
.sym-top{
  background:#3b5998;
  color:#fff;
  padding:8px 10px;
  border-bottom:2px solid #2c4f87;
}

.sym-title{
  font-weight:bold;
  font-size:14px;
}

.sym-wrap{
  padding:8px;
  padding-bottom:60px;
}

/* ===== STATUS BAR ===== */
.sym-status{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
}

.sym-avatar{
  width:28px;
  height:28px;
  border:1px solid #aaa;
  background:#e0e0e0;
}

.sym-input{
  flex:1;
  border:1px solid #b5b5b5;
  background:#fff;
  padding:6px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
}

.sym-iconbtn{
  width:26px;
  height:26px;
  border:1px solid #b5b5b5;
  background:linear-gradient(#ffffff,#dcdcdc);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 1px 0 #fff;
  font-weight:bold;
  color:#444;
}

/* ===== GRID MENU ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.tile{
  background:linear-gradient(#f7f7f7,#dcdcdc);
  border:1px solid #b5b5b5;
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -1px 0 #c2c2c2,
    0 1px 2px rgba(0,0,0,0.15);
  padding:14px 6px;
  text-align:center;
}

.tile:active{
  background:linear-gradient(#d0d0d0,#bcbcbc);
}

.tile .ico{
  width:42px;
  height:36px;
  margin:0 auto 8px auto;
  background:linear-gradient(#ffffff,#e6e6e6);
  border:1px solid #bdbdbd;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px rgba(0,0,0,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
}

.tile img{
  width:24px;
  height:24px;
}

.tile .label{
  font-size:12px;
  color:#222;
}

.badge{
  display:inline-block;
  background:#c62828;
  color:#fff;
  font-size:10px;
  padding:2px 5px;
  border-radius:10px;
  margin-left:4px;
}

/* ===== FEED CARDS ===== */
.card{
  background:#fff;
  border:1px solid #b5b5b5;
  box-shadow:0 1px 2px rgba(0,0,0,0.1);
  padding:8px;
  margin-bottom:8px;
}

.meta{
  font-size:11px;
  color:#666;
}

textarea,
input{
  width:98%;
  box-sizing:border-box;
  padding:6px;
  border:1px solid #b5b5b5;
}

.btn{
  background:#3b5998;
  color:#fff;
  border:1px solid #2c4f87;
  padding:6px 10px;
}

.actions{
  margin-top:6px;
}

.comment{
  border-top:1px dotted #cfcfcf;
  margin-top:6px;
  padding-top:6px;
}

.small{
  font-size:11px;
  color:#333;
}

img.post-photo{
  max-width:100%;
  height:auto;
  border:1px solid #cfcfcf;
  margin-top:6px;
}

/* ===== FOOTER ===== */
.sym-bottom{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  background:#3b5998;
  border-top:2px solid #2c4f87;
  padding:8px 10px;
  display:flex;
  gap:15px;
}

.sym-menu{
  color:#fff;
  font-weight:bold;
}